@vuetify/nightly 3.9.5-dev.2025-08-12 → 3.9.5-dev.2025-08-24

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.5-dev.2025-08-12
+* Vuetify v3.9.5-dev.2025-08-24
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -13743,6 +13743,7 @@ function filterItems(items, query, options) {
   const keys = options?.filterKeys ? wrapInArray(options.filterKeys) : false;
   const customFiltersLength = Object.keys(options?.customKeyFilter ?? {}).length;
   if (!items?.length) return array;
+  let lookAheadItem = null;
   loop: for (let i = 0; i < items.length; i++) {
     const [item, transformed = item] = wrapInArray(items[i]);
     const customMatches = {};
@@ -13751,6 +13752,14 @@ function filterItems(items, query, options) {
     if ((query || customFiltersLength > 0) && !options?.noFilter) {
       if (typeof item === 'object') {
         if (item.type === 'divider' || item.type === 'subheader') {
+          if (lookAheadItem?.type === 'divider' && item.type === 'subheader') {
+            array.push(lookAheadItem); // divider before subheader
+          }
+          lookAheadItem = {
+            index: i,
+            matches: {},
+            type: item.type
+          };
           continue;
         }
         const filterKeys = keys || Object.keys(transformed);
@@ -13776,6 +13785,10 @@ function filterItems(items, query, options) {
       if (options?.filterMode === 'union' && customMatchesLength !== customFiltersLength && !defaultMatchesLength) continue;
       if (options?.filterMode === 'intersection' && (customMatchesLength !== customFiltersLength || !defaultMatchesLength)) continue;
     }
+    if (lookAheadItem) {
+      array.push(lookAheadItem);
+      lookAheadItem = null;
+    }
     array.push({
       index: i,
       matches: {
@@ -15036,9 +15049,13 @@ const VBreadcrumbs = genericComponent()({
   }
 });
 
+const makeVCardActionsProps = propsFactory({
+  ...makeComponentProps(),
+  ...makeTagProps()
+}, 'VCardActions');
 const VCardActions = genericComponent()({
   name: 'VCardActions',
-  props: makeComponentProps(),
+  props: makeVCardActionsProps(),
   setup(props, _ref) {
     let {
       slots
@@ -15049,10 +15066,10 @@ const VCardActions = genericComponent()({
         variant: 'text'
       }
     });
-    useRender(() => createElementVNode("div", {
+    useRender(() => createVNode(props.tag, {
       "class": normalizeClass(['v-card-actions', props.class]),
       "style": normalizeStyle(props.style)
-    }, [slots.default?.()]));
+    }, slots));
     return {};
   }
 });
@@ -15096,7 +15113,8 @@ const makeCardItemProps = propsFactory({
     default: undefined
   },
   ...makeComponentProps(),
-  ...makeDensityProps()
+  ...makeDensityProps(),
+  ...makeTagProps()
 }, 'VCardItem');
 const VCardItem = genericComponent()({
   name: 'VCardItem',
@@ -15112,68 +15130,70 @@ const VCardItem = genericComponent()({
       const hasAppend = !!(hasAppendMedia || slots.append);
       const hasTitle = !!(props.title != null || slots.title);
       const hasSubtitle = !!(props.subtitle != null || slots.subtitle);
-      return createElementVNode("div", {
+      return createVNode(props.tag, {
         "class": normalizeClass(['v-card-item', props.class]),
         "style": normalizeStyle(props.style)
-      }, [hasPrepend && createElementVNode("div", {
-        "key": "prepend",
-        "class": "v-card-item__prepend"
-      }, [!slots.prepend ? createElementVNode(Fragment, null, [props.prependAvatar && createVNode(VAvatar, {
-        "key": "prepend-avatar",
-        "density": props.density,
-        "image": props.prependAvatar
-      }, null), props.prependIcon && createVNode(VIcon, {
-        "key": "prepend-icon",
-        "density": props.density,
-        "icon": props.prependIcon
-      }, null)]) : createVNode(VDefaultsProvider, {
-        "key": "prepend-defaults",
-        "disabled": !hasPrependMedia,
-        "defaults": {
-          VAvatar: {
-            density: props.density,
-            image: props.prependAvatar
-          },
-          VIcon: {
-            density: props.density,
-            icon: props.prependIcon
-          }
-        }
-      }, slots.prepend)]), createElementVNode("div", {
-        "class": "v-card-item__content"
-      }, [hasTitle && createVNode(VCardTitle, {
-        "key": "title"
       }, {
-        default: () => [slots.title?.() ?? toDisplayString(props.title)]
-      }), hasSubtitle && createVNode(VCardSubtitle, {
-        "key": "subtitle"
-      }, {
-        default: () => [slots.subtitle?.() ?? toDisplayString(props.subtitle)]
-      }), slots.default?.()]), hasAppend && createElementVNode("div", {
-        "key": "append",
-        "class": "v-card-item__append"
-      }, [!slots.append ? createElementVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
-        "key": "append-icon",
-        "density": props.density,
-        "icon": props.appendIcon
-      }, null), props.appendAvatar && createVNode(VAvatar, {
-        "key": "append-avatar",
-        "density": props.density,
-        "image": props.appendAvatar
-      }, null)]) : createVNode(VDefaultsProvider, {
-        "key": "append-defaults",
-        "disabled": !hasAppendMedia,
-        "defaults": {
-          VAvatar: {
-            density: props.density,
-            image: props.appendAvatar
-          },
-          VIcon: {
-            density: props.density,
-            icon: props.appendIcon
+        default: () => [hasPrepend && createElementVNode("div", {
+          "key": "prepend",
+          "class": "v-card-item__prepend"
+        }, [!slots.prepend ? createElementVNode(Fragment, null, [props.prependAvatar && createVNode(VAvatar, {
+          "key": "prepend-avatar",
+          "density": props.density,
+          "image": props.prependAvatar
+        }, null), props.prependIcon && createVNode(VIcon, {
+          "key": "prepend-icon",
+          "density": props.density,
+          "icon": props.prependIcon
+        }, null)]) : createVNode(VDefaultsProvider, {
+          "key": "prepend-defaults",
+          "disabled": !hasPrependMedia,
+          "defaults": {
+            VAvatar: {
+              density: props.density,
+              image: props.prependAvatar
+            },
+            VIcon: {
+              density: props.density,
+              icon: props.prependIcon
+            }
           }
-        }
-      }, slots.append)])]);
+        }, slots.prepend)]), createElementVNode("div", {
+          "class": "v-card-item__content"
+        }, [hasTitle && createVNode(VCardTitle, {
+          "key": "title"
+        }, {
+          default: () => [slots.title?.() ?? toDisplayString(props.title)]
+        }), hasSubtitle && createVNode(VCardSubtitle, {
+          "key": "subtitle"
+        }, {
+          default: () => [slots.subtitle?.() ?? toDisplayString(props.subtitle)]
+        }), slots.default?.()]), hasAppend && createElementVNode("div", {
+          "key": "append",
+          "class": "v-card-item__append"
+        }, [!slots.append ? createElementVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
+          "key": "append-icon",
+          "density": props.density,
+          "icon": props.appendIcon
+        }, null), props.appendAvatar && createVNode(VAvatar, {
+          "key": "append-avatar",
+          "density": props.density,
+          "image": props.appendAvatar
+        }, null)]) : createVNode(VDefaultsProvider, {
+          "key": "append-defaults",
+          "disabled": !hasAppendMedia,
+          "defaults": {
+            VAvatar: {
+              density: props.density,
+              image: props.appendAvatar
+            },
+            VIcon: {
+              density: props.density,
+              icon: props.appendIcon
+            }
+          }
+        }, slots.append)])]
+      });
     });
     return {};
   }
