vuetify 3.3.9 → 3.3.11

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.9
+* Vuetify v3.3.11
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -75,6 +75,10 @@
     }
   }, 'component');
 
+  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);
+
   function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
   function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
   function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
@@ -407,12 +411,22 @@
     }
   }
   function focusableChildren(el) {
-    const targets = ['button', '[href]', 'input:not([type="hidden"])', 'select', 'textarea', '[tabindex]'].map(s => `${s}:not([tabindex="-1"]):not([disabled])`).join(', ');
+    let filterByTabIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    const targets = ['button', '[href]', 'input:not([type="hidden"])', 'select', 'textarea', '[tabindex]'].map(s => `${s}${filterByTabIndex ? ':not([tabindex="-1"])' : ''}:not([disabled])`).join(', ');
     return [...el.querySelectorAll(targets)];
   }
+  function getNextElement(elements, location, condition) {
+    let _el;
+    let idx = elements.indexOf(document.activeElement);
+    const inc = location === 'next' ? 1 : -1;
+    do {
+      idx += inc;
+      _el = elements[idx];
+    } while ((!_el || _el.offsetParent == null || !(condition?.(_el) ?? true)) && idx < elements.length && idx >= 0);
+    return _el;
+  }
   function focusChild(el, location) {
     const focusable = focusableChildren(el);
-    const idx = focusable.indexOf(document.activeElement);
     if (!location) {
       if (el === document.activeElement || !el.contains(document.activeElement)) {
         focusable[0]?.focus();
@@ -421,19 +435,26 @@
       focusable[0]?.focus();
     } else if (location === 'last') {
       focusable.at(-1)?.focus();
+    } else if (typeof location === 'number') {
+      focusable[location]?.focus();
     } else {
-      let _el;
-      let idxx = idx;
-      const inc = location === 'next' ? 1 : -1;
-      do {
-        idxx += inc;
-        _el = focusable[idxx];
-      } while ((!_el || _el.offsetParent == null) && idxx < focusable.length && idxx >= 0);
+      const _el = getNextElement(focusable, location);
       if (_el) _el.focus();else focusChild(el, location === 'next' ? 'first' : 'last');
     }
   }
   function noop() {}
 
+  /** Returns null if the selector is not supported or we can't check */
+  function matchesSelector(el, selector) {
+    const supportsSelector = IN_BROWSER && typeof CSS !== 'undefined' && typeof CSS.supports !== 'undefined' && CSS.supports(`selector(${selector})`);
+    if (!supportsSelector) return null;
+    try {
+      return !!el && el.matches(selector);
+    } catch (err) {
+      return null;
+    }
+  }
+
   // Utilities
   const block = ['top', 'bottom'];
   const inline = ['start', 'end', 'left', 'right'];
@@ -1279,11 +1300,6 @@
     return ['scroll', 'auto'].includes(style.overflowY);
   }
 
-  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_FOCUS_VISIBLE = IN_BROWSER && typeof CSS !== 'undefined' && typeof CSS.supports !== 'undefined' && CSS.supports('selector(:focus-visible)');
-
   // Utilities
 
   // Types
@@ -1685,7 +1701,8 @@
     input: {
       clear: 'Clear {0}',
       prependAction: '{0} prepended action',
-      appendAction: '{0} appended action'
+      appendAction: '{0} appended action',
+      otp: 'Please enter OTP character {0}'
     },
     fileInput: {
       counter: '{0} files',
@@ -1706,6 +1723,10 @@
         last: 'Last page'
       }
     },
