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

package/dist/vuetify-labs.cjs

@@ -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.
 */
@@ -13747,6 +13747,7 @@
     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 = {};
@@ -13755,6 +13756,14 @@
       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);
@@ -13780,6 +13789,10 @@
         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: {
@@ -15040,9 +15053,13 @@
     }
   });
 
+  const makeVCardActionsProps = propsFactory({
+    ...makeComponentProps(),
+    ...makeTagProps()
+  }, 'VCardActions');
   const VCardActions = genericComponent()({
     name: 'VCardActions',
-    props: makeComponentProps(),
+    props: makeVCardActionsProps(),
     setup(props, _ref) {
       let {
         slots
@@ -15053,10 +15070,10 @@
           variant: 'text'
         }
       });
-      useRender(() => vue.createElementVNode("div", {
+      useRender(() => vue.createVNode(props.tag, {
         "class": vue.normalizeClass(['v-card-actions', props.class]),
         "style": vue.normalizeStyle(props.style)
-      }, [slots.default?.()]));
+      }, slots));
       return {};
     }
   });
@@ -15100,7 +15117,8 @@
       default: undefined
     },
     ...makeComponentProps(),
-    ...makeDensityProps()
+    ...makeDensityProps(),
+    ...makeTagProps()
   }, 'VCardItem');
   const VCardItem = genericComponent()({
     name: 'VCardItem',
@@ -15116,68 +15134,70 @@
         const hasAppend = !!(hasAppendMedia || slots.append);
         const hasTitle = !!(props.title != null || slots.title);
         const hasSubtitle = !!(props.subtitle != null || slots.subtitle);
-        return vue.createElementVNode("div", {
+        return vue.createVNode(props.tag, {
           "class": vue.normalizeClass(['v-card-item', props.class]),
           "style": vue.normalizeStyle(props.style)
-        }, [hasPrepend && vue.createElementVNode("div", {
-          "key": "prepend",
-          "class": "v-card-item__prepend"
-        }, [!slots.prepend ? vue.createElementVNode(vue.Fragment, null, [props.prependAvatar && vue.createVNode(VAvatar, {
-          "key": "prepend-avatar",
-          "density": props.density,
-          "image": props.prependAvatar
-        }, null), props.prependIcon && vue.createVNode(VIcon, {
-          "key": "prepend-icon",
-          "density": props.density,
-          "icon": props.prependIcon
-        }, null)]) : vue.createVNode(VDefaultsProvider, {
-          "key": "prepend-defaults",
-          "disabled": !hasPrependMedia,
-          "defaults": {
-            VAvatar: {
-              density: props.density,
-              image: props.prependAvatar
-            },
-            VIcon: {
-              density: props.density,
-              icon: props.prependIcon
-            }
-          }
-        }, slots.prepend)]), vue.createElementVNode("div", {
-          "class": "v-card-item__content"
-        }, [hasTitle && vue.createVNode(VCardTitle, {
-          "key": "title"
         }, {
-          default: () => [slots.title?.() ?? vue.toDisplayString(props.title)]
-        }), hasSubtitle && vue.createVNode(VCardSubtitle, {
-          "key": "subtitle"
-        }, {
-          default: () => [slots.subtitle?.() ?? vue.toDisplayString(props.subtitle)]
-        }), slots.default?.()]), hasAppend && vue.createElementVNode("div", {
-          "key": "append",
-          "class": "v-card-item__append"
-        }, [!slots.append ? vue.createElementVNode(vue.Fragment, null, [props.appendIcon && vue.createVNode(VIcon, {
-          "key": "append-icon",
-          "density": props.density,
-          "icon": props.appendIcon
-        }, null), props.appendAvatar && vue.createVNode(VAvatar, {
-          "key": "append-avatar",
-          "density": props.density,
-          "image": props.appendAvatar
-        }, null)]) : vue.createVNode(VDefaultsProvider, {
-          "key": "append-defaults",
-          "disabled": !hasAppendMedia,
-          "defaults": {
-            VAvatar: {
-              density: props.density,
-              image: props.appendAvatar
-            },
-            VIcon: {
-              density: props.density,
-              icon: props.appendIcon
+          default: () => [hasPrepend && vue.createElementVNode("div", {
+            "key": "prepend",
+            "class": "v-card-item__prepend"
+          }, [!slots.prepend ? vue.createElementVNode(vue.Fragment, null, [props.prependAvatar && vue.createVNode(VAvatar, {
+            "key": "prepend-avatar",
+            "density": props.density,
+            "image": props.prependAvatar
+          }, null), props.prependIcon && vue.createVNode(VIcon, {
+            "key": "prepend-icon",
+            "density": props.density,
+            "icon": props.prependIcon
+          }, null)]) : vue.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)]), vue.createElementVNode("div", {
+            "class": "v-card-item__content"
+          }, [hasTitle && vue.createVNode(VCardTitle, {
+            "key": "title"
+          }, {
+            default: () => [slots.title?.() ?? vue.toDisplayString(props.title)]
+          }), hasSubtitle && vue.createVNode(VCardSubtitle, {
+            "key": "subtitle"
+          }, {
+            default: () => [slots.subtitle?.() ?? vue.toDisplayString(props.subtitle)]
+          }), slots.default?.()]), hasAppend && vue.createElementVNode("div", {
+            "key": "append",
+            "class": "v-card-item__append"
+          }, [!slots.append ? vue.createElementVNode(vue.Fragment, null, [props.appendIcon && vue.createVNode(VIcon, {
+            "key": "append-icon",
+            "density": props.density,
+            "icon": props.appendIcon
+          }, null), props.appendAvatar && vue.createVNode(VAvatar, {
+            "key": "append-avatar",
+            "density": props.density,
+            "image": props.appendAvatar
+          }, null)]) : vue.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 {};
     }
@@ -33009,59 +33029,140 @@
         emit
       } = _ref;
       const vTextFieldRef = vue.ref();
-      const selection = vue.shallowRef(0);
-      const lazySelection = vue.shallowRef(0);
+      const inputAction = vue.shallowRef();
+      const caretPosition = vue.shallowRef(0);
       const mask = useMask(props);
       const returnMaskedValue = vue.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 = vue.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;
+      }
       vue.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 vue.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 vue.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 vue.nextTick();
       }
       useRender(() => {
         const textFieldProps = VTextField.filterProps(props);
@@ -33069,7 +33170,10 @@
           "modelValue": model.value,
           "onUpdate:modelValue": $event => model.value = $event,
           "ref": vTextFieldRef,
-          "validationValue": validationValue.value
+          "validationValue": validationValue.value,
+          "onCut": onCut,
+          "onPaste": onPaste,
+          "onKeydown": onKeyDown
         }), {
           ...slots
         });
@@ -35695,7 +35799,7 @@
       };
     });
   }
-  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
@@ -35993,7 +36097,7 @@
 
   /* 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 */