@vuetify/nightly 3.7.5-master.2024-12-17 → 3.7.6-dev.2025-01-06

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.7.5-master.2024-12-17
+* Vuetify v3.7.6-dev.2025-01-06
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1251,9 +1251,6 @@
   }, 'component');
 
   // Utilities
-
-  // Types
-
   function getCurrentInstance(name, message) {
     const vm = vue.getCurrentInstance();
     if (!vm) {
@@ -1266,20 +1263,6 @@
     const vm = getCurrentInstance(name).type;
     return toKebabCase(vm?.aliasName || vm?.name);
   }
-  let _uid = 0;
-  let _map = new WeakMap();
-  function getUid() {
-    const vm = getCurrentInstance('getUid');
-    if (_map.has(vm)) return _map.get(vm);else {
-      const uid = _uid++;
-      _map.set(vm, uid);
-      return uid;
-    }
-  }
-  getUid.reset = () => {
-    _uid = 0;
-    _map = new WeakMap();
-  };
 
   // Utilities
 
@@ -2096,7 +2079,7 @@
   function useLayoutItem(options) {
     const layout = vue.inject(VuetifyLayoutKey);
     if (!layout) throw new Error('[Vuetify] Could not find injected layout');
-    const id = options.id ?? `layout-item-${getUid()}`;
+    const id = options.id ?? `layout-item-${vue.useId()}`;
     const vm = getCurrentInstance('useLayoutItem');
     vue.provide(VuetifyLayoutItemKey, {
       id
@@ -2806,7 +2789,8 @@
             'theme-on-code': '#CCCCCC'
           }
         }
-      }
+      },
+      stylesheetId: 'vuetify-theme-stylesheet'
     };
   }
   function parseThemeOptions() {
@@ -2863,6 +2847,19 @@
       return acc;
     });
     const current = vue.computed(() => computedThemes.value[name.value]);
+    function createCssClass(lines, selector, content) {
+      lines.push(`${getScopedSelector(selector)} {\n`, ...content.map(line => `  ${line};\n`), '}\n');
+    }
+    function getScopedSelector(selector) {
+      if (!parsedOptions.scope) {
+        return selector;
+      }
+      const scopeSelector = `:where(${parsedOptions.scope})`;
+      if (selector === ':root') {
+        return scopeSelector;
+      }
+      return `${scopeSelector} ${selector}`;
+    }
     const styles = vue.computed(() => {
       const lines = [];
       if (current.value?.dark) {
@@ -2891,7 +2888,7 @@
       return {
         style: [{
           children: styles.value,
-          id: 'vuetify-theme-stylesheet',
+          id: parsedOptions.stylesheetId,
           nonce: parsedOptions.cspNonce || false
         }]
       };
@@ -2916,7 +2913,7 @@
           }
         }
       } else {
-        let styleEl = IN_BROWSER ? document.getElementById('vuetify-theme-stylesheet') : null;
+        let styleEl = IN_BROWSER ? document.getElementById(parsedOptions.stylesheetId) : null;
         if (IN_BROWSER) {
           vue.watch(styles, updateStyles, {
             immediate: true
@@ -2928,7 +2925,7 @@
           if (typeof document !== 'undefined' && !styleEl) {
             const el = document.createElement('style');
             el.type = 'text/css';
-            el.id = 'vuetify-theme-stylesheet';
+            el.id = parsedOptions.stylesheetId;
             if (parsedOptions.cspNonce) el.setAttribute('nonce', parsedOptions.cspNonce);
             styleEl = el;
             document.head.appendChild(styleEl);
@@ -2977,9 +2974,6 @@
     if (!theme) throw new Error('Could not find Vuetify theme injection');
     return theme;
   }
-  function createCssClass(lines, selector, content) {
-    lines.push(`${selector} {\n`, ...content.map(line => `  ${line};\n`), '}\n');
-  }
   function genCssVariables(theme) {
     const lightOverlay = theme.dark ? 2 : 1;
     const darkOverlay = theme.dark ? 1 : 2;
@@ -3255,6 +3249,8 @@
     }
   }
 
+  // Utilities
+
   // Types
 
   const makeVDialogTransitionProps = propsFactory({
@@ -4601,7 +4597,7 @@
     if (!vm) {
       throw new Error('[Vuetify] useGroupItem composable must be used inside a component setup function');
     }
-    const id = getUid();
+    const id = vue.useId();
     vue.provide(Symbol.for(`${injectKey.description}:id`), id);
     const group = vue.inject(injectKey, null);
     if (!group) {
@@ -6373,7 +6369,7 @@
         slots
       } = _ref;
       const modelValue = useProxiedModel(props, 'modelValue');
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `v-selection-control-group-${uid}`);
       const name = vue.computed(() => props.name || id.value);
       const updateHandlers = new Set();
@@ -6510,7 +6506,7 @@
         backgroundColorStyles,
         trueValue
       } = useSelectionControl(props);
-      const uid = getUid();
+      const uid = vue.useId();
       const isFocused = vue.shallowRef(false);
       const isFocusVisible = vue.shallowRef(false);
       const input = vue.ref();
@@ -6955,7 +6951,7 @@
   }, 'validation');
   function useValidation(props) {
     let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
-    let id = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : getUid();
+    let id = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : vue.useId();
     const model = useProxiedModel(props, 'modelValue');
     const validationModel = vue.computed(() => props.validationValue === undefined ? model.value : props.validationValue);
     const form = useForm(props);
@@ -7147,7 +7143,7 @@
       const {
         InputIcon
       } = useInputIcon(props);
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `input-${uid}`);
       const messagesId = vue.computed(() => `${id.value}-messages`);
       const {
@@ -7255,7 +7251,7 @@
         focus,
         blur
       } = useFocus(props);
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `checkbox-${uid}`);
       useRender(() => {
         const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
@@ -7995,6 +7991,7 @@
 
   const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group');
   const makeVChipGroupProps = propsFactory({
+    baseColor: String,
     column: Boolean,
     filter: Boolean,
     valueComparator: {
@@ -8034,6 +8031,7 @@
       } = useGroup(props, VChipGroupSymbol);
       provideDefaults({
         VChip: {
+          baseColor: vue.toRef(props, 'baseColor'),
           color: vue.toRef(props, 'color'),
           disabled: vue.toRef(props, 'disabled'),
           filter: vue.toRef(props, 'filter'),
@@ -8067,6 +8065,7 @@
     activeClass: String,
     appendAvatar: String,
     appendIcon: IconValue,
+    baseColor: String,
     closable: Boolean,
     closeIcon: {
       type: IconValue,
@@ -8141,11 +8140,6 @@
       const {
         borderClasses
       } = useBorder(props);
-      const {
-        colorClasses,
-        colorStyles,
-        variantClasses
-      } = useVariant(props);
       const {
         densityClasses
       } = useDensity(props);
@@ -8175,6 +8169,18 @@
           emit('click:close', e);
         }
       }));
+      const variantProps = vue.computed(() => {
+        const showColor = !group || group.isSelected.value;
+        return {
+          color: showColor ? props.color ?? props.baseColor : props.baseColor,
+          variant: props.variant
+        };
+      });
+      const {
+        colorClasses,
+        colorStyles,
+        variantClasses
+      } = useVariant(variantProps);
       function onClick(e) {
         emit('click', e);
         if (!isClickable.value) return;
@@ -8195,7 +8201,6 @@
         const hasFilter = !!(slots.filter || props.filter) && group;
         const hasPrependMedia = !!(props.prependIcon || props.prependAvatar);
         const hasPrepend = !!(hasPrependMedia || slots.prepend);
-        const hasColor = !group || group.isSelected.value;
         return isActive.value && vue.withDirectives(vue.createVNode(Tag, vue.mergeProps({
           "class": ['v-chip', {
             'v-chip--disabled': props.disabled,
@@ -8204,8 +8209,8 @@
             'v-chip--filter': hasFilter,
             'v-chip--pill': props.pill,
             [`${props.activeClass}`]: props.activeClass && link.isActive?.value
-          }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, group?.selectedClass.value, props.class],
-          "style": [hasColor ? colorStyles.value : undefined, props.style],
+          }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, group?.selectedClass.value, props.class],
+          "style": [colorStyles.value, props.style],
           "disabled": props.disabled || undefined,
           "draggable": props.draggable,
           "tabindex": isClickable.value ? 0 : undefined,
@@ -8934,7 +8939,7 @@
   };
   const useNestedItem = (id, isGroup) => {
     const parent = vue.inject(VNestedSymbol, emptyNested);
-    const uidSymbol = Symbol(getUid());
+    const uidSymbol = Symbol('nested item');
     const computedId = vue.computed(() => id.value !== undefined ? id.value : uidSymbol);
     const item = {
       ...parent,
@@ -11444,7 +11449,7 @@
       const {
         isRtl
       } = useRtl();
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `v-menu-${uid}`);
       const overlay = vue.ref();
       const parent = vue.inject(VMenuSymbol, null);
@@ -11740,7 +11745,7 @@
       } = useRtl();
       const isActive = vue.computed(() => props.dirty || props.active);
       const hasLabel = vue.computed(() => !props.singleLine && !!(props.label || slots.label));
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `input-${uid}`);
       const messagesId = vue.computed(() => `${id.value}-messages`);
       const labelRef = vue.ref();
@@ -12206,6 +12211,10 @@
       type: [Number, String],
       default: null
     },
+    itemKey: {
+      type: [String, Array, Function],
+      default: null
+    },
     height: [Number, String]
   }, 'virtual');
   function useVirtual(props, items) {
@@ -12384,11 +12393,14 @@
       }
     }
     const computedItems = vue.computed(() => {
-      return items.value.slice(first.value, last.value).map((item, index) => ({
-        raw: item,
-        index: index + first.value,
-        key: isObject(item) && 'value' in item ? item.value : index + first.value
-      }));
+      return items.value.slice(first.value, last.value).map((item, index) => {
+        const _index = index + first.value;
+        return {
+          raw: item,
+          index: _index,
+          key: getPropertyFromItem(item, props.itemKey, _index)
+        };
+      });
     });
     vue.watch(items, () => {
       sizes = Array.from({
@@ -12400,7 +12412,7 @@
       updateOffsets.immediate();
       calculateVisibleItems();
     }, {
-      deep: true
+      deep: 1
     });
     return {
       calculateVisibleItems,
@@ -12906,7 +12918,8 @@
               }, null)), vue.createVNode(VVirtualScroll, {
                 "ref": vVirtualScrollRef,
                 "renderless": true,
-                "items": displayItems.value
+                "items": displayItems.value,
+                "itemKey": "value"
               }, {
                 default: _ref2 => {
                   let {
@@ -13481,7 +13494,8 @@
               }, null)), vue.createVNode(VVirtualScroll, {
                 "ref": vVirtualScrollRef,
                 "renderless": true,
-                "items": displayItems.value
+                "items": displayItems.value,
+                "itemKey": "value"
               }, {
                 default: _ref4 => {
                   let {
@@ -17361,7 +17375,8 @@
               }, null)), vue.createVNode(VVirtualScroll, {
                 "ref": vVirtualScrollRef,
                 "renderless": true,
-                "items": displayItems.value
+                "items": displayItems.value,
+                "itemKey": "value"
               }, {
                 default: _ref4 => {
                   let {
@@ -24901,7 +24916,7 @@
         attrs,
         slots
       } = _ref;
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `radio-group-${uid}`);
       const model = useProxiedModel(props, 'modelValue');
       useRender(() => {
@@ -25264,7 +25279,8 @@
           onClick
         };
       }));
-      const name = vue.computed(() => props.name ?? `v-rating-${getUid()}`);
+      const uid = vue.useId();
+      const name = vue.computed(() => props.name ?? `v-rating-${uid}`);
       function VRatingItem(_ref2) {
         let {
           value,
@@ -25788,6 +25804,8 @@
     }
   }, 'Line');
 
+  // Utilities
+
   // Types
 
   const makeVBarlineProps = propsFactory({
@@ -25801,7 +25819,7 @@
       let {
         slots
       } = _ref;
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `barline-${uid}`);
       const autoDrawDuration = vue.computed(() => Number(props.autoDrawDuration) || 500);
       const hasLabels = vue.computed(() => {
@@ -25984,6 +26002,8 @@
     };
   }
 
+  // Utilities
+
   // Types
 
   const makeVTrendlineProps = propsFactory({
@@ -25997,7 +26017,7 @@
       let {
         slots
       } = _ref;
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `trendline-${uid}`);
       const autoDrawDuration = vue.computed(() => Number(props.autoDrawDuration) || (props.fill ? 500 : 2000));
       const lastLength = vue.ref(0);
@@ -26701,7 +26721,7 @@
       const loaderColor = vue.computed(() => {
         return typeof props.loading === 'string' && props.loading !== '' ? props.loading : props.color;
       });
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `switch-${uid}`);
       function onChange() {
         if (indeterminate.value) {
@@ -27746,7 +27766,7 @@
       const {
         scopeId
       } = useScopeId();
-      const uid = getUid();
+      const uid = vue.useId();
       const id = vue.computed(() => props.id || `v-tooltip-${uid}`);
       const overlay = vue.ref();
       const location = vue.computed(() => {
@@ -28259,7 +28279,6 @@
           };
         }
       }
-      getUid.reset();
       if (typeof __VUE_OPTIONS_API__ !== 'boolean' || __VUE_OPTIONS_API__) {
         app.mixin({
           computed: {
@@ -28288,7 +28307,7 @@
       goTo
     };
   }
-  const version$1 = "3.7.5-master.2024-12-17";
+  const version$1 = "3.7.6-dev.2025-01-06";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -28313,7 +28332,7 @@
       ...options
     });
   };
-  const version = "3.7.5-master.2024-12-17";
+  const version = "3.7.6-dev.2025-01-06";
   createVuetify.version = version;
 
   exports.blueprints = index;