vuetify 3.1.13 → 3.1.14

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.1.13
+* Vuetify v3.1.14
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -343,7 +343,7 @@
   }
   const onRE = /^on[^a-z]/;
   const isOn = key => onRE.test(key);
-  const EventProp = [Function, Array];
+  const EventProp = () => [Function, Array];
   function hasEvent(props, name) {
     name = 'on' + vue.capitalize(name);
     return !!(props[name] || props[`${name}Once`] || props[`${name}Capture`] || props[`${name}OnceCapture`] || props[`${name}CaptureOnce`]);
@@ -1703,7 +1703,7 @@
         if (/^on-[a-z]/.test(key)) {
           createCssClass(fgLines, `.${key}`, [`color: rgb(var(--v-theme-${key})) !important`]);
         } else {
-          createCssClass(bgLines, `.bg-${key}`, [`--v-theme-overlay-multiplier: var(--v-theme-${key}-overlay-multiplier)`, `background: rgb(var(--v-theme-${key})) !important`, `color: rgb(var(--v-theme-on-${key})) !important`]);
+          createCssClass(bgLines, `.bg-${key}`, [`--v-theme-overlay-multiplier: var(--v-theme-${key}-overlay-multiplier)`, `background-color: rgb(var(--v-theme-${key})) !important`, `color: rgb(var(--v-theme-on-${key})) !important`]);
           createCssClass(fgLines, `.text-${key}`, [`color: rgb(var(--v-theme-${key})) !important`]);
           createCssClass(fgLines, `.border-${key}`, [`--v-border-color: var(--v-theme-${key})`]);
         }
@@ -1841,7 +1841,8 @@
     });
     const model = vue.computed({
       get() {
-        return transformIn(isControlled.value ? props[prop] : internal.value);
+        const externalValue = props[prop];
+        return transformIn(isControlled.value ? externalValue : internal.value);
       },
       set(internalValue) {
         const newValue = transformOut(internalValue);
@@ -2715,9 +2716,9 @@
       ...makeTransitionProps()
     },
     emits: {
-      loadstart: event => true,
-      load: event => true,
-      error: event => true
+      loadstart: value => true,
+      load: value => true,
+      error: value => true
     },
     setup(props, _ref) {
       let {
@@ -5342,9 +5343,9 @@
       default: 'filled',
       validator: v => allowedVariants$1.includes(v)
     },
-    'onClick:clear': EventProp,
-    'onClick:appendInner': EventProp,
-    'onClick:prependInner': EventProp,
+    'onClick:clear': EventProp(),
+    'onClick:appendInner': EventProp(),
+    'onClick:prependInner': EventProp(),
     ...makeThemeProps(),
     ...makeLoaderProps()
   }, 'v-field');
@@ -5890,8 +5891,8 @@
       default: 'horizontal',
       validator: v => ['horizontal', 'vertical'].includes(v)
     },
-    'onClick:prepend': EventProp,
-    'onClick:append': EventProp,
+    'onClick:prepend': EventProp(),
+    'onClick:append': EventProp(),
     ...makeDensityProps(),
     ...makeValidationProps()
   }, 'v-input');
@@ -6122,6 +6123,7 @@
       type: String,
       default: 'text'
     },
+    modelModifiers: Object,
     ...makeVInputProps(),
     ...makeVFieldProps()
   }, 'v-text-field');
