vuetify 3.6.13 → 3.7.0-beta.1

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.6.13
+* Vuetify v3.7.0-beta.1
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -498,6 +498,11 @@ function templateRef() {
   });
   return fn;
 }
+function checkPrintable(e) {
+  const isPrintableChar = e.key.length === 1;
+  const noModifier = !e.ctrlKey && !e.metaKey && !e.altKey;
+  return isPrintableChar && noModifier;
+}
 
 // Utilities
 const block = ['top', 'bottom'];
@@ -3688,6 +3693,7 @@ const Intersect = {
 // not intended for public use, this is passed in by vuetify-loader
 
 const makeVImgProps = propsFactory({
+  absolute: Boolean,
   alt: String,
   cover: Boolean,
   color: String,
@@ -3944,6 +3950,7 @@ const VImg = genericComponent()({
       const responsiveProps = VResponsive.filterProps(props);
       return withDirectives(createVNode(VResponsive, mergeProps({
         "class": ['v-img', {
+          'v-img--absolute': props.absolute,
           'v-img--booting': !isBooted.value
         }, backgroundColorClasses.value, roundedClasses.value, props.class],
         "style": [{
@@ -5744,6 +5751,7 @@ const makeVBtnProps = propsFactory({
     type: Boolean,
     default: undefined
   },
+  activeColor: String,
   baseColor: String,
   symbol: {
     type: null,
@@ -5835,10 +5843,11 @@ const VBtn = genericComponent()({
       }
       return group?.isSelected.value;
     });
+    const color = computed(() => isActive.value ? props.activeColor ?? props.color : props.color);
     const variantProps = computed(() => {
       const showColor = group?.isSelected.value && (!link.isLink.value || link.isActive?.value) || !group || link.isActive?.value;
       return {
-        color: showColor ? props.color ?? props.baseColor : props.baseColor,
+        color: showColor ? color.value ?? props.baseColor : props.baseColor,
         variant: props.variant
       };
     });
@@ -6179,6 +6188,7 @@ const makeVAvatarProps = propsFactory({
   icon: IconValue,
   image: String,
   text: String,
+  ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeRoundedProps(),
@@ -6199,6 +6209,9 @@ const VAvatar = genericComponent()({
     const {
       themeClasses
     } = provideTheme(props);
+    const {
+      borderClasses
+    } = useBorder(props);
     const {
       colorClasses,
       colorStyles,
@@ -6218,7 +6231,7 @@ const VAvatar = genericComponent()({
       "class": ['v-avatar', {
         'v-avatar--start': props.start,
         'v-avatar--end': props.end
-      }, themeClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
+      }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
       "style": [colorStyles.value, sizeStyles.value, props.style]
     }, {
       default: () => [!slots.default ? props.image ? createVNode(VImg, {
@@ -6918,12 +6931,14 @@ function useValidation(props) {
   const validateOn = computed(() => {
     let value = (props.validateOn ?? form?.validateOn.value) || 'input';
     if (value === 'lazy') value = 'input lazy';
+    if (value === 'eager') value = 'input eager';
     const set = new Set(value?.split(' ') ?? []);
     return {
-      blur: set.has('blur') || set.has('input'),
       input: set.has('input'),
-      submit: set.has('submit'),
-      lazy: set.has('lazy')
+      blur: set.has('blur') || set.has('input') || set.has('invalid-input'),
+      invalidInput: set.has('invalid-input'),
+      lazy: set.has('lazy'),
+      eager: set.has('eager')
     };
   });
   const isValid = computed(() => {
@@ -6960,11 +6975,11 @@ function useValidation(props) {
   });
   onMounted(async () => {
     if (!validateOn.value.lazy) {
-      await validate(true);
+      await validate(!validateOn.value.eager);
     }
     form?.update(uid.value, isValid.value, errorMessages.value);
   });
-  useToggleScope(() => validateOn.value.input, () => {
+  useToggleScope(() => validateOn.value.input || validateOn.value.invalidInput && isValid.value === false, () => {
     watch(validationModel, () => {
       if (validationModel.value != null) {
         validate();
@@ -6992,7 +7007,7 @@ function useValidation(props) {
   async function resetValidation() {
     isPristine.value = true;
     if (!validateOn.value.lazy) {
-      await validate(true);
+      await validate(!validateOn.value.eager);
     } else {
       internalErrorMessages.value = [];
     }
@@ -7932,7 +7947,9 @@ const VSlideGroup = genericComponent()({
       selected: group.selected,
       scrollTo,
       scrollOffset,
-      focus
+      focus,
+      hasPrev,
+      hasNext
     };
   }
 });
@@ -8402,6 +8419,7 @@ const leafSingleActiveStrategy = mandatory => {
   return strategy;
 };
 
+// Utilities
 const singleOpenStrategy = {
   open: _ref => {
     let {
@@ -8435,11 +8453,11 @@ const multipleOpenStrategy = {
       parents
     } = _ref2;
     if (value) {
-      let parent = parents.get(id);
+      let parent = toRaw(parents.get(id));
       opened.add(id);
       while (parent != null && parent !== id) {
         opened.add(parent);
-        parent = parents.get(parent);
+        parent = toRaw(parents.get(parent));
       }
       return opened;
     } else {
@@ -8610,18 +8628,18 @@ const classicSelectStrategy = mandatory => {
       const items = [id];
       while (items.length) {
         const item = items.shift();
-        selected.set(item, value ? 'on' : 'off');
+        selected.set(toRaw(item), value ? 'on' : 'off');
         if (children.has(item)) {
           items.push(...children.get(item));
         }
       }
-      let parent = parents.get(id);
+      let parent = toRaw(parents.get(id));
       while (parent) {
         const childrenIds = children.get(parent);
-        const everySelected = childrenIds.every(cid => selected.get(cid) === 'on');
-        const noneSelected = childrenIds.every(cid => !selected.has(cid) || selected.get(cid) === 'off');
+        const everySelected = childrenIds.every(cid => selected.get(toRaw(cid)) === 'on');
+        const noneSelected = childrenIds.every(cid => !selected.has(toRaw(cid)) || selected.get(toRaw(cid)) === 'off');
         selected.set(parent, everySelected ? 'on' : noneSelected ? 'off' : 'indeterminate');
-        parent = parents.get(parent);
+        parent = toRaw(parents.get(parent));
       }
 
       // If mandatory and planned deselect results in no selected
@@ -8699,7 +8717,7 @@ const useNested = props => {
   let isUnmounted = false;
   const children = ref(new Map());
   const parents = ref(new Map());
-  const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(v), v => [...v.values()]);
+  const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(toRaw(v)), v => [...v.values()]);
   const activeStrategy = computed(() => {
     if (typeof props.activeStrategy === 'object') return props.activeStrategy;
     if (typeof props.activeStrategy === 'function') return props.activeStrategy(props.mandatory);
@@ -8790,7 +8808,6 @@ const useNested = props => {
           children.value.set(parent, list.filter(child => child !== id));
         }
         parents.value.delete(id);
-        opened.value.delete(id);
       },
       open: (id, value, event) => {
         vm.emit('click:open', {
@@ -8873,9 +8890,9 @@ const useNestedItem = (id, isGroup) => {
   const item = {
     ...parent,
     id: computedId,
-    open: (open, e) => parent.root.open(computedId.value, open, e),
+    open: (open, e) => parent.root.open(toRaw(computedId.value), open, e),
     openOnSelect: (open, e) => parent.root.openOnSelect(computedId.value, open, e),
-    isOpen: computed(() => parent.root.opened.value.has(computedId.value)),
+    isOpen: computed(() => parent.root.opened.value.has(toRaw(computedId.value))),
     parent: computed(() => parent.root.parents.value.get(computedId.value)),
     activate: (activated, e) => parent.root.activate(computedId.value, activated, e),
     isActivated: computed(() => parent.root.activated.value.has(toRaw(computedId.value))),
@@ -9099,6 +9116,7 @@ const VListItem = genericComponent()({
       activate,
       isActivated,
       select,
+      isOpen,
       isSelected,
       isIndeterminate,
       isGroupActivator,
@@ -9153,6 +9171,7 @@ const VListItem = genericComponent()({
     const slotProps = computed(() => ({
       isActive: isActive.value,
       select,
+      isOpen: isOpen.value,
       isSelected: isSelected.value,
       isIndeterminate: isIndeterminate.value
     }));
@@ -9962,12 +9981,6 @@ 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) {
@@ -11359,23 +11372,25 @@ const VMenu = genericComponent()({
     const id = computed(() => props.id || `v-menu-${uid}`);
     const overlay = ref();
     const parent = inject$1(VMenuSymbol, null);
-    const openChildren = shallowRef(0);
+    const openChildren = shallowRef(new Set());
     provide(VMenuSymbol, {
       register() {
-        ++openChildren.value;
+        openChildren.value.add(uid);
       },
       unregister() {
-        --openChildren.value;
+        openChildren.value.delete(uid);
       },
       closeParents(e) {
         setTimeout(() => {
-          if (!openChildren.value && !props.persistent && (e == null || e && !isClickInsideElement(e, overlay.value.contentEl))) {
+          if (!openChildren.value.size && !props.persistent && (e == null || e && !isClickInsideElement(e, overlay.value.contentEl))) {
             isActive.value = false;
             parent?.closeParents();
           }
         }, 40);
       }
     });
+    onBeforeUnmount(() => parent?.unregister());
+    onDeactivated(() => isActive.value = false);
     async function onFocusIn(e) {
       const before = e.relatedTarget;
       const after = e.target;
@@ -12287,6 +12302,7 @@ function useVirtual(props, items) {
     deep: true
   });
   return {
+    calculateVisibleItems,
     containerRef,
     markerRef,
     computedItems,
@@ -12350,6 +12366,7 @@ const VVirtualScroll = genericComponent()({
       dimensionStyles
     } = useDimension(props);
     const {
+      calculateVisibleItems,
       containerRef,
       markerRef,
       handleScroll,
@@ -12421,6 +12438,7 @@ const VVirtualScroll = genericComponent()({
       }, [children])]);
     });
     return {
+      calculateVisibleItems,
       scrollToIndex
     };
   }
@@ -12489,9 +12507,9 @@ function useScrolling(listRef, textFieldRef) {
     }
   }
   return {
-    onListScroll,
-    onListKeydown
-  };
+    onScrollPassive: onListScroll,
+    onKeydown: onListKeydown
+  }; // typescript doesn't know about vue's event merging
 }
 
 // Types
@@ -12566,7 +12584,7 @@ const VSelect = genericComponent()({
     const menu = computed({
       get: () => _menu.value,
       set: v => {
-        if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return;
+        if (_menu.value && !v && vMenuRef.value?.ΨopenChildren.size) return;
         _menu.value = v;
       }
     });
@@ -12605,10 +12623,7 @@ const VSelect = genericComponent()({
       };
     });
     const listRef = ref();
-    const {
-      onListScroll,
-      onListKeydown
-    } = useScrolling(listRef, vTextFieldRef);
+    const listEvents = useScrolling(listRef, vTextFieldRef);
     function onClear(e) {
       if (props.openOnClear) {
         menu.value = true;
@@ -12618,6 +12633,11 @@ const VSelect = genericComponent()({
       if (menuDisabled.value) return;
       menu.value = !menu.value;
     }
+    function onListKeydown(e) {
+      if (checkPrintable(e)) {
+        onKeydown(e);
+      }
+    }
     function onKeydown(e) {
       if (!e.key || props.readonly || form?.isReadonly.value) return;
       if (['Enter', ' ', 'ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {
@@ -12638,11 +12658,6 @@ const VSelect = genericComponent()({
       // html select hotkeys
       const KEYBOARD_LOOKUP_THRESHOLD = 1000; // milliseconds
 
-      function checkPrintable(e) {
-        const isPrintableChar = e.key.length === 1;
-        const noModifier = !e.ctrlKey && !e.metaKey && !e.altKey;
-        return isPrintableChar && noModifier;
-      }
       if (props.multiple || !checkPrintable(e)) return;
       const now = performance.now();
       if (now - keyboardLookupLastTime > KEYBOARD_LOOKUP_THRESHOLD) {
@@ -12687,6 +12702,11 @@ const VSelect = genericComponent()({
         menu.value = false;
       }
     }
+    function onAfterEnter() {
+      if (props.eager) {
+        vVirtualScrollRef.value?.calculateVisibleItems();
+      }
+    }
     function onAfterLeave() {
       if (isFocused.value) {
         vTextFieldRef.value?.focus();
@@ -12765,6 +12785,7 @@ const VSelect = genericComponent()({
           "openOnClick": false,
           "closeOnContentClick": false,
           "transition": props.transition,
+          "onAfterEnter": onAfterEnter,
           "onAfterLeave": onAfterLeave
         }, computedMenuProps.value), {
           default: () => [hasList && createVNode(VList, mergeProps({
@@ -12774,11 +12795,10 @@ const VSelect = genericComponent()({
             "onMousedown": e => e.preventDefault(),
             "onKeydown": onListKeydown,
             "onFocusin": onFocusin,
-            "onScrollPassive": onListScroll,
             "tabindex": "-1",
             "aria-live": "polite",
             "color": props.itemColor ?? props.color
-          }, props.listProps), {
+          }, listEvents, props.listProps), {
             default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
             }, null)), createVNode(VVirtualScroll, {
@@ -13073,7 +13093,7 @@ const VAutocomplete = genericComponent()({
     const menu = computed({
       get: () => _menu.value,
       set: v => {
-        if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return;
+        if (_menu.value && !v && vMenuRef.value?.ΨopenChildren.size) return;
         _menu.value = v;
       }
     });
@@ -13117,10 +13137,7 @@ const VAutocomplete = genericComponent()({
     });
     const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
     const listRef = ref();
-    const {
-      onListScroll,
-      onListKeydown
-    } = useScrolling(listRef, vTextFieldRef);
+    const listEvents = useScrolling(listRef, vTextFieldRef);
     function onClear(e) {
       if (props.openOnClear) {
         menu.value = true;
@@ -13139,6 +13156,11 @@ const VAutocomplete = genericComponent()({
       }
       menu.value = !menu.value;
     }
+    function onListKeydown(e) {
+      if (checkPrintable(e)) {
+        vTextFieldRef.value?.focus();
+      }
+    }
     function onKeydown(e) {
       if (props.readonly || form?.isReadonly.value) return;
       const selectionStart = vTextFieldRef.value.selectionStart;
@@ -13203,6 +13225,11 @@ const VAutocomplete = genericComponent()({
         }
       }
     }
+    function onAfterEnter() {
+      if (props.eager) {
+        vVirtualScrollRef.value?.calculateVisibleItems();
+      }
+    }
     function onAfterLeave() {
       if (isFocused.value) {
         isPristine.value = true;
@@ -13331,6 +13358,7 @@ const VAutocomplete = genericComponent()({
           "openOnClick": false,
           "closeOnContentClick": false,
           "transition": props.transition,
+          "onAfterEnter": onAfterEnter,
           "onAfterLeave": onAfterLeave
         }, props.menuProps), {
           default: () => [hasList && createVNode(VList, mergeProps({
@@ -13341,11 +13369,10 @@ const VAutocomplete = genericComponent()({
             "onKeydown": onListKeydown,
             "onFocusin": onFocusin,
             "onFocusout": onFocusout,
-            "onScrollPassive": onListScroll,
             "tabindex": "-1",
             "aria-live": "polite",
             "color": props.itemColor ?? props.color
-          }, props.listProps), {
+          }, listEvents, props.listProps), {
             default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
             }, null)), createVNode(VVirtualScroll, {
@@ -16906,7 +16933,7 @@ const VCombobox = genericComponent()({
     const menu = computed({
       get: () => _menu.value,
       set: v => {
-        if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return;
+        if (_menu.value && !v && vMenuRef.value?.ΨopenChildren.size) return;
         _menu.value = v;
       }
     });
@@ -16989,10 +17016,7 @@ const VCombobox = genericComponent()({
     });
     const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
     const listRef = ref();
-    const {
-      onListScroll,
-      onListKeydown
-    } = useScrolling(listRef, vTextFieldRef);
+    const listEvents = useScrolling(listRef, vTextFieldRef);
     function onClear(e) {
       cleared = true;
       if (props.openOnClear) {
@@ -17011,6 +17035,11 @@ const VCombobox = genericComponent()({
       }
       menu.value = !menu.value;
     }
+    function onListKeydown(e) {
+      if (checkPrintable(e)) {
+        vTextFieldRef.value?.focus();
+      }
+    }
     // eslint-disable-next-line complexity
     function onKeydown(e) {
       if (isComposingIgnoreKey(e) || props.readonly || form?.isReadonly.value) return;
@@ -17075,6 +17104,11 @@ const VCombobox = genericComponent()({
         }
       }
     }
+    function onAfterEnter() {
+      if (props.eager) {
+        vVirtualScrollRef.value?.calculateVisibleItems();
+      }
+    }
     function onAfterLeave() {
       if (isFocused.value) {
         isPristine.value = true;
@@ -17199,6 +17233,7 @@ const VCombobox = genericComponent()({
           "openOnClick": false,
           "closeOnContentClick": false,
           "transition": props.transition,
+          "onAfterEnter": onAfterEnter,
           "onAfterLeave": onAfterLeave
         }, props.menuProps), {
           default: () => [hasList && createVNode(VList, mergeProps({
@@ -17209,11 +17244,10 @@ const VCombobox = genericComponent()({
             "onKeydown": onListKeydown,
             "onFocusin": onFocusin,
             "onFocusout": onFocusout,
-            "onScrollPassive": onListScroll,
             "tabindex": "-1",
             "aria-live": "polite",
             "color": props.itemColor ?? props.color
-          }, props.listProps), {
+          }, listEvents, props.listProps), {
             default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
             }, null)), createVNode(VVirtualScroll, {
@@ -21157,6 +21191,7 @@ const makeVContainerProps = propsFactory({
     default: false
   },
   ...makeComponentProps(),
+  ...makeDimensionProps(),
   ...makeTagProps()
 }, 'VContainer');
 const VContainer = genericComponent()({
@@ -21169,11 +21204,14 @@ const VContainer = genericComponent()({
     const {
       rtlClasses
     } = useRtl();
+    const {
+      dimensionStyles
+    } = useDimension(props);
     useRender(() => createVNode(props.tag, {
       "class": ['v-container', {
         'v-container--fluid': props.fluid
       }, rtlClasses.value, props.class],
-      "style": props.style
+      "style": [dimensionStyles.value, props.style]
     }, slots));
     return {};
   }
@@ -22595,7 +22633,8 @@ const makeVExpansionPanelTitleProps = propsFactory({
     default: false
   },
   readonly: Boolean,
-  ...makeComponentProps()
+  ...makeComponentProps(),
+  ...makeDimensionProps()
 }, 'VExpansionPanelTitle');
 const VExpansionPanelTitle = genericComponent()({
   name: 'VExpansionPanelTitle',
@@ -22613,6 +22652,9 @@ const VExpansionPanelTitle = genericComponent()({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(props, 'color');
+    const {
+      dimensionStyles
+    } = useDimension(props);
     const slotProps = computed(() => ({
       collapseIcon: props.collapseIcon,
       disabled: expansionPanel.disabled.value,
@@ -22627,7 +22669,7 @@ const VExpansionPanelTitle = genericComponent()({
         'v-expansion-panel-title--focusable': props.focusable,
         'v-expansion-panel-title--static': props.static
       }, backgroundColorClasses.value, props.class],
-      "style": [backgroundColorStyles.value, props.style],
+      "style": [backgroundColorStyles.value, dimensionStyles.value, props.style],
       "type": "button",
       "tabindex": expansionPanel.disabled.value ? -1 : undefined,
       "disabled": expansionPanel.disabled.value,
@@ -28133,7 +28175,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.6.13";
+const version$1 = "3.7.0-beta.1";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -28158,7 +28200,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.6.13";
+const version = "3.7.0-beta.1";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };