vuetify
Version:
Vue Material Component Framework
614 lines (606 loc) • 21.8 kB
text/typescript
import * as vue from 'vue';
import { ComponentPropsOptions, ExtractPropTypes, ComponentInternalInstance, Ref, ComputedRef, JSXComponent, PropType } from 'vue';
// @ts-ignore
import * as vue_router from 'vue-router';
declare const block: readonly ["top", "bottom"];
declare const inline: readonly ["start", "end", "left", "right"];
type Tblock = typeof block[number];
type Tinline = typeof inline[number];
type Anchor = Tblock | Tinline | 'center' | 'center center' | `${Tblock} ${Tinline | 'center'}` | `${Tinline} ${Tblock | 'center'}`;
interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions>, Props = ExtractPropTypes<PropsOptions>> {
filterProps<T extends Partial<Props>, U extends Exclude<keyof Props, Exclude<keyof Props, keyof T>>>(props: T): Partial<Pick<T, U>>;
}
interface GroupItem {
id: number;
value: Ref<unknown>;
disabled: Ref<boolean | undefined>;
useIndexAsValue?: boolean;
}
interface GroupProvide {
register: (item: GroupItem, cmp: ComponentInternalInstance) => void;
unregister: (id: number) => void;
select: (id: number, value: boolean) => void;
selected: Ref<Readonly<number[]>>;
isSelected: (id: number) => boolean;
prev: () => void;
next: () => void;
selectedClass: Ref<string | undefined>;
items: ComputedRef<{
id: number;
value: unknown;
disabled: boolean | undefined;
}[]>;
disabled: Ref<boolean | undefined>;
getItemIndex: (value: unknown) => number;
}
interface GroupItemProvide {
id: number;
isSelected: Ref<boolean>;
isFirst: Ref<boolean>;
isLast: Ref<boolean>;
toggle: () => void;
select: (value: boolean) => void;
selectedClass: Ref<(string | undefined)[] | false>;
value: Ref<unknown>;
disabled: Ref<boolean | undefined>;
group: GroupProvide;
}
type Density = null | 'default' | 'comfortable' | 'compact';
type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
declare const IconValue: PropType<IconValue>;
declare const VBtn: {
new (...args: any[]): vue.CreateComponentPublicInstance<{
symbol: any;
flat: boolean;
replace: boolean;
style: vue.StyleValue;
size: string | number;
disabled: boolean;
tag: string;
readonly: boolean;
variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
block: boolean;
exact: boolean;
tile: boolean;
density: Density;
slim: boolean;
stacked: boolean;
ripple: boolean | {
class: string;
} | undefined;
} & {
class?: any;
text?: string | undefined;
value?: any;
width?: string | number | undefined;
height?: string | number | undefined;
active?: boolean | undefined;
theme?: string | undefined;
href?: string | undefined;
color?: string | undefined;
loading?: string | boolean | undefined;
icon?: boolean | IconValue | undefined;
to?: vue_router.RouteLocationRaw | undefined;
border?: string | number | boolean | undefined;
position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
rounded?: string | number | boolean | undefined;
maxHeight?: string | number | undefined;
maxWidth?: string | number | undefined;
minHeight?: string | number | undefined;
minWidth?: string | number | undefined;
elevation?: string | number | undefined;
location?: Anchor | undefined;
baseColor?: string | undefined;
selectedClass?: string | undefined;
prependIcon?: IconValue | undefined;
appendIcon?: IconValue | undefined;
} & {
$children?: vue.VNodeChild | (() => vue.VNodeChild) | {
default?: (() => vue.VNodeChild) | undefined;
prepend?: (() => vue.VNodeChild) | undefined;
append?: (() => vue.VNodeChild) | undefined;
loader?: (() => vue.VNodeChild) | undefined;
};
'v-slots'?: {
default?: false | (() => vue.VNodeChild) | undefined;
prepend?: false | (() => vue.VNodeChild) | undefined;
append?: false | (() => vue.VNodeChild) | undefined;
loader?: false | (() => vue.VNodeChild) | undefined;
} | undefined;
} & {
"v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
"v-slot:prepend"?: false | (() => vue.VNodeChild) | undefined;
"v-slot:append"?: false | (() => vue.VNodeChild) | undefined;
"v-slot:loader"?: false | (() => vue.VNodeChild) | undefined;
} & {
"onGroup:selected"?: ((val: {
value: boolean;
}) => any) | undefined;
}, {
group: GroupItemProvide | null;
}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
'group:selected': (val: {
value: boolean;
}) => true;
}, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
symbol: any;
flat: boolean;
replace: boolean;
style: vue.StyleValue;
size: string | number;
disabled: boolean;
tag: string;
readonly: boolean;
variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
block: boolean;
exact: boolean;
tile: boolean;
density: Density;
slim: boolean;
stacked: boolean;
ripple: boolean | {
class: string;
} | undefined;
} & {
class?: any;
text?: string | undefined;
value?: any;
width?: string | number | undefined;
height?: string | number | undefined;
active?: boolean | undefined;
theme?: string | undefined;
href?: string | undefined;
color?: string | undefined;
loading?: string | boolean | undefined;
icon?: boolean | IconValue | undefined;
to?: vue_router.RouteLocationRaw | undefined;
border?: string | number | boolean | undefined;
position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
rounded?: string | number | boolean | undefined;
maxHeight?: string | number | undefined;
maxWidth?: string | number | undefined;
minHeight?: string | number | undefined;
minWidth?: string | number | undefined;
elevation?: string | number | undefined;
location?: Anchor | undefined;
baseColor?: string | undefined;
selectedClass?: string | undefined;
prependIcon?: IconValue | undefined;
appendIcon?: IconValue | undefined;
} & {
$children?: vue.VNodeChild | (() => vue.VNodeChild) | {
default?: (() => vue.VNodeChild) | undefined;
prepend?: (() => vue.VNodeChild) | undefined;
append?: (() => vue.VNodeChild) | undefined;
loader?: (() => vue.VNodeChild) | undefined;
};
'v-slots'?: {
default?: false | (() => vue.VNodeChild) | undefined;
prepend?: false | (() => vue.VNodeChild) | undefined;
append?: false | (() => vue.VNodeChild) | undefined;
loader?: false | (() => vue.VNodeChild) | undefined;
} | undefined;
} & {
"v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
"v-slot:prepend"?: false | (() => vue.VNodeChild) | undefined;
"v-slot:append"?: false | (() => vue.VNodeChild) | undefined;
"v-slot:loader"?: false | (() => vue.VNodeChild) | undefined;
} & {
"onGroup:selected"?: ((val: {
value: boolean;
}) => any) | undefined;
}, {
symbol: any;
flat: boolean;
replace: boolean;
style: vue.StyleValue;
size: string | number;
active: boolean;
disabled: boolean;
tag: string;
readonly: boolean;
rounded: string | number | boolean;
variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
block: boolean;
exact: boolean;
tile: boolean;
density: Density;
slim: boolean;
stacked: boolean;
ripple: boolean | {
class: string;
} | undefined;
}, true, {}, vue.SlotsType<Partial<{
default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
prepend: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
append: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
loader: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
}>>, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, {
symbol: any;
flat: boolean;
replace: boolean;
style: vue.StyleValue;
size: string | number;
disabled: boolean;
tag: string;
readonly: boolean;
variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
block: boolean;
exact: boolean;
tile: boolean;
density: Density;
slim: boolean;
stacked: boolean;
ripple: boolean | {
class: string;
} | undefined;
} & {
class?: any;
text?: string | undefined;
value?: any;
width?: string | number | undefined;
height?: string | number | undefined;
active?: boolean | undefined;
theme?: string | undefined;
href?: string | undefined;
color?: string | undefined;
loading?: string | boolean | undefined;
icon?: boolean | IconValue | undefined;
to?: vue_router.RouteLocationRaw | undefined;
border?: string | number | boolean | undefined;
position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
rounded?: string | number | boolean | undefined;
maxHeight?: string | number | undefined;
maxWidth?: string | number | undefined;
minHeight?: string | number | undefined;
minWidth?: string | number | undefined;
elevation?: string | number | undefined;
location?: Anchor | undefined;
baseColor?: string | undefined;
selectedClass?: string | undefined;
prependIcon?: IconValue | undefined;
appendIcon?: IconValue | undefined;
} & {
$children?: vue.VNodeChild | (() => vue.VNodeChild) | {
default?: (() => vue.VNodeChild) | undefined;
prepend?: (() => vue.VNodeChild) | undefined;
append?: (() => vue.VNodeChild) | undefined;
loader?: (() => vue.VNodeChild) | undefined;
};
'v-slots'?: {
default?: false | (() => vue.VNodeChild) | undefined;
prepend?: false | (() => vue.VNodeChild) | undefined;
append?: false | (() => vue.VNodeChild) | undefined;
loader?: false | (() => vue.VNodeChild) | undefined;
} | undefined;
} & {
"v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
"v-slot:prepend"?: false | (() => vue.VNodeChild) | undefined;
"v-slot:append"?: false | (() => vue.VNodeChild) | undefined;
"v-slot:loader"?: false | (() => vue.VNodeChild) | undefined;
} & {
"onGroup:selected"?: ((val: {
value: boolean;
}) => any) | undefined;
}, {
group: GroupItemProvide | null;
}, {}, {}, {}, {
symbol: any;
flat: boolean;
replace: boolean;
style: vue.StyleValue;
size: string | number;
active: boolean;
disabled: boolean;
tag: string;
readonly: boolean;
rounded: string | number | boolean;
variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
block: boolean;
exact: boolean;
tile: boolean;
density: Density;
slim: boolean;
stacked: boolean;
ripple: boolean | {
class: string;
} | undefined;
}>;
__isFragment?: undefined;
__isTeleport?: undefined;
__isSuspense?: undefined;
} & vue.ComponentOptionsBase<{
symbol: any;
flat: boolean;
replace: boolean;
style: vue.StyleValue;
size: string | number;
disabled: boolean;
tag: string;
readonly: boolean;
variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
block: boolean;
exact: boolean;
tile: boolean;
density: Density;
slim: boolean;
stacked: boolean;
ripple: boolean | {
class: string;
} | undefined;
} & {
class?: any;
text?: string | undefined;
value?: any;
width?: string | number | undefined;
height?: string | number | undefined;
active?: boolean | undefined;
theme?: string | undefined;
href?: string | undefined;
color?: string | undefined;
loading?: string | boolean | undefined;
icon?: boolean | IconValue | undefined;
to?: vue_router.RouteLocationRaw | undefined;
border?: string | number | boolean | undefined;
position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
rounded?: string | number | boolean | undefined;
maxHeight?: string | number | undefined;
maxWidth?: string | number | undefined;
minHeight?: string | number | undefined;
minWidth?: string | number | undefined;
elevation?: string | number | undefined;
location?: Anchor | undefined;
baseColor?: string | undefined;
selectedClass?: string | undefined;
prependIcon?: IconValue | undefined;
appendIcon?: IconValue | undefined;
} & {
$children?: vue.VNodeChild | (() => vue.VNodeChild) | {
default?: (() => vue.VNodeChild) | undefined;
prepend?: (() => vue.VNodeChild) | undefined;
append?: (() => vue.VNodeChild) | undefined;
loader?: (() => vue.VNodeChild) | undefined;
};
'v-slots'?: {
default?: false | (() => vue.VNodeChild) | undefined;
prepend?: false | (() => vue.VNodeChild) | undefined;
append?: false | (() => vue.VNodeChild) | undefined;
loader?: false | (() => vue.VNodeChild) | undefined;
} | undefined;
} & {
"v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
"v-slot:prepend"?: false | (() => vue.VNodeChild) | undefined;
"v-slot:append"?: false | (() => vue.VNodeChild) | undefined;
"v-slot:loader"?: false | (() => vue.VNodeChild) | undefined;
} & {
"onGroup:selected"?: ((val: {
value: boolean;
}) => any) | undefined;
}, {
group: GroupItemProvide | null;
}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
'group:selected': (val: {
value: boolean;
}) => true;
}, string, {
symbol: any;
flat: boolean;
replace: boolean;
style: vue.StyleValue;
size: string | number;
active: boolean;
disabled: boolean;
tag: string;
readonly: boolean;
rounded: string | number | boolean;
variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
block: boolean;
exact: boolean;
tile: boolean;
density: Density;
slim: boolean;
stacked: boolean;
ripple: boolean | {
class: string;
} | undefined;
}, {}, string, vue.SlotsType<Partial<{
default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
prepend: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
append: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
loader: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
color: StringConstructor;
variant: Omit<{
type: PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
default: string;
validator: (v: any) => boolean;
}, "default" | "type"> & {
type: PropType<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
default: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
};
theme: StringConstructor;
tag: Omit<{
type: StringConstructor;
default: string;
}, "default" | "type"> & {
type: PropType<string>;
default: string;
};
size: {
type: (StringConstructor | NumberConstructor)[];
default: string;
};
href: StringConstructor;
replace: BooleanConstructor;
to: PropType<vue_router.RouteLocationRaw>;
exact: BooleanConstructor;
rounded: {
type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
default: undefined;
};
tile: BooleanConstructor;
position: {
type: PropType<"fixed" | "absolute" | "relative" | "static" | "sticky">;
validator: (v: any) => boolean;
};
location: PropType<Anchor>;
loading: (StringConstructor | BooleanConstructor)[];
value: null;
disabled: BooleanConstructor;
selectedClass: StringConstructor;
elevation: {
type: (StringConstructor | NumberConstructor)[];
validator(v: any): boolean;
};
height: (StringConstructor | NumberConstructor)[];
maxHeight: (StringConstructor | NumberConstructor)[];
maxWidth: (StringConstructor | NumberConstructor)[];
minHeight: (StringConstructor | NumberConstructor)[];
minWidth: (StringConstructor | NumberConstructor)[];
width: (StringConstructor | NumberConstructor)[];
density: {
type: PropType<Density>;
default: string;
validator: (v: any) => boolean;
};
class: PropType<any>;
style: {
type: PropType<vue.StyleValue>;
default: null;
};
border: (StringConstructor | NumberConstructor | BooleanConstructor)[];
active: {
type: BooleanConstructor;
default: undefined;
};
baseColor: StringConstructor;
symbol: {
type: null;
default: vue.InjectionKey<GroupProvide>;
};
flat: BooleanConstructor;
icon: PropType<boolean | IconValue>;
prependIcon: PropType<IconValue>;
appendIcon: PropType<IconValue>;
block: BooleanConstructor;
readonly: BooleanConstructor;
slim: BooleanConstructor;
stacked: BooleanConstructor;
ripple: {
type: PropType<boolean | {
class: string;
} | undefined>;
default: boolean;
};
text: StringConstructor;
}, vue.ExtractPropTypes<{
color: StringConstructor;
variant: Omit<{
type: PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
default: string;
validator: (v: any) => boolean;
}, "default" | "type"> & {
type: PropType<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
default: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
};
theme: StringConstructor;
tag: Omit<{
type: StringConstructor;
default: string;
}, "default" | "type"> & {
type: PropType<string>;
default: string;
};
size: {
type: (StringConstructor | NumberConstructor)[];
default: string;
};
href: StringConstructor;
replace: BooleanConstructor;
to: PropType<vue_router.RouteLocationRaw>;
exact: BooleanConstructor;
rounded: {
type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
default: undefined;
};
tile: BooleanConstructor;
position: {
type: PropType<"fixed" | "absolute" | "relative" | "static" | "sticky">;
validator: (v: any) => boolean;
};
location: PropType<Anchor>;
loading: (StringConstructor | BooleanConstructor)[];
value: null;
disabled: BooleanConstructor;
selectedClass: StringConstructor;
elevation: {
type: (StringConstructor | NumberConstructor)[];
validator(v: any): boolean;
};
height: (StringConstructor | NumberConstructor)[];
maxHeight: (StringConstructor | NumberConstructor)[];
maxWidth: (StringConstructor | NumberConstructor)[];
minHeight: (StringConstructor | NumberConstructor)[];
minWidth: (StringConstructor | NumberConstructor)[];
width: (StringConstructor | NumberConstructor)[];
density: {
type: PropType<Density>;
default: string;
validator: (v: any) => boolean;
};
class: PropType<any>;
style: {
type: PropType<vue.StyleValue>;
default: null;
};
border: (StringConstructor | NumberConstructor | BooleanConstructor)[];
active: {
type: BooleanConstructor;
default: undefined;
};
baseColor: StringConstructor;
symbol: {
type: null;
default: vue.InjectionKey<GroupProvide>;
};
flat: BooleanConstructor;
icon: PropType<boolean | IconValue>;
prependIcon: PropType<IconValue>;
appendIcon: PropType<IconValue>;
block: BooleanConstructor;
readonly: BooleanConstructor;
slim: BooleanConstructor;
stacked: BooleanConstructor;
ripple: {
type: PropType<boolean | {
class: string;
} | undefined>;
default: boolean;
};
text: StringConstructor;
}>>;
type VBtn = InstanceType<typeof VBtn>;
export { VBtn };