@@ -6196,7 +6198,7 @@
       function onInput(e) {
         const el = e.target;
         model.value = el.value;
-        if (['text', 'search', 'password', 'tel', 'url'].includes(props.type)) {
+        if (props.modelModifiers?.trim && ['text', 'search', 'password', 'tel', 'url'].includes(props.type)) {
           const caretPosition = [el.selectionStart, el.selectionEnd];
           vue.nextTick(() => {
             el.selectionStart = caretPosition[0];
@@ -6833,8 +6835,8 @@
         type: Boolean,
         default: true
       },
-      onClick: EventProp,
-      onClickOnce: EventProp,
+      onClick: EventProp(),
+      onClickOnce: EventProp(),
       ...makeBorderProps(),
       ...makeDensityProps(),
       ...makeElevationProps(),
@@ -7678,8 +7680,8 @@
       subtitle: [String, Number, Boolean],
       title: [String, Number, Boolean],
       value: null,
-      onClick: EventProp,
-      onClickOnce: EventProp,
+      onClick: EventProp(),
+      onClickOnce: EventProp(),
       ...makeBorderProps(),
       ...makeDensityProps(),
       ...makeDimensionProps(),
@@ -8221,7 +8223,8 @@
       }
       function focus(location) {
         if (!contentRef.value) return;
-        const focusable = [...contentRef.value.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')].filter(el => !el.hasAttribute('disabled'));
+        const targets = ['button', '[href]', 'input', 'select', 'textarea', '[tabindex]'].map(s => `${s}:not([tabindex="-1"])`).join(', ');
+        const focusable = [...contentRef.value.querySelectorAll(targets)].filter(el => !el.hasAttribute('disabled'));
         const idx = focusable.indexOf(document.activeElement);
         if (!location) {
           if (!contentRef.value.contains(document.activeElement)) {
@@ -8402,6 +8405,7 @@
         isActive.value = !isActive.value;
       },
       mouseenter: e => {
+        if (e.sourceCapabilities?.firesTouchEvents) return;
         isHovered = true;
         activatorEl.value = e.currentTarget || e.target;
         runOpenDelay();
@@ -9928,6 +9932,9 @@
         });
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
+      const isFocused = vue.ref(false);
+      let keyboardLookupPrefix = '';
+      let keyboardLookupLastTime;
       const displayItems = vue.computed(() => {
         if (props.hideSelected) {
           return items.value.filter(item => !selections.value.some(s => s === item));
@@ -9964,6 +9971,26 @@
         } else if (e.key === 'End') {
           listRef.value?.focus('last');
         }
+
+        // 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) {
+          keyboardLookupPrefix = '';
+        }
+        keyboardLookupPrefix += e.key.toLowerCase();
+        keyboardLookupLastTime = now;
+        const item = items.value.find(item => item.title.toLowerCase().startsWith(keyboardLookupPrefix));
+        if (item !== undefined) {
+          model.value = [item];
+        }
       }
       function select(item) {
         if (props.multiple) {
@@ -9993,7 +10020,9 @@
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
         const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
+        const isDirty = model.value.length > 0;
         const [textFieldProps] = VTextField.filterProps(props);
+        const placeholder = isDirty || !isFocused.value && props.label && !props.persistentPlaceholder ? undefined : props.placeholder;
         return vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
         }, textFieldProps, {
@@ -10001,8 +10030,10 @@
           "onUpdate:modelValue": v => {
             if (v == null) model.value = [];
           },
+          "focused": isFocused.value,
+          "onUpdate:focused": $event => isFocused.value = $event,
           "validationValue": model.externalValue,
-          "dirty": model.value.length > 0,
+          "dirty": isDirty,
           "class": ['v-select', {
             'v-select--active-menu': menu.value,
             'v-select--chips': !!props.chips,
@@ -10011,6 +10042,7 @@
           }],
           "appendInnerIcon": props.menuIcon,
           "readonly": true,
+          "placeholder": placeholder,
           "onClick:clear": onClear,
           "onMousedown:control": onMousedownControl,
           "onBlur": onBlur,
@@ -10059,7 +10091,8 @@
                     } = _ref2;
                     return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                       "modelValue": isSelected,
-                      "ripple": false
+                      "ripple": false,
+                      "tabindex": "-1"
                     }, null) : undefined;
                   }
                 });
@@ -10386,6 +10419,7 @@
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
         const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
+        const isDirty = model.value.length > 0;
         const [textFieldProps] = VTextField.filterProps(props);
         return vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
@@ -10395,7 +10429,7 @@
             if (v == null) model.value = [];
           },
           "validationValue": model.externalValue,
