routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+246
@@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
Generated
Vendored
+282
@@ -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>;
|
||||
|
||||
+145
@@ -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
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+236
@@ -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%)
|
||||
+44
@@ -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;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VSkeletonLoader } from './VSkeletonLoader.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VSkeletonLoader } from "./VSkeletonLoader.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -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":[]}
|
||||
Reference in New Issue
Block a user