@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.esm.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.
 */
@@ -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'];
@@ -6817,7 +6822,10 @@ function useValidation(props) {
 const makeVInputProps = propsFactory({
   id: String,
   appendIcon: IconValue,
-  centerAffix: Boolean,
+  centerAffix: {
+    type: Boolean,
+    default: true
+  },
   prependIcon: IconValue,
   hideDetails: [Boolean, String],
   hideSpinButtons: Boolean,
@@ -8567,7 +8575,6 @@ const useNested = props => {
           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', {
@@ -9741,12 +9748,6 @@ function getIntrinsicSize(el, isRtl) {
   // 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) {
@@ -11138,23 +11139,25 @@ const VMenu = genericComponent()({
     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;
@@ -11337,7 +11340,10 @@ const makeVFieldProps = propsFactory({
     default: '$clear'
   },
   active: Boolean,
-  centerAffix: Boolean,
+  centerAffix: {
+    type: Boolean,
+    default: undefined
+  },
   color: String,
   baseColor: String,
   dirty: Boolean,
@@ -11404,9 +11410,8 @@ const VField = genericComponent()({
     const {
       rtlClasses
     } = useRtl();
-    const isSingleLine = computed(() => props.singleLine || props.centerAffix);
     const isActive = computed(() => props.dirty || props.active);
-    const hasLabel = computed(() => !isSingleLine.value && !!(props.label || slots.label));
+    const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label));
     const uid = getUid();
     const id = computed(() => props.id || `input-${uid}`);
     const messagesId = computed(() => `${id.value}-messages`);
@@ -11495,7 +11500,7 @@ const VField = genericComponent()({
         "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,
@@ -11504,7 +11509,7 @@ const VField = genericComponent()({
           '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],
@@ -11739,6 +11744,7 @@ const VTextField = genericComponent()({
         }, props.class],
         "style": props.style
       }, rootAttrs, inputProps, {
+        "centerAffix": !isPlainOrUnderlined.value,
         "focused": isFocused.value
       }), {
         ...slots,
@@ -11764,7 +11770,6 @@ const VTextField = genericComponent()({
             "dirty": isDirty.value || props.dirty,
             "disabled": isDisabled.value,
             "focused": isFocused.value,
-            "centerAffix": props.centerAffix,
             "error": isValid.value === false
           }), {
             ...slots,
@@ -12064,6 +12069,7 @@ function useVirtual(props, items) {
     deep: true
   });
   return {
+    calculateVisibleItems,
     containerRef,
     markerRef,
     computedItems,
@@ -12127,6 +12133,7 @@ const VVirtualScroll = genericComponent()({
       dimensionStyles
     } = useDimension(props);
     const {
+      calculateVisibleItems,
       containerRef,
       markerRef,
       handleScroll,
@@ -12198,6 +12205,7 @@ const VVirtualScroll = genericComponent()({
       }, [children])]);
     });
     return {
+      calculateVisibleItems,
       scrollToIndex
     };
   }
@@ -12266,9 +12274,9 @@ function useScrolling(listRef, textFieldRef) {
     }
   }
   return {
-    onListScroll,
-    onListKeydown
-  };
+    onScrollPassive: onListScroll,
+    onKeydown: onListKeydown
+  }; // typescript doesn't know about vue's event merging
 }
 
 // Types
@@ -12343,7 +12351,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;
       }
     });
@@ -12382,10 +12390,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;
@@ -12395,6 +12400,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)) {
@@ -12415,11 +12425,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) {
@@ -12464,6 +12469,11 @@ const VSelect = genericComponent()({
         menu.value = false;
       }
     }
+    function onAfterEnter() {
+      if (props.eager) {
+        vVirtualScrollRef.value?.calculateVisibleItems();
+      }
+    }
     function onAfterLeave() {
       if (isFocused.value) {
         vTextFieldRef.value?.focus();
@@ -12542,6 +12552,7 @@ const VSelect = genericComponent()({
           "openOnClick": false,
           "closeOnContentClick": false,
           "transition": props.transition,
+          "onAfterEnter": onAfterEnter,
           "onAfterLeave": onAfterLeave
         }, computedMenuProps.value), {
           default: () => [hasList && createVNode(VList, mergeProps({
@@ -12551,11 +12562,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, {
@@ -12850,7 +12860,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;
       }
     });
@@ -12894,10 +12904,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;
@@ -12916,6 +12923,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;
@@ -12980,6 +12992,11 @@ const VAutocomplete = genericComponent()({
         }
       }
     }
+    function onAfterEnter() {
+      if (props.eager) {
+        vVirtualScrollRef.value?.calculateVisibleItems();
+      }
+    }
     function onAfterLeave() {
       if (isFocused.value) {
         isPristine.value = true;
@@ -13108,6 +13125,7 @@ const VAutocomplete = genericComponent()({
           "openOnClick": false,
           "closeOnContentClick": false,
           "transition": props.transition,
+          "onAfterEnter": onAfterEnter,
           "onAfterLeave": onAfterLeave
         }, props.menuProps), {
           default: () => [hasList && createVNode(VList, mergeProps({
@@ -13118,11 +13136,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, {
@@ -16683,7 +16700,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;
       }
     });
@@ -16766,10 +16783,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) {
@@ -16788,6 +16802,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;
@@ -16852,6 +16871,11 @@ const VCombobox = genericComponent()({
         }
       }
     }
+    function onAfterEnter() {
+      if (props.eager) {
+        vVirtualScrollRef.value?.calculateVisibleItems();
+      }
+    }
     function onAfterLeave() {
       if (isFocused.value) {
         isPristine.value = true;
@@ -16976,6 +17000,7 @@ const VCombobox = genericComponent()({
           "openOnClick": false,
           "closeOnContentClick": false,
           "transition": props.transition,
+          "onAfterEnter": onAfterEnter,
           "onAfterLeave": onAfterLeave
         }, props.menuProps), {
           default: () => [hasList && createVNode(VList, mergeProps({
@@ -16986,11 +17011,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, {
@@ -18105,6 +18129,7 @@ function createGroupBy(props) {
 }
 function provideGroupBy(options) {
   const {
+    disableSort,
     groupBy,
     sortBy
   } = options;
@@ -18113,7 +18138,7 @@ function provideGroupBy(options) {
     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);
@@ -18622,7 +18647,7 @@ function useSort() {
 function useSortedItems(props, items, sortBy, options) {
   const locale = useLocale();
   const sortedItems = 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: {
@@ -18648,8 +18673,8 @@ function sortItems(items, sortByItems, locale, options) {
       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') {
@@ -20374,6 +20399,9 @@ const VDataTable = genericComponent()({
       page,
       itemsPerPage
     } = createPagination(props);
+    const {
+      disableSort
+    } = toRefs(props);
     const {
       columns,
       headers,
@@ -20411,12 +20439,16 @@ const VDataTable = genericComponent()({
       toggleGroup
     } = provideGroupBy({
       groupBy,
-      sortBy
+      sortBy,
+      disableSort
     });
     const {
       sortedItems
     } = useSortedItems(props, filteredItems, sortByWithGroups, {
-      transform: item => item.columns,
+      transform: item => ({
+        ...item.raw,
+        ...item.columns
+      }),
       sortFunctions,
       sortRawFunctions
     });
@@ -20554,6 +20586,9 @@ const VDataTableVirtual = genericComponent()({
       multiSort,
       mustSort
     } = createSort(props);
+    const {
+      disableSort
+    } = toRefs(props);
     const {
       columns,
       headers,
@@ -20590,12 +20625,16 @@ const VDataTableVirtual = genericComponent()({
       toggleGroup
     } = provideGroupBy({
       groupBy,
-      sortBy
+      sortBy,
+      disableSort
     });
     const {
       sortedItems
     } = useSortedItems(props, filteredItems, sortByWithGroups, {
-      transform: item => item.columns,
+      transform: item => ({
+        ...item.raw,
+        ...item.columns
+      }),
       sortFunctions,
       sortRawFunctions
     });
@@ -20779,6 +20818,9 @@ const VDataTableServer = genericComponent()({
       page,
       itemsPerPage
     } = createPagination(props);
+    const {
+      disableSort
+    } = toRefs(props);
     const itemsLength = computed(() => parseInt(props.itemsLength, 10));
     const {
       columns,
@@ -20806,7 +20848,8 @@ const VDataTableServer = genericComponent()({
       extractRows
     } = provideGroupBy({
       groupBy,
-      sortBy
+      sortBy,
+      disableSort
     });
     const {
       pageCount,
@@ -21570,6 +21613,9 @@ const VDatePickerMonth = genericComponent()({
       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;
@@ -24254,7 +24300,7 @@ const VOtpInput = genericComponent()({
     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();
@@ -26799,8 +26845,8 @@ const makeVTextareaProps = propsFactory({
   },
   suffix: String,
   modelModifiers: Object,
-  ...omit(makeVInputProps(), ['centerAffix']),
-  ...omit(makeVFieldProps(), ['centerAffix'])
+  ...makeVInputProps(),
+  ...makeVFieldProps()
 }, 'VTextarea');
 const VTextarea = genericComponent()({
   name: 'VTextarea',
@@ -26939,7 +26985,7 @@ const VTextarea = genericComponent()({
         }, props.class],
         "style": props.style
       }, rootAttrs, inputProps, {
-        "centerAffix": false,
+        "centerAffix": rows.value === 1 && !isPlainOrUnderlined.value,
         "focused": isFocused.value
       }), {
         ...slots,
@@ -26964,7 +27010,7 @@ const VTextarea = genericComponent()({
           }, 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,
@@ -27955,6 +28001,7 @@ const VDateInput = genericComponent()({
       }
       return adapter.isValid(model.value) ? adapter.format(model.value, 'keyboardDate') : '';
     });
+    const isInteractive = computed(() => !props.disabled && !props.readonly);
     function onKeydown(e) {
       if (e.key !== 'Enter') return;
       if (!menu.value || !isFocused.value) {
@@ -27977,13 +28024,15 @@ const VDateInput = genericComponent()({
       const datePickerProps = VDatePicker.filterProps(omit(props, ['active']));
       const textFieldProps = VTextField.filterProps(props);
       return createVNode(VTextField, 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: () => [createVNode(VMenu, {
           "modelValue": menu.value,
@@ -29004,6 +29053,7 @@ var SelectingTimes = /*#__PURE__*/function (SelectingTimes) {
 
 const makeVTimePickerControlsProps = propsFactory({
   ampm: Boolean,
+  ampmInTitle: Boolean,
   ampmReadonly: Boolean,
   color: String,
   disabled: Boolean,
@@ -29088,7 +29138,7 @@ const VTimePickerControls = genericComponent()({
         },
         "disabled": props.disabled,
         "text": props.second == null ? '--' : pad(props.second)
-      }, null), props.ampm && createVNode("div", {
+      }, null), props.ampm && props.ampmInTitle && createVNode("div", {
         "class": ['v-time-picker-controls__ampm', {
           'v-time-picker-controls__ampm--readonly': props.ampmReadonly
         }]
@@ -30258,7 +30308,7 @@ function createVuetify$1() {
     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
@@ -30511,7 +30561,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-12";
+const version = "3.6.13-3.7.0-beta.0.0-dev.2024-07-25";
 
 /* eslint-disable local-rules/sort-imports */