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

package/dist/vuetify-labs.cjs

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.9-dev.2025-06-11
+* Vuetify v3.8.9-dev.2025-06-13
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -592,18 +592,23 @@
   function isPrimitive(value) {
     return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint';
   }
-  function extractNumber(text, decimalDigitsLimit) {
-    const cleanText = text.split('').filter(x => /[\d\-.]/.test(x)).filter((x, i, all) => i === 0 && /[-]/.test(x) ||
+  function escapeForRegex(sign) {
+    return '\\^$*+?.()|{}[]'.includes(sign) ? `\\${sign}` : sign;
+  }
+  function extractNumber(text, decimalDigitsLimit, decimalSeparator) {
+    const onlyValidCharacters = new RegExp(`[\\d\\-${escapeForRegex(decimalSeparator)}]`);
+    const cleanText = text.split('').filter(x => onlyValidCharacters.test(x)).filter((x, i, all) => i === 0 && /[-]/.test(x) ||
     // sign allowed at the start
-    x === '.' && i === all.indexOf('.') ||
+    x === decimalSeparator && i === all.indexOf(x) ||
     // decimal separator allowed only once
     /\d/.test(x)).join('');
     if (decimalDigitsLimit === 0) {
-      return cleanText.split('.')[0];
+      return cleanText.split(decimalSeparator)[0];
     }
-    if (decimalDigitsLimit !== null && /\.\d/.test(cleanText)) {
-      const parts = cleanText.split('.');
-      return [parts[0], parts[1].substring(0, decimalDigitsLimit)].join('.');
+    const decimalPart = new RegExp(`${escapeForRegex(decimalSeparator)}\\d`);
+    if (decimalDigitsLimit !== null && decimalPart.test(cleanText)) {
+      const parts = cleanText.split(decimalSeparator);
+      return [parts[0], parts[1].substring(0, decimalDigitsLimit)].join(decimalSeparator);
     }
     return cleanText;
   }
@@ -2179,6 +2184,10 @@
       return numberFormat.format(value);
     };
   }
+  function inferDecimalSeparator(current, fallback) {
+    const format = createNumberFunction(current, fallback);
+    return format(0.1).includes(',') ? ',' : '.';
+  }
   function useProvided(props, prop, provided) {
     const internal = useProxiedModel(props, prop, props[prop] ?? provided.value);
 
@@ -2201,6 +2210,7 @@
         current,
         fallback,
         messages,
+        decimalSeparator: vue.toRef(() => inferDecimalSeparator(current, fallback)),
         t: createTranslateFunction(current, fallback, messages),
         n: createNumberFunction(current, fallback),
         provide: createProvideFunction({
@@ -2223,6 +2233,7 @@
       current,
       fallback,
       messages,
+      decimalSeparator: vue.toRef(() => options?.decimalSeparator ?? inferDecimalSeparator(current, fallback)),
       t: createTranslateFunction(current, fallback, messages),
       n: createNumberFunction(current, fallback),
       provide: createProvideFunction({
@@ -2387,8 +2398,8 @@
             'activated-opacity': 0.12,
             'pressed-opacity': 0.12,
             'dragged-opacity': 0.08,
-            'theme-kbd': '#212529',
-            'theme-on-kbd': '#FFFFFF',
+            'theme-kbd': '#EEEEEE',
+            'theme-on-kbd': '#000000',
             'theme-code': '#F5F5F5',
             'theme-on-code': '#000000'
           }
@@ -2424,7 +2435,7 @@
             'activated-opacity': 0.12,
             'pressed-opacity': 0.16,
             'dragged-opacity': 0.08,
-            'theme-kbd': '#212529',
+            'theme-kbd': '#424242',
             'theme-on-kbd': '#FFFFFF',
             'theme-code': '#343434',
             'theme-on-code': '#CCCCCC'
@@ -11634,6 +11645,7 @@
     // disableKeys: Boolean,
     id: String,
     submenu: Boolean,
+    disableInitialFocus: Boolean,
     ...omit(makeVOverlayProps({
       closeDelay: 250,
       closeOnContentClick: true,
@@ -11708,7 +11720,7 @@
       vue.watch(isActive, val => {
         if (val) {
           parent?.register();
-          if (IN_BROWSER) {
+          if (IN_BROWSER && !props.disableInitialFocus) {
             document.addEventListener('focusin', onFocusIn, {
               once: true
             });
@@ -23009,7 +23021,9 @@
               "max": maxDate.value,
               "year": year.value,
               "allowedMonths": allowedMonths
-            }), null) : viewMode.value === 'year' ? vue.createVNode(VDatePickerYears, vue.mergeProps({
+            }), {
+              ...pick(slots, ['month'])
+            }) : viewMode.value === 'year' ? vue.createVNode(VDatePickerYears, vue.mergeProps({
               "key": "date-picker-years"
             }, datePickerYearsProps, {
               "modelValue": year.value,
@@ -23017,7 +23031,9 @@
               "min": minDate.value,
               "max": maxDate.value,
               "allowedYears": allowedYears
-            }), null) : vue.createVNode(VDatePickerMonth, vue.mergeProps({
+            }), {
+              ...pick(slots, ['year'])
+            }) : vue.createVNode(VDatePickerMonth, vue.mergeProps({
               "key": "date-picker-month"
             }, datePickerMonthProps, {
               "modelValue": model.value,
@@ -23028,7 +23044,9 @@
               "onUpdate:year": [$event => year.value = $event, onUpdateYear],
               "min": minDate.value,
               "max": maxDate.value
-            }), null)]
+            }), {
+              ...pick(slots, ['day'])
+            })]
           })]),
           actions: slots.actions
         });
@@ -24338,8 +24356,47 @@
     }
   });
 
-  // Styles
-  const VKbd = createSimpleFunctional('v-kbd', 'kbd');
+  const makeVKbdProps = propsFactory({
+    ...makeBorderProps(),
+    ...makeComponentProps(),
+    ...makeRoundedProps(),
+    ...makeTagProps({
+      tag: 'kbd'
+    }),
+    ...makeThemeProps(),
+    ...makeElevationProps(),
+    color: String
+  }, 'VKbd');
+  const VKbd = genericComponent()({
+    name: 'VKbd',
+    props: makeVKbdProps(),
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const {
+        themeClasses
+      } = provideTheme(props);
+      const {
+        borderClasses
+      } = useBorder(props);
+      const {
+        roundedClasses
+      } = useRounded(props);
+      const {
+        backgroundColorClasses,
+        backgroundColorStyles
+      } = useBackgroundColor(() => props.color);
+      const {
+        elevationClasses
+      } = useElevation(props);
+      useRender(() => vue.createVNode(props.tag, {
+        "class": vue.normalizeClass(['v-kbd', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
+        "style": vue.normalizeStyle([backgroundColorStyles.value, props.style])
+      }, slots));
+      return {};
+    }
+  });
 
   const makeVLayoutProps = propsFactory({
     ...makeComponentProps(),
@@ -25181,6 +25238,10 @@
       type: Number,
       default: null
     },
+    decimalSeparator: {
+      type: String,
+      validator: v => !v || v.length === 1
+    },
     ...omit(makeVTextFieldProps(), ['modelValue', 'validationValue'])
   }, 'VNumberInput');
   const VNumberInput = genericComponent()({
@@ -25206,21 +25267,24 @@
       const form = useForm(props);
       const controlsDisabled = vue.computed(() => form.isDisabled.value || form.isReadonly.value);
       const isFocused = vue.shallowRef(props.focused);
+      const {
+        decimalSeparator: decimalSeparatorFromLocale
+      } = useLocale();
+      const decimalSeparator = vue.computed(() => props.decimalSeparator?.[0] || decimalSeparatorFromLocale.value);
       function correctPrecision(val) {
         let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.precision;
-        if (precision == null) {
-          return String(val);
-        }
-        let fixed = val.toFixed(precision);
-        if (isFocused.value) {
-          return Number(fixed).toString(); // trim zeros
+        let trim = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+        const fixed = precision == null ? String(val) : val.toFixed(precision);
+        if (isFocused.value && trim) {
+          return Number(fixed).toString() // trim zeros
+          .replace('.', decimalSeparator.value);
         }
-        if ((props.minFractionDigits ?? precision) < precision) {
-          const trimLimit = precision - props.minFractionDigits;
-          const [baseDigits, fractionDigits] = fixed.split('.');
-          fixed = [baseDigits, fractionDigits.replace(new RegExp(`0{1,${trimLimit}}$`), '')].filter(Boolean).join('.');
+        if (props.minFractionDigits === null || precision !== null && precision < props.minFractionDigits) {
+          return fixed.replace('.', decimalSeparator.value);
         }
-        return fixed;
+        let [baseDigits, fractionDigits] = fixed.split('.');
+        fractionDigits = (fractionDigits ?? '').padEnd(props.minFractionDigits, '0').replace(new RegExp(`(?<=\\d{${props.minFractionDigits}})0`, 'g'), '');
+        return [baseDigits, fractionDigits].filter(Boolean).join(decimalSeparator.value);
       }
       const model = useProxiedModel(props, 'modelValue', null, val => val ?? null, val => val == null ? val ?? null : clamp(Number(val), props.min, props.max));
       const _inputText = vue.shallowRef(null);
@@ -25237,8 +25301,11 @@
           if (val === null || val === '') {
             model.value = null;
             _inputText.value = null;
-          } else if (!isNaN(Number(val)) && Number(val) <= props.max && Number(val) >= props.min) {
-            model.value = Number(val);
+            return;
+          }
+          const parsedValue = Number(val.replace(decimalSeparator.value, '.'));
+          if (!isNaN(parsedValue) && parsedValue <= props.max && parsedValue >= props.min) {
+            model.value = parsedValue;
             _inputText.value = val;
           }
         }
@@ -25309,24 +25376,24 @@
           selectionEnd
         } = inputElement ?? {};
         const potentialNewInputVal = existingTxt ? existingTxt.slice(0, selectionStart) + e.data + existingTxt.slice(selectionEnd) : e.data;
-        const potentialNewNumber = extractNumber(potentialNewInputVal, props.precision);
+        const potentialNewNumber = extractNumber(potentialNewInputVal, props.precision, decimalSeparator.value);
 
-        // Only numbers, "-", "." are allowed
-        // AND "-", "." are allowed only once
-        // AND "-" is only allowed at the start
-        if (!/^-?(\d+(\.\d*)?|(\.\d+)|\d*|\.)$/.test(potentialNewInputVal)) {
+        // Allow only numbers, "-" and {decimal separator}
+        // Allow "-" and {decimal separator} only once
+        // Allow "-" only at the start
+        if (!new RegExp(`^-?\\d*${escapeForRegex(decimalSeparator.value)}?\\d*$`).test(potentialNewInputVal)) {
           e.preventDefault();
           inputElement.value = potentialNewNumber;
         }
         if (props.precision == null) return;
 
         // Ignore decimal digits above precision limit
-        if (potentialNewInputVal.split('.')[1]?.length > props.precision) {
+        if (potentialNewInputVal.split(decimalSeparator.value)[1]?.length > props.precision) {
           e.preventDefault();
           inputElement.value = potentialNewNumber;
         }
         // Ignore decimal separator when precision = 0
-        if (props.precision === 0 && potentialNewInputVal.includes('.')) {
+        if (props.precision === 0 && potentialNewInputVal.includes(decimalSeparator.value)) {
           e.preventDefault();
           inputElement.value = potentialNewNumber;
         }
@@ -25378,19 +25445,16 @@
         if (controlsDisabled.value) return;
         if (!vTextFieldRef.value) return;
         const actualText = vTextFieldRef.value.value;
-        if (actualText && !isNaN(Number(actualText))) {
-          inputText.value = correctPrecision(clamp(Number(actualText), props.min, props.max));
+        const parsedValue = Number(actualText.replace(decimalSeparator.value, '.'));
+        if (actualText && !isNaN(parsedValue)) {
+          inputText.value = correctPrecision(clamp(parsedValue, props.min, props.max));
         } else {
           inputText.value = null;
         }
       }
       function formatInputValue() {
         if (controlsDisabled.value) return;
-        if (model.value === null || isNaN(model.value)) {
-          inputText.value = null;
-          return;
-        }
-        inputText.value = correctPrecision(model.value);
+        inputText.value = model.value !== null && !isNaN(model.value) ? correctPrecision(model.value, props.precision, false) : null;
       }
       function trimDecimalZeros() {
         if (controlsDisabled.value) return;
@@ -25398,7 +25462,7 @@
           inputText.value = null;
           return;
         }
-        inputText.value = model.value.toString();
+        inputText.value = model.value.toString().replace('.', decimalSeparator.value);
       }
       function onFocus() {
         trimDecimalZeros();
@@ -30494,6 +30558,251 @@
     }
   });
 
+  // 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 = vue.computed(() => {
+      if (typeof props.mask === 'string') {
+        if (props.mask in presets) return presets[props.mask];
+        return props.mask;
+      }
+      return props.mask?.mask ?? '';
+    });
+    const tokens = vue.computed(() => {
+      return {
+        ...defaultTokens,
+        ...(isObject(props.mask) ? props.mask.tokens : null)
+      };
+    });
+    const selection = vue.shallowRef(0);
+    const lazySelection = vue.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 = vue.ref();
+      const {
+        maskText,
+        updateRange,
+        unmaskText
+      } = useMask(props, vTextFieldRef);
+      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 ? 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;
+      });
+      vue.onBeforeMount(() => {
+        if (props.returnMaskedValue) {
+          emit('update:modelValue', model.value);
+        }
+      });
+      useRender(() => {
+        const textFieldProps = VTextField.filterProps(props);
+        return vue.createVNode(VTextField, vue.mergeProps(textFieldProps, {
+          "modelValue": model.value,
+          "onUpdate:modelValue": $event => model.value = $event,
+          "ref": vTextFieldRef
+        }), {
+          ...slots
+        });
+      });
+      return forwardRefs({}, vTextFieldRef);
+    }
+  });
+
   // Types
 
   const makeVStepperVerticalActionsProps = propsFactory({
@@ -31999,6 +32308,7 @@
     VListSubheader: VListSubheader,
     VLocaleProvider: VLocaleProvider,
     VMain: VMain,
+    VMaskInput: VMaskInput,
     VMenu: VMenu,
     VMessages: VMessages,
     VNavigationDrawer: VNavigationDrawer,
@@ -32396,7 +32706,7 @@
       };
     });
   }
-  const version$1 = "3.8.9-dev.2025-06-11";
+  const version$1 = "3.8.9-dev.2025-06-13";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -32694,7 +33004,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.8.9-dev.2025-06-11";
+  const version = "3.8.9-dev.2025-06-13";
 
   /* eslint-disable local-rules/sort-imports */