@vuetify/nightly 3.2.0-dev-20230407.0 → 3.2.0-dev-20230415.0

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.2.0-dev-20230407.0
+* Vuetify v3.2.0-dev-20230415.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -339,7 +339,7 @@ function includes(arr, val) {
 }
 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' + capitalize(name);
   return !!(props[name] || props[`${name}Once`] || props[`${name}Capture`] || props[`${name}OnceCapture`] || props[`${name}CaptureOnce`]);
@@ -1699,7 +1699,7 @@ function createTheme(options) {
       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})`]);
       }
@@ -1837,7 +1837,8 @@ function useProxiedModel(props, prop, defaultValue) {
   });
   const model = 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);
@@ -2711,9 +2712,9 @@ const VImg = genericComponent()({
     ...makeTransitionProps()
   },
   emits: {
-    loadstart: event => true,
-    load: event => true,
-    error: event => true
+    loadstart: value => true,
+    load: value => true,
+    error: value => true
   },
   setup(props, _ref) {
     let {
@@ -5338,9 +5339,9 @@ const makeVFieldProps = propsFactory({
     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');
@@ -5886,8 +5887,8 @@ const makeVInputProps = propsFactory({
     default: 'horizontal',
     validator: v => ['horizontal', 'vertical'].includes(v)
   },
-  'onClick:prepend': EventProp,
-  'onClick:append': EventProp,
+  'onClick:prepend': EventProp(),
+  'onClick:append': EventProp(),
   ...makeDensityProps(),
   ...makeValidationProps()
 }, 'v-input');
@@ -6118,6 +6119,7 @@ const makeVTextFieldProps = propsFactory({
     type: String,
     default: 'text'
   },
+  modelModifiers: Object,
   ...makeVInputProps(),
   ...makeVFieldProps()
 }, 'v-text-field');
@@ -6192,7 +6194,7 @@ const VTextField = genericComponent()({
     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];
         nextTick(() => {
           el.selectionStart = caretPosition[0];
@@ -6829,8 +6831,8 @@ const VChip = genericComponent()({
       type: Boolean,
       default: true
     },
-    onClick: EventProp,
-    onClickOnce: EventProp,
+    onClick: EventProp(),
+    onClickOnce: EventProp(),
     ...makeBorderProps(),
     ...makeDensityProps(),
     ...makeElevationProps(),
@@ -7674,8 +7676,8 @@ const VListItem = genericComponent()({
     subtitle: [String, Number, Boolean],
     title: [String, Number, Boolean],
     value: null,
-    onClick: EventProp,
-    onClickOnce: EventProp,
+    onClick: EventProp(),
+    onClickOnce: EventProp(),
     ...makeBorderProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
@@ -8217,7 +8219,8 @@ const VList = genericComponent()({
     }
     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)) {
@@ -8398,6 +8401,7 @@ function useActivator(props, _ref) {
       isActive.value = !isActive.value;
     },
     mouseenter: e => {
+      if (e.sourceCapabilities?.firesTouchEvents) return;
       isHovered = true;
       activatorEl.value = e.currentTarget || e.target;
       runOpenDelay();
@@ -9924,6 +9928,9 @@ const VSelect = genericComponent()({
       });
     });
     const selected = computed(() => selections.value.map(selection => selection.props.value));
+    const isFocused = ref(false);
+    let keyboardLookupPrefix = '';
+    let keyboardLookupLastTime;
     const displayItems = computed(() => {
       if (props.hideSelected) {
         return items.value.filter(item => !selections.value.some(s => s === item));
@@ -9960,6 +9967,26 @@ const VSelect = genericComponent()({
       } 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) {
@@ -9989,7 +10016,9 @@ const VSelect = genericComponent()({
     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 createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
       }, textFieldProps, {
@@ -9997,8 +10026,10 @@ const VSelect = genericComponent()({
         "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,
@@ -10007,6 +10038,7 @@ const VSelect = genericComponent()({
         }],
         "appendInnerIcon": props.menuIcon,
         "readonly": true,
+        "placeholder": placeholder,
         "onClick:clear": onClear,
         "onMousedown:control": onMousedownControl,
         "onBlur": onBlur,
@@ -10055,7 +10087,8 @@ const VSelect = genericComponent()({
                   } = _ref2;
                   return props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                     "modelValue": isSelected,
-                    "ripple": false
+                    "ripple": false,
+                    "tabindex": "-1"
                   }, null) : undefined;
                 }
               });
@@ -10382,6 +10415,7 @@ const VAutocomplete = genericComponent()({
     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 createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
@@ -10391,7 +10425,7 @@ const VAutocomplete = genericComponent()({
           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,
@@ -10401,6 +10435,7 @@ const VAutocomplete = genericComponent()({
         }],
         "appendInnerIcon": props.menuIcon,
         "readonly": props.readonly,
+        "placeholder": isDirty ? undefined : props.placeholder,
         "onClick:clear": onClear,
         "onMousedown:control": onMousedownControl,
         "onFocus": () => isFocused.value = true,
@@ -10447,7 +10482,8 @@ const VAutocomplete = genericComponent()({
                 } = _ref2;
                 return props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                   "modelValue": isSelected,
-                  "ripple": false
+                  "ripple": false,
+                  "tabindex": "-1"
                 }, null) : undefined;
               },
               title: () => {
@@ -13563,7 +13599,7 @@ const VCombobox = genericComponent()({
       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;
     });
@@ -13741,6 +13777,7 @@ const VCombobox = genericComponent()({
     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 createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
@@ -13750,7 +13787,7 @@ const VCombobox = genericComponent()({
           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,
@@ -13759,6 +13796,7 @@ const VCombobox = genericComponent()({
         }],
         "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,
@@ -13805,7 +13843,8 @@ const VCombobox = genericComponent()({
                 } = _ref2;
                 return props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                   "modelValue": isSelected,
-                  "ripple": false
+                  "ripple": false,
+                  "tabindex": "-1"
                 }, null) : undefined;
               },
               title: () => {
@@ -14215,7 +14254,6 @@ const VFileInput = genericComponent()({
     multiple: Boolean,
     hint: String,
     persistentHint: Boolean,
-    placeholder: String,
     showSize: {
       type: [Boolean, Number],
       default: false,
@@ -17431,6 +17469,7 @@ const VTextarea = genericComponent()({
       validator: v => !isNaN(parseFloat(v))
     },
     suffix: String,
+    modelModifiers: Object,
     ...makeVInputProps(),
     ...makeVFieldProps()
   },
@@ -17495,12 +17534,14 @@ const VTextarea = genericComponent()({
     }
     function onInput(e) {
       const el = e.target;
-      const caretPosition = [el.selectionStart, el.selectionEnd];
       model.value = el.value;
-      nextTick(() => {
-        el.selectionStart = caretPosition[0];
-        el.selectionEnd = caretPosition[1];
-      });
+      if (props.modelModifiers?.trim) {
+        const caretPosition = [el.selectionStart, el.selectionEnd];
+        nextTick(() => {
+          el.selectionStart = caretPosition[0];
+          el.selectionEnd = caretPosition[1];
+        });
+      }
     }
     const sizerRef = ref();
     function calculateInputHeight() {
@@ -18505,7 +18546,7 @@ function createVuetify$1() {
     locale
   };
 }
-const version$1 = "3.2.0-dev-20230407.0";
+const version$1 = "3.2.0-dev-20230415.0";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -18525,7 +18566,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.2.0-dev-20230407.0";
+const version = "3.2.0-dev-20230415.0";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDisplay, useLayout, useLocale, useRtl, useTheme, version };