vuetify 3.3.11 → 3.3.13

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.11
+* Vuetify v3.3.13
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1657,6 +1657,7 @@
 
   var en = {
     badge: 'Badge',
+    open: 'Open',
     close: 'Close',
     dataIterator: {
       noResultsText: 'No matching records found',
@@ -5860,6 +5861,20 @@
           }
         }) : props.label;
         const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
+        const inputNode = vue.createVNode("input", vue.mergeProps({
+          "ref": input,
+          "checked": model.value,
+          "disabled": !!(props.readonly || props.disabled),
+          "id": id.value,
+          "onBlur": onBlur,
+          "onFocus": onFocus,
+          "onInput": onInput,
+          "aria-disabled": !!(props.readonly || props.disabled),
+          "type": props.type,
+          "value": trueValue.value,
+          "name": props.name,
+          "aria-checked": props.type === 'checkbox' ? model.value : undefined
+        }, inputAttrs), null);
         return vue.createVNode("div", vue.mergeProps({
           "class": ['v-selection-control', {
             'v-selection-control--dirty': model.value,
@@ -5876,32 +5891,21 @@
           "style": textColorStyles.value
         }, [slots.default?.(), vue.withDirectives(vue.createVNode("div", {
           "class": ['v-selection-control__input']
-        }, [icon.value && vue.createVNode(VIcon, {
-          "key": "icon",
-          "icon": icon.value
-        }, null), vue.createVNode("input", vue.mergeProps({
-          "ref": input,
-          "checked": model.value,
-          "disabled": !!(props.readonly || props.disabled),
-          "id": id.value,
-          "onBlur": onBlur,
-          "onFocus": onFocus,
-          "onInput": onInput,
-          "aria-disabled": !!(props.readonly || props.disabled),
-          "type": props.type,
-          "value": trueValue.value,
-          "name": props.name,
-          "aria-checked": props.type === 'checkbox' ? model.value : undefined
-        }, inputAttrs), null), slots.input?.({
+        }, [slots.input?.({
           model,
           textColorClasses,
           textColorStyles,
+          inputNode,
+          icon: icon.value,
           props: {
             onFocus,
             onBlur,
             id: id.value
           }
-        })]), [[vue.resolveDirective("ripple"), props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && vue.createVNode(VLabel, {
+        }) ?? vue.createVNode(vue.Fragment, null, [icon.value && vue.createVNode(VIcon, {
+          "key": "icon",
+          "icon": icon.value
+        }, null), inputNode])]), [[vue.resolveDirective("ripple"), props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && vue.createVNode(VLabel, {
           "for": id.value,
           "clickable": true
         }, {
@@ -6798,6 +6802,7 @@
       const closeProps = vue.computed(() => ({
         'aria-label': t(props.closeLabel),
         onClick(e) {
+          e.stopPropagation();
           isActive.value = false;
           emit('click:close', e);
         }
@@ -7701,7 +7706,9 @@
             }
           }, {
             default: () => [slots.prepend?.(slotProps.value)]
-          })]), vue.createVNode("div", {
+          }), vue.createVNode("div", {
+            "class": "v-list-item__spacer"
+          }, null)]), vue.createVNode("div", {
             "class": "v-list-item__content",
             "data-no-activator": ""
           }, [hasTitle && vue.createVNode(VListItemTitle, {
@@ -7745,7 +7752,9 @@
             }
           }, {
             default: () => [slots.append?.(slotProps.value)]
-          })])]
+          }), vue.createVNode("div", {
+            "class": "v-list-item__spacer"
+          }, null)])]
         }), [[vue.resolveDirective("ripple"), isClickable.value && props.ripple]]);
       });
       return {};
@@ -9856,10 +9865,11 @@
           }, 40);
         }
       });
