@vuetify/nightly 3.7.0-beta.1-dev.2024-07-29 → 3.7.0-beta.1-dev.2024-08-01

package/lib/components/VSelect/index.d.mts

@@ -610,7 +610,7 @@ declare const VSelect: {
             }) => vue.VNodeChild) | undefined;
         }) | undefined;
         menuProps?: (Partial<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: Component | undefined;
@@ -638,8 +638,9 @@ declare const VSelect: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         }> & Omit<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: Component | undefined;
@@ -665,6 +666,7 @@ declare const VSelect: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
             height?: string | number | undefined;
@@ -715,7 +717,7 @@ declare const VSelect: {
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: Component | undefined;
@@ -741,6 +743,7 @@ declare const VSelect: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         } & {
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
@@ -794,7 +797,7 @@ declare const VSelect: {
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim">) | undefined;
+        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "submenu">) | undefined;
         itemColor?: string | undefined;
     } & {
         "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
@@ -1142,7 +1145,7 @@ declare const VSelect: {
             }) => vue.VNodeChild) | undefined;
         }) | undefined;
         menuProps?: (Partial<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: Component | undefined;
@@ -1170,8 +1173,9 @@ declare const VSelect: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         }> & Omit<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: Component | undefined;
@@ -1197,6 +1201,7 @@ declare const VSelect: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
             height?: string | number | undefined;
@@ -1247,7 +1252,7 @@ declare const VSelect: {
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: Component | undefined;
@@ -1273,6 +1278,7 @@ declare const VSelect: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         } & {
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
@@ -1326,7 +1332,7 @@ declare const VSelect: {
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim">) | undefined;
+        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "submenu">) | undefined;
         itemColor?: string | undefined;
     } & {
         "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
@@ -1787,7 +1793,7 @@ declare const VSelect: {
             }) => vue.VNodeChild) | undefined;
         }) | undefined;
         menuProps?: (Partial<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: Component | undefined;
@@ -1815,8 +1821,9 @@ declare const VSelect: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         }> & Omit<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: Component | undefined;
@@ -1842,6 +1849,7 @@ declare const VSelect: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
             height?: string | number | undefined;
