routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+81
@@ -0,0 +1,81 @@
|
||||
@layer vuetify-components {
|
||||
.v-otp-input {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0;
|
||||
position: relative;
|
||||
}
|
||||
.v-otp-input {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.v-otp-input .v-field {
|
||||
height: 100%;
|
||||
}
|
||||
.v-otp-input .v-field .v-field__outline__start, .v-otp-input .v-field .v-field__outline__end {
|
||||
flex: 1;
|
||||
}
|
||||
.v-otp-input .v-field input::placeholder {
|
||||
color: currentColor;
|
||||
opacity: var(--v-disabled-opacity);
|
||||
}
|
||||
.v-otp-input .v-field.v-field--focused input::placeholder {
|
||||
opacity: 0;
|
||||
}
|
||||
.v-otp-input__divider {
|
||||
margin: 0 8px;
|
||||
}
|
||||
.v-otp-input__content {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
justify-content: center;
|
||||
max-width: 320px;
|
||||
position: relative;
|
||||
border-radius: inherit;
|
||||
}
|
||||
.v-otp-input--divided .v-otp-input__content {
|
||||
max-width: 360px;
|
||||
}
|
||||
.v-otp-input--density-default .v-otp-input__content {
|
||||
height: 64px;
|
||||
}
|
||||
.v-otp-input--density-comfortable .v-otp-input__content {
|
||||
height: 60px;
|
||||
}
|
||||
.v-otp-input--density-compact .v-otp-input__content {
|
||||
height: 56px;
|
||||
}
|
||||
.v-otp-input__field {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
font: inherit;
|
||||
border-style: none;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
font-size: 1.25rem;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.v-otp-input__field[type=number]::-webkit-outer-spin-button, .v-otp-input__field[type=number]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
.v-otp-input__field[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
.v-otp-input__loader {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
.v-otp-input__loader .v-progress-linear {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
+591
@@ -0,0 +1,591 @@
|
||||
|
||||
import type { PropType } from 'vue';
|
||||
export type VOtpInputSlots = {
|
||||
default: never;
|
||||
loader: never;
|
||||
};
|
||||
export declare const makeVOtpInputProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
focused?: unknown;
|
||||
'onUpdate:focused'?: unknown;
|
||||
density?: unknown;
|
||||
rounded?: unknown;
|
||||
height?: unknown;
|
||||
maxHeight?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minHeight?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: unknown;
|
||||
loading?: unknown;
|
||||
bgColor?: unknown;
|
||||
color?: unknown;
|
||||
baseColor?: unknown;
|
||||
disabled?: unknown;
|
||||
error?: unknown;
|
||||
variant?: unknown;
|
||||
autofocus?: unknown;
|
||||
divider?: unknown;
|
||||
focusAll?: unknown;
|
||||
label?: unknown;
|
||||
length?: unknown;
|
||||
masked?: unknown;
|
||||
modelValue?: unknown;
|
||||
placeholder?: unknown;
|
||||
type?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? PropType<any> : {
|
||||
type: PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
focused: unknown extends Defaults["focused"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["focused"] ? boolean : boolean | Defaults["focused"]>;
|
||||
default: unknown extends Defaults["focused"] ? boolean : boolean | Defaults["focused"];
|
||||
};
|
||||
'onUpdate:focused': unknown extends Defaults["onUpdate:focused"] ? PropType<(args_0: boolean) => void> : {
|
||||
type: PropType<unknown extends Defaults["onUpdate:focused"] ? (args_0: boolean) => void : ((args_0: boolean) => void) | Defaults["onUpdate:focused"]>;
|
||||
default: unknown extends Defaults["onUpdate:focused"] ? (args_0: boolean) => void : ((args_0: boolean) => void) | Defaults["onUpdate:focused"];
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | import("../../composables/density.js").Density>;
|
||||
default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | NonNullable<import("../../composables/density.js").Density>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
|
||||
default: unknown extends Defaults["rounded"] ? string | number | boolean : Defaults["rounded"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
maxHeight: unknown extends Defaults["maxHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["maxHeight"] ? string | number : string | number | Defaults["maxHeight"]>;
|
||||
default: unknown extends Defaults["maxHeight"] ? string | number : Defaults["maxHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
maxWidth: unknown extends Defaults["maxWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["maxWidth"] ? string | number : string | number | Defaults["maxWidth"]>;
|
||||
default: unknown extends Defaults["maxWidth"] ? string | number : Defaults["maxWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
minHeight: unknown extends Defaults["minHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["minHeight"] ? string | number : string | number | Defaults["minHeight"]>;
|
||||
default: unknown extends Defaults["minHeight"] ? string | number : Defaults["minHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
minWidth: unknown extends Defaults["minWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["minWidth"] ? string | number : string | number | Defaults["minWidth"]>;
|
||||
default: unknown extends Defaults["minWidth"] ? string | number : Defaults["minWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
loading: unknown extends Defaults["loading"] ? (BooleanConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["loading"] ? string | boolean : string | boolean | Defaults["loading"]>;
|
||||
default: unknown extends Defaults["loading"] ? string | boolean : Defaults["loading"] | NonNullable<string | boolean>;
|
||||
};
|
||||
bgColor: unknown extends Defaults["bgColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"]>;
|
||||
default: unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"];
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
baseColor: unknown extends Defaults["baseColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"]>;
|
||||
default: unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"];
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
error: unknown extends Defaults["error"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["error"] ? boolean : boolean | Defaults["error"]>;
|
||||
default: unknown extends Defaults["error"] ? boolean : boolean | Defaults["error"];
|
||||
};
|
||||
variant: unknown extends Defaults["variant"] ? Omit<{
|
||||
type: PropType<"filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined">;
|
||||
default: NonNullable<"filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined">;
|
||||
} : Omit<Omit<{
|
||||
type: PropType<"filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined">;
|
||||
default: NonNullable<"filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined">;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["variant"] ? "filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined" : "filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined" | Defaults["variant"]>;
|
||||
default: unknown extends Defaults["variant"] ? "filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined" : Defaults["variant"] | NonNullable<"filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined">;
|
||||
};
|
||||
autofocus: unknown extends Defaults["autofocus"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["autofocus"] ? boolean : boolean | Defaults["autofocus"]>;
|
||||
default: unknown extends Defaults["autofocus"] ? boolean : boolean | Defaults["autofocus"];
|
||||
};
|
||||
divider: unknown extends Defaults["divider"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["divider"] ? string : string | Defaults["divider"]>;
|
||||
default: unknown extends Defaults["divider"] ? string : string | Defaults["divider"];
|
||||
};
|
||||
focusAll: unknown extends Defaults["focusAll"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["focusAll"] ? boolean : boolean | Defaults["focusAll"]>;
|
||||
default: unknown extends Defaults["focusAll"] ? boolean : boolean | Defaults["focusAll"];
|
||||
};
|
||||
label: unknown extends Defaults["label"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["label"] ? string : string | Defaults["label"]>;
|
||||
default: unknown extends Defaults["label"] ? string : string | Defaults["label"];
|
||||
};
|
||||
length: unknown extends Defaults["length"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["length"] ? string | number : string | number | Defaults["length"]>;
|
||||
default: unknown extends Defaults["length"] ? string | number : Defaults["length"] | NonNullable<string | number>;
|
||||
};
|
||||
masked: unknown extends Defaults["masked"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["masked"] ? boolean : boolean | Defaults["masked"]>;
|
||||
default: unknown extends Defaults["masked"] ? boolean : boolean | Defaults["masked"];
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["modelValue"] ? string | number : string | number | Defaults["modelValue"]>;
|
||||
default: unknown extends Defaults["modelValue"] ? string | number : Defaults["modelValue"] | NonNullable<string | number>;
|
||||
};
|
||||
placeholder: unknown extends Defaults["placeholder"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["placeholder"] ? string : string | Defaults["placeholder"]>;
|
||||
default: unknown extends Defaults["placeholder"] ? string : string | Defaults["placeholder"];
|
||||
};
|
||||
type: unknown extends Defaults["type"] ? {
|
||||
type: PropType<'text' | 'password' | 'number'>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<'text' | 'password' | 'number'>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["type"] ? "number" | "password" | "text" : "number" | "password" | "text" | Defaults["type"]>;
|
||||
default: unknown extends Defaults["type"] ? "number" | "password" | "text" : Defaults["type"] | NonNullable<"number" | "password" | "text">;
|
||||
};
|
||||
};
|
||||
export declare const VOtpInput: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
focused: boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
disabled: boolean;
|
||||
error: boolean;
|
||||
variant: "filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined";
|
||||
autofocus: boolean;
|
||||
focusAll: boolean;
|
||||
label: string;
|
||||
length: string | number;
|
||||
masked: boolean;
|
||||
type: "number" | "password" | "text";
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
loading?: string | boolean | undefined;
|
||||
bgColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
divider?: string | undefined;
|
||||
modelValue?: string | number | undefined;
|
||||
placeholder?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:loader"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onFinish?: ((val: string) => any) | undefined;
|
||||
"onUpdate:focused"?: ((val: boolean) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((val: string) => any) | undefined;
|
||||
}, {
|
||||
blur: () => void;
|
||||
focus: () => void;
|
||||
reset: () => void;
|
||||
isFocused: import("vue").Ref<boolean, boolean> & {
|
||||
readonly externalValue: boolean;
|
||||
};
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
finish: (val: string) => true;
|
||||
'update:focused': (val: boolean) => true;
|
||||
'update:modelValue': (val: string) => true;
|
||||
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
focused: boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
disabled: boolean;
|
||||
error: boolean;
|
||||
variant: "filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined";
|
||||
autofocus: boolean;
|
||||
focusAll: boolean;
|
||||
label: string;
|
||||
length: string | number;
|
||||
masked: boolean;
|
||||
modelValue: string | number;
|
||||
type: "number" | "password" | "text";
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
loader: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
focused: boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
disabled: boolean;
|
||||
error: boolean;
|
||||
variant: "filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined";
|
||||
autofocus: boolean;
|
||||
focusAll: boolean;
|
||||
label: string;
|
||||
length: string | number;
|
||||
masked: boolean;
|
||||
type: "number" | "password" | "text";
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
loading?: string | boolean | undefined;
|
||||
bgColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
divider?: string | undefined;
|
||||
modelValue?: string | number | undefined;
|
||||
placeholder?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:loader"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onFinish?: ((val: string) => any) | undefined;
|
||||
"onUpdate:focused"?: ((val: boolean) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((val: string) => any) | undefined;
|
||||
}, {
|
||||
blur: () => void;
|
||||
focus: () => void;
|
||||
reset: () => void;
|
||||
isFocused: import("vue").Ref<boolean, boolean> & {
|
||||
readonly externalValue: boolean;
|
||||
};
|
||||
}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
focused: boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
disabled: boolean;
|
||||
error: boolean;
|
||||
variant: "filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined";
|
||||
autofocus: boolean;
|
||||
focusAll: boolean;
|
||||
label: string;
|
||||
length: string | number;
|
||||
masked: boolean;
|
||||
modelValue: string | number;
|
||||
type: "number" | "password" | "text";
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
focused: boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
disabled: boolean;
|
||||
error: boolean;
|
||||
variant: "filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined";
|
||||
autofocus: boolean;
|
||||
focusAll: boolean;
|
||||
label: string;
|
||||
length: string | number;
|
||||
masked: boolean;
|
||||
type: "number" | "password" | "text";
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
loading?: string | boolean | undefined;
|
||||
bgColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
divider?: string | undefined;
|
||||
modelValue?: string | number | undefined;
|
||||
placeholder?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:loader"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onFinish?: ((val: string) => any) | undefined;
|
||||
"onUpdate:focused"?: ((val: boolean) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((val: string) => any) | undefined;
|
||||
}, {
|
||||
blur: () => void;
|
||||
focus: () => void;
|
||||
reset: () => void;
|
||||
isFocused: import("vue").Ref<boolean, boolean> & {
|
||||
readonly externalValue: boolean;
|
||||
};
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
finish: (val: string) => true;
|
||||
'update:focused': (val: boolean) => true;
|
||||
'update:modelValue': (val: string) => true;
|
||||
}, string, {
|
||||
style: import("vue").StyleValue;
|
||||
focused: boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
disabled: boolean;
|
||||
error: boolean;
|
||||
variant: "filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined";
|
||||
autofocus: boolean;
|
||||
focusAll: boolean;
|
||||
label: string;
|
||||
length: string | number;
|
||||
masked: boolean;
|
||||
modelValue: string | number;
|
||||
type: "number" | "password" | "text";
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
loader: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
focused: BooleanConstructor;
|
||||
'onUpdate:focused': PropType<(args_0: boolean) => void>;
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
loading: (BooleanConstructor | StringConstructor)[];
|
||||
bgColor: StringConstructor;
|
||||
color: StringConstructor;
|
||||
baseColor: StringConstructor;
|
||||
disabled: {
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
};
|
||||
error: BooleanConstructor;
|
||||
variant: Omit<{
|
||||
type: PropType<"filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined">;
|
||||
default: NonNullable<"filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined">;
|
||||
};
|
||||
autofocus: BooleanConstructor;
|
||||
divider: StringConstructor;
|
||||
focusAll: BooleanConstructor;
|
||||
label: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
length: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
masked: BooleanConstructor;
|
||||
modelValue: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
placeholder: StringConstructor;
|
||||
type: {
|
||||
type: PropType<'text' | 'password' | 'number'>;
|
||||
default: string;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
focused: BooleanConstructor;
|
||||
'onUpdate:focused': PropType<(args_0: boolean) => void>;
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
loading: (BooleanConstructor | StringConstructor)[];
|
||||
bgColor: StringConstructor;
|
||||
color: StringConstructor;
|
||||
baseColor: StringConstructor;
|
||||
disabled: {
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
};
|
||||
error: BooleanConstructor;
|
||||
variant: Omit<{
|
||||
type: PropType<"filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined">;
|
||||
default: NonNullable<"filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined">;
|
||||
};
|
||||
autofocus: BooleanConstructor;
|
||||
divider: StringConstructor;
|
||||
focusAll: BooleanConstructor;
|
||||
label: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
length: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
masked: BooleanConstructor;
|
||||
modelValue: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
placeholder: StringConstructor;
|
||||
type: {
|
||||
type: PropType<'text' | 'password' | 'number'>;
|
||||
default: string;
|
||||
};
|
||||
}>>;
|
||||
export type VOtpInput = InstanceType<typeof VOtpInput>;
|
||||
+302
@@ -0,0 +1,302 @@
|
||||
import { Fragment as _Fragment, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, createVNode as _createVNode, mergeProps as _mergeProps, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VOtpInput.css";
|
||||
|
||||
// Components
|
||||
import { makeVFieldProps, VField } from "../VField/VField.js";
|
||||
import { VOverlay } from "../VOverlay/VOverlay.js";
|
||||
import { VProgressCircular } from "../VProgressCircular/VProgressCircular.js"; // Composables
|
||||
import { provideDefaults } from "../../composables/defaults.js";
|
||||
import { makeDensityProps, useDensity } from "../../composables/density.js";
|
||||
import { makeDimensionProps, useDimension } from "../../composables/dimensions.js";
|
||||
import { makeFocusProps, useFocus } from "../../composables/focus.js";
|
||||
import { useIntersectionObserver } from "../../composables/intersectionObserver.js";
|
||||
import { useLocale } from "../../composables/locale.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js";
|
||||
import { useToggleScope } from "../../composables/toggleScope.js"; // Utilities
|
||||
import { computed, effectScope, nextTick, ref, toRef, watch, watchEffect } from 'vue';
|
||||
import { filterInputAttrs, focusChild, genericComponent, pick, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
// Types
|
||||
export const makeVOtpInputProps = propsFactory({
|
||||
autofocus: Boolean,
|
||||
divider: String,
|
||||
focusAll: Boolean,
|
||||
label: {
|
||||
type: String,
|
||||
default: '$vuetify.input.otp'
|
||||
},
|
||||
length: {
|
||||
type: [Number, String],
|
||||
default: 6
|
||||
},
|
||||
masked: Boolean,
|
||||
modelValue: {
|
||||
type: [Number, String],
|
||||
default: undefined
|
||||
},
|
||||
placeholder: String,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'number'
|
||||
},
|
||||
...makeDensityProps(),
|
||||
...makeDimensionProps(),
|
||||
...makeFocusProps(),
|
||||
...pick(makeVFieldProps({
|
||||
variant: 'outlined'
|
||||
}), ['baseColor', 'bgColor', 'class', 'color', 'disabled', 'error', 'loading', 'rounded', 'style', 'theme', 'variant'])
|
||||
}, 'VOtpInput');
|
||||
export const VOtpInput = genericComponent()({
|
||||
name: 'VOtpInput',
|
||||
props: makeVOtpInputProps(),
|
||||
emits: {
|
||||
finish: val => true,
|
||||
'update:focused': val => true,
|
||||
'update:modelValue': val => true
|
||||
},
|
||||
setup(props, {
|
||||
attrs,
|
||||
emit,
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
densityClasses
|
||||
} = useDensity(props);
|
||||
const {
|
||||
dimensionStyles
|
||||
} = useDimension(props);
|
||||
const {
|
||||
isFocused,
|
||||
focus,
|
||||
blur
|
||||
} = useFocus(props);
|
||||
const model = useProxiedModel(props, 'modelValue', '', val => val == null ? [] : String(val).split(''), val => val.join(''));
|
||||
const {
|
||||
t
|
||||
} = useLocale();
|
||||
const length = computed(() => Number(props.length));
|
||||
const fields = computed(() => Array(length.value).fill(0));
|
||||
const focusIndex = ref(-1);
|
||||
const contentRef = ref();
|
||||
const inputRef = ref([]);
|
||||
const current = computed(() => inputRef.value[focusIndex.value]);
|
||||
let _isComposing = false;
|
||||
useToggleScope(() => props.autofocus, () => {
|
||||
const intersectScope = effectScope();
|
||||
intersectScope.run(() => {
|
||||
const {
|
||||
intersectionRef,
|
||||
isIntersecting
|
||||
} = useIntersectionObserver();
|
||||
watchEffect(() => {
|
||||
intersectionRef.value = inputRef.value[0];
|
||||
});
|
||||
watch(isIntersecting, v => {
|
||||
if (!v) return;
|
||||
intersectionRef.value?.focus();
|
||||
intersectScope.stop();
|
||||
});
|
||||
});
|
||||
});
|
||||
function onInput() {
|
||||
// The maxlength attribute doesn't work for the number type input, so the text type is used.
|
||||
// The following logic simulates the behavior of a number input.
|
||||
if (isValidNumber(current.value.value)) {
|
||||
current.value.value = '';
|
||||
return;
|
||||
}
|
||||
if (_isComposing) return;
|
||||
const array = model.value.slice();
|
||||
const value = current.value.value;
|
||||
array[focusIndex.value] = value;
|
||||
let target = null;
|
||||
if (focusIndex.value > model.value.length) {
|
||||
target = model.value.length + 1;
|
||||
} else if (focusIndex.value + 1 !== length.value) {
|
||||
target = 'next';
|
||||
}
|
||||
model.value = array;
|
||||
if (target) focusChild(contentRef.value, target);
|
||||
}
|
||||
function onCompositionend() {
|
||||
_isComposing = false;
|
||||
onInput();
|
||||
}
|
||||
function onBeforeinput(e) {
|
||||
const isBackwardDelete = ['deleteContentBackward', 'deleteWordBackward', 'deleteSoftLineBackward', 'deleteHardLineBackward'].includes(e.inputType);
|
||||
const isForwardDelete = ['deleteContentForward', 'deleteWordForward', 'deleteSoftLineForward', 'deleteHardLineForward'].includes(e.inputType);
|
||||
if (!isBackwardDelete && !isForwardDelete) return;
|
||||
e.preventDefault();
|
||||
const array = model.value.slice();
|
||||
const index = focusIndex.value;
|
||||
let target = null;
|
||||
if (isBackwardDelete) {
|
||||
if (!array[index]) {
|
||||
if (index > 0) {
|
||||
array[index - 1] = '';
|
||||
model.value = array;
|
||||
target = 'prev';
|
||||
}
|
||||
} else {
|
||||
const isLastFilledField = !array.slice(index + 1).some(v => v);
|
||||
for (let i = index; i < length.value - 1; i++) {
|
||||
array[i] = array[i + 1];
|
||||
}
|
||||
array[length.value - 1] = '';
|
||||
model.value = array;
|
||||
if (!isLastFilledField && index > 0) target = 'prev';
|
||||
}
|
||||
} else {
|
||||
for (let i = index; i < length.value - 1; i++) {
|
||||
array[i] = array[i + 1];
|
||||
}
|
||||
array[length.value - 1] = '';
|
||||
model.value = array;
|
||||
}
|
||||
requestAnimationFrame(() => {
|
||||
if (target != null) {
|
||||
focusChild(contentRef.value, target);
|
||||
} else {
|
||||
inputRef.value[index]?.select();
|
||||
}
|
||||
});
|
||||
}
|
||||
function onKeydown(e) {
|
||||
let target = null;
|
||||
if (!['ArrowLeft', 'ArrowRight'].includes(e.key)) return;
|
||||
e.preventDefault();
|
||||
if (e.key === 'ArrowLeft') {
|
||||
target = 'prev';
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
target = 'next';
|
||||
}
|
||||
requestAnimationFrame(() => {
|
||||
if (target != null) {
|
||||
focusChild(contentRef.value, target);
|
||||
}
|
||||
});
|
||||
}
|
||||
function onPaste(index, e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const clipboardText = e?.clipboardData?.getData('Text').trim().slice(0, length.value) ?? '';
|
||||
const finalIndex = clipboardText.length - 1 === -1 ? index : clipboardText.length - 1;
|
||||
if (isValidNumber(clipboardText)) return;
|
||||
model.value = clipboardText.split('');
|
||||
focusIndex.value = finalIndex;
|
||||
}
|
||||
function reset() {
|
||||
model.value = [];
|
||||
}
|
||||
function onFocus(e, index) {
|
||||
focus();
|
||||
focusIndex.value = index;
|
||||
}
|
||||
function onBlur() {
|
||||
blur();
|
||||
focusIndex.value = -1;
|
||||
}
|
||||
function isValidNumber(value) {
|
||||
return props.type === 'number' && /[^0-9]/g.test(value);
|
||||
}
|
||||
provideDefaults({
|
||||
VField: {
|
||||
color: toRef(() => props.color),
|
||||
bgColor: toRef(() => props.color),
|
||||
baseColor: toRef(() => props.baseColor),
|
||||
disabled: toRef(() => props.disabled),
|
||||
error: toRef(() => props.error),
|
||||
variant: toRef(() => props.variant),
|
||||
rounded: toRef(() => props.rounded)
|
||||
}
|
||||
}, {
|
||||
scoped: true
|
||||
});
|
||||
watch(model, val => {
|
||||
if (val.length === length.value) {
|
||||
emit('finish', val.join(''));
|
||||
}
|
||||
}, {
|
||||
deep: true
|
||||
});
|
||||
watch(focusIndex, val => {
|
||||
if (val < 0) return;
|
||||
nextTick(() => {
|
||||
inputRef.value[val]?.select();
|
||||
});
|
||||
});
|
||||
useRender(() => {
|
||||
const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
|
||||
return _createElementVNode("div", _mergeProps({
|
||||
"class": ['v-otp-input', {
|
||||
'v-otp-input--divided': !!props.divider
|
||||
}, densityClasses.value, props.class],
|
||||
"style": [props.style]
|
||||
}, rootAttrs), [_createElementVNode("div", {
|
||||
"ref": contentRef,
|
||||
"class": "v-otp-input__content",
|
||||
"style": _normalizeStyle([dimensionStyles.value])
|
||||
}, [fields.value.map((_, i) => _createElementVNode(_Fragment, null, [props.divider && i !== 0 && _createElementVNode("span", {
|
||||
"class": "v-otp-input__divider"
|
||||
}, [props.divider]), _createVNode(VField, {
|
||||
"focused": isFocused.value && props.focusAll || focusIndex.value === i,
|
||||
"key": i
|
||||
}, {
|
||||
...slots,
|
||||
loader: undefined,
|
||||
default: () => {
|
||||
return _createElementVNode("input", {
|
||||
"ref": val => inputRef.value[i] = val,
|
||||
"aria-label": t(props.label, i + 1),
|
||||
"autofocus": i === 0 && props.autofocus,
|
||||
"autocomplete": "one-time-code",
|
||||
"class": _normalizeClass(['v-otp-input__field']),
|
||||
"disabled": props.disabled,
|
||||
"inputmode": props.type === 'number' ? 'numeric' : 'text',
|
||||
"min": props.type === 'number' ? 0 : undefined,
|
||||
"maxlength": i === 0 ? length.value : '1',
|
||||
"placeholder": props.placeholder,
|
||||
"type": props.masked ? 'password' : props.type === 'number' ? 'text' : props.type,
|
||||
"value": model.value[i],
|
||||
"onInput": onInput,
|
||||
"onBeforeinput": onBeforeinput,
|
||||
"onFocus": e => onFocus(e, i),
|
||||
"onBlur": onBlur,
|
||||
"onKeydown": onKeydown,
|
||||
"onCompositionstart": () => _isComposing = true,
|
||||
"onCompositionend": onCompositionend,
|
||||
"onPaste": event => onPaste(i, event)
|
||||
}, null);
|
||||
}
|
||||
})])), _createElementVNode("input", _mergeProps({
|
||||
"class": "v-otp-input-input",
|
||||
"type": "hidden"
|
||||
}, inputAttrs, {
|
||||
"value": model.value.join('')
|
||||
}), null), _createVNode(VOverlay, {
|
||||
"contained": true,
|
||||
"contentClass": "v-otp-input__loader",
|
||||
"modelValue": !!props.loading,
|
||||
"persistent": true
|
||||
}, {
|
||||
default: () => [slots.loader?.() ?? _createVNode(VProgressCircular, {
|
||||
"color": typeof props.loading === 'boolean' ? undefined : props.loading,
|
||||
"indeterminate": true,
|
||||
"size": "24",
|
||||
"width": "2"
|
||||
}, null)]
|
||||
}), slots.default?.()])]);
|
||||
});
|
||||
return {
|
||||
blur: () => {
|
||||
inputRef.value?.some(input => input.blur());
|
||||
},
|
||||
focus: () => {
|
||||
inputRef.value?.[0].focus();
|
||||
},
|
||||
reset,
|
||||
isFocused
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VOtpInput.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+82
@@ -0,0 +1,82 @@
|
||||
@use 'sass:math'
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-otp-input
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
padding: $otp-input-padding
|
||||
position: relative
|
||||
@include tools.rounded(4px)
|
||||
|
||||
.v-field
|
||||
height: 100%
|
||||
|
||||
.v-field__outline
|
||||
&__start,
|
||||
&__end
|
||||
flex: 1
|
||||
|
||||
input::placeholder
|
||||
color: currentColor
|
||||
opacity: var(--v-disabled-opacity)
|
||||
|
||||
&.v-field--focused
|
||||
input::placeholder
|
||||
opacity: 0
|
||||
|
||||
.v-otp-input__divider
|
||||
margin: $otp-input-divider-margin
|
||||
|
||||
.v-otp-input__content
|
||||
align-items: center
|
||||
display: flex
|
||||
gap: $otp-input-content-gap
|
||||
padding: $otp-input-content-padding
|
||||
justify-content: center
|
||||
max-width: $otp-input-content-max-width
|
||||
position: relative
|
||||
border-radius: inherit
|
||||
|
||||
.v-otp-input--divided &
|
||||
max-width: $otp-input-divided-content-max-width
|
||||
|
||||
@at-root
|
||||
@include tools.density('v-otp-input', $input-density) using ($modifier)
|
||||
.v-otp-input__content
|
||||
height: #{$otp-input-content-height + math.div($modifier, 2)}
|
||||
|
||||
.v-otp-input__field
|
||||
padding: 0
|
||||
margin: 0
|
||||
border-radius: 0
|
||||
font: inherit
|
||||
border-style: none
|
||||
color: inherit
|
||||
background-color: transparent
|
||||
font-size: $otp-input-field-font-size
|
||||
height: 100%
|
||||
outline: none
|
||||
text-align: center
|
||||
width: 100%
|
||||
|
||||
&[type=number]::-webkit-outer-spin-button,
|
||||
&[type=number]::-webkit-inner-spin-button
|
||||
-webkit-appearance: none
|
||||
margin: 0
|
||||
|
||||
&[type=number]
|
||||
-moz-appearance: textfield
|
||||
|
||||
.v-otp-input__loader
|
||||
align-items: center
|
||||
display: flex
|
||||
height: 100%
|
||||
justify-content: center
|
||||
width: 100%
|
||||
|
||||
.v-progress-linear
|
||||
position: absolute
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
@forward '../VInput/variables';
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
$otp-input-content-gap: .5rem !default;
|
||||
$otp-input-content-height: 64px !default;
|
||||
$otp-input-content-max-width: 320px !default;
|
||||
$otp-input-content-padding: .5rem !default;
|
||||
$otp-input-divided-content-max-width: 360px !default;
|
||||
$otp-input-divider-margin: 0 8px !default;
|
||||
$otp-input-field-font-size: 1.25rem !default;
|
||||
$otp-input-padding: .5rem 0 !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VOtpInput } from './VOtpInput.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VOtpInput } from "./VOtpInput.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VOtpInput"],"sources":["../../../src/components/VOtpInput/index.ts"],"sourcesContent":["export { VOtpInput } from './VOtpInput'\n"],"mappings":"SAASA,SAAS","ignoreList":[]}
|
||||
Reference in New Issue
Block a user