vuetify 3.7.4 → 3.7.6

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.7.4
+* Vuetify v3.7.6
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1771,7 +1771,8 @@
     calendar: 'mdi-calendar',
     treeviewCollapse: 'mdi-menu-down',
     treeviewExpand: 'mdi-menu-right',
-    eyeDropper: 'mdi-eyedropper'
+    eyeDropper: 'mdi-eyedropper',
+    upload: 'mdi-cloud-upload'
   };
   const mdi = {
     // Not using mergeProps here, functional components merge props by default (?)
@@ -2475,6 +2476,11 @@
       counter: '{0} files',
       counterSize: '{0} files ({1} in total)'
     },
+    fileUpload: {
+      title: 'Drag and drop files here',
+      divider: 'or',
+      browse: 'Browse Files'
+    },
     timePicker: {
       am: 'AM',
       pm: 'PM',
@@ -6905,8 +6911,13 @@
       resetValidation
     };
   }
-  function useForm() {
-    return vue.inject(FormKey, null);
+  function useForm(props) {
+    const form = vue.inject(FormKey, null);
+    return {
+      ...form,
+      isReadonly: vue.computed(() => !!(props?.readonly ?? form?.isReadonly.value)),
+      isDisabled: vue.computed(() => !!(props?.disabled ?? form?.isDisabled.value))
+    };
   }
 
   // Composables
@@ -6947,17 +6958,15 @@
     let id = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : getUid();
     const model = useProxiedModel(props, 'modelValue');
     const validationModel = vue.computed(() => props.validationValue === undefined ? model.value : props.validationValue);
-    const form = useForm();
+    const form = useForm(props);
     const internalErrorMessages = vue.ref([]);
     const isPristine = vue.shallowRef(true);
     const isDirty = vue.computed(() => !!(wrapInArray(model.value === '' ? null : model.value).length || wrapInArray(validationModel.value === '' ? null : validationModel.value).length));
-    const isDisabled = vue.computed(() => !!(props.disabled ?? form?.isDisabled.value));
-    const isReadonly = vue.computed(() => !!(props.readonly ?? form?.isReadonly.value));
     const errorMessages = vue.computed(() => {
       return props.errorMessages?.length ? wrapInArray(props.errorMessages).concat(internalErrorMessages.value).slice(0, Math.max(0, +props.maxErrors)) : internalErrorMessages.value;
     });
     const validateOn = vue.computed(() => {
-      let value = (props.validateOn ?? form?.validateOn.value) || 'input';
+      let value = (props.validateOn ?? form.validateOn?.value) || 'input';
       if (value === 'lazy') value = 'input lazy';
       if (value === 'eager') value = 'input eager';
       const set = new Set(value?.split(' ') ?? []);
@@ -6983,14 +6992,14 @@
       return {
         [`${name}--error`]: isValid.value === false,
         [`${name}--dirty`]: isDirty.value,
-        [`${name}--disabled`]: isDisabled.value,
-        [`${name}--readonly`]: isReadonly.value
+        [`${name}--disabled`]: form.isDisabled.value,
+        [`${name}--readonly`]: form.isReadonly.value
       };
     });
     const vm = getCurrentInstance('validation');
     const uid = vue.computed(() => props.name ?? vue.unref(id));
     vue.onBeforeMount(() => {
-      form?.register({
+      form.register?.({
         id: uid.value,
         vm,
         validate,
@@ -6999,13 +7008,13 @@
       });
     });
     vue.onBeforeUnmount(() => {
-      form?.unregister(uid.value);
+      form.unregister?.(uid.value);
     });
     vue.onMounted(async () => {
       if (!validateOn.value.lazy) {
         await validate(!validateOn.value.eager);
       }
-      form?.update(uid.value, isValid.value, errorMessages.value);
+      form.update?.(uid.value, isValid.value, errorMessages.value);
     });
     useToggleScope(() => validateOn.value.input || validateOn.value.invalidInput && isValid.value === false, () => {
       vue.watch(validationModel, () => {
@@ -7025,7 +7034,7 @@
       });
     });
     vue.watch([isValid, errorMessages], () => {
-      form?.update(uid.value, isValid.value, errorMessages.value);
+      form.update?.(uid.value, isValid.value, errorMessages.value);
     });
     async function reset() {
       model.value = null;
@@ -7066,8 +7075,8 @@
     return {
       errorMessages,
       isDirty,
-      isDisabled,
-      isReadonly,
+      isDisabled: form.isDisabled,
+      isReadonly: form.isReadonly,
       isPristine,
       isValid,
       isValidating,
@@ -8070,7 +8079,7 @@
     draggable: Boolean,
     filter: Boolean,
     filterIcon: {
-      type: String,
+      type: IconValue,
       default: '$complete'
     },
     label: Boolean,
@@ -8193,7 +8202,8 @@
             'v-chip--label': props.label,
             'v-chip--link': isClickable.value,
             'v-chip--filter': hasFilter,
-            'v-chip--pill': props.pill
+            'v-chip--pill': props.pill,
+            [`${props.activeClass}`]: props.activeClass && link.isActive?.value
           }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, group?.selectedClass.value, props.class],
           "style": [hasColor ? colorStyles.value : undefined, props.style],
           "disabled": props.disabled || undefined,
@@ -8941,7 +8951,9 @@
       isLeaf: vue.computed(() => !parent.root.children.value.get(computedId.value)),
       isGroupActivator: parent.isGroupActivator
     };
-    !parent.isGroupActivator && parent.root.register(computedId.value, parent.id.value, isGroup);
+    vue.onBeforeMount(() => {
+      !parent.isGroupActivator && parent.root.register(computedId.value, parent.id.value, isGroup);
+    });
     vue.onBeforeUnmount(() => {
       !parent.isGroupActivator && parent.root.unregister(computedId.value);
     });
@@ -9167,23 +9179,30 @@
       const list = useList();
       const isActive = vue.computed(() => props.active !== false && (props.active || link.isActive?.value || (root.activatable.value ? isActivated.value : isSelected.value)));
       const isLink = vue.computed(() => props.link !== false && link.isLink.value);
-      const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || !!list && (root.selectable.value || root.activatable.value || props.value != null)));
+      const isSelectable = vue.computed(() => !!list && (root.selectable.value || root.activatable.value || props.value != null));
+      const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || isSelectable.value));
       const roundedProps = vue.computed(() => props.rounded || props.nav);
       const color = vue.computed(() => props.color ?? props.activeColor);
       const variantProps = vue.computed(() => ({
         color: isActive.value ? color.value ?? props.baseColor : props.baseColor,
         variant: props.variant
       }));
