vuetify 3.5.16 → 3.5.18

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.5.16
+* Vuetify v3.5.18
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, unref, warn, ref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, createVNode, mergeProps, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, TransitionGroup, Transition, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText } from 'vue';
+import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, unref, warn, ref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, createVNode, mergeProps, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, TransitionGroup, Transition, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText } from 'vue';
 
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -2370,6 +2370,7 @@ var en = {
   badge: 'Badge',
   open: 'Open',
   close: 'Close',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel'
@@ -4594,6 +4595,7 @@ function useGroup(props, injectKey) {
     const index = children.indexOf(vm);
     if (unref(unwrapped.value) == null) {
       unwrapped.value = index;
+      unwrapped.useIndexAsValue = true;
     }
     if (index > -1) {
       items.splice(index, 0, unwrapped);
@@ -4626,6 +4628,14 @@ function useGroup(props, injectKey) {
   onBeforeUnmount(() => {
     isUnmounted = true;
   });
+  onUpdated(() => {
+    // #19655 update the items that use the index as the value.
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].useIndexAsValue) {
+        items[i].value = i;
+      }
+    }
+  });
   function select(id, value) {
     const item = items.find(item => item.id === id);
     if (value && item?.disabled) return;
@@ -5008,6 +5018,65 @@ const VProgressCircular = genericComponent()({
   }
 });
 
+// Composables
+
+// Types
+
+const oppositeMap = {
+  center: 'center',
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
+};
+const makeLocationProps = propsFactory({
+  location: String
+}, 'location');
+function useLocation(props) {
+  let opposite = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  let offset = arguments.length > 2 ? arguments[2] : undefined;
+  const {
+    isRtl
+  } = useRtl();
+  const locationStyles = computed(() => {
+    if (!props.location) return {};
+    const {
+      side,
+      align
+    } = parseAnchor(props.location.split(' ').length > 1 ? props.location : `${props.location} center`, isRtl.value);
+    function getOffset(side) {
+      return offset ? offset(side) : 0;
+    }
+    const styles = {};
+    if (side !== 'center') {
+      if (opposite) styles[oppositeMap[side]] = `calc(100% - ${getOffset(side)}px)`;else styles[side] = 0;
+    }
+    if (align !== 'center') {
+      if (opposite) styles[oppositeMap[align]] = `calc(100% - ${getOffset(align)}px)`;else styles[align] = 0;
+    } else {
+      if (side === 'center') styles.top = styles.left = '50%';else {
+        styles[{
+          top: 'left',
+          bottom: 'left',
+          left: 'top',
+          right: 'top'
+        }[side]] = '50%';
+      }
+      styles.transform = {
+        top: 'translateX(-50%)',
+        bottom: 'translateX(-50%)',
+        left: 'translateY(-50%)',
+        right: 'translateY(-50%)',
+        center: 'translate(-50%, -50%)'
+      }[side];
+    }
+    return styles;
+  });
+  return {
+    locationStyles
+  };
+}
+
 const makeVProgressLinearProps = propsFactory({
   absolute: Boolean,
   active: {
@@ -5040,6 +5109,9 @@ const makeVProgressLinearProps = propsFactory({
   striped: Boolean,
   roundedBar: Boolean,
   ...makeComponentProps(),
+  ...makeLocationProps({
+    location: 'top'
+  }),
   ...makeRoundedProps(),
   ...makeTagProps(),
   ...makeThemeProps()
@@ -5062,6 +5134,9 @@ const VProgressLinear = genericComponent()({
     const {
       themeClasses
     } = provideTheme(props);
+    const {
+      locationStyles
+    } = useLocation(props);
     const {
       textColorClasses,
       textColorStyles
@@ -5111,8 +5186,11 @@ const VProgressLinear = genericComponent()({
         'v-progress-linear--striped': props.striped
       }, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class],
       "style": [{
+        bottom: props.location === 'bottom' ? 0 : undefined,
+        top: props.location === 'top' ? 0 : undefined,
         height: props.active ? convertToUnit(height.value) : 0,
-        '--v-progress-linear-height': convertToUnit(height.value)
+        '--v-progress-linear-height': convertToUnit(height.value),
+        ...(props.absolute ? locationStyles.value : {})
       }, props.style],
       "role": "progressbar",
       "aria-hidden": props.active ? 'false' : 'true',
@@ -5198,65 +5276,6 @@ function LoaderSlot(props, _ref) {
   }, null)]);
 }
 
-// Composables
-
-// Types
-
-const oppositeMap = {
-  center: 'center',
-  top: 'bottom',
-  bottom: 'top',
-  left: 'right',
-  right: 'left'
-};
-const makeLocationProps = propsFactory({
-  location: String
-}, 'location');
-function useLocation(props) {
-  let opposite = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  let offset = arguments.length > 2 ? arguments[2] : undefined;
-  const {
-    isRtl
-  } = useRtl();
-  const locationStyles = computed(() => {
-    if (!props.location) return {};
-    const {
-      side,
-      align
-    } = parseAnchor(props.location.split(' ').length > 1 ? props.location : `${props.location} center`, isRtl.value);
-    function getOffset(side) {
-      return offset ? offset(side) : 0;
-    }
-    const styles = {};
-    if (side !== 'center') {
-      if (opposite) styles[oppositeMap[side]] = `calc(100% - ${getOffset(side)}px)`;else styles[side] = 0;
-    }
-    if (align !== 'center') {
-      if (opposite) styles[oppositeMap[align]] = `calc(100% - ${getOffset(align)}px)`;else styles[align] = 0;
-    } else {
-      if (side === 'center') styles.top = styles.left = '50%';else {
-        styles[{
-          top: 'left',
-          bottom: 'left',
-          left: 'top',
-          right: 'top'
-        }[side]] = '50%';
-      }
-      styles.transform = {
-        top: 'translateX(-50%)',
-        bottom: 'translateX(-50%)',
-        left: 'translateY(-50%)',
-        right: 'translateY(-50%)',
-        center: 'translate(-50%, -50%)'
-      }[side];
-    }
-    return styles;
-  });
-  return {
-    locationStyles
-  };
-}
-
 // Utilities
 
 // Types
@@ -6971,6 +6990,7 @@ const makeVInputProps = propsFactory({
   'onClick:append': EventProp(),
   ...makeComponentProps(),
   ...makeDensityProps(),
+  ...makeThemeProps(),
   ...makeValidationProps()
 }, 'VInput');
 const VInput = genericComponent()({
@@ -6990,6 +7010,9 @@ const VInput = genericComponent()({
     const {
       densityClasses
     } = useDensity(props);
+    const {
+      themeClasses
+    } = provideTheme(props);
     const {
       rtlClasses
     } = useRtl();
@@ -7043,7 +7066,7 @@ const VInput = genericComponent()({
         "class": ['v-input', `v-input--${props.direction}`, {
           'v-input--center-affix': props.centerAffix,
           'v-input--hide-spin-buttons': props.hideSpinButtons
-        }, densityClasses.value, rtlClasses.value, validationClasses.value, props.class],
+        }, densityClasses.value, themeClasses.value, rtlClasses.value, validationClasses.value, props.class],
         "style": props.style
       }, [hasPrepend && createVNode("div", {
         "key": "prepend",
@@ -9399,7 +9422,8 @@ const VList = genericComponent()({
       if (!isFocused.value && !(e.relatedTarget && contentRef.value?.contains(e.relatedTarget))) focus();
     }
     function onKeydown(e) {
-      if (!contentRef.value) return;
+      const target = e.target;
+      if (!contentRef.value || ['INPUT', 'TEXTAREA'].includes(target.tagName)) return;
       if (e.key === 'ArrowDown') {
         focus('next');
       } else if (e.key === 'ArrowUp') {
@@ -12313,6 +12337,10 @@ const VSelect = genericComponent()({
       const item = items.value.find(item => item.title.toLowerCase().startsWith(keyboardLookupPrefix));
       if (item !== undefined) {
         model.value = [item];
+        const index = displayItems.value.indexOf(item);
+        IN_BROWSER && window.requestAnimationFrame(() => {
+          index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
+        });
       }
     }
 
@@ -12361,7 +12389,7 @@ const VSelect = genericComponent()({
         vTextFieldRef.value.value = '';
       }
     }
-    watch([menu, model], () => {
+    watch(menu, () => {
       if (!props.hideSelected && menu.value && model.value.length) {
         const index = displayItems.value.findIndex(item => model.value.some(s => props.valueComparator(s.value, item.value)));
         IN_BROWSER && window.requestAnimationFrame(() => {
@@ -12815,16 +12843,14 @@ const VAutocomplete = genericComponent()({
         listRef.value?.focus('next');
       }
       if (['Backspace', 'Delete'].includes(e.key)) {
-        if (!props.multiple && hasSelectionSlot.value && model.value.length > 0) return select(model.value[0], false);
-        if (selectionIndex.value < 0) {
-          if (e.key === 'Backspace' && !search.value) {
-            selectionIndex.value = length - 1;
-          }
-          return;
+        if (!props.multiple && hasSelectionSlot.value && model.value.length > 0 && !search.value) return select(model.value[0], false);
+        if (~selectionIndex.value) {
+          const originalSelectionIndex = selectionIndex.value;
+          select(model.value[selectionIndex.value], false);
+          selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
+        } else if (e.key === 'Backspace' && !search.value) {
+          selectionIndex.value = length - 1;
         }
-        const originalSelectionIndex = selectionIndex.value;
-        select(model.value[selectionIndex.value], false);
-        selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
       }
       if (!props.multiple) return;
       if (e.key === 'ArrowLeft') {
@@ -12872,7 +12898,7 @@ const VAutocomplete = genericComponent()({
       listHasFocus.value = false;
     }
     function onUpdateModelValue(v) {
-      if (v == null || v === '' && !props.multiple) model.value = [];
+      if (v == null || v === '' && !props.multiple && !hasSelectionSlot.value) model.value = [];
     }
     const isSelecting = shallowRef(false);
 
@@ -13510,12 +13536,12 @@ const VDialog = genericComponent()({
   name: 'VDialog',
   props: makeVDialogProps(),
   emits: {
-    'click:outside': e => true,
     'update:modelValue': value => true,
     afterLeave: () => true
   },
   setup(props, _ref) {
     let {
+      emit,
       slots
     } = _ref;
     const isActive = useProxiedModel(props, 'modelValue');
@@ -13558,6 +13584,9 @@ const VDialog = genericComponent()({
         });
       }
     }
+    function onAfterLeave() {
+      emit('afterLeave');
+    }
     watch(isActive, async val => {
       if (!val) {
         await nextTick();
@@ -13589,7 +13618,8 @@ const VDialog = genericComponent()({
         "activatorProps": activatorProps,
         "contentProps": contentProps,
         "role": "dialog",
-        "onAfterEnter": onAfterEnter
+        "onAfterEnter": onAfterEnter,
+        "onAfterLeave": onAfterLeave
       }, scopeId), {
         activator: slots.activator,
         default: function () {
@@ -14639,7 +14669,7 @@ const VCarouselItem = genericComponent()({
       const imgProps = VImg.filterProps(props);
       const windowItemProps = VWindowItem.filterProps(props);
       return createVNode(VWindowItem, mergeProps({
-        "class": "v-carousel-item"
+        "class": ['v-carousel-item', props.class]
       }, windowItemProps), {
         default: () => [createVNode(VImg, mergeProps(attrs, imgProps), slots)]
       });
@@ -16644,16 +16674,14 @@ const VCombobox = genericComponent()({
         if (hasSelectionSlot.value) _search.value = '';
       }
       if (['Backspace', 'Delete'].includes(e.key)) {
-        if (!props.multiple && hasSelectionSlot.value && model.value.length > 0) return select(model.value[0], false);
-        if (selectionIndex.value < 0) {
-          if (e.key === 'Backspace' && !search.value) {
-            selectionIndex.value = length - 1;
-          }
-          return;
+        if (!props.multiple && hasSelectionSlot.value && model.value.length > 0 && !search.value) return select(model.value[0], false);
+        if (~selectionIndex.value) {
+          const originalSelectionIndex = selectionIndex.value;
+          select(model.value[selectionIndex.value], false);
+          selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
+        } else if (e.key === 'Backspace' && !search.value) {
+          selectionIndex.value = length - 1;
         }
-        const originalSelectionIndex = selectionIndex.value;
-        select(model.value[selectionIndex.value], false);
-        selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
       }
       if (!props.multiple) return;
       if (e.key === 'ArrowLeft') {
@@ -16722,7 +16750,7 @@ const VCombobox = genericComponent()({
       listHasFocus.value = false;
     }
     function onUpdateModelValue(v) {
-      if (v == null || v === '' && !props.multiple) model.value = [];
+      if (v == null || v === '' && !props.multiple && !hasSelectionSlot.value) model.value = [];
     }
     watch(isFocused, (val, oldVal) => {
       if (val || val === oldVal) return;
@@ -21583,8 +21611,18 @@ const VDatePicker = genericComponent()({
       emit('update:year', value);
     }
     watch(model, (val, oldVal) => {
-      const before = adapter.date(wrapInArray(val)[0]);
-      const after = adapter.date(wrapInArray(oldVal)[0]);
+      const before = adapter.date(wrapInArray(oldVal)[oldVal.length - 1]);
+      const after = adapter.date(wrapInArray(val)[val.length - 1]);
+      const newMonth = adapter.getMonth(after);
+      const newYear = adapter.getYear(after);
+      if (newMonth !== month.value) {
+        month.value = newMonth;
+        onUpdateMonth(month.value);
+      }
+      if (newYear !== year.value) {
+        year.value = newYear;
+        onUpdateYear(year.value);
+      }
       isReversing.value = adapter.isBefore(before, after);
     });
     useRender(() => {
@@ -21938,7 +21976,7 @@ const makeVFileInputProps = propsFactory({
   }),
   modelValue: {
     type: [Array, Object],
-    default: () => [],
+    default: props => props.multiple ? [] : null,
     validator: val => {
       return wrapInArray(val).every(v => v != null && typeof v === 'object');
     }
@@ -22967,6 +23005,7 @@ function oops$1() {
 
 function useTouch(_ref) {
   let {
+    el,
     isActive,
     isTemporary,
     width,
@@ -23016,10 +23055,10 @@ function useTouch(_ref) {
     const inTouchZone = position.value === 'left' ? touchX < touchZone : position.value === 'right' ? touchX > document.documentElement.clientWidth - touchZone : position.value === 'top' ? touchY < touchZone : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - touchZone : oops();
     const inElement = isActive.value && (position.value === 'left' ? touchX < width.value : position.value === 'right' ? touchX > document.documentElement.clientWidth - width.value : position.value === 'top' ? touchY < width.value : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - width.value : oops());
     if (inTouchZone || inElement || isActive.value && isTemporary.value) {
-      maybeDragging = true;
       start = [touchX, touchY];
       offset.value = getOffset(isHorizontal.value ? touchX : touchY, isActive.value);
       dragProgress.value = getProgress(isHorizontal.value ? touchX : touchY);
+      maybeDragging = offset.value > -20 && offset.value < 80;
       endTouch(e);
       addMovement(e);
     }
@@ -23079,6 +23118,18 @@ function useTouch(_ref) {
       transition: 'none'
     } : undefined;
   });
+  useToggleScope(isDragging, () => {
+    const transform = el.value?.style.transform ?? null;
+    const transition = el.value?.style.transition ?? null;
+    watchEffect(() => {
+      el.value?.style.setProperty('transform', dragStyles.value?.transform || 'none');
+      el.value?.style.setProperty('transition', dragStyles.value?.transition || null);
+    });
+    onScopeDispose(() => {
+      el.value?.style.setProperty('transform', transform);
+      el.value?.style.setProperty('transition', transition);
+    });
+  });
   return {
     isDragging,
     dragProgress,
@@ -23211,9 +23262,9 @@ const VNavigationDrawer = genericComponent()({
     });
     const {
       isDragging,
-      dragProgress,
-      dragStyles
+      dragProgress
     } = useTouch({
+      el: rootEl,
       isActive,
       isTemporary,
       width,
@@ -23283,7 +23334,7 @@ const VNavigationDrawer = genericComponent()({
           'v-navigation-drawer--active': isActive.value,
           'v-navigation-drawer--sticky': isSticky.value
         }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, displayClasses.value, elevationClasses.value, roundedClasses.value, props.class],
-        "style": [backgroundColorStyles.value, layoutItemStyles.value, dragStyles.value, ssrBootStyles.value, stickyStyles.value, props.style]
+        "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value, stickyStyles.value, props.style]
       }, scopeId, attrs), {
         default: () => [hasImage && createVNode("div", {
           "key": "image",
@@ -24393,9 +24444,6 @@ const VSnackbar = genericComponent()({
       slots
     } = _ref;
     const isActive = useProxiedModel(props, 'modelValue');
-    const {
-      locationStyles
-    } = useLocation(props);
     const {
       positionClasses
     } = usePosition(props);
@@ -24417,6 +24465,15 @@ const VSnackbar = genericComponent()({
     const overlay = ref();
     const timerRef = ref();
     const isHovering = shallowRef(false);
+    const startY = shallowRef(0);
+    const mainStyles = ref();
+    const hasLayout = inject$1(VuetifyLayoutKey, undefined);
+    useToggleScope(() => !!hasLayout, () => {
+      const layout = useLayout();
+      watchEffect(() => {
+        mainStyles.value = layout.mainStyles.value;
+      });
+    });
     watch(isActive, startTimeout);
     watch(() => props.timeout, startTimeout);
     onMounted(() => {
@@ -24446,6 +24503,20 @@ const VSnackbar = genericComponent()({
       isHovering.value = false;
       startTimeout();
     }
+    function onTouchstart(event) {
+      startY.value = event.touches[0].clientY;
+    }
+    function onTouchend(event) {
+      if (Math.abs(startY.value - event.changedTouches[0].clientY) > 50) {
+        isActive.value = false;
+      }
+    }
+    const locationClasses = computed(() => {
+      return props.location.split(' ').reduce((acc, loc) => {
+        acc[`v-snackbar--${loc}`] = true;
+        return acc;
+      }, {});
+    });
     useRender(() => {
       const overlayProps = VOverlay.filterProps(props);
       const hasContent = !!(slots.default || slots.text || props.text);
@@ -24456,14 +24527,14 @@ const VSnackbar = genericComponent()({
           'v-snackbar--multi-line': props.multiLine && !props.vertical,
           'v-snackbar--timer': !!props.timer,
           'v-snackbar--vertical': props.vertical
-        }, positionClasses.value, props.class],
-        "style": props.style
+        }, locationClasses.value, positionClasses.value, props.class],
+        "style": [mainStyles.value, props.style]
       }, overlayProps, {
         "modelValue": isActive.value,
         "onUpdate:modelValue": $event => isActive.value = $event,
         "contentProps": mergeProps({
           class: ['v-snackbar__wrapper', themeClasses.value, colorClasses.value, roundedClasses.value, variantClasses.value],
-          style: [locationStyles.value, colorStyles.value],
+          style: [colorStyles.value],
           onPointerenter,
           onPointerleave
         }, overlayProps.contentProps),
@@ -24471,7 +24542,9 @@ const VSnackbar = genericComponent()({
         "noClickAnimation": true,
         "scrim": false,
         "scrollStrategy": "none",
-        "_disableGlobalStack": true
+        "_disableGlobalStack": true,
+        "onTouchstartPassive": onTouchstart,
+        "onTouchend": onTouchend
       }, scopeId), {
         default: () => [genOverlays(false, 'v-snackbar'), props.timer && !isHovering.value && createVNode("div", {
           "key": "timer",
@@ -26330,7 +26403,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.5.16";
+const version$1 = "3.5.18";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -26355,7 +26428,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.5.16";
+const version = "3.5.18";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };