@jsonforms/vue-vuetify
Version:
Vue Vuetify renderers for JSON Forms
1,246 lines (1,244 loc) • 521 kB
TypeScript
import { ControlElement, JsonSchema, JsonFormsRendererRegistryEntry, JsonFormsCellRendererRegistryEntry, Translator, RankedTester } from '@jsonforms/core';
import { MaskOptions, MaskaDetail } from 'maska';
import { IconValue } from '../icons';
import { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, CreateComponentPublicInstanceWithMixins, StyleValue, CSSProperties, VNodeChild, VNodeProps, AllowedComponentProps, ComponentCustomProps, SlotsType, VNode, RendererNode, RendererElement, GlobalComponents, GlobalDirectives, ComponentOptionsBase, PropType, InjectionKey, ExtractPropTypes, TransitionProps, Component, ComponentPublicInstance, ShallowRef, ComponentInternalInstance, DebuggerEvent, nextTick, WatchOptions, WatchStopHandle, ShallowUnwrapRef, ComponentCustomProperties, Prop, ObjectDirective, FunctionDirective } from 'vue';
import { IconAliases, Styles, AppliedOptions, ControlWrapperType, ControlWrapperProps } from '..';
import { Density } from 'vuetify/lib/composables/density.mjs';
import { JSXComponent, Anchor, LocationStrategyFunction, ScrollStrategyFunction, DisplayBreakpoint } from 'vuetify/lib/types.mjs';
import { RouteLocationAsPathGeneric, RouteLocationAsRelativeGeneric } from 'vue-router';
import { IconValue } from 'vuetify/lib/composables/icons.mjs';
import { GroupItemProvide, GroupProvide } from 'vuetify/lib/composables/group.mjs';
import { FilterPropsOptions, GenericProps } from 'vuetify/lib/util/defineComponent.mjs';
import { CalendarWeekdays } from 'vuetify/lib/composables/calendar.mjs';
import { DatePickerEvents, DatePickerEventColors } from 'vuetify/lib/components/VDatePicker/VDatePickerMonth.mjs';
import { VDatePickerControlsDefaultSlotProps } from 'vuetify/lib/components/VDatePicker/VDatePickerControls.mjs';
import { VDatePickerSlots } from 'vuetify/lib/components/VDatePicker/VDatePicker.mjs';
import { VTimePickerViewMode, Period } from 'vuetify/lib/components/VTimePicker/shared.mjs';
import { Variant } from 'vuetify/lib/components/VTimePicker/VTimePicker.mjs';
import { AllowFunction } from 'vuetify/lib/components/VTimePicker/useTimeValidation.mjs';
import { TemplateRef } from 'vuetify/lib/util/helpers.mjs';
import { OnCleanup } from '@vue/reactivity';
import { ValidationResult } from 'vuetify/lib/composables/validation.mjs';
import { VInputSlot, VInputSlots } from 'vuetify/lib/components/VInput/VInput.mjs';
import { VMessageSlot } from 'vuetify/lib/components/VMessages/VMessages.mjs';
import { DefaultInputSlot, VFieldSlot, VFieldSlots } from 'vuetify/lib/components/VField/VField.mjs';
import { LoaderSlotProps } from 'vuetify/lib/composables/loader.mjs';
import { VCounterSlot } from 'vuetify/lib/components/VCounter/VCounter.mjs';
import { VTabsSlot, TabItem, VTabsSlots } from 'vuetify/lib/components/VTabs/VTabs.mjs';
import { TouchHandlers } from 'vuetify/directives/touch';
import { ControlProps, VWindowSlots } from 'vuetify/lib/components/VWindow/VWindow.mjs';
import { VConfirmEditSlots } from 'vuetify/lib/components/VConfirmEdit/VConfirmEdit.mjs';
declare const controlRenderer: DefineComponent<{
schema: JsonSchema;
uischema: ControlElement;
path: string;
enabled?: boolean | undefined;
readonly?: boolean | undefined;
renderers?: JsonFormsRendererRegistryEntry[] | undefined;
cells?: JsonFormsCellRendererRegistryEntry[] | undefined;
config?: any;
}, {
showMenu: Ref<boolean, boolean>;
t: ComputedRef<Translator>;
adaptValue: (value: any) => any;
activeTab: Ref<"time" | "date", "time" | "date">;
mobile: ComputedRef<boolean>;
icons: {
current: ComputedRef<IconAliases>;
};
dateTimeFormat: ComputedRef<string>;
isControlEditable: (control: {
enabled: boolean;
readonly: boolean;
}) => boolean;
options: ComputedRef<MaskOptions | null>;
useMask: ComputedRef<boolean>;
maska: {
masked: string;
unmasked: string;
completed: boolean;
};
control: ComputedRef<{
uischema: ControlElement;
schema: NonNullable<JsonSchema>;
path: string;
enabled: boolean;
readonly: NonNullable<boolean | undefined>;
renderers: JsonFormsRendererRegistryEntry[];
cells: JsonFormsCellRendererRegistryEntry[] & {
tester: RankedTester;
cell: any;
}[];
config: any;
label: string;
description: string;
required: NonNullable<boolean | undefined>;
i18nKeyPrefix: string;
errors: string;
data: any;
rootSchema: NonNullable<JsonSchema>;
id: string;
visible: boolean;
}> & ComputedRef<{
schema: JsonSchema;
uischema: ControlElement;
path: string;
config: any;
label: string;
description: string;
required: boolean;
errors: string;
id: string;
visible: boolean;
enabled: boolean;
readonly: boolean;
} & {
errors: string;
}>;
handleChange(path: string, value: any): void;
styles: Styles;
isFocused: Ref<boolean, boolean>;
appliedOptions: ComputedRef<any>;
controlWrapper: ComputedRef<{
id: string;
description: string;
errors: string;
label: string;
visible: boolean;
required: boolean;
}>;
onChange: (value: any) => void;
vuetifyProps: (path: string) => any;
persistentHint: () => boolean;
computedLabel: ComputedRef<string>;
clearable: ComputedRef<any>;
touched: Ref<boolean, boolean>;
handleBlur: () => void;
handleFocus: () => void;
rawErrors: ComputedRef<string>;
}, {}, {
pickerIcon(): IconValue;
useTabLayout(): boolean;
dateTimeSaveFormat(): string;
formats(): string[];
useSeconds(): boolean;
ampm(): boolean;
minDate(): string | undefined;
maxDate(): string | undefined;
minTime(): string | undefined;
maxTime(): string | undefined;
inputModel: {
get(): string | null;
set(val: string | null): void;
};
pickerValue: {
get(): {
date: Date | null;
time: string | null;
};
set(val: {
date: Date | null;
time: string | null;
}): void;
};
cancelLabel(): string;
okLabel(): string;
showActions(): boolean;
}, {
onPickerChange(dateValue: Date | null, timeValue: string | null): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{
schema: JsonSchema;
uischema: ControlElement;
path: string;
enabled?: boolean | undefined;
readonly?: boolean | undefined;
renderers?: JsonFormsRendererRegistryEntry[] | undefined;
cells?: JsonFormsCellRendererRegistryEntry[] | undefined;
config?: any;
}> & Readonly<{}>, {
enabled: boolean;
readonly: boolean;
renderers: JsonFormsRendererRegistryEntry[];
cells: JsonFormsCellRendererRegistryEntry[];
config: Record<string, any>;
}, {}, {
ControlWrapper: DefineComponent<{
id?: string | undefined;
description?: string | undefined;
errors?: string | undefined;
label?: string | undefined;
visible?: boolean | undefined;
required?: boolean | undefined;
isFocused?: boolean | undefined;
styles?: Styles | undefined;
appliedOptions?: AppliedOptions | undefined;
}, {
WrapperComponent: ControlWrapperType;
props: ControlWrapperProps;
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{
id?: string | undefined;
description?: string | undefined;
errors?: string | undefined;
label?: string | undefined;
visible?: boolean | undefined;
required?: boolean | undefined;
isFocused?: boolean | undefined;
styles?: Styles | undefined;
appliedOptions?: AppliedOptions | undefined;
}> & Readonly<{}>, {
visible: boolean;
required: boolean;
isFocused: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
VBtn: {
new (...args: any[]): CreateComponentPublicInstanceWithMixins<{
style: string | false | StyleValue[] | CSSProperties | null;
density: Density;
tile: boolean;
tag: string | JSXComponent;
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
disabled: boolean;
size: string | number;
replace: boolean;
exact: boolean;
symbol: any;
flat: boolean;
block: boolean;
readonly: boolean;
slim: boolean;
stacked: boolean;
ripple: boolean | {
class?: string | undefined;
keys?: string[] | undefined;
};
} & {
theme?: string | undefined;
class?: any;
border?: string | number | boolean | undefined;
elevation?: string | number | undefined;
rounded?: string | number | boolean | undefined;
color?: string | undefined;
value?: any;
selectedClass?: string | 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;
location?: Anchor | null | undefined;
loading?: string | boolean | undefined;
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
href?: string | undefined;
to?: string | RouteLocationAsPathGeneric | RouteLocationAsRelativeGeneric | undefined;
active?: boolean | undefined;
activeColor?: string | undefined;
baseColor?: string | undefined;
icon?: boolean | IconValue | undefined;
prependIcon?: IconValue | undefined;
appendIcon?: IconValue | undefined;
spaced?: "both" | "end" | "start" | undefined;
text?: string | number | boolean | undefined;
} & {
$children?: {
default?: (() => VNodeChild) | undefined;
prepend?: (() => VNodeChild) | undefined;
append?: (() => VNodeChild) | undefined;
loader?: (() => VNodeChild) | undefined;
} | {
$stable?: boolean | undefined;
} | (() => VNodeChild) | VNodeChild;
"v-slots"?: {
default?: false | (() => VNodeChild) | undefined;
prepend?: false | (() => VNodeChild) | undefined;
append?: false | (() => VNodeChild) | undefined;
loader?: false | (() => VNodeChild) | undefined;
} | undefined;
} & {
"v-slot:append"?: false | (() => VNodeChild) | undefined;
"v-slot:default"?: false | (() => VNodeChild) | undefined;
"v-slot:loader"?: false | (() => VNodeChild) | undefined;
"v-slot:prepend"?: false | (() => VNodeChild) | undefined;
} & {
"onGroup:selected"?: ((val: {
value: boolean;
}) => any) | undefined;
}, {
group: GroupItemProvide | null;
}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
"group:selected": (val: {
value: boolean;
}) => true;
}, VNodeProps & AllowedComponentProps & ComponentCustomProps, {
style: StyleValue;
density: Density;
rounded: string | number | boolean;
tile: boolean;
tag: string | JSXComponent;
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
disabled: boolean;
size: string | number;
replace: boolean;
exact: boolean;
active: boolean;
symbol: any;
flat: boolean;
block: boolean;
readonly: boolean;
slim: boolean;
stacked: boolean;
ripple: boolean | {
class?: string | undefined;
keys?: string[] | undefined;
} | undefined;
text: string | number | boolean;
}, true, {}, SlotsType<Partial<{
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
prepend: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
append: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
loader: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
}>>, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, {
style: string | false | StyleValue[] | CSSProperties | null;
density: Density;
tile: boolean;
tag: string | JSXComponent;
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
disabled: boolean;
size: string | number;
replace: boolean;
exact: boolean;
symbol: any;
flat: boolean;
block: boolean;
readonly: boolean;
slim: boolean;
stacked: boolean;
ripple: boolean | {
class?: string | undefined;
keys?: string[] | undefined;
};
} & {
theme?: string | undefined;
class?: any;
border?: string | number | boolean | undefined;
elevation?: string | number | undefined;
rounded?: string | number | boolean | undefined;
color?: string | undefined;
value?: any;
selectedClass?: string | 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;
location?: Anchor | null | undefined;
loading?: string | boolean | undefined;
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
href?: string | undefined;
to?: string | RouteLocationAsPathGeneric | RouteLocationAsRelativeGeneric | undefined;
active?: boolean | undefined;
activeColor?: string | undefined;
baseColor?: string | undefined;
icon?: boolean | IconValue | undefined;
prependIcon?: IconValue | undefined;
appendIcon?: IconValue | undefined;
spaced?: "both" | "end" | "start" | undefined;
text?: string | number | boolean | undefined;
} & {
$children?: {
default?: (() => VNodeChild) | undefined;
prepend?: (() => VNodeChild) | undefined;
append?: (() => VNodeChild) | undefined;
loader?: (() => VNodeChild) | undefined;
} | {
$stable?: boolean | undefined;
} | (() => VNodeChild) | VNodeChild;
"v-slots"?: {
default?: false | (() => VNodeChild) | undefined;
prepend?: false | (() => VNodeChild) | undefined;
append?: false | (() => VNodeChild) | undefined;
loader?: false | (() => VNodeChild) | undefined;
} | undefined;
} & {
"v-slot:append"?: false | (() => VNodeChild) | undefined;
"v-slot:default"?: false | (() => VNodeChild) | undefined;
"v-slot:loader"?: false | (() => VNodeChild) | undefined;
"v-slot:prepend"?: false | (() => VNodeChild) | undefined;
} & {
"onGroup:selected"?: ((val: {
value: boolean;
}) => any) | undefined;
}, {
group: GroupItemProvide | null;
}, {}, {}, {}, {
style: StyleValue;
density: Density;
rounded: string | number | boolean;
tile: boolean;
tag: string | JSXComponent;
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
disabled: boolean;
size: string | number;
replace: boolean;
exact: boolean;
active: boolean;
symbol: any;
flat: boolean;
block: boolean;
readonly: boolean;
slim: boolean;
stacked: boolean;
ripple: boolean | {
class?: string | undefined;
keys?: string[] | undefined;
} | undefined;
text: string | number | boolean;
}>;
__isFragment?: undefined;
__isTeleport?: undefined;
__isSuspense?: undefined;
} & ComponentOptionsBase<{
style: string | false | StyleValue[] | CSSProperties | null;
density: Density;
tile: boolean;
tag: string | JSXComponent;
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
disabled: boolean;
size: string | number;
replace: boolean;
exact: boolean;
symbol: any;
flat: boolean;
block: boolean;
readonly: boolean;
slim: boolean;
stacked: boolean;
ripple: boolean | {
class?: string | undefined;
keys?: string[] | undefined;
};
} & {
theme?: string | undefined;
class?: any;
border?: string | number | boolean | undefined;
elevation?: string | number | undefined;
rounded?: string | number | boolean | undefined;
color?: string | undefined;
value?: any;
selectedClass?: string | 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;
location?: Anchor | null | undefined;
loading?: string | boolean | undefined;
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
href?: string | undefined;
to?: string | RouteLocationAsPathGeneric | RouteLocationAsRelativeGeneric | undefined;
active?: boolean | undefined;
activeColor?: string | undefined;
baseColor?: string | undefined;
icon?: boolean | IconValue | undefined;
prependIcon?: IconValue | undefined;
appendIcon?: IconValue | undefined;
spaced?: "both" | "end" | "start" | undefined;
text?: string | number | boolean | undefined;
} & {
$children?: {
default?: (() => VNodeChild) | undefined;
prepend?: (() => VNodeChild) | undefined;
append?: (() => VNodeChild) | undefined;
loader?: (() => VNodeChild) | undefined;
} | {
$stable?: boolean | undefined;
} | (() => VNodeChild) | VNodeChild;
"v-slots"?: {
default?: false | (() => VNodeChild) | undefined;
prepend?: false | (() => VNodeChild) | undefined;
append?: false | (() => VNodeChild) | undefined;
loader?: false | (() => VNodeChild) | undefined;
} | undefined;
} & {
"v-slot:append"?: false | (() => VNodeChild) | undefined;
"v-slot:default"?: false | (() => VNodeChild) | undefined;
"v-slot:loader"?: false | (() => VNodeChild) | undefined;
"v-slot:prepend"?: false | (() => VNodeChild) | undefined;
} & {
"onGroup:selected"?: ((val: {
value: boolean;
}) => any) | undefined;
}, {
group: GroupItemProvide | null;
}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
"group:selected": (val: {
value: boolean;
}) => true;
}, string, {
style: StyleValue;
density: Density;
rounded: string | number | boolean;
tile: boolean;
tag: string | JSXComponent;
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
disabled: boolean;
size: string | number;
replace: boolean;
exact: boolean;
active: boolean;
symbol: any;
flat: boolean;
block: boolean;
readonly: boolean;
slim: boolean;
stacked: boolean;
ripple: boolean | {
class?: string | undefined;
keys?: string[] | undefined;
} | undefined;
text: string | number | boolean;
}, {}, string, SlotsType<Partial<{
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
prepend: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
append: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
loader: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
}>>, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & FilterPropsOptions<{
theme: StringConstructor;
class: PropType<any>;
style: {
type: PropType<StyleValue>;
default: null;
};
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
density: {
type: PropType<Density>;
default: string;
validator: (v: any) => boolean;
};
elevation: {
type: (NumberConstructor | StringConstructor)[];
validator(v: any): boolean;
};
rounded: {
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
default: undefined;
};
tile: BooleanConstructor;
tag: Omit<{
type: PropType<string | JSXComponent>;
default: string;
}, "default" | "type"> & {
type: PropType<string | JSXComponent>;
default: NonNullable<string | JSXComponent>;
};
color: StringConstructor;
variant: Omit<{
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
default: string;
validator: (v: any) => boolean;
}, "default" | "type"> & {
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
};
value: null;
disabled: BooleanConstructor;
selectedClass: StringConstructor;
size: {
type: (NumberConstructor | StringConstructor)[];
default: string;
};
height: (NumberConstructor | StringConstructor)[];
maxHeight: (NumberConstructor | StringConstructor)[];
maxWidth: (NumberConstructor | StringConstructor)[];
minHeight: (NumberConstructor | StringConstructor)[];
minWidth: (NumberConstructor | StringConstructor)[];
width: (NumberConstructor | StringConstructor)[];
location: PropType< Anchor | null>;
loading: (BooleanConstructor | StringConstructor)[];
position: {
type: PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
validator: (v: any) => boolean;
};
href: StringConstructor;
replace: BooleanConstructor;
to: PropType<string | RouteLocationAsPathGeneric | RouteLocationAsRelativeGeneric>;
exact: BooleanConstructor;
active: {
type: BooleanConstructor;
default: undefined;
};
activeColor: StringConstructor;
baseColor: StringConstructor;
symbol: {
type: null;
default: InjectionKey<GroupProvide>;
};
flat: BooleanConstructor;
icon: PropType<boolean | IconValue>;
prependIcon: PropType<IconValue>;
appendIcon: PropType<IconValue>;
block: BooleanConstructor;
readonly: BooleanConstructor;
slim: BooleanConstructor;
stacked: BooleanConstructor;
spaced: PropType<"both" | "end" | "start">;
ripple: {
type: PropType<boolean | {
class?: string | undefined;
keys?: string[] | undefined;
} | undefined>;
default: boolean;
};
text: {
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
default: undefined;
};
}, ExtractPropTypes<{
theme: StringConstructor;
class: PropType<any>;
style: {
type: PropType<StyleValue>;
default: null;
};
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
density: {
type: PropType<Density>;
default: string;
validator: (v: any) => boolean;
};
elevation: {
type: (NumberConstructor | StringConstructor)[];
validator(v: any): boolean;
};
rounded: {
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
default: undefined;
};
tile: BooleanConstructor;
tag: Omit<{
type: PropType<string | JSXComponent>;
default: string;
}, "default" | "type"> & {
type: PropType<string | JSXComponent>;
default: NonNullable<string | JSXComponent>;
};
color: StringConstructor;
variant: Omit<{
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
default: string;
validator: (v: any) => boolean;
}, "default" | "type"> & {
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
};
value: null;
disabled: BooleanConstructor;
selectedClass: StringConstructor;
size: {
type: (NumberConstructor | StringConstructor)[];
default: string;
};
height: (NumberConstructor | StringConstructor)[];
maxHeight: (NumberConstructor | StringConstructor)[];
maxWidth: (NumberConstructor | StringConstructor)[];
minHeight: (NumberConstructor | StringConstructor)[];
minWidth: (NumberConstructor | StringConstructor)[];
width: (NumberConstructor | StringConstructor)[];
location: PropType< Anchor | null>;
loading: (BooleanConstructor | StringConstructor)[];
position: {
type: PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
validator: (v: any) => boolean;
};
href: StringConstructor;
replace: BooleanConstructor;
to: PropType<string | RouteLocationAsPathGeneric | RouteLocationAsRelativeGeneric>;
exact: BooleanConstructor;
active: {
type: BooleanConstructor;
default: undefined;
};
activeColor: StringConstructor;
baseColor: StringConstructor;
symbol: {
type: null;
default: InjectionKey<GroupProvide>;
};
flat: BooleanConstructor;
icon: PropType<boolean | IconValue>;
prependIcon: PropType<IconValue>;
appendIcon: PropType<IconValue>;
block: BooleanConstructor;
readonly: BooleanConstructor;
slim: BooleanConstructor;
stacked: BooleanConstructor;
spaced: PropType<"both" | "end" | "start">;
ripple: {
type: PropType<boolean | {
class?: string | undefined;
keys?: string[] | undefined;
} | undefined>;
default: boolean;
};
text: {
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
default: undefined;
};
}>>;
VDatePicker: {
new (...args: any[]): CreateComponentPublicInstanceWithMixins<{
style: string | false | StyleValue[] | CSSProperties | null;
tile: boolean;
tag: string | JSXComponent;
divided: boolean;
landscape: boolean;
title: string;
hideHeader: boolean;
hideTitle: boolean;
controlVariant: "docked" | "modal";
noMonthPicker: boolean;
nextIcon: IconValue;
prevIcon: IconValue;
modeIcon: IconValue;
viewMode: "month" | "months" | "year";
disabled: boolean;
showAdjacentMonths: boolean;
weekdays: CalendarWeekdays[];
weeksInMonth: "dynamic" | "static";
hideWeekdays: boolean;
showWeek: boolean;
readonly: boolean;
transition: string;
reverseTransition: string;
events: DatePickerEvents | null;
eventColor: DatePickerEventColors;
header: string;
headerDateFormat: string;
} & {
theme?: string | undefined;
class?: any;
border?: string | number | boolean | undefined;
elevation?: string | number | 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;
location?: Anchor | null | undefined;
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
color?: string | undefined;
bgColor?: string | undefined;
controlHeight?: string | number | undefined;
text?: string | undefined;
allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
month?: string | number | undefined;
firstDayOfWeek?: string | number | undefined;
firstDayOfYear?: string | number | undefined;
weekdayFormat?: "long" | "narrow" | "short" | undefined;
year?: number | undefined;
allowedMonths?: number[] | ((date: number) => boolean) | undefined;
min?: unknown;
max?: unknown;
allowedYears?: number[] | ((date: number) => boolean) | undefined;
headerColor?: string | undefined;
landscapeHeaderWidth?: string | number | undefined;
} & {
"onUpdate:month"?: ((date: any) => any) | undefined;
"onUpdate:viewMode"?: ((date: any) => any) | undefined;
"onUpdate:year"?: ((date: any) => any) | undefined;
}, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Omit<{
"update:modelValue": (date: any) => true;
"update:month": (date: any) => true;
"update:year": (date: any) => true;
"update:viewMode": (date: any) => true;
}, "$children" | "modelValue" | "multiple" | "update:modelValue" | "v-slot:actions" | "v-slot:append" | "v-slot:controls" | "v-slot:day" | "v-slot:header" | "v-slot:month" | "v-slot:prepend" | "v-slot:title" | "v-slot:year" | "v-slots">, VNodeProps & AllowedComponentProps & ComponentCustomProps, {
style: StyleValue;
rounded: string | number | boolean;
tile: boolean;
tag: string | JSXComponent;
divided: boolean;
landscape: boolean;
title: string;
hideHeader: boolean;
hideTitle: boolean;
controlVariant: "docked" | "modal";
noMonthPicker: boolean;
nextIcon: IconValue;
prevIcon: IconValue;
modeIcon: IconValue;
viewMode: "month" | "months" | "year";
disabled: boolean;
showAdjacentMonths: boolean;
weekdays: CalendarWeekdays[];
weeksInMonth: "dynamic" | "static";
firstDayOfWeek: string | number;
firstDayOfYear: string | number;
hideWeekdays: boolean;
showWeek: boolean;
readonly: boolean;
transition: string;
reverseTransition: string;
events: DatePickerEvents | null;
eventColor: DatePickerEventColors;
header: string;
headerDateFormat: string;
}, true, {}, SlotsType<Partial<{
actions: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
title: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
prepend: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
append: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
day: (arg: {
props: {
onClick: () => void;
};
item: any;
i: number;
}) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
month: (arg: {
month: {
text: string;
value: number;
};
i: number;
props: {
onClick: () => void;
};
}) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
year: (arg: {
year: {
text: string;
value: number;
};
i: number;
props: {
active: boolean;
color?: string | undefined;
rounded: boolean;
text: string;
variant: "flat" | "text";
onClick: () => void;
};
}) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
header: (arg: {
header: string;
transition: string;
}) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
controls: (arg: VDatePickerControlsDefaultSlotProps) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
}>>, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, {
style: string | false | StyleValue[] | CSSProperties | null;
tile: boolean;
tag: string | JSXComponent;
divided: boolean;
landscape: boolean;
title: string;
hideHeader: boolean;
hideTitle: boolean;
controlVariant: "docked" | "modal";
noMonthPicker: boolean;
nextIcon: IconValue;
prevIcon: IconValue;
modeIcon: IconValue;
viewMode: "month" | "months" | "year";
disabled: boolean;
showAdjacentMonths: boolean;
weekdays: CalendarWeekdays[];
weeksInMonth: "dynamic" | "static";
hideWeekdays: boolean;
showWeek: boolean;
readonly: boolean;
transition: string;
reverseTransition: string;
events: DatePickerEvents | null;
eventColor: DatePickerEventColors;
header: string;
headerDateFormat: string;
} & {
theme?: string | undefined;
class?: any;
border?: string | number | boolean | undefined;
elevation?: string | number | 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;
location?: Anchor | null | undefined;
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
color?: string | undefined;
bgColor?: string | undefined;
controlHeight?: string | number | undefined;
text?: string | undefined;
allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
month?: string | number | undefined;
firstDayOfWeek?: string | number | undefined;
firstDayOfYear?: string | number | undefined;
weekdayFormat?: "long" | "narrow" | "short" | undefined;
year?: number | undefined;
allowedMonths?: number[] | ((date: number) => boolean) | undefined;
min?: unknown;
max?: unknown;
allowedYears?: number[] | ((date: number) => boolean) | undefined;
headerColor?: string | undefined;
landscapeHeaderWidth?: string | number | undefined;
} & {
"onUpdate:month"?: ((date: any) => any) | undefined;
"onUpdate:viewMode"?: ((date: any) => any) | undefined;
"onUpdate:year"?: ((date: any) => any) | undefined;
}, {}, {}, {}, {}, {
style: StyleValue;
rounded: string | number | boolean;
tile: boolean;
tag: string | JSXComponent;
divided: boolean;
landscape: boolean;
title: string;
hideHeader: boolean;
hideTitle: boolean;
controlVariant: "docked" | "modal";
noMonthPicker: boolean;
nextIcon: IconValue;
prevIcon: IconValue;
modeIcon: IconValue;
viewMode: "month" | "months" | "year";
disabled: boolean;
showAdjacentMonths: boolean;
weekdays: CalendarWeekdays[];
weeksInMonth: "dynamic" | "static";
firstDayOfWeek: string | number;
firstDayOfYear: string | number;
hideWeekdays: boolean;
showWeek: boolean;
readonly: boolean;
transition: string;
reverseTransition: string;
events: DatePickerEvents | null;
eventColor: DatePickerEventColors;
header: string;
headerDateFormat: string;
}>;
__isFragment?: undefined;
__isTeleport?: undefined;
__isSuspense?: undefined;
} & ComponentOptionsBase<{
style: string | false | StyleValue[] | CSSProperties | null;
tile: boolean;
tag: string | JSXComponent;
divided: boolean;
landscape: boolean;
title: string;
hideHeader: boolean;
hideTitle: boolean;
controlVariant: "docked" | "modal";
noMonthPicker: boolean;
nextIcon: IconValue;
prevIcon: IconValue;
modeIcon: IconValue;
viewMode: "month" | "months" | "year";
disabled: boolean;
showAdjacentMonths: boolean;
weekdays: CalendarWeekdays[];
weeksInMonth: "dynamic" | "static";
hideWeekdays: boolean;
showWeek: boolean;
readonly: boolean;
transition: string;
reverseTransition: string;
events: DatePickerEvents | null;
eventColor: DatePickerEventColors;
header: string;
headerDateFormat: string;
} & {
theme?: string | undefined;
class?: any;
border?: string | number | boolean | undefined;
elevation?: string | number | 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;
location?: Anchor | null | undefined;
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
color?: string | undefined;
bgColor?: string | undefined;
controlHeight?: string | number | undefined;
text?: string | undefined;
allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
month?: string | number | undefined;
firstDayOfWeek?: string | number | undefined;
firstDayOfYear?: string | number | undefined;
weekdayFormat?: "long" | "narrow" | "short" | undefined;
year?: number | undefined;
allowedMonths?: number[] | ((date: number) => boolean) | undefined;
min?: unknown;
max?: unknown;
allowedYears?: number[] | ((date: number) => boolean) | undefined;
headerColor?: string | undefined;
landscapeHeaderWidth?: string | number | undefined;
} & {
"onUpdate:month"?: ((date: any) => any) | undefined;
"onUpdate:viewMode"?: ((date: any) => any) | undefined;
"onUpdate:year"?: ((date: any) => any) | undefined;
}, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Omit<{
"update:modelValue": (date: any) => true;
"update:month": (date: any) => true;
"update:year": (date: any) => true;
"update:viewMode": (date: any) => true;
}, "multiple" | "$children" | "v-slots" | "modelValue" | "update:modelValue" | "v-slot:append" | "v-slot:header" | "v-slot:prepend" | "v-slot:title" | "v-slot:actions" | "v-slot:controls" | "v-slot:day" | "v-slot:month" | "v-slot:year">, string, {
style: StyleValue;
rounded: string | number | boolean;
tile: boolean;
tag: string | JSXComponent;
divided: boolean;
landscape: boolean;
title: string;
hideHeader: boolean;
hideTitle: boolean;
controlVariant: "docked" | "modal";
noMonthPicker: boolean;
nextIcon: IconValue;
prevIcon: IconValue;
modeIcon: IconValue;
viewMode: "month" | "months" | "year";
disabled: boolean;
showAdjacentMonths: boolean;
weekdays: CalendarWeekdays[];
weeksInMonth: "dynamic" | "static";
firstDayOfWeek: string | number;
firstDayOfYear: string | number;
hideWeekdays: boolean;
showWeek: boolean;
readonly: boolean;
transition: string;
reverseTransition: string;
events: DatePickerEvents | null;
eventColor: DatePickerEventColors;
header: string;
headerDateFormat: string;
}, {}, string, SlotsType<Partial<{
actions: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
title: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
prepend: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
append: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
day: (arg: {
props: {
onClick: () => void;
};
item: any;
i: number;
}) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
month: (arg: {
month: {
text: string;
value: number;
};
i: number;
props: {
onClick: () => void;
};
}) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
year: (arg: {
year: {
text: string;
value: number;
};
i: number;
props: {
active: boolean;
color?: string | undefined;
rounded: boolean;
text: string;
variant: "flat" | "text";
onClick: () => void;
};
}) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
header: (arg: {
header: string;
transition: string;
}) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
controls: (arg: VDatePickerControlsDefaultSlotProps) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
}>>, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new <T, Multiple extends number | "range" | boolean | (string & {}) = false, TModel = Multiple extends string | number | true ? T[] : T>(props: {
modelValue?: TModel | undefined;
"onUpdate:modelValue"?: ((value: TModel) => void) | undefined;
multiple?: Multiple | undefined;
}, slots: VDatePickerSlots) => GenericProps<{
modelValue?: TModel | undefined;
"onUpdate:modelValue"?: ((value: TModel) => void) | undefined;
multiple?: Multiple | undefined;
}, VDatePickerSlots>) & FilterPropsOptions<{
theme: StringConstructor;
class: PropType<any>;
style: {
type: PropType<StyleValue>;
default: null;
};
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
elevation: {
type: (NumberConstructor | StringConstructor)[];
validator(v: any): boolean;
};
rounded: {
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
default: undefined;
};
tile: BooleanConstructor;
tag: {
type: PropType<string | JSXComponent>;
default: string;
};
height: (NumberConstructor | StringConstructor)[];
maxHeight: (NumberConstructor | StringConstructor)[];
maxWidth: (NumberConstructor | StringConstructor)[];
minHeight: (NumberConstructor | StringConstructor)[];
minWidth: (NumberConstructor | StringConstructor)[];
width: (NumberConstructor | StringConstructor)[];
location: PropType< Anchor | null>;
position: {
type: PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
validator: (v: any) => boolean;
};
color: StringConstructor;
bgColor: StringConstructor;
divided: BooleanConstructor;
landscape: BooleanConstructor;
title: {
type: PropType<string>;
default: string;
};
hideHeader: BooleanConstructor;
hideTitle: BooleanConstructor;
controlHeight: (NumberConstructor | StringConstructor)[];
controlVariant: {
type: PropType<"docked" | "modal">;
default: string;
};
noMonthPicker: BooleanConstructor;
nextIcon: {
type: PropType<IconValue>;
default: string;
};
prevIcon: {
type: PropType<IconValue>;
default: string;
};
modeIcon: {
type: PropType<IconValue>;
default: string;
};
text: StringConstructor;
viewMode: {
type: PropType<"month" | "months" | "year">;
default: string;
};
allowedDates: PropType<unknown[] | ((date: unknown) => boolean)>;
disabled: {
type: BooleanConstructor;
default: null;
};
month: (NumberConstructor | StringConstructor)[];
showAdjacentMonths: BooleanConstructor;
weekdays: {
type: PropType< CalendarWeekdays[]>;
default: () => number[];
};
weeksInMonth: Omit<{
type: PropType<"dynamic" | "static">;
default: string;
}, "default" | "type"> & {
type: PropType<"dynamic" | "static">;
default: NonNullable<"dynamic" | "static">;
};
firstDayOfWeek: {
type: (NumberConstructor | StringConstructor)[];
default: undefined;
};
firstDayOfYear: {
type: (NumberConstructor | StringConstructor)[];
default: undefined;
};
weekdayFormat: PropType<"long" | "narrow" | "short" | undefined>;
hideWeekdays: BooleanConstructor;
multiple: PropType<number | "range" | boolean | (string & {})>;
showWeek: BooleanConstructor;
readonly: BooleanConstructor;
transition: {
type: StringConstructor;
default: string;
};
reverseTransition: {
type: StringConstructor;
default: string;