@vuetify/nightly 3.8.9-dev.2025-06-11 → 3.8.9-dev.2025-06-12

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.9-dev.2025-06-11
+* Vuetify v3.8.9-dev.2025-06-12
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -30490,6 +30490,251 @@ const VIconBtn = genericComponent()({
   }
 });
 
+// Utilities
+
+// Types
+
+const makeMaskProps = propsFactory({
+  mask: [String, Object],
+  returnMaskedValue: Boolean
+}, 'mask');
+const defaultDelimiters = /[-!$%^&*()_+|~=`{}[\]:";'<>?,./\\ ]/;
+const presets = {
+  'credit-card': '#### - #### - #### - ####',
+  date: '##/##/####',
+  'date-time': '##/##/#### ##:##',
+  'iso-date': '####-##-##',
+  'iso-date-time': '####-##-## ##:##',
+  phone: '(###) ### - ####',
+  social: '###-##-####',
+  time: '##:##',
+  'time-with-seconds': '##:##:##'
+};
+function isMaskDelimiter(char) {
+  return char ? defaultDelimiters.test(char) : false;
+}
+const defaultTokens = {
+  '#': {
+    pattern: /[0-9]/
+  },
+  A: {
+    pattern: /[A-Z]/i,
+    convert: v => v.toUpperCase()
+  },
+  a: {
+    pattern: /[a-z]/i,
+    convert: v => v.toLowerCase()
+  },
+  N: {
+    pattern: /[0-9A-Z]/i,
+    convert: v => v.toUpperCase()
+  },
+  n: {
+    pattern: /[0-9a-z]/i,
+    convert: v => v.toLowerCase()
+  },
+  X: {
+    pattern: defaultDelimiters
+  }
+};
+function useMask(props, inputRef) {
+  const mask = computed(() => {
+    if (typeof props.mask === 'string') {
+      if (props.mask in presets) return presets[props.mask];
+      return props.mask;
+    }
+    return props.mask?.mask ?? '';
+  });
+  const tokens = computed(() => {
+    return {
+      ...defaultTokens,
+      ...(isObject(props.mask) ? props.mask.tokens : null)
+    };
+  });
+  const selection = shallowRef(0);
+  const lazySelection = shallowRef(0);
+  function isMask(char) {
+    return char in tokens.value;
+  }
+  function maskValidates(mask, char) {
+    if (char == null || !isMask(mask)) return false;
+    const item = tokens.value[mask];
+    if (item.pattern) return item.pattern.test(char);
+    return item.test(char);
+  }
+  function convert(mask, char) {
+    const item = tokens.value[mask];
+    return item.convert ? item.convert(char) : char;
+  }
+  function maskText(text) {
+    const trimmedText = text?.trim().replace(/\s+/g, ' ');
+    if (trimmedText == null) return '';
+    if (!mask.value.length || !trimmedText.length) return trimmedText;
+    let textIndex = 0;
+    let maskIndex = 0;
+    let newText = '';
+    while (maskIndex < mask.value.length) {
+      const mchar = mask.value[maskIndex];
+      const tchar = trimmedText[textIndex];
+
+      // Escaped character in mask, the next mask character is inserted
+      if (mchar === '\\') {
+        newText += mask.value[maskIndex + 1];
+        maskIndex += 2;
+        continue;
+      }
+      if (!isMask(mchar)) {
+        newText += mchar;
+        if (tchar === mchar) {
+          textIndex++;
+        }
+      } else if (maskValidates(mchar, tchar)) {
+        newText += convert(mchar, tchar);
+        textIndex++;
+      } else {
+        break;
+      }
+      maskIndex++;
+    }
+    return newText;
+  }
+  function unmaskText(text) {
+    if (text == null) return null;
+    if (!mask.value.length || !text.length) return text;
+    let textIndex = 0;
+    let maskIndex = 0;
+    let newText = '';
+    while (true) {
+      const mchar = mask.value[maskIndex];
+      const tchar = text[textIndex];
+      if (tchar == null) break;
+      if (mchar == null) {
+        newText += tchar;
+        textIndex++;
+        continue;
+      }
+
+      // Escaped character in mask, skip the next input character
+      if (mchar === '\\') {
+        if (tchar === mask.value[maskIndex + 1]) {
+          textIndex++;
+        }
+        maskIndex += 2;
+        continue;
+      }
+      if (maskValidates(mchar, tchar)) {
+        // masked char
+        newText += tchar;
+        textIndex++;
+        maskIndex++;
+        continue;
+      } else if (mchar !== tchar) {
+        // input doesn't match mask, skip forward until it does
+        while (true) {
+          const mchar = mask.value[maskIndex++];
+          if (mchar == null || maskValidates(mchar, tchar)) break;
+        }
+        continue;
+      }
+      textIndex++;
+      maskIndex++;
+    }
+    return newText;
+  }
+  function setCaretPosition(newSelection) {
+    selection.value = newSelection;
+    inputRef.value && inputRef.value.setSelectionRange(selection.value, selection.value);
+  }
+  function resetSelections() {
+    if (!inputRef.value?.selectionEnd) return;
+    selection.value = inputRef.value.selectionEnd;
+    lazySelection.value = 0;
+    for (let index = 0; index < selection.value; index++) {
+      isMaskDelimiter(inputRef.value.value[index]) || lazySelection.value++;
+    }
+  }
+  function updateRange() {
+    if (!inputRef.value) return;
+    resetSelections();
+    let selection = 0;
+    const newValue = inputRef.value.value;
+    if (newValue) {
+      for (let index = 0; index < newValue.length; index++) {
+        if (lazySelection.value <= 0) break;
+        isMaskDelimiter(newValue[index]) || lazySelection.value--;
+        selection++;
+      }
+    }
+    setCaretPosition(selection);
+  }
+  return {
+    updateRange,
+    maskText,
+    unmaskText
+  };
+}
+
+// Types
+
+const makeVMaskInputProps = propsFactory({
+  ...makeVTextFieldProps(),
+  ...makeMaskProps()
+}, 'VMaskInput');
+const VMaskInput = genericComponent()({
+  name: 'VMaskInput',
+  props: makeVMaskInputProps(),
+  emits: {
+    'update:modelValue': val => true
+  },
+  setup(props, _ref) {
+    let {
+      slots,
+      emit
+    } = _ref;
+    const vTextFieldRef = ref();
+    const {
+      maskText,
+      updateRange,
+      unmaskText
+    } = useMask(props, vTextFieldRef);
+    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 ? maskText(unmaskText(val)) : val, val => {
+      if (props.mask) {
+        const valueBeforeChange = unmaskText(model.value);
+        // E.g. mask is #-# and the input value is '2-23'
+        // model-value should be enforced to '2-2'
+        const enforcedMaskedValue = maskText(unmaskText(val));
+        const newUnmaskedValue = unmaskText(enforcedMaskedValue);
+        if (newUnmaskedValue === valueBeforeChange) {
+          vTextFieldRef.value.value = enforcedMaskedValue;
+        }
+        val = newUnmaskedValue;
+        updateRange();
+        return returnMaskedValue.value ? maskText(val) : val;
+      }
+      return val;
+    });
+    onBeforeMount(() => {
+      if (props.returnMaskedValue) {
+        emit('update:modelValue', model.value);
+      }
+    });
+    useRender(() => {
+      const textFieldProps = VTextField.filterProps(props);
+      return createVNode(VTextField, mergeProps(textFieldProps, {
+        "modelValue": model.value,
+        "onUpdate:modelValue": $event => model.value = $event,
+        "ref": vTextFieldRef
+      }), {
+        ...slots
+      });
+    });
+    return forwardRefs({}, vTextFieldRef);
+  }
+});
+
 // Types
 
 const makeVStepperVerticalActionsProps = propsFactory({
@@ -31995,6 +32240,7 @@ var components = /*#__PURE__*/Object.freeze({
   VListSubheader: VListSubheader,
   VLocaleProvider: VLocaleProvider,
   VMain: VMain,
+  VMaskInput: VMaskInput,
   VMenu: VMenu,
   VMessages: VMessages,
   VNavigationDrawer: VNavigationDrawer,
@@ -32392,7 +32638,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.8.9-dev.2025-06-11";
+const version$1 = "3.8.9-dev.2025-06-12";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -32690,7 +32936,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.8.9-dev.2025-06-11";
+const version = "3.8.9-dev.2025-06-12";
 
 /* eslint-disable local-rules/sort-imports */