vuetify 3.3.10 → 3.3.12

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.10
+* Vuetify v3.3.12
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -71,6 +71,10 @@ const makeComponentProps = propsFactory({
   }
 }, '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; }
@@ -403,12 +407,22 @@ function callEvent(handler) {
   }
 }
 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();
@@ -417,19 +431,26 @@ function focusChild(el, location) {
     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'];
@@ -1275,11 +1296,6 @@ function isPotentiallyScrollable(el) {
   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
@@ -1681,7 +1697,8 @@ var en = {
   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',
@@ -1702,6 +1719,10 @@ var en = {
       last: 'Last page'
     }
   },
+  stepper: {
+    next: 'Next',
+    prev: 'Previous'
+  },
   rating: {
     ariaLabel: {
       item: 'Rating {0} of {1}'
@@ -2240,9 +2261,11 @@ function createTheme(options) {
     if (head) {
       if (head.push) {
         const entry = head.push(getHead);
-        watch(styles, () => {
-          entry.patch(getHead);
-        });
+        if (IN_BROWSER) {
+          watch(styles, () => {
+            entry.patch(getHead);
+          });
+        }
       } else {
         if (IN_BROWSER) {
           head.addHeadObjs(computed(getHead));
@@ -2253,9 +2276,13 @@ function createTheme(options) {
       }
     } else {
       let styleEl = IN_BROWSER ? document.getElementById('vuetify-theme-stylesheet') : null;
-      watch(styles, updateStyles, {
-        immediate: true
-      });
+      if (IN_BROWSER) {
+        watch(styles, updateStyles, {
+          immediate: true
+        });
+      } else {
+        updateStyles();
+      }
       function updateStyles() {
         if (typeof document !== 'undefined' && !styleEl) {
           const el = document.createElement('style');
@@ -3860,7 +3887,7 @@ function useGroupItem(props, injectKey) {
     throw new Error(`[Vuetify] Could not find useGroup injection with symbol ${injectKey.description}`);
   }
   const value = toRef(props, 'value');
-  const disabled = computed(() => group.disabled.value || props.disabled);
+  const disabled = computed(() => !!(group.disabled.value || props.disabled));
   group.register({
     id,
     value,
@@ -5795,7 +5822,7 @@ const VSelectionControl = genericComponent()({
     });
     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;
       }
     }
@@ -6755,6 +6782,7 @@ const VChip = genericComponent()({
     const closeProps = computed(() => ({
       'aria-label': t(props.closeLabel),
       onClick(e) {
+        e.stopPropagation();
         isActive.value = false;
         emit('click:close', e);
       }
@@ -6804,7 +6832,7 @@ const VChip = genericComponent()({
           }, [!slots.filter ? createVNode(VIcon, {
             "key": "filter-icon",
             "icon": props.filterIcon
-          }, null) : withDirectives(createVNode(VDefaultsProvider, {
+          }, null) : createVNode(VDefaultsProvider, {
             "key": "filter-defaults",
             "disabled": !props.filterIcon,
             "defaults": {
@@ -6812,7 +6840,7 @@ const VChip = genericComponent()({
                 icon: props.filterIcon
               }
             }
-          }, null), [[resolveDirective("slot"), slots.filter, "default"]])]), [[vShow, group.isSelected.value]])]
+          }, slots.filter)]), [[vShow, group.isSelected.value]])]
         }), hasPrepend && createVNode("div", {
           "key": "prepend",
           "class": "v-chip__prepend"
@@ -7626,6 +7654,7 @@ const VListItem = genericComponent()({
         "style": [colorStyles.value, dimensionStyles.value, props.style],
         "href": link.href.value,
         "tabindex": isClickable.value ? list ? -2 : 0 : undefined,
+        "title": props.title,
         "onClick": onClick,
         "onKeydown": isClickable.value && !isLink.value && onKeyDown
       }, {
@@ -8893,7 +8922,7 @@ function useActivator(props, _ref) {
       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;
@@ -9813,8 +9842,30 @@ const VMenu = genericComponent()({
         }, 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();
+      }
+    }
     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();
@@ -9822,8 +9873,11 @@ const VMenu = genericComponent()({
     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) {
@@ -10737,6 +10791,7 @@ const makeSelectProps = propsFactory({
     type: Function,
     default: deepEqual
   },
+  itemColor: String,
   ...makeItemsProps({
     itemChildren: false
   })
@@ -10789,7 +10844,12 @@ const VSelect = genericComponent()({
     const form = useForm();
     const selections = 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 = computed(() => selections.value.map(selection => selection.props.value));
@@ -10883,7 +10943,7 @@ const VSelect = genericComponent()({
       isFocused.value = true;
     }
     function onModelUpdate(v) {
-      if (v == null) model.value = [];else if (vTextFieldRef.value?.matches(':autofill') || vTextFieldRef.value?.matches(':-webkit-autofill')) {
+      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);
@@ -10945,7 +11005,8 @@ const VSelect = genericComponent()({
             "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']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
@@ -11207,7 +11268,7 @@ const VAutocomplete = genericComponent()({
     const vTextFieldRef = ref();
     const isFocused = shallowRef(false);
     const isPristine = shallowRef(true);
-    const listHasFocus = ref(false);
+    const listHasFocus = shallowRef(false);
     const vMenuRef = ref();
     const _menu = useProxiedModel(props, 'menu');
     const menu = computed({
@@ -11240,7 +11301,12 @@ const VAutocomplete = genericComponent()({
     } = useFilter(props, items, () => isPristine.value ? '' : search.value);
     const selections = 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 = computed(() => {
@@ -11292,11 +11358,8 @@ const VAutocomplete = genericComponent()({
       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');
@@ -11338,7 +11401,7 @@ const VAutocomplete = genericComponent()({
       search.value = e.target.value;
     }
     function onChange(e) {
-      if (vTextFieldRef.value?.matches(':autofill') || vTextFieldRef.value?.matches(':-webkit-autofill')) {
+      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);
@@ -11462,7 +11525,8 @@ const VAutocomplete = genericComponent()({
             "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']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
@@ -12510,6 +12574,7 @@ const makeVWindowProps = propsFactory({
   },
   // TODO: mandatory should probably not be exposed but do this for now
   mandatory: {
+    type: [Boolean, String],
     default: 'force'
   },
   ...makeComponentProps(),
@@ -12877,7 +12942,9 @@ const VWindowItem = genericComponent()({
         "style": props.style
       }, [hasContent.value && slots.default?.()]), [[vShow, groupItem.isSelected.value]])]
     }));
-    return {};
+    return {
+      groupItem
+    };
   }
 });
 
@@ -13431,6 +13498,7 @@ const useSteps = props => {
   const step = computed(() => +props.step > 0 ? parseFloat(props.step) : 0);
   const decimals = 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;
@@ -13934,9 +14002,8 @@ const VSlider = genericComponent()({
       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,
@@ -14730,7 +14797,7 @@ const VCombobox = genericComponent()({
     const vTextFieldRef = ref();
     const isFocused = shallowRef(false);
     const isPristine = shallowRef(true);
-    const listHasFocus = ref(false);
+    const listHasFocus = shallowRef(false);
     const vMenuRef = ref();
     const _menu = useProxiedModel(props, 'menu');
     const menu = computed({
@@ -14802,7 +14869,12 @@ const VCombobox = genericComponent()({
     } = useFilter(props, items, () => isPristine.value ? '' : search.value);
     const selections = 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 = computed(() => {
@@ -15011,7 +15083,8 @@ const VCombobox = genericComponent()({
             "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']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
@@ -15429,6 +15502,11 @@ const VExpansionPanel = genericComponent()({
       return !groupItem.isSelected.value && selectedIndices.value.some(selectedIndex => selectedIndex - index === -1);
     });
     provide(VExpansionPanelSymbol, groupItem);
+    provideDefaults({
+      VExpansionPanelText: {
+        eager: toRef(props, 'eager')
+      }
+    });
     useRender(() => {
       const hasText = !!(slots.text || props.text);
       const hasTitle = !!(slots.title || props.title);
@@ -15453,8 +15531,7 @@ const VExpansionPanel = genericComponent()({
         }, {
           default: () => [slots.title ? slots.title() : props.title]
         }), hasText && createVNode(VExpansionPanelText, {
-          "key": "text",
-          "eager": props.eager
+          "key": "text"
         }, {
           default: () => [slots.text ? slots.text() : props.text]
         }), slots.default?.()]
@@ -16072,7 +16149,7 @@ const VRow = genericComponent()({
 });
 
 // Utilities
-const VSpacer = createSimpleFunctional('flex-grow-1', 'div', 'VSpacer');
+const VSpacer = createSimpleFunctional('v-spacer', 'div', 'VSpacer');
 
 // Composables
 const makeVHoverProps = propsFactory({
@@ -17796,7 +17873,9 @@ const VRating = genericComponent()({
         value,
         index,
         rating: normalizedValue.value
-      }) : createVNode(VBtn, btnProps, null)]), createVNode("input", {
+      }) : createVNode(VBtn, mergeProps({
+        "aria-label": t(props.itemAriaLabel, value, props.length)
+      }, btnProps), null)]), createVNode("input", {
         "class": "v-rating__hidden",
         "name": name.value,
         "id": id,
@@ -19863,12 +19942,11 @@ function startOfMonth(date) {
 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) {
@@ -19877,7 +19955,7 @@ function date(value) {
   if (typeof value === 'string') {
     let parsed;
     if (_YYYMMDD.test(value)) {
-      parsed = Date.parse(formatYyyyMmDd(value));
+      return parseLocalDate(value);
     } else {
       parsed = Date.parse(value);
     }
@@ -19892,7 +19970,7 @@ function getWeekdays(locale) {
     const weekday = new Date(sundayJanuarySecond2000);
     weekday.setDate(sundayJanuarySecond2000.getDate() + daysFromSunday + i);
     return new Intl.DateTimeFormat(locale, {
-      weekday: 'short'
+      weekday: 'narrow'
     }).format(weekday);
   });
 }
@@ -20211,7 +20289,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "3.3.10";
+const version$1 = "3.3.12";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -20236,7 +20314,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.3.10";
+const version = "3.3.12";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDefaults, useDisplay, useLayout, useLocale, useRtl, useTheme, version };