vuetify 3.5.16 → 3.5.17

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.5.16
+* Vuetify v3.5.17
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -2374,6 +2374,7 @@
     badge: 'Badge',
     open: 'Open',
     close: 'Close',
+    dismiss: 'Dismiss',
     confirmEdit: {
       ok: 'OK',
       cancel: 'Cancel'
@@ -4598,6 +4599,7 @@
       const index = children.indexOf(vm);
       if (vue.unref(unwrapped.value) == null) {
         unwrapped.value = index;
+        unwrapped.useIndexAsValue = true;
       }
       if (index > -1) {
         items.splice(index, 0, unwrapped);
@@ -4630,6 +4632,14 @@
     vue.onBeforeUnmount(() => {
       isUnmounted = true;
     });
+    vue.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;
@@ -5012,6 +5022,65 @@
     }
   });
 
+  // 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 = vue.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: {
@@ -5044,6 +5113,9 @@
     striped: Boolean,
     roundedBar: Boolean,
     ...makeComponentProps(),
+    ...makeLocationProps({
+      location: 'top'
+    }),
     ...makeRoundedProps(),
     ...makeTagProps(),
     ...makeThemeProps()
@@ -5066,6 +5138,9 @@
       const {
         themeClasses
       } = provideTheme(props);
+      const {
+        locationStyles
+      } = useLocation(props);
       const {
         textColorClasses,
         textColorStyles
@@ -5115,8 +5190,11 @@
           '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',
@@ -5202,65 +5280,6 @@
     }, 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 = vue.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
@@ -6975,6 +6994,7 @@
     'onClick:append': EventProp(),
     ...makeComponentProps(),
     ...makeDensityProps(),
+    ...makeThemeProps(),
     ...makeValidationProps()
   }, 'VInput');
   const VInput = genericComponent()({
@@ -6994,6 +7014,9 @@
       const {
         densityClasses
       } = useDensity(props);
+      const {
+        themeClasses
+      } = provideTheme(props);
       const {
         rtlClasses
       } = useRtl();
@@ -7047,7 +7070,7 @@
           "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 && vue.createVNode("div", {
           "key": "prepend",
@@ -9403,7 +9426,8 @@
         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') {
@@ -12317,6 +12341,10 @@
         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);
+          });
         }
       }
 
@@ -12365,7 +12393,7 @@
           vTextFieldRef.value.value = '';
         }
       }
-      vue.watch([menu, model], () => {
+      vue.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(() => {
@@ -12819,16 +12847,14 @@
           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') {
@@ -12876,7 +12902,7 @@
         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 = vue.shallowRef(false);
 
@@ -13514,12 +13540,12 @@
     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');
@@ -13562,6 +13588,9 @@
           });
         }
       }
+      function onAfterLeave() {
+        emit('afterLeave');
+      }
       vue.watch(isActive, async val => {
         if (!val) {
           await vue.nextTick();
@@ -13593,7 +13622,8 @@
           "activatorProps": activatorProps,
           "contentProps": contentProps,
           "role": "dialog",
-          "onAfterEnter": onAfterEnter
+          "onAfterEnter": onAfterEnter,
+          "onAfterLeave": onAfterLeave
         }, scopeId), {
           activator: slots.activator,
           default: function () {
@@ -14643,7 +14673,7 @@
         const imgProps = VImg.filterProps(props);
         const windowItemProps = VWindowItem.filterProps(props);
         return vue.createVNode(VWindowItem, vue.mergeProps({
-          "class": "v-carousel-item"
+          "class": ['v-carousel-item', props.class]
         }, windowItemProps), {
           default: () => [vue.createVNode(VImg, vue.mergeProps(attrs, imgProps), slots)]
         });
@@ -16648,16 +16678,14 @@
           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') {
@@ -16726,7 +16754,7 @@
         listHasFocus.value = false;
       }
       function onUpdateModelValue(v) {
-        if (v == null || v === '' && !props.multiple) model.value = [];
+        if (v == null || v === '' && !props.multiple && !hasSelectionSlot.value) model.value = [];
       }
       vue.watch(isFocused, (val, oldVal) => {
         if (val || val === oldVal) return;
@@ -21589,6 +21617,16 @@
       vue.watch(model, (val, oldVal) => {
         const before = adapter.date(wrapInArray(val)[0]);
         const after = adapter.date(wrapInArray(oldVal)[0]);
+        const newMonth = adapter.getMonth(before);
+        const newYear = adapter.getYear(before);
+        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(() => {
@@ -21942,7 +21980,7 @@
     }),
     modelValue: {
       type: [Array, Object],
-      default: () => [],
+      default: props => props.multiple ? [] : null,
       validator: val => {
         return wrapInArray(val).every(v => v != null && typeof v === 'object');
       }
@@ -22971,6 +23009,7 @@
 
   function useTouch(_ref) {
     let {
+      el,
       isActive,
       isTemporary,
       width,
@@ -23020,10 +23059,10 @@
       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);
       }
@@ -23083,6 +23122,18 @@
         transition: 'none'
       } : undefined;
     });
+    useToggleScope(isDragging, () => {
+      const transform = el.value?.style.transform ?? null;
+      const transition = el.value?.style.transition ?? null;
+      vue.watchEffect(() => {
+        el.value?.style.setProperty('transform', dragStyles.value?.transform || 'none');
+        el.value?.style.setProperty('transition', dragStyles.value?.transition || null);
+      });
+      vue.onScopeDispose(() => {
+        el.value?.style.setProperty('transform', transform);
+        el.value?.style.setProperty('transition', transition);
+      });
+    });
     return {
       isDragging,
       dragProgress,
@@ -23215,9 +23266,9 @@
       });
       const {
         isDragging,
-        dragProgress,
-        dragStyles
+        dragProgress
       } = useTouch({
+        el: rootEl,
         isActive,
         isTemporary,
         width,
@@ -23287,7 +23338,7 @@
             '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 && vue.createVNode("div", {
             "key": "image",
@@ -24398,8 +24449,8 @@
       } = _ref;
       const isActive = useProxiedModel(props, 'modelValue');
       const {
-        locationStyles
-      } = useLocation(props);
+        mainStyles
+      } = useLayout();
       const {
         positionClasses
       } = usePosition(props);
@@ -24421,6 +24472,7 @@
       const overlay = vue.ref();
       const timerRef = vue.ref();
       const isHovering = vue.shallowRef(false);
+      const startY = vue.shallowRef(0);
       vue.watch(isActive, startTimeout);
       vue.watch(() => props.timeout, startTimeout);
       vue.onMounted(() => {
@@ -24450,6 +24502,20 @@
         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 = vue.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);
@@ -24460,14 +24526,14 @@
             '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": vue.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),
@@ -24475,7 +24541,9 @@
           "noClickAnimation": true,
           "scrim": false,
           "scrollStrategy": "none",
-          "_disableGlobalStack": true
+          "_disableGlobalStack": true,
+          "onTouchstart": onTouchstart,
+          "onTouchend": onTouchend
         }, scopeId), {
           default: () => [genOverlays(false, 'v-snackbar'), props.timer && !isHovering.value && vue.createVNode("div", {
             "key": "timer",
@@ -26334,7 +26402,7 @@
       goTo
     };
   }
-  const version$1 = "3.5.16";
+  const version$1 = "3.5.17";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -26359,7 +26427,7 @@
       ...options
     });
   };
-  const version = "3.5.16";
+  const version = "3.5.17";
   createVuetify.version = version;
 
   exports.blueprints = index;