vuetify 3.3.19 → 3.3.21

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.19
+* Vuetify v3.3.21
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -258,6 +258,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 = [];
@@ -6277,7 +6281,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';
@@ -6291,7 +6295,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;
@@ -9787,7 +9791,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);
@@ -9801,7 +9805,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;
@@ -9815,7 +9819,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);
@@ -9828,7 +9832,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) {
@@ -10441,7 +10445,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 [{
@@ -13114,6 +13118,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,
@@ -13608,13 +13613,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,
@@ -13627,7 +13627,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);
@@ -13648,7 +13647,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 => {
@@ -13752,8 +13751,8 @@ const useSlider = _ref => {
     direction: toRef(props, 'direction'),
     elevation: toRef(props, 'elevation'),
     hasLabels,
-    horizontalDirection,
     isReversed,
+    indexFromEnd,
     min,
     max,
     mousePressed,
@@ -13826,23 +13825,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,
@@ -13868,7 +13868,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];
@@ -13887,7 +13887,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));
@@ -13960,7 +13960,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,
@@ -13970,7 +13969,8 @@ const VSliderTrack = genericComponent()({
       trackSize,
       vertical,
       min,
-      max
+      max,
+      indexFromEnd
     } = slider;
     const {
       roundedClasses
@@ -13983,7 +13983,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 {
@@ -14002,7 +14002,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,
@@ -14012,7 +14011,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"
@@ -14027,8 +14026,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, {
@@ -14915,7 +14913,7 @@ const VCombobox = genericComponent()({
         return _search.value;
       },
       set: val => {
-        _search.value = val;
+        _search.value = val ?? '';
         if (!props.multiple) {
           model.value = [transformItem$1(props, val)];
         }
@@ -16949,15 +16947,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;
     });
@@ -20130,6 +20128,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);
@@ -20204,6 +20213,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);
   }
@@ -20305,7 +20320,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',
@@ -20411,7 +20426,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
@@ -20436,7 +20451,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.3.19";
+const version = "3.3.21";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDefaults, useDisplay, useLayout, useLocale, useRtl, useTheme, version };