@vuetify/nightly 3.6.13-3.7.0-beta.0.0-dev.2024-07-12 → 3.6.13-3.7.0-beta.0.0-dev.2024-07-25

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.6.13-3.7.0-beta.0.0-dev.2024-07-12
+* Vuetify v3.6.13-3.7.0-beta.0.0-dev.2024-07-25
 * 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'];
@@ -6821,7 +6826,10 @@
   const makeVInputProps = propsFactory({
     id: String,
     appendIcon: IconValue,
-    centerAffix: Boolean,
+    centerAffix: {
+      type: Boolean,
+      default: true
+    },
     prependIcon: IconValue,
     hideDetails: [Boolean, String],
     hideSpinButtons: Boolean,
@@ -8571,7 +8579,6 @@
             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', {
@@ -9745,12 +9752,6 @@
     // 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) {
@@ -11142,23 +11143,25 @@
       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;
@@ -11341,7 +11344,10 @@
       default: '$clear'
     },
     active: Boolean,
-    centerAffix: Boolean,
+    centerAffix: {
+      type: Boolean,
+      default: undefined
+    },
     color: String,
     baseColor: String,
     dirty: Boolean,
@@ -11408,9 +11414,8 @@
       const {
         rtlClasses
       } = useRtl();
-      const isSingleLine = vue.computed(() => props.singleLine || props.centerAffix);
       const isActive = vue.computed(() => props.dirty || props.active);
-      const hasLabel = vue.computed(() => !isSingleLine.value && !!(props.label || slots.label));
+      const hasLabel = vue.computed(() => !props.singleLine && !!(props.label || slots.label));
       const uid = getUid();
       const id = vue.computed(() => props.id || `input-${uid}`);
       const messagesId = vue.computed(() => `${id.value}-messages`);
@@ -11499,7 +11504,7 @@
           "class": ['v-field', {
             'v-field--active': isActive.value,
             'v-field--appended': hasAppend,
-            'v-field--center-affix': props.centerAffix,
+            'v-field--center-affix': props.centerAffix ?? !isPlainOrUnderlined.value,
             'v-field--disabled': props.disabled,
             'v-field--dirty': props.dirty,
             'v-field--error': props.error,
@@ -11508,7 +11513,7 @@
             'v-field--persistent-clear': props.persistentClear,
             'v-field--prepended': hasPrepend,
             'v-field--reverse': props.reverse,
-            'v-field--single-line': isSingleLine.value,
+            'v-field--single-line': props.singleLine,
             'v-field--no-label': !label(),
             [`v-field--variant-${props.variant}`]: true
           }, themeClasses.value, backgroundColorClasses.value, focusClasses.value, loaderClasses.value, roundedClasses.value, rtlClasses.value, props.class],
@@ -11743,6 +11748,7 @@
           }, props.class],
           "style": props.style
         }, rootAttrs, inputProps, {
+          "centerAffix": !isPlainOrUnderlined.value,
           "focused": isFocused.value
         }), {
           ...slots,
@@ -11768,7 +11774,6 @@
               "dirty": isDirty.value || props.dirty,
               "disabled": isDisabled.value,
               "focused": isFocused.value,
-              "centerAffix": props.centerAffix,
               "error": isValid.value === false
             }), {
               ...slots,
@@ -12068,6 +12073,7 @@
       deep: true
     });
     return {
+      calculateVisibleItems,
       containerRef,
       markerRef,
       computedItems,
@@ -12131,6 +12137,7 @@
         dimensionStyles
       } = useDimension(props);
       const {
+        calculateVisibleItems,
         containerRef,
         markerRef,
         handleScroll,
@@ -12202,6 +12209,7 @@
         }, [children])]);
       });
       return {
+        calculateVisibleItems,
         scrollToIndex
       };
     }
@@ -12270,9 +12278,9 @@
       }
     }
     return {
-      onListScroll,
-      onListKeydown
-    };
+      onScrollPassive: onListScroll,
+      onKeydown: onListKeydown
+    }; // typescript doesn't know about vue's event merging
   }
 
   // Types
@@ -12347,7 +12355,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;
         }
       });
@@ -12386,10 +12394,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;
@@ -12399,6 +12404,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)) {
@@ -12419,11 +12429,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) {
@@ -12468,6 +12473,11 @@
           menu.value = false;
         }
       }
