routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+64
@@ -0,0 +1,64 @@
|
||||
@layer vuetify-components {
|
||||
.v-picker.v-sheet {
|
||||
display: grid;
|
||||
grid-auto-rows: min-content;
|
||||
grid-template-areas: "header" "body";
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
overflow: hidden;
|
||||
}
|
||||
.v-picker.v-sheet {
|
||||
box-shadow: 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 0%, transparent);
|
||||
}
|
||||
.v-picker.v-sheet {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.v-picker.v-sheet.v-picker--with-actions {
|
||||
grid-template-areas: "header" "body" "actions";
|
||||
}
|
||||
.v-picker.v-sheet.v-picker--landscape {
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas: "header body" "header body";
|
||||
}
|
||||
.v-picker.v-sheet.v-picker--landscape.v-picker--with-actions {
|
||||
grid-template-areas: "header body" "header actions";
|
||||
}
|
||||
.v-picker__body {
|
||||
grid-area: body;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.v-picker__header-wrapper {
|
||||
grid-area: header;
|
||||
}
|
||||
.v-picker__actions {
|
||||
grid-area: actions;
|
||||
padding: 0 12px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.v-picker__actions .v-btn {
|
||||
min-width: 48px;
|
||||
}
|
||||
.v-picker__actions .v-btn:not(:last-child) {
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
.v-picker--divided .v-picker__header {
|
||||
border-bottom-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: thin;
|
||||
}
|
||||
.v-picker-title {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
padding-inline: 24px 12px;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.1666666667em;
|
||||
}
|
||||
}
|
||||
+435
@@ -0,0 +1,435 @@
|
||||
|
||||
export type VPickerSlots = {
|
||||
header: never;
|
||||
default: never;
|
||||
actions: never;
|
||||
title: never;
|
||||
};
|
||||
export declare const makeVPickerProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
border?: unknown;
|
||||
elevation?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
height?: unknown;
|
||||
maxHeight?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minHeight?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: unknown;
|
||||
location?: unknown;
|
||||
position?: unknown;
|
||||
color?: unknown;
|
||||
bgColor?: unknown;
|
||||
divided?: unknown;
|
||||
landscape?: unknown;
|
||||
title?: unknown;
|
||||
hideHeader?: unknown;
|
||||
hideTitle?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").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>;
|
||||
};
|
||||
border: unknown extends Defaults["border"] ? (BooleanConstructor | NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["border"] ? string | number | boolean : string | number | boolean | Defaults["border"]>;
|
||||
default: unknown extends Defaults["border"] ? string | number | boolean : Defaults["border"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
elevation: unknown extends Defaults["elevation"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["elevation"] ? string | number : string | number | Defaults["elevation"]>;
|
||||
default: unknown extends Defaults["elevation"] ? string | number : Defaults["elevation"] | NonNullable<string | number>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
|
||||
default: unknown extends Defaults["rounded"] ? string | number | boolean : Defaults["rounded"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
tile: unknown extends Defaults["tile"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | Defaults["tag"] | import("../../util/index.js").JSXComponent>;
|
||||
default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : Defaults["tag"] | NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
maxHeight: unknown extends Defaults["maxHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["maxHeight"] ? string | number : string | number | Defaults["maxHeight"]>;
|
||||
default: unknown extends Defaults["maxHeight"] ? string | number : Defaults["maxHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
maxWidth: unknown extends Defaults["maxWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["maxWidth"] ? string | number : string | number | Defaults["maxWidth"]>;
|
||||
default: unknown extends Defaults["maxWidth"] ? string | number : Defaults["maxWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
minHeight: unknown extends Defaults["minHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["minHeight"] ? string | number : string | number | Defaults["minHeight"]>;
|
||||
default: unknown extends Defaults["minHeight"] ? string | number : Defaults["minHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
minWidth: unknown extends Defaults["minWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").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: import("vue").PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
location: unknown extends Defaults["location"] ? import("vue").PropType<import("../../util/index.js").Anchor | null> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["location"] ? import("../../util/index.js").Anchor | null : Defaults["location"] | import("../../util/index.js").Anchor | null>;
|
||||
default: unknown extends Defaults["location"] ? import("../../util/index.js").Anchor | null : Defaults["location"] | NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
};
|
||||
position: unknown extends Defaults["position"] ? {
|
||||
type: import("vue").PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["position"] ? "absolute" | "fixed" | "relative" | "static" | "sticky" : "absolute" | "fixed" | "relative" | "static" | "sticky" | Defaults["position"]>;
|
||||
default: unknown extends Defaults["position"] ? "absolute" | "fixed" | "relative" | "static" | "sticky" : Defaults["position"] | NonNullable<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
bgColor: unknown extends Defaults["bgColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"]>;
|
||||
default: unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"];
|
||||
};
|
||||
divided: unknown extends Defaults["divided"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["divided"] ? boolean : boolean | Defaults["divided"]>;
|
||||
default: unknown extends Defaults["divided"] ? boolean : boolean | Defaults["divided"];
|
||||
};
|
||||
landscape: unknown extends Defaults["landscape"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["landscape"] ? boolean : boolean | Defaults["landscape"]>;
|
||||
default: unknown extends Defaults["landscape"] ? boolean : boolean | Defaults["landscape"];
|
||||
};
|
||||
title: unknown extends Defaults["title"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["title"] ? string : string | Defaults["title"]>;
|
||||
default: unknown extends Defaults["title"] ? string : string | Defaults["title"];
|
||||
};
|
||||
hideHeader: unknown extends Defaults["hideHeader"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["hideHeader"] ? boolean : boolean | Defaults["hideHeader"]>;
|
||||
default: unknown extends Defaults["hideHeader"] ? boolean : boolean | Defaults["hideHeader"];
|
||||
};
|
||||
hideTitle: unknown extends Defaults["hideTitle"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["hideTitle"] ? boolean : boolean | Defaults["hideTitle"]>;
|
||||
default: unknown extends Defaults["hideTitle"] ? boolean : boolean | Defaults["hideTitle"];
|
||||
};
|
||||
};
|
||||
export declare const VPicker: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
divided: boolean;
|
||||
landscape: boolean;
|
||||
hideHeader: boolean;
|
||||
hideTitle: boolean;
|
||||
} & {
|
||||
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?: import("../../util/index.js").Anchor | null | undefined;
|
||||
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
|
||||
color?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
title?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
header?: (() => import("vue").VNodeChild) | undefined;
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
actions?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
header?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
actions?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:actions"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:header"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
divided: boolean;
|
||||
landscape: boolean;
|
||||
hideHeader: boolean;
|
||||
hideTitle: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
header: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
actions: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: () => 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;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
divided: boolean;
|
||||
landscape: boolean;
|
||||
hideHeader: boolean;
|
||||
hideTitle: boolean;
|
||||
} & {
|
||||
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?: import("../../util/index.js").Anchor | null | undefined;
|
||||
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
|
||||
color?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
title?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
header?: (() => import("vue").VNodeChild) | undefined;
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
actions?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
header?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
actions?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:actions"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:header"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
divided: boolean;
|
||||
landscape: boolean;
|
||||
hideHeader: boolean;
|
||||
hideTitle: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
divided: boolean;
|
||||
landscape: boolean;
|
||||
hideHeader: boolean;
|
||||
hideTitle: boolean;
|
||||
} & {
|
||||
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?: import("../../util/index.js").Anchor | null | undefined;
|
||||
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
|
||||
color?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
title?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
header?: (() => import("vue").VNodeChild) | undefined;
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
actions?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
header?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
actions?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:actions"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:header"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
divided: boolean;
|
||||
landscape: boolean;
|
||||
hideHeader: boolean;
|
||||
hideTitle: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
header: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
actions: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
location: import("vue").PropType<import("../../util/index.js").Anchor | null>;
|
||||
position: {
|
||||
type: import("vue").PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
color: StringConstructor;
|
||||
bgColor: StringConstructor;
|
||||
divided: BooleanConstructor;
|
||||
landscape: BooleanConstructor;
|
||||
title: StringConstructor;
|
||||
hideHeader: BooleanConstructor;
|
||||
hideTitle: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
location: import("vue").PropType<import("../../util/index.js").Anchor | null>;
|
||||
position: {
|
||||
type: import("vue").PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
color: StringConstructor;
|
||||
bgColor: StringConstructor;
|
||||
divided: BooleanConstructor;
|
||||
landscape: BooleanConstructor;
|
||||
title: StringConstructor;
|
||||
hideHeader: BooleanConstructor;
|
||||
hideTitle: BooleanConstructor;
|
||||
}>>;
|
||||
export type VPicker = InstanceType<typeof VPicker>;
|
||||
+71
@@ -0,0 +1,71 @@
|
||||
import { createVNode as _createVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, mergeProps as _mergeProps } from "vue";
|
||||
// Styles
|
||||
import "./VPicker.css";
|
||||
|
||||
// Components
|
||||
import { VPickerTitle } from "./VPickerTitle.js";
|
||||
import { VDefaultsProvider } from "../../components/VDefaultsProvider/VDefaultsProvider.js";
|
||||
import { makeVSheetProps, VSheet } from "../../components/VSheet/VSheet.js"; // Composables
|
||||
import { useBackgroundColor } from "../../composables/color.js"; // Utilities
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVPickerProps = propsFactory({
|
||||
bgColor: String,
|
||||
divided: Boolean,
|
||||
landscape: Boolean,
|
||||
title: String,
|
||||
hideHeader: Boolean,
|
||||
hideTitle: Boolean,
|
||||
...makeVSheetProps()
|
||||
}, 'VPicker');
|
||||
export const VPicker = genericComponent()({
|
||||
name: 'VPicker',
|
||||
props: makeVPickerProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
} = useBackgroundColor(() => props.color);
|
||||
useRender(() => {
|
||||
const sheetProps = VSheet.filterProps(props);
|
||||
const hasTitle = !props.hideTitle && !!(props.title || slots.title);
|
||||
return _createVNode(VSheet, _mergeProps(sheetProps, {
|
||||
"color": props.bgColor,
|
||||
"class": ['v-picker', {
|
||||
'v-picker--divided': props.divided,
|
||||
'v-picker--landscape': props.landscape,
|
||||
'v-picker--with-actions': !!slots.actions
|
||||
}, props.class],
|
||||
"style": props.style
|
||||
}), {
|
||||
default: () => [!props.hideHeader && _createElementVNode("div", {
|
||||
"key": "header",
|
||||
"class": _normalizeClass(['v-picker__header-wrapper', backgroundColorClasses.value]),
|
||||
"style": _normalizeStyle([backgroundColorStyles.value])
|
||||
}, [hasTitle && _createVNode(VPickerTitle, {
|
||||
"key": "picker-title"
|
||||
}, {
|
||||
default: () => [slots.title?.() ?? props.title]
|
||||
}), slots.header && _createElementVNode("div", {
|
||||
"class": "v-picker__header"
|
||||
}, [slots.header()])]), _createElementVNode("div", {
|
||||
"class": "v-picker__body"
|
||||
}, [slots.default?.()]), slots.actions && _createVNode(VDefaultsProvider, {
|
||||
"defaults": {
|
||||
VBtn: {
|
||||
slim: true,
|
||||
variant: 'text'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [_createElementVNode("div", {
|
||||
"class": "v-picker__actions"
|
||||
}, [slots.actions()])]
|
||||
})]
|
||||
});
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VPicker.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+62
@@ -0,0 +1,62 @@
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-picker.v-sheet
|
||||
display: grid
|
||||
grid-auto-rows: min-content
|
||||
grid-template-areas: "header" "body"
|
||||
grid-template-columns: minmax(0, 1fr)
|
||||
overflow: hidden
|
||||
@include tools.elevation($picker-elevation)
|
||||
@include tools.rounded($picker-border-radius)
|
||||
|
||||
&.v-picker--with-actions
|
||||
grid-template-areas: "header" "body" "actions"
|
||||
|
||||
&.v-picker--landscape
|
||||
grid-template-columns: auto 1fr
|
||||
grid-template-areas: "header body" "header body"
|
||||
|
||||
&.v-picker--with-actions
|
||||
grid-template-areas: "header body" "header actions"
|
||||
|
||||
.v-picker__body
|
||||
grid-area: body
|
||||
overflow: hidden
|
||||
position: relative
|
||||
display: flex
|
||||
justify-content: center
|
||||
flex-wrap: wrap
|
||||
|
||||
.v-picker__header-wrapper
|
||||
grid-area: header
|
||||
|
||||
.v-picker__actions
|
||||
grid-area: actions
|
||||
padding: $picker-actions-padding
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: flex-end
|
||||
|
||||
.v-btn
|
||||
min-width: 48px
|
||||
|
||||
&:not(:last-child)
|
||||
margin-inline-end: 8px
|
||||
|
||||
.v-picker--divided
|
||||
.v-picker__header
|
||||
border-bottom-color: $picker-border-color
|
||||
border-bottom-style: $picker-border-style
|
||||
border-bottom-width: $picker-border-thin-width
|
||||
|
||||
.v-picker-title
|
||||
text-transform: uppercase
|
||||
font-size: .75rem
|
||||
padding-inline: 24px 12px
|
||||
padding-top: 16px
|
||||
padding-bottom: 16px
|
||||
font-weight: $picker-title-font-weight
|
||||
letter-spacing: .1666666667em
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
export declare const VPickerTitle: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => 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;
|
||||
tag: string;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
}>>;
|
||||
export type VPickerTitle = InstanceType<typeof VPickerTitle>;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
// Utilities
|
||||
import { createSimpleFunctional } from "../../util/index.js";
|
||||
export const VPickerTitle = createSimpleFunctional('v-picker-title');
|
||||
//# sourceMappingURL=VPickerTitle.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VPickerTitle.js","names":["createSimpleFunctional","VPickerTitle"],"sources":["../../../src/labs/VPicker/VPickerTitle.ts"],"sourcesContent":["// Utilities\nimport { createSimpleFunctional } from '@/util'\n\nexport const VPickerTitle = createSimpleFunctional('v-picker-title')\n\nexport type VPickerTitle = InstanceType<typeof VPickerTitle>\n"],"mappings":"AAAA;AAAA,SACSA,sBAAsB;AAE/B,OAAO,MAAMC,YAAY,GAAGD,sBAAsB,CAAC,gBAAgB,CAAC","ignoreList":[]}
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
@use '../../styles/settings';
|
||||
|
||||
$picker-actions-padding: 0 12px 12px !default;
|
||||
$picker-border-color: settings.$border-color-root !default;
|
||||
$picker-border-radius: settings.$border-radius-root !default;
|
||||
$picker-border-radius: settings.$border-radius-root !default;
|
||||
$picker-border-style: settings.$border-style-root !default;
|
||||
$picker-border-thin-width: thin !default;
|
||||
$picker-elevation: 0 !default;
|
||||
$picker-inactive-btn-opacity: .6 !default;
|
||||
$picker-title-font-weight: 400 !default;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VPicker } from './VPicker.js';
|
||||
export { VPickerTitle } from './VPickerTitle.js';
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export { VPicker } from "./VPicker.js";
|
||||
export { VPickerTitle } from "./VPickerTitle.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VPicker","VPickerTitle"],"sources":["../../../src/labs/VPicker/index.ts"],"sourcesContent":["export { VPicker } from './VPicker'\nexport { VPickerTitle } from './VPickerTitle'\n"],"mappings":"SAASA,OAAO;AAAA,SACPC,YAAY","ignoreList":[]}
|
||||
Reference in New Issue
Block a user