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

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* 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.
 */
 
-import { shallowRef, Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, unref, warn, getCurrentInstance as getCurrentInstance$1, ref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, createVNode, mergeProps, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, TransitionGroup, Transition, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText, resolveComponent, render } from 'vue';
+import { shallowRef, Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, unref, warn, getCurrentInstance as getCurrentInstance$1, ref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, createVNode, mergeProps, onBeforeUnmount, watch, readonly, useId, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, TransitionGroup, Transition, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText, resolveComponent, render } from 'vue';
 
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -1247,9 +1247,6 @@ const makeComponentProps = propsFactory({
 }, 'component');
 
 // Utilities
-
-// Types
-
 function getCurrentInstance(name, message) {
   const vm = getCurrentInstance$1();
   if (!vm) {
@@ -1262,20 +1259,6 @@ function getCurrentInstanceName() {
   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
 
@@ -2092,7 +2075,7 @@ function useLayout() {
 function useLayoutItem(options) {
   const layout = inject$1(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-${useId()}`;
   const vm = getCurrentInstance('useLayoutItem');
   provide(VuetifyLayoutItemKey, {
     id
@@ -2802,7 +2785,8 @@ function genDefaults$1() {
           'theme-on-code': '#CCCCCC'
         }
       }
-    }
+    },
+    stylesheetId: 'vuetify-theme-stylesheet'
   };
 }
 function parseThemeOptions() {
@@ -2859,6 +2843,19 @@ function createTheme(options) {
     return acc;
   });
   const current = 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 = computed(() => {
     const lines = [];
     if (current.value?.dark) {
@@ -2887,7 +2884,7 @@ function createTheme(options) {
     return {
       style: [{
         children: styles.value,
-        id: 'vuetify-theme-stylesheet',
+        id: parsedOptions.stylesheetId,
         nonce: parsedOptions.cspNonce || false
       }]
     };
@@ -2912,7 +2909,7 @@ function createTheme(options) {
         }
       }
     } else {
-      let styleEl = IN_BROWSER ? document.getElementById('vuetify-theme-stylesheet') : null;
+      let styleEl = IN_BROWSER ? document.getElementById(parsedOptions.stylesheetId) : null;
       if (IN_BROWSER) {
         watch(styles, updateStyles, {
           immediate: true
@@ -2924,7 +2921,7 @@ function createTheme(options) {
         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);
@@ -2973,9 +2970,6 @@ function useTheme() {
   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;
@@ -3251,6 +3245,8 @@ function ExpandTransitionGenerator () {
   }
 }
 
+// Utilities
+
 // Types
 
 const makeVDialogTransitionProps = propsFactory({
@@ -4597,7 +4593,7 @@ function useGroupItem(props, injectKey) {
   if (!vm) {
     throw new Error('[Vuetify] useGroupItem composable must be used inside a component setup function');
   }
-  const id = getUid();
+  const id = useId();
   provide(Symbol.for(`${injectKey.description}:id`), id);
   const group = inject$1(injectKey, null);
   if (!group) {
@@ -6369,7 +6365,7 @@ const VSelectionControlGroup = genericComponent()({
       slots
     } = _ref;
     const modelValue = useProxiedModel(props, 'modelValue');
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `v-selection-control-group-${uid}`);
     const name = computed(() => props.name || id.value);
     const updateHandlers = new Set();
@@ -6506,7 +6502,7 @@ const VSelectionControl = genericComponent()({
       backgroundColorStyles,
       trueValue
     } = useSelectionControl(props);
-    const uid = getUid();
+    const uid = useId();
     const isFocused = shallowRef(false);
     const isFocusVisible = shallowRef(false);
     const input = ref();
@@ -6951,7 +6947,7 @@ const makeValidationProps = propsFactory({
 }, '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] : useId();
   const model = useProxiedModel(props, 'modelValue');
   const validationModel = computed(() => props.validationValue === undefined ? model.value : props.validationValue);
   const form = useForm(props);
@@ -7143,7 +7139,7 @@ const VInput = genericComponent()({
     const {
       InputIcon
     } = useInputIcon(props);
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `input-${uid}`);
     const messagesId = computed(() => `${id.value}-messages`);
     const {
@@ -7251,7 +7247,7 @@ const VCheckbox = genericComponent()({
       focus,
       blur
     } = useFocus(props);
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `checkbox-${uid}`);
     useRender(() => {
       const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
@@ -7991,6 +7987,7 @@ const VSlideGroup = genericComponent()({
 
 const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group');
 const makeVChipGroupProps = propsFactory({
+  baseColor: String,
   column: Boolean,
   filter: Boolean,
   valueComparator: {
@@ -8030,6 +8027,7 @@ const VChipGroup = genericComponent()({
     } = useGroup(props, VChipGroupSymbol);
     provideDefaults({
       VChip: {
+        baseColor: toRef(props, 'baseColor'),
         color: toRef(props, 'color'),
         disabled: toRef(props, 'disabled'),
         filter: toRef(props, 'filter'),
@@ -8063,6 +8061,7 @@ const makeVChipProps = propsFactory({
   activeClass: String,
   appendAvatar: String,
   appendIcon: IconValue,
+  baseColor: String,
   closable: Boolean,
   closeIcon: {
     type: IconValue,
@@ -8137,11 +8136,6 @@ const VChip = genericComponent()({
     const {
       borderClasses
     } = useBorder(props);
-    const {
-      colorClasses,
-      colorStyles,
-      variantClasses
-    } = useVariant(props);
     const {
       densityClasses
     } = useDensity(props);
@@ -8171,6 +8165,18 @@ const VChip = genericComponent()({
         emit('click:close', e);
       }
     }));
+    const variantProps = 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;
@@ -8191,7 +8197,6 @@ const VChip = genericComponent()({
       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 && withDirectives(createVNode(Tag, mergeProps({
         "class": ['v-chip', {
           'v-chip--disabled': props.disabled,
@@ -8200,8 +8205,8 @@ const VChip = genericComponent()({
           '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,
@@ -8930,7 +8935,7 @@ const useNested = props => {
 };
 const useNestedItem = (id, isGroup) => {
   const parent = inject$1(VNestedSymbol, emptyNested);
-  const uidSymbol = Symbol(getUid());
+  const uidSymbol = Symbol('nested item');
   const computedId = computed(() => id.value !== undefined ? id.value : uidSymbol);
   const item = {
     ...parent,
@@ -11440,7 +11445,7 @@ const VMenu = genericComponent()({
     const {
       isRtl
     } = useRtl();
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `v-menu-${uid}`);
     const overlay = ref();
     const parent = inject$1(VMenuSymbol, null);
@@ -11736,7 +11741,7 @@ const VField = genericComponent()({
     } = useRtl();
     const isActive = computed(() => props.dirty || props.active);
     const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label));
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `input-${uid}`);
     const messagesId = computed(() => `${id.value}-messages`);
     const labelRef = ref();
@@ -12202,6 +12207,10 @@ const makeVirtualProps = propsFactory({
     type: [Number, String],
     default: null
   },
+  itemKey: {
+    type: [String, Array, Function],
+    default: null
+  },
   height: [Number, String]
 }, 'virtual');
 function useVirtual(props, items) {
@@ -12380,11 +12389,14 @@ function useVirtual(props, items) {
     }
   }
   const computedItems = 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)
+      };
+    });
   });
   watch(items, () => {
     sizes = Array.from({
@@ -12396,7 +12408,7 @@ function useVirtual(props, items) {
     updateOffsets.immediate();
     calculateVisibleItems();
   }, {
-    deep: true
+    deep: 1
   });
   return {
     calculateVisibleItems,
@@ -12902,7 +12914,8 @@ const VSelect = genericComponent()({
             }, null)), createVNode(VVirtualScroll, {
               "ref": vVirtualScrollRef,
               "renderless": true,
-              "items": displayItems.value
+              "items": displayItems.value,
+              "itemKey": "value"
             }, {
               default: _ref2 => {
                 let {
@@ -13477,7 +13490,8 @@ const VAutocomplete = genericComponent()({
             }, null)), createVNode(VVirtualScroll, {
               "ref": vVirtualScrollRef,
               "renderless": true,
-              "items": displayItems.value
+              "items": displayItems.value,
+              "itemKey": "value"
             }, {
               default: _ref4 => {
                 let {
@@ -17357,7 +17371,8 @@ const VCombobox = genericComponent()({
             }, null)), createVNode(VVirtualScroll, {
               "ref": vVirtualScrollRef,
               "renderless": true,
-              "items": displayItems.value
+              "items": displayItems.value,
+              "itemKey": "value"
             }, {
               default: _ref4 => {
                 let {
@@ -24897,7 +24912,7 @@ const VRadioGroup = genericComponent()({
       attrs,
       slots
     } = _ref;
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `radio-group-${uid}`);
     const model = useProxiedModel(props, 'modelValue');
     useRender(() => {
@@ -25260,7 +25275,8 @@ const VRating = genericComponent()({
         onClick
       };
     }));
-    const name = computed(() => props.name ?? `v-rating-${getUid()}`);
+    const uid = useId();
+    const name = computed(() => props.name ?? `v-rating-${uid}`);
     function VRatingItem(_ref2) {
       let {
         value,
@@ -25784,6 +25800,8 @@ const makeLineProps = propsFactory({
   }
 }, 'Line');
 
+// Utilities
+
 // Types
 
 const makeVBarlineProps = propsFactory({
@@ -25797,7 +25815,7 @@ const VBarline = genericComponent()({
     let {
       slots
     } = _ref;
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `barline-${uid}`);
     const autoDrawDuration = computed(() => Number(props.autoDrawDuration) || 500);
     const hasLabels = computed(() => {
@@ -25980,6 +25998,8 @@ function moveTo(to, from, radius) {
   };
 }
 
+// Utilities
+
 // Types
 
 const makeVTrendlineProps = propsFactory({
@@ -25993,7 +26013,7 @@ const VTrendline = genericComponent()({
     let {
       slots
     } = _ref;
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `trendline-${uid}`);
     const autoDrawDuration = computed(() => Number(props.autoDrawDuration) || (props.fill ? 500 : 2000));
     const lastLength = ref(0);
@@ -26697,7 +26717,7 @@ const VSwitch = genericComponent()({
     const loaderColor = computed(() => {
       return typeof props.loading === 'string' && props.loading !== '' ? props.loading : props.color;
     });
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `switch-${uid}`);
     function onChange() {
       if (indeterminate.value) {
@@ -27742,7 +27762,7 @@ const VTooltip = genericComponent()({
     const {
       scopeId
     } = useScopeId();
-    const uid = getUid();
+    const uid = useId();
     const id = computed(() => props.id || `v-tooltip-${uid}`);
     const overlay = ref();
     const location = computed(() => {
@@ -28255,7 +28275,6 @@ function createVuetify$1() {
         };
       }
     }
-    getUid.reset();
     if (typeof __VUE_OPTIONS_API__ !== 'boolean' || __VUE_OPTIONS_API__) {
       app.mixin({
         computed: {
@@ -28284,7 +28303,7 @@ function createVuetify$1() {
     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
@@ -28309,7 +28328,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.7.5-master.2024-12-17";
+const version = "3.7.6-dev.2025-01-06";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };