vuetify 3.1.14 → 3.1.15

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.1.14
+* Vuetify v3.1.15
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -5293,7 +5293,8 @@
 
   // Composables
   const makeFocusProps = propsFactory({
-    focused: Boolean
+    focused: Boolean,
+    'onUpdate:focused': EventProp()
   }, 'focus');
   function useFocus(props) {
     let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
@@ -5882,6 +5883,8 @@
     appendIcon: IconValue,
     prependIcon: IconValue,
     hideDetails: [Boolean, String],
+    hint: String,
+    persistentHint: Boolean,
     messages: {
       type: [Array, String],
       default: () => []
@@ -5945,10 +5948,19 @@
         resetValidation,
         validate
       }));
+      const messages = vue.computed(() => {
+        if (errorMessages.value.length > 0) {
+          return errorMessages.value;
+        } else if (props.hint && (props.persistentHint || props.focused)) {
+          return props.hint;
+        } else {
+          return props.messages;
+        }
+      });
       useRender(() => {
         const hasPrepend = !!(slots.prepend || props.prependIcon);
         const hasAppend = !!(slots.append || props.appendIcon);
-        const hasMessages = !!(props.messages?.length || errorMessages.value.length);
+        const hasMessages = messages.value.length > 0;
         const hasDetails = !props.hideDetails || props.hideDetails === 'auto' && (hasMessages || !!slots.details);
         return vue.createVNode("div", {
           "class": ['v-input', `v-input--${props.direction}`, densityClasses.value, validationClasses.value]
@@ -5971,7 +5983,7 @@
         }, [vue.createVNode(VMessages, {
           "id": messagesId.value,
           "active": hasMessages,
-          "messages": errorMessages.value.length > 0 ? errorMessages.value : props.messages
+          "messages": messages.value
         }, {
           message: slots.message
         }), slots.details?.(slotProps.value)])]);
@@ -5983,10 +5995,6 @@
       };
     }
   });
