vuetify 3.9.5 → 3.9.7

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.5
+* Vuetify v3.9.7
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -3965,14 +3965,14 @@ function useRounded(props) {
     const rounded = isRef(props) ? props.value : props.rounded;
     const tile = isRef(props) ? props.value : props.tile;
     const classes = [];
-    if (rounded === true || rounded === '') {
+    if (tile || rounded === false) {
+      classes.push('rounded-0');
+    } else if (rounded === true || rounded === '') {
       classes.push(`${name}--rounded`);
     } else if (typeof rounded === 'string' || rounded === 0) {
       for (const value of String(rounded).split(' ')) {
         classes.push(`rounded-${value}`);
       }
-    } else if (tile || rounded === false) {
-      classes.push('rounded-0');
     }
     return classes;
   });
@@ -5604,7 +5604,6 @@ const VProgressLinear = genericComponent()({
     const normalizedValue = computed(() => clamp(parseFloat(progress.value) / max.value * 100, 0, 100));
     const isReversed = computed(() => isRtl.value !== props.reverse);
     const transition = computed(() => props.indeterminate ? 'fade-transition' : 'slide-x-transition');
-    const isForcedColorsModeActive = IN_BROWSER && window.matchMedia?.('(forced-colors: active)').matches;
     function handleClick(e) {
       if (!intersectionRef.value) return;
       const {
@@ -5653,13 +5652,13 @@ const VProgressLinear = genericComponent()({
           '--v-progress-linear-stream-to': convertToUnit(height.value * (isReversed.value ? 1 : -1))
         }
       }, null), createElementVNode("div", {
-        "class": normalizeClass(['v-progress-linear__background', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined]),
+        "class": normalizeClass(['v-progress-linear__background', backgroundColorClasses.value]),
         "style": normalizeStyle([backgroundColorStyles.value, {
           opacity: parseFloat(props.bgOpacity),
           width: props.stream ? 0 : undefined
         }])
       }, null), createElementVNode("div", {
-        "class": normalizeClass(['v-progress-linear__buffer', !isForcedColorsModeActive ? bufferColorClasses.value : undefined]),
+        "class": normalizeClass(['v-progress-linear__buffer', bufferColorClasses.value]),
         "style": normalizeStyle([bufferColorStyles.value, {
           opacity: parseFloat(props.bufferOpacity),
           width: convertToUnit(normalizedBuffer.value, '%')
@@ -5668,7 +5667,7 @@ const VProgressLinear = genericComponent()({
         "name": transition.value
       }, {
         default: () => [!props.indeterminate ? createElementVNode("div", {
-          "class": normalizeClass(['v-progress-linear__determinate', !isForcedColorsModeActive ? barColorClasses.value : undefined]),
+          "class": normalizeClass(['v-progress-linear__determinate', barColorClasses.value]),
           "style": normalizeStyle([barColorStyles.value, {
             width: convertToUnit(normalizedValue.value, '%')
           }])
@@ -5676,7 +5675,7 @@ const VProgressLinear = genericComponent()({
           "class": "v-progress-linear__indeterminate"
         }, [['long', 'short'].map(bar => createElementVNode("div", {
           "key": bar,
-          "class": normalizeClass(['v-progress-linear__indeterminate', bar, !isForcedColorsModeActive ? barColorClasses.value : undefined]),
+          "class": normalizeClass(['v-progress-linear__indeterminate', bar, barColorClasses.value]),
           "style": normalizeStyle(barColorStyles.value)
         }, null))])]
       }), slots.default && createElementVNode("div", {
@@ -8448,6 +8447,7 @@ const VSlideGroup = genericComponent()({
       select: group.select,
       isSelected: group.isSelected
     }));
+    const hasOverflowOrScroll = computed(() => isOverflowing.value || Math.abs(scrollOffset.value) > 0);
     const hasAffixes = computed(() => {
       switch (props.showArrows) {
         // Always show arrows on desktop & mobile
@@ -8461,17 +8461,17 @@ const VSlideGroup = genericComponent()({
         // Show arrows on mobile when overflowing.
         // This matches the default 2.2 behavior
         case true:
-          return isOverflowing.value || Math.abs(scrollOffset.value) > 0;
+          return hasOverflowOrScroll.value;
 
         // Always show on mobile
         case 'mobile':
-          return mobile.value || isOverflowing.value || Math.abs(scrollOffset.value) > 0;
+          return mobile.value || hasOverflowOrScroll.value;
 
         // https://material.io/components/tabs#scrollable-tabs
         // Always show arrows when
         // overflowed on desktop
         default:
-          return !mobile.value && (isOverflowing.value || Math.abs(scrollOffset.value) > 0);
+          return !mobile.value && hasOverflowOrScroll.value;
       }
     });
     const hasPrev = computed(() => {
@@ -8479,7 +8479,7 @@ const VSlideGroup = genericComponent()({
       return Math.abs(scrollOffset.value) > 1;
     });
     const hasNext = computed(() => {
-      if (!containerRef.value) return false;
+      if (!containerRef.value || !hasOverflowOrScroll.value) return false;
       const scrollSize = getScrollSize(isHorizontal.value, containerRef.el);
       const clientSize = getClientSize(isHorizontal.value, containerRef.el);
       const scrollSizeMax = scrollSize - clientSize;
@@ -9476,7 +9476,7 @@ const useNested = props => {
   function getPath(id) {
     const path = [];
     let parent = toRaw(id);
-    while (parent != null) {
+    while (parent !== undefined) {
       path.unshift(parent);
       parent = parents.value.get(parent);
     }
@@ -9622,7 +9622,10 @@ const useNested = props => {
 const useNestedItem = (id, isDisabled, isGroup) => {
   const parent = inject$1(VNestedSymbol, emptyNested);
   const uidSymbol = Symbol('nested item');
-  const computedId = computed(() => toRaw(toValue(id)) ?? uidSymbol);
+  const computedId = computed(() => {
+    const idValue = toRaw(toValue(id));
+    return idValue !== undefined ? idValue : uidSymbol;
+  });
   const item = {
     ...parent,
     id: computedId,
@@ -12782,7 +12785,7 @@ const VTextField = genericComponent()({
             "onClick:prependInner": props['onClick:prependInner'],
             "onClick:appendInner": props['onClick:appendInner'],
             "role": props.role
-          }, fieldProps, {
+          }, omit(fieldProps, ['onClick:clear']), {
             "id": id.value,
             "active": isActive.value || isDirty.value,
             "dirty": isDirty.value || props.dirty,
@@ -13833,11 +13836,13 @@ function filterItems(items, query, options) {
     const defaultMatches = {};
     let match = -1;
     if ((query || customFiltersLength > 0) && !options?.noFilter) {
+      let hasOnlyCustomFilters = false;
       if (typeof item === 'object') {
         if (item.type === 'divider' || item.type === 'subheader') {
           continue;
         }
         const filterKeys = keys || Object.keys(transformed);
+        hasOnlyCustomFilters = filterKeys.length === customFiltersLength;
         for (const key of filterKeys) {
           const value = getPropertyFromItem(transformed, key);
           const keyFilter = options?.customKeyFilter?.[key];
@@ -13858,7 +13863,7 @@ function filterItems(items, query, options) {
       const customMatchesLength = Object.keys(customMatches).length;
       if (!defaultMatchesLength && !customMatchesLength) continue;
       if (options?.filterMode === 'union' && customMatchesLength !== customFiltersLength && !defaultMatchesLength) continue;
-      if (options?.filterMode === 'intersection' && (customMatchesLength !== customFiltersLength || !defaultMatchesLength)) continue;
+      if (options?.filterMode === 'intersection' && (customMatchesLength !== customFiltersLength || !defaultMatchesLength && customFiltersLength > 0 && !hasOnlyCustomFilters)) continue;
     }
     array.push({
       index: i,
@@ -15532,7 +15537,7 @@ function mounted$3(el, binding) {
   };
   const uid = binding.instance?.$.uid; // TODO: use custom uid generator
 
-  if (!target || !uid) return;
+  if (!target || uid === undefined) return;
   const handlers = createHandlers(binding.value);
   target._touchHandlers = target._touchHandlers ?? Object.create(null);
   target._touchHandlers[uid] = handlers;
@@ -15543,7 +15548,7 @@ function mounted$3(el, binding) {
 function unmounted$3(el, binding) {
   const target = binding.value?.parent ? el.parentElement : el;
   const uid = binding.instance?.$.uid;
-  if (!target?._touchHandlers || !uid) return;
+  if (!target?._touchHandlers || uid === undefined) return;
   const handlers = target._touchHandlers[uid];
   keys(handlers).forEach(eventName => {
     target.removeEventListener(eventName, handlers[eventName]);
@@ -23556,6 +23561,9 @@ const makeVDatePickerYearsProps = propsFactory({
 const VDatePickerYears = genericComponent()({
   name: 'VDatePickerYears',
   props: makeVDatePickerYearsProps(),
+  directives: {
+    vIntersect: Intersect
+  },
   emits: {
     'update:modelValue': year => true
   },
@@ -23592,10 +23600,12 @@ const VDatePickerYears = genericComponent()({
       model.value = model.value ?? adapter.getYear(adapter.date());
     });
     const yearRef = templateRef();
-    onMounted(async () => {
-      await nextTick();
+    function focusSelectedYear() {
       yearRef.el?.focus();
-    });
+      yearRef.el?.scrollIntoView({
+        block: 'center'
+      });
+    }
     function isYearAllowed(year) {
       if (Array.isArray(props.allowedYears) && props.allowedYears.length) {
         return props.allowedYears.includes(year);
@@ -23605,7 +23615,7 @@ const VDatePickerYears = genericComponent()({
       }
       return true;
     }
-    useRender(() => createElementVNode("div", {
+    useRender(() => withDirectives(createElementVNode("div", {
       "class": "v-date-picker-years",
       "style": {
         height: convertToUnit(props.height)
@@ -23636,7 +23646,11 @@ const VDatePickerYears = genericComponent()({
       }) ?? createVNode(VBtn, mergeProps({
         "key": "month"
       }, btnProps), null);
-    })])]));
+    })])]), [[Intersect, {
+      handler: focusSelectedYear
+    }, null, {
+      once: true
+    }]]));
     return {};
   }
 });
@@ -23777,6 +23791,12 @@ const VDatePicker = genericComponent()({
       }
       return targets;
     });
+    const allowedYears = computed(() => {
+      return props.allowedYears || isYearAllowed;
+    });
+    const allowedMonths = computed(() => {
+      return props.allowedMonths || isMonthAllowed;
+    });
     function isAllowedInRange(start, end) {
       const allowedDates = props.allowedDates;
       if (typeof allowedDates !== 'function') return true;
@@ -23786,7 +23806,7 @@ const VDatePicker = genericComponent()({
       }
       return false;
     }
-    function allowedYears(year) {
+    function isYearAllowed(year) {
       if (typeof props.allowedDates === 'function') {
         const startOfYear = adapter.parseISO(`${year}-01-01`);
         return isAllowedInRange(startOfYear, adapter.endOfYear(startOfYear));
@@ -23799,7 +23819,7 @@ const VDatePicker = genericComponent()({
       }
       return true;
     }
-    function allowedMonths(month) {
+    function isMonthAllowed(month) {
       if (typeof props.allowedDates === 'function') {
         const monthTwoDigits = String(month + 1).padStart(2, '0');
         const startOfMonth = adapter.parseISO(`${year.value}-${monthTwoDigits}-01`);
@@ -23927,7 +23947,7 @@ const VDatePicker = genericComponent()({
             "min": minDate.value,
             "max": maxDate.value,
             "year": year.value,
-            "allowedMonths": allowedMonths
+            "allowedMonths": allowedMonths.value
           }), {
             month: slots.month
           }) : viewMode.value === 'year' ? createVNode(VDatePickerYears, mergeProps({
@@ -23937,7 +23957,7 @@ const VDatePicker = genericComponent()({
             "onUpdate:modelValue": [$event => year.value = $event, onUpdateYear],
             "min": minDate.value,
             "max": maxDate.value,
-            "allowedYears": allowedYears
+            "allowedYears": allowedYears.value
           }), {
             year: slots.year
           }) : createVNode(VDatePickerMonth, mergeProps({
@@ -24672,7 +24692,10 @@ const VFileInput = genericComponent()({
         modelValue: _,
         ...inputProps
       } = VInput.filterProps(props);
-      const fieldProps = VField.filterProps(props);
+      const fieldProps = {
+        ...VField.filterProps(props),
+        'onClick:clear': onClear
+      };
       return createVNode(VInput, mergeProps({
         "ref": vInputRef,
         "modelValue": props.multiple ? model.value : model.value[0],
@@ -24703,7 +24726,6 @@ const VFileInput = genericComponent()({
             "prependIcon": props.prependIcon,
             "onMousedown": onControlMousedown,
             "onClick": onControlClick,
-            "onClick:clear": onClear,
             "onClick:prependInner": props['onClick:prependInner'],
             "onClick:appendInner": props['onClick:appendInner']
           }, fieldProps, {
@@ -26394,7 +26416,6 @@ const VNumberInput = genericComponent()({
           "aria-hidden": "true",
           "data-testid": "increment",
           "disabled": !canIncrease.value,
-          "flat": true,
           "height": controlNodeDefaultHeight.value,
           "icon": incrementIcon.value,
           "key": "increment-btn",
@@ -26403,16 +26424,17 @@ const VNumberInput = genericComponent()({
           "onPointerup": onControlMouseup,
           "onPointercancel": onControlMouseup,
           "size": controlNodeSize.value,
+          "variant": "text",
           "tabindex": "-1"
         }, null) : createVNode(VDefaultsProvider, {
           "key": "increment-defaults",
           "defaults": {
             VBtn: {
               disabled: !canIncrease.value,
-              flat: true,
               height: controlNodeDefaultHeight.value,
               size: controlNodeSize.value,
-              icon: incrementIcon.value
+              icon: incrementIcon.value,
+              variant: 'text'
             }
           }
         }, {
@@ -26424,7 +26446,6 @@ const VNumberInput = genericComponent()({
           "aria-hidden": "true",
           "data-testid": "decrement",
           "disabled": !canDecrease.value,
-          "flat": true,
           "height": controlNodeDefaultHeight.value,
           "icon": decrementIcon.value,
           "key": "decrement-btn",
@@ -26433,16 +26454,17 @@ const VNumberInput = genericComponent()({
           "onPointerup": onControlMouseup,
           "onPointercancel": onControlMouseup,
           "size": controlNodeSize.value,
+          "variant": "text",
           "tabindex": "-1"
         }, null) : createVNode(VDefaultsProvider, {
           "key": "decrement-defaults",
           "defaults": {
             VBtn: {
               disabled: !canDecrease.value,
-              flat: true,
               height: controlNodeDefaultHeight.value,
               size: controlNodeSize.value,
-              icon: decrementIcon.value
+              icon: decrementIcon.value,
+              variant: 'text'
             }
           }
         }, {
@@ -26578,6 +26600,7 @@ const VOtpInput = genericComponent()({
     const contentRef = ref();
     const inputRef = ref([]);
     const current = computed(() => inputRef.value[focusIndex.value]);
+    let _isComposing = false;
     useToggleScope(() => props.autofocus, () => {
       const intersectScope = effectScope();
       intersectScope.run(() => {
@@ -26602,6 +26625,7 @@ const VOtpInput = genericComponent()({
         current.value.value = '';
         return;
       }
+      if (_isComposing) return;
       const array = model.value.slice();
       const value = current.value.value;
       array[focusIndex.value] = value;
@@ -26614,6 +26638,10 @@ const VOtpInput = genericComponent()({
       model.value = array;
       if (target) focusChild(contentRef.value, target);
     }
+    function onCompositionend() {
+      _isComposing = false;
+      onInput();
+    }
     function onKeydown(e) {
       const array = model.value.slice();
       const index = focusIndex.value;
@@ -26648,7 +26676,7 @@ const VOtpInput = genericComponent()({
       const finalIndex = clipboardText.length - 1 === -1 ? index : clipboardText.length - 1;
       if (isValidNumber(clipboardText)) return;
       model.value = clipboardText.split('');
-      inputRef.value?.[finalIndex].focus();
+      focusIndex.value = finalIndex;
     }
     function reset() {
       model.value = [];
@@ -26678,7 +26706,6 @@ const VOtpInput = genericComponent()({
     });
     watch(model, val => {
       if (val.length === length.value) {
-        focusIndex.value = length.value - 1;
         emit('finish', val.join(''));
       }
     }, {
@@ -26727,6 +26754,8 @@ const VOtpInput = genericComponent()({
             "onFocus": e => onFocus(e, i),
             "onBlur": onBlur,
             "onKeydown": onKeydown,
+            "onCompositionstart": () => _isComposing = true,
+            "onCompositionend": onCompositionend,
             "onPaste": event => onPaste(i, event)
           }, null);
         }
@@ -27951,7 +27980,7 @@ const VBarline = genericComponent()({
       let minValue = props.min != null ? Number(props.min) : Math.min(...values);
       if (minValue > 0 && props.min == null) minValue = 0;
       if (maxValue < 0 && props.max == null) maxValue = 0;
-      const gridX = maxX / totalValues;
+      const gridX = maxX / (totalValues === 1 ? 2 : totalValues);
       const gridY = (maxY - minY) / (maxValue - minValue || 1);
       const horizonY = maxY - Math.abs(minValue * gridY);
       return values.map((value, index) => {
@@ -27982,7 +28011,7 @@ const VBarline = genericComponent()({
       return labels;
     });
     const bars = computed(() => genBars(items.value, boundary.value));
-    const offsetX = computed(() => (Math.abs(bars.value[0].x - bars.value[1].x) - lineWidth.value) / 2);
+    const offsetX = computed(() => bars.value.length === 1 ? (boundary.value.maxX - lineWidth.value) / 2 : (Math.abs(bars.value[0].x - bars.value[1].x) - lineWidth.value) / 2);
     const smooth = computed(() => typeof props.smooth === 'boolean' ? props.smooth ? 2 : 0 : Number(props.smooth));
     useRender(() => {
       const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse();
@@ -28133,6 +28162,9 @@ const VTrendline = genericComponent()({
         minY,
         maxY
       } = boundary;
+      if (values.length === 1) {
+        values = [values[0], values[0]];
+      }
       const totalValues = values.length;
       const maxValue = props.max != null ? Number(props.max) : Math.max(...values);
       const minValue = props.min != null ? Number(props.min) : Math.min(...values);
@@ -29447,7 +29479,10 @@ const VTextarea = genericComponent()({
         modelValue: _,
         ...inputProps
       } = VInput.filterProps(props);
-      const fieldProps = VField.filterProps(props);
+      const fieldProps = {
+        ...VField.filterProps(props),
+        'onClick:clear': onClear
+      };
       return createVNode(VInput, mergeProps({
         "ref": vInputRef,
         "modelValue": model.value,
@@ -29483,7 +29518,6 @@ const VTextarea = genericComponent()({
             },
             "onClick": onControlClick,
             "onMousedown": onControlMousedown,
-            "onClick:clear": onClear,
             "onClick:prependInner": props['onClick:prependInner'],
             "onClick:appendInner": props['onClick:appendInner']
           }, fieldProps, {
@@ -31540,7 +31574,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.9.5";
+const version$1 = "3.9.7";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -31565,7 +31599,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.9.5";
+const version = "3.9.7";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useHotkey, useLayout, useLocale, useRtl, useTheme, version };