@@ -1892,7 +1900,7 @@ declare const VSelect: {
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: Component | undefined;
@@ -1918,6 +1926,7 @@ declare const VSelect: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         } & {
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
@@ -1971,7 +1980,7 @@ declare const VSelect: {
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim">) | undefined;
+        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "submenu">) | undefined;
         itemColor?: string | undefined;
     } & {
         "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
@@ -2367,7 +2376,7 @@ declare const VSelect: {
         }) => vue.VNodeChild) | undefined;
     }) | undefined;
     menuProps?: (Partial<{
-        location: Anchor;
+        location: NonNullable<Anchor> | undefined;
         origin: "auto" | Anchor | "overlap";
         transition: NonNullable<string | boolean | (vue.TransitionProps & {
             component?: Component | undefined;
@@ -2395,8 +2404,9 @@ declare const VSelect: {
         noClickAnimation: boolean;
         persistent: boolean;
         scrim: NonNullable<string | boolean>;
+        submenu: boolean;
     }> & Omit<{
-        location: Anchor;
+        location: NonNullable<Anchor> | undefined;
         origin: "auto" | Anchor | "overlap";
         transition: NonNullable<string | boolean | (vue.TransitionProps & {
             component?: Component | undefined;
@@ -2422,6 +2432,7 @@ declare const VSelect: {
         noClickAnimation: boolean;
         persistent: boolean;
         scrim: NonNullable<string | boolean>;
+        submenu: boolean;
         offset?: string | number | number[] | undefined;
         id?: string | undefined;
         height?: string | number | undefined;
@@ -2472,7 +2483,7 @@ declare const VSelect: {
         }) => vue.VNodeChild) | undefined;
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-        location: Anchor;
+        location: NonNullable<Anchor> | undefined;
         origin: "auto" | Anchor | "overlap";
         transition: NonNullable<string | boolean | (vue.TransitionProps & {
             component?: Component | undefined;
@@ -2498,6 +2509,7 @@ declare const VSelect: {
         noClickAnimation: boolean;
         persistent: boolean;
         scrim: NonNullable<string | boolean>;
+        submenu: boolean;
     } & {
         offset?: string | number | number[] | undefined;
         id?: string | undefined;
@@ -2551,7 +2563,7 @@ declare const VSelect: {
         }) => vue.VNodeChild) | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim">) | undefined;
+    }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "submenu">) | undefined;
     itemColor?: string | undefined;
 } & {
     "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
@@ -3163,7 +3175,7 @@ declare const VSelect: {
     };
     menuProps: {
         type: PropType<Partial<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: Component | undefined;
@@ -3191,8 +3203,9 @@ declare const VSelect: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         }> & Omit<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: Component | undefined;
@@ -3218,6 +3231,7 @@ declare const VSelect: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
             height?: string | number | undefined;
@@ -3268,7 +3282,7 @@ declare const VSelect: {
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: Component | undefined;
@@ -3294,6 +3308,7 @@ declare const VSelect: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         } & {
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
@@ -3347,7 +3362,7 @@ declare const VSelect: {
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim">>;
+        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "submenu">>;
     };
     multiple: BooleanConstructor;
     noDataText: {
@@ -3795,7 +3810,7 @@ declare const VSelect: {
     };
     menuProps: {
         type: PropType<Partial<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: Component | undefined;
@@ -3823,8 +3838,9 @@ declare const VSelect: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         }> & Omit<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: Component | undefined;
@@ -3850,6 +3866,7 @@ declare const VSelect: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
             height?: string | number | undefined;
@@ -3900,7 +3917,7 @@ declare const VSelect: {
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: Component | undefined;
@@ -3926,6 +3943,7 @@ declare const VSelect: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         } & {
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
@@ -3979,7 +3997,7 @@ declare const VSelect: {
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim">>;
+        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "submenu">>;
     };
     multiple: BooleanConstructor;
     noDataText: {

package/lib/components/VSelectionControl/VSelectionControl.css

@@ -72,6 +72,12 @@
   height: 100%;
   opacity: 0;
 }
+.v-selection-control__input::before {
+  border-radius: 100%;
+  background-color: currentColor;
+  opacity: 0;
+  pointer-events: none;
+}
 .v-selection-control__input::before {
   content: "";
   position: absolute;
@@ -79,10 +85,6 @@
   left: 0;
   width: 100%;
   height: 100%;
-  border-radius: 100%;
-  background-color: currentColor;
-  opacity: 0;
-  pointer-events: none;
 }
 .v-selection-control__input:hover::before {
   opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));

package/lib/components/VSelectionControl/VSelectionControl.sass

@@ -74,11 +74,11 @@
       opacity: 0
 
     &::before
-      @include tools.absolute(true)
       border-radius: 100%
       background-color: currentColor
       opacity: 0
       pointer-events: none
+      @include tools.absolute(true)
 
     &:hover::before
       opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier))

package/lib/components/VSheet/VSheet.css

@@ -1,17 +1,18 @@
 .v-sheet {
   display: block;
+}
+.v-sheet {
   border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   border-style: solid;
   border-width: 0;
-  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-  border-radius: 0;
-  background: rgb(var(--v-theme-surface));
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
 }
 .v-sheet--border {
   border-width: thin;
   box-shadow: none;
 }
+.v-sheet {
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+}
 .v-sheet--absolute {
   position: absolute;
 }
@@ -24,6 +25,13 @@
 .v-sheet--sticky {
   position: sticky;
 }
+.v-sheet {
+  border-radius: 0;
+}
+.v-sheet {
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
 .v-sheet--rounded {
   border-radius: 4px;
 }

package/lib/components/VSkeletonLoader/VSkeletonLoader.css

@@ -41,6 +41,12 @@
   overflow: hidden;
   position: relative;
 }
+.v-skeleton-loader__bone::after {
+  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__bone::after {
   content: "";
   position: absolute;
@@ -48,10 +54,6 @@
   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%;

package/lib/components/VSkeletonLoader/VSkeletonLoader.mjs

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode } from "vue";
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 // Styles
 import "./VSkeletonLoader.css";
 
@@ -127,16 +127,17 @@ export const VSkeletonLoader = genericComponent()({
     const items = computed(() => genStructure(wrapInArray(props.type).join(',')));
     useRender(() => {
       const isLoading = !slots.default || props.loading;
-      return _createVNode("div", {
+      const loadingProps = props.boilerplate || !isLoading ? {} : {
+        ariaLive: 'polite',
+        ariaLabel: t(props.loadingText),
+        role: 'alert'
+      };
+      return _createVNode("div", _mergeProps({
         "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?.()]);
+        "style": [backgroundColorStyles.value, isLoading ? dimensionStyles.value : {}]
+      }, loadingProps), [isLoading ? items.value : slots.default?.()]);
     });
     return {};
   }

package/lib/components/VSkeletonLoader/VSkeletonLoader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VSkeletonLoader.mjs","names":["useBackgroundColor","makeDimensionProps","useDimension","makeElevationProps","useElevation","useLocale","makeThemeProps","provideTheme","computed","toRef","genericComponent","propsFactory","useRender","wrapInArray","rootTypes","actions","article","avatar","button","card","chip","divider","heading","image","ossein","paragraph","sentences","subtitle","table","text","genBone","type","children","arguments","length","undefined","_createVNode","genBones","bone","split","Array","from","map","genStructure","includes","mapBones","push","bones","replace","makeVSkeletonLoaderProps","boilerplate","Boolean","color","String","loading","loadingText","default","VSkeletonLoader","name","props","setup","_ref","slots","backgroundColorClasses","backgroundColorStyles","dimensionStyles","elevationClasses","themeClasses","t","items","join","isLoading","value"],"sources":["../../../src/components/VSkeletonLoader/VSkeletonLoader.tsx"],"sourcesContent":["// Styles\nimport './VSkeletonLoader.sass'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { useLocale } from '@/composables/locale'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, propsFactory, 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\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  divider: 'divider',\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  ossein: 'ossein',\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 makeVSkeletonLoaderProps = propsFactory({\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<\n      | VSkeletonLoaderType | (string & {})\n      | ReadonlyArray<VSkeletonLoaderType | (string & {})>\n    >,\n    default: 'ossein',\n  },\n\n  ...makeDimensionProps(),\n  ...makeElevationProps(),\n  ...makeThemeProps(),\n}, 'VSkeletonLoader')\n\nexport const VSkeletonLoader = genericComponent()({\n  name: 'VSkeletonLoader',\n\n  props: makeVSkeletonLoaderProps(),\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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","ignoreList":[]}
+{"version":3,"file":"VSkeletonLoader.mjs","names":["useBackgroundColor","makeDimensionProps","useDimension","makeElevationProps","useElevation","useLocale","makeThemeProps","provideTheme","computed","toRef","genericComponent","propsFactory","useRender","wrapInArray","rootTypes","actions","article","avatar","button","card","chip","divider","heading","image","ossein","paragraph","sentences","subtitle","table","text","genBone","type","children","arguments","length","undefined","_createVNode","genBones","bone","split","Array","from","map","genStructure","includes","mapBones","push","bones","replace","makeVSkeletonLoaderProps","boilerplate","Boolean","color","String","loading","loadingText","default","VSkeletonLoader","name","props","setup","_ref","slots","backgroundColorClasses","backgroundColorStyles","dimensionStyles","elevationClasses","themeClasses","t","items","join","isLoading","loadingProps","ariaLive","ariaLabel","role","_mergeProps","value"],"sources":["../../../src/components/VSkeletonLoader/VSkeletonLoader.tsx"],"sourcesContent":["// Styles\nimport './VSkeletonLoader.sass'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { useLocale } from '@/composables/locale'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, propsFactory, 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\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  divider: 'divider',\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  ossein: 'ossein',\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 makeVSkeletonLoaderProps = propsFactory({\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<\n      | VSkeletonLoaderType | (string & {})\n      | ReadonlyArray<VSkeletonLoaderType | (string & {})>\n    >,\n    default: 'ossein',\n  },\n\n  ...makeDimensionProps(),\n  ...makeElevationProps(),\n  ...makeThemeProps(),\n}, 'VSkeletonLoader')\n\nexport const VSkeletonLoader = genericComponent()({\n  name: 'VSkeletonLoader',\n\n  props: makeVSkeletonLoaderProps(),\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      const loadingProps = (props.boilerplate || !isLoading) ? {} : {\n        ariaLive: 'polite',\n        ariaLabel: t(props.loadingText),\n        role: 'alert',\n      }\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          { ...loadingProps }\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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","ignoreList":[]}

package/lib/components/VSkeletonLoader/VSkeletonLoader.sass

@@ -48,12 +48,11 @@
       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
+        @include tools.absolute(true)
 
     &__avatar
       border-radius: 50%

package/lib/components/VSlider/VSliderThumb.sass

@@ -106,9 +106,9 @@
     .v-slider-thumb__label
       bottom: $slider-thumb-label-offset
 
-      +tools.ltr()
+      @include tools.ltr()
         transform: translateX(-50%)
-      +tools.rtl()
+      @include tools.rtl()
         transform: translateX(50%)
 
       &::before

package/lib/components/VSnackbar/VSnackbar.css

@@ -16,6 +16,8 @@
   min-width: 344px;
   overflow: hidden;
   padding: 0;
+}
+.v-snackbar__wrapper {
   border-radius: 4px;
 }
 .v-snackbar--variant-plain, .v-snackbar--variant-outlined, .v-snackbar--variant-text, .v-snackbar--variant-tonal {

package/lib/components/VSnackbar/VSnackbar.mjs

@@ -21,14 +21,14 @@ import { genOverlays, makeVariantProps, useVariant } from "../../composables/var
 import { computed, inject, mergeProps, nextTick, onMounted, onScopeDispose, ref, shallowRef, watch, watchEffect } from 'vue';
 import { genericComponent, omit, propsFactory, refElement, useRender } from "../../util/index.mjs"; // Types
 function useCountdown(milliseconds) {
-  const time = shallowRef(milliseconds);
+  const time = shallowRef(milliseconds());
   let timer = -1;
   function clear() {
     clearInterval(timer);
   }
   function reset() {
     clear();
-    nextTick(() => time.value = milliseconds);
+    nextTick(() => time.value = milliseconds());
   }
   function start(el) {
     const style = el ? getComputedStyle(el) : {
@@ -40,7 +40,7 @@ function useCountdown(milliseconds) {
     const startTime = performance.now();
     timer = window.setInterval(() => {
       const elapsed = performance.now() - startTime + interval;
-      time.value = Math.max(milliseconds - elapsed, 0);
+      time.value = Math.max(milliseconds() - elapsed, 0);
       if (time.value <= 0) clear();
     }, interval);
   }
@@ -100,7 +100,7 @@ export const VSnackbar = genericComponent()({
     const {
       roundedClasses
     } = useRounded(props);
-    const countdown = useCountdown(Number(props.timeout));
+    const countdown = useCountdown(() => Number(props.timeout));
     const overlay = ref();
     const timerRef = ref();
     const isHovering = shallowRef(false);