-      function onFocusIn(e) {
+      async function onFocusIn(e) {
         const before = e.relatedTarget;
         const after = e.target;
-        if (before !== after && overlay.value?.contentEl &&
+        await vue.nextTick();
+        if (isActive.value && before !== after && overlay.value?.contentEl &&
         // We're the topmost menu
         overlay.value?.globalTop &&
         // It isn't the document or the menu body
@@ -10195,7 +10205,7 @@
             '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],
-          "style": [backgroundColorStyles.value, textColorStyles.value, props.style],
+          "style": [backgroundColorStyles.value, props.style],
           "onClick": onClick
         }, attrs), [vue.createVNode("div", {
           "class": "v-field__overlay"
@@ -10219,7 +10229,8 @@
           "ref": floatingLabelRef,
           "class": [textColorClasses.value],
           "floating": true,
-          "for": id.value
+          "for": id.value,
+          "style": textColorStyles.value
         }, {
           default: () => [label]
         }), vue.createVNode(VFieldLabel, {
@@ -10255,7 +10266,8 @@
           "key": "append-icon",
           "name": "appendInner"
         }, null)]), vue.createVNode("div", {
-          "class": ['v-field__outline', textColorClasses.value]
+          "class": ['v-field__outline', textColorClasses.value],
+          "style": textColorStyles.value
         }, [isOutlined && vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
           "class": "v-field__outline__start"
         }, null), hasLabel.value && vue.createVNode("div", {
@@ -10299,6 +10311,7 @@
     persistentPlaceholder: Boolean,
     persistentCounter: Boolean,
     suffix: String,
+    role: String,
     type: {
       type: String,
       default: 'text'
@@ -10423,7 +10436,7 @@
               "onClick:clear": onClear,
               "onClick:prependInner": props['onClick:prependInner'],
               "onClick:appendInner": props['onClick:appendInner'],
-              "role": "textbox"
+              "role": props.role
             }, fieldProps, {
               "id": id.value,
               "active": isActive.value || isDirty.value,
@@ -10462,10 +10475,12 @@
                   "class": "v-text-field__prefix"
                 }, [vue.createVNode("span", {
                   "class": "v-text-field__prefix__text"
-                }, [props.prefix])]), vue.createVNode("div", {
+                }, [props.prefix])]), slots.default ? vue.createVNode("div", {
                   "class": fieldClass,
                   "data-no-activator": ""
-                }, [slots.default ? vue.createVNode(vue.Fragment, null, [slots.default(), inputNode]) : vue.cloneVNode(inputNode)]), props.suffix && vue.createVNode("span", {
+                }, [slots.default(), inputNode]) : vue.cloneVNode(inputNode, {
+                  class: fieldClass
+                }), props.suffix && vue.createVNode("span", {
                   "class": "v-text-field__suffix"
                 }, [vue.createVNode("span", {
                   "class": "v-text-field__suffix__text"
@@ -10784,6 +10799,14 @@
   const makeSelectProps = propsFactory({
     chips: Boolean,
     closableChips: Boolean,
+    closeText: {
+      type: String,
+      default: '$vuetify.close'
+    },
+    openText: {
+      type: String,
+      default: '$vuetify.open'
+    },
     eager: Boolean,
     hideNoData: Boolean,
     hideSelected: Boolean,
@@ -10813,7 +10836,8 @@
   const makeVSelectProps = propsFactory({
     ...makeSelectProps(),
     ...omit(makeVTextFieldProps({
-      modelValue: null
+      modelValue: null,
+      role: 'button'
     }), ['validationValue', 'dirty', 'appendInnerIcon']),
     ...makeTransitionProps({
       transition: {
@@ -10868,6 +10892,7 @@
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
       const isFocused = vue.shallowRef(false);
+      const label = vue.computed(() => menu.value ? props.closeText : props.openText);
       let keyboardLookupPrefix = '';
       let keyboardLookupLastTime;
       const displayItems = vue.computed(() => {
@@ -10994,7 +11019,9 @@
           "onClick:clear": onClear,
           "onMousedown:control": onMousedownControl,
           "onBlur": onBlur,
-          "onKeydown": onKeydown
+          "onKeydown": onKeydown,
+          "aria-label": t(label.value),
+          "title": t(label.value)
         }), {
           ...slots,
           default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
@@ -11257,7 +11284,8 @@
     }),
     ...makeSelectProps(),
     ...omit(makeVTextFieldProps({
-      modelValue: null
+      modelValue: null,
+      role: 'combobox'
     }), ['validationValue', 'dirty', 'appendInnerIcon']),
     ...makeTransitionProps({
       transition: false
@@ -11294,6 +11322,7 @@
       });
       const selectionIndex = vue.shallowRef(-1);
       const color = vue.computed(() => vTextFieldRef.value?.color);
+      const label = vue.computed(() => menu.value ? props.closeText : props.openText);
       const {
         items,
         transformIn,
@@ -11641,7 +11670,9 @@
               "class": "v-autocomplete__menu-icon",
               "icon": props.menuIcon,
               "onMousedown": onMousedownMenuIcon,
-              "onClick": noop
+              "onClick": noop,
+              "aria-label": t(label.value),
+              "title": t(label.value)
             }, null) : undefined]);
           }
         });
@@ -14785,7 +14816,8 @@
       returnObject: true
     }),
     ...omit(makeVTextFieldProps({
-      modelValue: null
+      modelValue: null,
+      role: 'combobox'
     }), ['validationValue', 'dirty', 'appendInnerIcon']),
     ...makeTransitionProps({
       transition: false
@@ -14824,6 +14856,7 @@
       const selectionIndex = vue.shallowRef(-1);
       let cleared = false;
       const color = vue.computed(() => vTextFieldRef.value?.color);
+      const label = vue.computed(() => menu.value ? props.closeText : props.openText);
       const {
         items,
         transformIn,
@@ -15199,7 +15232,9 @@
               "class": "v-combobox__menu-icon",
               "icon": props.menuIcon,
               "onMousedown": onMousedownMenuIcon,
-              "onClick": noop
+              "onClick": noop,
+              "aria-label": t(label.value),
+              "title": t(label.value)
             }, null) : undefined]);
           }
         });