+    stepper: {
+      next: 'Next',
+      prev: 'Previous'
+    },
     rating: {
       ariaLabel: {
         item: 'Rating {0} of {1}'
@@ -2244,9 +2265,11 @@
       if (head) {
         if (head.push) {
           const entry = head.push(getHead);
-          vue.watch(styles, () => {
-            entry.patch(getHead);
-          });
+          if (IN_BROWSER) {
+            vue.watch(styles, () => {
+              entry.patch(getHead);
+            });
+          }
         } else {
           if (IN_BROWSER) {
             head.addHeadObjs(vue.computed(getHead));
@@ -2257,9 +2280,13 @@
         }
       } else {
         let styleEl = IN_BROWSER ? document.getElementById('vuetify-theme-stylesheet') : null;
-        vue.watch(styles, updateStyles, {
-          immediate: true
-        });
+        if (IN_BROWSER) {
+          vue.watch(styles, updateStyles, {
+            immediate: true
+          });
+        } else {
+          updateStyles();
+        }
         function updateStyles() {
           if (typeof document !== 'undefined' && !styleEl) {
             const el = document.createElement('style');
@@ -3864,7 +3891,7 @@
       throw new Error(`[Vuetify] Could not find useGroup injection with symbol ${injectKey.description}`);
     }
     const value = vue.toRef(props, 'value');
-    const disabled = vue.computed(() => group.disabled.value || props.disabled);
+    const disabled = vue.computed(() => !!(group.disabled.value || props.disabled));
     group.register({
       id,
       value,
@@ -5799,7 +5826,7 @@
       });
       function onFocus(e) {
         isFocused.value = true;
-        if (!SUPPORTS_FOCUS_VISIBLE || SUPPORTS_FOCUS_VISIBLE && e.target.matches(':focus-visible')) {
+        if (matchesSelector(e.target, ':focus-visible') !== false) {
           isFocusVisible.value = true;
         }
       }
@@ -6808,7 +6835,7 @@
             }, [!slots.filter ? vue.createVNode(VIcon, {
               "key": "filter-icon",
               "icon": props.filterIcon
-            }, null) : vue.withDirectives(vue.createVNode(VDefaultsProvider, {
+            }, null) : vue.createVNode(VDefaultsProvider, {
               "key": "filter-defaults",
               "disabled": !props.filterIcon,
               "defaults": {
@@ -6816,7 +6843,7 @@
                   icon: props.filterIcon
                 }
               }
-            }, null), [[vue.resolveDirective("slot"), slots.filter, "default"]])]), [[vue.vShow, group.isSelected.value]])]
+            }, slots.filter)]), [[vue.vShow, group.isSelected.value]])]
           }), hasPrepend && vue.createVNode("div", {
             "key": "prepend",
             "class": "v-chip__prepend"
@@ -8897,7 +8924,7 @@
         runCloseDelay();
       },
       onFocus: e => {
-        if (SUPPORTS_FOCUS_VISIBLE && !e.target.matches(':focus-visible')) return;
+        if (matchesSelector(e.target, ':focus-visible') === false) return;
         isFocused = true;
         e.stopPropagation();
         activatorEl.value = e.currentTarget || e.target;
@@ -9718,6 +9745,20 @@
         }
         return false;
       },
+      set(target, key, value) {
+        if (Reflect.has(target, key)) {
+          return Reflect.set(target, key, value);
+        }
+
+        // Skip internal properties
+        if (typeof key === 'symbol' || key.startsWith('__')) return false;
+        for (const ref of refs) {
+          if (ref.value && Reflect.has(ref.value, key)) {
+            return Reflect.set(ref.value, key, value);
+          }
+        }
+        return false;
+      },
       getOwnPropertyDescriptor(target, key) {
         const descriptor = Reflect.getOwnPropertyDescriptor(target, key);
         if (descriptor) return descriptor;
@@ -9803,8 +9844,30 @@
           }, 40);
         }
       });
