vuetify 3.4.0 → 3.4.2

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.4.0
+* Vuetify v3.4.2
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -3115,6 +3115,7 @@ const VImg = genericComponent()({
       emit,
       slots
     } = _ref;
+    const vm = getCurrentInstance('VImg');
     const currentSrc = shallowRef(''); // Set from srcset
     const image = ref();
     const state = shallowRef(props.eager ? 'loading' : 'idle');
@@ -3161,6 +3162,7 @@ const VImg = genericComponent()({
       nextTick(() => {
         emit('loadstart', image.value?.currentSrc || normalisedSrc.value.src);
         setTimeout(() => {
+          if (vm.isUnmounted) return;
           if (image.value?.complete) {
             if (!image.value.naturalWidth) {
               onError();
@@ -3176,12 +3178,14 @@ const VImg = genericComponent()({
       });
     }
     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);
     }
@@ -3190,10 +3194,14 @@ const VImg = genericComponent()({
       if (img) currentSrc.value = img.currentSrc || img.src;
     }
     let timer = -1;
+    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
@@ -5435,7 +5443,7 @@ const VBtn = genericComponent()({
       return props.variant === 'elevated' && !(props.disabled || props.flat || props.border);
     });
     const valueAttr = 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) {
@@ -5818,7 +5826,7 @@ const VSelectionControlGroup = genericComponent()({
   name: 'VSelectionControlGroup',
   props: makeVSelectionControlGroupProps(),
   emits: {
-    'update:modelValue': val => true
+    'update:modelValue': value => true
   },
   setup(props, _ref) {
     let {
@@ -5893,7 +5901,7 @@ function useSelectionControl(props) {
   const model = 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;
@@ -5944,7 +5952,7 @@ const VSelectionControl = genericComponent()({
   inheritAttrs: false,
   props: makeVSelectionControlProps(),
   emits: {
-    'update:modelValue': val => true
+    'update:modelValue': value => true
   },
   setup(props, _ref) {
     let {
@@ -6078,7 +6086,7 @@ const VCheckboxBtn = genericComponent()({
   props: makeVCheckboxBtnProps(),
   emits: {
     'update:modelValue': value => true,
-    'update:indeterminate': val => true
+    'update:indeterminate': value => true
   },
   setup(props, _ref) {
     let {
@@ -6549,7 +6557,7 @@ const VInput = genericComponent()({
     ...makeVInputProps()
   },
   emits: {
-    'update:modelValue': val => true
+    'update:modelValue': value => true
   },
   setup(props, _ref) {
     let {
@@ -8247,8 +8255,8 @@ const VList = genericComponent()({
   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
   },
@@ -10303,7 +10311,7 @@ const VField = genericComponent()({
   },
   emits: {
     'update:focused': focused => true,
-    'update:modelValue': val => true
+    'update:modelValue': value => true
   },
   setup(props, _ref) {
     let {
@@ -10812,11 +10820,10 @@ function useVirtual(props, items) {
   const hasInitialRender = 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 = shallowRef(0);
@@ -10862,7 +10869,6 @@ function useVirtual(props, items) {
     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();
     }
   }
@@ -10946,17 +10952,17 @@ function useVirtual(props, items) {
       index: index + first.value
     }));
   });
-  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;
-      }
+  watch(items, () => {
+    sizes = Array.from({
+      length: items.value.length
+    });
+    offsets = Array.from({
+      length: items.value.length
     });
+    updateOffsets.immediate();
     calculateVisibleItems();
+  }, {
+    deep: true
   });
   return {
     containerRef,
@@ -11218,8 +11224,8 @@ const VSelect = genericComponent()({
   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 {
@@ -11672,9 +11678,9 @@ const VAutocomplete = genericComponent()({
   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 {
@@ -12312,6 +12318,8 @@ const VBanner = genericComponent()({
   }
 });
 
+// Types
+
 const makeVBottomNavigationProps = propsFactory({
   bgColor: String,
   color: String,
@@ -13173,7 +13181,7 @@ const VWindow = genericComponent()({
   },
   props: makeVWindowProps(),
   emits: {
-    'update:modelValue': v => true
+    'update:modelValue': value => true
   },
   setup(props, _ref) {
     let {
@@ -13332,7 +13340,7 @@ const VCarousel = genericComponent()({
   name: 'VCarousel',
   props: makeVCarouselProps(),
   emits: {
-    'update:modelValue': val => true
+    'update:modelValue': value => true
   },
   setup(props, _ref) {
     let {
@@ -15385,9 +15393,9 @@ const VCombobox = genericComponent()({
   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 {
@@ -16518,7 +16526,7 @@ function parseLocalDate(value) {
   // 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;
@@ -16645,9 +16653,6 @@ function addMonths(date, amount) {
 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();
 }
@@ -16682,9 +16687,6 @@ function isSameDay(date, comparing) {
 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);
@@ -16771,9 +16773,6 @@ class VuetifyDateAdapter {
   setYear(date, year) {
     return setYear(date, year);
   }
-  getDate(date) {
-    return getDate(date);
-  }
   getDiff(date, comparing, unit) {
     return getDiff(date, comparing, unit);
   }
@@ -16783,9 +16782,6 @@ class VuetifyDateAdapter {
   getYear(date) {
     return getYear(date);
   }
-  getNextYear(date) {
-    return getNextYear(date);
-  }
   getMonth(date) {
     return getMonth(date);
   }
@@ -16820,7 +16816,7 @@ function createDate(options, locale) {
       bg: 'bg-BG',
       ca: 'ca-ES',
       ckb: '',
-      cs: '',
+      cs: 'cs-CZ',
       de: 'de-DE',
       el: 'el-GR',
       en: 'en-US',
@@ -18568,7 +18564,8 @@ const VDataTableVirtual = genericComponent()({
                 itemRef
               }) ?? createVNode(VDataTableRow, mergeProps(itemSlotProps.props, {
                 "ref": itemRef,
-                "key": itemSlotProps.internalItem.index
+                "key": itemSlotProps.internalItem.index,
+                "index": itemSlotProps.internalItem.index
               }), slots);
             }
           })
@@ -19215,6 +19212,7 @@ const VDatePickerHeader = genericComponent()({
 
 const makeVDatePickerMonthProps = propsFactory({
   allowedDates: [Array, Function],
+  disabled: Boolean,
   color: String,
   month: [Number, String],
   hideWeekdays: Boolean,
@@ -19267,7 +19265,7 @@ const VDatePickerMonth = genericComponent()({
       // 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++) {
@@ -19310,6 +19308,7 @@ const VDatePickerMonth = genericComponent()({
       });
     });
     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;
@@ -19488,7 +19487,7 @@ const VDatePickerYears = genericComponent()({
       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
@@ -19654,18 +19653,14 @@ const VDatePicker = genericComponent()({
       t
     } = useLocale();
     const model = useProxiedModel(props, 'modelValue', undefined, v => wrapInArray(v), v => props.multiple ? v : v[0]);
-    const internal = ref(model.value);
-    watchEffect(() => {
-      internal.value = model.value;
-    });
     const viewMode = useProxiedModel(props, 'viewMode');
     const inputMode = useProxiedModel(props, 'inputMode');
-    const _model = computed(() => {
-      const value = adapter.date(internal.value?.[0]);
+    const internal = computed(() => {
+      const value = adapter.date(model.value?.[0]);
       return value && adapter.isValid(value) ? value : adapter.date();
     });
-    const month = ref(Number(props.month ?? adapter.getMonth(adapter.startOfMonth(_model.value))));
-    const year = ref(Number(props.year ?? adapter.getYear(adapter.startOfYear(adapter.setMonth(_model.value, month.value)))));
+    const month = ref(Number(props.month ?? adapter.getMonth(adapter.startOfMonth(internal.value))));
+    const year = ref(Number(props.year ?? adapter.getYear(adapter.startOfYear(adapter.setMonth(internal.value, month.value)))));
     const isReversing = shallowRef(false);
     const header = 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);
@@ -19685,6 +19680,7 @@ const VDatePicker = genericComponent()({
       return props.max && adapter.isValid(date) ? date : null;
     });
     const disabled = computed(() => {
+      if (props.disabled) return true;
       const targets = [];
       if (viewMode.value !== 'month') {
         targets.push(...['prev', 'next']);
@@ -19738,11 +19734,10 @@ const VDatePicker = genericComponent()({
     watch(year, () => {
       if (viewMode.value === 'year') onClickYear();
     });
-    watch(internal, (val, oldVal) => {
+    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);
@@ -19751,21 +19746,31 @@ const VDatePicker = genericComponent()({
       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 createVNode(VPicker, 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?.() ?? createVNode("div", {
           "class": "v-date-picker__title"
         }, [t(props.title)]),
-        header: () => createVNode(VDatePickerHeader, mergeProps({
+        header: () => slots.header ? createVNode(VDefaultsProvider, {
+          "defaults": {
+            VDatePickerHeader: {
+              ...headerProps
+            }
+          }
+        }, {
+          default: () => [slots.header?.(headerProps)]
+        }) : createVNode(VDatePickerHeader, mergeProps({
           "key": "header"
-        }, datePickerHeaderProps, {
-          "header": header.value,
-          "transition": headerTransition.value,
-          "onClick:append": onClickAppend
-        }), slots),
+        }, datePickerHeaderProps, headerProps), slots),
         default: () => props.inputMode === 'calendar' ? createVNode(Fragment, null, [createVNode(VDatePickerControls, mergeProps(datePickerControlsProps, {
           "disabled": disabled.value,
           "text": text.value,
@@ -19793,8 +19798,8 @@ const VDatePicker = genericComponent()({
           }), null) : createVNode(VDatePickerMonth, 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,
@@ -20651,6 +20656,8 @@ const VInfiniteScroll = genericComponent()({
   }
 });
 
+// Types
+
 const VItemGroupSymbol = Symbol.for('vuetify:v-item-group');
 const makeVItemGroupProps = propsFactory({
   ...makeComponentProps(),
@@ -22152,7 +22159,7 @@ const VRadioGroup = genericComponent()({
   inheritAttrs: false,
   props: makeVRadioGroupProps(),
   emits: {
-    'update:modelValue': val => true
+    'update:modelValue': value => true
   },
   setup(props, _ref) {
     let {
@@ -23724,8 +23731,8 @@ const VSwitch = genericComponent()({
   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 {
@@ -23767,11 +23774,13 @@ const VSwitch = genericComponent()({
           '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 => {
@@ -24712,11 +24721,14 @@ const VTooltip = genericComponent()({
 });
 
 // Composables
+
+// Types
+
 const VValidation = genericComponent()({
   name: 'VValidation',
   props: makeValidationProps(),
   emits: {
-    'update:modelValue': val => true
+    'update:modelValue': value => true
   },
   setup(props, _ref) {
     let {
@@ -25178,7 +25190,7 @@ function createVuetify$1() {
     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
@@ -25192,7 +25204,7 @@ function inject(key) {
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.4.0";
+const version = "3.4.2";
 
 /* eslint-disable local-rules/sort-imports */