routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+63
@@ -0,0 +1,63 @@
|
||||
@layer vuetify-components {
|
||||
.v-empty-state {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 100%;
|
||||
padding: 16px;
|
||||
}
|
||||
.v-empty-state--start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.v-empty-state--center {
|
||||
align-items: center;
|
||||
}
|
||||
.v-empty-state--end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.v-empty-state__media {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.v-empty-state__media .v-icon {
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-medium-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-empty-state__headline {
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-medium-emphasis-opacity) * 100%), transparent);
|
||||
font-size: 3.5625rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.1228070175;
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.v-empty-state--mobile .v-empty-state__headline {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.v-empty-state__title {
|
||||
font-size: 1.375rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.2727272727;
|
||||
margin-bottom: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
.v-empty-state__text {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.4285714286;
|
||||
padding: 0 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.v-empty-state__content {
|
||||
padding: 24px 0;
|
||||
}
|
||||
.v-empty-state__actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
.v-empty-state__action-btn.v-btn {
|
||||
background-color: initial;
|
||||
color: initial;
|
||||
}
|
||||
}
|
||||
+505
@@ -0,0 +1,505 @@
|
||||
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { PropType } from 'vue';
|
||||
export type VEmptyStateSlots = {
|
||||
actions: {
|
||||
props: {
|
||||
onClick: (e: Event) => void;
|
||||
};
|
||||
};
|
||||
default: never;
|
||||
headline: never;
|
||||
title: never;
|
||||
media: never;
|
||||
text: never;
|
||||
};
|
||||
export declare const makeVEmptyStateProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
size?: unknown;
|
||||
height?: unknown;
|
||||
maxHeight?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minHeight?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: unknown;
|
||||
actionText?: unknown;
|
||||
bgColor?: unknown;
|
||||
color?: unknown;
|
||||
icon?: unknown;
|
||||
image?: unknown;
|
||||
justify?: unknown;
|
||||
headline?: unknown;
|
||||
title?: unknown;
|
||||
text?: unknown;
|
||||
textWidth?: unknown;
|
||||
href?: unknown;
|
||||
to?: 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>;
|
||||
};
|
||||
size: unknown extends Defaults["size"] ? Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | number | undefined>;
|
||||
default: NonNullable<string | number> | undefined;
|
||||
} : Omit<Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | number | undefined>;
|
||||
default: NonNullable<string | number> | undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["size"] ? string | number | undefined : string | number | Defaults["size"] | undefined>;
|
||||
default: unknown extends Defaults["size"] ? string | number | undefined : Defaults["size"] | NonNullable<string | number | undefined>;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
actionText: unknown extends Defaults["actionText"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["actionText"] ? string : string | Defaults["actionText"]>;
|
||||
default: unknown extends Defaults["actionText"] ? string : string | Defaults["actionText"];
|
||||
};
|
||||
bgColor: unknown extends Defaults["bgColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"]>;
|
||||
default: unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"];
|
||||
};
|
||||
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"];
|
||||
};
|
||||
icon: unknown extends Defaults["icon"] ? PropType<IconValue> : {
|
||||
type: PropType<unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | IconValue>;
|
||||
default: unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | NonNullable<IconValue>;
|
||||
};
|
||||
image: unknown extends Defaults["image"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["image"] ? string : string | Defaults["image"]>;
|
||||
default: unknown extends Defaults["image"] ? string : string | Defaults["image"];
|
||||
};
|
||||
justify: unknown extends Defaults["justify"] ? {
|
||||
type: PropType<'start' | 'center' | 'end'>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<'start' | 'center' | 'end'>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["justify"] ? "center" | "end" | "start" : "center" | "end" | "start" | Defaults["justify"]>;
|
||||
default: unknown extends Defaults["justify"] ? "center" | "end" | "start" : Defaults["justify"] | NonNullable<"center" | "end" | "start">;
|
||||
};
|
||||
headline: unknown extends Defaults["headline"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["headline"] ? string : string | Defaults["headline"]>;
|
||||
default: unknown extends Defaults["headline"] ? string : string | Defaults["headline"];
|
||||
};
|
||||
title: unknown extends Defaults["title"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["title"] ? string : string | Defaults["title"]>;
|
||||
default: unknown extends Defaults["title"] ? string : string | Defaults["title"];
|
||||
};
|
||||
text: unknown extends Defaults["text"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["text"] ? string : string | Defaults["text"]>;
|
||||
default: unknown extends Defaults["text"] ? string : string | Defaults["text"];
|
||||
};
|
||||
textWidth: unknown extends Defaults["textWidth"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["textWidth"] ? string | number : string | number | Defaults["textWidth"]>;
|
||||
default: unknown extends Defaults["textWidth"] ? string | number : Defaults["textWidth"] | 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"];
|
||||
};
|
||||
to: unknown extends Defaults["to"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["to"] ? string : string | Defaults["to"]>;
|
||||
default: unknown extends Defaults["to"] ? string : string | Defaults["to"];
|
||||
};
|
||||
};
|
||||
export declare const VEmptyState: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
size: string | number;
|
||||
justify: "center" | "end" | "start";
|
||||
textWidth: string | number;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
actionText?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
image?: string | undefined;
|
||||
headline?: string | undefined;
|
||||
title?: string | undefined;
|
||||
text?: string | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
actions?: ((arg: {
|
||||
props: {
|
||||
onClick: (e: Event) => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
headline?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
media?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
actions?: false | ((arg: {
|
||||
props: {
|
||||
onClick: (e: Event) => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
headline?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
media?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:actions"?: false | ((arg: {
|
||||
props: {
|
||||
onClick: (e: Event) => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:headline"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:media"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onClick:action"?: ((e: Event) => any) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'click:action': (e: Event) => true;
|
||||
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
size: string | number | undefined;
|
||||
justify: "center" | "end" | "start";
|
||||
textWidth: string | number;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
actions: (arg: {
|
||||
props: {
|
||||
onClick: (e: Event) => void;
|
||||
};
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
headline: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
media: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
text: () => 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;
|
||||
size: string | number;
|
||||
justify: "center" | "end" | "start";
|
||||
textWidth: string | number;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
actionText?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
image?: string | undefined;
|
||||
headline?: string | undefined;
|
||||
title?: string | undefined;
|
||||
text?: string | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
actions?: ((arg: {
|
||||
props: {
|
||||
onClick: (e: Event) => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
headline?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
media?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
actions?: false | ((arg: {
|
||||
props: {
|
||||
onClick: (e: Event) => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
headline?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
media?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:actions"?: false | ((arg: {
|
||||
props: {
|
||||
onClick: (e: Event) => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:headline"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:media"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onClick:action"?: ((e: Event) => any) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
size: string | number | undefined;
|
||||
justify: "center" | "end" | "start";
|
||||
textWidth: string | number;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
size: string | number;
|
||||
justify: "center" | "end" | "start";
|
||||
textWidth: string | number;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
actionText?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
image?: string | undefined;
|
||||
headline?: string | undefined;
|
||||
title?: string | undefined;
|
||||
text?: string | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
actions?: ((arg: {
|
||||
props: {
|
||||
onClick: (e: Event) => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
headline?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
media?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
actions?: false | ((arg: {
|
||||
props: {
|
||||
onClick: (e: Event) => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
headline?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
media?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:actions"?: false | ((arg: {
|
||||
props: {
|
||||
onClick: (e: Event) => void;
|
||||
};
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:headline"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:media"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onClick:action"?: ((e: Event) => any) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'click:action': (e: Event) => true;
|
||||
}, string, {
|
||||
style: import("vue").StyleValue;
|
||||
size: string | number | undefined;
|
||||
justify: "center" | "end" | "start";
|
||||
textWidth: string | number;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
actions: (arg: {
|
||||
props: {
|
||||
onClick: (e: Event) => void;
|
||||
};
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
headline: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
media: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
text: () => 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<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
size: Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | number | undefined>;
|
||||
default: NonNullable<string | number> | undefined;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
actionText: StringConstructor;
|
||||
bgColor: StringConstructor;
|
||||
color: StringConstructor;
|
||||
icon: PropType<IconValue>;
|
||||
image: StringConstructor;
|
||||
justify: {
|
||||
type: PropType<'start' | 'center' | 'end'>;
|
||||
default: string;
|
||||
};
|
||||
headline: StringConstructor;
|
||||
title: StringConstructor;
|
||||
text: StringConstructor;
|
||||
textWidth: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
href: StringConstructor;
|
||||
to: StringConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
size: Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | number | undefined>;
|
||||
default: NonNullable<string | number> | undefined;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
actionText: StringConstructor;
|
||||
bgColor: StringConstructor;
|
||||
color: StringConstructor;
|
||||
icon: PropType<IconValue>;
|
||||
image: StringConstructor;
|
||||
justify: {
|
||||
type: PropType<'start' | 'center' | 'end'>;
|
||||
default: string;
|
||||
};
|
||||
headline: StringConstructor;
|
||||
title: StringConstructor;
|
||||
text: StringConstructor;
|
||||
textWidth: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
href: StringConstructor;
|
||||
to: StringConstructor;
|
||||
}>>;
|
||||
export type VEmptyState = InstanceType<typeof VEmptyState>;
|
||||
+150
@@ -0,0 +1,150 @@
|
||||
import { Fragment as _Fragment, createVNode as _createVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VEmptyState.css";
|
||||
|
||||
// Components
|
||||
import { VBtn } from "../VBtn/index.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
|
||||
import { VIcon } from "../VIcon/index.js";
|
||||
import { VImg } from "../VImg/index.js"; // Composables
|
||||
import { useBackgroundColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDimensionProps, useDimension } from "../../composables/dimensions.js";
|
||||
import { useDisplay } from "../../composables/display.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { makeSizeProps } from "../../composables/size.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
|
||||
import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
// Types
|
||||
export const makeVEmptyStateProps = propsFactory({
|
||||
actionText: String,
|
||||
bgColor: String,
|
||||
color: String,
|
||||
icon: IconValue,
|
||||
image: String,
|
||||
justify: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
headline: String,
|
||||
title: String,
|
||||
text: String,
|
||||
textWidth: {
|
||||
type: [Number, String],
|
||||
default: 500
|
||||
},
|
||||
href: String,
|
||||
to: String,
|
||||
...makeComponentProps(),
|
||||
...makeDimensionProps(),
|
||||
...makeSizeProps({
|
||||
size: undefined
|
||||
}),
|
||||
...makeThemeProps()
|
||||
}, 'VEmptyState');
|
||||
export const VEmptyState = genericComponent()({
|
||||
name: 'VEmptyState',
|
||||
props: makeVEmptyStateProps(),
|
||||
emits: {
|
||||
'click:action': e => true
|
||||
},
|
||||
setup(props, {
|
||||
emit,
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
} = useBackgroundColor(() => props.bgColor);
|
||||
const {
|
||||
dimensionStyles
|
||||
} = useDimension(props);
|
||||
const {
|
||||
displayClasses
|
||||
} = useDisplay();
|
||||
function onClickAction(e) {
|
||||
emit('click:action', e);
|
||||
}
|
||||
useRender(() => {
|
||||
const hasActions = !!(slots.actions || props.actionText);
|
||||
const hasHeadline = !!(slots.headline || props.headline);
|
||||
const hasTitle = !!(slots.title || props.title);
|
||||
const hasText = !!(slots.text || props.text);
|
||||
const hasMedia = !!(slots.media || props.image || props.icon);
|
||||
const size = props.size || (props.image ? 200 : 96);
|
||||
return _createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-empty-state', {
|
||||
[`v-empty-state--${props.justify}`]: true
|
||||
}, themeClasses.value, backgroundColorClasses.value, displayClasses.value, props.class]),
|
||||
"style": _normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, props.style])
|
||||
}, [hasMedia && _createElementVNode("div", {
|
||||
"key": "media",
|
||||
"class": "v-empty-state__media"
|
||||
}, [!slots.media ? _createElementVNode(_Fragment, null, [props.image ? _createVNode(VImg, {
|
||||
"key": "image",
|
||||
"src": props.image,
|
||||
"height": size
|
||||
}, null) : props.icon ? _createVNode(VIcon, {
|
||||
"key": "icon",
|
||||
"color": props.color,
|
||||
"size": size,
|
||||
"icon": props.icon
|
||||
}, null) : undefined]) : _createVNode(VDefaultsProvider, {
|
||||
"key": "media-defaults",
|
||||
"defaults": {
|
||||
VImg: {
|
||||
src: props.image,
|
||||
height: size
|
||||
},
|
||||
VIcon: {
|
||||
size,
|
||||
icon: props.icon
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [slots.media()]
|
||||
})]), hasHeadline && _createElementVNode("div", {
|
||||
"key": "headline",
|
||||
"class": "v-empty-state__headline"
|
||||
}, [slots.headline?.() ?? props.headline]), hasTitle && _createElementVNode("div", {
|
||||
"key": "title",
|
||||
"class": "v-empty-state__title"
|
||||
}, [slots.title?.() ?? props.title]), hasText && _createElementVNode("div", {
|
||||
"key": "text",
|
||||
"class": "v-empty-state__text",
|
||||
"style": {
|
||||
maxWidth: convertToUnit(props.textWidth)
|
||||
}
|
||||
}, [slots.text?.() ?? props.text]), slots.default && _createElementVNode("div", {
|
||||
"key": "content",
|
||||
"class": "v-empty-state__content"
|
||||
}, [slots.default()]), hasActions && _createElementVNode("div", {
|
||||
"key": "actions",
|
||||
"class": "v-empty-state__actions"
|
||||
}, [_createVNode(VDefaultsProvider, {
|
||||
"defaults": {
|
||||
VBtn: {
|
||||
class: 'v-empty-state__action-btn',
|
||||
color: props.color ?? 'surface-variant',
|
||||
href: props.href,
|
||||
text: props.actionText,
|
||||
to: props.to
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [slots.actions?.({
|
||||
props: {
|
||||
onClick: onClickAction
|
||||
}
|
||||
}) ?? _createVNode(VBtn, {
|
||||
"onClick": onClickAction
|
||||
}, null)]
|
||||
})])]);
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VEmptyState.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+64
@@ -0,0 +1,64 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-empty-state
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: center
|
||||
min-height: $empty-state-min-height
|
||||
padding: $empty-state-padding
|
||||
|
||||
&--start
|
||||
align-items: flex-start
|
||||
|
||||
&--center
|
||||
align-items: center
|
||||
|
||||
&--end
|
||||
align-items: flex-end
|
||||
|
||||
.v-empty-state__media
|
||||
text-align: center
|
||||
width: 100%
|
||||
|
||||
.v-icon
|
||||
color: $empty-state-media-icon-color
|
||||
|
||||
.v-empty-state__headline
|
||||
color: $empty-state-headline-color
|
||||
font-size: $empty-state-headline-font-size
|
||||
font-weight: $empty-state-headline-font-weight
|
||||
line-height: $empty-state-headline-line-height
|
||||
text-align: center
|
||||
margin-bottom: $empty-state-headline-margin-bottom
|
||||
|
||||
.v-empty-state--mobile &
|
||||
font-size: $empty-state-headline-mobile-font-size
|
||||
|
||||
.v-empty-state__title
|
||||
font-size: $empty-state-title-font-size
|
||||
font-weight: $empty-state-title-font-weight
|
||||
line-height: $empty-state-title-line-height
|
||||
margin-bottom: $empty-state-title-margin-bottom
|
||||
text-align: center
|
||||
|
||||
.v-empty-state__text
|
||||
font-size: $empty-state-text-font-size
|
||||
font-weight: $empty-state-text-font-weight
|
||||
line-height: $empty-state-text-line-height
|
||||
padding: $empty-state-text-padding
|
||||
text-align: center
|
||||
|
||||
.v-empty-state__content
|
||||
padding: $empty-state-content-padding
|
||||
|
||||
.v-empty-state__actions
|
||||
display: flex
|
||||
gap: $empty-state-actions-gap
|
||||
padding: $empty-state-actions-padding
|
||||
|
||||
.v-empty-state__action-btn.v-btn
|
||||
background-color: $empty-state-actions-btn-background-color
|
||||
color: $empty-state-actions-btn-color
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
@use '../../styles/settings';
|
||||
@use "../../styles/tools/functions";
|
||||
|
||||
$empty-state-actions-btn-background-color: initial !default;
|
||||
$empty-state-actions-btn-color: initial !default;
|
||||
$empty-state-actions-gap: 8px !default;
|
||||
$empty-state-actions-padding: 16px !default;
|
||||
$empty-state-content-padding: 24px 0 !default;
|
||||
$empty-state-headline-color: functions.theme-color('on-surface', var(--v-medium-emphasis-opacity)) !default;
|
||||
$empty-state-headline-font-size: functions.map-deep-get(settings.$typography, 'display-large', 'size') !default;
|
||||
$empty-state-headline-font-weight: functions.map-deep-get(settings.$typography, 'display-large', 'weight') !default;
|
||||
$empty-state-headline-line-height: functions.map-deep-get(settings.$typography, 'display-large', 'line-height') !default;
|
||||
$empty-state-headline-margin-bottom: 8px !default;
|
||||
$empty-state-headline-mobile-font-size: functions.map-deep-get(settings.$typography, 'headline-large', 'size') !default;
|
||||
$empty-state-image-padding: 16px !default;
|
||||
$empty-state-min-height: 100% !default;
|
||||
$empty-state-media-icon-color: functions.theme-color('on-surface', var(--v-medium-emphasis-opacity)) !default;
|
||||
$empty-state-padding: 16px !default;
|
||||
$empty-state-text-font-size: functions.map-deep-get(settings.$typography, 'body-medium', 'size') !default;
|
||||
$empty-state-text-font-weight: functions.map-deep-get(settings.$typography, 'body-medium', 'weight') !default;
|
||||
$empty-state-text-line-height: functions.map-deep-get(settings.$typography, 'body-medium', 'line-height') !default;
|
||||
$empty-state-text-padding: 0 16px !default;
|
||||
$empty-state-title-font-size: functions.map-deep-get(settings.$typography, 'title-large', 'size') !default;
|
||||
$empty-state-title-font-weight: functions.map-deep-get(settings.$typography, 'title-large', 'weight') !default;
|
||||
$empty-state-title-line-height: functions.map-deep-get(settings.$typography, 'title-large', 'line-height') !default;
|
||||
$empty-state-title-margin-bottom: 4px !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VEmptyState } from './VEmptyState.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VEmptyState } from "./VEmptyState.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VEmptyState"],"sources":["../../../src/components/VEmptyState/index.ts"],"sourcesContent":["export { VEmptyState } from './VEmptyState'\n"],"mappings":"SAASA,WAAW","ignoreList":[]}
|
||||
Reference in New Issue
Block a user