+
+      // useNestedItem doesn't call register until beforeMount,
+      // so this can't be an immediate watcher as we don't know parent yet
       vue.watch(() => link.isActive?.value, val => {
-        if (val && parent.value != null) {
+        if (!val) return;
+        handleActiveLink();
+      });
+      vue.onBeforeMount(() => {
+        if (link.isActive?.value) handleActiveLink();
+      });
+      function handleActiveLink() {
+        if (parent.value != null) {
           root.open(parent.value, true);
         }
-        if (val) {
-          openOnSelect(val);
-        }
-      }, {
-        immediate: true
-      });
+        openOnSelect(true);
+      }
       const {
         themeClasses
       } = provideTheme(props);
@@ -9258,7 +9277,7 @@
           }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value, props.class],
           "style": [colorStyles.value, dimensionStyles.value, props.style],
           "tabindex": isClickable.value ? list ? -2 : 0 : undefined,
-          "aria-selected": root.activatable.value ? isActivated.value : isSelected.value,
+          "aria-selected": isSelectable.value ? root.activatable.value ? isActivated.value : root.selectable.value ? isSelected.value : isActive.value : undefined,
           "onClick": onClick,
           "onKeydown": isClickable.value && !isLink.value && onKeyDown
         }, link.linkProps), {
@@ -9675,8 +9694,8 @@
     activeClass: String,
     bgColor: String,
     disabled: Boolean,
-    expandIcon: String,
-    collapseIcon: String,
+    expandIcon: IconValue,
+    collapseIcon: IconValue,
     lines: {
       type: [Boolean, String],
       default: 'one'
@@ -11850,7 +11869,8 @@
           "style": textColorStyles.value
         }, {
           default: () => [label()]
-        }), vue.createVNode(VFieldLabel, {
+        }), hasLabel.value && vue.createVNode(VFieldLabel, {
+          "key": "label",
           "ref": labelRef,
           "for": id.value
         }, {
@@ -12295,6 +12315,7 @@
         }
       }
     });
