Variable: RCustomField
ts
const RCustomField: DefineComponent<ExtractPropTypes<AppendDefault<{
active: BooleanConstructor;
appendIcon: PropType<IconValue>;
appendInnerIcon: PropType<IconValue>;
autofocus: {
default: boolean;
type: PropType<boolean>;
};
baseColor: StringConstructor;
bgColor: StringConstructor;
centerAffix: {
default: undefined;
type: BooleanConstructor;
};
class: PropType<any>;
clearable: BooleanConstructor;
clearIcon: Omit<{
default: string;
type: PropType<IconValue>;
}, "type" | "default"> & {
default: | NonNullable<IconValue>
| () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<
| IconValue
| () => VNode<RendererNode, RendererElement, {
[key: ...]: ...;
}>>;
};
color: StringConstructor;
density: {
default: string;
type: PropType<Density>;
validator: (v: any) => boolean;
};
direction: {
default: string;
type: PropType<"horizontal" | "vertical">;
validator: (v: any) => boolean;
};
dirty: BooleanConstructor;
disabled: {
default: null;
type: BooleanConstructor;
};
error: BooleanConstructor;
errorMessages: {
default: () => never[];
type: PropType<string | readonly string[] | null>;
};
flat: BooleanConstructor;
focused: BooleanConstructor;
glow: BooleanConstructor;
hideDetails: PropType<boolean | "auto">;
hideSpinButtons: BooleanConstructor;
hint: StringConstructor;
iconColor: (BooleanConstructor | StringConstructor)[];
id: StringConstructor;
isFocused: {
default: undefined;
type: PropType<(e: MouseEvent) => boolean | undefined>;
};
label: StringConstructor;
loading: (BooleanConstructor | StringConstructor)[];
maxErrors: {
default: number;
type: (NumberConstructor | StringConstructor)[];
};
maxWidth: (NumberConstructor | StringConstructor)[];
messages: {
default: () => never[];
type: PropType<string | readonly string[]>;
};
minWidth: (NumberConstructor | StringConstructor)[];
modelValue: null;
name: StringConstructor;
onClick:append: PropType<(args_0: MouseEvent) => void>;
onClick:appendInner?: PropType<(...args: [MouseEvent]) => void | undefined>;
onClick:clear?: PropType<(...args: [MouseEvent]) => void | undefined>;
onClick:control?: PropType<(...args: [MouseEvent]) => void | undefined>;
onClick:prepend: PropType<(args_0: MouseEvent) => void>;
onClick:prependInner?: PropType<(...args: [MouseEvent]) => void | undefined>;
onMousedown:control?: PropType<(...args: [MouseEvent]) => void | undefined>;
onUpdate:focused?: PropType<(...args: [boolean]) => void | undefined>;
onUpdate:model-value?: PropType<(...args: [any]) => void | undefined>;
onUpdate:modelValue?: PropType<(...args: [any]) => void | undefined>;
persistentClear: BooleanConstructor;
persistentHint: BooleanConstructor;
prefix: {
default: undefined;
type: PropType<string | undefined>;
};
prependIcon: PropType<IconValue>;
prependInnerIcon: PropType<IconValue>;
readonly: {
default: null;
type: PropType<boolean | null>;
};
reverse: BooleanConstructor;
role: {
default: undefined;
type: PropType<string | undefined>;
};
rounded: {
default: undefined;
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
};
rules: {
default: () => never[];
type: PropType<readonly (
| string
| boolean
| PromiseLike<ValidationResult>
| (value: any) => ValidationResult
| (value: any) => PromiseLike<ValidationResult>
| [string, any, string?])[]>;
};
singleLine: BooleanConstructor;
style: {
default: null;
type: PropType<StyleValue>;
};
suffix: {
default: undefined;
type: PropType<string | undefined>;
};
theme: StringConstructor;
tile: BooleanConstructor;
validateOn: PropType<
| "eager"
| "submit"
| "input"
| "blur"
| "invalid-input"
| "input lazy"
| "blur lazy"
| "submit lazy"
| "invalid-input lazy"
| "input eager"
| "blur eager"
| "submit eager"
| "invalid-input eager"
| "lazy input"
| "lazy blur"
| "lazy submit"
| "lazy invalid-input"
| "eager input"
| "eager blur"
| "eager submit"
| "eager invalid-input"
| "lazy"
| undefined>;
validationValue: null;
variant: {
default: string;
type: PropType<
| "underlined"
| "outlined"
| "filled"
| "solo"
| "solo-inverted"
| "solo-filled"
| "plain">;
validator: (v: any) => boolean;
};
width: (NumberConstructor | StringConstructor)[];
}, {
}>>, Omit<Omit<{
$: ComponentInternalInstance;
$attrs: Data;
$data: {
};
$el: any;
$emit: (event: string, ...args: any[]) => void;
$forceUpdate: () => void;
$host: Element | null;
$nextTick: {
(): Promise<void>;
<T, R> (this: T, fn: (this: T) => R | Promise<R>): Promise<R>;
};
$options: ComponentOptionsBase<{
centerAffix: boolean;
density: Density;
direction: ... | ...;
disabled: ... | ... | ...;
error: boolean;
errorMessages: ... | ... | ...;
focused: boolean;
glow: boolean;
hideSpinButtons: boolean;
maxErrors: ... | ...;
messages: ... | ...;
persistentHint: boolean;
readonly: ... | ... | ...;
rules: readonly ...[];
style: ... | ... | ... | ... | ...;
} & {
appendIcon?: ... | ...;
baseColor?: ... | ...;
class?: any;
color?: ... | ...;
hideDetails?: ... | ... | ... | ...;
hint?: ... | ...;
iconColor?: ... | ... | ... | ...;
id?: ... | ...;
label?: ... | ...;
maxWidth?: ... | ... | ...;
minWidth?: ... | ... | ...;
name?: ... | ...;
onClick:append?: ... | ...;
onClick:prepend?: ... | ...;
onUpdate:focused?: ... | ...;
prependIcon?: ... | ...;
theme?: ... | ...;
validateOn?: ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ...;
validationValue?: any;
width?: ... | ... | ...;
}, {
errorMessages: ComputedRef<...[]>;
isValid: ComputedRef<... | ... | ...>;
reset: () => Promise<...>;
resetValidation: () => Promise<...>;
validate: (silent?: ... | ... | ...) => Promise<...>;
}, unknown, {
}, {
}, ComponentOptionsMixin, ComponentOptionsMixin, Omit<{
update:modelValue: (value: ...) => ...;
},
| "modelValue"
| "update:modelValue"
| "$children"
| "v-slots"
| "v-slot:default"
| "v-slot:append"
| "v-slot:details"
| "v-slot:message"
| "v-slot:prepend">, string, {
centerAffix: boolean;
density: Density;
direction: "horizontal" | "vertical";
disabled: boolean | null;
error: boolean;
errorMessages: string | readonly ...[] | null;
focused: boolean;
glow: boolean;
hideSpinButtons: boolean;
maxErrors: string | number;
messages: string | readonly ...[];
persistentHint: boolean;
readonly: boolean | null;
rules: readonly (... | ... | ... | ... | ... | ... | ...)[];
style: StyleValue;
}, {
}, string, SlotsType<Partial<{
append: ...;
default: ...;
details: ...;
message: ...;
prepend: ...;
}>>, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & MergedComponentOptionsOverride;
$parent: | ComponentPublicInstance<{
}, {
}, {
}, {
}, {
}, {
}, {
}, {
}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {
}, {
}, string, {
}, {
}, {
}, string, ComponentProvideOptions>, {
}, {
}, "", {
}, any>
| null;
$props: Partial<{
centerAffix: boolean;
density: Density;
direction: "horizontal" | "vertical";
disabled: boolean | null;
error: boolean;
errorMessages: string | readonly ...[] | null;
focused: boolean;
glow: boolean;
hideSpinButtons: boolean;
maxErrors: string | number;
messages: string | readonly ...[];
persistentHint: boolean;
readonly: boolean | null;
rules: readonly (... | ... | ... | ... | ... | ... | ...)[];
style: StyleValue;
}> & Omit<{
appendIcon?: ... | ...;
baseColor?: ... | ...;
centerAffix: boolean;
class?: any;
color?: ... | ...;
density: Density;
direction: ... | ...;
disabled: ... | ... | ...;
error: boolean;
errorMessages: ... | ... | ...;
focused: boolean;
glow: boolean;
hideDetails?: ... | ... | ... | ...;
hideSpinButtons: boolean;
hint?: ... | ...;
iconColor?: ... | ... | ... | ...;
id?: ... | ...;
label?: ... | ...;
maxErrors: ... | ...;
maxWidth?: ... | ... | ...;
messages: ... | ...;
minWidth?: ... | ... | ...;
name?: ... | ...;
onClick:append?: ... | ...;
onClick:prepend?: ... | ...;
onUpdate:focused?: ... | ...;
persistentHint: boolean;
prependIcon?: ... | ...;
readonly: ... | ... | ...;
rules: readonly ...[];
style: ... | ... | ... | ... | ...;
theme?: ... | ...;
validateOn?: ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ...;
validationValue?: any;
width?: ... | ... | ...;
} & VNodeProps & AllowedComponentProps & ComponentCustomProps,
| "style"
| "error"
| "messages"
| "focused"
| "disabled"
| "errorMessages"
| "maxErrors"
| "readonly"
| "rules"
| "density"
| "centerAffix"
| "glow"
| "hideSpinButtons"
| "persistentHint"
| "direction">;
$refs: Data;
$root: | ComponentPublicInstance<{
}, {
}, {
}, {
}, {
}, {
}, {
}, {
}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {
}, {
}, string, {
}, {
}, {
}, string, ComponentProvideOptions>, {
}, {
}, "", {
}, any>
| null;
$slots: UnwrapSlotsType<S>;
$watch: WatchStopHandle;
} & Readonly<{
centerAffix: boolean;
density: Density;
direction: "horizontal" | "vertical";
disabled: boolean | null;
error: boolean;
errorMessages: string | readonly string[] | null;
focused: boolean;
glow: boolean;
hideSpinButtons: boolean;
maxErrors: string | number;
messages: string | readonly string[];
persistentHint: boolean;
readonly: boolean | null;
rules: readonly (
| string
| boolean
| [string, any, (... | ...)?]
| PromiseLike<ValidationResult>
| (value: any) => ValidationResult
| (value: any) => PromiseLike<...>)[];
style: StyleValue;
}> & Omit<{
centerAffix: boolean;
density: Density;
direction: "horizontal" | "vertical";
disabled: boolean | null;
error: boolean;
errorMessages: string | readonly string[] | null;
focused: boolean;
glow: boolean;
hideSpinButtons: boolean;
maxErrors: string | number;
messages: string | readonly string[];
persistentHint: boolean;
readonly: boolean | null;
rules: readonly (
| string
| boolean
| [..., ..., ...?]
| PromiseLike<...>
| (value: ...) => ...
| (value: ...) => ...)[];
style: | string
| false
| CSSProperties
| StyleValue[]
| null;
} & {
appendIcon?: IconValue;
baseColor?: string;
class?: any;
color?: string;
hideDetails?: boolean | "auto";
hint?: string;
iconColor?: string | boolean;
id?: string;
label?: string;
maxWidth?: string | number;
minWidth?: string | number;
name?: string;
onClick:append?: (args_0: MouseEvent) => void;
onClick:prepend?: (args_0: MouseEvent) => void;
onUpdate:focused?: (args_0: boolean) => void;
prependIcon?: IconValue;
theme?: string;
validateOn?: | "eager"
| "submit"
| "input"
| "blur"
| "invalid-input"
| "input lazy"
| "blur lazy"
| "submit lazy"
| "invalid-input lazy"
| "input eager"
| "blur eager"
| "submit eager"
| "invalid-input eager"
| "lazy input"
| "lazy blur"
| "lazy submit"
| "lazy invalid-input"
| "eager input"
| "eager blur"
| "eager submit"
| "eager invalid-input"
| "lazy";
validationValue?: any;
width?: string | number;
},
| "style"
| "error"
| "reset"
| "validate"
| "messages"
| "focused"
| "disabled"
| "errorMessages"
| "maxErrors"
| "readonly"
| "rules"
| "density"
| "centerAffix"
| "glow"
| "hideSpinButtons"
| "persistentHint"
| "direction"
| "isValid"
| "resetValidation"> & ShallowUnwrapRef<{
errorMessages: ComputedRef<string[]>;
isValid: ComputedRef<boolean | null>;
reset: () => Promise<void>;
resetValidation: () => Promise<void>;
validate: (silent?: boolean) => Promise<string[]>;
}> & ExtractComputedReturns<{
}> & ComponentCustomProperties & {
} & GenericProps<{
modelValue?: unknown;
onUpdate:modelValue?: (value: unknown) => void;
}, VInputSlots>,
| "name"
| "class"
| "style"
| "maxWidth"
| "minWidth"
| "width"
| "color"
| "error"
| "theme"
| "messages"
| "id"
| "label"
| "focused"
| "onUpdate:focused"
| "disabled"
| "errorMessages"
| "maxErrors"
| "readonly"
| "rules"
| "modelValue"
| "validateOn"
| "validationValue"
| "density"
| "appendIcon"
| "baseColor"
| "centerAffix"
| "glow"
| "iconColor"
| "prependIcon"
| "hideDetails"
| "hideSpinButtons"
| "hint"
| "persistentHint"
| "direction"
| "onClick:prepend"
| "onClick:append"
| "onUpdate:modelValue"
| keyof VNodeProps
| "$children"
| "v-slots"
| "v-slot:default"
| "v-slot:append"
| "v-slot:details"
| "v-slot:message"
| "v-slot:prepend">, `$${any}`> & Omit<Omit<{
$: ComponentInternalInstance;
$attrs: Data;
$data: {
};
$el: any;
$emit: (event: "update:focused", ...args: [boolean]) => void;
$forceUpdate: () => void;
$host: Element | null;
$nextTick: {
(): Promise<void>;
<T, R> (this: T, fn: (this: T) => R | Promise<R>): Promise<R>;
};
$options: ComponentOptionsBase<{
active: boolean;
clearable: boolean;
clearIcon: IconValue;
details: boolean;
dirty: boolean;
disabled: boolean;
error: boolean;
flat: boolean;
focused: boolean;
glow: boolean;
persistentClear: boolean;
reverse: boolean;
singleLine: boolean;
style: ... | ... | ... | ... | ...;
tile: boolean;
variant: ... | ... | ... | ... | ... | ... | ...;
} & {
appendInnerIcon?: ... | ...;
baseColor?: ... | ...;
bgColor?: ... | ...;
centerAffix?: ... | ... | ...;
class?: any;
color?: ... | ...;
iconColor?: ... | ... | ... | ...;
id?: ... | ...;
label?: ... | ...;
labelId?: ... | ...;
loading?: ... | ... | ... | ...;
onClick:appendInner?: ... | ...;
onClick:clear?: ... | ...;
onClick:prependInner?: ... | ...;
onUpdate:focused?: ... | ...;
prependInnerIcon?: ... | ...;
rounded?: ... | ... | ... | ... | ...;
theme?: ... | ...;
} & {
onUpdate:focused?: ... | ...;
}, {
controlRef: Ref<... | ..., ... | ...>;
fieldIconColor: ComputedRef<... | ...>;
}, unknown, {
}, {
}, ComponentOptionsMixin, ComponentOptionsMixin, Omit<{
update:focused: (focused: ...) => ...;
update:modelValue: (value: ...) => ...;
},
| "modelValue"
| "update:modelValue"
| "$children"
| "v-slots"
| "v-slot:default"
| "v-slot:loader"
| "v-slot:append-inner"
| "v-slot:clear"
| "v-slot:label"
| "v-slot:prepend-inner">, string, {
active: boolean;
centerAffix: boolean;
clearable: boolean;
clearIcon: IconValue;
details: boolean;
dirty: boolean;
disabled: boolean;
error: boolean;
flat: boolean;
focused: boolean;
glow: boolean;
persistentClear: boolean;
reverse: boolean;
rounded: string | number | boolean;
singleLine: boolean;
style: StyleValue;
tile: boolean;
variant: | "underlined"
| "outlined"
| "filled"
| "solo"
| "solo-inverted"
| "solo-filled"
| "plain";
}, {
}, string, SlotsType<Partial<{
append-inner: ...;
clear: ...;
default: ...;
label: ...;
loader: ...;
prepend-inner: ...;
}>>, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & MergedComponentOptionsOverride;
$parent: | ComponentPublicInstance<{
}, {
}, {
}, {
}, {
}, {
}, {
}, {
}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {
}, {
}, string, {
}, {
}, {
}, string, ComponentProvideOptions>, {
}, {
}, "", {
}, any>
| null;
$props: Partial<{
active: boolean;
centerAffix: boolean;
clearable: boolean;
clearIcon: IconValue;
details: boolean;
dirty: boolean;
disabled: boolean;
error: boolean;
flat: boolean;
focused: boolean;
glow: boolean;
persistentClear: boolean;
reverse: boolean;
rounded: string | number | boolean;
singleLine: boolean;
style: StyleValue;
tile: boolean;
variant: | "underlined"
| "outlined"
| "filled"
| "solo"
| "solo-inverted"
| "solo-filled"
| "plain";
}> & Omit<{
active: boolean;
appendInnerIcon?: ... | ...;
baseColor?: ... | ...;
bgColor?: ... | ...;
centerAffix?: ... | ... | ...;
class?: any;
clearable: boolean;
clearIcon: IconValue;
color?: ... | ...;
details: boolean;
dirty: boolean;
disabled: boolean;
error: boolean;
flat: boolean;
focused: boolean;
glow: boolean;
iconColor?: ... | ... | ... | ...;
id?: ... | ...;
label?: ... | ...;
labelId?: ... | ...;
loading?: ... | ... | ... | ...;
onClick:appendInner?: ... | ...;
onClick:clear?: ... | ...;
onClick:prependInner?: ... | ...;
onUpdate:focused?: ... | ...;
persistentClear: boolean;
prependInnerIcon?: ... | ...;
reverse: boolean;
rounded?: ... | ... | ... | ... | ...;
singleLine: boolean;
style: ... | ... | ... | ... | ...;
theme?: ... | ...;
tile: boolean;
variant: ... | ... | ... | ... | ... | ... | ...;
} & VNodeProps & AllowedComponentProps & ComponentCustomProps,
| "reverse"
| "flat"
| "rounded"
| "tile"
| "style"
| "error"
| "dirty"
| "focused"
| "disabled"
| "centerAffix"
| "glow"
| "clearable"
| "clearIcon"
| "active"
| "persistentClear"
| "singleLine"
| "variant"
| "details">;
$refs: Data;
$root: | ComponentPublicInstance<{
}, {
}, {
}, {
}, {
}, {
}, {
}, {
}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {
}, {
}, string, {
}, {
}, {
}, string, ComponentProvideOptions>, {
}, {
}, "", {
}, any>
| null;
$slots: UnwrapSlotsType<S>;
$watch: WatchStopHandle;
} & Readonly<{
active: boolean;
centerAffix: boolean;
clearable: boolean;
clearIcon: IconValue;
details: boolean;
dirty: boolean;
disabled: boolean;
error: boolean;
flat: boolean;
focused: boolean;
glow: boolean;
persistentClear: boolean;
reverse: boolean;
rounded: string | number | boolean;
singleLine: boolean;
style: StyleValue;
tile: boolean;
variant: | "underlined"
| "outlined"
| "filled"
| "solo"
| "solo-inverted"
| "solo-filled"
| "plain";
}> & Omit<{
active: boolean;
clearable: boolean;
clearIcon: IconValue;
details: boolean;
dirty: boolean;
disabled: boolean;
error: boolean;
flat: boolean;
focused: boolean;
glow: boolean;
persistentClear: boolean;
reverse: boolean;
singleLine: boolean;
style: | string
| false
| CSSProperties
| StyleValue[]
| null;
tile: boolean;
variant: | "underlined"
| "outlined"
| "filled"
| "solo"
| "solo-inverted"
| "solo-filled"
| "plain";
} & {
appendInnerIcon?: IconValue;
baseColor?: string;
bgColor?: string;
centerAffix?: boolean;
class?: any;
color?: string;
iconColor?: string | boolean;
id?: string;
label?: string;
labelId?: string;
loading?: string | boolean;
onClick:appendInner?: (args_0: MouseEvent) => void;
onClick:clear?: (args_0: MouseEvent) => void;
onClick:prependInner?: (args_0: MouseEvent) => void;
onUpdate:focused?: (args_0: boolean) => void;
prependInnerIcon?: IconValue;
rounded?: string | number | boolean;
theme?: string;
} & {
onUpdate:focused?: (focused: boolean) => any;
},
| "reverse"
| "flat"
| "rounded"
| "tile"
| "style"
| "error"
| "dirty"
| "focused"
| "disabled"
| "centerAffix"
| "glow"
| "clearable"
| "clearIcon"
| "active"
| "persistentClear"
| "singleLine"
| "variant"
| "details"
| "controlRef"
| "fieldIconColor"> & ShallowUnwrapRef<{
controlRef: Ref<HTMLElement | undefined, HTMLElement | undefined>;
fieldIconColor: ComputedRef<string | undefined>;
}> & ExtractComputedReturns<{
}> & ComponentCustomProperties & {
} & GenericProps<{
modelValue?: unknown;
onUpdate:modelValue?: (value: unknown) => void;
}, VFieldSlots>,
| "reverse"
| "flat"
| "rounded"
| "tile"
| "class"
| "style"
| "color"
| "error"
| "theme"
| "bgColor"
| "dirty"
| "id"
| "label"
| "focused"
| "onUpdate:focused"
| "disabled"
| "modelValue"
| "baseColor"
| "centerAffix"
| "glow"
| "iconColor"
| "loading"
| "appendInnerIcon"
| "clearable"
| "clearIcon"
| "active"
| "persistentClear"
| "prependInnerIcon"
| "singleLine"
| "variant"
| "onClick:clear"
| "onClick:appendInner"
| "onClick:prependInner"
| "onUpdate:modelValue"
| "details"
| keyof VNodeProps
| "$children"
| "v-slots"
| "v-slot:default"
| "v-slot:loader"
| "v-slot:append-inner"
| "v-slot:clear"
| "v-slot:label"
| "v-slot:prepend-inner"
| "labelId">, `$${any}`> & {
_allExposed: | {
errorMessages: ComputedRef<string[]>;
isValid: ComputedRef<boolean | null>;
reset: () => Promise<void>;
resetValidation: () => Promise<void>;
validate: (silent?: boolean) => Promise<string[]>;
}
| {
controlRef: Ref<HTMLElement | undefined, HTMLElement | undefined>;
fieldIconColor: ComputedRef<string | undefined>;
}
| {
};
}, {
}, {
}, {
}, ComponentOptionsMixin, ComponentOptionsMixin, EmitFunctions<{
click:appendInner: (e: MouseEvent) => e is MouseEvent & { [key: string]: unknown };
click:clear: (e: MouseEvent) => e is MouseEvent & { [key: string]: unknown };
click:control: (e: MouseEvent) => e is MouseEvent & { [key: string]: unknown };
click:prependInner: (e: MouseEvent) => e is MouseEvent & { [key: string]: unknown };
mousedown:control: (e: MouseEvent) => e is MouseEvent & { [key: string]: unknown };
update:focused: (focused: boolean) => boolean;
update:model-value: (val: any) => boolean;
update:modelValue: (val: any) => boolean;
}>, string, PublicProps, ToResolvedProps<ExtractPropTypes<AppendDefault<{
active: BooleanConstructor;
appendIcon: PropType<IconValue>;
appendInnerIcon: PropType<IconValue>;
autofocus: {
default: boolean;
type: PropType<boolean>;
};
baseColor: StringConstructor;
bgColor: StringConstructor;
centerAffix: {
default: undefined;
type: BooleanConstructor;
};
class: PropType<any>;
clearable: BooleanConstructor;
clearIcon: Omit<{
default: string;
type: PropType<IconValue>;
}, "type" | "default"> & {
default: | NonNullable<IconValue>
| () => VNode<RendererNode, RendererElement, {
[key: ...]: ...;
}>;
type: PropType<IconValue | () => VNode<..., ..., ...>>;
};
color: StringConstructor;
density: {
default: string;
type: PropType<Density>;
validator: (v: any) => boolean;
};
direction: {
default: string;
type: PropType<"horizontal" | "vertical">;
validator: (v: any) => boolean;
};
dirty: BooleanConstructor;
disabled: {
default: null;
type: BooleanConstructor;
};
error: BooleanConstructor;
errorMessages: {
default: () => never[];
type: PropType<string | readonly string[] | null>;
};
flat: BooleanConstructor;
focused: BooleanConstructor;
glow: BooleanConstructor;
hideDetails: PropType<boolean | "auto">;
hideSpinButtons: BooleanConstructor;
hint: StringConstructor;
iconColor: (BooleanConstructor | StringConstructor)[];
id: StringConstructor;
isFocused: {
default: undefined;
type: PropType<(e: MouseEvent) => boolean | undefined>;
};
label: StringConstructor;
loading: (BooleanConstructor | StringConstructor)[];
maxErrors: {
default: number;
type: (NumberConstructor | StringConstructor)[];
};
maxWidth: (NumberConstructor | StringConstructor)[];
messages: {
default: () => never[];
type: PropType<string | readonly string[]>;
};
minWidth: (NumberConstructor | StringConstructor)[];
modelValue: null;
name: StringConstructor;
onClick:append: PropType<(args_0: MouseEvent) => void>;
onClick:appendInner?: PropType<(...args: [MouseEvent]) => void | undefined>;
onClick:clear?: PropType<(...args: [MouseEvent]) => void | undefined>;
onClick:control?: PropType<(...args: [MouseEvent]) => void | undefined>;
onClick:prepend: PropType<(args_0: MouseEvent) => void>;
onClick:prependInner?: PropType<(...args: [MouseEvent]) => void | undefined>;
onMousedown:control?: PropType<(...args: [MouseEvent]) => void | undefined>;
onUpdate:focused?: PropType<(...args: [boolean]) => void | undefined>;
onUpdate:model-value?: PropType<(...args: [any]) => void | undefined>;
onUpdate:modelValue?: PropType<(...args: [any]) => void | undefined>;
persistentClear: BooleanConstructor;
persistentHint: BooleanConstructor;
prefix: {
default: undefined;
type: PropType<string | undefined>;
};
prependIcon: PropType<IconValue>;
prependInnerIcon: PropType<IconValue>;
readonly: {
default: null;
type: PropType<boolean | null>;
};
reverse: BooleanConstructor;
role: {
default: undefined;
type: PropType<string | undefined>;
};
rounded: {
default: undefined;
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
};
rules: {
default: () => never[];
type: PropType<readonly (
| string
| boolean
| PromiseLike<ValidationResult>
| (value: any) => ValidationResult
| (value: any) => PromiseLike<...>
| [string, any, (... | ...)?])[]>;
};
singleLine: BooleanConstructor;
style: {
default: null;
type: PropType<StyleValue>;
};
suffix: {
default: undefined;
type: PropType<string | undefined>;
};
theme: StringConstructor;
tile: BooleanConstructor;
validateOn: PropType<
| "eager"
| "submit"
| "input"
| "blur"
| "invalid-input"
| "input lazy"
| "blur lazy"
| "submit lazy"
| "invalid-input lazy"
| "input eager"
| "blur eager"
| "submit eager"
| "invalid-input eager"
| "lazy input"
| "lazy blur"
| "lazy submit"
| "lazy invalid-input"
| "eager input"
| "eager blur"
| "eager submit"
| "eager invalid-input"
| "lazy"
| undefined>;
validationValue: null;
variant: {
default: string;
type: PropType<
| "underlined"
| "outlined"
| "filled"
| "solo"
| "solo-inverted"
| "solo-filled"
| "plain">;
validator: (v: any) => boolean;
};
width: (NumberConstructor | StringConstructor)[];
}, {
}>>, EmitFunctions<{
click:appendInner: (e: MouseEvent) => e is MouseEvent & { [key: string]: unknown };
click:clear: (e: MouseEvent) => e is MouseEvent & { [key: string]: unknown };
click:control: (e: MouseEvent) => e is MouseEvent & { [key: string]: unknown };
click:prependInner: (e: MouseEvent) => e is MouseEvent & { [key: string]: unknown };
mousedown:control: (e: MouseEvent) => e is MouseEvent & { [key: string]: unknown };
update:focused: (focused: boolean) => boolean;
update:model-value: (val: any) => boolean;
update:modelValue: (val: any) => boolean;
}>>, {
active: boolean;
autofocus: boolean;
centerAffix: boolean;
clearable: boolean;
clearIcon: | IconValue
| () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
density: Density;
direction: "horizontal" | "vertical";
dirty: boolean;
disabled: boolean;
error: boolean;
errorMessages: string | readonly string[] | null;
flat: boolean;
focused: boolean;
glow: boolean;
hideSpinButtons: boolean;
isFocused: (e: MouseEvent) => boolean | undefined;
maxErrors: string | number;
messages: string | readonly string[];
persistentClear: boolean;
persistentHint: boolean;
prefix: string | undefined;
readonly: boolean | null;
reverse: boolean;
role: string | undefined;
rounded: string | number | boolean;
rules: readonly (
| string
| boolean
| PromiseLike<ValidationResult>
| (value: any) => ValidationResult
| (value: any) => PromiseLike<ValidationResult>
| [string, any, string?])[];
singleLine: boolean;
style: StyleValue;
suffix: string | undefined;
tile: boolean;
variant: | "underlined"
| "outlined"
| "filled"
| "solo"
| "solo-inverted"
| "solo-filled"
| "plain";
}, SlotsType<RCustomFieldSlots>, {
}, {
}, string, ComponentProvideOptions, true, {
}, any>;RCustomField - A sophisticated wrapper component for building custom field implementations.
This component provides a complete foundation for creating custom field components that integrate seamlessly with Vuetify's field architecture. It reverse-engineers Vuetify's internal VTextField composition pattern (VInput → VField → content) and makes it accessible for custom implementations.
Architecture Foundation
RCustomField follows Vuetify's exact three-layer composition:
- VInput Layer: Handles validation, messages, form integration
- VField Layer: Manages visual styling, focus states, interactions
- Custom Content Layer: Your custom implementation via default slot
This architecture ensures custom fields inherit all Vuetify benefits:
- Material Design theming and variants
- Complete accessibility support
- Form validation integration
- Consistent animations and transitions
- Proper keyboard navigation
Key Features
Rich Slot Props
Custom implementations receive comprehensive props including model value handlers, validation state, focus methods, and a typed event bus.
Event Bus System
A TypedEventEmitter instance enables sophisticated communication between the wrapper and custom implementations without tight coupling.
Dual Event Handling
Supports both Vue's emit system and prop-based event handlers for maximum flexibility and backwards compatibility.
Intersection Observer Integration
Built-in viewport detection enables autofocus on scroll and lazy loading of expensive custom input components.
Intelligent Attribute Distribution
Automatically routes attributes to appropriate layers (VInput vs custom content) ensuring proper behavior without manual attribute management.
Usage Patterns
Example
vue
<template>
<!-- Rich text editor field -->
<RCustomField
v-model="content"
label="Article Content"
variant="outlined"
:rules="[required, minLength(100)]"
>
<template #default="{ props, bus, isActive, focus, blur }">
<QuillEditor
v-bind="props"
:class="{ 'editor--active': isActive }"
@text-change="props['onUpdate:modelValue']"
@selection-change="focus"
@blur="blur"
@toolbar-click="() => bus.emit('focus')"
/>
</template>
</RCustomField>
<!-- Multi-input coordinate field -->
<RCustomField v-model="coordinates" label="GPS Coordinates" prefix="📍">
<template #default="{ props, isActive }">
<div :class="['coordinate-inputs', { active: isActive }]">
<input
:value="props.modelValue?.lat"
@input="updateLatitude"
placeholder="Latitude"
:readonly="props.readonly"
:disabled="props.disabled"
/>
<input
:value="props.modelValue?.lng"
@input="updateLongitude"
placeholder="Longitude"
:readonly="props.readonly"
:disabled="props.disabled"
/>
</div>
</template>
</RCustomField>
<!-- Custom date/time picker -->
<RCustomField v-model="appointment" label="Appointment Time" autofocus>
<template #default="{ props, bus, onIntersect }">
<CustomDateTimePicker
v-bind="props"
@picker-opened="() => bus.emit('focus')"
@date-selected="props['onUpdate:modelValue']"
v-intersect="onIntersect"
/>
</template>
<template #append-inner>
<VBtn icon size="small" @click="clearDate">
<VIcon>mdi-close</VIcon>
</VBtn>
</template>
</RCustomField>
</template>Advanced Integration
Event Bus Communication
typescript
// In custom component setup
setup(props, { emit }) {
const { bus } = props
// Listen for wrapper events
bus.on('focus', () => {
// Handle focus from wrapper interactions
})
bus.on('intersecting', (entries) => {
// Handle viewport intersection for lazy loading
})
// Trigger wrapper focus when needed
const onCustomEvent = () => {
bus.emit('focus')
}
}State Management Integration
vue
<template #default="{ props, isActive, isFocused, controlRef }">
<CustomInput
:ref="(el) => linkInputToField(el, controlRef)"
:value="props.modelValue"
:class="{
'custom--active': isActive,
'custom--focused': isFocused,
}"
@input="props['onUpdate:modelValue']"
/>
</template>TypeScript Integration
RCustomField provides comprehensive TypeScript support with:
- Fully typed slot props interface
- Generic component pattern for slot type safety
- Typed event bus for custom communication
- Complete prop type definitions
Custom implementations automatically inherit type safety from the wrapper while maintaining flexibility for any custom input component architecture.
Performance Considerations
- Event bus instances are created per component for isolation
- Intersection Observer is only attached when autofocus is enabled
- Attribute filtering happens once during render for optimal performance
- Ref forwarding enables direct access to underlying Vuetify components
This component enables building production-ready custom fields that are indistinguishable from native Vuetify components in terms of behavior, theming, accessibility, and integration capabilities.