vuetify 3.3.19 → 3.3.21

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.19
+* Vuetify v3.3.21
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -263,6 +263,10 @@ function padEnd(str, length) {
   let char = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '0';
   return str + char.repeat(Math.max(0, length - str.length));
 }
+function padStart(str, length) {
+  let char = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '0';
+  return char.repeat(Math.max(0, length - str.length)) + str;
+}
 function chunk(str) {
   let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   const chunked = [];
@@ -6289,7 +6293,7 @@ function useValidation(props) {
   const isDisabled = computed(() => !!(props.disabled ?? form?.isDisabled.value));
   const isReadonly = computed(() => !!(props.readonly ?? form?.isReadonly.value));
   const errorMessages = computed(() => {
-    return props.errorMessages.length ? wrapInArray(props.errorMessages).slice(0, Math.max(0, +props.maxErrors)) : internalErrorMessages.value;
+    return props.errorMessages?.length ? wrapInArray(props.errorMessages).slice(0, Math.max(0, +props.maxErrors)) : internalErrorMessages.value;
   });
   const validateOn = computed(() => {
     let value = (props.validateOn ?? form?.validateOn.value) || 'input';
@@ -6303,7 +6307,7 @@ function useValidation(props) {
     };
   });
   const isValid = computed(() => {
-    if (props.error || props.errorMessages.length) return false;
+    if (props.error || props.errorMessages?.length) return false;
     if (!props.rules.length) return true;
     if (isPristine.value) {
       return internalErrorMessages.value.length || validateOn.value.lazy ? null : true;
@@ -9799,7 +9803,7 @@ function forwardRefs(target) {
       }
 
       // Skip internal properties
-      if (typeof key === 'symbol' || key.startsWith('__')) return;
+      if (typeof key === 'symbol' || key.startsWith('$') || key.startsWith('__')) return;
       for (const ref of refs) {
         if (ref.value && Reflect.has(ref.value, key)) {
           const val = Reflect.get(ref.value, key);
@@ -9813,7 +9817,7 @@ function forwardRefs(target) {
       }
 
       // Skip internal properties
-      if (typeof key === 'symbol' || key.startsWith('__')) return false;
+      if (typeof key === 'symbol' || key.startsWith('$') || key.startsWith('__')) return false;
       for (const ref of refs) {
         if (ref.value && Reflect.has(ref.value, key)) {
           return true;
@@ -9827,7 +9831,7 @@ function forwardRefs(target) {
       }
 
       // Skip internal properties
-      if (typeof key === 'symbol' || key.startsWith('__')) return false;
+      if (typeof key === 'symbol' || key.startsWith('$') || key.startsWith('__')) return false;
       for (const ref of refs) {
         if (ref.value && Reflect.has(ref.value, key)) {
           return Reflect.set(ref.value, key, value);
@@ -9840,7 +9844,7 @@ function forwardRefs(target) {
       if (descriptor) return descriptor;
 
       // Skip internal properties
-      if (typeof key === 'symbol' || key.startsWith('__')) return;
+      if (typeof key === 'symbol' || key.startsWith('$') || key.startsWith('__')) return;
 
       // Check each ref's own properties
       for (const ref of refs) {
@@ -10453,7 +10457,7 @@ const VTextField = genericComponent()({
       }
     }
     useRender(() => {
-      const hasCounter = !!(slots.counter || props.counter || props.counterValue);
+      const hasCounter = !!(slots.counter || props.counter !== false && props.counter != null);
       const hasDetails = !!(hasCounter || slots.details);
       const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
       const [{
@@ -13126,6 +13130,7 @@ const VColorPickerCanvas = defineComponent({
           x,
           y
         } = val;
+        _dotPosition.value = val;
         emit('update:color', {
           h: props.color?.h ?? 0,
           s: clamp(x, 0, canvasWidth.value) / canvasWidth.value,
@@ -13620,13 +13625,8 @@ const useSlider = _ref => {
     isRtl
   } = useRtl();
   const isReversed = toRef(props, 'reverse');
-  const horizontalDirection = computed(() => {
-    let hd = isRtl.value ? 'rtl' : 'ltr';
-    if (props.reverse) {
-      hd = hd === 'rtl' ? 'ltr' : 'rtl';
-    }
-    return hd;
-  });
+  const vertical = computed(() => props.direction === 'vertical');
+  const indexFromEnd = computed(() => vertical.value !== isReversed.value);
   const {
     min,
     max,
@@ -13639,7 +13639,6 @@ const useSlider = _ref => {
   const trackSize = computed(() => parseInt(props.trackSize, 10));
   const numTicks = computed(() => (max.value - min.value) / step.value);
   const disabled = toRef(props, 'disabled');
-  const vertical = computed(() => props.direction === 'vertical');
   const thumbColor = computed(() => props.error || props.disabled ? undefined : props.thumbColor ?? props.color);
   const trackColor = computed(() => props.error || props.disabled ? undefined : props.trackColor ?? props.color);
   const trackFillColor = computed(() => props.error || props.disabled ? undefined : props.trackFillColor ?? props.color);
@@ -13660,7 +13659,7 @@ const useSlider = _ref => {
 
     // It is possible for left to be NaN, force to number
     let clickPos = Math.min(Math.max((clickOffset - trackStart - startOffset.value) / trackLength, 0), 1) || 0;
-    if (vertical || horizontalDirection.value === 'rtl') clickPos = 1 - clickPos;
+    if (vertical ? indexFromEnd.value : indexFromEnd.value !== isRtl.value) clickPos = 1 - clickPos;
     return roundValue(min.value + clickPos * (max.value - min.value));
   }
   const handleStop = e => {
@@ -13764,8 +13763,8 @@ const useSlider = _ref => {
     direction: toRef(props, 'direction'),
     elevation: toRef(props, 'elevation'),
     hasLabels,
-    horizontalDirection,
     isReversed,
+    indexFromEnd,
     min,
     max,
     mousePressed,
@@ -13838,23 +13837,24 @@ const VSliderThumb = genericComponent()({
     } = _ref;
     const slider = inject$1(VSliderSymbol);
     const {
+      isRtl,
       rtlClasses
     } = useRtl();
     if (!slider) throw new Error('[Vuetify] v-slider-thumb must be used inside v-slider or v-range-slider');
     const {
       thumbColor,
       step,
-      vertical,
       disabled,
       thumbSize,
       thumbLabel,
       direction,
+      isReversed,
+      vertical,
       readonly,
       elevation,
-      isReversed,
-      horizontalDirection,
       mousePressed,
-      decimals
+      decimals,
+      indexFromEnd
     } = slider;
     const {
       textColorClasses,
@@ -13880,7 +13880,7 @@ const VSliderThumb = genericComponent()({
       const _step = step.value || 0.1;
       const steps = (props.max - props.min) / _step;
       if ([left, right, down, up].includes(e.key)) {
-        const increase = horizontalDirection.value === 'rtl' ? [left, up] : [right, up];
+        const increase = vertical.value ? [isRtl.value ? left : right, isReversed.value ? down : up] : indexFromEnd.value !== isRtl.value ? [left, up] : [right, up];
         const direction = increase.includes(e.key) ? 1 : -1;
         const multiplier = e.shiftKey ? 2 : e.ctrlKey ? 1 : 0;
         value = value + direction * _step * multipliers.value[multiplier];
@@ -13899,7 +13899,7 @@ const VSliderThumb = genericComponent()({
       newValue != null && emit('update:modelValue', newValue);
     }
     useRender(() => {
-      const positionPercentage = convertToUnit(vertical.value || isReversed.value ? 100 - props.position : props.position, '%');
+      const positionPercentage = convertToUnit(indexFromEnd.value ? 100 - props.position : props.position, '%');
       const {
         elevationClasses
       } = useElevation(computed(() => !disabled.value ? elevation.value : undefined));
@@ -13972,7 +13972,6 @@ const VSliderTrack = genericComponent()({
     if (!slider) throw new Error('[Vuetify] v-slider-track must be inside v-slider or v-range-slider');
     const {
       color,
-      horizontalDirection,
       parsedTicks,
       rounded,
       showTicks,
@@ -13982,7 +13981,8 @@ const VSliderTrack = genericComponent()({
       trackSize,
       vertical,
       min,
-      max
+      max,
+      indexFromEnd
     } = slider;
     const {
       roundedClasses
@@ -13995,7 +13995,7 @@ const VSliderTrack = genericComponent()({
       backgroundColorClasses: trackColorClasses,
       backgroundColorStyles: trackColorStyles
     } = useBackgroundColor(trackColor);
-    const startDir = computed(() => `inset-${vertical.value ? 'block-end' : 'inline-start'}`);
+    const startDir = computed(() => `inset-${vertical.value ? 'block' : 'inline'}-${indexFromEnd.value ? 'end' : 'start'}`);
     const endDir = computed(() => vertical.value ? 'height' : 'width');
     const backgroundStyles = computed(() => {
       return {
@@ -14014,7 +14014,6 @@ const VSliderTrack = genericComponent()({
       if (!showTicks.value) return [];
       const ticks = vertical.value ? parsedTicks.value.slice().reverse() : parsedTicks.value;
       return ticks.map((tick, index) => {
-        const directionProperty = vertical.value ? 'bottom' : 'margin-inline-start';
         const directionValue = tick.value !== min.value && tick.value !== max.value ? convertToUnit(tick.position, '%') : undefined;
         return createVNode("div", {
           "key": tick.value,
@@ -14024,7 +14023,7 @@ const VSliderTrack = genericComponent()({
             'v-slider-track__tick--last': tick.value === max.value
           }],
           "style": {
-            [directionProperty]: directionValue
+            [startDir.value]: directionValue
           }
         }, [(tick.label || slots['tick-label']) && createVNode("div", {
           "class": "v-slider-track__tick-label"
@@ -14039,8 +14038,7 @@ const VSliderTrack = genericComponent()({
         "class": ['v-slider-track', roundedClasses.value, props.class],
         "style": [{
           '--v-slider-track-size': convertToUnit(trackSize.value),
-          '--v-slider-tick-size': convertToUnit(tickSize.value),
-          direction: !vertical.value ? horizontalDirection.value : undefined
+          '--v-slider-tick-size': convertToUnit(tickSize.value)
         }, props.style]
       }, [createVNode("div", {
         "class": ['v-slider-track__background', trackColorClasses.value, {
@@ -14927,7 +14925,7 @@ const VCombobox = genericComponent()({
         return _search.value;
       },
       set: val => {
-        _search.value = val;
+        _search.value = val ?? '';
         if (!props.multiple) {
           model.value = [transformItem$3(props, val)];
         }
@@ -16961,15 +16959,15 @@ const VNavigationDrawer = genericComponent()({
     });
     const isTemporary = computed(() => !props.permanent && (mobile.value || props.temporary));
     const isSticky = computed(() => props.sticky && !isTemporary.value && location.value !== 'bottom');
-    if (props.expandOnHover && props.rail != null) {
+    useToggleScope(() => props.expandOnHover && props.rail != null, () => {
       watch(isHovering, val => emit('update:rail', !val));
-    }
-    if (!props.disableResizeWatcher) {
+    });
+    useToggleScope(() => !props.disableResizeWatcher, () => {
       watch(isTemporary, val => !props.permanent && nextTick(() => isActive.value = !val));
-    }
-    if (!props.disableRouteWatcher && router) {
+    });
+    useToggleScope(() => !props.disableRouteWatcher && !!router, () => {
       watch(router.currentRoute, () => isTemporary.value && (isActive.value = false));
-    }
+    });
     watch(() => props.permanent, val => {
       if (val) isActive.value = true;
     });
@@ -20010,7 +20008,7 @@ const singleSelectStrategy = {
       items,
       value
     } = _ref;
-    return new Set(value ? [toRaw(items[0]?.value)] : []);
+    return new Set(value ? [items[0]?.value] : []);
   },
   selectAll: _ref2 => {
     let {
@@ -20034,7 +20032,7 @@ const pageSelectStrategy = {
       selected
     } = _ref4;
     for (const item of items) {
-      if (value) selected.add(toRaw(item.value));else selected.delete(toRaw(item.value));
+      if (value) selected.add(item.value);else selected.delete(item.value);
     }
     return selected;
   },
@@ -20066,7 +20064,7 @@ const allSelectStrategy = {
       selected
     } = _ref7;
     for (const item of items) {
-      if (value) selected.add(toRaw(item.value));else selected.delete(toRaw(item.value));
+      if (value) selected.add(item.value);else selected.delete(item.value);
     }
     return selected;
   },
@@ -20126,10 +20124,10 @@ function provideSelection(props, _ref9) {
     }
   });
   function isSelected(items) {
-    return wrapInArray(items).every(item => selected.value.has(toRaw(item.value)));
+    return wrapInArray(items).every(item => selected.value.has(item.value));
   }
   function isSomeSelected(items) {
-    return wrapInArray(items).some(item => selected.value.has(toRaw(item.value)));
+    return wrapInArray(items).some(item => selected.value.has(item.value));
   }
   function select(items, value) {
     const newSelected = selectStrategy.value.select({
@@ -20532,10 +20530,18 @@ const VDataTableFooter = genericComponent()({
       itemsPerPage,
       setItemsPerPage
     } = usePagination();
-    const itemsPerPageOptions = computed(() => props.itemsPerPageOptions.map(option => ({
-      ...option,
-      title: t(option.title)
-    })));
+    const itemsPerPageOptions = computed(() => props.itemsPerPageOptions.map(option => {
+      if (typeof option === 'number') {
+        return {
+          value: option,
+          title: option === -1 ? t('$vuetify.dataFooter.itemsPerPageAll') : String(option)
+        };
+      }
+      return {
+        ...option,
+        title: t(option.title)
+      };
+    }));
     return () => createVNode("div", {
       "class": "v-data-table-footer"
     }, [slots.prepend?.(), createVNode("div", {
@@ -21583,7 +21589,7 @@ const VDataTableVirtual = genericComponent()({
         }, [createVNode("td", {
           "colspan": columns.value.length,
           "style": {
-            height: convertToUnit(paddingTop.value),
+            height: 0,
             border: 0
           }
         }, null)]), createVNode(VDataTableRows, mergeProps(dataTableRowsProps, {
@@ -21591,9 +21597,9 @@ const VDataTableVirtual = genericComponent()({
         }), {
           ...slots,
           item: itemSlotProps => createVNode(VVirtualScrollItem, {
-            "key": itemSlotProps.item.index,
+            "key": itemSlotProps.internalItem.index,
             "renderless": true,
-            "onUpdate:height": height => handleItemResize(itemSlotProps.item.index, height)
+            "onUpdate:height": height => handleItemResize(itemSlotProps.internalItem.index, height)
           }, {
             default: _ref2 => {
               let {
@@ -21604,7 +21610,7 @@ const VDataTableVirtual = genericComponent()({
                 itemRef
               }) ?? createVNode(VDataTableRow, mergeProps(itemSlotProps.props, {
                 "ref": itemRef,
-                "key": itemSlotProps.item.index
+                "key": itemSlotProps.internalItem.index
               }), slots);
             }
           })
@@ -21616,7 +21622,7 @@ const VDataTableVirtual = genericComponent()({
         }, [createVNode("td", {
           "colspan": columns.value.length,
           "style": {
-            height: convertToUnit(paddingBottom.value),
+            height: 0,
             border: 0
           }
         }, null)])])])]),
@@ -22166,6 +22172,17 @@ function format(value, formatString, locale) {
   }
   return new Intl.DateTimeFormat(locale, options).format(date);
 }
+function toISO(adapter, value) {
+  const date = adapter.toJsDate(value);
+  const year = date.getFullYear();
+  const month = padStart(String(date.getMonth() + 1), 2, '0');
+  const day = padStart(String(date.getDate()), 2, '0');
+  return `${year}-${month}-${day}`;
+}
+function parseISO(value) {
+  const [year, month, day] = value.split('-').map(Number);
+  return new Date(year, month - 1, day);
+}
 function addDays(date, amount) {
   const d = new Date(date);
   d.setDate(d.getDate() + amount);
@@ -22240,6 +22257,12 @@ class VuetifyDateAdapter {
   toJsDate(date) {
     return date;
   }
+  toISO(date) {
+    return toISO(this, date);
+  }
+  parseISO(date) {
+    return parseISO(date);
+  }
   addDays(date, amount) {
     return addDays(date, amount);
   }
@@ -22341,7 +22364,7 @@ function createDate(options) {
       lv: 'lv-LV',
       lt: 'lt-LT',
       nl: 'nl-NL',
-      no: 'nn-NO',
+      no: 'no-NO',
       pl: 'pl-PL',
       pt: 'pt-PT',
       ro: 'ro-RO',
@@ -22520,6 +22543,7 @@ function useDatePicker() {
 }
 
 const makeVDatePickerMonthProps = propsFactory({
+  allowedDates: [Array, Function],
   color: String,
   showAdjacentMonths: Boolean,
   hideWeekdays: Boolean,
@@ -22606,7 +22630,6 @@ const VDatePickerMonth = genericComponent()({
       const startDate = validDates[0];
       const endDate = validDates[1];
       return days.map((date, index) => {
-        const isDisabled = !!(props.min && adapter.isAfter(props.min, date) || props.max && adapter.isAfter(date, props.max));
         const isStart = startDate && adapter.isSameDay(date, startDate);
         const isEnd = endDate && adapter.isSameDay(date, endDate);
         const isAdjacent = !adapter.isSameMonth(date, month.value);
@@ -22617,7 +22640,7 @@ const VDatePickerMonth = genericComponent()({
           formatted: adapter.format(date, 'keyboardDate'),
           year: adapter.getYear(date),
           month: adapter.getMonth(date),
-          isDisabled,
+          isDisabled: isDisabled(date),
           isWeekStart: index % 7 === 0,
           isWeekEnd: index % 7 === 6,
           isSelected: isStart || isEnd,
@@ -22644,6 +22667,18 @@ const VDatePickerMonth = genericComponent()({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(props, 'color');
+    function isDisabled(value) {
+      const date = adapter.date(value);
+      if (props.min && adapter.isAfter(props.min, date)) return true;
+      if (props.max && adapter.isAfter(date, props.max)) return true;
+      if (Array.isArray(props.allowedDates)) {
+        return !props.allowedDates.some(d => adapter.isSameDay(adapter.date(d), date));
+      }
+      if (typeof props.allowedDates === 'function') {
+        return !props.allowedDates(date);
+      }
+      return false;
+    }
     function selectDate(date) {
       let newModel = props.modelValue.slice();
       if (props.multiple) {
@@ -23548,7 +23583,7 @@ const makeVOtpInputProps = propsFactory({
   placeholder: String,
   type: {
     type: String,
-    default: 'text'
+    default: 'number'
   },
   ...makeDimensionProps(),
   ...makeFocusProps(),
@@ -23594,7 +23629,7 @@ const VOtpInput = genericComponent()({
       model.value = array;
       let target = null;
       if (focusIndex.value > model.value.length) {
-        target = model.value.length + 1;
+        target = model.value.length;
       } else if (focusIndex.value + 1 !== Number(props.length)) {
         target = 'next';
       } else {
@@ -23619,7 +23654,7 @@ const VOtpInput = genericComponent()({
           target = 'prev';
         } else {
           requestAnimationFrame(() => {
-            inputRef.value[index].select();
+            inputRef.value[index]?.select();
           });
         }
       }
@@ -23648,6 +23683,9 @@ const VOtpInput = genericComponent()({
     }
     provideDefaults({
       VField: {
+        color: computed(() => props.color),
+        bgColor: computed(() => props.color),
+        baseColor: computed(() => props.baseColor),
         disabled: computed(() => props.disabled),
         error: computed(() => props.error),
         variant: computed(() => props.variant)
@@ -23663,7 +23701,7 @@ const VOtpInput = genericComponent()({
     watch(focusIndex, val => {
       if (val < 0) return;
       IN_BROWSER && window.requestAnimationFrame(() => {
-        inputRef.value[val].select();
+        inputRef.value[val]?.select();
       });
     });
     useRender(() => {
@@ -23758,6 +23796,7 @@ const rootTypes = {
   'list-item-avatar-two-line': 'avatar, sentences',
   'list-item-three-line': 'paragraph',
   'list-item-avatar-three-line': 'avatar, paragraph',
+  ossein: 'ossein',
   paragraph: 'text@3',
   sentences: 'text@2',
   subtitle: 'text',
@@ -23822,7 +23861,7 @@ const makeVSkeletonLoaderProps = propsFactory({
   },
   type: {
     type: [String, Array],
-    default: 'image'
+    default: 'ossein'
   },
   ...makeDimensionProps(),
   ...makeElevationProps(),
@@ -24614,7 +24653,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "3.3.19";
+const version$1 = "3.3.21";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -24628,7 +24667,7 @@ function inject(key) {
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.3.19";
+const version = "3.3.21";
 
 /* eslint-disable local-rules/sort-imports */