@vuetify/nightly 3.7.0-beta.1-dev.2024-07-29 → 3.7.0-beta.1-dev.2024-08-01

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.7.0-beta.1-dev.2024-07-29
+* Vuetify v3.7.0-beta.1-dev.2024-08-01
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -5949,7 +5949,7 @@ const VBtn = genericComponent()({
           "indeterminate": true,
           "width": "2"
         }, null)])]
-      }), [[Ripple, !isDisabled.value && !!props.ripple, '', {
+      }), [[Ripple, !isDisabled.value && props.ripple, '', {
         center: !!props.icon
       }]]);
     });
@@ -6247,7 +6247,7 @@ const VAvatar = genericComponent()({
         "defaults": {
           VImg: {
             cover: true,
-            image: props.image
+            src: props.image
           },
           VIcon: {
             icon: props.icon
@@ -9191,7 +9191,7 @@ const VListItem = genericComponent()({
     function onKeyDown(e) {
       if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
-        onClick(e);
+        e.target.dispatchEvent(new MouseEvent('click', e));
       }
     }
     useRender(() => {
@@ -10508,7 +10508,8 @@ const makeActivatorProps = propsFactory({
 function useActivator(props, _ref) {
   let {
     isActive,
-    isTop
+    isTop,
+    contentEl
   } = _ref;
   const vm = getCurrentInstance('useActivator');
   const activatorEl = ref();
@@ -10625,7 +10626,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;
     }
   });
@@ -11031,6 +11032,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,
@@ -11068,7 +11072,8 @@ const VOverlay = genericComponent()({
       scrimEvents
     } = useActivator(props, {
       isActive,
-      isTop: localTop
+      isTop: localTop,
+      contentEl
     });
     const {
       teleportTarget
@@ -11089,9 +11094,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
@@ -11342,10 +11344,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',
@@ -11368,6 +11372,9 @@ const VMenu = genericComponent()({
     const {
       scopeId
     } = useScopeId();
+    const {
+      isRtl
+    } = useRtl();
     const uid = getUid();
     const id = computed(() => props.id || `v-menu-${uid}`);
     const overlay = ref();
@@ -11382,7 +11389,7 @@ const VMenu = genericComponent()({
       },
       closeParents(e) {
         setTimeout(() => {
-          if (!openChildren.value.size && !props.persistent && (e == null || e && !isClickInsideElement(e, overlay.value.contentEl))) {
+          if (!openChildren.value.size && !props.persistent && (e == null || overlay.value?.contentEl && !isClickInsideElement(e, overlay.value.contentEl))) {
             isActive.value = false;
             parent?.closeParents();
           }
@@ -11430,9 +11437,9 @@ const VMenu = genericComponent()({
           isActive.value = false;
           overlay.value?.activatorEl?.focus();
         }
-      } else if (['Enter', ' '].includes(e.key) && props.closeOnContentClick) {
+      } else if (props.submenu && e.key === (isRtl.value ? 'ArrowRight' : 'ArrowLeft')) {
         isActive.value = false;
-        parent?.closeParents();
+        overlay.value?.activatorEl?.focus();
       }
     }
     function onActivatorKeydown(e) {
@@ -11441,12 +11448,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)));
@@ -11470,6 +11486,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), {
@@ -23191,6 +23208,8 @@ const VFooter = genericComponent()({
     let {
       slots
     } = _ref;
+    const layoutItemStyles = ref();
+    const layoutIsReady = shallowRef();
     const {
       themeClasses
     } = provideTheme(props);
@@ -23215,17 +23234,20 @@ const VFooter = genericComponent()({
       autoHeight.value = entries[0].target.clientHeight;
     });
     const height = computed(() => props.height === 'auto' ? autoHeight.value : parseInt(props.height, 10));
-    const {
-      layoutItemStyles,
-      layoutIsReady
-    } = useLayoutItem({
-      id: props.name,
-      order: computed(() => parseInt(props.order, 10)),
-      position: computed(() => 'bottom'),
-      layoutSize: height,
-      elementSize: computed(() => props.height === 'auto' ? undefined : height.value),
-      active: computed(() => props.app),
-      absolute: toRef(props, 'absolute')
+    useToggleScope(() => props.app, () => {
+      const layout = useLayoutItem({
+        id: props.name,
+        order: computed(() => parseInt(props.order, 10)),
+        position: computed(() => 'bottom'),
+        layoutSize: height,
+        elementSize: computed(() => props.height === 'auto' ? undefined : height.value),
+        active: computed(() => props.app),
+        absolute: toRef(props, 'absolute')
+      });
+      watchEffect(() => {
+        layoutItemStyles.value = layout.layoutItemStyles.value;
+        layoutIsReady.value = layout.layoutIsReady;
+      });
     });
     useRender(() => createVNode(props.tag, {
       "ref": resizeRef,
@@ -23234,7 +23256,7 @@ const VFooter = genericComponent()({
         height: convertToUnit(props.height)
       }, props.style]
     }, slots));
-    return props.app ? layoutIsReady : {};
+    return props.app ? layoutIsReady.value : {};
   }
 });
 
@@ -25375,16 +25397,17 @@ const VSkeletonLoader = genericComponent()({
     const items = computed(() => genStructure(wrapInArray(props.type).join(',')));
     useRender(() => {
       const isLoading = !slots.default || props.loading;
-      return createVNode("div", {
+      const loadingProps = props.boilerplate || !isLoading ? {} : {
+        ariaLive: 'polite',
+        ariaLabel: t(props.loadingText),
+        role: 'alert'
+      };
+      return createVNode("div", mergeProps({
         "class": ['v-skeleton-loader', {
           'v-skeleton-loader--boilerplate': props.boilerplate
         }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value],
-        "style": [backgroundColorStyles.value, isLoading ? dimensionStyles.value : {}],
-        "aria-busy": !props.boilerplate ? isLoading : undefined,
-        "aria-live": !props.boilerplate ? 'polite' : undefined,
-        "aria-label": !props.boilerplate ? t(props.loadingText) : undefined,
-        "role": !props.boilerplate ? 'alert' : undefined
-      }, [isLoading ? items.value : slots.default?.()]);
+        "style": [backgroundColorStyles.value, isLoading ? dimensionStyles.value : {}]
+      }, loadingProps), [isLoading ? items.value : slots.default?.()]);
     });
     return {};
   }
@@ -25417,14 +25440,14 @@ const VSlideGroupItem = genericComponent()({
 // Types
 
 function useCountdown(milliseconds) {
-  const time = shallowRef(milliseconds);
+  const time = shallowRef(milliseconds());
   let timer = -1;
   function clear() {
     clearInterval(timer);
   }
   function reset() {
     clear();
-    nextTick(() => time.value = milliseconds);
+    nextTick(() => time.value = milliseconds());
   }
   function start(el) {
     const style = el ? getComputedStyle(el) : {
@@ -25436,7 +25459,7 @@ function useCountdown(milliseconds) {
     const startTime = performance.now();
     timer = window.setInterval(() => {
       const elapsed = performance.now() - startTime + interval;
-      time.value = Math.max(milliseconds - elapsed, 0);
+      time.value = Math.max(milliseconds() - elapsed, 0);
       if (time.value <= 0) clear();
     }, interval);
   }
@@ -25496,7 +25519,7 @@ const VSnackbar = genericComponent()({
     const {
       roundedClasses
     } = useRounded(props);
-    const countdown = useCountdown(Number(props.timeout));
+    const countdown = useCountdown(() => Number(props.timeout));
     const overlay = ref();
     const timerRef = ref();
     const isHovering = shallowRef(false);
@@ -28175,7 +28198,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.7.0-beta.1-dev.2024-07-29";
+const version$1 = "3.7.0-beta.1-dev.2024-08-01";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -28200,7 +28223,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.7.0-beta.1-dev.2024-07-29";
+const version = "3.7.0-beta.1-dev.2024-08-01";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };