routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+18
@@ -0,0 +1,18 @@
|
||||
import type { IconValue } from '../../composables/icons.js';
|
||||
import type { EventProp } from '../../util/index.js';
|
||||
type names = 'clear' | 'prepend' | 'append' | 'appendInner' | 'prependInner';
|
||||
type InputIconProps<T extends names> = {
|
||||
label: string | undefined;
|
||||
} & {
|
||||
[K in `${T}Icon`]: IconValue | undefined;
|
||||
} & {
|
||||
[K in `onClick:${T}`]: EventProp | undefined;
|
||||
};
|
||||
type Listeners<T extends {}, U = keyof T> = U extends `onClick:${infer V extends names}` ? V : never;
|
||||
export declare function useInputIcon<T extends {}, K extends names = Listeners<T>>(props: T & InputIconProps<K>): {
|
||||
InputIcon: ({ name, color, ...attrs }: {
|
||||
name: Extract<names, K>;
|
||||
color?: string;
|
||||
}) => JSX.Element;
|
||||
};
|
||||
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
|
||||
// Components
|
||||
import { VIcon } from "../VIcon/index.js"; // Composables
|
||||
import { useLocale } from "../../composables/locale.js"; // Utilities
|
||||
import { callEvent } from "../../util/index.js"; // Types
|
||||
export function useInputIcon(props) {
|
||||
const {
|
||||
t
|
||||
} = useLocale();
|
||||
function InputIcon({
|
||||
name,
|
||||
color,
|
||||
...attrs
|
||||
}) {
|
||||
const localeKey = {
|
||||
prepend: 'prependAction',
|
||||
prependInner: 'prependAction',
|
||||
append: 'appendAction',
|
||||
appendInner: 'appendAction',
|
||||
clear: 'clear'
|
||||
}[name];
|
||||
const listener = props[`onClick:${name}`];
|
||||
function onKeydown(e) {
|
||||
if (e.key !== 'Enter' && e.key !== ' ') return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
callEvent(listener, new PointerEvent('click', e));
|
||||
}
|
||||
const label = listener && localeKey ? t(`$vuetify.input.${localeKey}`, props.label ?? '') : undefined;
|
||||
return _createVNode(VIcon, _mergeProps({
|
||||
"icon": props[`${name}Icon`],
|
||||
"aria-label": label,
|
||||
"onClick": listener,
|
||||
"onKeydown": onKeydown,
|
||||
"color": color
|
||||
}, attrs), null);
|
||||
}
|
||||
return {
|
||||
InputIcon
|
||||
};
|
||||
}
|
||||
//# sourceMappingURL=InputIcon.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"InputIcon.js","names":["VIcon","useLocale","callEvent","useInputIcon","props","t","InputIcon","name","color","attrs","localeKey","prepend","prependInner","append","appendInner","clear","listener","onKeydown","e","key","preventDefault","stopPropagation","PointerEvent","label","undefined","_createVNode","_mergeProps"],"sources":["../../../src/components/VInput/InputIcon.tsx"],"sourcesContent":["// Components\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { callEvent } from '@/util'\n\n// Types\nimport type { IconValue } from '@/composables/icons'\nimport type { EventProp } from '@/util'\n\ntype names = 'clear' | 'prepend' | 'append' | 'appendInner' | 'prependInner'\n\ntype InputIconProps<T extends names> = {\n label: string | undefined\n} & {\n [K in `${T}Icon`]: IconValue | undefined\n} & {\n [K in `onClick:${T}`]: EventProp | undefined\n}\n\ntype Listeners<T extends {}, U = keyof T> = U extends `onClick:${infer V extends names}` ? V : never\n\nexport function useInputIcon<T extends {}, K extends names = Listeners<T>> (props: T & InputIconProps<K>) {\n const { t } = useLocale()\n\n function InputIcon ({ name, color, ...attrs }: { name: Extract<names, K>, color?: string }) {\n const localeKey = {\n prepend: 'prependAction',\n prependInner: 'prependAction',\n append: 'appendAction',\n appendInner: 'appendAction',\n clear: 'clear',\n }[name]\n const listener = props[`onClick:${name}`] as EventProp | undefined\n\n function onKeydown (e: KeyboardEvent) {\n if (e.key !== 'Enter' && e.key !== ' ') return\n\n e.preventDefault()\n e.stopPropagation()\n callEvent(listener, new PointerEvent('click', e))\n }\n\n const label = listener && localeKey\n ? t(`$vuetify.input.${localeKey}`, props.label ?? '')\n : undefined\n\n return (\n <VIcon\n icon={ props[`${name}Icon`] }\n aria-label={ label }\n onClick={ listener }\n onKeydown={ onKeydown }\n color={ color }\n { ...attrs }\n />\n )\n }\n\n return { InputIcon }\n}\n"],"mappings":";AAAA;AAAA,SACSA,KAAK,6BAEd;AAAA,SACSC,SAAS,uCAElB;AAAA,SACSC,SAAS,+BAElB;AAgBA,OAAO,SAASC,YAAYA,CAAgDC,KAA4B,EAAE;EACxG,MAAM;IAAEC;EAAE,CAAC,GAAGJ,SAAS,CAAC,CAAC;EAEzB,SAASK,SAASA,CAAE;IAAEC,IAAI;IAAEC,KAAK;IAAE,GAAGC;EAAmD,CAAC,EAAE;IAC1F,MAAMC,SAAS,GAAG;MAChBC,OAAO,EAAE,eAAe;MACxBC,YAAY,EAAE,eAAe;MAC7BC,MAAM,EAAE,cAAc;MACtBC,WAAW,EAAE,cAAc;MAC3BC,KAAK,EAAE;IACT,CAAC,CAACR,IAAI,CAAC;IACP,MAAMS,QAAQ,GAAGZ,KAAK,CAAC,WAAWG,IAAI,EAAE,CAA0B;IAElE,SAASU,SAASA,CAAEC,CAAgB,EAAE;MACpC,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,EAAE;MAExCD,CAAC,CAACE,cAAc,CAAC,CAAC;MAClBF,CAAC,CAACG,eAAe,CAAC,CAAC;MACnBnB,SAAS,CAACc,QAAQ,EAAE,IAAIM,YAAY,CAAC,OAAO,EAAEJ,CAAC,CAAC,CAAC;IACnD;IAEA,MAAMK,KAAK,GAAGP,QAAQ,IAAIN,SAAS,GAC/BL,CAAC,CAAC,kBAAkBK,SAAS,EAAE,EAAEN,KAAK,CAACmB,KAAK,IAAI,EAAE,CAAC,GACnDC,SAAS;IAEb,OAAAC,YAAA,CAAAzB,KAAA,EAAA0B,WAAA;MAAA,QAEWtB,KAAK,CAAC,GAAGG,IAAI,MAAM,CAAC;MAAA,cACdgB,KAAK;MAAA,WACRP,QAAQ;MAAA,aACNC,SAAS;MAAA,SACbT;IAAK,GACRC,KAAK;EAGhB;EAEA,OAAO;IAAEH;EAAU,CAAC;AACtB","ignoreList":[]}
|
||||
+140
@@ -0,0 +1,140 @@
|
||||
@layer vuetify-components {
|
||||
.v-input {
|
||||
display: grid;
|
||||
flex: 1 1 auto;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.v-input--disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-input--indent-details .v-input__details {
|
||||
padding-inline: 16px;
|
||||
}
|
||||
.v-input--density-default {
|
||||
--v-input-control-height: 56px;
|
||||
--v-input-padding-top: 16px;
|
||||
}
|
||||
.v-input--density-comfortable {
|
||||
--v-input-control-height: 48px;
|
||||
--v-input-padding-top: 12px;
|
||||
}
|
||||
.v-input--density-compact {
|
||||
--v-input-control-height: 40px;
|
||||
--v-input-padding-top: 8px;
|
||||
}
|
||||
.v-input--vertical {
|
||||
grid-template-areas: "append" "control" "prepend";
|
||||
grid-template-rows: max-content auto max-content;
|
||||
grid-template-columns: min-content;
|
||||
}
|
||||
.v-input--vertical .v-input__prepend {
|
||||
margin-block-start: 16px;
|
||||
}
|
||||
.v-input--vertical .v-input__append {
|
||||
margin-block-end: 16px;
|
||||
}
|
||||
.v-input--horizontal {
|
||||
grid-template-areas: "prepend control append" "a messages b";
|
||||
grid-template-columns: max-content minmax(0, 1fr) max-content;
|
||||
grid-template-rows: 1fr auto;
|
||||
}
|
||||
.v-input--horizontal .v-input__prepend {
|
||||
margin-inline-end: 16px;
|
||||
}
|
||||
.v-input--horizontal .v-input__append {
|
||||
margin-inline-start: 16px;
|
||||
}
|
||||
.v-input__details {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
grid-area: messages;
|
||||
letter-spacing: 0.0333333333em;
|
||||
line-height: normal;
|
||||
min-height: 22px;
|
||||
padding-top: 6px;
|
||||
overflow: hidden;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.v-input__details > .v-icon,
|
||||
.v-input__prepend > .v-icon,
|
||||
.v-input__append > .v-icon {
|
||||
opacity: var(--v-medium-emphasis-opacity);
|
||||
}
|
||||
.v-input--disabled .v-input__details > .v-icon,
|
||||
.v-input--disabled .v-input__details .v-messages, .v-input--error .v-input__details > .v-icon,
|
||||
.v-input--error .v-input__details .v-messages,
|
||||
.v-input--disabled .v-input__prepend > .v-icon,
|
||||
.v-input--disabled .v-input__prepend .v-messages,
|
||||
.v-input--error .v-input__prepend > .v-icon,
|
||||
.v-input--error .v-input__prepend .v-messages,
|
||||
.v-input--disabled .v-input__append > .v-icon,
|
||||
.v-input--disabled .v-input__append .v-messages,
|
||||
.v-input--error .v-input__append > .v-icon,
|
||||
.v-input--error .v-input__append .v-messages {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-input--glow.v-input--focused .v-input__details > .v-icon,
|
||||
.v-input--glow.v-input--focused .v-input__prepend > .v-icon,
|
||||
.v-input--glow.v-input--focused .v-input__append > .v-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-input--disabled .v-input__details,
|
||||
.v-input--disabled .v-input__prepend,
|
||||
.v-input--disabled .v-input__append {
|
||||
opacity: var(--v-disabled-opacity);
|
||||
}
|
||||
.v-input--error:not(.v-input--disabled) .v-input__details > .v-icon,
|
||||
.v-input--error:not(.v-input--disabled) .v-input__details .v-messages,
|
||||
.v-input--error:not(.v-input--disabled) .v-input__prepend > .v-icon,
|
||||
.v-input--error:not(.v-input--disabled) .v-input__prepend .v-messages,
|
||||
.v-input--error:not(.v-input--disabled) .v-input__append > .v-icon,
|
||||
.v-input--error:not(.v-input--disabled) .v-input__append .v-messages {
|
||||
color: rgb(var(--v-theme-error));
|
||||
}
|
||||
.v-input__prepend,
|
||||
.v-input__append {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding-top: var(--v-input-padding-top);
|
||||
}
|
||||
.v-input--center-affix .v-input__prepend,
|
||||
.v-input--center-affix .v-input__append {
|
||||
align-items: center;
|
||||
padding-top: 0;
|
||||
}
|
||||
.v-input__prepend {
|
||||
grid-area: prepend;
|
||||
}
|
||||
.v-input__append {
|
||||
grid-area: append;
|
||||
}
|
||||
.v-input__control {
|
||||
display: flex;
|
||||
grid-area: control;
|
||||
}
|
||||
.v-input--hide-spin-buttons input::-webkit-outer-spin-button,
|
||||
.v-input--hide-spin-buttons input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
.v-input--hide-spin-buttons input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
.v-input--plain-underlined .v-input__prepend,
|
||||
.v-input--plain-underlined .v-input__append {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.v-input--density-default.v-input--plain-underlined .v-input__prepend, .v-input--density-default.v-input--plain-underlined .v-input__append {
|
||||
padding-top: calc(var(--v-input-padding-top) + 4px);
|
||||
}
|
||||
.v-input--density-comfortable.v-input--plain-underlined .v-input__prepend, .v-input--density-comfortable.v-input--plain-underlined .v-input__append {
|
||||
padding-top: calc(var(--v-input-padding-top) + 2px);
|
||||
}
|
||||
.v-input--density-compact.v-input--plain-underlined .v-input__prepend, .v-input--density-compact.v-input--plain-underlined .v-input__append {
|
||||
padding-top: calc(var(--v-input-padding-top) + 0px);
|
||||
}
|
||||
}
|
||||
+666
@@ -0,0 +1,666 @@
|
||||
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { ComputedRef, PropType, Ref } from 'vue';
|
||||
import type { VMessageSlot } from '../VMessages/VMessages.js';
|
||||
import type { GenericProps } from '../../util/index.js';
|
||||
export interface VInputSlot {
|
||||
id: ComputedRef<string>;
|
||||
messagesId: ComputedRef<string | undefined>;
|
||||
isDirty: ComputedRef<boolean>;
|
||||
isDisabled: ComputedRef<boolean>;
|
||||
isReadonly: ComputedRef<boolean>;
|
||||
isPristine: Ref<boolean>;
|
||||
isValid: ComputedRef<boolean | null>;
|
||||
isValidating: Ref<boolean>;
|
||||
hasDetails: Ref<boolean>;
|
||||
reset: () => void;
|
||||
resetValidation: () => void;
|
||||
validate: () => void;
|
||||
}
|
||||
export declare const makeVInputProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
focused?: unknown;
|
||||
'onUpdate:focused'?: unknown;
|
||||
disabled?: unknown;
|
||||
error?: unknown;
|
||||
errorMessages?: unknown;
|
||||
maxErrors?: unknown;
|
||||
name?: unknown;
|
||||
label?: unknown;
|
||||
readonly?: unknown;
|
||||
rules?: unknown;
|
||||
modelValue?: unknown;
|
||||
validateOn?: unknown;
|
||||
validationValue?: unknown;
|
||||
density?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: unknown;
|
||||
id?: unknown;
|
||||
appendIcon?: unknown;
|
||||
baseColor?: unknown;
|
||||
centerAffix?: unknown;
|
||||
color?: unknown;
|
||||
glow?: unknown;
|
||||
iconColor?: unknown;
|
||||
prependIcon?: unknown;
|
||||
hideDetails?: unknown;
|
||||
hideSpinButtons?: unknown;
|
||||
hint?: unknown;
|
||||
indentDetails?: unknown;
|
||||
persistentHint?: unknown;
|
||||
messages?: unknown;
|
||||
direction?: unknown;
|
||||
'onClick:prepend'?: unknown;
|
||||
'onClick:append'?: 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"];
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? {
|
||||
type: PropType<boolean | null>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<boolean | null>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["disabled"] ? boolean | null : boolean | Defaults["disabled"] | null>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean | null : Defaults["disabled"] | NonNullable<boolean | null>;
|
||||
};
|
||||
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"];
|
||||
};
|
||||
errorMessages: unknown extends Defaults["errorMessages"] ? {
|
||||
type: PropType<string | readonly string[] | null>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<string | readonly string[] | null>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["errorMessages"] ? string | readonly string[] | null : string | readonly string[] | Defaults["errorMessages"] | null>;
|
||||
default: unknown extends Defaults["errorMessages"] ? string | readonly string[] | null : Defaults["errorMessages"] | NonNullable<string | readonly string[] | null>;
|
||||
};
|
||||
maxErrors: unknown extends Defaults["maxErrors"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["maxErrors"] ? string | number : string | number | Defaults["maxErrors"]>;
|
||||
default: unknown extends Defaults["maxErrors"] ? string | number : Defaults["maxErrors"] | NonNullable<string | number>;
|
||||
};
|
||||
name: unknown extends Defaults["name"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["name"] ? string : string | Defaults["name"]>;
|
||||
default: unknown extends Defaults["name"] ? string : string | Defaults["name"];
|
||||
};
|
||||
label: unknown extends Defaults["label"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["label"] ? string : string | Defaults["label"]>;
|
||||
default: unknown extends Defaults["label"] ? string : string | Defaults["label"];
|
||||
};
|
||||
readonly: unknown extends Defaults["readonly"] ? {
|
||||
type: PropType<boolean | null>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<boolean | null>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["readonly"] ? boolean | null : boolean | Defaults["readonly"] | null>;
|
||||
default: unknown extends Defaults["readonly"] ? boolean | null : Defaults["readonly"] | NonNullable<boolean | null>;
|
||||
};
|
||||
rules: unknown extends Defaults["rules"] ? {
|
||||
type: PropType<readonly (import("../../types.js").ValidationRule | import("../../labs/rules/index.js").ValidationAlias)[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<readonly (import("../../types.js").ValidationRule | import("../../labs/rules/index.js").ValidationAlias)[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["rules"] ? readonly (string | boolean | PromiseLike<import("../../composables/validation.js").ValidationResult> | ((value: any) => import("../../composables/validation.js").ValidationResult) | ((value: any) => PromiseLike<import("../../composables/validation.js").ValidationResult>) | [string, any, (string | undefined)?])[] : readonly (string | boolean | PromiseLike<import("../../composables/validation.js").ValidationResult> | ((value: any) => import("../../composables/validation.js").ValidationResult) | ((value: any) => PromiseLike<import("../../composables/validation.js").ValidationResult>) | [string, any, (string | undefined)?])[] | Defaults["rules"]>;
|
||||
default: unknown extends Defaults["rules"] ? readonly (string | boolean | PromiseLike<import("../../composables/validation.js").ValidationResult> | ((value: any) => import("../../composables/validation.js").ValidationResult) | ((value: any) => PromiseLike<import("../../composables/validation.js").ValidationResult>) | [string, any, (string | undefined)?])[] : readonly (string | boolean | PromiseLike<import("../../composables/validation.js").ValidationResult> | ((value: any) => import("../../composables/validation.js").ValidationResult) | ((value: any) => PromiseLike<import("../../composables/validation.js").ValidationResult>) | [string, any, (string | undefined)?])[] | Defaults["rules"];
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? null : {
|
||||
type: PropType<unknown extends Defaults["modelValue"] ? any : any>;
|
||||
default: unknown extends Defaults["modelValue"] ? any : any;
|
||||
};
|
||||
validateOn: unknown extends Defaults["validateOn"] ? PropType<("blur eager" | "blur lazy" | "eager" | "eager blur" | "eager input" | "eager invalid-input" | "eager submit" | "input eager" | "input lazy" | "invalid-input eager" | "invalid-input lazy" | "lazy" | "lazy blur" | "lazy input" | "lazy invalid-input" | "lazy submit" | "submit eager" | "submit lazy" | ("blur" | "input" | "invalid-input" | "submit")) | undefined> : {
|
||||
type: PropType<unknown extends Defaults["validateOn"] ? ("blur eager" | "blur lazy" | "eager" | "eager blur" | "eager input" | "eager invalid-input" | "eager submit" | "input eager" | "input lazy" | "invalid-input eager" | "invalid-input lazy" | "lazy" | "lazy blur" | "lazy input" | "lazy invalid-input" | "lazy submit" | "submit eager" | "submit lazy" | ("blur" | "input" | "invalid-input" | "submit")) | undefined : Defaults["validateOn"] | ("blur eager" | "blur lazy" | "eager" | "eager blur" | "eager input" | "eager invalid-input" | "eager submit" | "input eager" | "input lazy" | "invalid-input eager" | "invalid-input lazy" | "lazy" | "lazy blur" | "lazy input" | "lazy invalid-input" | "lazy submit" | "submit eager" | "submit lazy" | ("blur" | "input" | "invalid-input" | "submit")) | undefined>;
|
||||
default: unknown extends Defaults["validateOn"] ? ("blur eager" | "blur lazy" | "eager" | "eager blur" | "eager input" | "eager invalid-input" | "eager submit" | "input eager" | "input lazy" | "invalid-input eager" | "invalid-input lazy" | "lazy" | "lazy blur" | "lazy input" | "lazy invalid-input" | "lazy submit" | "submit eager" | "submit lazy" | ("blur" | "input" | "invalid-input" | "submit")) | undefined : Defaults["validateOn"] | NonNullable<("blur eager" | "blur lazy" | "eager" | "eager blur" | "eager input" | "eager invalid-input" | "eager submit" | "input eager" | "input lazy" | "invalid-input eager" | "invalid-input lazy" | "lazy" | "lazy blur" | "lazy input" | "lazy invalid-input" | "lazy submit" | "submit eager" | "submit lazy" | ("blur" | "input" | "invalid-input" | "submit")) | undefined>;
|
||||
};
|
||||
validationValue: unknown extends Defaults["validationValue"] ? null : {
|
||||
type: PropType<unknown extends Defaults["validationValue"] ? any : any>;
|
||||
default: unknown extends Defaults["validationValue"] ? any : any;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
id: unknown extends Defaults["id"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["id"] ? string : string | Defaults["id"]>;
|
||||
default: unknown extends Defaults["id"] ? string : string | Defaults["id"];
|
||||
};
|
||||
appendIcon: unknown extends Defaults["appendIcon"] ? PropType<IconValue> : {
|
||||
type: PropType<unknown extends Defaults["appendIcon"] ? IconValue : Defaults["appendIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["appendIcon"] ? IconValue : Defaults["appendIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
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"];
|
||||
};
|
||||
centerAffix: unknown extends Defaults["centerAffix"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["centerAffix"] ? boolean : boolean | Defaults["centerAffix"]>;
|
||||
default: unknown extends Defaults["centerAffix"] ? boolean : boolean | Defaults["centerAffix"];
|
||||
};
|
||||
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"];
|
||||
};
|
||||
glow: unknown extends Defaults["glow"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["glow"] ? boolean : boolean | Defaults["glow"]>;
|
||||
default: unknown extends Defaults["glow"] ? boolean : boolean | Defaults["glow"];
|
||||
};
|
||||
iconColor: unknown extends Defaults["iconColor"] ? (BooleanConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["iconColor"] ? string | boolean : string | boolean | Defaults["iconColor"]>;
|
||||
default: unknown extends Defaults["iconColor"] ? string | boolean : Defaults["iconColor"] | NonNullable<string | boolean>;
|
||||
};
|
||||
prependIcon: unknown extends Defaults["prependIcon"] ? PropType<IconValue> : {
|
||||
type: PropType<unknown extends Defaults["prependIcon"] ? IconValue : Defaults["prependIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["prependIcon"] ? IconValue : Defaults["prependIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
hideDetails: unknown extends Defaults["hideDetails"] ? PropType<"auto" | boolean> : {
|
||||
type: PropType<unknown extends Defaults["hideDetails"] ? "auto" | boolean : "auto" | boolean | Defaults["hideDetails"]>;
|
||||
default: unknown extends Defaults["hideDetails"] ? "auto" | boolean : Defaults["hideDetails"] | NonNullable<"auto" | boolean>;
|
||||
};
|
||||
hideSpinButtons: unknown extends Defaults["hideSpinButtons"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["hideSpinButtons"] ? boolean : boolean | Defaults["hideSpinButtons"]>;
|
||||
default: unknown extends Defaults["hideSpinButtons"] ? boolean : boolean | Defaults["hideSpinButtons"];
|
||||
};
|
||||
hint: unknown extends Defaults["hint"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["hint"] ? string : string | Defaults["hint"]>;
|
||||
default: unknown extends Defaults["hint"] ? string : string | Defaults["hint"];
|
||||
};
|
||||
indentDetails: unknown extends Defaults["indentDetails"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["indentDetails"] ? boolean : boolean | Defaults["indentDetails"]>;
|
||||
default: unknown extends Defaults["indentDetails"] ? boolean : boolean | Defaults["indentDetails"];
|
||||
};
|
||||
persistentHint: unknown extends Defaults["persistentHint"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["persistentHint"] ? boolean : boolean | Defaults["persistentHint"]>;
|
||||
default: unknown extends Defaults["persistentHint"] ? boolean : boolean | Defaults["persistentHint"];
|
||||
};
|
||||
messages: unknown extends Defaults["messages"] ? {
|
||||
type: PropType<string | readonly string[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<string | readonly string[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["messages"] ? string | readonly string[] : string | readonly string[] | Defaults["messages"]>;
|
||||
default: unknown extends Defaults["messages"] ? string | readonly string[] : Defaults["messages"] | NonNullable<string | readonly string[]>;
|
||||
};
|
||||
direction: unknown extends Defaults["direction"] ? {
|
||||
type: PropType<'horizontal' | 'vertical'>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<'horizontal' | 'vertical'>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["direction"] ? "horizontal" | "vertical" : "horizontal" | "vertical" | Defaults["direction"]>;
|
||||
default: unknown extends Defaults["direction"] ? "horizontal" | "vertical" : Defaults["direction"] | NonNullable<"horizontal" | "vertical">;
|
||||
};
|
||||
'onClick:prepend': unknown extends Defaults["onClick:prepend"] ? PropType<(args_0: MouseEvent) => void> : {
|
||||
type: PropType<unknown extends Defaults["onClick:prepend"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClick:prepend"]>;
|
||||
default: unknown extends Defaults["onClick:prepend"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClick:prepend"];
|
||||
};
|
||||
'onClick:append': unknown extends Defaults["onClick:append"] ? PropType<(args_0: MouseEvent) => void> : {
|
||||
type: PropType<unknown extends Defaults["onClick:append"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClick:append"]>;
|
||||
default: unknown extends Defaults["onClick:append"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClick:append"];
|
||||
};
|
||||
};
|
||||
export type VInputSlots = {
|
||||
default: VInputSlot;
|
||||
prepend: VInputSlot;
|
||||
append: VInputSlot;
|
||||
details: VInputSlot;
|
||||
message: VMessageSlot;
|
||||
};
|
||||
export declare const VInput: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
focused: boolean;
|
||||
disabled: boolean | null;
|
||||
error: boolean;
|
||||
errorMessages: string | readonly string[] | null;
|
||||
maxErrors: string | number;
|
||||
readonly: boolean | null;
|
||||
rules: readonly (string | boolean | PromiseLike<import("../../composables/validation.js").ValidationResult> | ((value: any) => import("../../composables/validation.js").ValidationResult) | ((value: any) => PromiseLike<import("../../composables/validation.js").ValidationResult>) | [string, any, (string | undefined)?])[];
|
||||
density: import("../../composables/density.js").Density;
|
||||
centerAffix: boolean;
|
||||
glow: boolean;
|
||||
hideSpinButtons: boolean;
|
||||
indentDetails: boolean;
|
||||
persistentHint: boolean;
|
||||
messages: string | readonly string[];
|
||||
direction: "horizontal" | "vertical";
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
|
||||
name?: string | undefined;
|
||||
label?: string | undefined;
|
||||
validateOn?: ("blur eager" | "blur lazy" | "eager" | "eager blur" | "eager input" | "eager invalid-input" | "eager submit" | "input eager" | "input lazy" | "invalid-input eager" | "invalid-input lazy" | "lazy" | "lazy blur" | "lazy input" | "lazy invalid-input" | "lazy submit" | "submit eager" | "submit lazy" | ("blur" | "input" | "invalid-input" | "submit")) | undefined;
|
||||
validationValue?: any;
|
||||
maxWidth?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
id?: string | undefined;
|
||||
appendIcon?: IconValue | undefined;
|
||||
baseColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
iconColor?: string | boolean | undefined;
|
||||
prependIcon?: IconValue | undefined;
|
||||
hideDetails?: "auto" | boolean | undefined;
|
||||
hint?: string | undefined;
|
||||
'onClick:prepend'?: ((args_0: MouseEvent) => void) | undefined;
|
||||
'onClick:append'?: ((args_0: MouseEvent) => void) | undefined;
|
||||
} & {}, {
|
||||
reset: () => Promise<void>;
|
||||
resetValidation: () => Promise<void>;
|
||||
validate: (silent?: boolean) => Promise<string[]>;
|
||||
isValid: ComputedRef<boolean | null>;
|
||||
errorMessages: ComputedRef<string[]>;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:modelValue': (value: any) => true;
|
||||
}, "$children" | "modelValue" | "update:modelValue" | "v-slot:append" | "v-slot:default" | "v-slot:details" | "v-slot:message" | "v-slot:prepend" | "v-slots">, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
focused: boolean;
|
||||
disabled: boolean | null;
|
||||
error: boolean;
|
||||
errorMessages: string | readonly string[] | null;
|
||||
maxErrors: string | number;
|
||||
readonly: boolean | null;
|
||||
rules: readonly (string | boolean | PromiseLike<import("../../composables/validation.js").ValidationResult> | ((value: any) => import("../../composables/validation.js").ValidationResult) | ((value: any) => PromiseLike<import("../../composables/validation.js").ValidationResult>) | [string, any, (string | undefined)?])[];
|
||||
density: import("../../composables/density.js").Density;
|
||||
centerAffix: boolean;
|
||||
glow: boolean;
|
||||
hideSpinButtons: boolean;
|
||||
indentDetails: boolean;
|
||||
persistentHint: boolean;
|
||||
messages: string | readonly string[];
|
||||
direction: "horizontal" | "vertical";
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: VInputSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prepend: (arg: VInputSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: (arg: VInputSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
details: (arg: VInputSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
message: (arg: VMessageSlot) => 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;
|
||||
disabled: boolean | null;
|
||||
error: boolean;
|
||||
errorMessages: string | readonly string[] | null;
|
||||
maxErrors: string | number;
|
||||
readonly: boolean | null;
|
||||
rules: readonly (string | boolean | PromiseLike<import("../../composables/validation.js").ValidationResult> | ((value: any) => import("../../composables/validation.js").ValidationResult) | ((value: any) => PromiseLike<import("../../composables/validation.js").ValidationResult>) | [string, any, (string | undefined)?])[];
|
||||
density: import("../../composables/density.js").Density;
|
||||
centerAffix: boolean;
|
||||
glow: boolean;
|
||||
hideSpinButtons: boolean;
|
||||
indentDetails: boolean;
|
||||
persistentHint: boolean;
|
||||
messages: string | readonly string[];
|
||||
direction: "horizontal" | "vertical";
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
|
||||
name?: string | undefined;
|
||||
label?: string | undefined;
|
||||
validateOn?: ("blur eager" | "blur lazy" | "eager" | "eager blur" | "eager input" | "eager invalid-input" | "eager submit" | "input eager" | "input lazy" | "invalid-input eager" | "invalid-input lazy" | "lazy" | "lazy blur" | "lazy input" | "lazy invalid-input" | "lazy submit" | "submit eager" | "submit lazy" | ("blur" | "input" | "invalid-input" | "submit")) | undefined;
|
||||
validationValue?: any;
|
||||
maxWidth?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
id?: string | undefined;
|
||||
appendIcon?: IconValue | undefined;
|
||||
baseColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
iconColor?: string | boolean | undefined;
|
||||
prependIcon?: IconValue | undefined;
|
||||
hideDetails?: "auto" | boolean | undefined;
|
||||
hint?: string | undefined;
|
||||
'onClick:prepend'?: ((args_0: MouseEvent) => void) | undefined;
|
||||
'onClick:append'?: ((args_0: MouseEvent) => void) | undefined;
|
||||
} & {}, {
|
||||
reset: () => Promise<void>;
|
||||
resetValidation: () => Promise<void>;
|
||||
validate: (silent?: boolean) => Promise<string[]>;
|
||||
isValid: ComputedRef<boolean | null>;
|
||||
errorMessages: ComputedRef<string[]>;
|
||||
}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
focused: boolean;
|
||||
disabled: boolean | null;
|
||||
error: boolean;
|
||||
errorMessages: string | readonly string[] | null;
|
||||
maxErrors: string | number;
|
||||
readonly: boolean | null;
|
||||
rules: readonly (string | boolean | PromiseLike<import("../../composables/validation.js").ValidationResult> | ((value: any) => import("../../composables/validation.js").ValidationResult) | ((value: any) => PromiseLike<import("../../composables/validation.js").ValidationResult>) | [string, any, (string | undefined)?])[];
|
||||
density: import("../../composables/density.js").Density;
|
||||
centerAffix: boolean;
|
||||
glow: boolean;
|
||||
hideSpinButtons: boolean;
|
||||
indentDetails: boolean;
|
||||
persistentHint: boolean;
|
||||
messages: string | readonly string[];
|
||||
direction: "horizontal" | "vertical";
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
focused: boolean;
|
||||
disabled: boolean | null;
|
||||
error: boolean;
|
||||
errorMessages: string | readonly string[] | null;
|
||||
maxErrors: string | number;
|
||||
readonly: boolean | null;
|
||||
rules: readonly (string | boolean | PromiseLike<import("../../composables/validation.js").ValidationResult> | ((value: any) => import("../../composables/validation.js").ValidationResult) | ((value: any) => PromiseLike<import("../../composables/validation.js").ValidationResult>) | [string, any, (string | undefined)?])[];
|
||||
density: import("../../composables/density.js").Density;
|
||||
centerAffix: boolean;
|
||||
glow: boolean;
|
||||
hideSpinButtons: boolean;
|
||||
indentDetails: boolean;
|
||||
persistentHint: boolean;
|
||||
messages: string | readonly string[];
|
||||
direction: "horizontal" | "vertical";
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
|
||||
name?: string | undefined;
|
||||
label?: string | undefined;
|
||||
validateOn?: ("blur eager" | "blur lazy" | "eager" | "eager blur" | "eager input" | "eager invalid-input" | "eager submit" | "input eager" | "input lazy" | "invalid-input eager" | "invalid-input lazy" | "lazy" | "lazy blur" | "lazy input" | "lazy invalid-input" | "lazy submit" | "submit eager" | "submit lazy" | ("blur" | "input" | "invalid-input" | "submit")) | undefined;
|
||||
validationValue?: any;
|
||||
maxWidth?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
id?: string | undefined;
|
||||
appendIcon?: IconValue | undefined;
|
||||
baseColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
iconColor?: string | boolean | undefined;
|
||||
prependIcon?: IconValue | undefined;
|
||||
hideDetails?: "auto" | boolean | undefined;
|
||||
hint?: string | undefined;
|
||||
'onClick:prepend'?: ((args_0: MouseEvent) => void) | undefined;
|
||||
'onClick:append'?: ((args_0: MouseEvent) => void) | undefined;
|
||||
} & {}, {
|
||||
reset: () => Promise<void>;
|
||||
resetValidation: () => Promise<void>;
|
||||
validate: (silent?: boolean) => Promise<string[]>;
|
||||
isValid: ComputedRef<boolean | null>;
|
||||
errorMessages: ComputedRef<string[]>;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:modelValue': (value: any) => true;
|
||||
}, "$children" | "modelValue" | "update:modelValue" | "v-slot:append" | "v-slot:default" | "v-slot:details" | "v-slot:message" | "v-slot:prepend" | "v-slots">, string, {
|
||||
style: import("vue").StyleValue;
|
||||
focused: boolean;
|
||||
disabled: boolean | null;
|
||||
error: boolean;
|
||||
errorMessages: string | readonly string[] | null;
|
||||
maxErrors: string | number;
|
||||
readonly: boolean | null;
|
||||
rules: readonly (string | boolean | PromiseLike<import("../../composables/validation.js").ValidationResult> | ((value: any) => import("../../composables/validation.js").ValidationResult) | ((value: any) => PromiseLike<import("../../composables/validation.js").ValidationResult>) | [string, any, (string | undefined)?])[];
|
||||
density: import("../../composables/density.js").Density;
|
||||
centerAffix: boolean;
|
||||
glow: boolean;
|
||||
hideSpinButtons: boolean;
|
||||
indentDetails: boolean;
|
||||
persistentHint: boolean;
|
||||
messages: string | readonly string[];
|
||||
direction: "horizontal" | "vertical";
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: VInputSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prepend: (arg: VInputSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: (arg: VInputSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
details: (arg: VInputSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
message: (arg: VMessageSlot) => 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 & (new <T>(props: {
|
||||
modelValue?: T | null;
|
||||
'onUpdate:modelValue'?: (value: T | null) => void;
|
||||
}, slots: VInputSlots) => GenericProps<typeof props, typeof slots>) & 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>;
|
||||
disabled: {
|
||||
type: PropType<boolean | null>;
|
||||
default: null;
|
||||
};
|
||||
error: BooleanConstructor;
|
||||
errorMessages: {
|
||||
type: PropType<string | readonly string[] | null>;
|
||||
default: () => never[];
|
||||
};
|
||||
maxErrors: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
name: StringConstructor;
|
||||
label: StringConstructor;
|
||||
readonly: {
|
||||
type: PropType<boolean | null>;
|
||||
default: null;
|
||||
};
|
||||
rules: {
|
||||
type: PropType<readonly (import("../../types.js").ValidationRule | import("../../labs/rules/index.js").ValidationAlias)[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
modelValue: null;
|
||||
validateOn: PropType<import("../../composables/validation.js").ValidationProps['validateOn']>;
|
||||
validationValue: null;
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
id: StringConstructor;
|
||||
appendIcon: PropType<IconValue>;
|
||||
baseColor: StringConstructor;
|
||||
centerAffix: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
color: StringConstructor;
|
||||
glow: BooleanConstructor;
|
||||
iconColor: (BooleanConstructor | StringConstructor)[];
|
||||
prependIcon: PropType<IconValue>;
|
||||
hideDetails: PropType<boolean | 'auto'>;
|
||||
hideSpinButtons: BooleanConstructor;
|
||||
hint: StringConstructor;
|
||||
indentDetails: {
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
};
|
||||
persistentHint: BooleanConstructor;
|
||||
messages: {
|
||||
type: PropType<string | readonly string[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
direction: {
|
||||
type: PropType<'horizontal' | 'vertical'>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
'onClick:prepend': PropType<(args_0: MouseEvent) => void>;
|
||||
'onClick:append': PropType<(args_0: MouseEvent) => void>;
|
||||
}, 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>;
|
||||
disabled: {
|
||||
type: PropType<boolean | null>;
|
||||
default: null;
|
||||
};
|
||||
error: BooleanConstructor;
|
||||
errorMessages: {
|
||||
type: PropType<string | readonly string[] | null>;
|
||||
default: () => never[];
|
||||
};
|
||||
maxErrors: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
name: StringConstructor;
|
||||
label: StringConstructor;
|
||||
readonly: {
|
||||
type: PropType<boolean | null>;
|
||||
default: null;
|
||||
};
|
||||
rules: {
|
||||
type: PropType<readonly (import("../../types.js").ValidationRule | import("../../labs/rules/index.js").ValidationAlias)[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
modelValue: null;
|
||||
validateOn: PropType<import("../../composables/validation.js").ValidationProps['validateOn']>;
|
||||
validationValue: null;
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
id: StringConstructor;
|
||||
appendIcon: PropType<IconValue>;
|
||||
baseColor: StringConstructor;
|
||||
centerAffix: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
color: StringConstructor;
|
||||
glow: BooleanConstructor;
|
||||
iconColor: (BooleanConstructor | StringConstructor)[];
|
||||
prependIcon: PropType<IconValue>;
|
||||
hideDetails: PropType<boolean | 'auto'>;
|
||||
hideSpinButtons: BooleanConstructor;
|
||||
hint: StringConstructor;
|
||||
indentDetails: {
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
};
|
||||
persistentHint: BooleanConstructor;
|
||||
messages: {
|
||||
type: PropType<string | readonly string[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
direction: {
|
||||
type: PropType<'horizontal' | 'vertical'>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
'onClick:prepend': PropType<(args_0: MouseEvent) => void>;
|
||||
'onClick:append': PropType<(args_0: MouseEvent) => void>;
|
||||
}>>;
|
||||
export type VInput = InstanceType<typeof VInput>;
|
||||
+179
@@ -0,0 +1,179 @@
|
||||
import { createVNode as _createVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VInput.css";
|
||||
|
||||
// Components
|
||||
import { useInputIcon } from "./InputIcon.js";
|
||||
import { VMessages } from "../VMessages/VMessages.js"; // Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDensityProps, useDensity } from "../../composables/density.js";
|
||||
import { makeDimensionProps, useDimension } from "../../composables/dimensions.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { useRtl } from "../../composables/locale.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js";
|
||||
import { makeValidationProps, useValidation } from "../../composables/validation.js"; // Utilities
|
||||
import { computed, toRef, useId } from 'vue';
|
||||
import { EventProp, genericComponent, pick, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVInputProps = propsFactory({
|
||||
id: String,
|
||||
appendIcon: IconValue,
|
||||
baseColor: String,
|
||||
centerAffix: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
color: String,
|
||||
glow: Boolean,
|
||||
iconColor: [Boolean, String],
|
||||
prependIcon: IconValue,
|
||||
hideDetails: [Boolean, String],
|
||||
hideSpinButtons: Boolean,
|
||||
hint: String,
|
||||
indentDetails: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
persistentHint: Boolean,
|
||||
messages: {
|
||||
type: [Array, String],
|
||||
default: () => []
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'horizontal',
|
||||
validator: v => ['horizontal', 'vertical'].includes(v)
|
||||
},
|
||||
'onClick:prepend': EventProp(),
|
||||
'onClick:append': EventProp(),
|
||||
...makeComponentProps(),
|
||||
...makeDensityProps(),
|
||||
...pick(makeDimensionProps(), ['maxWidth', 'minWidth', 'width']),
|
||||
...makeThemeProps(),
|
||||
...makeValidationProps()
|
||||
}, 'VInput');
|
||||
export const VInput = genericComponent()({
|
||||
name: 'VInput',
|
||||
props: {
|
||||
...makeVInputProps()
|
||||
},
|
||||
emits: {
|
||||
'update:modelValue': value => true
|
||||
},
|
||||
setup(props, {
|
||||
attrs,
|
||||
slots,
|
||||
emit
|
||||
}) {
|
||||
const {
|
||||
densityClasses
|
||||
} = useDensity(props);
|
||||
const {
|
||||
dimensionStyles
|
||||
} = useDimension(props);
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
rtlClasses
|
||||
} = useRtl();
|
||||
const {
|
||||
InputIcon
|
||||
} = useInputIcon(props);
|
||||
const uid = useId();
|
||||
const id = computed(() => props.id || `input-${uid}`);
|
||||
const {
|
||||
errorMessages,
|
||||
isDirty,
|
||||
isDisabled,
|
||||
isReadonly,
|
||||
isPristine,
|
||||
isValid,
|
||||
isValidating,
|
||||
reset,
|
||||
resetValidation,
|
||||
validate,
|
||||
validationClasses
|
||||
} = useValidation(props, 'v-input', id);
|
||||
const messages = computed(() => {
|
||||
if (props.errorMessages?.length || !isPristine.value && errorMessages.value.length) {
|
||||
return errorMessages.value;
|
||||
} else if (props.hint && (props.persistentHint || props.focused)) {
|
||||
return props.hint;
|
||||
} else {
|
||||
return props.messages;
|
||||
}
|
||||
});
|
||||
const hasMessages = toRef(() => messages.value.length > 0);
|
||||
const hasDetails = toRef(() => !props.hideDetails || props.hideDetails === 'auto' && (hasMessages.value || !!slots.details));
|
||||
const messagesId = computed(() => hasDetails.value ? `${id.value}-messages` : undefined);
|
||||
const slotProps = computed(() => ({
|
||||
id,
|
||||
messagesId,
|
||||
isDirty,
|
||||
isDisabled,
|
||||
isReadonly,
|
||||
isPristine,
|
||||
isValid,
|
||||
isValidating,
|
||||
hasDetails,
|
||||
reset,
|
||||
resetValidation,
|
||||
validate
|
||||
}));
|
||||
const color = toRef(() => {
|
||||
return props.error || props.disabled ? undefined : props.focused ? props.color : props.baseColor;
|
||||
});
|
||||
const iconColor = toRef(() => {
|
||||
if (!props.iconColor) return undefined;
|
||||
return props.iconColor === true ? color.value : props.iconColor;
|
||||
});
|
||||
useRender(() => {
|
||||
const hasPrepend = !!(slots.prepend || props.prependIcon);
|
||||
const hasAppend = !!(slots.append || props.appendIcon);
|
||||
return _createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-input', `v-input--${props.direction}`, {
|
||||
'v-input--center-affix': props.centerAffix,
|
||||
'v-input--focused': props.focused,
|
||||
'v-input--glow': props.glow,
|
||||
'v-input--hide-spin-buttons': props.hideSpinButtons,
|
||||
'v-input--indent-details': props.indentDetails
|
||||
}, densityClasses.value, themeClasses.value, rtlClasses.value, validationClasses.value, props.class]),
|
||||
"style": _normalizeStyle([dimensionStyles.value, props.style])
|
||||
}, [hasPrepend && _createElementVNode("div", {
|
||||
"key": "prepend",
|
||||
"class": "v-input__prepend"
|
||||
}, [slots.prepend ? slots.prepend(slotProps.value) : props.prependIcon && _createVNode(InputIcon, {
|
||||
"key": "prepend-icon",
|
||||
"name": "prepend",
|
||||
"color": iconColor.value
|
||||
}, null)]), slots.default && _createElementVNode("div", {
|
||||
"class": "v-input__control"
|
||||
}, [slots.default?.(slotProps.value)]), hasAppend && _createElementVNode("div", {
|
||||
"key": "append",
|
||||
"class": "v-input__append"
|
||||
}, [slots.append ? slots.append(slotProps.value) : props.appendIcon && _createVNode(InputIcon, {
|
||||
"key": "append-icon",
|
||||
"name": "append",
|
||||
"color": iconColor.value
|
||||
}, null)]), hasDetails.value && _createElementVNode("div", {
|
||||
"id": messagesId.value,
|
||||
"class": "v-input__details",
|
||||
"role": "alert",
|
||||
"aria-live": "polite"
|
||||
}, [_createVNode(VMessages, {
|
||||
"active": hasMessages.value,
|
||||
"messages": messages.value
|
||||
}, {
|
||||
message: slots.message
|
||||
}), slots.details?.(slotProps.value)])]);
|
||||
});
|
||||
return {
|
||||
reset,
|
||||
resetValidation,
|
||||
validate,
|
||||
isValid,
|
||||
errorMessages
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VInput.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+124
@@ -0,0 +1,124 @@
|
||||
@use 'sass:math'
|
||||
@use 'sass:selector'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-input
|
||||
display: grid
|
||||
flex: $input-flex
|
||||
font-size: $input-font-size
|
||||
font-weight: $input-font-weight
|
||||
line-height: $input-line-height
|
||||
|
||||
&--disabled
|
||||
pointer-events: none
|
||||
|
||||
&--indent-details
|
||||
.v-input__details
|
||||
padding-inline: $input-details-padding-inline
|
||||
|
||||
@at-root
|
||||
@include tools.density('v-input', $input-density) using ($modifier)
|
||||
--v-input-control-height: #{$input-control-height + $modifier}
|
||||
--v-input-padding-top: #{16px + $modifier * .5}
|
||||
|
||||
.v-input--vertical
|
||||
grid-template-areas: "append" "control" "prepend"
|
||||
grid-template-rows: max-content auto max-content
|
||||
grid-template-columns: min-content
|
||||
|
||||
.v-input__prepend
|
||||
margin-block-start: $input-affix-margin-inside
|
||||
|
||||
.v-input__append
|
||||
margin-block-end: $input-affix-margin-inside
|
||||
|
||||
.v-input--horizontal
|
||||
grid-template-areas: "prepend control append" "a messages b"
|
||||
grid-template-columns: max-content minmax(0, 1fr) max-content
|
||||
grid-template-rows: 1fr auto
|
||||
|
||||
.v-input__prepend
|
||||
margin-inline-end: $input-affix-margin-inside
|
||||
|
||||
.v-input__append
|
||||
margin-inline-start: $input-affix-margin-inside
|
||||
|
||||
.v-input__details
|
||||
align-items: flex-end
|
||||
display: flex
|
||||
font-size: $input-details-font-size
|
||||
font-weight: $input-details-font-weight
|
||||
grid-area: messages
|
||||
letter-spacing: $input-details-letter-spacing
|
||||
line-height: $input-details-line-height
|
||||
min-height: $input-details-min-height
|
||||
padding-top: $input-details-padding-above
|
||||
overflow: hidden
|
||||
justify-content: space-between
|
||||
|
||||
.v-input__details,
|
||||
.v-input__prepend,
|
||||
.v-input__append
|
||||
> .v-icon
|
||||
opacity: var(--v-medium-emphasis-opacity)
|
||||
|
||||
.v-input--disabled &,
|
||||
.v-input--error &
|
||||
> .v-icon,
|
||||
.v-messages
|
||||
opacity: 1
|
||||
|
||||
.v-input--glow.v-input--focused &
|
||||
> .v-icon
|
||||
opacity: 1
|
||||
|
||||
.v-input--disabled &
|
||||
opacity: var(--v-disabled-opacity)
|
||||
|
||||
.v-input--error:not(.v-input--disabled) &
|
||||
> .v-icon,
|
||||
.v-messages
|
||||
color: rgb(var(--v-theme-error))
|
||||
|
||||
.v-input__prepend,
|
||||
.v-input__append
|
||||
display: flex
|
||||
align-items: flex-start
|
||||
padding-top: var(--v-input-padding-top)
|
||||
|
||||
.v-input--center-affix &
|
||||
align-items: center
|
||||
padding-top: 0
|
||||
|
||||
.v-input__prepend
|
||||
grid-area: prepend
|
||||
|
||||
.v-input__append
|
||||
grid-area: append
|
||||
|
||||
.v-input__control
|
||||
display: flex
|
||||
grid-area: control
|
||||
|
||||
.v-input
|
||||
&--hide-spin-buttons
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button
|
||||
-webkit-appearance: none
|
||||
margin: 0
|
||||
input[type=number]
|
||||
-moz-appearance: textfield
|
||||
|
||||
&--plain-underlined
|
||||
|
||||
.v-input__prepend,
|
||||
.v-input__append
|
||||
$this: &
|
||||
align-items: flex-start
|
||||
|
||||
@at-root
|
||||
@include tools.density('v-input', $input-density) using ($modifier)
|
||||
@at-root #{selector.append(&, $this)}
|
||||
padding-top: calc(var(--v-input-padding-top) + #{math.max(0px, 4px + $modifier * .25)})
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
@use 'sass:map';
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
// CONTROL
|
||||
$input-density: ('default': 0, 'comfortable': -2, 'compact': -4) !default;
|
||||
$input-control-height: 56px !default;
|
||||
$input-flex: 1 1 auto !default;
|
||||
$input-font-size: tools.map-deep-get(settings.$typography, 'body-large', 'size') !default;
|
||||
$input-font-weight: tools.map-deep-get(settings.$typography, 'body-large', 'weight') !default;
|
||||
$input-line-height: 1.5 !default;
|
||||
|
||||
// CHIPS
|
||||
$input-chips-margin-top: null !default;
|
||||
$input-chips-margin-bottom: null !default;
|
||||
|
||||
// DETAILS
|
||||
$input-details-font-size: .75rem !default;
|
||||
$input-details-font-weight: 400 !default;
|
||||
$input-details-letter-spacing: .0333333333em !default;
|
||||
$input-details-line-height: normal !default;
|
||||
$input-details-min-height: 22px !default;
|
||||
$input-details-padding-above: 6px !default;
|
||||
$input-details-padding-inline: 16px !default;
|
||||
$input-details-transition: 150ms settings.$standard-easing !default;
|
||||
|
||||
// AFFIXES
|
||||
$input-affix-margin-inside: 16px !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VInput } from './VInput.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VInput } from "./VInput.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VInput"],"sources":["../../../src/components/VInput/index.ts"],"sourcesContent":["export { VInput } from './VInput'\n"],"mappings":"SAASA,MAAM","ignoreList":[]}
|
||||
Reference in New Issue
Block a user