vuetify 3.4.0 → 3.4.2

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.4.0
+* Vuetify v3.4.2
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -3119,6 +3119,7 @@
         emit,
         slots
       } = _ref;
+      const vm = getCurrentInstance('VImg');
       const currentSrc = vue.shallowRef(''); // Set from srcset
       const image = vue.ref();
       const state = vue.shallowRef(props.eager ? 'loading' : 'idle');
@@ -3165,6 +3166,7 @@
         vue.nextTick(() => {
           emit('loadstart', image.value?.currentSrc || normalisedSrc.value.src);
           setTimeout(() => {
+            if (vm.isUnmounted) return;
             if (image.value?.complete) {
               if (!image.value.naturalWidth) {
                 onError();
@@ -3180,12 +3182,14 @@
         });
       }
       function onLoad() {
+        if (vm.isUnmounted) return;
         getSrc();
         pollForSize(image.value);
         state.value = 'loaded';
         emit('load', image.value?.currentSrc || normalisedSrc.value.src);
       }
       function onError() {
+        if (vm.isUnmounted) return;
         state.value = 'error';
         emit('error', image.value?.currentSrc || normalisedSrc.value.src);
       }
@@ -3194,10 +3198,14 @@
         if (img) currentSrc.value = img.currentSrc || img.src;
       }
       let timer = -1;
+      vue.onBeforeUnmount(() => {
+        clearTimeout(timer);
+      });
       function pollForSize(img) {
         let timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
         const poll = () => {
           clearTimeout(timer);
+          if (vm.isUnmounted) return;
           const {
             naturalHeight: imgHeight,
             naturalWidth: imgWidth
@@ -5439,7 +5447,7 @@
         return props.variant === 'elevated' && !(props.disabled || props.flat || props.border);
       });
       const valueAttr = vue.computed(() => {
-        if (props.value === undefined) return undefined;
+        if (props.value === undefined || typeof props.value === 'symbol') return undefined;
         return Object(props.value) === props.value ? JSON.stringify(props.value, null, 0) : props.value;
       });
       function onClick(e) {
@@ -5822,7 +5830,7 @@
     name: 'VSelectionControlGroup',
     props: makeVSelectionControlGroupProps(),
     emits: {
-      'update:modelValue': val => true
+      'update:modelValue': value => true
     },
     setup(props, _ref) {
       let {
@@ -5897,7 +5905,7 @@
     const model = vue.computed({
       get() {
         const val = group ? group.modelValue.value : modelValue.value;
-        return isMultiple.value ? val.some(v => props.valueComparator(v, trueValue.value)) : props.valueComparator(val, trueValue.value);
+        return isMultiple.value ? wrapInArray(val).some(v => props.valueComparator(v, trueValue.value)) : props.valueComparator(val, trueValue.value);
       },
       set(val) {
         if (props.readonly) return;
@@ -5948,7 +5956,7 @@
     inheritAttrs: false,
     props: makeVSelectionControlProps(),
     emits: {
-      'update:modelValue': val => true
+      'update:modelValue': value => true
     },
     setup(props, _ref) {
       let {
@@ -6082,7 +6090,7 @@
     props: makeVCheckboxBtnProps(),
     emits: {
       'update:modelValue': value => true,
-      'update:indeterminate': val => true
+      'update:indeterminate': value => true
     },
     setup(props, _ref) {
       let {
@@ -6553,7 +6561,7 @@
       ...makeVInputProps()
     },
     emits: {
-      'update:modelValue': val => true
+      'update:modelValue': value => true
     },
     setup(props, _ref) {
       let {
@@ -8251,8 +8259,8 @@
     name: 'VList',
     props: makeVListProps(),
     emits: {
-      'update:selected': val => true,
-      'update:opened': val => true,
+      'update:selected': value => true,
+      'update:opened': value => true,
       'click:open': value => true,
       'click:select': value => true
     },
@@ -10307,7 +10315,7 @@
     },
     emits: {
       'update:focused': focused => true,
-      'update:modelValue': val => true
+      'update:modelValue': value => true
     },
     setup(props, _ref) {
       let {
@@ -10816,11 +10824,10 @@
     const hasInitialRender = vue.computed(() => {
       return !!(containerRef.value && markerRef.value && viewportHeight.value && itemHeight.value);
     });
-    const sizeMap = new Map();
     let sizes = Array.from({
       length: items.value.length
     });
-    const offsets = Array.from({
+    let offsets = Array.from({
       length: items.value.length
     });
     const updateTime = vue.shallowRef(0);
@@ -10866,7 +10873,6 @@
       itemHeight.value = prevMinHeight ? Math.min(itemHeight.value, height) : height;
       if (prevHeight !== height || prevMinHeight !== itemHeight.value) {
         sizes[index] = height;
-        sizeMap.set(items.value[index], height);
         updateOffsets();
       }
     }
@@ -10950,17 +10956,17 @@
         index: index + first.value
       }));
     });
-    vue.watch(() => items.value.length, () => {
-      sizes = createRange(items.value.length).map(() => itemHeight.value);
-      sizeMap.forEach((height, item) => {
-        const index = items.value.indexOf(item);
-        if (index === -1) {
-          sizeMap.delete(item);
-        } else {
-          sizes[index] = height;
-        }
+    vue.watch(items, () => {
+      sizes = Array.from({
+        length: items.value.length
+      });
+      offsets = Array.from({
+        length: items.value.length
       });
+      updateOffsets.immediate();
       calculateVisibleItems();
+    }, {
+      deep: true
     });
     return {
       containerRef,
@@ -11222,8 +11228,8 @@
     props: makeVSelectProps(),
     emits: {
       'update:focused': focused => true,
-      'update:modelValue': val => true,
-      'update:menu': val => true
+      'update:modelValue': value => true,
+      'update:menu': ue => true
     },
     setup(props, _ref) {
       let {
@@ -11676,9 +11682,9 @@
     props: makeVAutocompleteProps(),
     emits: {
       'update:focused': focused => true,
-      'update:search': val => true,
-      'update:modelValue': val => true,
-      'update:menu': val => true
+      'update:search': value => true,
+      'update:modelValue': value => true,
+      'update:menu': value => true
     },
     setup(props, _ref) {
       let {
@@ -12316,6 +12322,8 @@
     }
   });
 
+  // Types
+
   const makeVBottomNavigationProps = propsFactory({
     bgColor: String,
     color: String,
@@ -13177,7 +13185,7 @@
     },
     props: makeVWindowProps(),
     emits: {
-      'update:modelValue': v => true
+      'update:modelValue': value => true
     },
     setup(props, _ref) {
       let {
@@ -13336,7 +13344,7 @@
     name: 'VCarousel',
     props: makeVCarouselProps(),
     emits: {
-      'update:modelValue': val => true
+      'update:modelValue': value => true
     },
     setup(props, _ref) {
       let {
@@ -15389,9 +15397,9 @@
     props: makeVComboboxProps(),
     emits: {
       'update:focused': focused => true,
-      'update:modelValue': val => true,
-      'update:search': val => true,
-      'update:menu': val => true
+      'update:modelValue': value => true,
+      'update:search': value => true,
+      'update:menu': value => true
     },
     setup(props, _ref) {
       let {
@@ -16522,7 +16530,7 @@
     // 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]))/;
+  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) {
     if (value == null) return new Date();
     if (value instanceof Date) return value;
@@ -16649,9 +16657,6 @@
   function getYear(date) {
     return date.getFullYear();
   }
-  function getNextYear(date) {
-    return new Date(date.getFullYear() + 1, date.getMonth(), date.getDate());
-  }
   function getMonth(date) {
     return date.getMonth();
   }
@@ -16686,9 +16691,6 @@
   function isSameMonth(date, comparing) {
     return date.getMonth() === comparing.getMonth() && date.getFullYear() === comparing.getFullYear();
   }
-  function getDate(date) {
-    return date.getDate();
-  }
   function getDiff(date, comparing, unit) {
     const d = new Date(date);
     const c = new Date(comparing);
@@ -16775,9 +16777,6 @@
     setYear(date, year) {
       return setYear(date, year);
     }
-    getDate(date) {
-      return getDate(date);
-    }
     getDiff(date, comparing, unit) {
       return getDiff(date, comparing, unit);
     }
@@ -16787,9 +16786,6 @@
     getYear(date) {
       return getYear(date);
     }
-    getNextYear(date) {
-      return getNextYear(date);
-    }
     getMonth(date) {
       return getMonth(date);
     }
@@ -16824,7 +16820,7 @@
         bg: 'bg-BG',
         ca: 'ca-ES',
         ckb: '',
-        cs: '',
+        cs: 'cs-CZ',
         de: 'de-DE',
         el: 'el-GR',
         en: 'en-US',
@@ -18572,7 +18568,8 @@
                   itemRef
                 }) ?? vue.createVNode(VDataTableRow, vue.mergeProps(itemSlotProps.props, {
                   "ref": itemRef,
-                  "key": itemSlotProps.internalItem.index
+                  "key": itemSlotProps.internalItem.index,
+                  "index": itemSlotProps.internalItem.index
                 }), slots);
               }
             })
@@ -19219,6 +19216,7 @@
 
   const makeVDatePickerMonthProps = propsFactory({
     allowedDates: [Array, Function],
+    disabled: Boolean,
     color: String,
     month: [Number, String],
     hideWeekdays: Boolean,
@@ -19271,7 +19269,7 @@
         // Make sure there's always 6 weeks in month (6 * 7 days)
         // But only do it if we're not hiding adjacent months?
         const daysInMonth = 6 * 7;
-        if (days.length < daysInMonth && props.showAdjacentMonths) {
+        if (days.length < daysInMonth) {
           const lastDay = days[days.length - 1];
           let week = [];
           for (let day = 1; day <= daysInMonth - days.length; day++) {
@@ -19314,6 +19312,7 @@
         });
       });
       function isDisabled(value) {
+        if (props.disabled) return true;
         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;
@@ -19492,7 +19491,7 @@
         date = adapter.setYear(date, min);
         return createRange(max - min + 1, min).map(i => {
           const text = adapter.format(date, 'year');
-          date = adapter.getNextYear(date);
+          date = adapter.setYear(date, adapter.getYear(date) + 1);
           return {
             text,
             value: i
@@ -19658,18 +19657,14 @@
         t
       } = useLocale();
       const model = useProxiedModel(props, 'modelValue', undefined, v => wrapInArray(v), v => props.multiple ? v : v[0]);
-      const internal = vue.ref(model.value);
-      vue.watchEffect(() => {
-        internal.value = model.value;
-      });
       const viewMode = useProxiedModel(props, 'viewMode');
       const inputMode = useProxiedModel(props, 'inputMode');
-      const _model = vue.computed(() => {
-        const value = adapter.date(internal.value?.[0]);
+      const internal = vue.computed(() => {
+        const value = adapter.date(model.value?.[0]);
         return value && adapter.isValid(value) ? value : adapter.date();
       });
-      const month = vue.ref(Number(props.month ?? adapter.getMonth(adapter.startOfMonth(_model.value))));
-      const year = vue.ref(Number(props.year ?? adapter.getYear(adapter.startOfYear(adapter.setMonth(_model.value, month.value)))));
+      const month = vue.ref(Number(props.month ?? adapter.getMonth(adapter.startOfMonth(internal.value))));
+      const year = vue.ref(Number(props.year ?? adapter.getYear(adapter.startOfYear(adapter.setMonth(internal.value, month.value)))));
       const isReversing = vue.shallowRef(false);
       const header = vue.computed(() => {
         return props.multiple && model.value.length > 1 ? t('$vuetify.datePicker.itemsSelected', model.value.length) : model.value[0] && adapter.isValid(model.value[0]) ? adapter.format(model.value[0], 'normalDateWithWeekday') : t(props.header);
@@ -19689,6 +19684,7 @@
         return props.max && adapter.isValid(date) ? date : null;
       });
       const disabled = vue.computed(() => {
+        if (props.disabled) return true;
         const targets = [];
         if (viewMode.value !== 'month') {
           targets.push(...['prev', 'next']);
@@ -19742,11 +19738,10 @@
       vue.watch(year, () => {
         if (viewMode.value === 'year') onClickYear();
       });
-      vue.watch(internal, (val, oldVal) => {
+      vue.watch(model, (val, oldVal) => {
         const before = adapter.date(wrapInArray(val)[0]);
         const after = adapter.date(wrapInArray(oldVal)[0]);
         isReversing.value = adapter.isBefore(before, after);
-        model.value = val;
       });
       useRender(() => {
         const pickerProps = VPicker.filterProps(props);
@@ -19755,21 +19750,31 @@
         const datePickerMonthProps = VDatePickerMonth.filterProps(props);
         const datePickerMonthsProps = omit(VDatePickerMonths.filterProps(props), ['modelValue']);
         const datePickerYearsProps = omit(VDatePickerYears.filterProps(props), ['modelValue']);
+        const headerProps = {
+          header: header.value,
+          transition: headerTransition.value,
+          'onClick:append': onClickAppend
+        };
         return vue.createVNode(VPicker, vue.mergeProps(pickerProps, {
-          "class": ['v-date-picker', `v-date-picker--${viewMode.value}`, props.class],
-          "style": props.style,
-          "width": props.showWeek ? 408 : 360
+          "class": ['v-date-picker', `v-date-picker--${viewMode.value}`, {
+            'v-date-picker--show-week': props.showWeek
+          }, props.class],
+          "style": props.style
         }), {
           title: () => slots.title?.() ?? vue.createVNode("div", {
             "class": "v-date-picker__title"
           }, [t(props.title)]),
-          header: () => vue.createVNode(VDatePickerHeader, vue.mergeProps({
+          header: () => slots.header ? vue.createVNode(VDefaultsProvider, {
+            "defaults": {
+              VDatePickerHeader: {
+                ...headerProps
+              }
+            }
+          }, {
+            default: () => [slots.header?.(headerProps)]
+          }) : vue.createVNode(VDatePickerHeader, vue.mergeProps({
             "key": "header"
-          }, datePickerHeaderProps, {
-            "header": header.value,
-            "transition": headerTransition.value,
-            "onClick:append": onClickAppend
-          }), slots),
+          }, datePickerHeaderProps, headerProps), slots),
           default: () => props.inputMode === 'calendar' ? vue.createVNode(vue.Fragment, null, [vue.createVNode(VDatePickerControls, vue.mergeProps(datePickerControlsProps, {
             "disabled": disabled.value,
             "text": text.value,
@@ -19797,8 +19802,8 @@
             }), null) : vue.createVNode(VDatePickerMonth, vue.mergeProps({
               "key": "date-picker-month"
             }, datePickerMonthProps, {
-              "modelValue": internal.value,
-              "onUpdate:modelValue": $event => internal.value = $event,
+              "modelValue": model.value,
+              "onUpdate:modelValue": $event => model.value = $event,
               "month": month.value,
               "onUpdate:month": $event => month.value = $event,
               "year": year.value,
@@ -20655,6 +20660,8 @@
     }
   });
 
+  // Types
+
   const VItemGroupSymbol = Symbol.for('vuetify:v-item-group');
   const makeVItemGroupProps = propsFactory({
     ...makeComponentProps(),
@@ -22156,7 +22163,7 @@
     inheritAttrs: false,
     props: makeVRadioGroupProps(),
     emits: {
-      'update:modelValue': val => true
+      'update:modelValue': value => true
     },
     setup(props, _ref) {
       let {
@@ -23728,8 +23735,8 @@
     props: makeVSwitchProps(),
     emits: {
       'update:focused': focused => true,
-      'update:modelValue': () => true,
-      'update:indeterminate': val => true
+      'update:modelValue': value => true,
+      'update:indeterminate': value => true
     },
     setup(props, _ref) {
       let {
@@ -23771,11 +23778,13 @@
             'v-switch--inset': props.inset
           }, {
             'v-switch--indeterminate': indeterminate.value
-          }, loaderClasses.value, props.class],
-          "style": props.style
+          }, loaderClasses.value, props.class]
         }, rootAttrs, inputProps, {
+          "modelValue": model.value,
+          "onUpdate:modelValue": $event => model.value = $event,
           "id": id.value,
-          "focused": isFocused.value
+          "focused": isFocused.value,
+          "style": props.style
         }), {
           ...slots,
           default: _ref2 => {
@@ -24716,11 +24725,14 @@
   });
 
   // Composables
+
+  // Types
+
   const VValidation = genericComponent()({
     name: 'VValidation',
     props: makeValidationProps(),
     emits: {
-      'update:modelValue': val => true
+      'update:modelValue': value => true
     },
     setup(props, _ref) {
       let {
@@ -25182,7 +25194,7 @@
       date
     };
   }
-  const version$1 = "3.4.0";
+  const version$1 = "3.4.2";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -25196,7 +25208,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.4.0";
+  const version = "3.4.2";
 
   /* eslint-disable local-rules/sort-imports */