-  function filterInputProps(props) {
-    const keys = Object.keys(VInput.props).filter(k => !isOn(k));
-    return pick(props, keys);
-  }
 
   const VCounter = genericComponent()({
     name: 'VCounter',
@@ -6112,8 +6120,6 @@
     autofocus: Boolean,
     counter: [Boolean, Number, String],
     counterValue: Function,
-    hint: String,
-    persistentHint: Boolean,
     prefix: String,
     placeholder: String,
     persistentPlaceholder: Boolean,
@@ -6168,9 +6174,6 @@
       const vFieldRef = vue.ref();
       const inputRef = vue.ref();
       const isActive = vue.computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value);
-      const messages = vue.computed(() => {
-        return props.messages.length ? props.messages : isFocused.value || props.persistentHint ? props.hint : '';
-      });
       function onFocus() {
         if (inputRef.value !== document.activeElement) {
           inputRef.value?.focus();
@@ -6213,7 +6216,7 @@
         const [{
           modelValue: _,
           ...inputProps
-        }] = filterInputProps(props);
+        }] = VInput.filterProps(props);
         const [fieldProps] = filterFieldProps(props);
         return vue.createVNode(VInput, vue.mergeProps({
           "ref": vInputRef,
@@ -6223,12 +6226,9 @@
             'v-text-field--prefixed': props.prefix,
             'v-text-field--suffixed': props.suffix,
             'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant)
-          }],
-          "onClick:prepend": props['onClick:prepend'],
-          "onClick:append": props['onClick:append']
+          }]
         }, rootAttrs, inputProps, {
-          "focused": isFocused.value,
-          "messages": messages.value
+          "focused": isFocused.value
         }), {
           ...slots,
           default: _ref2 => {
@@ -6637,7 +6637,7 @@
       const id = vue.computed(() => props.id || `checkbox-${uid}`);
       useRender(() => {
         const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
-        const [inputProps, _1] = filterInputProps(props);
+        const [inputProps, _1] = VInput.filterProps(props);
         const [checkboxProps, _2] = VCheckboxBtn.filterProps(props);
         return vue.createVNode(VInput, vue.mergeProps({
           "class": "v-checkbox"
@@ -8049,7 +8049,12 @@
   function useItems(props) {
     const items = vue.computed(() => transformItems$1(props, props.items));
     function transformIn(value) {
-      return value.map(item => transformItem$1(props, item));
+      return value.map(v => {
+        const existingItem = items.value.find(item => deepEqual(v, item.value));
+        // Nullish existingItem means value is a custom input value from combobox
+        // In this case, use transformItem to create an InternalItem based on value
+        return existingItem ?? transformItem$1(props, v);
+      });
     }
     function transformOut(value) {
       return value.map(_ref => {
@@ -8727,7 +8732,7 @@
   }
 
   /** Get size of element ignoring max-width/max-height */
-  function getIntrinsicSize(el) {
+  function getIntrinsicSize(el, isRtl) {
     // const scrollables = new Map<Element, [number, number]>()
     // el.querySelectorAll('*').forEach(el => {
     //   const x = el.scrollLeft
@@ -8744,7 +8749,11 @@
 
     /* eslint-disable-next-line sonarjs/prefer-immediate-return */
     const contentBox = nullifyTransforms(el);
-    contentBox.x -= parseFloat(el.style.left || 0);
+    if (isRtl) {
+      contentBox.x += parseFloat(el.style.right || 0);
+    } else {
+      contentBox.x -= parseFloat(el.style.left || 0);
+    }
     contentBox.y -= parseFloat(el.style.top || 0);
 
     // el.style.maxWidth = initialMaxWidth
@@ -8825,7 +8834,7 @@
       });
       if (!data.activatorEl.value || !data.contentEl.value) return;
       const targetBox = data.activatorEl.value.getBoundingClientRect();
-      const contentBox = getIntrinsicSize(data.contentEl.value);
+      const contentBox = getIntrinsicSize(data.contentEl.value, data.isRtl.value);
       const scrollParents = getScrollParents(data.contentEl.value);
       const viewportMargin = 12;
       if (!scrollParents.length) {
@@ -9001,7 +9010,8 @@
         transformOrigin: `${placement.origin.side} ${placement.origin.align}`,
         // transform: `translate(${pixelRound(x)}px, ${pixelRound(y)}px)`,
         top: convertToUnit(pixelRound(y)),
-        left: convertToUnit(pixelRound(x)),
+        left: data.isRtl.value ? undefined : convertToUnit(pixelRound(x)),
+        right: data.isRtl.value ? convertToUnit(pixelRound(-x)) : undefined,
         minWidth: convertToUnit(axis === 'y' ? Math.min(minWidth.value, targetBox.width) : minWidth.value),
         maxWidth: convertToUnit(pixelCeil(clamp(available.x, minWidth.value === Infinity ? 0 : minWidth.value, maxWidth.value))),
         maxHeight: convertToUnit(pixelCeil(clamp(available.y, minHeight.value === Infinity ? 0 : minHeight.value, maxHeight.value)))
@@ -9896,6 +9906,7 @@
       })
     },
     emits: {
+      'update:focused': focused => true,
       'update:modelValue': val => true,
       'update:menu': val => true
     },
@@ -10012,6 +10023,9 @@
           menu.value = false;
         }
       }
+      function onFocusin(e) {
+        isFocused.value = true;
+      }
       function onFocusout(e) {
         if (e.relatedTarget == null) {
           vTextFieldRef.value?.focus();
@@ -10066,6 +10080,7 @@
               "selected": selected.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
+              "onFocusin": onFocusin,
               "onFocusout": onFocusout
             }, {
               default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
@@ -10144,6 +10159,7 @@
         });
       });
       return forwardRefs({
+        isFocused,
         menu,
         select
       }, vTextFieldRef);
@@ -10282,6 +10298,7 @@
       })
     },
     emits: {
+      'update:focused': focused => true,
       'update:search': val => true,
       'update:modelValue': val => true,
       'update:menu': val => true
@@ -10305,11 +10322,17 @@
           _menu.value = v;
         }
       });
