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

package/dist/vuetify-labs.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.
 */
@@ -5720,7 +5720,7 @@
             "indeterminate": true,
             "width": "2"
           }, null)])]
-        }), [[Ripple, !isDisabled.value && !!props.ripple, '', {
+        }), [[Ripple, !isDisabled.value && props.ripple, '', {
           center: !!props.icon
         }]]);
       });
@@ -6018,7 +6018,7 @@
           "defaults": {
             VImg: {
               cover: true,
-              image: props.image
+              src: props.image
             },
             VIcon: {
               icon: props.icon
@@ -8962,7 +8962,7 @@
       function onKeyDown(e) {
         if (e.key === 'Enter' || e.key === ' ') {
           e.preventDefault();
-          onClick(e);
+          e.target.dispatchEvent(new MouseEvent('click', e));
         }
       }
       useRender(() => {
@@ -10279,7 +10279,8 @@
   function useActivator(props, _ref) {
     let {
       isActive,
-      isTop
+      isTop,
+      contentEl
     } = _ref;
     const vm = getCurrentInstance('useActivator');
     const activatorEl = vue.ref();
@@ -10396,7 +10397,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;
       }
     });
@@ -10802,6 +10803,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,
@@ -10839,7 +10843,8 @@
         scrimEvents
       } = useActivator(props, {
         isActive,
-        isTop: localTop
+        isTop: localTop,
+        contentEl
       });
       const {
         teleportTarget
@@ -10860,9 +10865,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
@@ -11113,10 +11115,12 @@
     // TODO
     // disableKeys: Boolean,
     id: String,
+    submenu: Boolean,
     ...omit(makeVOverlayProps({
       closeDelay: 250,
       closeOnContentClick: true,
       locationStrategy: 'connected',
+      location: undefined,
       openDelay: 300,
       scrim: false,
       scrollStrategy: 'reposition',
@@ -11139,6 +11143,9 @@
       const {
         scopeId
       } = useScopeId();
+      const {
+        isRtl
+      } = useRtl();
       const uid = getUid();
       const id = vue.computed(() => props.id || `v-menu-${uid}`);
       const overlay = vue.ref();
@@ -11153,7 +11160,7 @@
         },
         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();
             }
@@ -11201,9 +11208,9 @@
             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) {
@@ -11212,12 +11219,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)));
@@ -11241,6 +11257,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), {
@@ -22962,6 +22979,8 @@
       let {
         slots
       } = _ref;
+      const layoutItemStyles = vue.ref();
+      const layoutIsReady = vue.shallowRef();
       const {
         themeClasses
       } = provideTheme(props);
@@ -22986,17 +23005,20 @@
         autoHeight.value = entries[0].target.clientHeight;
       });
       const height = vue.computed(() => props.height === 'auto' ? autoHeight.value : parseInt(props.height, 10));
-      const {
-        layoutItemStyles,
-        layoutIsReady
-      } = useLayoutItem({
-        id: props.name,
-        order: vue.computed(() => parseInt(props.order, 10)),
-        position: vue.computed(() => 'bottom'),
-        layoutSize: height,
-        elementSize: vue.computed(() => props.height === 'auto' ? undefined : height.value),
-        active: vue.computed(() => props.app),
-        absolute: vue.toRef(props, 'absolute')
+      useToggleScope(() => props.app, () => {
+        const layout = useLayoutItem({
+          id: props.name,
+          order: vue.computed(() => parseInt(props.order, 10)),
+          position: vue.computed(() => 'bottom'),
+          layoutSize: height,
+          elementSize: vue.computed(() => props.height === 'auto' ? undefined : height.value),
+          active: vue.computed(() => props.app),
+          absolute: vue.toRef(props, 'absolute')
+        });
+        vue.watchEffect(() => {
+          layoutItemStyles.value = layout.layoutItemStyles.value;
+          layoutIsReady.value = layout.layoutIsReady;
+        });
       });
       useRender(() => vue.createVNode(props.tag, {
         "ref": resizeRef,
@@ -23005,7 +23027,7 @@
           height: convertToUnit(props.height)
         }, props.style]
       }, slots));
-      return props.app ? layoutIsReady : {};
+      return props.app ? layoutIsReady.value : {};
     }
   });
 
@@ -25146,16 +25168,17 @@
       const items = vue.computed(() => genStructure(wrapInArray(props.type).join(',')));
       useRender(() => {
         const isLoading = !slots.default || props.loading;
-        return vue.createVNode("div", {
+        const loadingProps = props.boilerplate || !isLoading ? {} : {
+          ariaLive: 'polite',
+          ariaLabel: t(props.loadingText),
+          role: 'alert'
+        };
+        return vue.createVNode("div", vue.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 {};
     }
@@ -25188,14 +25211,14 @@
   // Types
 
   function useCountdown(milliseconds) {
-    const time = vue.shallowRef(milliseconds);
+    const time = vue.shallowRef(milliseconds());
     let timer = -1;
     function clear() {
       clearInterval(timer);
     }
     function reset() {
       clear();
-      vue.nextTick(() => time.value = milliseconds);
+      vue.nextTick(() => time.value = milliseconds());
     }
     function start(el) {
       const style = el ? getComputedStyle(el) : {
@@ -25207,7 +25230,7 @@
       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);
     }
@@ -25267,7 +25290,7 @@
       const {
         roundedClasses
       } = useRounded(props);
-      const countdown = useCountdown(Number(props.timeout));
+      const countdown = useCountdown(() => Number(props.timeout));
       const overlay = vue.ref();
       const timerRef = vue.ref();
       const isHovering = vue.shallowRef(false);
@@ -28087,19 +28110,23 @@
     },
     inset: Boolean,
     hideInput: Boolean,
+    modelValue: {
+      type: Number,
+      default: null
+    },
     min: {
       type: Number,
-      default: -Infinity
+      default: Number.MIN_SAFE_INTEGER
     },
     max: {
       type: Number,
-      default: Infinity
+      default: Number.MAX_SAFE_INTEGER
     },
     step: {
       type: Number,
       default: 1
     },
-    ...omit(makeVTextFieldProps(), ['appendInnerIcon', 'prependInnerIcon'])
+    ...omit(makeVTextFieldProps({}), ['appendInnerIcon', 'modelValue', 'prependInnerIcon'])
   }, 'VNumberInput');
   const VNumberInput = genericComponent()({
     name: 'VNumberInput',
@@ -28111,30 +28138,27 @@
     },
     setup(props, _ref) {
       let {
-        attrs,
-        emit,
         slots
       } = _ref;
-      const model = useProxiedModel(props, 'modelValue');
+      const _model = useProxiedModel(props, 'modelValue');
+      const model = vue.computed({
+        get: () => _model.value,
+        set(val) {
+          if (typeof val !== 'string') _model.value = val;
+        }
+      });
+      const vTextFieldRef = vue.ref();
       const stepDecimals = vue.computed(() => getDecimals(props.step));
-      const modelDecimals = vue.computed(() => model.value != null ? getDecimals(model.value) : 0);
+      const modelDecimals = vue.computed(() => typeof model.value === 'number' ? getDecimals(model.value) : 0);
       const form = useForm();
       const controlsDisabled = vue.computed(() => props.disabled || props.readonly || form?.isReadonly.value);
       const canIncrease = vue.computed(() => {
         if (controlsDisabled.value) return false;
-        if (model.value == null) return true;
-        return model.value + props.step <= props.max;
+        return (model.value ?? 0) + props.step <= props.max;
       });
       const canDecrease = vue.computed(() => {
         if (controlsDisabled.value) return false;
-        if (model.value == null) return true;
-        return model.value - props.step >= props.min;
-      });
-      vue.watchEffect(() => {
-        if (controlsDisabled.value) return;
-        if (model.value != null && (model.value < props.min || model.value > props.max)) {
-          model.value = clamp(model.value, props.min, props.max);
-        }
+        return (model.value ?? 0) - props.step >= props.min;
       });
       const controlVariant = vue.computed(() => {
         return props.hideInput ? 'stacked' : props.controlVariant;
@@ -28149,11 +28173,16 @@
       const decrementSlotProps = vue.computed(() => ({
         click: onClickDown
       }));
+      vue.onMounted(() => {
+        if (!props.readonly && !props.disabled) {
+          clampModel();
+        }
+      });
       function toggleUpDown() {
         let increment = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
         if (controlsDisabled.value) return;
         if (model.value == null) {
-          model.value = 0;
+          model.value = clamp(0, props.min, props.max);
           return;
         }
         const decimals = Math.max(modelDecimals.value, stepDecimals.value);
@@ -28171,30 +28200,45 @@
         e.stopPropagation();
         toggleUpDown(false);
       }
-      function onKeydown(e) {
-        if (['Enter', 'ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].includes(e.key) || e.ctrlKey) return;
-        if (['ArrowDown'].includes(e.key)) {
+      function onBeforeinput(e) {
+        if (!e.data) return;
+        const existingTxt = e.target?.value;
+        const selectionStart = e.target?.selectionStart;
+        const selectionEnd = e.target?.selectionEnd;
+        const potentialNewInputVal = existingTxt ? existingTxt.slice(0, selectionStart) + e.data + existingTxt.slice(selectionEnd) : e.data;
+        // Only numbers, "-", "." are allowed
+        // AND "-", "." are allowed only once
+        // AND "-" is only allowed at the start
+        if (!/^-?(\d+(\.\d*)?|(\.\d+)|\d*|\.)$/.test(potentialNewInputVal)) {
           e.preventDefault();
-          toggleUpDown(false);
-          return;
         }
-        if (['ArrowUp'].includes(e.key)) {
-          e.preventDefault();
-          toggleUpDown();
-          return;
-        }
-
-        // Only numbers, +, - & . are allowed
-        if (!/^[0-9\-+.]+$/.test(e.key)) {
+      }
+      async function onKeydown(e) {
+        if (['Enter', 'ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].includes(e.key) || e.ctrlKey) return;
+        if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
           e.preventDefault();
+          clampModel();
+          // _model is controlled, so need to wait until props['modelValue'] is updated
+          await vue.nextTick();
+          if (e.key === 'ArrowDown') {
+            toggleUpDown(false);
+          } else {
+            toggleUpDown();
+          }
         }
       }
-      function onModelUpdate(v) {
-        model.value = v ? +v : undefined;
-      }
       function onControlMousedown(e) {
         e.stopPropagation();
       }
+      function clampModel() {
+        if (!vTextFieldRef.value) return;
+        const inputText = vTextFieldRef.value.value;
+        if (inputText && !isNaN(+inputText)) {
+          model.value = clamp(+inputText, props.min, props.max);
+        } else {
+          model.value = null;
+        }
+      }
       useRender(() => {
         const {
           modelValue: _,
@@ -28279,8 +28323,11 @@
         }, null)]) : props.reverse ? vue.createVNode(vue.Fragment, null, [controlNode(), dividerNode()]) : undefined;
         const hasPrependInner = slots['prepend-inner'] || prependInnerControl;
         return vue.createVNode(VTextField, vue.mergeProps({
+          "ref": vTextFieldRef,
           "modelValue": model.value,
-          "onUpdate:modelValue": onModelUpdate,
+          "onUpdate:modelValue": $event => model.value = $event,
+          "onBeforeinput": onBeforeinput,
+          "onChange": clampModel,
           "onKeydown": onKeydown,
           "class": ['v-number-input', {
             'v-number-input--default': controlVariant.value === 'default',
@@ -28574,6 +28621,7 @@
   const VPullToRefresh = genericComponent()({
     name: 'VPullToRefresh',
     props: {
+      disabled: Boolean,
       pullDownThreshold: {
         type: Number,
         default: 64
@@ -28597,19 +28645,19 @@
       const canRefresh = vue.computed(() => touchDiff.value >= props.pullDownThreshold && !refreshing.value);
       const topOffset = vue.computed(() => clamp(touchDiff.value, 0, props.pullDownThreshold));
       function onTouchstart(e) {
-        if (refreshing.value) return;
+        if (refreshing.value || props.disabled) return;
         touching.value = true;
         touchstartY = 'clientY' in e ? e.clientY : e.touches[0].clientY;
       }
       function onTouchmove(e) {
-        if (refreshing.value || !touching.value) return;
+        if (refreshing.value || !touching.value || props.disabled) return;
         const touchY = 'clientY' in e ? e.clientY : e.touches[0].clientY;
         if (scrollParents.length && !scrollParents[0].scrollTop) {
           touchDiff.value = touchY - touchstartY;
         }
       }
       function onTouchend(e) {
-        if (refreshing.value) return;
+        if (refreshing.value || props.disabled) return;
         touching.value = false;
         if (canRefresh.value) {
           function done() {
@@ -30312,7 +30360,7 @@
       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
@@ -30565,7 +30613,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.7.0-beta.1-dev.2024-07-29";
+  const version = "3.7.0-beta.1-dev.2024-08-01";
 
   /* eslint-disable local-rules/sort-imports */