@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.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.
 */
@@ -579,6 +579,11 @@
     });
     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'];
@@ -10280,7 +10285,8 @@
   function useActivator(props, _ref) {
     let {
       isActive,
-      isTop
+      isTop,
+      contentEl
     } = _ref;
     const vm = getCurrentInstance('useActivator');
     const activatorEl = vue.ref();
@@ -10397,7 +10403,7 @@
       return events;
     });
     vue.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;
       }
     });
@@ -10803,6 +10809,9 @@
         attrs,
         emit
       } = _ref;
+      const root = vue.ref();
+      const scrimEl = vue.ref();
+      const contentEl = vue.ref();
       const model = useProxiedModel(props, 'modelValue');
       const isActive = vue.computed({
         get: () => model.value,
@@ -10840,7 +10849,8 @@
         scrimEvents
       } = useActivator(props, {
         isActive,
-        isTop: localTop
+        isTop: localTop,
+        contentEl
       });
       const {
         teleportTarget
@@ -10861,9 +10871,6 @@
       vue.watch(() => props.disabled, v => {
         if (v) isActive.value = false;
       });
-      const root = vue.ref();
-      const scrimEl = vue.ref();
-      const contentEl = vue.ref();
       const {
         contentStyles,
         updateLocation
@@ -11114,10 +11121,12 @@
     // TODO
     // disableKeys: Boolean,
     id: String,
+    submenu: Boolean,
     ...omit(makeVOverlayProps({
       closeDelay: 250,
       closeOnContentClick: true,
       locationStrategy: 'connected',
+      location: undefined,
       openDelay: 300,
       scrim: false,
       scrollStrategy: 'reposition',
@@ -11140,27 +11149,32 @@
       const {
         scopeId
       } = useScopeId();
+      const {
+        isRtl
+      } = useRtl();
       const uid = getUid();
       const id = vue.computed(() => props.id || `v-menu-${uid}`);
       const overlay = vue.ref();
       const parent = vue.inject(VMenuSymbol, null);
-      const openChildren = vue.shallowRef(0);
+      const openChildren = vue.shallowRef(new Set());
       vue.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);
         }
       });
+      vue.onBeforeUnmount(() => parent?.unregister());
+      vue.onDeactivated(() => isActive.value = false);
       async function onFocusIn(e) {
         const before = e.relatedTarget;
         const after = e.target;
@@ -11203,6 +11217,9 @@
         } 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) {
@@ -11211,12 +11228,21 @@
         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)));
@@ -11240,6 +11266,7 @@
           "onUpdate:modelValue": $event => isActive.value = $event,
           "absolute": true,
           "activatorProps": activatorProps.value,
+          "location": props.location ?? (props.submenu ? 'end' : 'bottom'),
           "onClick:outside": onClickOutside,
           "onKeydown": onKeydown
         }, scopeId), {
@@ -12072,6 +12099,7 @@
       deep: true
     });
     return {
+      calculateVisibleItems,
       containerRef,
       markerRef,
       computedItems,
@@ -12135,6 +12163,7 @@
         dimensionStyles
       } = useDimension(props);
       const {
+        calculateVisibleItems,
         containerRef,
         markerRef,
         handleScroll,
@@ -12206,6 +12235,7 @@
         }, [children])]);
       });
       return {
+        calculateVisibleItems,
         scrollToIndex
       };
     }
@@ -12274,9 +12304,9 @@
       }
     }
     return {
-      onListScroll,
-      onListKeydown
-    };
+      onScrollPassive: onListScroll,
+      onKeydown: onListKeydown
+    }; // typescript doesn't know about vue's event merging
   }
 
   // Types
@@ -12351,7 +12381,7 @@
       const menu = vue.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;
         }
       });
@@ -12390,10 +12420,7 @@
         };
       });
       const listRef = vue.ref();