+      function onFocusIn(e) {
+        const before = e.relatedTarget;
+        const after = e.target;
+        if (before !== after && overlay.value?.contentEl &&
+        // We're the topmost menu
+        overlay.value?.globalTop &&
+        // It isn't the document or the menu body
+        ![document, overlay.value.contentEl].includes(after) &&
+        // It isn't inside the menu body
+        !overlay.value.contentEl.contains(after)) {
+          const focusable = focusableChildren(overlay.value.contentEl);
+          focusable[0]?.focus();
+        }
+      }
       vue.watch(isActive, val => {
-        val ? parent?.register() : parent?.unregister();
+        if (val) {
+          parent?.register();
+          document.addEventListener('focusin', onFocusIn, {
+            once: true
+          });
+        } else {
+          parent?.unregister();
+          document.removeEventListener('focusin', onFocusIn);
+        }
       });
       function onClickOutside() {
         parent?.closeParents();
@@ -9812,8 +9875,11 @@
       function onKeydown(e) {
         if (props.disabled) return;
         if (e.key === 'Tab') {
-          isActive.value = false;
-          overlay.value?.activatorEl?.focus();
+          const nextElement = getNextElement(focusableChildren(overlay.value?.contentEl, false), e.shiftKey ? 'prev' : 'next', el => el.tabIndex >= 0);
+          if (!nextElement) {
+            isActive.value = false;
+            overlay.value?.activatorEl?.focus();
+          }
         }
       }
       function onActivatorKeydown(e) {
@@ -10727,6 +10793,7 @@
       type: Function,
       default: deepEqual
     },
+    itemColor: String,
     ...makeItemsProps({
       itemChildren: false
     })
@@ -10779,7 +10846,12 @@
       const form = useForm();
       const selections = vue.computed(() => {
         return model.value.map(v => {
-          return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
+          return items.value.find(item => {
+            const itemRawValue = getPropertyFromItem(item.raw, props.itemValue);
+            const modelRawValue = getPropertyFromItem(v.raw, props.itemValue);
+            if (itemRawValue === undefined || modelRawValue === undefined) return false;
+            return props.returnObject ? props.valueComparator(itemRawValue, modelRawValue) : props.valueComparator(item.value, v.value);
+          }) || v;
         });
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
@@ -10808,7 +10880,7 @@
         menu.value = !menu.value;
       }
       function onKeydown(e) {
-        if (props.readonly || form?.isReadonly.value) return;
+        if (!e.key || props.readonly || form?.isReadonly.value) return;
         if (['Enter', ' ', 'ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {
           e.preventDefault();
         }
@@ -10872,6 +10944,16 @@
       function onFocusin(e) {
         isFocused.value = true;
       }
+      function onModelUpdate(v) {
+        if (v == null) model.value = [];else if (matchesSelector(vTextFieldRef.value, ':autofill') || matchesSelector(vTextFieldRef.value, ':-webkit-autofill')) {
+          const item = items.value.find(item => item.title === v);
+          if (item) {
+            select(item);
+          }
+        } else if (vTextFieldRef.value) {
+          vTextFieldRef.value.value = '';
+        }
+      }
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
         const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
@@ -10882,9 +10964,7 @@
           "ref": vTextFieldRef
         }, textFieldProps, {
           "modelValue": model.value.map(v => v.props.value).join(', '),
-          "onUpdate:modelValue": v => {
-            if (v == null) model.value = [];
-          },
+          "onUpdate:modelValue": onModelUpdate,
           "focused": isFocused.value,
           "onUpdate:focused": $event => isFocused.value = $event,
           "validationValue": model.externalValue,
@@ -10897,7 +10977,7 @@
             'v-select--selection-slot': !!slots.selection
           }, props.class],
           "style": props.style,
-          "readonly": true,
+          "inputmode": "none",
           "placeholder": placeholder,
           "onClick:clear": onClear,
           "onMousedown:control": onMousedownControl,
@@ -10927,7 +11007,8 @@
               "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
               "onScrollPassive": onListScroll,
-              "tabindex": "-1"
+              "tabindex": "-1",
+              "color": props.itemColor ?? props.color
             }, {
               default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
@@ -11189,7 +11270,7 @@
       const vTextFieldRef = vue.ref();
       const isFocused = vue.shallowRef(false);
       const isPristine = vue.shallowRef(true);
-      const listHasFocus = vue.ref(false);
+      const listHasFocus = vue.shallowRef(false);
       const vMenuRef = vue.ref();
       const _menu = useProxiedModel(props, 'menu');
       const menu = vue.computed({
@@ -11222,7 +11303,12 @@
       } = useFilter(props, items, () => isPristine.value ? '' : search.value);
       const selections = vue.computed(() => {
         return model.value.map(v => {
-          return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
+          return items.value.find(item => {
+            const itemRawValue = getPropertyFromItem(item.raw, props.itemValue);
+            const modelRawValue = getPropertyFromItem(v.raw, props.itemValue);
+            if (itemRawValue === undefined || modelRawValue === undefined) return false;
+            return props.returnObject ? props.valueComparator(itemRawValue, modelRawValue) : props.valueComparator(item.value, v.value);
+          }) || v;
         });
       });
       const displayItems = vue.computed(() => {
@@ -11274,11 +11360,8 @@
         if (['Escape'].includes(e.key)) {
           menu.value = false;
         }
-        if (['Enter', 'Escape', 'Tab'].includes(e.key)) {
-          if (highlightFirst.value && ['Enter', 'Tab'].includes(e.key)) {
-            select(filteredItems.value[0]);
-          }
-          isPristine.value = true;
+        if (highlightFirst.value && ['Enter', 'Tab'].includes(e.key)) {
+          select(filteredItems.value[0]);
         }
         if (e.key === 'ArrowDown' && highlightFirst.value) {
           listRef.value?.focus('next');
@@ -11319,6 +11402,14 @@
       function onInput(e) {
         search.value = e.target.value;
       }
+      function onChange(e) {
+        if (matchesSelector(vTextFieldRef.value, ':autofill') || matchesSelector(vTextFieldRef.value, ':-webkit-autofill')) {
+          const item = items.value.find(item => item.title === e.target.value);
+          if (item) {
+            select(item);
+          }
+        }
+      }
       function onAfterLeave() {
         if (isFocused.value) {
           isPristine.value = true;
@@ -11398,6 +11489,7 @@
           "validationValue": model.externalValue,
           "dirty": isDirty,
           "onInput": onInput,
+          "onChange": onChange,
           "class": ['v-autocomplete', `v-autocomplete--${props.multiple ? 'multiple' : 'single'}`, {
             'v-autocomplete--active-menu': menu.value,
             'v-autocomplete--chips': !!props.chips,
@@ -11435,7 +11527,8 @@
               "onFocusin": onFocusin,
               "onFocusout": onFocusout,
               "onScrollPassive": onListScroll,
-              "tabindex": "-1"
+              "tabindex": "-1",
+              "color": props.itemColor ?? props.color
             }, {
               default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
@@ -12483,6 +12576,7 @@
     },
     // TODO: mandatory should probably not be exposed but do this for now
     mandatory: {
+      type: [Boolean, String],
       default: 'force'
     },
     ...makeComponentProps(),
@@ -12850,7 +12944,9 @@
           "style": props.style
         }, [hasContent.value && slots.default?.()]), [[vue.vShow, groupItem.isSelected.value]])]
       }));
-      return {};
+      return {
+        groupItem
+      };
     }
   });
 
