Major overhaul to the theme and now functioning.
This commit is contained in:
Generated
Vendored
+78
@@ -0,0 +1,78 @@
|
||||
.v-file-upload {
|
||||
padding: 64px 16px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.v-file-upload.v-sheet {
|
||||
display: flex;
|
||||
border-radius: 4px;
|
||||
border-style: dashed;
|
||||
border-width: 2px;
|
||||
}
|
||||
.v-file-upload.v-file-upload--density-compact {
|
||||
padding: 32px 0;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
}
|
||||
.v-file-upload .v-overlay__scrim {
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-file-upload--disabled {
|
||||
pointer-events: none;
|
||||
opacity: var(--v-disabled-opacity);
|
||||
}
|
||||
.v-file-upload--dragging > * {
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-file-upload--clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.v-file-upload input[type=file] {
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.v-file-upload-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.v-file-upload-icon {
|
||||
opacity: var(--v-medium-emphasis-opacity);
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.v-file-upload--density-comfortable .v-file-upload-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.v-file-upload--density-compact .v-file-upload-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.v-file-upload-divider {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin: 32px 0;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
.v-file-upload-divider .v-divider__wrapper {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.v-file-upload-items {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.v-file-upload-item:not(:first-child) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
Generated
Vendored
+927
@@ -0,0 +1,927 @@
|
||||
// Styles
|
||||
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
// Types
|
||||
import type { PropType, VNode } from 'vue';
|
||||
export type VFileUploadSlots = {
|
||||
browse: {
|
||||
props: {
|
||||
onClick: (e: MouseEvent) => void;
|
||||
};
|
||||
};
|
||||
default: never;
|
||||
icon: never;
|
||||
input: {
|
||||
inputNode: VNode;
|
||||
};
|
||||
item: {
|
||||
file: File;
|
||||
props: {
|
||||
'onClick:remove': () => void;
|
||||
};
|
||||
};
|
||||
title: never;
|
||||
divider: never;
|
||||
};
|
||||
export declare const makeVFileUploadProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
border?: unknown;
|
||||
density?: 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;
|
||||
closeDelay?: unknown;
|
||||
openDelay?: unknown;
|
||||
length?: unknown;
|
||||
opacity?: unknown;
|
||||
thickness?: unknown;
|
||||
color?: unknown;
|
||||
filterByType?: unknown;
|
||||
browseText?: unknown;
|
||||
dividerText?: unknown;
|
||||
title?: unknown;
|
||||
subtitle?: unknown;
|
||||
icon?: unknown;
|
||||
modelValue?: unknown;
|
||||
clearable?: unknown;
|
||||
disabled?: unknown;
|
||||
hideBrowse?: unknown;
|
||||
multiple?: unknown;
|
||||
scrim?: unknown;
|
||||
showSize?: unknown;
|
||||
name?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? PropType<any> : {
|
||||
type: PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
border: unknown extends Defaults["border"] ? (BooleanConstructor | NumberConstructor | StringConstructor)[] : {
|
||||
type: 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>;
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | import("../../composables/density.js").Density>;
|
||||
default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | NonNullable<import("../../composables/density.js").Density>;
|
||||
};
|
||||
elevation: unknown extends Defaults["elevation"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator(v: any): boolean;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator(v: any): boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: 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: 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: PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: 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: 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: 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: 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: 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: PropType<unknown extends Defaults["minWidth"] ? string | number : string | number | Defaults["minWidth"]>;
|
||||
default: unknown extends Defaults["minWidth"] ? string | number : Defaults["minWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
location: unknown extends Defaults["location"] ? PropType<import("../../util/index.js").Anchor | null> : {
|
||||
type: 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: PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: 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">;
|
||||
};
|
||||
closeDelay: unknown extends Defaults["closeDelay"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["closeDelay"] ? string | number : string | number | Defaults["closeDelay"]>;
|
||||
default: unknown extends Defaults["closeDelay"] ? string | number : Defaults["closeDelay"] | NonNullable<string | number>;
|
||||
};
|
||||
openDelay: unknown extends Defaults["openDelay"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["openDelay"] ? string | number : string | number | Defaults["openDelay"]>;
|
||||
default: unknown extends Defaults["openDelay"] ? string | number : Defaults["openDelay"] | NonNullable<string | number>;
|
||||
};
|
||||
length: unknown extends Defaults["length"] ? {
|
||||
type: PropType<string | number>;
|
||||
default: NonNullable<string | number>;
|
||||
} : Omit<{
|
||||
type: PropType<string | number>;
|
||||
default: NonNullable<string | number>;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["length"] ? string | number : string | number | Defaults["length"]>;
|
||||
default: unknown extends Defaults["length"] ? string | number : Defaults["length"] | NonNullable<string | number>;
|
||||
};
|
||||
opacity: unknown extends Defaults["opacity"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["opacity"] ? string | number : string | number | Defaults["opacity"]>;
|
||||
default: unknown extends Defaults["opacity"] ? string | number : Defaults["opacity"] | NonNullable<string | number>;
|
||||
};
|
||||
thickness: unknown extends Defaults["thickness"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["thickness"] ? string | number : string | number | Defaults["thickness"]>;
|
||||
default: unknown extends Defaults["thickness"] ? string | number : Defaults["thickness"] | NonNullable<string | number>;
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
filterByType: unknown extends Defaults["filterByType"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["filterByType"] ? string : string | Defaults["filterByType"]>;
|
||||
default: unknown extends Defaults["filterByType"] ? string : string | Defaults["filterByType"];
|
||||
};
|
||||
browseText: unknown extends Defaults["browseText"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["browseText"] ? string : string | Defaults["browseText"]>;
|
||||
default: unknown extends Defaults["browseText"] ? string : string | Defaults["browseText"];
|
||||
};
|
||||
dividerText: unknown extends Defaults["dividerText"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["dividerText"] ? string : string | Defaults["dividerText"]>;
|
||||
default: unknown extends Defaults["dividerText"] ? string : string | Defaults["dividerText"];
|
||||
};
|
||||
title: unknown extends Defaults["title"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["title"] ? string : string | Defaults["title"]>;
|
||||
default: unknown extends Defaults["title"] ? string : string | Defaults["title"];
|
||||
};
|
||||
subtitle: unknown extends Defaults["subtitle"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["subtitle"] ? string : string | Defaults["subtitle"]>;
|
||||
default: unknown extends Defaults["subtitle"] ? string : string | Defaults["subtitle"];
|
||||
};
|
||||
icon: unknown extends Defaults["icon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | IconValue>;
|
||||
default: unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | NonNullable<IconValue>;
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: PropType<File[] | File>;
|
||||
default: null;
|
||||
validator: (val: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<File[] | File>;
|
||||
default: null;
|
||||
validator: (val: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["modelValue"] ? File[] | File : File[] | File | Defaults["modelValue"]>;
|
||||
default: unknown extends Defaults["modelValue"] ? File[] | File : Defaults["modelValue"] | NonNullable<File[] | File>;
|
||||
};
|
||||
clearable: unknown extends Defaults["clearable"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["clearable"] ? boolean : boolean | Defaults["clearable"]>;
|
||||
default: unknown extends Defaults["clearable"] ? boolean : boolean | Defaults["clearable"];
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
hideBrowse: unknown extends Defaults["hideBrowse"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["hideBrowse"] ? boolean : boolean | Defaults["hideBrowse"]>;
|
||||
default: unknown extends Defaults["hideBrowse"] ? boolean : boolean | Defaults["hideBrowse"];
|
||||
};
|
||||
multiple: unknown extends Defaults["multiple"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["multiple"] ? boolean : boolean | Defaults["multiple"]>;
|
||||
default: unknown extends Defaults["multiple"] ? boolean : boolean | Defaults["multiple"];
|
||||
};
|
||||
scrim: unknown extends Defaults["scrim"] ? {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["scrim"] ? string | boolean : string | boolean | Defaults["scrim"]>;
|
||||
default: unknown extends Defaults["scrim"] ? string | boolean : Defaults["scrim"] | NonNullable<string | boolean>;
|
||||
};
|
||||
showSize: unknown extends Defaults["showSize"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["showSize"] ? boolean : boolean | Defaults["showSize"]>;
|
||||
default: unknown extends Defaults["showSize"] ? boolean : boolean | Defaults["showSize"];
|
||||
};
|
||||
name: unknown extends Defaults["name"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["name"] ? string : string | Defaults["name"]>;
|
||||
default: unknown extends Defaults["name"] ? string : string | Defaults["name"];
|
||||
};
|
||||
};
|
||||
export declare const VFileUpload: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
length: string | number;
|
||||
browseText: string;
|
||||
dividerText: string;
|
||||
title: string;
|
||||
icon: IconValue;
|
||||
modelValue: File[] | File;
|
||||
clearable: boolean;
|
||||
disabled: boolean;
|
||||
hideBrowse: boolean;
|
||||
multiple: boolean;
|
||||
scrim: string | boolean;
|
||||
showSize: 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;
|
||||
closeDelay?: string | number | undefined;
|
||||
openDelay?: string | number | undefined;
|
||||
opacity?: string | number | undefined;
|
||||
thickness?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
filterByType?: string | undefined;
|
||||
subtitle?: string | undefined;
|
||||
name?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
browse?: ((arg: {
|
||||
props: {
|
||||
onClick: (e: MouseEvent) => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
icon?: (() => import("vue").VNodeChild) | undefined;
|
||||
input?: ((arg: {
|
||||
inputNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
item?: ((arg: {
|
||||
file: File;
|
||||
props: {
|
||||
"onClick:remove": () => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
divider?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean | undefined;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
"v-slots"?: {
|
||||
browse?: false | ((arg: {
|
||||
props: {
|
||||
onClick: (e: MouseEvent) => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
icon?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
input?: false | ((arg: {
|
||||
inputNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
item?: false | ((arg: {
|
||||
file: File;
|
||||
props: {
|
||||
"onClick:remove": () => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
divider?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:browse"?: false | ((arg: {
|
||||
props: {
|
||||
onClick: (e: MouseEvent) => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:divider"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:icon"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:input"?: false | ((arg: {
|
||||
inputNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:item"?: false | ((arg: {
|
||||
file: File;
|
||||
props: {
|
||||
"onClick:remove": () => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onRejected?: ((files: File[]) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((files: File[]) => any) | undefined;
|
||||
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
"update:modelValue": (files: File[]) => true;
|
||||
rejected: (files: File[]) => true;
|
||||
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
length: string | number;
|
||||
browseText: string;
|
||||
dividerText: string;
|
||||
title: string;
|
||||
icon: IconValue;
|
||||
modelValue: File[] | File;
|
||||
clearable: boolean;
|
||||
disabled: boolean;
|
||||
hideBrowse: boolean;
|
||||
multiple: boolean;
|
||||
scrim: string | boolean;
|
||||
showSize: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
browse: (arg: {
|
||||
props: {
|
||||
onClick: (e: MouseEvent) => void;
|
||||
};
|
||||
}) => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
default: () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
icon: () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
input: (arg: {
|
||||
inputNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>;
|
||||
}) => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
item: (arg: {
|
||||
file: File;
|
||||
props: {
|
||||
"onClick:remove": () => void;
|
||||
};
|
||||
}) => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
divider: () => 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;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
length: string | number;
|
||||
browseText: string;
|
||||
dividerText: string;
|
||||
title: string;
|
||||
icon: IconValue;
|
||||
modelValue: File[] | File;
|
||||
clearable: boolean;
|
||||
disabled: boolean;
|
||||
hideBrowse: boolean;
|
||||
multiple: boolean;
|
||||
scrim: string | boolean;
|
||||
showSize: 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;
|
||||
closeDelay?: string | number | undefined;
|
||||
openDelay?: string | number | undefined;
|
||||
opacity?: string | number | undefined;
|
||||
thickness?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
filterByType?: string | undefined;
|
||||
subtitle?: string | undefined;
|
||||
name?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
browse?: ((arg: {
|
||||
props: {
|
||||
onClick: (e: MouseEvent) => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
icon?: (() => import("vue").VNodeChild) | undefined;
|
||||
input?: ((arg: {
|
||||
inputNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
item?: ((arg: {
|
||||
file: File;
|
||||
props: {
|
||||
"onClick:remove": () => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
divider?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean | undefined;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
"v-slots"?: {
|
||||
browse?: false | ((arg: {
|
||||
props: {
|
||||
onClick: (e: MouseEvent) => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
icon?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
input?: false | ((arg: {
|
||||
inputNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
item?: false | ((arg: {
|
||||
file: File;
|
||||
props: {
|
||||
"onClick:remove": () => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
divider?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:browse"?: false | ((arg: {
|
||||
props: {
|
||||
onClick: (e: MouseEvent) => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:divider"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:icon"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:input"?: false | ((arg: {
|
||||
inputNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:item"?: false | ((arg: {
|
||||
file: File;
|
||||
props: {
|
||||
"onClick:remove": () => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onRejected?: ((files: File[]) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((files: File[]) => any) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
length: string | number;
|
||||
browseText: string;
|
||||
dividerText: string;
|
||||
title: string;
|
||||
icon: IconValue;
|
||||
modelValue: File[] | File;
|
||||
clearable: boolean;
|
||||
disabled: boolean;
|
||||
hideBrowse: boolean;
|
||||
multiple: boolean;
|
||||
scrim: string | boolean;
|
||||
showSize: boolean;
|
||||
}>;
|
||||
__isFragment?: undefined;
|
||||
__isTeleport?: undefined;
|
||||
__isSuspense?: undefined;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
length: string | number;
|
||||
browseText: string;
|
||||
dividerText: string;
|
||||
title: string;
|
||||
icon: IconValue;
|
||||
modelValue: File[] | File;
|
||||
clearable: boolean;
|
||||
disabled: boolean;
|
||||
hideBrowse: boolean;
|
||||
multiple: boolean;
|
||||
scrim: string | boolean;
|
||||
showSize: 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;
|
||||
closeDelay?: string | number | undefined;
|
||||
openDelay?: string | number | undefined;
|
||||
opacity?: string | number | undefined;
|
||||
thickness?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
filterByType?: string | undefined;
|
||||
subtitle?: string | undefined;
|
||||
name?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
browse?: ((arg: {
|
||||
props: {
|
||||
onClick: (e: MouseEvent) => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
icon?: (() => import("vue").VNodeChild) | undefined;
|
||||
input?: ((arg: {
|
||||
inputNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
item?: ((arg: {
|
||||
file: File;
|
||||
props: {
|
||||
"onClick:remove": () => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
divider?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean | undefined;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
"v-slots"?: {
|
||||
browse?: false | ((arg: {
|
||||
props: {
|
||||
onClick: (e: MouseEvent) => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
icon?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
input?: false | ((arg: {
|
||||
inputNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
item?: false | ((arg: {
|
||||
file: File;
|
||||
props: {
|
||||
"onClick:remove": () => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
divider?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:browse"?: false | ((arg: {
|
||||
props: {
|
||||
onClick: (e: MouseEvent) => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:divider"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:icon"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:input"?: false | ((arg: {
|
||||
inputNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:item"?: false | ((arg: {
|
||||
file: File;
|
||||
props: {
|
||||
"onClick:remove": () => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onRejected?: ((files: File[]) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((files: File[]) => any) | undefined;
|
||||
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
"update:modelValue": (files: File[]) => true;
|
||||
rejected: (files: File[]) => true;
|
||||
}, string, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
length: string | number;
|
||||
browseText: string;
|
||||
dividerText: string;
|
||||
title: string;
|
||||
icon: IconValue;
|
||||
modelValue: File[] | File;
|
||||
clearable: boolean;
|
||||
disabled: boolean;
|
||||
hideBrowse: boolean;
|
||||
multiple: boolean;
|
||||
scrim: string | boolean;
|
||||
showSize: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
browse: (arg: {
|
||||
props: {
|
||||
onClick: (e: MouseEvent) => void;
|
||||
};
|
||||
}) => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
default: () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
icon: () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
input: (arg: {
|
||||
inputNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>;
|
||||
}) => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
item: (arg: {
|
||||
file: File;
|
||||
props: {
|
||||
"onClick:remove": () => void;
|
||||
};
|
||||
}) => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
divider: () => 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: PropType<any>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").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: {
|
||||
type: 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: PropType<import("../../util/index.js").Anchor | null>;
|
||||
position: {
|
||||
type: PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
closeDelay: (NumberConstructor | StringConstructor)[];
|
||||
openDelay: (NumberConstructor | StringConstructor)[];
|
||||
length: {
|
||||
type: PropType<string | number>;
|
||||
default: NonNullable<string | number>;
|
||||
};
|
||||
opacity: (NumberConstructor | StringConstructor)[];
|
||||
thickness: (NumberConstructor | StringConstructor)[];
|
||||
color: StringConstructor;
|
||||
filterByType: StringConstructor;
|
||||
browseText: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
dividerText: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
title: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
subtitle: StringConstructor;
|
||||
icon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
modelValue: {
|
||||
type: PropType<File[] | File>;
|
||||
default: null;
|
||||
validator: (val: any) => boolean;
|
||||
};
|
||||
clearable: BooleanConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
hideBrowse: BooleanConstructor;
|
||||
multiple: BooleanConstructor;
|
||||
scrim: {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
default: boolean;
|
||||
};
|
||||
showSize: BooleanConstructor;
|
||||
name: StringConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<any>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").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: {
|
||||
type: 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: PropType<import("../../util/index.js").Anchor | null>;
|
||||
position: {
|
||||
type: PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
closeDelay: (NumberConstructor | StringConstructor)[];
|
||||
openDelay: (NumberConstructor | StringConstructor)[];
|
||||
length: {
|
||||
type: PropType<string | number>;
|
||||
default: NonNullable<string | number>;
|
||||
};
|
||||
opacity: (NumberConstructor | StringConstructor)[];
|
||||
thickness: (NumberConstructor | StringConstructor)[];
|
||||
color: StringConstructor;
|
||||
filterByType: StringConstructor;
|
||||
browseText: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
dividerText: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
title: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
subtitle: StringConstructor;
|
||||
icon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
modelValue: {
|
||||
type: PropType<File[] | File>;
|
||||
default: null;
|
||||
validator: (val: any) => boolean;
|
||||
};
|
||||
clearable: BooleanConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
hideBrowse: BooleanConstructor;
|
||||
multiple: BooleanConstructor;
|
||||
scrim: {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
default: boolean;
|
||||
};
|
||||
showSize: BooleanConstructor;
|
||||
name: StringConstructor;
|
||||
}>>;
|
||||
export type VFileUpload = InstanceType<typeof VFileUpload>;
|
||||
Generated
Vendored
+266
@@ -0,0 +1,266 @@
|
||||
import { mergeProps as _mergeProps, createElementVNode as _createElementVNode, Fragment as _Fragment, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VFileUpload.css";
|
||||
|
||||
// Components
|
||||
import { VFileUploadItem } from "./VFileUploadItem.js";
|
||||
import { VBtn } from "../../components/VBtn/VBtn.js";
|
||||
import { VDefaultsProvider } from "../../components/VDefaultsProvider/VDefaultsProvider.js";
|
||||
import { makeVDividerProps, VDivider } from "../../components/VDivider/VDivider.js";
|
||||
import { VIcon } from "../../components/VIcon/VIcon.js";
|
||||
import { VOverlay } from "../../components/VOverlay/VOverlay.js";
|
||||
import { makeVSheetProps, VSheet } from "../../components/VSheet/VSheet.js"; // Composables
|
||||
import { makeDelayProps } from "../../composables/delay.js";
|
||||
import { makeDensityProps, useDensity } from "../../composables/density.js";
|
||||
import { useFileDrop } from "../../composables/fileDrop.js";
|
||||
import { makeFileFilterProps, useFileFilter } from "../../composables/fileFilter.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { useLocale } from "../../composables/locale.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js"; // Utilities
|
||||
import { ref, shallowRef } from 'vue';
|
||||
import { filterInputAttrs, genericComponent, pick, propsFactory, useRender, wrapInArray } from "../../util/index.js"; // Types
|
||||
export const makeVFileUploadProps = propsFactory({
|
||||
browseText: {
|
||||
type: String,
|
||||
default: '$vuetify.fileUpload.browse'
|
||||
},
|
||||
dividerText: {
|
||||
type: String,
|
||||
default: '$vuetify.fileUpload.divider'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '$vuetify.fileUpload.title'
|
||||
},
|
||||
subtitle: String,
|
||||
icon: {
|
||||
type: IconValue,
|
||||
default: '$upload'
|
||||
},
|
||||
modelValue: {
|
||||
type: [Array, Object],
|
||||
default: null,
|
||||
validator: val => {
|
||||
return wrapInArray(val).every(v => v != null && typeof v === 'object');
|
||||
}
|
||||
},
|
||||
clearable: Boolean,
|
||||
disabled: Boolean,
|
||||
hideBrowse: Boolean,
|
||||
multiple: Boolean,
|
||||
scrim: {
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
showSize: Boolean,
|
||||
name: String,
|
||||
...makeFileFilterProps(),
|
||||
...makeDelayProps(),
|
||||
...makeDensityProps(),
|
||||
...pick(makeVDividerProps({
|
||||
length: 150
|
||||
}), ['length', 'thickness', 'opacity']),
|
||||
...makeVSheetProps()
|
||||
}, 'VFileUpload');
|
||||
export const VFileUpload = genericComponent()({
|
||||
name: 'VFileUpload',
|
||||
inheritAttrs: false,
|
||||
props: makeVFileUploadProps(),
|
||||
emits: {
|
||||
'update:modelValue': files => true,
|
||||
rejected: files => true
|
||||
},
|
||||
setup(props, _ref) {
|
||||
let {
|
||||
attrs,
|
||||
emit,
|
||||
slots
|
||||
} = _ref;
|
||||
const {
|
||||
t
|
||||
} = useLocale();
|
||||
const {
|
||||
densityClasses
|
||||
} = useDensity(props);
|
||||
const {
|
||||
filterAccepted
|
||||
} = useFileFilter(props);
|
||||
const model = useProxiedModel(props, 'modelValue', props.modelValue, val => wrapInArray(val), val => props.multiple || Array.isArray(props.modelValue) ? val : val[0]);
|
||||
const isDragging = shallowRef(false);
|
||||
const vSheetRef = ref(null);
|
||||
const inputRef = ref(null);
|
||||
const {
|
||||
handleDrop
|
||||
} = useFileDrop();
|
||||
function onDragover(e) {
|
||||
e.preventDefault();
|
||||
e.stopImmediatePropagation();
|
||||
isDragging.value = true;
|
||||
}
|
||||
function onDragleave(e) {
|
||||
e.preventDefault();
|
||||
isDragging.value = false;
|
||||
}
|
||||
async function onDrop(e) {
|
||||
e.preventDefault();
|
||||
e.stopImmediatePropagation();
|
||||
isDragging.value = false;
|
||||
if (!inputRef.value) return;
|
||||
const allDroppedFiles = await handleDrop(e);
|
||||
selectAccepted(allDroppedFiles);
|
||||
}
|
||||
function onFileSelection(e) {
|
||||
if (!e.target || e.repack) return; // prevent loop
|
||||
|
||||
if (!props.filterByType) {
|
||||
const target = e.target;
|
||||
model.value = [...(target.files ?? [])];
|
||||
} else {
|
||||
selectAccepted([...e.target.files]);
|
||||
}
|
||||
}
|
||||
function selectAccepted(files) {
|
||||
const dataTransfer = new DataTransfer();
|
||||
const {
|
||||
accepted,
|
||||
rejected
|
||||
} = filterAccepted(files);
|
||||
if (rejected.length) {
|
||||
emit('rejected', rejected);
|
||||
}
|
||||
for (const file of accepted) {
|
||||
dataTransfer.items.add(file);
|
||||
}
|
||||
inputRef.value.files = dataTransfer.files;
|
||||
model.value = [...dataTransfer.files];
|
||||
const event = new Event('change', {
|
||||
bubbles: true
|
||||
});
|
||||
event.repack = true;
|
||||
inputRef.value.dispatchEvent(event);
|
||||
}
|
||||
function onClick() {
|
||||
inputRef.value?.click();
|
||||
}
|
||||
function onClickRemove(index) {
|
||||
const newValue = model.value.filter((_, i) => i !== index);
|
||||
model.value = newValue;
|
||||
if (newValue.length > 0 || !inputRef.value) return;
|
||||
inputRef.value.value = '';
|
||||
}
|
||||
useRender(() => {
|
||||
const hasTitle = !!(slots.title || props.title);
|
||||
const hasIcon = !!(slots.icon || props.icon);
|
||||
const hasBrowse = !!(!props.hideBrowse && (slots.browse || props.density === 'default'));
|
||||
const cardProps = VSheet.filterProps(props);
|
||||
const dividerProps = VDivider.filterProps(props);
|
||||
const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
|
||||
const expectsDirectory = attrs.webkitdirectory !== undefined && attrs.webkitdirectory !== false;
|
||||
const acceptFallback = attrs.accept ? String(attrs.accept) : undefined;
|
||||
const inputAccept = expectsDirectory ? undefined : props.filterByType ?? acceptFallback;
|
||||
const inputNode = _createElementVNode("input", _mergeProps({
|
||||
"ref": inputRef,
|
||||
"type": "file",
|
||||
"accept": inputAccept,
|
||||
"disabled": props.disabled,
|
||||
"multiple": props.multiple,
|
||||
"name": props.name,
|
||||
"onChange": onFileSelection
|
||||
}, inputAttrs), null);
|
||||
return _createElementVNode(_Fragment, null, [_createVNode(VSheet, _mergeProps({
|
||||
"ref": vSheetRef
|
||||
}, cardProps, {
|
||||
"class": ['v-file-upload', {
|
||||
'v-file-upload--clickable': !hasBrowse,
|
||||
'v-file-upload--disabled': props.disabled,
|
||||
'v-file-upload--dragging': isDragging.value
|
||||
}, densityClasses.value, props.class],
|
||||
"style": [props.style],
|
||||
"onDragleave": onDragleave,
|
||||
"onDragover": onDragover,
|
||||
"onDrop": onDrop,
|
||||
"onClick": !hasBrowse ? onClick : undefined
|
||||
}, rootAttrs), {
|
||||
default: () => [hasIcon && _createElementVNode("div", {
|
||||
"key": "icon",
|
||||
"class": "v-file-upload-icon"
|
||||
}, [!slots.icon ? _createVNode(VIcon, {
|
||||
"key": "icon-icon",
|
||||
"icon": props.icon
|
||||
}, null) : _createVNode(VDefaultsProvider, {
|
||||
"key": "icon-defaults",
|
||||
"defaults": {
|
||||
VIcon: {
|
||||
icon: props.icon
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [slots.icon()]
|
||||
})]), hasTitle && _createElementVNode("div", {
|
||||
"key": "title",
|
||||
"class": "v-file-upload-title"
|
||||
}, [slots.title?.() ?? t(props.title)]), props.density === 'default' && _createElementVNode(_Fragment, null, [_createElementVNode("div", {
|
||||
"key": "upload-divider",
|
||||
"class": "v-file-upload-divider"
|
||||
}, [slots.divider?.() ?? _createVNode(VDivider, dividerProps, {
|
||||
default: () => [t(props.dividerText)]
|
||||
})]), hasBrowse && _createElementVNode(_Fragment, null, [!slots.browse ? _createVNode(VBtn, {
|
||||
"readonly": props.disabled,
|
||||
"size": "large",
|
||||
"text": t(props.browseText),
|
||||
"variant": "tonal",
|
||||
"onClick": onClick
|
||||
}, null) : _createVNode(VDefaultsProvider, {
|
||||
"defaults": {
|
||||
VBtn: {
|
||||
readonly: props.disabled,
|
||||
size: 'large',
|
||||
text: t(props.browseText),
|
||||
variant: 'tonal'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [slots.browse({
|
||||
props: {
|
||||
onClick
|
||||
}
|
||||
})]
|
||||
})]), props.subtitle && _createElementVNode("div", {
|
||||
"class": "v-file-upload-subtitle"
|
||||
}, [props.subtitle])]), _createVNode(VOverlay, {
|
||||
"modelValue": isDragging.value,
|
||||
"contained": true,
|
||||
"scrim": props.scrim
|
||||
}, null), slots.input?.({
|
||||
inputNode
|
||||
}) ?? inputNode]
|
||||
}), model.value.length > 0 && _createElementVNode("div", {
|
||||
"class": "v-file-upload-items"
|
||||
}, [model.value.map((file, i) => {
|
||||
const slotProps = {
|
||||
file,
|
||||
props: {
|
||||
'onClick:remove': () => onClickRemove(i)
|
||||
}
|
||||
};
|
||||
return _createVNode(VDefaultsProvider, {
|
||||
"key": i,
|
||||
"defaults": {
|
||||
VFileUploadItem: {
|
||||
file,
|
||||
clearable: props.clearable,
|
||||
disabled: props.disabled,
|
||||
showSize: props.showSize
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [slots.item?.(slotProps) ?? _createVNode(VFileUploadItem, {
|
||||
"key": i,
|
||||
"onClick:remove": () => onClickRemove(i)
|
||||
}, slots)]
|
||||
});
|
||||
})])]);
|
||||
});
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VFileUpload.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+79
@@ -0,0 +1,79 @@
|
||||
@use '../../styles/tools'
|
||||
@use '../../styles/settings'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-file-upload
|
||||
padding: $file-upload-padding
|
||||
flex-direction: column
|
||||
justify-content: center
|
||||
align-items: center
|
||||
position: relative
|
||||
|
||||
&.v-sheet
|
||||
display: flex
|
||||
border-radius: 4px
|
||||
border-style: dashed
|
||||
border-width: 2px
|
||||
|
||||
&.v-file-upload--density-compact
|
||||
padding: 32px 0
|
||||
flex-direction: row
|
||||
gap: 1rem
|
||||
|
||||
.v-overlay__scrim
|
||||
pointer-events: none
|
||||
|
||||
&--disabled
|
||||
pointer-events: none
|
||||
opacity: var(--v-disabled-opacity)
|
||||
|
||||
&--dragging
|
||||
> *
|
||||
pointer-events: none
|
||||
|
||||
&--clickable
|
||||
cursor: pointer
|
||||
|
||||
input[type="file"]
|
||||
left: 0
|
||||
opacity: 0
|
||||
position: absolute
|
||||
cursor: pointer
|
||||
top: 0
|
||||
z-index: -1
|
||||
|
||||
.v-file-upload-title
|
||||
font-size: $file-upload-title-font-size
|
||||
font-weight: 600
|
||||
text-align: center
|
||||
|
||||
.v-file-upload-icon
|
||||
opacity: var(--v-medium-emphasis-opacity)
|
||||
font-size: $file-upload-icon-font-size
|
||||
margin-bottom: $file-upload-icon-margin-bottom
|
||||
|
||||
.v-file-upload--density-comfortable &
|
||||
font-size: $file-upload-icon-font-size - .5rem
|
||||
margin-bottom: $file-upload-icon-margin-bottom - .5rem
|
||||
|
||||
.v-file-upload--density-compact &
|
||||
font-size: $file-upload-icon-font-size - 1rem
|
||||
margin-bottom: $file-upload-icon-margin-bottom - 1rem
|
||||
|
||||
.v-file-upload-divider
|
||||
align-items: center
|
||||
display: flex
|
||||
margin: $file-upload-divider-margin
|
||||
justify-content: center
|
||||
width: 100%
|
||||
|
||||
.v-divider__wrapper
|
||||
max-width: 100%
|
||||
|
||||
.v-file-upload-items
|
||||
margin: $file-upload-items-margin
|
||||
|
||||
.v-file-upload-item
|
||||
&:not(:first-child)
|
||||
margin-top: 8px
|
||||
Generated
Vendored
+987
@@ -0,0 +1,987 @@
|
||||
// Types
|
||||
import type { PropType } from 'vue';
|
||||
import type { VListItemSlots } from '../../components/VList/VListItem.js';
|
||||
export type VFileUploadItemSlots = {
|
||||
clear: {
|
||||
props: {
|
||||
onClick: () => void;
|
||||
};
|
||||
};
|
||||
} & VListItemSlots;
|
||||
export declare const makeVFileUploadItemProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
border?: unknown;
|
||||
density?: unknown;
|
||||
elevation?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
color?: unknown;
|
||||
variant?: unknown;
|
||||
height?: unknown;
|
||||
maxHeight?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minHeight?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: unknown;
|
||||
href?: unknown;
|
||||
replace?: unknown;
|
||||
to?: unknown;
|
||||
exact?: unknown;
|
||||
active?: unknown;
|
||||
activeClass?: unknown;
|
||||
activeColor?: unknown;
|
||||
appendAvatar?: unknown;
|
||||
appendIcon?: unknown;
|
||||
baseColor?: unknown;
|
||||
disabled?: unknown;
|
||||
lines?: unknown;
|
||||
link?: unknown;
|
||||
nav?: unknown;
|
||||
prependAvatar?: unknown;
|
||||
prependIcon?: unknown;
|
||||
ripple?: unknown;
|
||||
slim?: unknown;
|
||||
prependGap?: unknown;
|
||||
subtitle?: unknown;
|
||||
title?: unknown;
|
||||
value?: unknown;
|
||||
onClick?: unknown;
|
||||
onClickOnce?: unknown;
|
||||
clearable?: unknown;
|
||||
file?: unknown;
|
||||
fileIcon?: unknown;
|
||||
showSize?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? PropType<any> : {
|
||||
type: PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
border: unknown extends Defaults["border"] ? {
|
||||
type: PropType<string | number | boolean>;
|
||||
default: NonNullable<string | number | boolean>;
|
||||
} : Omit<{
|
||||
type: PropType<string | number | boolean>;
|
||||
default: NonNullable<string | number | boolean>;
|
||||
}, "default" | "type"> & {
|
||||
type: 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>;
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | import("../../composables/density.js").Density>;
|
||||
default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | NonNullable<import("../../composables/density.js").Density>;
|
||||
};
|
||||
elevation: unknown extends Defaults["elevation"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator(v: any): boolean;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator(v: any): boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: 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"] ? Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | number | boolean>;
|
||||
default: NonNullable<string | number | boolean>;
|
||||
} : Omit<Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | number | boolean>;
|
||||
default: NonNullable<string | number | boolean>;
|
||||
}, "default" | "type"> & {
|
||||
type: 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: PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: 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>;
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
variant: unknown extends Defaults["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">;
|
||||
} : Omit<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">;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" | Defaults["variant"]>;
|
||||
default: unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : Defaults["variant"] | NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: 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: 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: 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: 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: PropType<unknown extends Defaults["minWidth"] ? string | number : string | number | Defaults["minWidth"]>;
|
||||
default: unknown extends Defaults["minWidth"] ? string | number : Defaults["minWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
href: unknown extends Defaults["href"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["href"] ? string : string | Defaults["href"]>;
|
||||
default: unknown extends Defaults["href"] ? string : string | Defaults["href"];
|
||||
};
|
||||
replace: unknown extends Defaults["replace"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["replace"] ? boolean : boolean | Defaults["replace"]>;
|
||||
default: unknown extends Defaults["replace"] ? boolean : boolean | Defaults["replace"];
|
||||
};
|
||||
to: unknown extends Defaults["to"] ? PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric> : {
|
||||
type: PropType<unknown extends Defaults["to"] ? string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric : string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | Defaults["to"]>;
|
||||
default: unknown extends Defaults["to"] ? string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric : Defaults["to"] | NonNullable<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
};
|
||||
exact: unknown extends Defaults["exact"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["exact"] ? boolean : boolean | Defaults["exact"]>;
|
||||
default: unknown extends Defaults["exact"] ? boolean : boolean | Defaults["exact"];
|
||||
};
|
||||
active: unknown extends Defaults["active"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"]>;
|
||||
default: unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"];
|
||||
};
|
||||
activeClass: unknown extends Defaults["activeClass"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["activeClass"] ? string : string | Defaults["activeClass"]>;
|
||||
default: unknown extends Defaults["activeClass"] ? string : string | Defaults["activeClass"];
|
||||
};
|
||||
activeColor: unknown extends Defaults["activeColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"]>;
|
||||
default: unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"];
|
||||
};
|
||||
appendAvatar: unknown extends Defaults["appendAvatar"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["appendAvatar"] ? string : string | Defaults["appendAvatar"]>;
|
||||
default: unknown extends Defaults["appendAvatar"] ? string : string | Defaults["appendAvatar"];
|
||||
};
|
||||
appendIcon: unknown extends Defaults["appendIcon"] ? PropType<import("../../composables/icons.js").IconValue> : {
|
||||
type: PropType<unknown extends Defaults["appendIcon"] ? import("../../composables/icons.js").IconValue : Defaults["appendIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["appendIcon"] ? import("../../composables/icons.js").IconValue : Defaults["appendIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
baseColor: unknown extends Defaults["baseColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"]>;
|
||||
default: unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"];
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
lines: unknown extends Defaults["lines"] ? {
|
||||
type: PropType<"one" | "three" | "two" | false>;
|
||||
default: NonNullable<"one" | "three" | "two" | false>;
|
||||
} : Omit<{
|
||||
type: PropType<"one" | "three" | "two" | false>;
|
||||
default: NonNullable<"one" | "three" | "two" | false>;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["lines"] ? "one" | "three" | "two" | false : "one" | "three" | "two" | false | Defaults["lines"]>;
|
||||
default: unknown extends Defaults["lines"] ? "one" | "three" | "two" | false : Defaults["lines"] | NonNullable<"one" | "three" | "two" | false>;
|
||||
};
|
||||
link: unknown extends Defaults["link"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["link"] ? boolean : boolean | Defaults["link"]>;
|
||||
default: unknown extends Defaults["link"] ? boolean : boolean | Defaults["link"];
|
||||
};
|
||||
nav: unknown extends Defaults["nav"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["nav"] ? boolean : boolean | Defaults["nav"]>;
|
||||
default: unknown extends Defaults["nav"] ? boolean : boolean | Defaults["nav"];
|
||||
};
|
||||
prependAvatar: unknown extends Defaults["prependAvatar"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["prependAvatar"] ? string : string | Defaults["prependAvatar"]>;
|
||||
default: unknown extends Defaults["prependAvatar"] ? string : string | Defaults["prependAvatar"];
|
||||
};
|
||||
prependIcon: unknown extends Defaults["prependIcon"] ? PropType<import("../../composables/icons.js").IconValue> : {
|
||||
type: PropType<unknown extends Defaults["prependIcon"] ? import("../../composables/icons.js").IconValue : Defaults["prependIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["prependIcon"] ? import("../../composables/icons.js").IconValue : Defaults["prependIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
ripple: unknown extends Defaults["ripple"] ? {
|
||||
type: PropType<boolean | {
|
||||
class?: string | undefined;
|
||||
keys?: string[] | undefined;
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: PropType<boolean | {
|
||||
class?: string | undefined;
|
||||
keys?: string[] | undefined;
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["ripple"] ? boolean | {
|
||||
class?: string | undefined;
|
||||
keys?: string[] | undefined;
|
||||
} | undefined : boolean | {
|
||||
class?: string | undefined;
|
||||
keys?: string[] | undefined;
|
||||
} | Defaults["ripple"] | undefined>;
|
||||
default: unknown extends Defaults["ripple"] ? boolean | {
|
||||
class?: string | undefined;
|
||||
keys?: string[] | undefined;
|
||||
} | undefined : Defaults["ripple"] | NonNullable<boolean | {
|
||||
class?: string | undefined;
|
||||
keys?: string[] | undefined;
|
||||
} | undefined>;
|
||||
};
|
||||
slim: unknown extends Defaults["slim"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["slim"] ? boolean : boolean | Defaults["slim"]>;
|
||||
default: unknown extends Defaults["slim"] ? boolean : boolean | Defaults["slim"];
|
||||
};
|
||||
prependGap: unknown extends Defaults["prependGap"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["prependGap"] ? string | number : string | number | Defaults["prependGap"]>;
|
||||
default: unknown extends Defaults["prependGap"] ? string | number : Defaults["prependGap"] | NonNullable<string | number>;
|
||||
};
|
||||
subtitle: unknown extends Defaults["subtitle"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["subtitle"] ? string | number | boolean : string | number | boolean | Defaults["subtitle"]>;
|
||||
default: unknown extends Defaults["subtitle"] ? string | number | boolean : Defaults["subtitle"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
title: unknown extends Defaults["title"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["title"] ? string | number | boolean : string | number | boolean | Defaults["title"]>;
|
||||
default: unknown extends Defaults["title"] ? string | number | boolean : Defaults["title"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
value: unknown extends Defaults["value"] ? null : {
|
||||
type: PropType<unknown extends Defaults["value"] ? any : any>;
|
||||
default: unknown extends Defaults["value"] ? any : any;
|
||||
};
|
||||
onClick: unknown extends Defaults["onClick"] ? PropType<(args_0: KeyboardEvent | MouseEvent) => void> : {
|
||||
type: PropType<unknown extends Defaults["onClick"] ? (args_0: KeyboardEvent | MouseEvent) => void : ((args_0: KeyboardEvent | MouseEvent) => void) | Defaults["onClick"]>;
|
||||
default: unknown extends Defaults["onClick"] ? (args_0: KeyboardEvent | MouseEvent) => void : ((args_0: KeyboardEvent | MouseEvent) => void) | Defaults["onClick"];
|
||||
};
|
||||
onClickOnce: unknown extends Defaults["onClickOnce"] ? PropType<(args_0: MouseEvent) => void> : {
|
||||
type: PropType<unknown extends Defaults["onClickOnce"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClickOnce"]>;
|
||||
default: unknown extends Defaults["onClickOnce"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClickOnce"];
|
||||
};
|
||||
clearable: unknown extends Defaults["clearable"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["clearable"] ? boolean : boolean | Defaults["clearable"]>;
|
||||
default: unknown extends Defaults["clearable"] ? boolean : boolean | Defaults["clearable"];
|
||||
};
|
||||
file: unknown extends Defaults["file"] ? {
|
||||
type: PropType<File>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<File>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["file"] ? File : File | Defaults["file"]>;
|
||||
default: unknown extends Defaults["file"] ? File : File | Defaults["file"];
|
||||
};
|
||||
fileIcon: unknown extends Defaults["fileIcon"] ? {
|
||||
type: StringConstructor;
|
||||
// TODO: setup up a proper aliased icon
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
// TODO: setup up a proper aliased icon
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["fileIcon"] ? string : string | Defaults["fileIcon"]>;
|
||||
default: unknown extends Defaults["fileIcon"] ? string : string | Defaults["fileIcon"];
|
||||
};
|
||||
showSize: unknown extends Defaults["showSize"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["showSize"] ? boolean : boolean | Defaults["showSize"]>;
|
||||
default: unknown extends Defaults["showSize"] ? boolean : boolean | Defaults["showSize"];
|
||||
};
|
||||
};
|
||||
export declare const VFileUploadItem: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
border: string | number | boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
disabled: boolean;
|
||||
lines: "one" | "three" | "two" | false;
|
||||
nav: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string | undefined;
|
||||
keys?: string[] | undefined;
|
||||
};
|
||||
slim: boolean;
|
||||
clearable: boolean;
|
||||
file: File;
|
||||
fileIcon: string;
|
||||
showSize: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
color?: 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;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
active?: boolean | undefined;
|
||||
activeClass?: string | undefined;
|
||||
activeColor?: string | undefined;
|
||||
appendAvatar?: string | undefined;
|
||||
appendIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
baseColor?: string | undefined;
|
||||
link?: boolean | undefined;
|
||||
prependAvatar?: string | undefined;
|
||||
prependIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
prependGap?: string | number | undefined;
|
||||
subtitle?: string | number | boolean | undefined;
|
||||
title?: string | number | boolean | undefined;
|
||||
value?: any;
|
||||
onClick?: ((args_0: KeyboardEvent | MouseEvent) => void) | undefined;
|
||||
onClickOnce?: ((args_0: MouseEvent) => void) | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
prepend?: ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
append?: ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
default?: ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
title?: ((arg: import("../../components/VList/VListItem.js").ListItemTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: ((arg: import("../../components/VList/VListItem.js").ListItemSubtitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
clear?: ((arg: {
|
||||
props: {
|
||||
onClick: () => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean | undefined;
|
||||
} | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
"v-slots"?: {
|
||||
prepend?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
append?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
default?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
title?: false | ((arg: import("../../components/VList/VListItem.js").ListItemTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSubtitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
clear?: false | ((arg: {
|
||||
props: {
|
||||
onClick: () => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:clear"?: false | ((arg: {
|
||||
props: {
|
||||
onClick: () => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:subtitle"?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSubtitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | ((arg: import("../../components/VList/VListItem.js").ListItemTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onClick?: ((e: KeyboardEvent | MouseEvent) => any) | undefined;
|
||||
"onClick:remove"?: (() => any) | undefined;
|
||||
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
"click:remove": () => true;
|
||||
click: (e: KeyboardEvent | MouseEvent) => true;
|
||||
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
border: string | number | boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
disabled: boolean;
|
||||
lines: "one" | "three" | "two" | false;
|
||||
link: boolean;
|
||||
nav: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string | undefined;
|
||||
keys?: string[] | undefined;
|
||||
} | undefined;
|
||||
slim: boolean;
|
||||
subtitle: string | number | boolean;
|
||||
title: string | number | boolean;
|
||||
clearable: boolean;
|
||||
file: File;
|
||||
fileIcon: string;
|
||||
showSize: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
prepend: (arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: (arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
default: (arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: (arg: import("../../components/VList/VListItem.js").ListItemTitleSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
subtitle: (arg: import("../../components/VList/VListItem.js").ListItemSubtitleSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
clear: (arg: {
|
||||
props: {
|
||||
onClick: () => void;
|
||||
};
|
||||
}) => 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;
|
||||
border: string | number | boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
disabled: boolean;
|
||||
lines: "one" | "three" | "two" | false;
|
||||
nav: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string | undefined;
|
||||
keys?: string[] | undefined;
|
||||
};
|
||||
slim: boolean;
|
||||
clearable: boolean;
|
||||
file: File;
|
||||
fileIcon: string;
|
||||
showSize: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
color?: 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;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
active?: boolean | undefined;
|
||||
activeClass?: string | undefined;
|
||||
activeColor?: string | undefined;
|
||||
appendAvatar?: string | undefined;
|
||||
appendIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
baseColor?: string | undefined;
|
||||
link?: boolean | undefined;
|
||||
prependAvatar?: string | undefined;
|
||||
prependIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
prependGap?: string | number | undefined;
|
||||
subtitle?: string | number | boolean | undefined;
|
||||
title?: string | number | boolean | undefined;
|
||||
value?: any;
|
||||
onClick?: ((args_0: KeyboardEvent | MouseEvent) => void) | undefined;
|
||||
onClickOnce?: ((args_0: MouseEvent) => void) | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
prepend?: ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
append?: ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
default?: ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
title?: ((arg: import("../../components/VList/VListItem.js").ListItemTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: ((arg: import("../../components/VList/VListItem.js").ListItemSubtitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
clear?: ((arg: {
|
||||
props: {
|
||||
onClick: () => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean | undefined;
|
||||
} | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
"v-slots"?: {
|
||||
prepend?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
append?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
default?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
title?: false | ((arg: import("../../components/VList/VListItem.js").ListItemTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSubtitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
clear?: false | ((arg: {
|
||||
props: {
|
||||
onClick: () => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:clear"?: false | ((arg: {
|
||||
props: {
|
||||
onClick: () => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:subtitle"?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSubtitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | ((arg: import("../../components/VList/VListItem.js").ListItemTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onClick?: ((e: KeyboardEvent | MouseEvent) => any) | undefined;
|
||||
"onClick:remove"?: (() => any) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
border: string | number | boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
disabled: boolean;
|
||||
lines: "one" | "three" | "two" | false;
|
||||
link: boolean;
|
||||
nav: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string | undefined;
|
||||
keys?: string[] | undefined;
|
||||
} | undefined;
|
||||
slim: boolean;
|
||||
subtitle: string | number | boolean;
|
||||
title: string | number | boolean;
|
||||
clearable: boolean;
|
||||
file: File;
|
||||
fileIcon: string;
|
||||
showSize: boolean;
|
||||
}>;
|
||||
__isFragment?: undefined;
|
||||
__isTeleport?: undefined;
|
||||
__isSuspense?: undefined;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
border: string | number | boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
disabled: boolean;
|
||||
lines: "one" | "three" | "two" | false;
|
||||
nav: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string | undefined;
|
||||
keys?: string[] | undefined;
|
||||
};
|
||||
slim: boolean;
|
||||
clearable: boolean;
|
||||
file: File;
|
||||
fileIcon: string;
|
||||
showSize: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
color?: 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;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
active?: boolean | undefined;
|
||||
activeClass?: string | undefined;
|
||||
activeColor?: string | undefined;
|
||||
appendAvatar?: string | undefined;
|
||||
appendIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
baseColor?: string | undefined;
|
||||
link?: boolean | undefined;
|
||||
prependAvatar?: string | undefined;
|
||||
prependIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
prependGap?: string | number | undefined;
|
||||
subtitle?: string | number | boolean | undefined;
|
||||
title?: string | number | boolean | undefined;
|
||||
value?: any;
|
||||
onClick?: ((args_0: KeyboardEvent | MouseEvent) => void) | undefined;
|
||||
onClickOnce?: ((args_0: MouseEvent) => void) | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
prepend?: ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
append?: ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
default?: ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
title?: ((arg: import("../../components/VList/VListItem.js").ListItemTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: ((arg: import("../../components/VList/VListItem.js").ListItemSubtitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
clear?: ((arg: {
|
||||
props: {
|
||||
onClick: () => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean | undefined;
|
||||
} | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
"v-slots"?: {
|
||||
prepend?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
append?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
default?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
title?: false | ((arg: import("../../components/VList/VListItem.js").ListItemTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSubtitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
clear?: false | ((arg: {
|
||||
props: {
|
||||
onClick: () => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:clear"?: false | ((arg: {
|
||||
props: {
|
||||
onClick: () => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:subtitle"?: false | ((arg: import("../../components/VList/VListItem.js").ListItemSubtitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | ((arg: import("../../components/VList/VListItem.js").ListItemTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onClick?: ((e: KeyboardEvent | MouseEvent) => any) | undefined;
|
||||
"onClick:remove"?: (() => any) | undefined;
|
||||
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
"click:remove": () => true;
|
||||
click: (e: KeyboardEvent | MouseEvent) => true;
|
||||
}, string, {
|
||||
style: import("vue").StyleValue;
|
||||
border: string | number | boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
disabled: boolean;
|
||||
lines: "one" | "three" | "two" | false;
|
||||
link: boolean;
|
||||
nav: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string | undefined;
|
||||
keys?: string[] | undefined;
|
||||
} | undefined;
|
||||
slim: boolean;
|
||||
subtitle: string | number | boolean;
|
||||
title: string | number | boolean;
|
||||
clearable: boolean;
|
||||
file: File;
|
||||
fileIcon: string;
|
||||
showSize: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
prepend: (arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: (arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
default: (arg: import("../../components/VList/VListItem.js").ListItemSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: (arg: import("../../components/VList/VListItem.js").ListItemTitleSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
subtitle: (arg: import("../../components/VList/VListItem.js").ListItemSubtitleSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
clear: (arg: {
|
||||
props: {
|
||||
onClick: () => void;
|
||||
};
|
||||
}) => 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: PropType<any>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: {
|
||||
type: PropType<string | number | boolean>;
|
||||
default: NonNullable<string | number | boolean>;
|
||||
};
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator(v: any): boolean;
|
||||
};
|
||||
rounded: Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | number | boolean>;
|
||||
default: NonNullable<string | number | boolean>;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
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">;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
href: StringConstructor;
|
||||
replace: BooleanConstructor;
|
||||
to: PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
exact: BooleanConstructor;
|
||||
active: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
activeClass: StringConstructor;
|
||||
activeColor: StringConstructor;
|
||||
appendAvatar: StringConstructor;
|
||||
appendIcon: PropType<import("../../composables/icons.js").IconValue>;
|
||||
baseColor: StringConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
lines: {
|
||||
type: PropType<"one" | "three" | "two" | false>;
|
||||
default: NonNullable<"one" | "three" | "two" | false>;
|
||||
};
|
||||
link: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
nav: BooleanConstructor;
|
||||
prependAvatar: StringConstructor;
|
||||
prependIcon: PropType<import("../../composables/icons.js").IconValue>;
|
||||
ripple: {
|
||||
type: PropType<boolean | {
|
||||
class?: string | undefined;
|
||||
keys?: string[] | undefined;
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
};
|
||||
slim: BooleanConstructor;
|
||||
prependGap: (NumberConstructor | StringConstructor)[];
|
||||
subtitle: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
title: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
value: null;
|
||||
onClick: PropType<(args_0: KeyboardEvent | MouseEvent) => void>;
|
||||
onClickOnce: PropType<(args_0: MouseEvent) => void>;
|
||||
clearable: BooleanConstructor;
|
||||
file: {
|
||||
type: PropType<File>;
|
||||
default: null;
|
||||
};
|
||||
fileIcon: {
|
||||
type: StringConstructor;
|
||||
// TODO: setup up a proper aliased icon
|
||||
default: string;
|
||||
};
|
||||
showSize: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<any>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: {
|
||||
type: PropType<string | number | boolean>;
|
||||
default: NonNullable<string | number | boolean>;
|
||||
};
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator(v: any): boolean;
|
||||
};
|
||||
rounded: Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | number | boolean>;
|
||||
default: NonNullable<string | number | boolean>;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
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">;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
href: StringConstructor;
|
||||
replace: BooleanConstructor;
|
||||
to: PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
exact: BooleanConstructor;
|
||||
active: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
activeClass: StringConstructor;
|
||||
activeColor: StringConstructor;
|
||||
appendAvatar: StringConstructor;
|
||||
appendIcon: PropType<import("../../composables/icons.js").IconValue>;
|
||||
baseColor: StringConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
lines: {
|
||||
type: PropType<"one" | "three" | "two" | false>;
|
||||
default: NonNullable<"one" | "three" | "two" | false>;
|
||||
};
|
||||
link: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
nav: BooleanConstructor;
|
||||
prependAvatar: StringConstructor;
|
||||
prependIcon: PropType<import("../../composables/icons.js").IconValue>;
|
||||
ripple: {
|
||||
type: PropType<boolean | {
|
||||
class?: string | undefined;
|
||||
keys?: string[] | undefined;
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
};
|
||||
slim: BooleanConstructor;
|
||||
prependGap: (NumberConstructor | StringConstructor)[];
|
||||
subtitle: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
title: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
value: null;
|
||||
onClick: PropType<(args_0: KeyboardEvent | MouseEvent) => void>;
|
||||
onClickOnce: PropType<(args_0: MouseEvent) => void>;
|
||||
clearable: BooleanConstructor;
|
||||
file: {
|
||||
type: PropType<File>;
|
||||
default: null;
|
||||
};
|
||||
fileIcon: {
|
||||
type: StringConstructor;
|
||||
// TODO: setup up a proper aliased icon
|
||||
default: string;
|
||||
};
|
||||
showSize: BooleanConstructor;
|
||||
}>>;
|
||||
export type VFileUploadItem = InstanceType<typeof VFileUploadItem>;
|
||||
Generated
Vendored
+97
@@ -0,0 +1,97 @@
|
||||
import { Fragment as _Fragment, createVNode as _createVNode, createElementVNode as _createElementVNode, mergeProps as _mergeProps } from "vue";
|
||||
// Components
|
||||
import { VAvatar } from "../../components/VAvatar/VAvatar.js";
|
||||
import { VBtn } from "../../components/VBtn/VBtn.js";
|
||||
import { VDefaultsProvider } from "../../components/VDefaultsProvider/VDefaultsProvider.js";
|
||||
import { makeVListItemProps, VListItem } from "../../components/VList/VListItem.js"; // Utilities
|
||||
import { computed, ref, watchEffect } from 'vue';
|
||||
import { genericComponent, humanReadableFileSize, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVFileUploadItemProps = propsFactory({
|
||||
clearable: Boolean,
|
||||
file: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
fileIcon: {
|
||||
type: String,
|
||||
// TODO: setup up a proper aliased icon
|
||||
default: 'mdi-file-document'
|
||||
},
|
||||
showSize: Boolean,
|
||||
...makeVListItemProps({
|
||||
border: true,
|
||||
rounded: true,
|
||||
lines: 'two'
|
||||
})
|
||||
}, 'VFileUploadItem');
|
||||
export const VFileUploadItem = genericComponent()({
|
||||
name: 'VFileUploadItem',
|
||||
props: makeVFileUploadItemProps(),
|
||||
emits: {
|
||||
'click:remove': () => true,
|
||||
click: e => true
|
||||
},
|
||||
setup(props, _ref) {
|
||||
let {
|
||||
emit,
|
||||
slots
|
||||
} = _ref;
|
||||
const preview = ref();
|
||||
const base = computed(() => typeof props.showSize !== 'boolean' ? props.showSize : undefined);
|
||||
function onClickRemove() {
|
||||
emit('click:remove');
|
||||
}
|
||||
watchEffect(() => {
|
||||
preview.value = props.file?.type.startsWith('image') ? URL.createObjectURL(props.file) : undefined;
|
||||
});
|
||||
useRender(() => {
|
||||
const listItemProps = VListItem.filterProps(props);
|
||||
return _createVNode(VListItem, _mergeProps(listItemProps, {
|
||||
"class": ['v-file-upload-item', props.class],
|
||||
"title": props.title ?? props.file?.name,
|
||||
"subtitle": props.showSize ? humanReadableFileSize(props.file?.size, base.value) : props.file?.type,
|
||||
"style": props.style
|
||||
}), {
|
||||
...slots,
|
||||
title: slots.title ?? (() => props?.title ?? props.file?.name),
|
||||
prepend: slotProps => _createElementVNode(_Fragment, null, [!slots.prepend ? _createVNode(VAvatar, {
|
||||
"icon": props.fileIcon,
|
||||
"image": preview.value,
|
||||
"rounded": true
|
||||
}, null) : _createVNode(VDefaultsProvider, {
|
||||
"defaults": {
|
||||
VAvatar: {
|
||||
image: preview.value,
|
||||
icon: !preview.value ? props.fileIcon : undefined,
|
||||
rounded: true
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [slots.prepend?.(slotProps) ?? _createVNode(VAvatar, null, null)]
|
||||
})]),
|
||||
append: slotProps => _createElementVNode(_Fragment, null, [props.clearable && _createElementVNode(_Fragment, null, [!slots.clear ? _createVNode(VBtn, {
|
||||
"icon": "$clear",
|
||||
"density": "comfortable",
|
||||
"variant": "text",
|
||||
"onClick": onClickRemove
|
||||
}, null) : _createVNode(VDefaultsProvider, {
|
||||
"defaults": {
|
||||
VBtn: {
|
||||
icon: '$clear',
|
||||
density: 'comfortable',
|
||||
variant: 'text'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [slots.clear?.({
|
||||
...slotProps,
|
||||
props: {
|
||||
onClick: onClickRemove
|
||||
}
|
||||
}) ?? _createVNode(VBtn, null, null)]
|
||||
})]), slots.append?.(slotProps)])
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VFileUploadItem.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+12
@@ -0,0 +1,12 @@
|
||||
@use '../../styles/tools';
|
||||
@use '../../styles/settings';
|
||||
|
||||
$file-upload-title-font-size: 1.5rem !default;
|
||||
$file-upload-padding: 64px 16px !default;
|
||||
$file-upload-border-radius: 4px !default;
|
||||
$file-upload-border-width: 2px !default;
|
||||
$file-upload-title-font-weight: 600 !default;
|
||||
$file-upload-icon-font-size: 3rem !default;
|
||||
$file-upload-icon-margin-bottom: 1rem !default;
|
||||
$file-upload-divider-margin: 32px 0 !default;
|
||||
$file-upload-items-margin: 16px 0 !default;
|
||||
Generated
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
export { VFileUpload } from './VFileUpload.js';
|
||||
export { VFileUploadItem } from './VFileUploadItem.js';
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export { VFileUpload } from "./VFileUpload.js";
|
||||
export { VFileUploadItem } from "./VFileUploadItem.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VFileUpload","VFileUploadItem"],"sources":["../../../src/labs/VFileUpload/index.ts"],"sourcesContent":["export { VFileUpload } from './VFileUpload'\nexport { VFileUploadItem } from './VFileUploadItem'\n"],"mappings":"SAASA,WAAW;AAAA,SACXC,eAAe","ignoreList":[]}
|
||||
Reference in New Issue
Block a user