-          "dirty": model.value.length > 0,
+          "dirty": isDirty,
           "onInput": onInput,
           "class": ['v-autocomplete', {
             'v-autocomplete--active-menu': menu.value,
@@ -10405,6 +10439,7 @@
           }],
           "appendInnerIcon": props.menuIcon,
           "readonly": props.readonly,
+          "placeholder": isDirty ? undefined : props.placeholder,
           "onClick:clear": onClear,
           "onMousedown:control": onMousedownControl,
           "onFocus": () => isFocused.value = true,
@@ -10451,7 +10486,8 @@
                   } = _ref2;
                   return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                     "modelValue": isSelected,
-                    "ripple": false
+                    "ripple": false,
+                    "tabindex": "-1"
                   }, null) : undefined;
                 },
                 title: () => {
@@ -13567,7 +13603,7 @@
         textColorClasses,
         textColorStyles
       } = useTextColor(color);
-      const model = useProxiedModel(props, 'modelValue', [], v => transformIn(wrapInArray(v || [])), v => {
+      const model = useProxiedModel(props, 'modelValue', [], v => transformIn(wrapInArray(v)), v => {
         const transformed = transformOut(v);
         return props.multiple ? transformed : transformed[0] ?? null;
       });
@@ -13745,6 +13781,7 @@
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
         const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
+        const isDirty = model.value.length > 0;
         const [textFieldProps] = VTextField.filterProps(props);
         return vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
@@ -13754,7 +13791,7 @@
             if (v == null) model.value = [];
           }],
           "validationValue": model.externalValue,
-          "dirty": model.value.length > 0,
+          "dirty": isDirty,
           "class": ['v-combobox', {
             'v-combobox--active-menu': menu.value,
             'v-combobox--chips': !!props.chips,
@@ -13763,6 +13800,7 @@
           }],
           "appendInnerIcon": props.items.length ? props.menuIcon : undefined,
           "readonly": props.readonly,
+          "placeholder": isDirty ? undefined : props.placeholder,
           "onClick:clear": onClear,
           "onMousedown:control": onMousedownControl,
           "onFocus": () => isFocused.value = true,
@@ -13809,7 +13847,8 @@
                   } = _ref2;
                   return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                     "modelValue": isSelected,
-                    "ripple": false
+                    "ripple": false,
+                    "tabindex": "-1"
                   }, null) : undefined;
                 },
                 title: () => {
@@ -14219,7 +14258,6 @@
       multiple: Boolean,
       hint: String,
       persistentHint: Boolean,
-      placeholder: String,
       showSize: {
         type: [Boolean, Number],
         default: false,
@@ -17464,6 +17502,7 @@
         validator: v => !isNaN(parseFloat(v))
       },
       suffix: String,
+      modelModifiers: Object,
       ...makeVInputProps(),
       ...makeVFieldProps()
     },
@@ -17528,12 +17567,14 @@
       }
       function onInput(e) {
         const el = e.target;
-        const caretPosition = [el.selectionStart, el.selectionEnd];
         model.value = el.value;
-        vue.nextTick(() => {
-          el.selectionStart = caretPosition[0];
-          el.selectionEnd = caretPosition[1];
-        });
+        if (props.modelModifiers?.trim) {
+          const caretPosition = [el.selectionStart, el.selectionEnd];
+          vue.nextTick(() => {
+            el.selectionStart = caretPosition[0];
+            el.selectionEnd = caretPosition[1];
+          });
+        }
       }
       const sizerRef = vue.ref();
       function calculateInputHeight() {
@@ -18366,7 +18407,7 @@
       locale
     };
   }
-  const version$1 = "3.1.13";
+  const version$1 = "3.1.14";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -18386,7 +18427,7 @@
       ...options
     });
   };
-  const version = "3.1.13";
+  const version = "3.1.14";
   createVuetify.version = version;
 
   exports.components = components;