+      const selectionIndex = vue.ref(-1);
+      const color = vue.computed(() => vTextFieldRef.value?.color);
       const {
         items,
         transformIn,
         transformOut
       } = useItems(props);
+      const {
+        textColorClasses,
+        textColorStyles
+      } = useTextColor(color);
       const search = useProxiedModel(props, 'search', '');
       const model = useProxiedModel(props, 'modelValue', [], v => transformIn(wrapInArray(v)), v => {
         const transformed = transformOut(v);
@@ -10332,6 +10355,7 @@
         return filteredItems.value;
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
+      const selection = vue.computed(() => selections.value[selectionIndex.value]);
       const listRef = vue.ref();
       function onClear(e) {
         if (props.openOnClear) {
@@ -10345,7 +10369,9 @@
       }
       function onKeydown(e) {
         if (props.readonly || form?.isReadonly.value) return;
-        if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
+        const selectionStart = vTextFieldRef.value.selectionStart;
+        const length = selected.value.length;
+        if (selectionIndex.value > -1 || ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
           e.preventDefault();
         }
         if (['Enter', 'ArrowDown'].includes(e.key)) {
@@ -10362,6 +10388,38 @@
         } else if (e.key === 'ArrowUp') {
           listRef.value?.focus('prev');
         }
+        if (!props.multiple) return;
+        if (['Backspace', 'Delete'].includes(e.key)) {
+          if (selectionIndex.value < 0) {
+            if (e.key === 'Backspace' && !search.value) {
+              selectionIndex.value = length - 1;
+            }
+            return;
+          }
+          const originalSelectionIndex = selectionIndex.value;
+          if (selection.value) select(selection.value);
+          selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
+        }
+        if (e.key === 'ArrowLeft') {
+          if (selectionIndex.value < 0 && selectionStart > 0) return;
+          const prev = selectionIndex.value > -1 ? selectionIndex.value - 1 : length - 1;
+          if (selections.value[prev]) {
+            selectionIndex.value = prev;
+          } else {
+            selectionIndex.value = -1;
+            vTextFieldRef.value.setSelectionRange(search.value?.length, search.value?.length);
+          }
+        }
+        if (e.key === 'ArrowRight') {
+          if (selectionIndex.value < 0) return;
+          const next = selectionIndex.value + 1;
+          if (selections.value[next]) {
+            selectionIndex.value = next;
+          } else {
+            selectionIndex.value = -1;
+            vTextFieldRef.value.setSelectionRange(0, 0);
+          }
+        }
       }
       function onInput(e) {
         search.value = e.target.value;
@@ -10383,7 +10441,6 @@
           const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value));
           if (index === -1) {
             model.value = [...model.value, item];
-            search.value = '';
           } else {
             const value = [...model.value];
             value.splice(index, 1);
@@ -10428,12 +10485,15 @@
           "onUpdate:modelValue": v => {
             if (v == null) model.value = [];
           },
+          "focused": isFocused.value,
+          "onUpdate:focused": $event => isFocused.value = $event,
           "validationValue": model.externalValue,
           "dirty": isDirty,
           "onInput": onInput,
           "class": ['v-autocomplete', {
             'v-autocomplete--active-menu': menu.value,
             'v-autocomplete--chips': !!props.chips,
+            'v-autocomplete--selecting-index': selectionIndex.value > -1,
             [`v-autocomplete--${props.multiple ? 'multiple' : 'single'}`]: true,
             'v-autocomplete--selection-slot': !!slots.selection
           }],
@@ -10442,8 +10502,6 @@
           "placeholder": isDirty ? undefined : props.placeholder,
           "onClick:clear": onClear,
           "onMousedown:control": onMousedownControl,
-          "onFocus": () => isFocused.value = true,
-          "onBlur": () => isFocused.value = false,
           "onKeydown": onKeydown
         }), {
           ...slots,
@@ -10508,7 +10566,8 @@
             };
             return vue.createVNode("div", {
               "key": item.value,
-              "class": "v-autocomplete__selection"
+              "class": ['v-autocomplete__selection', index === selectionIndex.value && ['v-autocomplete__selection--selected', textColorClasses.value]],
+              "style": index === selectionIndex.value ? textColorStyles.value : {}
             }, [hasChips ? !slots.chip ? vue.createVNode(VChip, vue.mergeProps({
               "key": "chip",
               "closable": props.closableChips,
@@ -12903,7 +12962,7 @@
       } = useFocus(props);
       const trackStop = vue.computed(() => position(model.value));
       useRender(() => {
-        const [inputProps, _] = filterInputProps(props);
+        const [inputProps, _] = VInput.filterProps(props);
         const hasPrepend = !!(props.label || slots.label || slots.prepend);
         return vue.createVNode(VInput, vue.mergeProps({
           "class": ['v-slider', {
@@ -13567,6 +13626,7 @@
       })
     },
     emits: {
+      'update:focused': focused => true,
       'update:modelValue': val => true,
       'update:search': val => true,
       'update:menu': val => true
@@ -13704,8 +13764,9 @@
             }
             return;
           }
-          select(selection.value);
-          vue.nextTick(() => !selection.value && (selectionIndex.value = length - 2));
+          const originalSelectionIndex = selectionIndex.value;
+          if (selection.value) select(selection.value);
+          selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
         }
         if (e.key === 'ArrowLeft') {
           if (selectionIndex.value < 0 && selectionStart > 0) return;
@@ -13790,6 +13851,8 @@
           "onUpdate:modelValue": [$event => search.value = $event, v => {
             if (v == null) model.value = [];
           }],
+          "focused": isFocused.value,
+          "onUpdate:focused": $event => isFocused.value = $event,
           "validationValue": model.externalValue,
           "dirty": isDirty,
           "class": ['v-combobox', {
@@ -13803,8 +13866,6 @@
           "placeholder": isDirty ? undefined : props.placeholder,
           "onClick:clear": onClear,
           "onMousedown:control": onMousedownControl,
-          "onFocus": () => isFocused.value = true,
-          "onBlur": () => isFocused.value = false,
           "onKeydown": onKeydown
         }), {
           ...slots,
@@ -14256,8 +14317,6 @@
         default: '$vuetify.fileInput.counter'
       },
       multiple: Boolean,
-      hint: String,
-      persistentHint: Boolean,
       showSize: {
         type: [Boolean, Number],
         default: false,
@@ -14282,6 +14341,7 @@
     emits: {
       'click:control': e => true,
       'mousedown:control': e => true,
+      'update:focused': focused => true,
       'update:modelValue': files => true
     },
     setup(props, _ref) {
@@ -14294,6 +14354,11 @@
         t
       } = useLocale();
       const model = useProxiedModel(props, 'modelValue');
+      const {
+        isFocused,
+        focus,
+        blur
+      } = useFocus(props);
       const base = vue.computed(() => typeof props.showSize !== 'boolean' ? props.showSize : undefined);
       const totalBytes = vue.computed(() => (model.value ?? []).reduce((bytes, _ref2) => {
         let {
@@ -14315,21 +14380,14 @@
       });
       const vInputRef = vue.ref();
       const vFieldRef = vue.ref();
-      const isFocused = vue.ref(false);
       const inputRef = vue.ref();
-      const messages = vue.computed(() => {
-        return props.messages.length ? props.messages : props.persistentHint ? props.hint : '';
-      });
       function onFocus() {
         if (inputRef.value !== document.activeElement) {
           inputRef.value?.focus();
         }
-        if (!isFocused.value) {
-          isFocused.value = true;
-        }
+        if (!isFocused.value) focus();
       }
       function onClickPrepend(e) {
-        callEvent(props['onClick:prepend'], e);
         onControlClick(e);
       }
       function onControlMousedown(e) {
@@ -14360,18 +14418,16 @@
         const [{
           modelValue: _,
           ...inputProps
-        }] = filterInputProps(props);
+        }] = VInput.filterProps(props);
         const [fieldProps] = filterFieldProps(props);
         return vue.createVNode(VInput, vue.mergeProps({
           "ref": vInputRef,
           "modelValue": model.value,
           "onUpdate:modelValue": $event => model.value = $event,
           "class": "v-file-input",
-          "onClick:prepend": onClickPrepend,
-          "onClick:append": props['onClick:append']
+          "onClick:prepend": onClickPrepend
         }, rootAttrs, inputProps, {
-          "focused": isFocused.value,
-          "messages": messages.value
+          "focused": isFocused.value
         }), {
           ...slots,
           default: _ref3 => {
@@ -14423,7 +14479,7 @@
                     model.value = [...(target.files ?? [])];
                   },
                   "onFocus": onFocus,
-                  "onBlur": () => isFocused.value = false
+                  "onBlur": blur
                 }, slotProps, inputAttrs), null), vue.createVNode("div", {
                   "class": fieldClass
                 }, [!!model.value?.length && (slots.selection ? slots.selection({
@@ -16118,7 +16174,7 @@
       const model = useProxiedModel(props, 'modelValue');
       useRender(() => {
         const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
-        const [inputProps, _1] = filterInputProps(props);
+        const [inputProps, _1] = VInput.filterProps(props);
         const [controlProps, _2] = VSelectionControl.filterProps(props);
         const label = slots.label ? slots.label({
           label: props.label,
@@ -16246,7 +16302,7 @@
       const trackStart = vue.computed(() => position(model.value[0]));
       const trackStop = vue.computed(() => position(model.value[1]));
       useRender(() => {
-        const [inputProps, _] = filterInputProps(props);
+        const [inputProps, _] = VInput.filterProps(props);
         const hasPrepend = !!(props.label || slots.label || slots.prepend);
         return vue.createVNode(VInput, vue.mergeProps({
           "class": ['v-slider', 'v-range-slider', {
@@ -17120,10 +17176,12 @@
       }
       useRender(() => {
         const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
-        const [inputProps, _1] = filterInputProps(props);
+        const [inputProps, _1] = VInput.filterProps(props);
         const [controlProps, _2] = VSelectionControl.filterProps(props);
         const control = vue.ref();
-        function onClick() {
+        function onClick(e) {
+          e.stopPropagation();
+          e.preventDefault();
           control.value?.input?.click();
         }
         return vue.createVNode(VInput, vue.mergeProps({
@@ -17485,8 +17543,6 @@
       autofocus: Boolean,
       counter: [Boolean, Number, String],
       counterValue: Function,
-      hint: String,
-      persistentHint: Boolean,
       prefix: String,
       placeholder: String,
       persistentPlaceholder: Boolean,
@@ -17541,9 +17597,6 @@
       const controlHeight = vue.ref('');
       const textareaRef = vue.ref();
       const isActive = vue.computed(() => isFocused.value || props.persistentPlaceholder);
-      const messages = vue.computed(() => {
-        return props.messages.length ? props.messages : isFocused.value || props.persistentHint ? props.hint : '';
-      });
       function onFocus() {
         if (textareaRef.value !== document.activeElement) {
           textareaRef.value?.focus();
@@ -17615,7 +17668,7 @@
         const [{
           modelValue: _,
           ...inputProps
-        }] = filterInputProps(props);
+        }] = VInput.filterProps(props);
         const [fieldProps] = filterFieldProps(props);
         return vue.createVNode(VInput, vue.mergeProps({
           "ref": vInputRef,
@@ -17629,12 +17682,9 @@
             'v-textarea--auto-grow': props.autoGrow,
             'v-textarea--no-resize': props.noResize || props.autoGrow,
             'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant)
-          }],
-          "onClick:prepend": props['onClick:prepend'],
-          "onClick:append": props['onClick:append']
+          }]
         }, rootAttrs, inputProps, {
-          "focused": isFocused.value,
-          "messages": messages.value
+          "focused": isFocused.value
         }), {
           ...slots,
           default: _ref2 => {
@@ -18407,7 +18457,7 @@
       locale
     };
   }
-  const version$1 = "3.1.14";
+  const version$1 = "3.1.15";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -18427,7 +18477,7 @@
       ...options
     });
   };
-  const version = "3.1.14";
+  const version = "3.1.15";
   createVuetify.version = version;
 
   exports.components = components;