@@ -13404,6 +13500,7 @@
     const step = vue.computed(() => +props.step > 0 ? parseFloat(props.step) : 0);
     const decimals = vue.computed(() => Math.max(getDecimals(step.value), getDecimals(min.value)));
     function roundValue(value) {
+      value = parseFloat(value);
       if (step.value <= 0) return value;
       const clamped = clamp(value, min.value, max.value);
       const offset = min.value % step.value;
@@ -13907,9 +14004,8 @@
         rtlClasses
       } = useRtl();
       const steps = useSteps(props);
-      const model = useProxiedModel(props, 'modelValue', undefined, v => {
-        const value = typeof v === 'string' ? parseFloat(v) : v == null ? steps.min.value : v;
-        return steps.roundValue(value);
+      const model = useProxiedModel(props, 'modelValue', undefined, value => {
+        return steps.roundValue(value == null ? steps.min.value : value);
       });
       const {
         min,
@@ -14703,7 +14799,7 @@
       const vTextFieldRef = vue.ref();
       const isFocused = vue.shallowRef(false);
       const isPristine = vue.shallowRef(true);
-      const listHasFocus = vue.ref(false);
+      const listHasFocus = vue.shallowRef(false);
       const vMenuRef = vue.ref();
       const _menu = useProxiedModel(props, 'menu');
       const menu = vue.computed({
@@ -14775,7 +14871,12 @@
       } = useFilter(props, items, () => isPristine.value ? '' : search.value);
       const selections = vue.computed(() => {
         return model.value.map(v => {
-          return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
+          return items.value.find(item => {
+            const itemRawValue = getPropertyFromItem(item.raw, props.itemValue);
+            const modelRawValue = getPropertyFromItem(v.raw, props.itemValue);
+            if (itemRawValue === undefined || modelRawValue === undefined) return false;
+            return props.returnObject ? props.valueComparator(itemRawValue, modelRawValue) : props.valueComparator(item.value, v.value);
+          }) || v;
         });
       });
       const displayItems = vue.computed(() => {
@@ -14984,7 +15085,8 @@
               "onFocusin": onFocusin,
               "onFocusout": onFocusout,
               "onScrollPassive": onListScroll,
-              "tabindex": "-1"
+              "tabindex": "-1",
+              "color": props.itemColor ?? props.color
             }, {
               default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
@@ -15402,6 +15504,11 @@
         return !groupItem.isSelected.value && selectedIndices.value.some(selectedIndex => selectedIndex - index === -1);
       });
       vue.provide(VExpansionPanelSymbol, groupItem);
+      provideDefaults({
+        VExpansionPanelText: {
+          eager: vue.toRef(props, 'eager')
+        }
+      });
       useRender(() => {
         const hasText = !!(slots.text || props.text);
         const hasTitle = !!(slots.title || props.title);
@@ -15426,8 +15533,7 @@
           }, {
             default: () => [slots.title ? slots.title() : props.title]
           }), hasText && vue.createVNode(VExpansionPanelText, {
-            "key": "text",
-            "eager": props.eager
+            "key": "text"
           }, {
             default: () => [slots.text ? slots.text() : props.text]
           }), slots.default?.()]
@@ -15615,6 +15721,7 @@
                   "name": props.name,
                   "onClick": e => {
                     e.stopPropagation();
+                    if (isReadonly.value) e.preventDefault();
                     onFocus();
                   },
                   "onChange": e => {
@@ -16387,7 +16494,7 @@
       });
     });
     vue.onBeforeUnmount(() => {
-      document.removeEventListener('scroll', onScroll);
+      window.removeEventListener('scroll', onScroll);
     });
     let lastScrollTop = 0;
     function onScroll() {
@@ -17768,7 +17875,9 @@
           value,
           index,
           rating: normalizedValue.value
-        }) : vue.createVNode(VBtn, btnProps, null)]), vue.createVNode("input", {
+        }) : vue.createVNode(VBtn, vue.mergeProps({
+          "aria-label": t(props.itemAriaLabel, value, props.length)
+        }, btnProps), null)]), vue.createVNode("input", {
           "class": "v-rating__hidden",
           "name": name.value,
           "id": id,
@@ -19835,12 +19944,11 @@
   function endOfMonth(date) {
     return new Date(date.getFullYear(), date.getMonth() + 1, 0);
   }
-  function formatYyyyMmDd(value) {
-    const formattedValue = value.split('-').map(d => d.padStart(2, '0')).join('-');
-    const offsetMin = new Date().getTimezoneOffset() / -60;
-    const offsetSign = offsetMin < 0 ? '-' : '+';
-    const offsetValue = Math.abs(offsetMin).toString().padStart(2, '0');
-    return `${formattedValue}T00:00:00.000${offsetSign}${offsetValue}:00`;
+  function parseLocalDate(value) {
+    const parts = value.split('-').map(Number);
+
+    // new Date() uses local time zone when passing individual date component values
+    return new Date(parts[0], parts[1] - 1, parts[2]);
   }
   const _YYYMMDD = /([12]\d{3}-([1-9]|0[1-9]|1[0-2])-([1-9]|0[1-9]|[12]\d|3[01]))/;
   function date(value) {
@@ -19849,7 +19957,7 @@
     if (typeof value === 'string') {
       let parsed;
       if (_YYYMMDD.test(value)) {
-        parsed = Date.parse(formatYyyyMmDd(value));
+        return parseLocalDate(value);
       } else {
         parsed = Date.parse(value);
       }
@@ -20183,7 +20291,7 @@
       date
     };
   }
-  const version$1 = "3.3.9";
+  const version$1 = "3.3.11";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -20208,7 +20316,7 @@
       ...options
     });
   };
-  const version = "3.3.9";
+  const version = "3.3.11";
   createVuetify.version = version;
 
   exports.components = components;