@@ -16163,7 +16198,7 @@
   });
 
   // Utilities
-  const VSpacer = createSimpleFunctional('flex-grow-1', 'div', 'VSpacer');
+  const VSpacer = createSimpleFunctional('v-spacer', 'div', 'VSpacer');
 
   // Composables
   const makeVHoverProps = propsFactory({
@@ -18542,25 +18577,32 @@
               }, null),
               input: _ref3 => {
                 let {
-                  textColorClasses,
-                  textColorStyles
+                  inputNode,
+                  icon
                 } = _ref3;
-                return vue.createVNode("div", {
-                  "class": ['v-switch__thumb', textColorClasses.value],
-                  "style": textColorStyles.value
-                }, [props.loading && vue.createVNode(LoaderSlot, {
-                  "name": "v-switch",
-                  "active": true,
-                  "color": isValid.value === false ? undefined : loaderColor.value
-                }, {
-                  default: slotProps => slots.loader ? slots.loader(slotProps) : vue.createVNode(VProgressCircular, {
-                    "active": slotProps.isActive,
-                    "color": slotProps.color,
-                    "indeterminate": true,
-                    "size": "16",
-                    "width": "2"
-                  }, null)
-                })]);
+                return vue.createVNode(vue.Fragment, null, [inputNode, vue.createVNode("div", {
+                  "class": ['v-switch__thumb', {
+                    'v-switch__thumb--filled': icon || props.loading
+                  }]
+                }, [vue.createVNode(VScaleTransition, null, {
+                  default: () => [!props.loading ? icon && vue.createVNode(VIcon, {
+                    "key": icon,
+                    "icon": icon,
+                    "size": "x-small"
+                  }, null) : vue.createVNode(LoaderSlot, {
+                    "name": "v-switch",
+                    "active": true,
+                    "color": isValid.value === false ? undefined : loaderColor.value
+                  }, {
+                    default: slotProps => slots.loader ? slots.loader(slotProps) : vue.createVNode(VProgressCircular, {
+                      "active": slotProps.isActive,
+                      "color": slotProps.color,
+                      "indeterminate": true,
+                      "size": "16",
+                      "width": "2"
+                    }, null)
+                  })]
+                })])]);
               }
             });
           }
