Skip to content
This repository has been archived by the owner on Jul 31, 2024. It is now read-only.

Commit

Permalink
FLOW-965 f-input-light element created to fix 1Password autofill issue (
Browse files Browse the repository at this point in the history
#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
vikas-cldcvr authored Nov 27, 2023
1 parent 8d04c3a commit ac417c6
Show file tree
Hide file tree
Showing 18 changed files with 1,004 additions and 617 deletions.
9 changes: 9 additions & 0 deletions packages/flow-core/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,15 @@

# Change Log

## [2.4.0] - 2023-11-22

### Improvements

- The 1Password manager does not currently support Shadow DOM for autofill, and a timeline for its implementation has not been provided. Consequently, we are introducing `f-input-light` as a light DOM alternative to `f-input`.
- Login form story added [here](https://flow.ollion.com/v2/index.html?path=/story/cldcvr-flow-form-builder--login-form). It uses `f-input-light` and validation module from `@cldcvr/flow-form-builder`.
- `f-form-field` wrapper elements added to support `lable`, `subtitle`,`help` slots.
- **Note : `f-input-light` won't support `lable`, `subtitle`,`help` slots**.

## [2.3.1] - 2023-11-22

### Features
Expand Down
2 changes: 1 addition & 1 deletion packages/flow-core/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@cldcvr/flow-core",
"version": "2.3.1",
"version": "2.4.0",
"description": "Core package of flow design system",
"module": "dist/flow-core.es.js",
"main": "dist/flow-core.cjs.js",
Expand Down
9 changes: 9 additions & 0 deletions packages/flow-core/src/components/f-div/f-div-global.scss
Original file line number Diff line number Diff line change
Expand Up @@ -300,6 +300,11 @@ f-div {
flex: 1 1;
max-height: 100%;
}
> f-form-field {
flex: 1 1;
width: 100%;
max-height: 100%;
}
> f-div[width="fill-container"] {
width: 100%;
}
Expand All @@ -318,6 +323,10 @@ f-div {
flex: 1 1;
max-width: 100%;
}
> f-form-field {
flex: 1 1;
max-width: 100%;
}
> f-div[height="fill-container"] {
height: 100%;
}
Expand Down
61 changes: 61 additions & 0 deletions packages/flow-core/src/components/f-form-field/f-form-field.ts
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 packages/flow-core/src/components/f-input/f-input-base.ts
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;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ f-input {
width: 100%;
&[disabled] {
@include disabled();
opacity: 1;
}
@each $state, $color in $states {
&[state="#{$state}"] {
Expand Down
Loading

0 comments on commit ac417c6

Please sign in to comment.