vuetify 3.3.7 → 3.3.9

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.3.7
+* Vuetify v3.3.9
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, warn, watch, onScopeDispose, effectScope, ref, unref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, readonly, onDeactivated, onActivated, onMounted, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, toValue, onBeforeUpdate, vModelText, withModifiers } from 'vue';
+import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, warn, watch, onScopeDispose, effectScope, ref, unref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, readonly, onDeactivated, onActivated, onMounted, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onBeforeUpdate, vModelText, withModifiers } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -2161,7 +2161,7 @@ function parseThemeOptions() {
 
 // Composables
 function createTheme(options) {
-  const parsedOptions = reactive(parseThemeOptions(options));
+  const parsedOptions = parseThemeOptions(options);
   const name = ref(parsedOptions.defaultTheme);
   const themes = ref(parsedOptions.themes);
   const computedThemes = computed(() => {
@@ -8334,6 +8334,12 @@ function getIntrinsicSize(el, isRtl) {
   // el.style.removeProperty('max-width')
   // el.style.removeProperty('max-height')
 
+  if (isRtl) {
+    el.style.removeProperty('left');
+  } else {
+    el.style.removeProperty('right');
+  }
+
   /* eslint-disable-next-line sonarjs/prefer-immediate-return */
   const contentBox = nullifyTransforms(el);
   if (isRtl) {
@@ -9615,11 +9621,11 @@ const VOverlay = genericComponent()({
       props: mergeProps({
         ref: activatorRef
       }, activatorEvents.value, props.activatorProps)
-    }), isMounted.value && createVNode(Teleport, {
+    }), isMounted.value && hasContent.value && createVNode(Teleport, {
       "disabled": !teleportTarget.value,
       "to": teleportTarget.value
     }, {
-      default: () => [hasContent.value && createVNode("div", mergeProps({
+      default: () => [createVNode("div", mergeProps({
         "class": ['v-overlay', {
           'v-overlay--absolute': props.absolute || props.contained,
           'v-overlay--active': isActive.value,
@@ -10121,7 +10127,7 @@ const VField = genericComponent()({
       }, null), createVNode(LoaderSlot, {
         "name": "v-field",
         "active": !!props.loading,
-        "color": props.error ? 'error' : props.color
+        "color": props.error ? 'error' : typeof props.loading === 'string' ? props.loading : props.color
       }, {
         default: slots.loader
       }), hasPrepend && createVNode("div", {
@@ -11104,7 +11110,8 @@ function useFilter(props, items, query, options) {
   const filteredMatches = ref(new Map());
   const transformedItems = computed(() => options?.transform ? unref(items).map(options?.transform) : unref(items));
   watchEffect(() => {
-    const strQuery = typeof toValue(query) !== 'string' && typeof toValue(query) !== 'number' ? '' : String(toValue(query));
+    const _query = typeof query === 'function' ? query() : unref(query);
+    const strQuery = typeof _query !== 'string' && typeof _query !== 'number' ? '' : String(_query);
     const results = filterItems(transformedItems.value, strQuery, {
       customKeyFilter: props.customKeyFilter,
       default: props.customFilter,
@@ -12677,64 +12684,65 @@ const VCarousel = genericComponent()({
       window.clearTimeout(slideTimeout);
       window.requestAnimationFrame(startTimeout);
     }
-    useRender(() => createVNode(VWindow, {
-      "ref": windowRef,
-      "modelValue": model.value,
-      "onUpdate:modelValue": $event => model.value = $event,
-      "class": ['v-carousel', {
-        'v-carousel--hide-delimiter-background': props.hideDelimiterBackground,
-        'v-carousel--vertical-delimiters': props.verticalDelimiters
-      }, props.class],
-      "style": [{
-        height: convertToUnit(props.height)
-      }, props.style],
-      "continuous": true,
-      "mandatory": "force",
-      "showArrows": props.showArrows
-    }, {
-      default: slots.default,
-      additional: _ref2 => {
-        let {
-          group
-        } = _ref2;
-        return createVNode(Fragment, null, [!props.hideDelimiters && createVNode("div", {
-          "class": "v-carousel__controls",
-          "style": {
-            left: props.verticalDelimiters === 'left' && props.verticalDelimiters ? 0 : 'auto',
-            right: props.verticalDelimiters === 'right' ? 0 : 'auto'
-          }
-        }, [group.items.value.length > 0 && createVNode(VDefaultsProvider, {
-          "defaults": {
-            VBtn: {
-              color: props.color,
-              icon: props.delimiterIcon,
-              size: 'x-small',
-              variant: 'text'
+    useRender(() => {
+      const [windowProps] = VWindow.filterProps(props);
+      return createVNode(VWindow, mergeProps({
+        "ref": windowRef
+      }, windowProps, {
+        "modelValue": model.value,
+        "onUpdate:modelValue": $event => model.value = $event,
+        "class": ['v-carousel', {
+          'v-carousel--hide-delimiter-background': props.hideDelimiterBackground,
+          'v-carousel--vertical-delimiters': props.verticalDelimiters
+        }, props.class],
+        "style": [{
+          height: convertToUnit(props.height)
+        }, props.style]
+      }), {
+        default: slots.default,
+        additional: _ref2 => {
+          let {
+            group
+          } = _ref2;
+          return createVNode(Fragment, null, [!props.hideDelimiters && createVNode("div", {
+            "class": "v-carousel__controls",
+            "style": {
+              left: props.verticalDelimiters === 'left' && props.verticalDelimiters ? 0 : 'auto',
+              right: props.verticalDelimiters === 'right' ? 0 : 'auto'
             }
-          },
-          "scoped": true
-        }, {
-          default: () => [group.items.value.map((item, index) => {
-            const props = {
-              id: `carousel-item-${item.id}`,
-              'aria-label': t('$vuetify.carousel.ariaLabel.delimiter', index + 1, group.items.value.length),
-              class: [group.isSelected(item.id) && 'v-btn--active'],
-              onClick: () => group.select(item.id, true)
-            };
-            return slots.item ? slots.item({
-              props,
-              item
-            }) : createVNode(VBtn, mergeProps(item, props), null);
-          })]
-        })]), props.progress && createVNode(VProgressLinear, {
-          "class": "v-carousel__progress",
-          "color": typeof props.progress === 'string' ? props.progress : undefined,
-          "modelValue": (group.getItemIndex(model.value) + 1) / group.items.value.length * 100
-        }, null)]);
-      },
-      prev: slots.prev,
-      next: slots.next
-    }));
+          }, [group.items.value.length > 0 && createVNode(VDefaultsProvider, {
+            "defaults": {
+              VBtn: {
+                color: props.color,
+                icon: props.delimiterIcon,
+                size: 'x-small',
+                variant: 'text'
+              }
+            },
+            "scoped": true
+          }, {
+            default: () => [group.items.value.map((item, index) => {
+              const props = {
+                id: `carousel-item-${item.id}`,
+                'aria-label': t('$vuetify.carousel.ariaLabel.delimiter', index + 1, group.items.value.length),
+                class: [group.isSelected(item.id) && 'v-btn--active'],
+                onClick: () => group.select(item.id, true)
+              };
+              return slots.item ? slots.item({
+                props,
+                item
+              }) : createVNode(VBtn, mergeProps(item, props), null);
+            })]
+          })]), props.progress && createVNode(VProgressLinear, {
+            "class": "v-carousel__progress",
+            "color": typeof props.progress === 'string' ? props.progress : undefined,
+            "modelValue": (group.getItemIndex(model.value) + 1) / group.items.value.length * 100
+          }, null)]);
+        },
+        prev: slots.prev,
+        next: slots.next
+      });
+    });
     return {};
   }
 });
@@ -17485,8 +17493,10 @@ const VRangeSlider = genericComponent()({
           value
         } = _ref2;
         const newValue = activeThumbRef.value === startThumbRef.value?.$el ? [value, model.value[1]] : [model.value[0], value];
-        model.value = newValue;
-        emit('end', newValue);
+        if (!props.strict && newValue[0] < newValue[1]) {
+          model.value = newValue;
+        }
+        emit('end', model.value);
       },
       onSliderMove: _ref3 => {
         let {
@@ -20930,7 +20940,7 @@ const VDataTableRows = genericComponent()({
         const itemSlotProps = {
           ...slotProps,
           props: {
-            key: `item_${item.value}`,
+            key: `item_${item.key ?? item.index}`,
             onClick: expandOnClick.value || props['onClick:row'] ? event => {
               if (expandOnClick.value) {
                 toggleExpand(item);
@@ -20979,6 +20989,7 @@ function transformItem(props, item, index, columns) {
   }, {});
   return {
     type: 'item',
+    key: props.returnObject ? getPropertyFromItem(item, props.itemValue) : value,
     index,
     value,
     selectable,
@@ -21750,11 +21761,24 @@ function startOfMonth(date) {
 function endOfMonth(date) {
   return new Date(date.getFullYear(), date.getMonth() + 1, 0);
 }
+function formatYyyyMmDd(value) {
+  const formattedValue = value.split('-').map(d => d.padStart(2, '0')).join('-');
+  const offsetMin = new Date().getTimezoneOffset() / -60;
+  const offsetSign = offsetMin < 0 ? '-' : '+';
+  const offsetValue = Math.abs(offsetMin).toString().padStart(2, '0');
+  return `${formattedValue}T00:00:00.000${offsetSign}${offsetValue}:00`;
+}
+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;
   if (typeof value === 'string') {
-    const parsed = Date.parse(value);
+    let parsed;
+    if (_YYYMMDD.test(value)) {
+      parsed = Date.parse(formatYyyyMmDd(value));
+    } else {
+      parsed = Date.parse(value);
+    }
     if (!isNaN(parsed)) return new Date(parsed);
   }
   return null;
@@ -22003,11 +22027,11 @@ function useDate() {
   const date = inject$1(DateAdapterSymbol);
   const locale = useLocale();
   if (!date) throw new Error('[Vuetify] Could not find injected date');
-  const instance = typeof date.adapter === 'function'
+  const instance = reactive(typeof date.adapter === 'function'
   // eslint-disable-next-line new-cap
   ? new date.adapter({
     locale: date.locale?.[locale.current.value] ?? locale.current.value
-  }) : date.adapter;
+  }) : date.adapter);
   watch(locale.current, value => {
     const newLocale = date.locale ? date.locale[value] : value;
     instance.locale = newLocale ?? instance.locale;
@@ -22053,7 +22077,7 @@ const makeDateProps = propsFactory({
   },
   displayDate: {
     type: null,
-    default: new Date()
+    default: null
   },
   inputMode: {
     type: String,
@@ -22072,6 +22096,34 @@ const dateEmits = {
   'update:inputMode': inputMode => true,
   'update:viewMode': viewMode => true
 };
+function createDateInput(props, isRange) {
+  const adapter = useDate();
+  const model = useProxiedModel(props, 'modelValue', [], v => {
+    if (v == null) return [];
+    const arr = wrapInArray(v).filter(v => !!v);
+    return arr.map(adapter.date);
+  }, v => {
+    const arr = wrapInArray(v);
+    const formatted = props.format ? arr.map(d => adapter.format(d, props.format)) : arr;
+    if (isRange) return formatted;
+    return formatted[0];
+  });
+  const inputMode = useProxiedModel(props, 'inputMode');
+  const viewMode = useProxiedModel(props, 'viewMode');
+  const displayDate = useProxiedModel(props, 'displayDate', model.value.length ? model.value[0] : adapter.date());
+  function parseKeyboardDate(input, fallback) {
+    const date = adapter.date(input);
+    return adapter.isValid(date) ? date : fallback;
+  }
+  return {
+    model,
+    adapter,
+    inputMode,
+    viewMode,
+    displayDate,
+    parseKeyboardDate
+  };
+}
 
 const makeVDatePickerControlsProps = propsFactory({
   nextIcon: {
@@ -22135,6 +22187,7 @@ const VDatePickerControls = genericComponent()({
         "icon": props.viewMode === 'month' ? props.expandIcon : props.collapseIcon,
         "onClick": () => emit('update:viewMode', props.viewMode === 'month' ? 'year' : 'month')
       }, null), createVNode(VSpacer, null, null), props.viewMode === 'month' && !props.range && createVNode("div", {
+        "class": "v-date-picker-controls__month",
         "key": "month-buttons"
       }, [prevBtn, nextBtn]), props.viewMode === 'month' && props.range === 'end' && nextBtn]);
     });
@@ -22142,7 +22195,7 @@ const VDatePickerControls = genericComponent()({
   }
 });
 
-// Utilities
+// Composables
 
 // Types
 
@@ -22160,12 +22213,24 @@ function createDatePicker(props) {
     dragHandle,
     hasScrolled
   });
+
+  // TODO: This composable should probably not live in DateInput
+  const {
+    model,
+    displayDate,
+    viewMode,
+    inputMode
+  } = createDateInput(props, !!props.multiple);
   return {
     hoverDate,
     hoverMonth,
     isDragging,
     dragHandle,
-    hasScrolled
+    hasScrolled,
+    model,
+    displayDate,
+    viewMode,
+    inputMode
   };
 }
 function useDatePicker() {
@@ -22543,7 +22608,7 @@ const VDateCard = genericComponent()({
     const {
       t
     } = useLocale();
-    createDatePicker();
+    createDatePicker(props);
     function onDisplayUpdate(val) {
       emit('update:displayDate', val);
     }
@@ -22759,12 +22824,13 @@ const VDatePicker = genericComponent()({
     const {
       t
     } = useLocale();
-    createDatePicker();
-    const model = ref(props.modelValue ?? []);
+    const {
+      model,
+      displayDate,
+      viewMode,
+      inputMode
+    } = createDatePicker(props);
     const isReversing = ref(false);
-    const displayDate = useProxiedModel(props, 'displayDate', props.displayDate);
-    const inputMode = useProxiedModel(props, 'inputMode', props.inputMode);
-    const viewMode = useProxiedModel(props, 'viewMode', props.viewMode);
     const inputModel = computed(() => model.value.length ? adapter.format(model.value[0], 'keyboardDate') : '');
     const title = computed(() => t(props.title));
     const header = computed(() => model.value.length ? adapter.format(model.value[0], 'normalDateWithWeekday') : t(props.header));
@@ -22809,7 +22875,8 @@ const VDatePicker = genericComponent()({
       return createVNode(VPicker, mergeProps(pickerProps, {
         "class": ['v-date-picker', props.class],
         "style": props.style,
-        "title": title.value
+        "title": title.value,
+        "width": props.showWeek ? 408 : 360
       }), {
         header: () => slots.header?.(headerSlotProps.value) ?? createVNode(VDatePickerHeader, mergeProps({
           "key": "header"
@@ -23596,7 +23663,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "3.3.7";
+const version$1 = "3.3.9";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -23610,7 +23677,7 @@ function inject(key) {
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.3.7";
+const version = "3.3.9";
 
 /* eslint-disable local-rules/sort-imports */