@vuetify/nightly 3.7.4-master.2024-11-24 → 3.7.4-master.2024-11-29

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.7.4-master.2024-11-24
+* Vuetify v3.7.4-master.2024-11-29
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -6668,8 +6668,13 @@ function createForm(props) {
     resetValidation
   };
 }
-function useForm() {
-  return inject$1(FormKey, null);
+function useForm(props) {
+  const form = inject$1(FormKey, null);
+  return {
+    ...form,
+    isReadonly: computed(() => !!(props?.readonly ?? form?.isReadonly.value)),
+    isDisabled: computed(() => !!(props?.disabled ?? form?.isDisabled.value))
+  };
 }
 
 // Composables
@@ -6710,17 +6715,15 @@ function useValidation(props) {
   let id = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : getUid();
   const model = useProxiedModel(props, 'modelValue');
   const validationModel = computed(() => props.validationValue === undefined ? model.value : props.validationValue);
-  const form = useForm();
+  const form = useForm(props);
   const internalErrorMessages = ref([]);
   const isPristine = shallowRef(true);
   const isDirty = computed(() => !!(wrapInArray(model.value === '' ? null : model.value).length || wrapInArray(validationModel.value === '' ? null : validationModel.value).length));
-  const isDisabled = computed(() => !!(props.disabled ?? form?.isDisabled.value));
-  const isReadonly = computed(() => !!(props.readonly ?? form?.isReadonly.value));
   const errorMessages = computed(() => {
     return props.errorMessages?.length ? wrapInArray(props.errorMessages).concat(internalErrorMessages.value).slice(0, Math.max(0, +props.maxErrors)) : internalErrorMessages.value;
   });
   const validateOn = 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(' ') ?? []);
@@ -6746,14 +6749,14 @@ function useValidation(props) {
     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 = computed(() => props.name ?? unref(id));
   onBeforeMount(() => {
-    form?.register({
+    form.register?.({
       id: uid.value,
       vm,
       validate,
@@ -6762,13 +6765,13 @@ function useValidation(props) {
     });
   });
   onBeforeUnmount(() => {
-    form?.unregister(uid.value);
+    form.unregister?.(uid.value);
   });
   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, () => {
     watch(validationModel, () => {
@@ -6788,7 +6791,7 @@ function useValidation(props) {
     });
   });
   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;
@@ -6829,8 +6832,8 @@ function useValidation(props) {
   return {
     errorMessages,
     isDirty,
-    isDisabled,
-    isReadonly,
+    isDisabled: form.isDisabled,
+    isReadonly: form.isReadonly,
     isPristine,
     isValid,
     isValidating,
@@ -7833,7 +7836,7 @@ const makeVChipProps = propsFactory({
   draggable: Boolean,
   filter: Boolean,
   filterIcon: {
-    type: String,
+    type: IconValue,
     default: '$complete'
   },
   label: Boolean,
@@ -9439,8 +9442,8 @@ const makeVListProps = propsFactory({
   activeClass: String,
   bgColor: String,
   disabled: Boolean,
-  expandIcon: String,
-  collapseIcon: String,
+  expandIcon: IconValue,
+  collapseIcon: IconValue,
   lines: {
     type: [Boolean, String],
     default: 'one'
@@ -12440,7 +12443,7 @@ const VSelect = genericComponent()({
     const counterValue = 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 = computed(() => model.value.map(selection => selection.value));
     const isFocused = shallowRef(false);
     const label = computed(() => menu.value ? props.closeText : props.openText);
@@ -12452,7 +12455,7 @@ const VSelect = genericComponent()({
       }
       return items.value;
     });
-    const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
+    const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || form.isReadonly.value || form.isDisabled.value);
     const computedMenuProps = computed(() => {
       return {
         ...props.menuProps,
@@ -12479,7 +12482,7 @@ const VSelect = genericComponent()({
       }
     }
     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();
       }
@@ -12957,7 +12960,7 @@ const VAutocomplete = genericComponent()({
     const counterValue = 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
@@ -12975,7 +12978,7 @@ const VAutocomplete = genericComponent()({
       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 = computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
+    const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || form.isReadonly.value || form.isDisabled.value);
     const listRef = ref();
     const listEvents = useScrolling(listRef, vTextFieldRef);
     function onClear(e) {
@@ -13002,7 +13005,7 @@ const VAutocomplete = genericComponent()({
       }
     }
     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)) {
@@ -13179,7 +13182,7 @@ const VAutocomplete = genericComponent()({
           '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,
@@ -16798,7 +16801,7 @@ const VCombobox = genericComponent()({
       const transformed = transformOut(v);
       return props.multiple ? transformed : transformed[0] ?? null;
     });
-    const form = useForm();
+    const form = useForm(props);
     const hasChips = computed(() => !!(props.chips || slots.chip));
     const hasSelectionSlot = computed(() => hasChips.value || !!slots.selection);
     const _search = shallowRef(!props.multiple && !hasSelectionSlot.value ? model.value[0]?.title ?? '' : '');
@@ -16858,7 +16861,7 @@ const VCombobox = genericComponent()({
       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 = computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
+    const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || form.isReadonly.value || form.isDisabled.value);
     const listRef = ref();
     const listEvents = useScrolling(listRef, vTextFieldRef);
     function onClear(e) {
@@ -16886,7 +16889,7 @@ const VCombobox = genericComponent()({
     }
     // 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)) {
@@ -17058,7 +17061,7 @@ const VCombobox = genericComponent()({
           [`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,
@@ -21418,7 +21421,7 @@ const VDatePickerControls = genericComponent()({
 // Types
 
 const makeVDatePickerHeaderProps = propsFactory({
-  appendIcon: String,
+  appendIcon: IconValue,
   color: String,
   header: String,
   transition: String,
@@ -26070,20 +26073,20 @@ const makeStepperItemProps = propsFactory({
   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
@@ -26244,10 +26247,10 @@ const VStepperWindowItem = genericComponent()({
 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,
@@ -28210,8 +28213,8 @@ const VNumberInput = genericComponent()({
     const vTextFieldRef = ref();
     const stepDecimals = computed(() => getDecimals(props.step));
     const modelDecimals = computed(() => typeof model.value === 'number' ? getDecimals(model.value) : 0);
-    const form = useForm();
-    const controlsDisabled = computed(() => props.disabled || props.readonly || form?.isReadonly.value);
+    const form = useForm(props);
+    const controlsDisabled = computed(() => form.isDisabled.value || form.isReadonly.value);
     const canIncrease = computed(() => {
       if (controlsDisabled.value) return false;
       return (model.value ?? 0) + props.step <= props.max;
@@ -28234,7 +28237,7 @@ const VNumberInput = genericComponent()({
       click: onClickDown
     }));
     onMounted(() => {
-      if (!props.readonly && !props.disabled) {
+      if (!controlsDisabled.value) {
         clampModel();
       }
     });
@@ -29591,9 +29594,8 @@ const VTreeviewItem = genericComponent()({
     const vListItemRef = ref();
     const isActivatableGroupActivator = computed(() => vListItemRef.value?.root.activatable.value && vListItemRef.value?.isGroupActivator);
     const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!vListItemRef.value?.list || isActivatableGroupActivator.value));
-    function activateItem(e) {
-      if (!isClickable.value || !isActivatableGroupActivator.value && vListItemRef.value?.isGroupActivator) return;
-      if (vListItemRef.value?.root.activatable.value) {
+    function activateGroupActivator(e) {
+      if (isClickable.value && isActivatableGroupActivator.value) {
         vListItemRef.value?.activate(!vListItemRef.value?.isActivated, e);
       }
     }
@@ -29612,7 +29614,7 @@ const VTreeviewItem = genericComponent()({
           'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(vListItemRef.value?.id)
         }, props.class],
         "ripple": false,
-        "onClick": props.onClick ?? activateItem
+        "onClick": props.onClick ?? activateGroupActivator
       }), {
         ...slots,
         prepend: hasPrepend ? slotProps => {
@@ -30402,7 +30404,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.7.4-master.2024-11-24";
+const version$1 = "3.7.4-master.2024-11-29";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -30655,7 +30657,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.7.4-master.2024-11-24";
+const version = "3.7.4-master.2024-11-29";
 
 /* eslint-disable local-rules/sort-imports */