@vuetify/nightly 3.2.0-dev-20230322.0 → 3.2.0-dev-20230405.0

package/lib/labs/VSkeletonLoader/VSkeletonLoader.css

@@ -0,0 +1,221 @@
+.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__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__text {
+  background: rgba(var(--v-theme-on-surface), var(--v-border-opacity));
+}
+.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 {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  animation: loading 1.5s infinite;
+  background: linear-gradient(90deg, rgba(var(--v-theme-surface), 0), rgba(var(--v-theme-surface), 0.3), rgba(var(--v-theme-surface), 0));
+  transform: translateX(-100%);
+  z-index: 1;
+}
+.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-start: 8px;
+  margin-inline-end: 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%);
+  }
+}

package/lib/labs/VSkeletonLoader/VSkeletonLoader.mjs

@@ -0,0 +1,141 @@
+import { createVNode as _createVNode } from "vue";
+// Styles
+import "./VSkeletonLoader.css";
+
+// Composables
+import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
+import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { useBackgroundColor } from "../../composables/color.mjs";
+import { useLocale } from "../../composables/locale.mjs"; // Utilities
+import { computed, toRef } from 'vue';
+import { genericComponent, useRender, wrapInArray } from "../../util/index.mjs"; // 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',
+  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',
+  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) {
+  let children = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return _createVNode("div", {
+    "class": ['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 VSkeletonLoader = genericComponent()({
+  name: 'VSkeletonLoader',
+  props: {
+    boilerplate: Boolean,
+    color: String,
+    loading: Boolean,
+    loadingText: {
+      type: String,
+      default: '$vuetify.loading'
+    },
+    type: {
+      type: [String, Array],
+      default: 'image'
+    },
+    ...makeDimensionProps(),
+    ...makeElevationProps(),
+    ...makeThemeProps()
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(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;
+      return _createVNode("div", {
+        "class": ['v-skeleton-loader', {
+          'v-skeleton-loader--boilerplate': props.boilerplate
+        }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value],
+        "style": [backgroundColorStyles.value, isLoading ? dimensionStyles.value : {}],
+        "aria-busy": !props.boilerplate ? isLoading : undefined,
+        "aria-live": !props.boilerplate ? 'polite' : undefined,
+        "aria-label": !props.boilerplate ? t(props.loadingText) : undefined,
+        "role": !props.boilerplate ? 'alert' : undefined
+      }, [isLoading ? items.value : slots.default?.()]);
+    });
+    return {};
+  }
+});
+//# sourceMappingURL=VSkeletonLoader.mjs.map

package/lib/labs/VSkeletonLoader/VSkeletonLoader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VSkeletonLoader.mjs","names":["makeDimensionProps","useDimension","makeElevationProps","useElevation","makeThemeProps","provideTheme","useBackgroundColor","useLocale","computed","toRef","genericComponent","useRender","wrapInArray","rootTypes","actions","article","avatar","button","card","chip","heading","image","paragraph","sentences","subtitle","table","text","genBone","type","children","arguments","length","undefined","_createVNode","genBones","bone","split","Array","from","map","genStructure","includes","mapBones","push","bones","replace","VSkeletonLoader","name","props","boilerplate","Boolean","color","String","loading","loadingText","default","setup","_ref","slots","backgroundColorClasses","backgroundColorStyles","dimensionStyles","elevationClasses","themeClasses","t","items","join","isLoading","value"],"sources":["../../../src/labs/VSkeletonLoader/VSkeletonLoader.tsx"],"sourcesContent":["// Styles\nimport './VSkeletonLoader.sass'\n\n// Composables\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, useRender, wrapInArray } from '@/util'\n\n// Types\nimport type { PropType, VNode } from 'vue'\n\ntype VSkeletonBone<T> = T | VSkeletonBone<T>[]\n\nexport type VSkeletonBones = VSkeletonBone<VNode>\nexport type VSkeletonLoaderType = keyof typeof rootTypes\nexport type VSkeletonLoaderSlots = {\n  default: []\n}\n\nexport const rootTypes = {\n  actions: 'button@2',\n  article: 'heading, paragraph',\n  avatar: 'avatar',\n  button: 'button',\n  card: 'image, heading',\n  'card-avatar': 'image, list-item-avatar',\n  chip: 'chip',\n  'date-picker': 'list-item, heading, divider, date-picker-options, date-picker-days, actions',\n  'date-picker-options': 'text, avatar@2',\n  'date-picker-days': 'avatar@28',\n  heading: 'heading',\n  image: 'image',\n  'list-item': 'text',\n  'list-item-avatar': 'avatar, text',\n  'list-item-two-line': 'sentences',\n  'list-item-avatar-two-line': 'avatar, sentences',\n  'list-item-three-line': 'paragraph',\n  'list-item-avatar-three-line': 'avatar, paragraph',\n  paragraph: 'text@3',\n  sentences: 'text@2',\n  subtitle: 'text',\n  table: 'table-heading, table-thead, table-tbody, table-tfoot',\n  'table-heading': 'chip, text',\n  'table-thead': 'heading@6',\n  'table-tbody': 'table-row-divider@6',\n  'table-row-divider': 'table-row, divider',\n  'table-row': 'text@6',\n  'table-tfoot': 'text@2, avatar@2',\n  text: 'text',\n} as const\n\nfunction genBone (type: string, children: VSkeletonBones = []) {\n  return (\n    <div\n      class={[\n        'v-skeleton-loader__bone',\n        `v-skeleton-loader__${type}`,\n      ]}\n    >\n      { children }\n    </div>\n  )\n}\n\nfunction genBones (bone: string) {\n  // e.g. 'text@3'\n  const [type, length] = bone.split('@') as [VSkeletonLoaderType, number]\n\n  // Generate a length array based upon\n  // value after @ in the bone string\n  return Array.from({ length }).map(() => genStructure(type))\n}\n\nfunction genStructure (type?: string): VSkeletonBones {\n  let children: VSkeletonBones = []\n\n  if (!type) return children\n\n  // TODO: figure out a better way to type this\n  const bone = (rootTypes as Record<string, string>)[type]\n\n  // End of recursion, do nothing\n  /* eslint-disable-next-line no-empty, brace-style */\n  if (type === bone) {}\n  // Array of values - e.g. 'heading, paragraph, text@2'\n  else if (type.includes(',')) return mapBones(type)\n  // Array of values - e.g. 'paragraph@4'\n  else if (type.includes('@')) return genBones(type)\n  // Array of values - e.g. 'card@2'\n  else if (bone.includes(',')) children = mapBones(bone)\n  // Array of values - e.g. 'list-item@2'\n  else if (bone.includes('@')) children = genBones(bone)\n  // Single value - e.g. 'card-heading'\n  else if (bone) children.push(genStructure(bone))\n\n  return [genBone(type, children)]\n}\n\nfunction mapBones (bones: string) {\n  // Remove spaces and return array of structures\n  return bones.replace(/\\s/g, '').split(',').map(genStructure)\n}\n\nexport const VSkeletonLoader = genericComponent<VSkeletonLoaderSlots>()({\n  name: 'VSkeletonLoader',\n\n  props: {\n    boilerplate: Boolean,\n    color: String,\n    loading: Boolean,\n    loadingText: {\n      type: String,\n      default: '$vuetify.loading',\n    },\n    type: {\n      type: [String, Array] as PropType<VSkeletonLoaderType | VSkeletonLoaderType[]>,\n      default: 'image',\n    },\n\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { themeClasses } = provideTheme(props)\n    const { t } = useLocale()\n\n    const items = computed(() => genStructure(wrapInArray(props.type).join(',')))\n\n    useRender(() => {\n      const isLoading = !slots.default || props.loading\n\n      return (\n        <div\n          class={[\n            'v-skeleton-loader',\n            {\n              'v-skeleton-loader--boilerplate': props.boilerplate,\n            },\n            themeClasses.value,\n            backgroundColorClasses.value,\n            elevationClasses.value,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            isLoading ? dimensionStyles.value : {},\n          ]}\n          aria-busy={ !props.boilerplate ? isLoading : undefined }\n          aria-live={ !props.boilerplate ? 'polite' : undefined }\n          aria-label={ !props.boilerplate ? t(props.loadingText) : undefined }\n          role={ !props.boilerplate ? 'alert' : undefined }\n        >\n          { isLoading ? items.value : slots.default?.() }\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSkeletonLoader = InstanceType<typeof VSkeletonLoader>\n"],"mappings":"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"}

package/lib/labs/VSkeletonLoader/VSkeletonLoader.sass

@@ -0,0 +1,225 @@
+// Imports
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+
+.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__avatar,
+  .v-skeleton-loader__button,
+  .v-skeleton-loader__chip,
+  .v-skeleton-loader__divider,
+  .v-skeleton-loader__heading,
+  .v-skeleton-loader__image,
+  .v-skeleton-loader__text
+    background: $skeleton-loader-text-background
+
+  .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
+      @include tools.absolute(true)
+
+      animation: $skeleton-loader-loading-animation
+      background: $skeleton-loader-bone-background
+      transform: $skeleton-loader-loading-transform
+      z-index: 1
+
+  &__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-start: $skeleton-loader-table-row-text-margin
+      margin-inline-end: $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%)

package/lib/labs/VSkeletonLoader/_variables.scss

@@ -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, rgba(var(--v-theme-surface), 0), rgba(var(--v-theme-surface), .3), rgba(var(--v-theme-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: rgba(var(--v-theme-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;