routie dev init since i didn't adhere to any proper guidance up until now

This commit is contained in:
2026-04-29 22:27:29 -06:00
commit e1dabb71e2
15301 changed files with 3562618 additions and 0 deletions
@@ -0,0 +1,246 @@
@layer vuetify-components {
.v-skeleton-loader {
align-items: center;
background: rgb(var(--v-theme-surface));
border-radius: 4px;
display: flex;
flex-wrap: wrap;
position: relative;
vertical-align: top;
}
.v-skeleton-loader__actions {
justify-content: end;
}
.v-skeleton-loader .v-skeleton-loader__ossein {
height: 100%;
}
.v-skeleton-loader .v-skeleton-loader__avatar,
.v-skeleton-loader .v-skeleton-loader__button,
.v-skeleton-loader .v-skeleton-loader__chip,
.v-skeleton-loader .v-skeleton-loader__divider,
.v-skeleton-loader .v-skeleton-loader__heading,
.v-skeleton-loader .v-skeleton-loader__image,
.v-skeleton-loader .v-skeleton-loader__ossein,
.v-skeleton-loader .v-skeleton-loader__text {
background: color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-border-opacity) * 100%), transparent);
}
@media (forced-colors: active) {
.v-skeleton-loader .v-skeleton-loader__avatar,
.v-skeleton-loader .v-skeleton-loader__button,
.v-skeleton-loader .v-skeleton-loader__chip,
.v-skeleton-loader .v-skeleton-loader__divider,
.v-skeleton-loader .v-skeleton-loader__heading,
.v-skeleton-loader .v-skeleton-loader__image,
.v-skeleton-loader .v-skeleton-loader__ossein,
.v-skeleton-loader .v-skeleton-loader__text {
background: canvastext;
}
}
.v-skeleton-loader .v-skeleton-loader__list-item,
.v-skeleton-loader .v-skeleton-loader__list-item-avatar,
.v-skeleton-loader .v-skeleton-loader__list-item-text,
.v-skeleton-loader .v-skeleton-loader__list-item-two-line,
.v-skeleton-loader .v-skeleton-loader__list-item-avatar-two-line,
.v-skeleton-loader .v-skeleton-loader__list-item-three-line,
.v-skeleton-loader .v-skeleton-loader__list-item-avatar-three-line {
border-radius: 4px;
}
.v-skeleton-loader__bone {
align-items: center;
border-radius: inherit;
display: flex;
flex: 1 1 100%;
flex-wrap: wrap;
overflow: hidden;
position: relative;
}
.v-skeleton-loader__bone::after {
animation: loading 1.5s infinite;
background: linear-gradient(90deg, color-mix(in srgb, rgb(var(--v-theme-surface)) 0%, transparent), color-mix(in srgb, rgb(var(--v-theme-surface)) 30%, transparent), color-mix(in srgb, rgb(var(--v-theme-surface)) 0%, transparent));
transform: translateX(-100%);
contain: content;
will-change: transform;
z-index: 1;
}
.v-skeleton-loader__bone::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (forced-colors: active) and (pointer: fine) {
.v-skeleton-loader__bone {
cursor: progress;
}
}
.v-skeleton-loader__avatar {
border-radius: 50%;
flex: 0 1 auto;
margin: 8px 16px;
max-height: 48px;
min-height: 48px;
height: 48px;
max-width: 48px;
min-width: 48px;
width: 48px;
}
.v-skeleton-loader__avatar + .v-skeleton-loader__bone {
flex: 1 1 auto;
margin-inline-start: 0;
}
.v-skeleton-loader__avatar + .v-skeleton-loader__sentences > .v-skeleton-loader__text,
.v-skeleton-loader__avatar + .v-skeleton-loader__paragraph > .v-skeleton-loader__text {
margin-inline-start: 0;
}
.v-skeleton-loader__button {
border-radius: 4px;
height: 36px;
margin: 16px;
max-width: 64px;
}
.v-skeleton-loader__button + .v-skeleton-loader__bone {
flex: 1 1 auto;
margin-inline-start: 0;
}
.v-skeleton-loader__button + .v-skeleton-loader__sentences > .v-skeleton-loader__text,
.v-skeleton-loader__button + .v-skeleton-loader__paragraph > .v-skeleton-loader__text {
margin-inline-start: 0;
}
.v-skeleton-loader__chip {
border-radius: 16px;
margin: 16px;
height: 32px;
max-width: 96px;
}
.v-skeleton-loader__chip + .v-skeleton-loader__bone {
flex: 1 1 auto;
margin-inline-start: 0;
}
.v-skeleton-loader__chip + .v-skeleton-loader__sentences > .v-skeleton-loader__text,
.v-skeleton-loader__chip + .v-skeleton-loader__paragraph > .v-skeleton-loader__text {
margin-inline-start: 0;
}
.v-skeleton-loader__date-picker {
border-radius: inherit;
}
.v-skeleton-loader__date-picker .v-skeleton-loader__list-item:first-child .v-skeleton-loader__text {
max-width: 88px;
width: 20%;
}
.v-skeleton-loader__date-picker .v-skeleton-loader__heading {
max-width: 256px;
width: 40%;
}
.v-skeleton-loader__date-picker-days {
flex-wrap: wrap;
margin: 16px;
}
.v-skeleton-loader__date-picker-days .v-skeleton-loader__avatar {
border-radius: 4px;
margin: 4px;
max-width: 100%;
}
.v-skeleton-loader__date-picker-options {
flex-wrap: nowrap;
}
.v-skeleton-loader__date-picker-options .v-skeleton-loader__text {
flex: 1 1 auto;
}
.v-skeleton-loader__divider {
border-radius: 1px;
height: 2px;
}
.v-skeleton-loader__heading {
border-radius: 12px;
margin: 16px;
height: 24px;
}
.v-skeleton-loader__heading + .v-skeleton-loader__subtitle {
margin-top: -16px;
}
.v-skeleton-loader__image {
height: 150px;
border-radius: 0;
}
.v-skeleton-loader__card .v-skeleton-loader__image {
border-radius: 0;
}
.v-skeleton-loader__list-item {
margin: 16px;
}
.v-skeleton-loader__list-item .v-skeleton-loader__text {
margin: 0;
}
.v-skeleton-loader__table-thead {
justify-content: space-between;
}
.v-skeleton-loader__table-thead .v-skeleton-loader__heading {
margin-top: 16px;
max-width: 16px;
}
.v-skeleton-loader__table-tfoot {
flex-wrap: nowrap;
}
.v-skeleton-loader__table-tfoot > .v-skeleton-loader__text.v-skeleton-loader__bone {
margin-top: 16px;
}
.v-skeleton-loader__table-row {
align-items: baseline;
margin: 0 8px;
justify-content: space-evenly;
flex-wrap: nowrap;
}
.v-skeleton-loader__table-row > .v-skeleton-loader__text.v-skeleton-loader__bone {
margin-inline: 8px;
}
.v-skeleton-loader__table-row + .v-skeleton-loader__divider {
margin: 0 16px;
}
.v-skeleton-loader__table-cell {
align-items: center;
display: flex;
height: 48px;
width: 88px;
}
.v-skeleton-loader__table-cell .v-skeleton-loader__text {
margin-bottom: 0;
}
.v-skeleton-loader__subtitle {
max-width: 70%;
}
.v-skeleton-loader__subtitle > .v-skeleton-loader__text {
height: 16px;
border-radius: 8px;
}
.v-skeleton-loader__text {
border-radius: 6px;
margin: 16px;
height: 12px;
}
.v-skeleton-loader__text + .v-skeleton-loader__text {
margin-top: -8px;
max-width: 50%;
}
.v-skeleton-loader__text + .v-skeleton-loader__text + .v-skeleton-loader__text {
max-width: 70%;
}
.v-skeleton-loader--boilerplate .v-skeleton-loader__bone:after {
display: none;
}
.v-skeleton-loader--is-loading {
overflow: hidden;
}
.v-skeleton-loader--tile {
border-radius: 0;
}
.v-skeleton-loader--tile .v-skeleton-loader__bone {
border-radius: 0;
}
@keyframes loading {
100% {
transform: translateX(100%);
}
}
}
@@ -0,0 +1,282 @@
import type { PropType, VNode } from 'vue';
type VSkeletonBone<T> = T | VSkeletonBone<T>[];
export type VSkeletonBones = VSkeletonBone<VNode>;
export type VSkeletonLoaderType = keyof typeof rootTypes;
export declare const rootTypes: {
readonly actions: 'button@2';
readonly article: 'heading, paragraph';
readonly avatar: 'avatar';
readonly button: 'button';
readonly card: 'image, heading';
readonly 'card-avatar': 'image, list-item-avatar';
readonly chip: 'chip';
readonly 'date-picker': 'list-item, heading, divider, date-picker-options, date-picker-days, actions';
readonly 'date-picker-options': 'text, avatar@2';
readonly 'date-picker-days': 'avatar@28';
readonly divider: 'divider';
readonly heading: 'heading';
readonly image: 'image';
readonly 'list-item': 'text';
readonly 'list-item-avatar': 'avatar, text';
readonly 'list-item-two-line': 'sentences';
readonly 'list-item-avatar-two-line': 'avatar, sentences';
readonly 'list-item-three-line': 'paragraph';
readonly 'list-item-avatar-three-line': 'avatar, paragraph';
readonly ossein: 'ossein';
readonly paragraph: 'text@3';
readonly sentences: 'text@2';
readonly subtitle: 'text';
readonly table: 'table-heading, table-thead, table-tbody, table-tfoot';
readonly 'table-heading': 'chip, text';
readonly 'table-thead': 'heading@6';
readonly 'table-tbody': 'table-row-divider@6';
readonly 'table-row-divider': 'table-row, divider';
readonly 'table-row': 'text@6';
readonly 'table-tfoot': 'text@2, avatar@2';
readonly text: 'text';
};
export declare const makeVSkeletonLoaderProps: <Defaults extends {
theme?: unknown;
elevation?: unknown;
height?: unknown;
maxHeight?: unknown;
maxWidth?: unknown;
minHeight?: unknown;
minWidth?: unknown;
width?: unknown;
boilerplate?: unknown;
color?: unknown;
loading?: unknown;
loadingText?: unknown;
type?: 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"];
};
elevation: unknown extends Defaults["elevation"] ? {
type: (NumberConstructor | StringConstructor)[];
validator: (value: string | number) => boolean;
} : Omit<{
type: (NumberConstructor | StringConstructor)[];
validator: (value: string | number) => boolean;
}, "default" | "type"> & {
type: PropType<unknown extends Defaults["elevation"] ? string | number : string | number | Defaults["elevation"]>;
default: unknown extends Defaults["elevation"] ? string | number : Defaults["elevation"] | NonNullable<string | number>;
};
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>;
};
boilerplate: unknown extends Defaults["boilerplate"] ? BooleanConstructor : {
type: PropType<unknown extends Defaults["boilerplate"] ? boolean : boolean | Defaults["boilerplate"]>;
default: unknown extends Defaults["boilerplate"] ? boolean : boolean | Defaults["boilerplate"];
};
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"];
};
loading: unknown extends Defaults["loading"] ? BooleanConstructor : {
type: PropType<unknown extends Defaults["loading"] ? boolean : boolean | Defaults["loading"]>;
default: unknown extends Defaults["loading"] ? boolean : boolean | Defaults["loading"];
};
loadingText: unknown extends Defaults["loadingText"] ? {
type: StringConstructor;
default: string;
} : Omit<{
type: StringConstructor;
default: string;
}, "default" | "type"> & {
type: PropType<unknown extends Defaults["loadingText"] ? string : string | Defaults["loadingText"]>;
default: unknown extends Defaults["loadingText"] ? string : string | Defaults["loadingText"];
};
type: unknown extends Defaults["type"] ? {
type: PropType<VSkeletonLoaderType | (string & {}) | ReadonlyArray<VSkeletonLoaderType | (string & {})>>;
default: string;
} : Omit<{
type: PropType<VSkeletonLoaderType | (string & {}) | ReadonlyArray<VSkeletonLoaderType | (string & {})>>;
default: string;
}, "default" | "type"> & {
type: PropType<unknown extends Defaults["type"] ? "actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | readonly ("actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | (string & {}))[] | (string & {}) : "actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | readonly ("actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | (string & {}))[] | Defaults["type"] | (string & {})>;
default: unknown extends Defaults["type"] ? "actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | readonly ("actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | (string & {}))[] | (string & {}) : Defaults["type"] | NonNullable<"actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | readonly ("actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | (string & {}))[] | (string & {})>;
};
};
export declare const VSkeletonLoader: {
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
boilerplate: boolean;
loading: boolean;
loadingText: string;
type: "actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | readonly ("actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | (string & {}))[] | (string & {});
} & {
theme?: string | undefined;
elevation?: string | number | 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;
color?: string | undefined;
} & {
$children?: {
default?: (() => import("vue").VNodeChild) | undefined;
} | {
$stable?: boolean;
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
'v-slots'?: {
default?: false | (() => import("vue").VNodeChild) | undefined;
} | undefined;
} & {
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
boilerplate: boolean;
loading: boolean;
loadingText: string;
type: "actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | readonly ("actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | (string & {}))[] | (string & {});
}, true, {}, import("vue").SlotsType<Partial<{
default: () => VNode[];
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, {
boilerplate: boolean;
loading: boolean;
loadingText: string;
type: "actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | readonly ("actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | (string & {}))[] | (string & {});
} & {
theme?: string | undefined;
elevation?: string | number | 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;
color?: string | undefined;
} & {
$children?: {
default?: (() => import("vue").VNodeChild) | undefined;
} | {
$stable?: boolean;
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
'v-slots'?: {
default?: false | (() => import("vue").VNodeChild) | undefined;
} | undefined;
} & {
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
}, {}, {}, {}, {}, {
boilerplate: boolean;
loading: boolean;
loadingText: string;
type: "actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | readonly ("actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | (string & {}))[] | (string & {});
}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & import("vue").ComponentOptionsBase<{
boilerplate: boolean;
loading: boolean;
loadingText: string;
type: "actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | readonly ("actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | (string & {}))[] | (string & {});
} & {
theme?: string | undefined;
elevation?: string | number | 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;
color?: string | undefined;
} & {
$children?: {
default?: (() => import("vue").VNodeChild) | undefined;
} | {
$stable?: boolean;
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
'v-slots'?: {
default?: false | (() => import("vue").VNodeChild) | undefined;
} | undefined;
} & {
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
boilerplate: boolean;
loading: boolean;
loadingText: string;
type: "actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | readonly ("actions" | "article" | "avatar" | "button" | "card" | "card-avatar" | "chip" | "date-picker" | "date-picker-days" | "date-picker-options" | "divider" | "heading" | "image" | "list-item" | "list-item-avatar" | "list-item-avatar-three-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-two-line" | "ossein" | "paragraph" | "sentences" | "subtitle" | "table" | "table-heading" | "table-row" | "table-row-divider" | "table-tbody" | "table-tfoot" | "table-thead" | "text" | (string & {}))[] | (string & {});
}, {}, string, import("vue").SlotsType<Partial<{
default: () => VNode[];
}>>, 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;
elevation: {
type: (NumberConstructor | StringConstructor)[];
validator: (value: string | number) => boolean;
};
height: (NumberConstructor | StringConstructor)[];
maxHeight: (NumberConstructor | StringConstructor)[];
maxWidth: (NumberConstructor | StringConstructor)[];
minHeight: (NumberConstructor | StringConstructor)[];
minWidth: (NumberConstructor | StringConstructor)[];
width: (NumberConstructor | StringConstructor)[];
boilerplate: BooleanConstructor;
color: StringConstructor;
loading: BooleanConstructor;
loadingText: {
type: StringConstructor;
default: string;
};
type: {
type: PropType<VSkeletonLoaderType | (string & {}) | ReadonlyArray<VSkeletonLoaderType | (string & {})>>;
default: string;
};
}, import("vue").ExtractPropTypes<{
theme: StringConstructor;
elevation: {
type: (NumberConstructor | StringConstructor)[];
validator: (value: string | number) => boolean;
};
height: (NumberConstructor | StringConstructor)[];
maxHeight: (NumberConstructor | StringConstructor)[];
maxWidth: (NumberConstructor | StringConstructor)[];
minHeight: (NumberConstructor | StringConstructor)[];
minWidth: (NumberConstructor | StringConstructor)[];
width: (NumberConstructor | StringConstructor)[];
boilerplate: BooleanConstructor;
color: StringConstructor;
loading: BooleanConstructor;
loadingText: {
type: StringConstructor;
default: string;
};
type: {
type: PropType<VSkeletonLoaderType | (string & {}) | ReadonlyArray<VSkeletonLoaderType | (string & {})>>;
default: string;
};
}>>;
export type VSkeletonLoader = InstanceType<typeof VSkeletonLoader>;
@@ -0,0 +1,145 @@
import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, mergeProps as _mergeProps, Fragment as _Fragment } from "vue";
// Styles
import "./VSkeletonLoader.css";
// Composables
import { useBackgroundColor } from "../../composables/color.js";
import { makeDimensionProps, useDimension } from "../../composables/dimensions.js";
import { makeElevationProps, useElevation } from "../../composables/elevation.js";
import { useLocale } from "../../composables/locale.js";
import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
import { computed } from 'vue';
import { genericComponent, propsFactory, useRender, wrapInArray } from "../../util/index.js"; // Types
export const rootTypes = {
actions: 'button@2',
article: 'heading, paragraph',
avatar: 'avatar',
button: 'button',
card: 'image, heading',
'card-avatar': 'image, list-item-avatar',
chip: 'chip',
'date-picker': 'list-item, heading, divider, date-picker-options, date-picker-days, actions',
'date-picker-options': 'text, avatar@2',
'date-picker-days': 'avatar@28',
divider: 'divider',
heading: 'heading',
image: 'image',
'list-item': 'text',
'list-item-avatar': 'avatar, text',
'list-item-two-line': 'sentences',
'list-item-avatar-two-line': 'avatar, sentences',
'list-item-three-line': 'paragraph',
'list-item-avatar-three-line': 'avatar, paragraph',
ossein: 'ossein',
paragraph: 'text@3',
sentences: 'text@2',
subtitle: 'text',
table: 'table-heading, table-thead, table-tbody, table-tfoot',
'table-heading': 'chip, text',
'table-thead': 'heading@6',
'table-tbody': 'table-row-divider@6',
'table-row-divider': 'table-row, divider',
'table-row': 'text@6',
'table-tfoot': 'text@2, avatar@2',
text: 'text'
};
function genBone(type, children = []) {
return _createElementVNode("div", {
"class": _normalizeClass(['v-skeleton-loader__bone', `v-skeleton-loader__${type}`])
}, [children]);
}
function genBones(bone) {
// e.g. 'text@3'
const [type, length] = bone.split('@');
// Generate a length array based upon
// value after @ in the bone string
return Array.from({
length
}).map(() => genStructure(type));
}
function genStructure(type) {
let children = [];
if (!type) return children;
// TODO: figure out a better way to type this
const bone = rootTypes[type];
// End of recursion, do nothing
/* eslint-disable-next-line no-empty, brace-style */
if (type === bone) {}
// Array of values - e.g. 'heading, paragraph, text@2'
else if (type.includes(',')) return mapBones(type);
// Array of values - e.g. 'paragraph@4'
else if (type.includes('@')) return genBones(type);
// Array of values - e.g. 'card@2'
else if (bone.includes(',')) children = mapBones(bone);
// Array of values - e.g. 'list-item@2'
else if (bone.includes('@')) children = genBones(bone);
// Single value - e.g. 'card-heading'
else if (bone) children.push(genStructure(bone));
return [genBone(type, children)];
}
function mapBones(bones) {
// Remove spaces and return array of structures
return bones.replace(/\s/g, '').split(',').map(genStructure);
}
export const makeVSkeletonLoaderProps = propsFactory({
boilerplate: Boolean,
color: String,
loading: Boolean,
loadingText: {
type: String,
default: '$vuetify.loading'
},
type: {
type: [String, Array],
default: 'ossein'
},
...makeDimensionProps(),
...makeElevationProps(),
...makeThemeProps()
}, 'VSkeletonLoader');
export const VSkeletonLoader = genericComponent()({
name: 'VSkeletonLoader',
inheritAttrs: false,
props: makeVSkeletonLoaderProps(),
setup(props, {
attrs,
slots
}) {
const {
backgroundColorClasses,
backgroundColorStyles
} = useBackgroundColor(() => props.color);
const {
dimensionStyles
} = useDimension(props);
const {
elevationClasses
} = useElevation(props);
const {
themeClasses
} = provideTheme(props);
const {
t
} = useLocale();
const items = computed(() => genStructure(wrapInArray(props.type).join(',')));
useRender(() => {
const isLoading = !slots.default || props.loading;
const loadingProps = props.boilerplate || !isLoading ? {} : {
ariaLive: 'polite',
ariaLabel: t(props.loadingText),
role: 'alert'
};
return isLoading ? _createElementVNode("div", _mergeProps({
"class": ['v-skeleton-loader', {
'v-skeleton-loader--boilerplate': props.boilerplate
}, themeClasses.value, backgroundColorClasses.value, elevationClasses.value],
"style": [backgroundColorStyles.value, dimensionStyles.value]
}, loadingProps, attrs), [items.value]) : _createElementVNode(_Fragment, null, [slots.default?.()]);
});
return {};
}
});
//# sourceMappingURL=VSkeletonLoader.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,236 @@
// Imports
@use '../../styles/settings'
@use '../../styles/tools'
@use './variables' as *
@include tools.layer('components')
.v-skeleton-loader
align-items: center
background: $skeleton-loader-background
border-radius: $skeleton-loader-border-radius
display: flex
flex-wrap: wrap
position: relative
vertical-align: top
&__actions
justify-content: end
.v-skeleton-loader__ossein
height: 100%
.v-skeleton-loader__avatar,
.v-skeleton-loader__button,
.v-skeleton-loader__chip,
.v-skeleton-loader__divider,
.v-skeleton-loader__heading,
.v-skeleton-loader__image,
.v-skeleton-loader__ossein,
.v-skeleton-loader__text
background: $skeleton-loader-text-background
@media (forced-colors: active)
background: canvastext
.v-skeleton-loader__list-item,
.v-skeleton-loader__list-item-avatar,
.v-skeleton-loader__list-item-text,
.v-skeleton-loader__list-item-two-line,
.v-skeleton-loader__list-item-avatar-two-line,
.v-skeleton-loader__list-item-three-line,
.v-skeleton-loader__list-item-avatar-three-line
border-radius: $skeleton-loader-border-radius
&__bone
align-items: center
border-radius: inherit
display: flex
flex: 1 1 100%
flex-wrap: wrap
overflow: hidden
position: relative
&::after
animation: $skeleton-loader-loading-animation
background: $skeleton-loader-bone-background
transform: $skeleton-loader-loading-transform
contain: content
will-change: transform
z-index: 1
@include tools.absolute(true)
@media (forced-colors: active) and (pointer: fine)
cursor: progress
&__avatar
border-radius: 50%
flex: 0 1 auto
margin: $skeleton-loader-avatar-margin
max-height: $skeleton-loader-avatar-height
min-height: $skeleton-loader-avatar-height
height: $skeleton-loader-avatar-height
max-width: $skeleton-loader-avatar-width
min-width: $skeleton-loader-avatar-width
width: $skeleton-loader-avatar-width
+ .v-skeleton-loader__bone
flex: 1 1 auto
margin-inline-start: 0
+ .v-skeleton-loader__sentences,
+ .v-skeleton-loader__paragraph
> .v-skeleton-loader__text
margin-inline-start: 0
&__button
border-radius: $skeleton-loader-button-border-radius
height: $skeleton-loader-button-height
margin: $skeleton-loader-gutter
max-width: $skeleton-loader-button-width
+ .v-skeleton-loader__bone
flex: 1 1 auto
margin-inline-start: 0
+ .v-skeleton-loader__sentences,
+ .v-skeleton-loader__paragraph
> .v-skeleton-loader__text
margin-inline-start: 0
&__chip
border-radius: $skeleton-loader-chip-border-radius
margin: $skeleton-loader-gutter
height: $skeleton-loader-chip-height
max-width: $skeleton-loader-chip-width
+ .v-skeleton-loader__bone
flex: 1 1 auto
margin-inline-start: 0
+ .v-skeleton-loader__sentences,
+ .v-skeleton-loader__paragraph
> .v-skeleton-loader__text
margin-inline-start: 0
&__date-picker
border-radius: $skeleton-loader-date-picker-border-radius
.v-skeleton-loader__list-item:first-child
.v-skeleton-loader__text
max-width: $skeleton-loader-date-picker-text-max-width
width: $skeleton-loader-date-picker-text-width
.v-skeleton-loader__heading
max-width: $skeleton-loader-date-picker-heading-max-width
width: $skeleton-loader-date-picker-heading-width
&__date-picker-days
flex-wrap: wrap
margin: $skeleton-loader-gutter
.v-skeleton-loader__avatar
border-radius: $skeleton-loader-border-radius
margin: $skeleton-loader-date-picker-days-margin
max-width: 100%
&__date-picker-options
flex-wrap: nowrap
.v-skeleton-loader__text
flex: 1 1 auto
&__divider
border-radius: $skeleton-loader-divider-border-radius
height: $skeleton-loader-divider-height
&__heading
border-radius: $skeleton-loader-heading-border-radius
margin: $skeleton-loader-gutter
height: $skeleton-loader-heading-height
+ .v-skeleton-loader__subtitle
margin-top: -$skeleton-loader-gutter
&__image
height: $skeleton-loader-image-height
border-radius: 0
&__card
.v-skeleton-loader__image
border-radius: 0
&__list-item
margin: $skeleton-loader-gutter
.v-skeleton-loader__text
margin: 0
&__table-thead
justify-content: space-between
.v-skeleton-loader__heading
margin-top: $skeleton-loader-gutter
max-width: $skeleton-loader-gutter
&__table-tfoot
flex-wrap: nowrap
> .v-skeleton-loader__text.v-skeleton-loader__bone
margin-top: $skeleton-loader-gutter
&__table-row
align-items: baseline
margin: $skeleton-loader-table-row-margin
justify-content: space-evenly
flex-wrap: nowrap
> .v-skeleton-loader__text.v-skeleton-loader__bone
margin-inline: $skeleton-loader-table-row-text-margin
+ .v-skeleton-loader__divider
margin: 0 $skeleton-loader-gutter
&__table-cell
align-items: center
display: flex
height: $skeleton-loader-table-cell-height
width: $skeleton-loader-table-cell-width
.v-skeleton-loader__text
margin-bottom: 0
&__subtitle
max-width: $skeleton-loader-subtitle-max-width
> .v-skeleton-loader__text
height: $skeleton-loader-subtitle-text-height
border-radius: $skeleton-loader-subtitle-text-border-radius
&__text
border-radius: $skeleton-loader-text-border-radius
margin: $skeleton-loader-gutter
height: $skeleton-loader-text-height
+ .v-skeleton-loader__text
margin-top: $skeleton-loader-text-two-text-margin-top
max-width: $skeleton-loader-text-two-text-max-width
+ .v-skeleton-loader__text
max-width: $skeleton-loader-text-three-text-max-width
&--boilerplate
.v-skeleton-loader__bone:after
display: none
&--is-loading
overflow: hidden
&--tile
border-radius: 0
.v-skeleton-loader__bone
border-radius: 0
@keyframes loading
100%
transform: translateX(100%)
@@ -0,0 +1,44 @@
@use '../../styles/settings';
@use '../../styles/tools';
$skeleton-loader-actions-button-margin: 12px !default;
$skeleton-loader-actions-padding: 16px 16px 8px !default;
$skeleton-loader-avatar-height: 48px !default;
$skeleton-loader-avatar-margin: 8px 16px !default;
$skeleton-loader-avatar-width: 48px !default;
$skeleton-loader-background: rgb(var(--v-theme-surface)) !default;
$skeleton-loader-bone-background: linear-gradient(90deg, tools.theme-color('surface', 0), tools.theme-color('surface', .3), tools.theme-color('surface', 0)) !default;
$skeleton-loader-border-radius: settings.$border-radius-root !default;
$skeleton-loader-button-border-radius: settings.$border-radius-root !default;
$skeleton-loader-button-height: 36px !default;
$skeleton-loader-button-width: 64px !default;
$skeleton-loader-chip-border-radius: 16px !default;
$skeleton-loader-chip-height: 32px !default;
$skeleton-loader-chip-width: 96px !default;
$skeleton-loader-date-picker-border-radius: inherit !default;
$skeleton-loader-date-picker-days-margin: 4px !default;
$skeleton-loader-date-picker-heading-max-width: 256px !default;
$skeleton-loader-date-picker-heading-width: 40% !default;
$skeleton-loader-date-picker-text-max-width: 88px !default;
$skeleton-loader-date-picker-text-width: 20% !default;
$skeleton-loader-divider-border-radius: 1px !default;
$skeleton-loader-divider-height: 2px !default;
$skeleton-loader-gutter: 16px !default;
$skeleton-loader-heading-border-radius: 12px !default;
$skeleton-loader-heading-height: 24px !default;
$skeleton-loader-image-height: 150px !default;
$skeleton-loader-loading-animation: loading 1.5s infinite !default;
$skeleton-loader-loading-transform: translateX(-100%) !default;
$skeleton-loader-subtitle-max-width: 70% !default;
$skeleton-loader-subtitle-text-border-radius: 8px !default;
$skeleton-loader-subtitle-text-height: 16px !default;
$skeleton-loader-table-cell-height: 48px !default;
$skeleton-loader-table-cell-width: 88px !default;
$skeleton-loader-table-row-margin: 0 8px !default;
$skeleton-loader-table-row-text-margin: 8px !default;
$skeleton-loader-text-background: tools.theme-color('on-surface', var(--v-border-opacity)) !default;
$skeleton-loader-text-border-radius: 6px !default;
$skeleton-loader-text-height: 12px !default;
$skeleton-loader-text-three-text-max-width: 70% !default;
$skeleton-loader-text-two-text-margin-top: -8px !default;
$skeleton-loader-text-two-text-max-width: 50% !default;
@@ -0,0 +1 @@
export { VSkeletonLoader } from './VSkeletonLoader.js';
@@ -0,0 +1,2 @@
export { VSkeletonLoader } from "./VSkeletonLoader.js";
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","names":["VSkeletonLoader"],"sources":["../../../src/components/VSkeletonLoader/index.ts"],"sourcesContent":["export { VSkeletonLoader } from './VSkeletonLoader'\n"],"mappings":"SAASA,eAAe","ignoreList":[]}