@@ -33005,59 +33025,140 @@ const VMaskInput = genericComponent()({
       emit
     } = _ref;
     const vTextFieldRef = ref();
-    const selection = shallowRef(0);
-    const lazySelection = shallowRef(0);
+    const inputAction = shallowRef();
+    const caretPosition = shallowRef(0);
     const mask = useMask(props);
     const returnMaskedValue = computed(() => props.mask && props.returnMaskedValue);
     const model = useProxiedModel(props, 'modelValue', undefined,
     // Always display masked value in input when mask is applied
     val => props.mask ? mask.mask(mask.unmask(val)) : val, val => {
       if (props.mask) {
-        const valueBeforeChange = mask.unmask(model.value);
+        const valueWithoutDelimiters = removeMaskDelimiters(val);
+
         // E.g. mask is #-# and the input value is '2-23'
         // model-value should be enforced to '2-2'
-        const enforcedMaskedValue = mask.mask(mask.unmask(val));
-        const newUnmaskedValue = mask.unmask(enforcedMaskedValue);
-        if (newUnmaskedValue === valueBeforeChange) {
-          vTextFieldRef.value.value = enforcedMaskedValue;
-        }
-        val = newUnmaskedValue;
-        updateRange();
-        return returnMaskedValue.value ? mask.mask(val) : val;
+        const newMaskedValue = mask.mask(valueWithoutDelimiters);
+        const newUnmaskedValue = mask.unmask(newMaskedValue);
+        const newCaretPosition = getNewCaretPosition({
+          oldValue: model.value,
+          newValue: newMaskedValue,
+          oldCaret: caretPosition.value
+        });
+        vTextFieldRef.value.value = newMaskedValue;
+        vTextFieldRef.value.setSelectionRange(newCaretPosition, newCaretPosition);
+        return returnMaskedValue.value ? mask.mask(newUnmaskedValue) : newUnmaskedValue;
       }
       return val;
     });
     const validationValue = toRef(() => returnMaskedValue.value ? model.value : mask.unmask(model.value));
+    function removeMaskDelimiters(val) {
+      return val.split('').filter(ch => !isMaskDelimiter(ch)).join('');
+    }
+    function getNewCaretPosition(_ref2) {
+      let {
+        oldValue,
+        newValue,
+        oldCaret
+      } = _ref2;
+      if (!newValue) return 0;
+      if (!oldValue) return newValue.length;
+      let newCaret;
+      if (inputAction.value === 'Backspace') {
+        newCaret = oldCaret - 1;
+        while (newCaret > 0 && isMaskDelimiter(newValue[newCaret - 1])) newCaret--;
+      } else if (inputAction.value === 'Delete') {
+        newCaret = oldCaret;
+      } else {
+        // insertion
+        newCaret = oldCaret + 1;
+        while (isMaskDelimiter(newValue[newCaret])) newCaret++;
+        if (isMaskDelimiter(newValue[oldCaret])) newCaret++;
+      }
+      return newCaret;
+    }
     onBeforeMount(() => {
       if (props.returnMaskedValue) {
         emit('update:modelValue', model.value);
       }
     });
-    function setCaretPosition(newSelection) {
-      selection.value = newSelection;
-      vTextFieldRef.value && vTextFieldRef.value.setSelectionRange(selection.value, selection.value);
+    function onKeyDown(e) {
+      if (e.metaKey) return;
+      const inputElement = e.target;
+      caretPosition.value = inputElement.selectionStart || 0;
+      inputAction.value = e.key;
+      const hasSelection = inputElement.selectionStart !== inputElement.selectionEnd;
+      if (e.key === 'Backspace' && hasSelection) {
+        e.preventDefault();
+        deleteSelection(e);
+      }
+    }
+    async function onCut(e) {
+      e.preventDefault();
+      copySelectionToClipboard(e);
+      deleteSelection(e);
     }
-    function resetSelections() {
-      if (!vTextFieldRef.value?.selectionEnd) return;
-      selection.value = vTextFieldRef.value.selectionEnd;
-      lazySelection.value = 0;
-      for (let index = 0; index < selection.value; index++) {
-        isMaskDelimiter(vTextFieldRef.value.value[index]) || lazySelection.value++;
+    async function onPaste(e) {
+      e.preventDefault();
+      const inputElement = e.target;
+      const pastedString = removeMaskDelimiters(e.clipboardData?.getData('text') || '');
+      if (!pastedString) return;
+      const pastedCharacters = [...pastedString];
+      const hasSelection = inputElement.selectionStart !== inputElement.selectionEnd;
+      if (hasSelection) {
+        replaceSelection(inputElement, pastedCharacters);
+      } else {
+        insertCharacters(inputElement, pastedCharacters);
       }
     }
-    function updateRange() {
-      if (!vTextFieldRef.value) return;
-      resetSelections();
-      let selection = 0;
-      const newValue = vTextFieldRef.value.value;
-      if (newValue) {
-        for (let index = 0; index < newValue.length; index++) {
-          if (lazySelection.value <= 0) break;
-          isMaskDelimiter(newValue[index]) || lazySelection.value--;
-          selection++;
-        }
+    function copySelectionToClipboard(e) {
+      const inputElement = e.target;
+      const start = inputElement.selectionStart || 0;
+      const end = inputElement.selectionEnd || 0;
+      const selectedText = inputElement.value.substring(start, end);
+      navigator.clipboard.writeText(selectedText);
+    }
+    async function deleteSelection(e) {
+      const inputElement = e.target;
+      const curStart = inputElement.selectionStart || 0;
+      caretPosition.value = inputElement.selectionEnd || 0;
+      while (caretPosition.value > curStart) {
+        const success = await simulateBackspace(inputElement);
+        if (!success) break;
+      }
+    }
+    async function simulateBackspace(inputElement) {
+      inputAction.value = 'Backspace';
+      model.value = inputElement.value.slice(0, caretPosition.value - 1) + inputElement.value.slice(caretPosition.value);
+      inputAction.value = '';
+      if (caretPosition.value === inputElement.selectionEnd) return false;
+      caretPosition.value = inputElement.selectionEnd || 0;
+      await nextTick();
+      return true;
+    }
+    async function insertCharacters(inputElement, pastedCharacters) {
+      for (let i = 0; i < pastedCharacters.length; i++) {
+        await insertCharacter(inputElement, pastedCharacters[i]);
       }
-      setCaretPosition(selection);
+    }
+    async function insertCharacter(inputElement, character) {
+      caretPosition.value = inputElement.selectionEnd || 0;
+      model.value = inputElement.value.slice(0, caretPosition.value) + character + inputElement.value.slice(caretPosition.value);
+      await nextTick();
+    }
+    async function replaceSelection(inputElement, pastedCharacters) {
+      caretPosition.value = inputElement.selectionStart || 0;
+      for (let i = 0; i < pastedCharacters.length; i++) {
+        await replaceCharacter(caretPosition.value, pastedCharacters[i]);
+        caretPosition.value++;
+      }
+    }
+    async function replaceCharacter(index, character) {
+      let targetIndex = index;
+
+      // Find next non-delimiter position
+      while (targetIndex < model.value.length && isMaskDelimiter(model.value[targetIndex])) targetIndex++;
+      model.value = model.value.slice(0, targetIndex) + character + model.value.slice(targetIndex + 1);
+      await nextTick();
     }
     useRender(() => {
       const textFieldProps = VTextField.filterProps(props);
@@ -33065,7 +33166,10 @@ const VMaskInput = genericComponent()({
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
         "ref": vTextFieldRef,
-        "validationValue": validationValue.value
+        "validationValue": validationValue.value,
+        "onCut": onCut,
+        "onPaste": onPaste,
+        "onKeydown": onKeyDown
       }), {
         ...slots
       });
@@ -35691,7 +35795,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.9.5-dev.2025-08-12";
+const version$1 = "3.9.5-dev.2025-08-24";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -35989,7 +36093,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.9.5-dev.2025-08-12";
+const version = "3.9.5-dev.2025-08-24";
 
 /* eslint-disable local-rules/sort-imports */