@@ -19041,8 +19083,7 @@
               "onMousedown": onControlMousedown,
               "onClick:clear": onClear,
               "onClick:prependInner": props['onClick:prependInner'],
-              "onClick:appendInner": props['onClick:appendInner'],
-              "role": "textbox"
+              "onClick:appendInner": props['onClick:appendInner']
             }, fieldProps, {
               "active": isActive.value || isDirty.value,
               "centerAffix": rows.value === 1 && !isPlainOrUnderlined.value,
@@ -21907,7 +21948,7 @@
       const weekday = new Date(sundayJanuarySecond2000);
       weekday.setDate(sundayJanuarySecond2000.getDate() + daysFromSunday + i);
       return new Intl.DateTimeFormat(locale, {
-        weekday: 'short'
+        weekday: 'narrow'
       }).format(weekday);
     });
   }
@@ -22232,13 +22273,23 @@
       const date = adapter.date(input);
       return adapter.isValid(date) ? date : fallback;
     }
+    function isEqual(model, comparing) {
+      if (model.length !== comparing.length) return false;
+      for (let i = 0; i < model.length; i++) {
+        if (comparing[i] && !adapter.isEqual(model[i], comparing[i])) {
+          return false;
+        }
+      }
+      return true;
+    }
     return {
       model,
       adapter,
       inputMode,
       viewMode,
       displayDate,
-      parseKeyboardDate
+      parseKeyboardDate,
+      isEqual
     };
   }
 
@@ -22336,7 +22387,8 @@
       model,
       displayDate,
       viewMode,