-      const {
-        onListScroll,
-        onListKeydown
-      } = useScrolling(listRef, vTextFieldRef);
+      const listEvents = useScrolling(listRef, vTextFieldRef);
       function onClear(e) {
         if (props.openOnClear) {
           menu.value = true;
@@ -12403,6 +12430,11 @@
         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)) {
@@ -12423,11 +12455,6 @@
         // 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) {
@@ -12472,6 +12499,11 @@
           menu.value = false;
         }
       }
+      function onAfterEnter() {
+        if (props.eager) {
+          vVirtualScrollRef.value?.calculateVisibleItems();
+        }
+      }
       function onAfterLeave() {
         if (isFocused.value) {
           vTextFieldRef.value?.focus();
@@ -12550,6 +12582,7 @@
             "openOnClick": false,
             "closeOnContentClick": false,
             "transition": props.transition,
+            "onAfterEnter": onAfterEnter,
             "onAfterLeave": onAfterLeave
           }, computedMenuProps.value), {
             default: () => [hasList && vue.createVNode(VList, vue.mergeProps({
@@ -12559,11 +12592,10 @@
               "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']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
               }, null)), vue.createVNode(VVirtualScroll, {
@@ -12858,7 +12890,7 @@
       const menu = vue.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;
         }
       });
@@ -12902,10 +12934,7 @@
       });
       const menuDisabled = vue.computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
       const listRef = vue.ref();
-      const {
-        onListScroll,
-        onListKeydown
-      } = useScrolling(listRef, vTextFieldRef);
+      const listEvents = useScrolling(listRef, vTextFieldRef);
       function onClear(e) {
         if (props.openOnClear) {
           menu.value = true;
@@ -12924,6 +12953,11 @@
         }
         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;
@@ -12988,6 +13022,11 @@
           }
         }
       }
+      function onAfterEnter() {
+        if (props.eager) {
+          vVirtualScrollRef.value?.calculateVisibleItems();
+        }
+      }
       function onAfterLeave() {
         if (isFocused.value) {
           isPristine.value = true;
@@ -13116,6 +13155,7 @@
             "openOnClick": false,
             "closeOnContentClick": false,
             "transition": props.transition,
+            "onAfterEnter": onAfterEnter,
             "onAfterLeave": onAfterLeave
           }, props.menuProps), {
             default: () => [hasList && vue.createVNode(VList, vue.mergeProps({
@@ -13126,11 +13166,10 @@
               "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']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
               }, null)), vue.createVNode(VVirtualScroll, {
@@ -16691,7 +16730,7 @@
       const menu = vue.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;
         }
       });
@@ -16774,10 +16813,7 @@
       });
       const menuDisabled = vue.computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
       const listRef = vue.ref();
-      const {
-        onListScroll,
-        onListKeydown
-      } = useScrolling(listRef, vTextFieldRef);
+      const listEvents = useScrolling(listRef, vTextFieldRef);
       function onClear(e) {
         cleared = true;
         if (props.openOnClear) {
@@ -16796,6 +16832,11 @@
         }
         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;
@@ -16860,6 +16901,11 @@
           }
         }
       }
+      function onAfterEnter() {
+        if (props.eager) {
+          vVirtualScrollRef.value?.calculateVisibleItems();
+        }
+      }
       function onAfterLeave() {
         if (isFocused.value) {
           isPristine.value = true;
@@ -16984,6 +17030,7 @@
             "openOnClick": false,
             "closeOnContentClick": false,
             "transition": props.transition,
+            "onAfterEnter": onAfterEnter,
             "onAfterLeave": onAfterLeave
           }, props.menuProps), {
             default: () => [hasList && vue.createVNode(VList, vue.mergeProps({
@@ -16994,11 +17041,10 @@
               "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']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
               }, null)), vue.createVNode(VVirtualScroll, {
@@ -30292,7 +30338,7 @@
       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
@@ -30545,7 +30591,7 @@
 
   /* 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 */