This repository has been archived by the owner on Jul 31, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
FLOW-965 f-input-light element created to fix 1Password autofill issue (
#196) * FLOW-965 f-input-light component added * FLOW-965 story updated * FLOW-965 FInputBase created for commn props and functions * FLOW-965 FInputBase created for commn props and functions * FLOW-965 login form story created * FLOW-965 login story updated * FLOW-965 login form with validation and f-input-light elements * FLOW-965 validation api added in login form * FLOW-965 f-input value setting bug fixed * FLOW-965 on input and on blur validaiton * FLOW-965 changelogs updated * FLOW-965 sonar issue fixed * FLOW-965 sonar issue fixed * FLOW-965 sonar issue fixed
- Loading branch information
1 parent
8d04c3a
commit ac417c6
Showing
18 changed files
with
1,004 additions
and
617 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 61 additions & 0 deletions
61
packages/flow-core/src/components/f-form-field/f-form-field.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import { html } from "lit"; | ||
|
||
import { FRoot } from "../../mixins/components/f-root/f-root"; | ||
import { FDiv } from "../f-div/f-div"; | ||
import { flowElement } from "./../../utils"; | ||
|
||
@flowElement("f-form-field") | ||
export class FFormField extends FRoot { | ||
static styles = [...FDiv.styles]; | ||
render() { | ||
/** | ||
* Final html to render | ||
*/ | ||
return html` | ||
<f-div padding="none" gap="x-small" direction="column" width="100%"> | ||
<f-div padding="none" gap="none" align="bottom-left"> | ||
<f-div padding="none" direction="column" width="fill-container"> | ||
<f-div padding="none" gap="auto" direction="row" height="hug-content"> | ||
<f-div | ||
padding="none" | ||
gap="small" | ||
direction="row" | ||
width="hug-content" | ||
height="hug-content" | ||
> | ||
<slot name="label"></slot> | ||
<slot name="icon-tooltip"></slot> | ||
</f-div> | ||
<f-div width="hug-content"> | ||
<slot name="subtitle"></slot> | ||
</f-div> | ||
</f-div> | ||
<slot name="description"></slot> | ||
</f-div> | ||
</f-div> | ||
<f-div | ||
gap="x-small" | ||
direction="row" | ||
width="100%" | ||
class="f-input-row" | ||
align="middle-center" | ||
overflow="hidden" | ||
> | ||
<slot></slot> | ||
</f-div> | ||
<f-div> | ||
<slot name="help"></slot> | ||
</f-div> | ||
</f-div> | ||
`; | ||
} | ||
} | ||
|
||
/** | ||
* Required for typescript | ||
*/ | ||
declare global { | ||
interface HTMLElementTagNameMap { | ||
"f-form-field": FFormField; | ||
} | ||
} |
168 changes: 168 additions & 0 deletions
168
packages/flow-core/src/components/f-input/f-input-base.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,168 @@ | ||
import { FRoot } from "../../mixins/components/f-root/f-root"; | ||
import { property, state } from "lit/decorators.js"; | ||
|
||
export type FInputState = "primary" | "default" | "success" | "warning" | "danger"; | ||
|
||
export type FInputCustomEvent = { | ||
value?: string | number; | ||
type: "clear" | "input"; | ||
}; | ||
|
||
export type FInputSuffixWhen = (value?: string | number) => boolean; | ||
|
||
export class FInputBase extends FRoot { | ||
/** | ||
* @attribute local state for password to text toggling and vice versa. | ||
*/ | ||
@state({}) | ||
showPassword = false; | ||
/** | ||
* @attribute Variants are various visual representations of an input field. | ||
*/ | ||
@property({ reflect: true, type: String }) | ||
variant?: "curved" | "round" | "block" = "curved"; | ||
|
||
/** | ||
* @attribute Categories are various visual representations of an input field. | ||
*/ | ||
@property({ reflect: true, type: String }) | ||
category?: "fill" | "outline" | "transparent" = "fill"; | ||
|
||
/** | ||
* @attribute States are used to communicate purpose and connotations. | ||
*/ | ||
@property({ reflect: true, type: String }) | ||
state?: FInputState = "default"; | ||
|
||
/** | ||
* @attribute f-input can have 2 sizes. By default size is inherited by the parent f-field. | ||
*/ | ||
@property({ reflect: true, type: String }) | ||
size?: "medium" | "small" = "medium"; | ||
|
||
/** | ||
* @attribute The type attribute specifies the type of <input> element to display. | ||
*/ | ||
@property({ reflect: true, type: String }) | ||
type?: "text" | "number" | "email" | "password" | "url" | "tel" = "text"; | ||
|
||
/** | ||
* @attribute Defines the value of an f-input. Validation rules are applied on the value depending on the type property of the f-text-input. | ||
*/ | ||
@property({ reflect: true, type: String }) | ||
value?: string | number; | ||
|
||
/** | ||
* @attribute Defines the placeholder text for f-input and f-input-light | ||
*/ | ||
@property({ reflect: true, type: String }) | ||
placeholder?: string; | ||
|
||
/** | ||
* @attribute The icon-left property allows the placement of an icon to the left of the input value | ||
*/ | ||
@property({ reflect: true, type: String, attribute: "icon-left" }) | ||
iconLeft?: string; | ||
|
||
/** | ||
* @attribute The icon-right property allows the placement of an icon to the right of the input value | ||
*/ | ||
@property({ reflect: true, type: String, attribute: "icon-right" }) | ||
iconRight?: string; | ||
|
||
/** | ||
* @attribute The prefix property facilitates the addition of a string on the left side of the input box. | ||
*/ | ||
@property({ reflect: true, type: String }) | ||
prefix: string | null = null; | ||
/** | ||
* @attribute The suffix property facilitates the addition of a string on the right side of the input box. | ||
*/ | ||
@property({ reflect: true, type: String }) | ||
suffix?: string; | ||
|
||
/** | ||
* @attribute The maxLength property of an input box specifies the maximum number of characters that a user can input into the field. | ||
*/ | ||
@property({ reflect: true, type: [Number, undefined], attribute: "max-length" }) | ||
maxLength?: number; | ||
|
||
/** | ||
* @attribute The loading property, when enabled, facilitates the display of a loading icon on the right side of the input box. | ||
*/ | ||
@property({ reflect: true, type: Boolean }) | ||
loading?: boolean = false; | ||
|
||
/** | ||
* @attribute Shows disabled state of input element | ||
*/ | ||
@property({ reflect: true, type: Boolean }) | ||
disabled?: boolean = false; | ||
|
||
/** | ||
* @attribute Displays a close icon-button on the right side of the input that allows the user to clear the input value | ||
*/ | ||
@property({ reflect: true, type: Boolean }) | ||
clear?: boolean = true; | ||
|
||
/** | ||
* @attribute When true the user can not select the input element. | ||
*/ | ||
@property({ reflect: true, type: Boolean, attribute: "read-only" }) | ||
readOnly?: boolean = false; | ||
|
||
@property({ reflect: false, type: Function }) | ||
suffixWhen?: FInputSuffixWhen; | ||
|
||
/** | ||
* emit input custom event | ||
*/ | ||
handleInput(e: InputEvent) { | ||
e.stopPropagation(); | ||
const val = (e.target as HTMLInputElement)?.value; | ||
this.value = this.type === "number" ? Number(val) : val; | ||
this.dispatchInputEvent(this.value, "input"); | ||
} | ||
|
||
/** | ||
* clear input value on clear icon clicked | ||
*/ | ||
clearInputValue() { | ||
this.value = undefined; | ||
this.dispatchInputEvent(undefined, "clear"); | ||
} | ||
|
||
dispatchInputEvent(value: string | number | undefined, type: "clear" | "input") { | ||
const event = new CustomEvent<FInputCustomEvent>("input", { | ||
detail: { | ||
value: value, | ||
type: type | ||
}, | ||
bubbles: true, | ||
composed: true | ||
}); | ||
|
||
this.dispatchEvent(event); | ||
} | ||
|
||
/** | ||
* icon size | ||
*/ | ||
get iconSize() { | ||
if (this.size === "medium") return "small"; | ||
else if (this.size === "small") return "x-small"; | ||
else return undefined; | ||
} | ||
|
||
/** | ||
* Toggle Password view | ||
*/ | ||
togglePasswordView() { | ||
if (this.type === "text") { | ||
this.type = "password"; | ||
} else { | ||
this.type = "text"; | ||
} | ||
this.showPassword = !this.showPassword; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.