+      function onAfterEnter() {
+        if (props.eager) {
+          vVirtualScrollRef.value?.calculateVisibleItems();
+        }
+      }
       function onAfterLeave() {
         if (isFocused.value) {
           vTextFieldRef.value?.focus();
@@ -12546,6 +12556,7 @@
             "openOnClick": false,
             "closeOnContentClick": false,
             "transition": props.transition,
+            "onAfterEnter": onAfterEnter,
             "onAfterLeave": onAfterLeave
           }, computedMenuProps.value), {
             default: () => [hasList && vue.createVNode(VList, vue.mergeProps({
@@ -12555,11 +12566,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, {
@@ -12854,7 +12864,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;
         }
       });
@@ -12898,10 +12908,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;
@@ -12920,6 +12927,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;
@@ -12984,6 +12996,11 @@
           }
         }
       }
+      function onAfterEnter() {
+        if (props.eager) {
+          vVirtualScrollRef.value?.calculateVisibleItems();
+        }
+      }
       function onAfterLeave() {
         if (isFocused.value) {
           isPristine.value = true;
@@ -13112,6 +13129,7 @@
             "openOnClick": false,
             "closeOnContentClick": false,
             "transition": props.transition,
+            "onAfterEnter": onAfterEnter,
             "onAfterLeave": onAfterLeave
           }, props.menuProps), {
             default: () => [hasList && vue.createVNode(VList, vue.mergeProps({
@@ -13122,11 +13140,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, {
@@ -16687,7 +16704,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;
         }
       });
@@ -16770,10 +16787,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) {
@@ -16792,6 +16806,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;
@@ -16856,6 +16875,11 @@
           }
         }
       }
