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

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-13
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -588,18 +588,23 @@ function checkPrintable(e) {
 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;
 }
@@ -2175,6 +2180,10 @@ function createNumberFunction(current, fallback) {
     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);
 
@@ -2197,6 +2206,7 @@ function createProvideFunction(state) {
       current,
       fallback,
       messages,
+      decimalSeparator: toRef(() => inferDecimalSeparator(current, fallback)),
       t: createTranslateFunction(current, fallback, messages),
       n: createNumberFunction(current, fallback),
       provide: createProvideFunction({
@@ -2219,6 +2229,7 @@ function createVuetifyAdapter(options) {
     current,
     fallback,
     messages,
+    decimalSeparator: toRef(() => options?.decimalSeparator ?? inferDecimalSeparator(current, fallback)),
     t: createTranslateFunction(current, fallback, messages),
     n: createNumberFunction(current, fallback),
     provide: createProvideFunction({
@@ -2383,8 +2394,8 @@ function genDefaults$2() {
           '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'
         }
@@ -2420,7 +2431,7 @@ function genDefaults$2() {
           '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'
@@ -11630,6 +11641,7 @@ const makeVMenuProps = propsFactory({
   // disableKeys: Boolean,
   id: String,
   submenu: Boolean,
+  disableInitialFocus: Boolean,
   ...omit(makeVOverlayProps({
     closeDelay: 250,
     closeOnContentClick: true,
@@ -11704,7 +11716,7 @@ const VMenu = genericComponent()({
     watch(isActive, val => {
       if (val) {
         parent?.register();
-        if (IN_BROWSER) {
+        if (IN_BROWSER && !props.disableInitialFocus) {
           document.addEventListener('focusin', onFocusIn, {
             once: true
           });
@@ -23005,7 +23017,9 @@ const VDatePicker = genericComponent()({
             "max": maxDate.value,
             "year": year.value,
             "allowedMonths": allowedMonths
-          }), null) : viewMode.value === 'year' ? createVNode(VDatePickerYears, mergeProps({
+          }), {
+            ...pick(slots, ['month'])
+          }) : viewMode.value === 'year' ? createVNode(VDatePickerYears, mergeProps({
             "key": "date-picker-years"
           }, datePickerYearsProps, {
             "modelValue": year.value,
@@ -23013,7 +23027,9 @@ const VDatePicker = genericComponent()({
             "min": minDate.value,
             "max": maxDate.value,
             "allowedYears": allowedYears
-          }), null) : createVNode(VDatePickerMonth, mergeProps({
+          }), {
+            ...pick(slots, ['year'])
+          }) : createVNode(VDatePickerMonth, mergeProps({
             "key": "date-picker-month"
           }, datePickerMonthProps, {
             "modelValue": model.value,
@@ -23024,7 +23040,9 @@ const VDatePicker = genericComponent()({
             "onUpdate:year": [$event => year.value = $event, onUpdateYear],
             "min": minDate.value,
             "max": maxDate.value
-          }), null)]
+          }), {
+            ...pick(slots, ['day'])
+          })]
         })]),
         actions: slots.actions
       });
@@ -24334,8 +24352,47 @@ const VItem = genericComponent()({
   }
 });
 
-// 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(() => createVNode(props.tag, {
+      "class": normalizeClass(['v-kbd', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
+      "style": normalizeStyle([backgroundColorStyles.value, props.style])
+    }, slots));
+    return {};
+  }
+});
 
 const makeVLayoutProps = propsFactory({
   ...makeComponentProps(),
@@ -25177,6 +25234,10 @@ const makeVNumberInputProps = propsFactory({
     type: Number,
     default: null
   },
+  decimalSeparator: {
+    type: String,
+    validator: v => !v || v.length === 1
+  },
   ...omit(makeVTextFieldProps(), ['modelValue', 'validationValue'])
 }, 'VNumberInput');
 const VNumberInput = genericComponent()({
@@ -25202,21 +25263,24 @@ const VNumberInput = genericComponent()({
     const form = useForm(props);
     const controlsDisabled = computed(() => form.isDisabled.value || form.isReadonly.value);
     const isFocused = shallowRef(props.focused);
+    const {
+      decimalSeparator: decimalSeparatorFromLocale
+    } = useLocale();
+    const decimalSeparator = 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 = shallowRef(null);
@@ -25233,8 +25297,11 @@ const VNumberInput = genericComponent()({
         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;
         }
       }
@@ -25305,24 +25372,24 @@ const VNumberInput = genericComponent()({
         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;
       }
@@ -25374,19 +25441,16 @@ const VNumberInput = genericComponent()({
       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;
@@ -25394,7 +25458,7 @@ const VNumberInput = genericComponent()({
         inputText.value = null;
         return;
       }
-      inputText.value = model.value.toString();
+      inputText.value = model.value.toString().replace('.', decimalSeparator.value);
     }
     function onFocus() {
       trimDecimalZeros();
@@ -30490,6 +30554,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 +32304,7 @@ var components = /*#__PURE__*/Object.freeze({
   VListSubheader: VListSubheader,
   VLocaleProvider: VLocaleProvider,
   VMain: VMain,
+  VMaskInput: VMaskInput,
   VMenu: VMenu,
   VMessages: VMessages,
   VNavigationDrawer: VNavigationDrawer,
@@ -32392,7 +32702,7 @@ function createVuetify$1() {
     };
   });
 }
-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
@@ -32690,7 +33000,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-13";
 
 /* eslint-disable local-rules/sort-imports */