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

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.5-dev.2025-08-23
+* 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: {
@@ -33012,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);
@@ -33072,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
       });
@@ -35698,7 +35795,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.9.5-dev.2025-08-23";
+const version$1 = "3.9.5-dev.2025-08-24";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -35996,7 +36093,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.9.5-dev.2025-08-23";
+const version = "3.9.5-dev.2025-08-24";
 
 /* eslint-disable local-rules/sort-imports */