@vuetify/nightly 3.6.13-3.7.0-beta.0.0-dev.2024-07-24 → 3.6.13-3.7.0-beta.0.0-pr-20092.dc840ce

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.6.13-3.7.0-beta.0.0-dev.2024-07-24
+* Vuetify v3.6.13-3.7.0-beta.0.0-pr-20092.dc840ce
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -575,6 +575,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'];
@@ -10276,7 +10281,8 @@ const makeActivatorProps = propsFactory({
 function useActivator(props, _ref) {
   let {
     isActive,
-    isTop
+    isTop,
+    contentEl
   } = _ref;
   const vm = getCurrentInstance('useActivator');
   const activatorEl = ref();
@@ -10393,7 +10399,7 @@ function useActivator(props, _ref) {
     return events;
   });
   watch(isTop, val => {
-    if (val && (props.openOnHover && !isHovered && (!openOnFocus.value || !isFocused) || openOnFocus.value && !isFocused && (!props.openOnHover || !isHovered))) {
+    if (val && (props.openOnHover && !isHovered && (!openOnFocus.value || !isFocused) || openOnFocus.value && !isFocused && (!props.openOnHover || !isHovered)) && !contentEl.value?.contains(document.activeElement)) {
       isActive.value = false;
     }
   });
@@ -10799,6 +10805,9 @@ const VOverlay = genericComponent()({
       attrs,
       emit
     } = _ref;
+    const root = ref();
+    const scrimEl = ref();
+    const contentEl = ref();
     const model = useProxiedModel(props, 'modelValue');
     const isActive = computed({
       get: () => model.value,
@@ -10836,7 +10845,8 @@ const VOverlay = genericComponent()({
       scrimEvents
     } = useActivator(props, {
       isActive,
-      isTop: localTop
+      isTop: localTop,
+      contentEl
     });
     const {
       teleportTarget
@@ -10857,9 +10867,6 @@ const VOverlay = genericComponent()({
     watch(() => props.disabled, v => {
       if (v) isActive.value = false;
     });
-    const root = ref();
-    const scrimEl = ref();
-    const contentEl = ref();
     const {
       contentStyles,
       updateLocation
@@ -11110,10 +11117,12 @@ const makeVMenuProps = propsFactory({
   // TODO
   // disableKeys: Boolean,
   id: String,
+  submenu: Boolean,
   ...omit(makeVOverlayProps({
     closeDelay: 250,
     closeOnContentClick: true,
     locationStrategy: 'connected',
+    location: undefined,
     openDelay: 300,
     scrim: false,
     scrollStrategy: 'reposition',
@@ -11136,27 +11145,32 @@ const VMenu = genericComponent()({
     const {
       scopeId
     } = useScopeId();
+    const {
+      isRtl
+    } = useRtl();
     const uid = getUid();
     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;
@@ -11199,6 +11213,9 @@ const VMenu = genericComponent()({
       } else if (['Enter', ' '].includes(e.key) && props.closeOnContentClick) {
         isActive.value = false;
         parent?.closeParents();
+      } else if (props.submenu && e.key === (isRtl.value ? 'ArrowRight' : 'ArrowLeft')) {
+        isActive.value = false;
+        overlay.value?.activatorEl?.focus();
       }
     }
     function onActivatorKeydown(e) {
@@ -11207,12 +11224,21 @@ const VMenu = genericComponent()({
       if (el && isActive.value) {
         if (e.key === 'ArrowDown') {
           e.preventDefault();
+          e.stopImmediatePropagation();
           focusChild(el, 'next');
         } else if (e.key === 'ArrowUp') {
           e.preventDefault();
+          e.stopImmediatePropagation();
           focusChild(el, 'prev');
+        } else if (props.submenu) {
+          if (e.key === (isRtl.value ? 'ArrowRight' : 'ArrowLeft')) {
+            isActive.value = false;
+          } else if (e.key === (isRtl.value ? 'ArrowLeft' : 'ArrowRight')) {
+            e.preventDefault();
+            focusChild(el, 'first');
+          }
         }
-      } else if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
+      } else if (props.submenu ? e.key === (isRtl.value ? 'ArrowLeft' : 'ArrowRight') : ['ArrowDown', 'ArrowUp'].includes(e.key)) {
         isActive.value = true;
         e.preventDefault();
         setTimeout(() => setTimeout(() => onActivatorKeydown(e)));
@@ -11236,6 +11262,7 @@ const VMenu = genericComponent()({
         "onUpdate:modelValue": $event => isActive.value = $event,
         "absolute": true,
         "activatorProps": activatorProps.value,
+        "location": props.location ?? (props.submenu ? 'end' : 'bottom'),
         "onClick:outside": onClickOutside,
         "onKeydown": onKeydown
       }, scopeId), {
@@ -12068,6 +12095,7 @@ function useVirtual(props, items) {
     deep: true
   });
   return {
+    calculateVisibleItems,
     containerRef,
     markerRef,
     computedItems,
@@ -12131,6 +12159,7 @@ const VVirtualScroll = genericComponent()({
       dimensionStyles
     } = useDimension(props);
     const {
+      calculateVisibleItems,
       containerRef,
       markerRef,
       handleScroll,
@@ -12202,6 +12231,7 @@ const VVirtualScroll = genericComponent()({
       }, [children])]);
     });
     return {
+      calculateVisibleItems,
       scrollToIndex
     };
   }
@@ -12270,9 +12300,9 @@ function useScrolling(listRef, textFieldRef) {
     }
   }
   return {
-    onListScroll,
-    onListKeydown
-  };
+    onScrollPassive: onListScroll,
+    onKeydown: onListKeydown
+  }; // typescript doesn't know about vue's event merging
 }
 
 // Types
@@ -12347,7 +12377,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;
       }
     });
@@ -12386,10 +12416,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;
@@ -12399,6 +12426,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)) {
@@ -12419,11 +12451,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) {
@@ -12468,6 +12495,11 @@ const VSelect = genericComponent()({
         menu.value = false;
       }
     }
+    function onAfterEnter() {
+      if (props.eager) {
+        vVirtualScrollRef.value?.calculateVisibleItems();
+      }
+    }
     function onAfterLeave() {
       if (isFocused.value) {
         vTextFieldRef.value?.focus();
@@ -12546,6 +12578,7 @@ const VSelect = genericComponent()({
           "openOnClick": false,
           "closeOnContentClick": false,
           "transition": props.transition,
+          "onAfterEnter": onAfterEnter,
           "onAfterLeave": onAfterLeave
         }, computedMenuProps.value), {
           default: () => [hasList && createVNode(VList, mergeProps({
@@ -12555,11 +12588,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, {
@@ -12854,7 +12886,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;
       }
     });
@@ -12898,10 +12930,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;
@@ -12920,6 +12949,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;
@@ -12984,6 +13018,11 @@ const VAutocomplete = genericComponent()({
         }
       }
     }
+    function onAfterEnter() {
+      if (props.eager) {
+        vVirtualScrollRef.value?.calculateVisibleItems();
+      }
+    }
     function onAfterLeave() {
       if (isFocused.value) {
         isPristine.value = true;
@@ -13112,6 +13151,7 @@ const VAutocomplete = genericComponent()({
           "openOnClick": false,
           "closeOnContentClick": false,
           "transition": props.transition,
+          "onAfterEnter": onAfterEnter,
           "onAfterLeave": onAfterLeave
         }, props.menuProps), {
           default: () => [hasList && createVNode(VList, mergeProps({
@@ -13122,11 +13162,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, {
@@ -16687,7 +16726,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;
       }
     });
@@ -16770,10 +16809,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) {
@@ -16792,6 +16828,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;
@@ -16856,6 +16897,11 @@ const VCombobox = genericComponent()({
         }
       }
     }
+    function onAfterEnter() {
+      if (props.eager) {
+        vVirtualScrollRef.value?.calculateVisibleItems();
+      }
+    }
     function onAfterLeave() {
       if (isFocused.value) {
         isPristine.value = true;
@@ -16980,6 +17026,7 @@ const VCombobox = genericComponent()({
           "openOnClick": false,
           "closeOnContentClick": false,
           "transition": props.transition,
+          "onAfterEnter": onAfterEnter,
           "onAfterLeave": onAfterLeave
         }, props.menuProps), {
           default: () => [hasList && createVNode(VList, mergeProps({
@@ -16990,11 +17037,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, {
@@ -30288,7 +30334,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.6.13-3.7.0-beta.0.0-dev.2024-07-24";
+const version$1 = "3.6.13-3.7.0-beta.0.0-pr-20092.dc840ce";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -30541,7 +30587,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.6.13-3.7.0-beta.0.0-dev.2024-07-24";
+const version = "3.6.13-3.7.0-beta.0.0-pr-20092.dc840ce";
 
 /* eslint-disable local-rules/sort-imports */