-      inputMode
+      inputMode,
+      isEqual
     } = createDateInput(props, !!props.multiple);
     return {
       hoverDate,
@@ -22347,7 +22399,8 @@
       model,
       displayDate,
       viewMode,
-      inputMode
+      inputMode,
+      isEqual
     };
   }
   function useDatePicker() {
@@ -22593,7 +22646,7 @@
         "onTouchstart": handleMousedown
       }, [!props.hideWeekdays && adapter.getWeekdays().map(weekDay => vue.createVNode("div", {
         "class": ['v-date-picker-month__day', 'v-date-picker-month__weekday']
-      }, [weekDay.charAt(0)])), daysInMonth.value.map((item, index) => vue.createVNode("div", {
+      }, [weekDay])), daysInMonth.value.map((item, index) => vue.createVNode("div", {
         "class": ['v-date-picker-month__day', {
           'v-date-picker-month__day--selected': item.isSelected,
           'v-date-picker-month__day--start': item.isStart,
@@ -22911,6 +22964,10 @@
       type: String,
       default: '$vuetify.datePicker.input.placeholder'
     },
+    inputPlaceholder: {
+      type: String,
+      default: 'dd/mm/yyyy'
+    },
     header: {
       type: String,
       default: '$vuetify.datePicker.header'
@@ -22945,24 +23002,40 @@
         model,
         displayDate,
         viewMode,
-        inputMode
+        inputMode,
+        isEqual
       } = createDatePicker(props);
       const isReversing = vue.shallowRef(false);
-      const inputModel = vue.computed(() => model.value.length ? adapter.format(model.value[0], 'keyboardDate') : '');
+      const inputModel = vue.ref(model.value.map(date => adapter.format(date, 'keyboardDate')));
+      const temporaryModel = vue.ref(model.value);
       const title = vue.computed(() => t(props.title));
       const header = vue.computed(() => model.value.length ? adapter.format(model.value[0], 'normalDateWithWeekday') : t(props.header));
       const headerIcon = vue.computed(() => inputMode.value === 'calendar' ? props.keyboardIcon : props.calendarIcon);
       const headerTransition = vue.computed(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`);
-      vue.watch(inputModel, () => {
+      function updateFromInput(input, index) {
         const {
           isValid,
           date
         } = adapter;
-        model.value = isValid(inputModel.value) ? [date(inputModel.value)] : [];
+        if (isValid(input)) {
+          const newModel = model.value.slice();
+          newModel[index] = date(input);
+          if (props.hideActions) {
+            model.value = newModel;
+          } else {
+            temporaryModel.value = newModel;
+          }
+        }
+      }
+      vue.watch(model, val => {
+        if (!isEqual(val, temporaryModel.value)) {
+          temporaryModel.value = val;
+        }
+        inputModel.value = val.map(date => adapter.format(date, 'keyboardDate'));
       });
-      vue.watch(model, (val, oldVal) => {
-        if (props.hideActions) {
-          emit('update:modelValue', val);
+      vue.watch(temporaryModel, (val, oldVal) => {
+        if (props.hideActions && !isEqual(val, model.value)) {
+          model.value = val;
         }
         if (val[0] && oldVal[0]) {
           isReversing.value = adapter.isBefore(val[0], oldVal[0]);
@@ -22973,7 +23046,7 @@
       }
       function onClickSave() {
         emit('click:save');
-        emit('update:modelValue', model.value);
+        model.value = temporaryModel.value;
       }
       function onClickAppend() {
         inputMode.value = inputMode.value === 'calendar' ? 'keyboard' : 'calendar';
@@ -23009,8 +23082,8 @@
             default: () => [viewMode.value === 'month' ? vue.createVNode(VDatePickerMonth, vue.mergeProps({
               "key": "date-picker-month"
             }, datePickerMonthProps, {
-              "modelValue": model.value,
-              "onUpdate:modelValue": $event => model.value = $event,
+              "modelValue": temporaryModel.value,
+              "onUpdate:modelValue": $event => temporaryModel.value = $event,
               "displayDate": displayDate.value,
               "onUpdate:displayDate": $event => displayDate.value = $event
             }), null) : vue.createVNode(VDatePickerYears, vue.mergeProps({
@@ -23024,10 +23097,10 @@
           })]) : vue.createVNode("div", {
             "class": "v-date-picker__input"
           }, [vue.createVNode(VTextField, {
-            "modelValue": inputModel.value,
-            "onUpdate:modelValue": $event => inputModel.value = $event,
+            "modelValue": inputModel.value[0],
+            "onUpdate:modelValue": v => updateFromInput(v, 0),
             "label": t(props.inputText),
-            "placeholder": "dd/mm/yyyy"
+            "placeholder": props.inputPlaceholder
           }, null)]),
           actions: () => !props.hideActions ? vue.createVNode("div", null, [vue.createVNode(VBtn, {
             "variant": "text",
@@ -23314,6 +23387,7 @@
     },
     setup(props, _ref) {
       let {
+        attrs,
         emit,
         slots
       } = _ref;
@@ -23339,34 +23413,36 @@
         const value = current.value.value;
         array[focusIndex.value] = value;
         model.value = array;
+        let target = null;
+        if (focusIndex.value > model.value.length) {
+          target = model.value.length + 1;
+        } else if (focusIndex.value + 1 !== Number(props.length)) {
+          target = 'next';
+        } else {
+          requestAnimationFrame(() => current.value?.blur());
+        }
+        if (target) focusChild(contentRef.value, target);
       }
       function onKeydown(e) {
         const array = model.value.slice();
         const index = focusIndex.value;
         let target = null;
+        if (!['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete'].includes(e.key)) return;
+        e.preventDefault();
         if (e.key === 'ArrowLeft') {
           target = 'prev';
         } else if (e.key === 'ArrowRight') {
           target = 'next';
-        } else if (e.key === 'Backspace') {
-          if (focusIndex.value > 0) {
-            target = 'prev';
-          }
-        } else if (e.key === 'Delete') {
+        } else if (['Backspace', 'Delete'].includes(e.key)) {
           array[focusIndex.value] = '';
           model.value = array;
-          requestAnimationFrame(() => {
-            inputRef.value[index].select();
-          });
-        } else if (props.type === 'number' && isNaN(parseInt(e.key))) {
-          return;
-        } else if (focusIndex.value > model.value.length) {
-          target = model.value.length + 1;
-        } else if (focusIndex.value + 1 !== Number(props.length)) {
-          target = 'next';
-        } else {
-          requestAnimationFrame(() => current.value?.blur());
-          return;
+          if (focusIndex.value > 0 && e.key === 'Backspace') {
+            target = 'prev';
+          } else {
+            requestAnimationFrame(() => {
+              inputRef.value[index].select();
+            });
+          }
         }
         requestAnimationFrame(() => {
           if (target != null) {
@@ -23412,12 +23488,13 @@
         });
       });
       useRender(() => {
-        return vue.createVNode("div", {
+        const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
+        return vue.createVNode("div", vue.mergeProps({
           "class": ['v-otp-input', {
             'v-otp-input--divided': !!props.divider
           }, props.class],
           "style": [props.style]
-        }, [vue.createVNode("div", {
+        }, rootAttrs), [vue.createVNode("div", {
           "ref": contentRef,
           "class": "v-otp-input__content",
           "style": [dimensionStyles.value]
@@ -23448,7 +23525,12 @@
               "onPaste": event => onPaste(i, event)
             }, null);
           }
-        })])), vue.createVNode(VOverlay, {
+        })])), vue.createVNode("input", vue.mergeProps({
+          "class": "v-otp-input-input",
+          "type": "hidden"
+        }, inputAttrs, {
+          "value": model.value.join('')
+        }), null), vue.createVNode(VOverlay, {
           "contained": true,
           "content-class": "v-otp-input__loader",
           "model-value": !!props.loading,
@@ -23866,8 +23948,8 @@
       mandatory: 'force',
       selectedClass: 'v-stepper-item--selected'
     }),
-    ...omit(makeVSheetProps(), ['color']),
-    ...makeVStepperActionsProps()
+    ...makeVSheetProps(),
+    ...only(makeVStepperActionsProps(), ['prevText', 'nextText'])
   }, 'VStepper');
   const VStepper = genericComponent()({
     name: 'VStepper',
@@ -23887,6 +23969,7 @@
         selected
       } = useGroup(props, VStepperSymbol);
       const {
+        color,
         editable,
         prevText,
         nextText
@@ -23916,16 +23999,19 @@
           nextText
         },
         VStepperActions: {
-          disabled
+          color,
+          disabled,
+          prevText,
+          nextText
         }
       });
       useRender(() => {
         const [sheetProps] = VSheet.filterProps(props);
-        const [stepperActionProps] = VStepperActions.filterProps(props);
         const hasHeader = !!(slots.header || props.items.length);
         const hasWindow = props.items.length > 0;
         const hasActions = !props.hideActions && !!(hasWindow || slots.actions);
         return vue.createVNode(VSheet, vue.mergeProps(sheetProps, {
+          "color": props.bgColor,
           "class": ['v-stepper', {
             'v-stepper--alt-labels': props.altLabels,
             'v-stepper--flat': props.flat,
@@ -23957,12 +24043,11 @@
           }), hasActions && (slots.actions?.({
             next,
             prev
-          }) ?? vue.createVNode(VStepperActions, vue.mergeProps({
-            "key": "stepper-actions"
-          }, stepperActionProps, {
+          }) ?? vue.createVNode(VStepperActions, {
+            "key": "stepper-actions",
             "onClick:prev": prev,
             "onClick:next": next
-          }), null))]
+          }, null))]
         });
       });
       return {
@@ -24350,7 +24435,7 @@
       date
     };
   }
-  const version$1 = "3.3.11";
+  const version$1 = "3.3.13";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -24364,7 +24449,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.3.11";
+  const version = "3.3.13";
 
   /* eslint-disable local-rules/sort-imports */