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

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.8.3-master.2025-05-04
+* Vuetify v3.8.4-dev.2025-05-07
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { shallowRef, reactive, watchEffect, toRef, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, toRefs, toValue, isRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
+import { shallowRef, reactive, watchEffect, toRef, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, getCurrentScope, createVNode, TransitionGroup, Transition, mergeProps, toRefs, toValue, isRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -81,6 +81,7 @@ const IN_BROWSER = typeof window !== 'undefined';
 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"); }
@@ -2295,6 +2296,7 @@ const makeThemeProps = propsFactory({
 function genDefaults$2() {
   return {
     defaultTheme: 'light',
+    prefix: 'v-',
     variations: {
       colors: [],
       lighten: 0,
@@ -2376,7 +2378,10 @@ function genDefaults$2() {
         }
       }
     },
-    stylesheetId: 'vuetify-theme-stylesheet'
+    stylesheetId: 'vuetify-theme-stylesheet',
+    scoped: false,
+    unimportant: false,
+    utilities: true
   };
 }
 function parseThemeOptions() {
@@ -2399,21 +2404,21 @@ function parseThemeOptions() {
 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;
 }
@@ -2457,7 +2462,8 @@ function getScopedSelector(selector, scope) {
   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;
 }
@@ -2477,8 +2483,17 @@ function getOrCreateStyleElement(id, cspNonce) {
 // Composables
 function createTheme(options) {
   const parsedOptions = parseThemeOptions(options);
-  const name = shallowRef(parsedOptions.defaultTheme);
+  const _name = shallowRef(parsedOptions.defaultTheme);
   const themes = ref(parsedOptions.themes);
+  const systemName = shallowRef('light');
+  const name = computed({
+    get() {
+      return _name.value === 'system' ? systemName.value : _name.value;
+    },
+    set(val) {
+      _name.value = val;
+    }
+  });
   const computedThemes = computed(() => {
     const acc = {};
     for (const [name, original] of Object.entries(themes.value)) {
@@ -2499,28 +2514,49 @@ function createTheme(options) {
   const current = toRef(() => computedThemes.value[name.value]);
   const styles = 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 = toRef(() => parsedOptions.isDisabled ? undefined : `${parsedOptions.prefix}theme--${name.value}`);
+  const themeNames = 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 (getCurrentScope()) {
+      onScopeDispose(() => {
+        media.removeEventListener('change', updateSystemName);
+      });
+    }
+  }
   function install(app) {
     if (parsedOptions.isDisabled) return;
     const head = app._context.provides.usehead;
@@ -2558,22 +2594,55 @@ function createTheme(options) {
         updateStyles();
       }
       function updateStyles() {
-        upsertStyles(getOrCreateStyleElement(parsedOptions.stylesheetId, parsedOptions.cspNonce), styles.value);
+        upsertStyles(parsedOptions.stylesheetId, parsedOptions.cspNonce, styles.value);
       }
     }
   }
-  const themeClasses = 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
     }
   };
@@ -2584,7 +2653,7 @@ function provideTheme(props) {
   if (!theme) throw new Error('Could not find Vuetify theme injection');
   const name = toRef(() => props.theme ?? theme.name.value);
   const current = toRef(() => theme.themes.value[name.value]);
-  const themeClasses = toRef(() => theme.isDisabled ? undefined : `v-theme--${name.value}`);
+  const themeClasses = toRef(() => theme.isDisabled ? undefined : `${theme.prefix}theme--${name.value}`);
   const newTheme = {
     ...theme,
     name,
@@ -2923,10 +2992,10 @@ const VDialogTransition = genericComponent()({
       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,
@@ -4131,9 +4200,15 @@ function useVariant(props) {
   };
 }
 
+// Types
+
 const makeVBtnGroupProps = propsFactory({
   baseColor: String,
   divided: Boolean,
+  direction: {
+    type: String,
+    default: 'horizontal'
+  },
   ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDensityProps(),
@@ -4167,7 +4242,7 @@ const VBtnGroup = genericComponent()({
     } = useRounded(props);
     provideDefaults({
       VBtn: {
-        height: 'auto',
+        height: toRef(() => props.direction === 'horizontal' ? 'auto' : null),
         baseColor: toRef(() => props.baseColor),
         color: toRef(() => props.color),
         density: toRef(() => props.density),
@@ -4177,7 +4252,7 @@ const VBtnGroup = genericComponent()({
     });
     useRender(() => {
       return 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
@@ -10164,7 +10239,7 @@ function connectedLocationStrategy(data, props, contentStyles) {
     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
 
@@ -12352,7 +12427,12 @@ function useVirtual(props, items) {
   }
   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);
@@ -13502,6 +13582,11 @@ const VAutocomplete = genericComponent()({
         menu.value = true;
       }
     });
+    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;
@@ -14121,7 +14206,7 @@ const VDialog = genericComponent()({
     }
     function onAfterEnter() {
       emit('afterEnter');
-      if (overlay.value?.contentEl && !overlay.value.contentEl.contains(document.activeElement)) {
+      if ((props.scrim || props.retainFocus) && overlay.value?.contentEl && !overlay.value.contentEl.contains(document.activeElement)) {
         overlay.value.contentEl.focus({
           preventScroll: true
         });
@@ -20329,7 +20414,6 @@ const VDataTableHeaders = genericComponent()({
       });
     };
     const VDataTableMobileHeaderCell = () => {
-      const headerProps = mergeProps(props.headerProps ?? {} ?? {});
       const displayItems = computed(() => {
         return columns.value.filter(column => column?.sortable && !props.disableSort);
       });
@@ -20342,7 +20426,7 @@ const VDataTableHeaders = genericComponent()({
         "tag": "th",
         "class": [...headerCellClasses.value],
         "colspan": headers.value.length + 1
-      }, headerProps), {
+      }, props.headerProps), {
         default: () => [createVNode("div", {
           "class": "v-data-table-header__content"
         }, [createVNode(VSelect, {
@@ -23265,6 +23349,7 @@ const VFileInput = genericComponent()({
     const inputRef = ref();
     const isActive = toRef(() => isFocused.value || props.active);
     const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant));
+    const isDragging = shallowRef(false);
     function onFocus() {
       if (inputRef.value !== document.activeElement) {
         inputRef.value?.focus();
@@ -23291,11 +23376,26 @@ const VFileInput = genericComponent()({
     }
     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
+      }));
     }
     watch(model, newValue => {
       const hasModelReset = !Array.isArray(newValue) || !newValue.length;
@@ -23317,6 +23417,7 @@ const VFileInput = genericComponent()({
         "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],
@@ -23378,6 +23479,7 @@ const VFileInput = genericComponent()({
                   const target = e.target;
                   model.value = [...(target.files ?? [])];
                 },
+                "onDragleave": onDragleave,
                 "onFocus": onFocus,
                 "onBlur": blur
               }, slotProps, inputAttrs), null), createVNode("div", {
@@ -29430,43 +29532,31 @@ const VFileUpload = genericComponent()({
       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 = shallowRef(false);
+    const isDragging = shallowRef(false);
     const vSheetRef = ref(null);
     const inputRef = ref(null);
-    onMounted(() => {
-      vSheetRef.value?.$el.addEventListener('dragover', onDragOver);
-      vSheetRef.value?.$el.addEventListener('drop', onDrop);
-    });
-    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();
@@ -29502,11 +29592,11 @@ const VFileUpload = genericComponent()({
         "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), {
@@ -29557,7 +29647,7 @@ const VFileUpload = genericComponent()({
         })]), props.subtitle && createVNode("div", {
           "class": "v-file-upload-subtitle"
         }, [props.subtitle])]), createVNode(VOverlay, {
-          "model-value": dragOver.value,
+          "model-value": isDragging.value,
           "contained": true,
           "scrim": props.scrim
         }, null), slots.input?.({
@@ -30255,8 +30345,8 @@ const VTimePickerClock = genericComponent()({
         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) {
@@ -31660,7 +31750,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.8.3-master.2025-05-04";
+const version$1 = "3.8.4-dev.2025-05-07";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -31958,7 +32048,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.8.3-master.2025-05-04";
+const version = "3.8.4-dev.2025-05-07";
 
 /* eslint-disable local-rules/sort-imports */