+      function onAfterEnter() {
+        if (props.eager) {
+          vVirtualScrollRef.value?.calculateVisibleItems();
+        }
+      }
       function onAfterLeave() {
         if (isFocused.value) {
           isPristine.value = true;
@@ -16980,6 +17004,7 @@
             "openOnClick": false,
             "closeOnContentClick": false,
             "transition": props.transition,
+            "onAfterEnter": onAfterEnter,
             "onAfterLeave": onAfterLeave
           }, props.menuProps), {
             default: () => [hasList && vue.createVNode(VList, vue.mergeProps({
@@ -16990,11 +17015,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, {
@@ -18109,6 +18133,7 @@
   }
   function provideGroupBy(options) {
     const {
+      disableSort,
       groupBy,
       sortBy
     } = options;
@@ -18117,7 +18142,7 @@
       return groupBy.value.map(val => ({
         ...val,
         order: val.order ?? false
-      })).concat(sortBy.value);
+      })).concat(disableSort?.value ? [] : sortBy.value);
     });
     function isGroupOpen(group) {
       return opened.value.has(group.id);
@@ -18626,7 +18651,7 @@
   function useSortedItems(props, items, sortBy, options) {
     const locale = useLocale();
     const sortedItems = vue.computed(() => {
-      if (!sortBy.value.length || props.disableSort) return items.value;
+      if (!sortBy.value.length) return items.value;
       return sortItems(items.value, sortBy.value, locale.current.value, {
         transform: options?.transform,
         sortFunctions: {
@@ -18652,8 +18677,8 @@
         const sortKey = sortByItems[i].key;
         const sortOrder = sortByItems[i].order ?? 'asc';
         if (sortOrder === false) continue;
-        let sortA = a[1][sortKey];
-        let sortB = b[1][sortKey];
+        let sortA = getObjectValueByPath(a[1], sortKey);
+        let sortB = getObjectValueByPath(b[1], sortKey);
         let sortARaw = a[0].raw;
         let sortBRaw = b[0].raw;
         if (sortOrder === 'desc') {
@@ -20378,6 +20403,9 @@
         page,
         itemsPerPage
       } = createPagination(props);
+      const {
+        disableSort
+      } = vue.toRefs(props);
       const {
         columns,
         headers,
@@ -20415,12 +20443,16 @@
         toggleGroup
       } = provideGroupBy({
         groupBy,
-        sortBy
+        sortBy,
+        disableSort
       });
       const {
         sortedItems
       } = useSortedItems(props, filteredItems, sortByWithGroups, {
-        transform: item => item.columns,
+        transform: item => ({
+          ...item.raw,
+          ...item.columns
+        }),
         sortFunctions,
         sortRawFunctions
       });
@@ -20558,6 +20590,9 @@
         multiSort,
         mustSort
       } = createSort(props);
+      const {
+        disableSort
+      } = vue.toRefs(props);
       const {
         columns,
         headers,
@@ -20594,12 +20629,16 @@
         toggleGroup
       } = provideGroupBy({
         groupBy,
-        sortBy
+        sortBy,
+        disableSort
       });
       const {
         sortedItems
       } = useSortedItems(props, filteredItems, sortByWithGroups, {
-        transform: item => item.columns,
+        transform: item => ({
+          ...item.raw,
+          ...item.columns
+        }),
         sortFunctions,
         sortRawFunctions
       });
@@ -20783,6 +20822,9 @@
         page,
         itemsPerPage
       } = createPagination(props);
+      const {
+        disableSort
+      } = vue.toRefs(props);
       const itemsLength = vue.computed(() => parseInt(props.itemsLength, 10));
       const {
         columns,
@@ -20810,7 +20852,8 @@
         extractRows
       } = provideGroupBy({
         groupBy,
-        sortBy
+        sortBy,
+        disableSort
       });
       const {
         pageCount,
@@ -21574,6 +21617,9 @@
         const _value = adapter.startOfDay(value);
         if (model.value.length === 0) {
           rangeStart.value = undefined;
+        } else if (model.value.length === 1) {
+          rangeStart.value = model.value[0];
+          rangeStop.value = undefined;
         }
         if (!rangeStart.value) {
           rangeStart.value = _value;
@@ -24258,7 +24304,7 @@
       function onPaste(index, e) {
         e.preventDefault();
         e.stopPropagation();
-        const clipboardText = e?.clipboardData?.getData('Text') ?? '';
+        const clipboardText = e?.clipboardData?.getData('Text').slice(0, length.value) ?? '';
         if (isValidNumber(clipboardText)) return;
         model.value = clipboardText.split('');
         inputRef.value?.[index].blur();
@@ -26803,8 +26849,8 @@
     },
     suffix: String,
     modelModifiers: Object,
-    ...omit(makeVInputProps(), ['centerAffix']),
-    ...omit(makeVFieldProps(), ['centerAffix'])
+    ...makeVInputProps(),
+    ...makeVFieldProps()
   }, 'VTextarea');
   const VTextarea = genericComponent()({
     name: 'VTextarea',
@@ -26943,7 +26989,7 @@
           }, props.class],
           "style": props.style
         }, rootAttrs, inputProps, {
-          "centerAffix": false,
+          "centerAffix": rows.value === 1 && !isPlainOrUnderlined.value,
           "focused": isFocused.value
         }), {
           ...slots,
@@ -26968,7 +27014,7 @@
             }, fieldProps, {
               "id": id.value,
               "active": isActive.value || isDirty.value,
-              "centerAffix": false,
+              "centerAffix": rows.value === 1 && !isPlainOrUnderlined.value,
               "dirty": isDirty.value || props.dirty,
               "disabled": isDisabled.value,
               "focused": isFocused.value,
@@ -27959,6 +28005,7 @@
         }
         return adapter.isValid(model.value) ? adapter.format(model.value, 'keyboardDate') : '';
       });
+      const isInteractive = vue.computed(() => !props.disabled && !props.readonly);
       function onKeydown(e) {
         if (e.key !== 'Enter') return;
         if (!menu.value || !isFocused.value) {
@@ -27981,13 +28028,15 @@
         const datePickerProps = VDatePicker.filterProps(omit(props, ['active']));
         const textFieldProps = VTextField.filterProps(props);
         return vue.createVNode(VTextField, vue.mergeProps(textFieldProps, {
+          "class": props.class,
+          "style": props.style,
           "modelValue": display.value,
-          "onKeydown": onKeydown,
+          "onKeydown": isInteractive.value ? onKeydown : undefined,
           "focused": menu.value || isFocused.value,
           "onFocus": focus,
           "onBlur": blur,
-          "onClick:control": onClick,
-          "onClick:prepend": onClick
+          "onClick:control": isInteractive.value ? onClick : undefined,
+          "onClick:prepend": isInteractive.value ? onClick : undefined
         }), {
           default: () => [vue.createVNode(VMenu, {
             "modelValue": menu.value,
@@ -29008,6 +29057,7 @@
 
   const makeVTimePickerControlsProps = propsFactory({
     ampm: Boolean,
+    ampmInTitle: Boolean,
     ampmReadonly: Boolean,
     color: String,
     disabled: Boolean,
@@ -29092,7 +29142,7 @@
           },
           "disabled": props.disabled,
           "text": props.second == null ? '--' : pad(props.second)
-        }, null), props.ampm && vue.createVNode("div", {
+        }, null), props.ampm && props.ampmInTitle && vue.createVNode("div", {
           "class": ['v-time-picker-controls__ampm', {
             'v-time-picker-controls__ampm--readonly': props.ampmReadonly
           }]
@@ -30262,7 +30312,7 @@
       goTo
     };
   }
-  const version$1 = "3.6.13-3.7.0-beta.0.0-dev.2024-07-12";
+  const version$1 = "3.6.13-3.7.0-beta.0.0-dev.2024-07-25";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -30515,7 +30565,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.6.13-3.7.0-beta.0.0-dev.2024-07-12";
+  const version = "3.6.13-3.7.0-beta.0.0-dev.2024-07-25";
 
   /* eslint-disable local-rules/sort-imports */