+    let scrollTimeout = -1;
     function handleScroll() {
       if (!containerRef.value || !markerRef.value) return;
       const scrollTop = containerRef.value.scrollTop;
@@ -12311,12 +12332,15 @@
       }
       lastScrollTop = scrollTop;
       lastScrollTime = scrollTime;
+      window.clearTimeout(scrollTimeout);
+      scrollTimeout = window.setTimeout(handleScrollend, 500);
       calculateVisibleItems();
     }
     function handleScrollend() {
       if (!containerRef.value || !markerRef.value) return;
       scrollVelocity = 0;
       lastScrollTime = 0;
+      window.clearTimeout(scrollTimeout);
       calculateVisibleItems();
     }
     let raf = -1;
@@ -12362,7 +12386,8 @@
     const computedItems = vue.computed(() => {
       return items.value.slice(first.value, last.value).map((item, index) => ({
         raw: item,
-        index: index + first.value
+        index: index + first.value,
+        key: isObject(item) && 'value' in item ? item.value : index + first.value
       }));
     });
     vue.watch(items, () => {
@@ -12477,7 +12502,7 @@
       });
       useRender(() => {
         const children = computedItems.value.map(item => vue.createVNode(VVirtualScrollItem, {
-          "key": item.index,
+          "key": item.key,
           "renderless": props.renderless,
           "onUpdate:height": height => handleItemResize(item.index, height)
         }, {
@@ -12676,7 +12701,7 @@
       const counterValue = vue.computed(() => {
         return typeof props.counterValue === 'function' ? props.counterValue(model.value) : typeof props.counterValue === 'number' ? props.counterValue : model.value.length;
       });
-      const form = useForm();
+      const form = useForm(props);
       const selectedValues = vue.computed(() => model.value.map(selection => selection.value));
       const isFocused = vue.shallowRef(false);
       const label = vue.computed(() => menu.value ? props.closeText : props.openText);
@@ -12688,7 +12713,7 @@
         }
         return items.value;
       });
-      const menuDisabled = vue.computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
+      const menuDisabled = vue.computed(() => props.hideNoData && !displayItems.value.length || form.isReadonly.value || form.isDisabled.value);
       const computedMenuProps = vue.computed(() => {
         return {
           ...props.menuProps,
@@ -12715,7 +12740,7 @@
         }
       }
       function onKeydown(e) {
-        if (!e.key || props.readonly || form?.isReadonly.value) return;
+        if (!e.key || form.isReadonly.value) return;
         if (['Enter', ' ', 'ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {
           e.preventDefault();
         }
@@ -12876,6 +12901,7 @@
               "color": props.itemColor ?? props.color
             }, listEvents, props.listProps), {
               default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
+                "key": "no-data",
                 "title": t(props.noDataText)
               }, null)), vue.createVNode(VVirtualScroll, {
                 "ref": vVirtualScrollRef,
@@ -12890,7 +12916,7 @@
                   } = _ref2;
                   const itemProps = vue.mergeProps(item.props, {
                     ref: itemRef,
-                    key: index,
+                    key: item.value,
                     onClick: () => select(item, null)
                   });
                   return slots.item?.({
@@ -13193,7 +13219,7 @@
       const counterValue = vue.computed(() => {
         return typeof props.counterValue === 'function' ? props.counterValue(model.value) : typeof props.counterValue === 'number' ? props.counterValue : model.value.length;
       });
-      const form = useForm();
+      const form = useForm(props);
       const {
         filteredItems,
         getMatches
@@ -13211,7 +13237,7 @@
         const selectFirst = props.autoSelectFirst === true || props.autoSelectFirst === 'exact' && search.value === displayItems.value[0]?.title;
         return selectFirst && displayItems.value.length > 0 && !isPristine.value && !listHasFocus.value;
       });
-      const menuDisabled = vue.computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
+      const menuDisabled = vue.computed(() => props.hideNoData && !displayItems.value.length || form.isReadonly.value || form.isDisabled.value);
       const listRef = vue.ref();
       const listEvents = useScrolling(listRef, vTextFieldRef);
       function onClear(e) {
@@ -13238,7 +13264,7 @@
         }
       }
       function onKeydown(e) {
-        if (props.readonly || form?.isReadonly.value) return;
+        if (form.isReadonly.value) return;
         const selectionStart = vTextFieldRef.value.selectionStart;
         const length = model.value.length;
         if (selectionIndex.value > -1 || ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
@@ -13415,7 +13441,7 @@
             'v-autocomplete--selecting-index': selectionIndex.value > -1
           }, props.class],
           "style": props.style,
-          "readonly": props.readonly,
+          "readonly": form.isReadonly.value,
           "placeholder": isDirty ? undefined : props.placeholder,
           "onClick:clear": onClear,
           "onMousedown:control": onMousedownControl,
@@ -13450,6 +13476,7 @@
               "color": props.itemColor ?? props.color
             }, listEvents, props.listProps), {
               default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
+                "key": "no-data",
                 "title": t(props.noDataText)
               }, null)), vue.createVNode(VVirtualScroll, {
                 "ref": vVirtualScrollRef,
@@ -13464,7 +13491,7 @@
                   } = _ref4;
                   const itemProps = vue.mergeProps(item.props, {
                     ref: itemRef,
-                    key: index,
+                    key: item.value,
                     active: highlightFirst.value && index === 0 ? true : undefined,
                     onClick: () => select(item, null)
                   });
@@ -17034,7 +17061,7 @@
         const transformed = transformOut(v);
         return props.multiple ? transformed : transformed[0] ?? null;
       });
-      const form = useForm();
+      const form = useForm(props);
       const hasChips = vue.computed(() => !!(props.chips || slots.chip));
       const hasSelectionSlot = vue.computed(() => hasChips.value || !!slots.selection);
       const _search = vue.shallowRef(!props.multiple && !hasSelectionSlot.value ? model.value[0]?.title ?? '' : '');
@@ -17094,7 +17121,7 @@
         const selectFirst = props.autoSelectFirst === true || props.autoSelectFirst === 'exact' && search.value === displayItems.value[0]?.title;
         return selectFirst && displayItems.value.length > 0 && !isPristine.value && !listHasFocus.value;
       });
-      const menuDisabled = vue.computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
+      const menuDisabled = vue.computed(() => props.hideNoData && !displayItems.value.length || form.isReadonly.value || form.isDisabled.value);
       const listRef = vue.ref();
       const listEvents = useScrolling(listRef, vTextFieldRef);
       function onClear(e) {
@@ -17122,7 +17149,7 @@
       }
       // eslint-disable-next-line complexity
       function onKeydown(e) {
-        if (isComposingIgnoreKey(e) || props.readonly || form?.isReadonly.value) return;
+        if (isComposingIgnoreKey(e) || form.isReadonly.value) return;
         const selectionStart = vTextFieldRef.value.selectionStart;
         const length = model.value.length;
         if (selectionIndex.value > -1 || ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
@@ -17294,7 +17321,7 @@
             [`v-combobox--${props.multiple ? 'multiple' : 'single'}`]: true
           }, props.class],
           "style": props.style,
-          "readonly": props.readonly,
+          "readonly": form.isReadonly.value,
           "placeholder": isDirty ? undefined : props.placeholder,
           "onClick:clear": onClear,
           "onMousedown:control": onMousedownControl,
@@ -17329,6 +17356,7 @@
               "color": props.itemColor ?? props.color
             }, listEvents, props.listProps), {
               default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
+                "key": "no-data",
                 "title": t(props.noDataText)
               }, null)), vue.createVNode(VVirtualScroll, {
                 "ref": vVirtualScrollRef,
@@ -17343,7 +17371,7 @@
                   } = _ref4;
                   const itemProps = vue.mergeProps(item.props, {
                     ref: itemRef,
-                    key: index,
+                    key: item.value,
                     active: highlightFirst.value && index === 0 ? true : undefined,
                     onClick: () => select(item, null)
                   });
@@ -18338,21 +18366,23 @@
         internalModel.value = structuredClone(vue.toRaw(model.value));
         emit('cancel');
       }
-      let actionsUsed = false;
-      useRender(() => {
-        const actions = vue.createVNode(vue.Fragment, null, [vue.createVNode(VBtn, {
+      function actions(actionsProps) {
+        return vue.createVNode(vue.Fragment, null, [vue.createVNode(VBtn, vue.mergeProps({
           "disabled": isPristine.value,
           "variant": "text",
           "color": props.color,
           "onClick": cancel,
           "text": t(props.cancelText)
-        }, null), vue.createVNode(VBtn, {
+        }, actionsProps), null), vue.createVNode(VBtn, vue.mergeProps({
           "disabled": isPristine.value,
           "variant": "text",
           "color": props.color,
           "onClick": save,
           "text": t(props.okText)
-        }, null)]);
+        }, actionsProps), null)]);
+      }
+      let actionsUsed = false;
+      useRender(() => {
         return vue.createVNode(vue.Fragment, null, [slots.default?.({
           model: internalModel,
           save,
@@ -18362,7 +18392,7 @@
             actionsUsed = true;
             return actions;
           }
-        }), !actionsUsed && actions]);
+        }), !actionsUsed && actions()]);
       });
       return {
         save,
@@ -21652,7 +21682,7 @@
   // Types
 
   const makeVDatePickerHeaderProps = propsFactory({
-    appendIcon: String,
+    appendIcon: IconValue,
     color: String,
     header: String,
     transition: String,
@@ -25085,7 +25115,7 @@
                 // the thumbs are on top of each other
                 // and they are both at minimum value
                 // but only if focused from outside.
-                if (model.value[0] === model.value[1] && model.value[1] === min.value && e.relatedTarget !== stopThumbRef.value?.$el) {
+                if (max.value !== min.value && model.value[0] === model.value[1] && model.value[1] === min.value && e.relatedTarget !== stopThumbRef.value?.$el) {
                   startThumbRef.value?.$el.blur();
                   stopThumbRef.value?.$el.focus();
                 }
@@ -25114,7 +25144,7 @@
                 // the thumbs are on top of each other
                 // and they are both at maximum value
                 // but only if focused from outside.
-                if (model.value[0] === model.value[1] && model.value[0] === max.value && e.relatedTarget !== startThumbRef.value?.$el) {
+                if (max.value !== min.value && model.value[0] === model.value[1] && model.value[0] === max.value && e.relatedTarget !== startThumbRef.value?.$el) {
                   stopThumbRef.value?.$el.blur();
                   startThumbRef.value?.$el.focus();
                 }
@@ -26304,20 +26334,20 @@
     subtitle: String,
     complete: Boolean,
     completeIcon: {
-      type: String,
+      type: IconValue,
       default: '$complete'
     },
     editable: Boolean,
     editIcon: {
-      type: String,
+      type: IconValue,
       default: '$edit'
     },
     error: Boolean,
     errorIcon: {
-      type: String,
+      type: IconValue,
       default: '$error'
     },
-    icon: String,
+    icon: IconValue,
     ripple: {
       type: [Boolean, Object],
       default: true
@@ -26478,10 +26508,10 @@
   const makeStepperProps = propsFactory({
     altLabels: Boolean,
     bgColor: String,
-    completeIcon: String,
-    editIcon: String,
+    completeIcon: IconValue,
+    editIcon: IconValue,
     editable: Boolean,
-    errorIcon: String,
+    errorIcon: IconValue,
     hideActions: Boolean,
     items: {
       type: Array,
@@ -28258,7 +28288,7 @@
       goTo
     };
   }
-  const version$1 = "3.7.4";
+  const version$1 = "3.7.6";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -28283,7 +28313,7 @@
       ...options
     });
   };
-  const version = "3.7.4";
+  const version = "3.7.6";
   createVuetify.version = version;
 
   exports.blueprints = index;