@vuetify/nightly 3.8.3-master.2025-05-05 → 3.8.4-dev.2025-05-07

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.3-master.2025-05-05
+* Vuetify v3.8.4-dev.2025-05-07
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -85,6 +85,7 @@
   const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
   const SUPPORTS_TOUCH = IN_BROWSER && ('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
   const SUPPORTS_EYE_DROPPER = IN_BROWSER && 'EyeDropper' in window;
+  const SUPPORTS_MATCH_MEDIA = IN_BROWSER && 'matchMedia' in window && typeof window.matchMedia === 'function';
 
   function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
   function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
@@ -2299,6 +2300,7 @@
   function genDefaults$2() {
     return {
       defaultTheme: 'light',
+      prefix: 'v-',
       variations: {
         colors: [],
         lighten: 0,
@@ -2380,7 +2382,10 @@
           }
         }
       },
-      stylesheetId: 'vuetify-theme-stylesheet'
+      stylesheetId: 'vuetify-theme-stylesheet',
+      scoped: false,
+      unimportant: false,
+      utilities: true
     };
   }
   function parseThemeOptions() {
@@ -2403,21 +2408,21 @@
   function createCssClass(lines, selector, content, scope) {
     lines.push(`${getScopedSelector(selector, scope)} {\n`, ...content.map(line => `  ${line};\n`), '}\n');
   }
-  function genCssVariables(theme) {
+  function genCssVariables(theme, prefix) {
     const lightOverlay = theme.dark ? 2 : 1;
     const darkOverlay = theme.dark ? 1 : 2;
     const variables = [];
     for (const [key, value] of Object.entries(theme.colors)) {
       const rgb = parseColor(value);
-      variables.push(`--v-theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
+      variables.push(`--${prefix}theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
       if (!key.startsWith('on-')) {
-        variables.push(`--v-theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
+        variables.push(`--${prefix}theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
       }
     }
     for (const [key, value] of Object.entries(theme.variables)) {
       const color = typeof value === 'string' && value.startsWith('#') ? parseColor(value) : undefined;
       const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
-      variables.push(`--v-${key}: ${rgb ?? value}`);
+      variables.push(`--${prefix}${key}: ${rgb ?? value}`);
     }
     return variables;
   }
@@ -2461,7 +2466,8 @@
     const scopeSelector = `:where(${scope})`;
     return selector === ':root' ? scopeSelector : `${scopeSelector} ${selector}`;
   }
-  function upsertStyles(styleEl, styles) {
+  function upsertStyles(id, cspNonce, styles) {
+    const styleEl = getOrCreateStyleElement(id, cspNonce);
     if (!styleEl) return;
     styleEl.innerHTML = styles;
   }
@@ -2481,8 +2487,17 @@
   // Composables
   function createTheme(options) {
     const parsedOptions = parseThemeOptions(options);
-    const name = vue.shallowRef(parsedOptions.defaultTheme);
+    const _name = vue.shallowRef(parsedOptions.defaultTheme);
     const themes = vue.ref(parsedOptions.themes);
+    const systemName = vue.shallowRef('light');
+    const name = vue.computed({
+      get() {
+        return _name.value === 'system' ? systemName.value : _name.value;
+      },
+      set(val) {
+        _name.value = val;
+      }
+    });
     const computedThemes = vue.computed(() => {
       const acc = {};
       for (const [name, original] of Object.entries(themes.value)) {
@@ -2503,28 +2518,49 @@
     const current = vue.toRef(() => computedThemes.value[name.value]);
     const styles = vue.computed(() => {
       const lines = [];
+      const important = parsedOptions.unimportant ? '' : ' !important';
+      const scoped = parsedOptions.scoped ? parsedOptions.prefix : '';
       if (current.value?.dark) {
         createCssClass(lines, ':root', ['color-scheme: dark'], parsedOptions.scope);
       }
-      createCssClass(lines, ':root', genCssVariables(current.value), parsedOptions.scope);
+      createCssClass(lines, ':root', genCssVariables(current.value, parsedOptions.prefix), parsedOptions.scope);
       for (const [themeName, theme] of Object.entries(computedThemes.value)) {
-        createCssClass(lines, `.v-theme--${themeName}`, [`color-scheme: ${theme.dark ? 'dark' : 'normal'}`, ...genCssVariables(theme)], parsedOptions.scope);
-      }
-      const bgLines = [];
-      const fgLines = [];
-      const colors = new Set(Object.values(computedThemes.value).flatMap(theme => Object.keys(theme.colors)));
-      for (const key of colors) {
-        if (key.startsWith('on-')) {
-          createCssClass(fgLines, `.${key}`, [`color: rgb(var(--v-theme-${key})) !important`], parsedOptions.scope);
-        } else {
-          createCssClass(bgLines, `.bg-${key}`, [`--v-theme-overlay-multiplier: var(--v-theme-${key}-overlay-multiplier)`, `background-color: rgb(var(--v-theme-${key})) !important`, `color: rgb(var(--v-theme-on-${key})) !important`], parsedOptions.scope);
-          createCssClass(fgLines, `.text-${key}`, [`color: rgb(var(--v-theme-${key})) !important`], parsedOptions.scope);
-          createCssClass(fgLines, `.border-${key}`, [`--v-border-color: var(--v-theme-${key})`], parsedOptions.scope);
+        createCssClass(lines, `.${parsedOptions.prefix}theme--${themeName}`, [`color-scheme: ${theme.dark ? 'dark' : 'normal'}`, ...genCssVariables(theme, parsedOptions.prefix)], parsedOptions.scope);
+      }
+      if (parsedOptions.utilities) {
+        const bgLines = [];
+        const fgLines = [];
+        const colors = new Set(Object.values(computedThemes.value).flatMap(theme => Object.keys(theme.colors)));
+        for (const key of colors) {
+          if (key.startsWith('on-')) {
+            createCssClass(fgLines, `.${key}`, [`color: rgb(var(--${parsedOptions.prefix}theme-${key}))${important}`], parsedOptions.scope);
+          } else {
+            createCssClass(bgLines, `.${scoped}bg-${key}`, [`--${parsedOptions.prefix}theme-overlay-multiplier: var(--${parsedOptions.prefix}theme-${key}-overlay-multiplier)`, `background-color: rgb(var(--${parsedOptions.prefix}theme-${key}))${important}`, `color: rgb(var(--${parsedOptions.prefix}theme-on-${key}))${important}`], parsedOptions.scope);
+            createCssClass(fgLines, `.${scoped}text-${key}`, [`color: rgb(var(--${parsedOptions.prefix}theme-${key}))${important}`], parsedOptions.scope);
+            createCssClass(fgLines, `.${scoped}border-${key}`, [`--${parsedOptions.prefix}border-color: var(--${parsedOptions.prefix}theme-${key})`], parsedOptions.scope);
+          }
         }
+        lines.push(...bgLines, ...fgLines);
       }
-      lines.push(...bgLines, ...fgLines);
       return lines.map((str, i) => i === 0 ? str : `    ${str}`).join('');
     });
+    const themeClasses = vue.toRef(() => parsedOptions.isDisabled ? undefined : `${parsedOptions.prefix}theme--${name.value}`);
+    const themeNames = vue.toRef(() => Object.keys(computedThemes.value));
+    if (SUPPORTS_MATCH_MEDIA) {
+      const media = window.matchMedia('(prefers-color-scheme: dark)');
+      function updateSystemName() {
+        systemName.value = media.matches ? 'dark' : 'light';
+      }
+      updateSystemName();
+      media.addEventListener('change', updateSystemName, {
+        passive: true
+      });
+      if (vue.getCurrentScope()) {
+        vue.onScopeDispose(() => {
+          media.removeEventListener('change', updateSystemName);
+        });
+      }
+    }
     function install(app) {
       if (parsedOptions.isDisabled) return;
       const head = app._context.provides.usehead;
@@ -2562,22 +2598,55 @@
           updateStyles();
         }
         function updateStyles() {
-          upsertStyles(getOrCreateStyleElement(parsedOptions.stylesheetId, parsedOptions.cspNonce), styles.value);
+          upsertStyles(parsedOptions.stylesheetId, parsedOptions.cspNonce, styles.value);
         }
       }
     }
-    const themeClasses = vue.toRef(() => parsedOptions.isDisabled ? undefined : `v-theme--${name.value}`);
+    function change(themeName) {
+      if (!themeNames.value.includes(themeName)) {
+        consoleWarn(`Theme "${themeName}" not found on the Vuetify theme instance`);
+        return;
+      }
+      name.value = themeName;
+    }
+    function cycle() {
+      let themeArray = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : themeNames.value;
+      const currentIndex = themeArray.indexOf(name.value);
+      const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % themeArray.length;
+      change(themeArray[nextIndex]);
+    }
+    function toggle() {
+      let themeArray = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['light', 'dark'];
+      cycle(themeArray);
+    }
+    const globalName = new Proxy(name, {
+      get(target, prop) {
+        return target[prop];
+      },
+      set(target, prop, val) {
+        if (prop === 'value') {
+          deprecate(`theme.global.name.value = ${val}`, `theme.change('${val}')`);
+        }
+        // @ts-expect-error
+        target[prop] = val;
+        return true;
+      }
+    });
     return {
       install,
+      change,
+      cycle,
+      toggle,
       isDisabled: parsedOptions.isDisabled,
       name,
       themes,
       current,
       computedThemes,
+      prefix: parsedOptions.prefix,
       themeClasses,
       styles,
       global: {
-        name,
+        name: globalName,
         current
       }
     };
@@ -2588,7 +2657,7 @@
     if (!theme) throw new Error('Could not find Vuetify theme injection');
     const name = vue.toRef(() => props.theme ?? theme.name.value);
     const current = vue.toRef(() => theme.themes.value[name.value]);
-    const themeClasses = vue.toRef(() => theme.isDisabled ? undefined : `v-theme--${name.value}`);
+    const themeClasses = vue.toRef(() => theme.isDisabled ? undefined : `${theme.prefix}theme--${name.value}`);
     const newTheme = {
       ...theme,
       name,
@@ -2927,10 +2996,10 @@
         async onLeave(el, done) {
           await new Promise(resolve => requestAnimationFrame(resolve));
           let dimensions;
-          if (!Array.isArray(props.target) && !props.target.offsetParent && saved.has(el)) {
-            dimensions = saved.get(el);
-          } else {
+          if (!saved.has(el) || Array.isArray(props.target) || props.target.offsetParent || props.target.getClientRects().length) {
             dimensions = getDimensions(props.target, el);
+          } else {
+            dimensions = saved.get(el);
           }
           const {
             x,
@@ -4135,9 +4204,15 @@
     };
   }
 
+  // Types
+
   const makeVBtnGroupProps = propsFactory({
     baseColor: String,
     divided: Boolean,
+    direction: {
+      type: String,
+      default: 'horizontal'
+    },
     ...makeBorderProps(),
     ...makeComponentProps(),
     ...makeDensityProps(),
@@ -4171,7 +4246,7 @@
       } = useRounded(props);
       provideDefaults({
         VBtn: {
-          height: 'auto',
+          height: vue.toRef(() => props.direction === 'horizontal' ? 'auto' : null),
           baseColor: vue.toRef(() => props.baseColor),
           color: vue.toRef(() => props.color),
           density: vue.toRef(() => props.density),
@@ -4181,7 +4256,7 @@
       });
       useRender(() => {
         return vue.createVNode(props.tag, {
-          "class": ['v-btn-group', {
+          "class": ['v-btn-group', `v-btn-group--${props.direction}`, {
             'v-btn-group--divided': props.divided
           }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class],
           "style": props.style
@@ -10168,7 +10243,7 @@
       observe = false;
       requestAnimationFrame(() => observe = true);
       if (!data.target.value || !data.contentEl.value) return;
-      if (Array.isArray(data.target.value) || data.target.value.offsetParent) {
+      if (Array.isArray(data.target.value) || data.target.value.offsetParent || data.target.value.getClientRects().length) {
         targetBox = getTargetBox(data.target.value);
       } // Otherwise target element is hidden, use last known value
 
@@ -12356,7 +12431,12 @@
     }
     function calculateOffset(index) {
       index = clamp(index, 0, items.value.length - 1);
-      return offsets[index] || 0;
+      const whole = Math.floor(index);
+      const fraction = index % 1;
+      const next = whole + 1;
+      const wholeOffset = offsets[whole] || 0;
+      const nextOffset = offsets[next] || wholeOffset;
+      return wholeOffset + (nextOffset - wholeOffset) * fraction;
     }
     function calculateIndex(scrollTop) {
       return binaryClosest(offsets, scrollTop);
@@ -13506,6 +13586,11 @@
           menu.value = true;
         }
       });
+      vue.watch(model, value => {
+        if (!props.multiple && !hasSelectionSlot.value) {
+          search.value = value[0]?.title ?? '';
+        }
+      });
       useRender(() => {
         const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
         const isDirty = model.value.length > 0;
@@ -20333,7 +20418,6 @@
         });
       };
       const VDataTableMobileHeaderCell = () => {
-        const headerProps = vue.mergeProps(props.headerProps ?? {} ?? {});
         const displayItems = vue.computed(() => {
           return columns.value.filter(column => column?.sortable && !props.disableSort);
         });
@@ -20346,7 +20430,7 @@
           "tag": "th",
           "class": [...headerCellClasses.value],
           "colspan": headers.value.length + 1
-        }, headerProps), {
+        }, props.headerProps), {
           default: () => [vue.createVNode("div", {
             "class": "v-data-table-header__content"
           }, [vue.createVNode(VSelect, {
@@ -23269,6 +23353,7 @@
       const inputRef = vue.ref();
       const isActive = vue.toRef(() => isFocused.value || props.active);
       const isPlainOrUnderlined = vue.computed(() => ['plain', 'underlined'].includes(props.variant));
+      const isDragging = vue.shallowRef(false);
       function onFocus() {
         if (inputRef.value !== document.activeElement) {
           inputRef.value?.focus();
@@ -23295,11 +23380,26 @@
       }
       function onDragover(e) {
         e.preventDefault();
+        e.stopImmediatePropagation();
+        isDragging.value = true;
+      }
+      function onDragleave(e) {
+        e.preventDefault();
+        isDragging.value = false;
       }
       function onDrop(e) {
         e.preventDefault();
-        if (!e.dataTransfer) return;
-        model.value = [...(e.dataTransfer.files ?? [])];
+        e.stopImmediatePropagation();
+        isDragging.value = false;
+        if (!e.dataTransfer?.files?.length || !inputRef.value) return;
+        const dataTransfer = new DataTransfer();
+        for (const file of e.dataTransfer.files) {
+          dataTransfer.items.add(file);
+        }
+        inputRef.value.files = dataTransfer.files;
+        inputRef.value.dispatchEvent(new Event('change', {
+          bubbles: true
+        }));
       }
       vue.watch(model, newValue => {
         const hasModelReset = !Array.isArray(newValue) || !newValue.length;
@@ -23321,6 +23421,7 @@
           "modelValue": props.multiple ? model.value : model.value[0],
           "class": ['v-file-input', {
             'v-file-input--chips': !!props.chips,
+            'v-file-input--dragging': isDragging.value,
             'v-file-input--hide': props.hideInput,
             'v-input--plain-underlined': isPlainOrUnderlined.value
           }, props.class],
@@ -23382,6 +23483,7 @@
                     const target = e.target;
                     model.value = [...(target.files ?? [])];
                   },
+                  "onDragleave": onDragleave,
                   "onFocus": onFocus,
                   "onBlur": blur
                 }, slotProps, inputAttrs), null), vue.createVNode("div", {
@@ -29434,43 +29536,31 @@
         densityClasses
       } = useDensity(props);
       const model = useProxiedModel(props, 'modelValue', props.modelValue, val => wrapInArray(val), val => props.multiple || Array.isArray(props.modelValue) ? val : val[0]);
-      const dragOver = vue.shallowRef(false);
+      const isDragging = vue.shallowRef(false);
       const vSheetRef = vue.ref(null);
       const inputRef = vue.ref(null);
-      vue.onMounted(() => {
-        vSheetRef.value?.$el.addEventListener('dragover', onDragOver);
-        vSheetRef.value?.$el.addEventListener('drop', onDrop);
-      });
-      vue.onUnmounted(() => {
-        vSheetRef.value?.$el.removeEventListener('dragover', onDragOver);
-        vSheetRef.value?.$el.removeEventListener('drop', onDrop);
-      });
-      function onDragOver(e) {
+      function onDragover(e) {
         e.preventDefault();
         e.stopImmediatePropagation();
-        dragOver.value = true;
+        isDragging.value = true;
       }
-      function onDragLeave(e) {
+      function onDragleave(e) {
         e.preventDefault();
-        dragOver.value = false;
+        isDragging.value = false;
       }
       function onDrop(e) {
         e.preventDefault();
         e.stopImmediatePropagation();
-        dragOver.value = false;
-        const files = Array.from(e.dataTransfer?.files ?? []);
-        if (!files.length) return;
-        if (!props.multiple) {
-          model.value = [files[0]];
-          return;
-        }
-        const array = model.value.slice();
-        for (const file of files) {
-          if (!array.some(f => f.name === file.name)) {
-            array.push(file);
-          }
-        }
-        model.value = array;
+        isDragging.value = false;
+        if (!e.dataTransfer?.files?.length || !inputRef.value) return;
+        const dataTransfer = new DataTransfer();
+        for (const file of e.dataTransfer.files) {
+          dataTransfer.items.add(file);
+        }
+        inputRef.value.files = dataTransfer.files;
+        inputRef.value.dispatchEvent(new Event('change', {
+          bubbles: true
+        }));
       }
       function onClick() {
         inputRef.value?.click();
@@ -29506,11 +29596,11 @@
           "class": ['v-file-upload', {
             'v-file-upload--clickable': !hasBrowse,
             'v-file-upload--disabled': props.disabled,
-            'v-file-upload--dragging': dragOver.value
+            'v-file-upload--dragging': isDragging.value
           }, densityClasses.value, props.class],
           "style": [props.style],
-          "onDragleave": onDragLeave,
-          "onDragover": onDragOver,
+          "onDragleave": onDragleave,
+          "onDragover": onDragover,
           "onDrop": onDrop,
           "onClick": !hasBrowse ? onClick : undefined
         }, rootAttrs), {
@@ -29561,7 +29651,7 @@
           })]), props.subtitle && vue.createVNode("div", {
             "class": "v-file-upload-subtitle"
           }, [props.subtitle])]), vue.createVNode(VOverlay, {
-            "model-value": dragOver.value,
+            "model-value": isDragging.value,
             "contained": true,
             "scrim": props.scrim
           }, null), slots.input?.({
@@ -30259,8 +30349,8 @@
           y
         } = getPosition(i);
         return {
-          left: `${50 + x * 50}%`,
-          top: `${50 + y * 50}%`
+          left: `${Math.round(50 + x * 50)}%`,
+          top: `${Math.round(50 + y * 50)}%`
         };
       }
       function euclidean(p0, p1) {
@@ -31664,7 +31754,7 @@
       };
     });
   }
-  const version$1 = "3.8.3-master.2025-05-05";
+  const version$1 = "3.8.4-dev.2025-05-07";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -31962,7 +32052,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.8.3-master.2025-05-05";
+  const version = "3.8.4-dev.2025-05-07";
 
   /* eslint-disable local-rules/sort-imports */