@vuetify/nightly 3.7.12-master.2025-02-14 → 3.7.12-master.2025-02-17

package/lib/index.d.mts

@@ -486,77 +486,80 @@ declare module 'vue' {
     $children?: VNodeChild
   }
   export interface GlobalComponents {
-    VApp: typeof import('vuetify/components')['VApp']
     VAppBar: typeof import('vuetify/components')['VAppBar']
     VAppBarNavIcon: typeof import('vuetify/components')['VAppBarNavIcon']
     VAppBarTitle: typeof import('vuetify/components')['VAppBarTitle']
+    VAutocomplete: typeof import('vuetify/components')['VAutocomplete']
+    VApp: typeof import('vuetify/components')['VApp']
     VAlert: typeof import('vuetify/components')['VAlert']
     VAlertTitle: typeof import('vuetify/components')['VAlertTitle']
-    VBadge: typeof import('vuetify/components')['VBadge']
     VAvatar: typeof import('vuetify/components')['VAvatar']
+    VBtnGroup: typeof import('vuetify/components')['VBtnGroup']
+    VBottomSheet: typeof import('vuetify/components')['VBottomSheet']
+    VBadge: typeof import('vuetify/components')['VBadge']
+    VBottomNavigation: typeof import('vuetify/components')['VBottomNavigation']
     VBanner: typeof import('vuetify/components')['VBanner']
     VBannerActions: typeof import('vuetify/components')['VBannerActions']
     VBannerText: typeof import('vuetify/components')['VBannerText']
-    VBreadcrumbs: typeof import('vuetify/components')['VBreadcrumbs']
-    VBreadcrumbsItem: typeof import('vuetify/components')['VBreadcrumbsItem']
-    VBreadcrumbsDivider: typeof import('vuetify/components')['VBreadcrumbsDivider']
     VBtn: typeof import('vuetify/components')['VBtn']
-    VBottomNavigation: typeof import('vuetify/components')['VBottomNavigation']
-    VBtnGroup: typeof import('vuetify/components')['VBtnGroup']
-    VBtnToggle: typeof import('vuetify/components')['VBtnToggle']
-    VBottomSheet: typeof import('vuetify/components')['VBottomSheet']
     VCarousel: typeof import('vuetify/components')['VCarousel']
     VCarouselItem: typeof import('vuetify/components')['VCarouselItem']
-    VChip: typeof import('vuetify/components')['VChip']
     VCard: typeof import('vuetify/components')['VCard']
     VCardActions: typeof import('vuetify/components')['VCardActions']
     VCardItem: typeof import('vuetify/components')['VCardItem']
     VCardSubtitle: typeof import('vuetify/components')['VCardSubtitle']
     VCardText: typeof import('vuetify/components')['VCardText']
     VCardTitle: typeof import('vuetify/components')['VCardTitle']
-    VCheckbox: typeof import('vuetify/components')['VCheckbox']
-    VCheckboxBtn: typeof import('vuetify/components')['VCheckboxBtn']
-    VColorPicker: typeof import('vuetify/components')['VColorPicker']
+    VChip: typeof import('vuetify/components')['VChip']
+    VBreadcrumbs: typeof import('vuetify/components')['VBreadcrumbs']
+    VBreadcrumbsItem: typeof import('vuetify/components')['VBreadcrumbsItem']
+    VBreadcrumbsDivider: typeof import('vuetify/components')['VBreadcrumbsDivider']
+    VBtnToggle: typeof import('vuetify/components')['VBtnToggle']
     VChipGroup: typeof import('vuetify/components')['VChipGroup']
     VCode: typeof import('vuetify/components')['VCode']
-    VDataTable: typeof import('vuetify/components')['VDataTable']
-    VDataTableHeaders: typeof import('vuetify/components')['VDataTableHeaders']
-    VDataTableFooter: typeof import('vuetify/components')['VDataTableFooter']
-    VDataTableRows: typeof import('vuetify/components')['VDataTableRows']
-    VDataTableRow: typeof import('vuetify/components')['VDataTableRow']
-    VDataTableVirtual: typeof import('vuetify/components')['VDataTableVirtual']
-    VDataTableServer: typeof import('vuetify/components')['VDataTableServer']
+    VCheckbox: typeof import('vuetify/components')['VCheckbox']
+    VCheckboxBtn: typeof import('vuetify/components')['VCheckboxBtn']
     VCombobox: typeof import('vuetify/components')['VCombobox']
+    VColorPicker: typeof import('vuetify/components')['VColorPicker']
     VCounter: typeof import('vuetify/components')['VCounter']
-    VEmptyState: typeof import('vuetify/components')['VEmptyState']
     VDatePicker: typeof import('vuetify/components')['VDatePicker']
     VDatePickerControls: typeof import('vuetify/components')['VDatePickerControls']
     VDatePickerHeader: typeof import('vuetify/components')['VDatePickerHeader']
     VDatePickerMonth: typeof import('vuetify/components')['VDatePickerMonth']
     VDatePickerMonths: typeof import('vuetify/components')['VDatePickerMonths']
     VDatePickerYears: typeof import('vuetify/components')['VDatePickerYears']
-    VDialog: typeof import('vuetify/components')['VDialog']
+    VDataTable: typeof import('vuetify/components')['VDataTable']
+    VDataTableHeaders: typeof import('vuetify/components')['VDataTableHeaders']
+    VDataTableFooter: typeof import('vuetify/components')['VDataTableFooter']
+    VDataTableRows: typeof import('vuetify/components')['VDataTableRows']
+    VDataTableRow: typeof import('vuetify/components')['VDataTableRow']
+    VDataTableVirtual: typeof import('vuetify/components')['VDataTableVirtual']
+    VDataTableServer: typeof import('vuetify/components')['VDataTableServer']
     VDivider: typeof import('vuetify/components')['VDivider']
+    VDialog: typeof import('vuetify/components')['VDialog']
+    VFab: typeof import('vuetify/components')['VFab']
+    VEmptyState: typeof import('vuetify/components')['VEmptyState']
     VExpansionPanels: typeof import('vuetify/components')['VExpansionPanels']
     VExpansionPanel: typeof import('vuetify/components')['VExpansionPanel']
     VExpansionPanelText: typeof import('vuetify/components')['VExpansionPanelText']
     VExpansionPanelTitle: typeof import('vuetify/components')['VExpansionPanelTitle']
-    VFab: typeof import('vuetify/components')['VFab']
-    VFileInput: typeof import('vuetify/components')['VFileInput']
-    VFooter: typeof import('vuetify/components')['VFooter']
     VField: typeof import('vuetify/components')['VField']
     VFieldLabel: typeof import('vuetify/components')['VFieldLabel']
+    VFooter: typeof import('vuetify/components')['VFooter']
+    VFileInput: typeof import('vuetify/components')['VFileInput']
     VIcon: typeof import('vuetify/components')['VIcon']
     VComponentIcon: typeof import('vuetify/components')['VComponentIcon']
     VSvgIcon: typeof import('vuetify/components')['VSvgIcon']
     VLigatureIcon: typeof import('vuetify/components')['VLigatureIcon']
     VClassIcon: typeof import('vuetify/components')['VClassIcon']
-    VInput: typeof import('vuetify/components')['VInput']
     VImg: typeof import('vuetify/components')['VImg']
-    VKbd: typeof import('vuetify/components')['VKbd']
+    VInfiniteScroll: typeof import('vuetify/components')['VInfiniteScroll']
+    VInput: typeof import('vuetify/components')['VInput']
+    VLabel: typeof import('vuetify/components')['VLabel']
     VItemGroup: typeof import('vuetify/components')['VItemGroup']
     VItem: typeof import('vuetify/components')['VItem']
-    VInfiniteScroll: typeof import('vuetify/components')['VInfiniteScroll']
+    VKbd: typeof import('vuetify/components')['VKbd']
+    VMenu: typeof import('vuetify/components')['VMenu']
     VList: typeof import('vuetify/components')['VList']
     VListGroup: typeof import('vuetify/components')['VListGroup']
     VListImg: typeof import('vuetify/components')['VListImg']
@@ -566,67 +569,66 @@ declare module 'vue' {
     VListItemSubtitle: typeof import('vuetify/components')['VListItemSubtitle']
     VListItemTitle: typeof import('vuetify/components')['VListItemTitle']
     VListSubheader: typeof import('vuetify/components')['VListSubheader']
-    VNavigationDrawer: typeof import('vuetify/components')['VNavigationDrawer']
-    VMenu: typeof import('vuetify/components')['VMenu']
-    VLabel: typeof import('vuetify/components')['VLabel']
-    VMain: typeof import('vuetify/components')['VMain']
     VMessages: typeof import('vuetify/components')['VMessages']
+    VMain: typeof import('vuetify/components')['VMain']
+    VNavigationDrawer: typeof import('vuetify/components')['VNavigationDrawer']
     VOtpInput: typeof import('vuetify/components')['VOtpInput']
     VOverlay: typeof import('vuetify/components')['VOverlay']
     VPagination: typeof import('vuetify/components')['VPagination']
+    VProgressLinear: typeof import('vuetify/components')['VProgressLinear']
+    VRadioGroup: typeof import('vuetify/components')['VRadioGroup']
     VProgressCircular: typeof import('vuetify/components')['VProgressCircular']
     VRating: typeof import('vuetify/components')['VRating']
-    VRadioGroup: typeof import('vuetify/components')['VRadioGroup']
-    VSheet: typeof import('vuetify/components')['VSheet']
-    VProgressLinear: typeof import('vuetify/components')['VProgressLinear']
-    VSlider: typeof import('vuetify/components')['VSlider']
-    VSelectionControlGroup: typeof import('vuetify/components')['VSelectionControlGroup']
     VSelect: typeof import('vuetify/components')['VSelect']
+    VSkeletonLoader: typeof import('vuetify/components')['VSkeletonLoader']
+    VSlideGroup: typeof import('vuetify/components')['VSlideGroup']
+    VSlideGroupItem: typeof import('vuetify/components')['VSlideGroupItem']
+    VSlider: typeof import('vuetify/components')['VSlider']
+    VSheet: typeof import('vuetify/components')['VSheet']
+    VSnackbar: typeof import('vuetify/components')['VSnackbar']
+    VSystemBar: typeof import('vuetify/components')['VSystemBar']
     VStepper: typeof import('vuetify/components')['VStepper']
     VStepperActions: typeof import('vuetify/components')['VStepperActions']
     VStepperHeader: typeof import('vuetify/components')['VStepperHeader']
     VStepperItem: typeof import('vuetify/components')['VStepperItem']
     VStepperWindow: typeof import('vuetify/components')['VStepperWindow']
     VStepperWindowItem: typeof import('vuetify/components')['VStepperWindowItem']
-    VSlideGroup: typeof import('vuetify/components')['VSlideGroup']
-    VSlideGroupItem: typeof import('vuetify/components')['VSlideGroupItem']
-    VSnackbar: typeof import('vuetify/components')['VSnackbar']
-    VSwitch: typeof import('vuetify/components')['VSwitch']
+    VSelectionControlGroup: typeof import('vuetify/components')['VSelectionControlGroup']
     VSelectionControl: typeof import('vuetify/components')['VSelectionControl']
-    VSystemBar: typeof import('vuetify/components')['VSystemBar']
     VTab: typeof import('vuetify/components')['VTab']
     VTabs: typeof import('vuetify/components')['VTabs']
     VTabsWindow: typeof import('vuetify/components')['VTabsWindow']
     VTabsWindowItem: typeof import('vuetify/components')['VTabsWindowItem']
-    VTable: typeof import('vuetify/components')['VTable']
-    VTextField: typeof import('vuetify/components')['VTextField']
     VTextarea: typeof import('vuetify/components')['VTextarea']
-    VTimeline: typeof import('vuetify/components')['VTimeline']
-    VTimelineItem: typeof import('vuetify/components')['VTimelineItem']
-    VTooltip: typeof import('vuetify/components')['VTooltip']
+    VSwitch: typeof import('vuetify/components')['VSwitch']
+    VTextField: typeof import('vuetify/components')['VTextField']
     VToolbar: typeof import('vuetify/components')['VToolbar']
     VToolbarTitle: typeof import('vuetify/components')['VToolbarTitle']
     VToolbarItems: typeof import('vuetify/components')['VToolbarItems']
-    VSkeletonLoader: typeof import('vuetify/components')['VSkeletonLoader']
-    VAutocomplete: typeof import('vuetify/components')['VAutocomplete']
+    VTable: typeof import('vuetify/components')['VTable']
+    VWindow: typeof import('vuetify/components')['VWindow']
+    VWindowItem: typeof import('vuetify/components')['VWindowItem']
+    VTimeline: typeof import('vuetify/components')['VTimeline']
+    VTimelineItem: typeof import('vuetify/components')['VTimelineItem']
+    VTooltip: typeof import('vuetify/components')['VTooltip']
     VConfirmEdit: typeof import('vuetify/components')['VConfirmEdit']
     VDataIterator: typeof import('vuetify/components')['VDataIterator']
     VDefaultsProvider: typeof import('vuetify/components')['VDefaultsProvider']
+    VForm: typeof import('vuetify/components')['VForm']
     VContainer: typeof import('vuetify/components')['VContainer']
     VCol: typeof import('vuetify/components')['VCol']
     VRow: typeof import('vuetify/components')['VRow']
     VSpacer: typeof import('vuetify/components')['VSpacer']
-    VForm: typeof import('vuetify/components')['VForm']
     VHover: typeof import('vuetify/components')['VHover']
-    VLazy: typeof import('vuetify/components')['VLazy']
     VLayout: typeof import('vuetify/components')['VLayout']
     VLayoutItem: typeof import('vuetify/components')['VLayoutItem']
+    VLazy: typeof import('vuetify/components')['VLazy']
     VLocaleProvider: typeof import('vuetify/components')['VLocaleProvider']
     VNoSsr: typeof import('vuetify/components')['VNoSsr']
-    VParallax: typeof import('vuetify/components')['VParallax']
     VRadio: typeof import('vuetify/components')['VRadio']
-    VResponsive: typeof import('vuetify/components')['VResponsive']
+    VParallax: typeof import('vuetify/components')['VParallax']
     VRangeSlider: typeof import('vuetify/components')['VRangeSlider']
+    VResponsive: typeof import('vuetify/components')['VResponsive']
     VSparkline: typeof import('vuetify/components')['VSparkline']
     VSpeedDial: typeof import('vuetify/components')['VSpeedDial']
     VThemeProvider: typeof import('vuetify/components')['VThemeProvider']
@@ -648,8 +650,6 @@ declare module 'vue' {
     VExpandTransition: typeof import('vuetify/components')['VExpandTransition']
     VExpandXTransition: typeof import('vuetify/components')['VExpandXTransition']
     VDialogTransition: typeof import('vuetify/components')['VDialogTransition']
-    VWindow: typeof import('vuetify/components')['VWindow']
-    VWindowItem: typeof import('vuetify/components')['VWindowItem']
     VCalendar: typeof import('vuetify/labs/components')['VCalendar']
     VCalendarDay: typeof import('vuetify/labs/components')['VCalendarDay']
     VCalendarHeader: typeof import('vuetify/labs/components')['VCalendarHeader']
@@ -659,19 +659,19 @@ declare module 'vue' {
     VStepperVertical: typeof import('vuetify/labs/components')['VStepperVertical']
     VStepperVerticalItem: typeof import('vuetify/labs/components')['VStepperVerticalItem']
     VStepperVerticalActions: typeof import('vuetify/labs/components')['VStepperVerticalActions']
+    VPicker: typeof import('vuetify/labs/components')['VPicker']
+    VPickerTitle: typeof import('vuetify/labs/components')['VPickerTitle']
+    VNumberInput: typeof import('vuetify/labs/components')['VNumberInput']
     VFileUpload: typeof import('vuetify/labs/components')['VFileUpload']
     VFileUploadItem: typeof import('vuetify/labs/components')['VFileUploadItem']
-    VNumberInput: typeof import('vuetify/labs/components')['VNumberInput']
     VTimePicker: typeof import('vuetify/labs/components')['VTimePicker']
     VTimePickerClock: typeof import('vuetify/labs/components')['VTimePickerClock']
     VTimePickerControls: typeof import('vuetify/labs/components')['VTimePickerControls']
-    VPicker: typeof import('vuetify/labs/components')['VPicker']
-    VPickerTitle: typeof import('vuetify/labs/components')['VPickerTitle']
     VTreeview: typeof import('vuetify/labs/components')['VTreeview']
     VTreeviewItem: typeof import('vuetify/labs/components')['VTreeviewItem']
     VTreeviewGroup: typeof import('vuetify/labs/components')['VTreeviewGroup']
     VDateInput: typeof import('vuetify/labs/components')['VDateInput']
-    VPullToRefresh: typeof import('vuetify/labs/components')['VPullToRefresh']
     VSnackbarQueue: typeof import('vuetify/labs/components')['VSnackbarQueue']
+    VPullToRefresh: typeof import('vuetify/labs/components')['VPullToRefresh']
   }
 }

package/lib/labs/VCalendar/index.d.mts

@@ -590,7 +590,10 @@ declare const VCalendar: {
         default: number;
     };
     allowedDates: vue.PropType<unknown[] | ((date: unknown) => boolean)>;
-    disabled: BooleanConstructor;
+    disabled: {
+        type: BooleanConstructor;
+        default: null;
+    };
     displayValue: vue.PropType<unknown>;
     modelValue: vue.PropType<unknown[]>;
     month: (StringConstructor | NumberConstructor)[];
@@ -689,7 +692,10 @@ declare const VCalendar: {
         default: number;
     };
     allowedDates: vue.PropType<unknown[] | ((date: unknown) => boolean)>;
-    disabled: BooleanConstructor;
+    disabled: {
+        type: BooleanConstructor;
+        default: null;
+    };
     displayValue: vue.PropType<unknown>;
     modelValue: vue.PropType<unknown[]>;
     month: (StringConstructor | NumberConstructor)[];

package/lib/labs/VDateInput/index.d.mts

@@ -762,7 +762,10 @@ declare const VDateInput: {
         default: string;
     };
     text: StringConstructor;
-    disabled: BooleanConstructor;
+    disabled: {
+        type: BooleanConstructor;
+        default: null;
+    };
     multiple: PropType<boolean | "range" | number | (string & {})>;
     month: (StringConstructor | NumberConstructor)[];
     year: NumberConstructor;
@@ -980,7 +983,10 @@ declare const VDateInput: {
         default: string;
     };
     text: StringConstructor;
-    disabled: BooleanConstructor;
+    disabled: {
+        type: BooleanConstructor;
+        default: null;
+    };
     multiple: PropType<boolean | "range" | number | (string & {})>;
     month: (StringConstructor | NumberConstructor)[];
     year: NumberConstructor;

package/lib/labs/VNumberInput/VNumberInput.css

@@ -4,10 +4,18 @@
 .v-number-input input[type=number]::-webkit-outer-spin-button, .v-number-input input[type=number]::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }
-.v-number-input .v-field {
-  padding-inline-end: 0;
+.v-number-input .v-field:not(:has(.v-field__prepend-inner > .v-icon)) {
   padding-inline-start: 0;
 }
+.v-number-input .v-field:not(:has(.v-field__append-inner > .v-icon)) {
+  padding-inline-end: 0;
+}
+.v-number-input .v-field__prepend-inner:has(.v-number-input__control) > .v-icon {
+  margin-inline-end: 12px;
+}
+.v-number-input .v-field__append-inner:has(.v-number-input__control) > .v-icon {
+  margin-inline-start: 12px;
+}
 .v-number-input--inset .v-divider {
   height: 55%;
   width: 55%;

package/lib/labs/VNumberInput/VNumberInput.mjs

@@ -10,8 +10,8 @@ import { makeVTextFieldProps, VTextField } from "../../components/VTextField/VTe
 import { useForm } from "../../composables/form.mjs";
 import { forwardRefs } from "../../composables/forwardRefs.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
-import { computed, nextTick, onMounted, ref } from 'vue';
-import { clamp, genericComponent, getDecimals, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
+import { computed, nextTick, onMounted, ref, shallowRef, watch, watchEffect } from 'vue';
+import { clamp, genericComponent, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
 const makeVNumberInputProps = propsFactory({
   controlVariant: {
     type: String,
@@ -35,7 +35,11 @@ const makeVNumberInputProps = propsFactory({
     type: Number,
     default: 1
   },
-  ...omit(makeVTextFieldProps({}), ['appendInnerIcon', 'modelValue', 'prependInnerIcon'])
+  precision: {
+    type: Number,
+    default: 0
+  },
+  ...omit(makeVTextFieldProps({}), ['modelValue'])
 }, 'VNumberInput');
 export const VNumberInput = genericComponent()({
   name: 'VNumberInput',
@@ -49,27 +53,39 @@ export const VNumberInput = genericComponent()({
     let {
       slots
     } = _ref;
-    const _model = useProxiedModel(props, 'modelValue');
-    const model = computed({
-      get: () => _model.value,
-      // model.value could be empty string from VTextField
-      // but _model.value should be eventually kept in type Number | null
+    const vTextFieldRef = ref();
+    const form = useForm(props);
+    const controlsDisabled = computed(() => form.isDisabled.value || form.isReadonly.value);
+    const isFocused = ref(false);
+    function correctPrecision(val) {
+      let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.precision;
+      const fixed = precision == null ? String(val) : val.toFixed(precision);
+      return isFocused.value ? Number(fixed).toString() // trim zeros
+      : fixed;
+    }
+    const model = useProxiedModel(props, 'modelValue', null, val => val ?? null, val => val == null ? val ?? null : clamp(+val, props.min, props.max));
+    const _inputText = shallowRef(null);
+    watchEffect(() => {
+      if (isFocused.value && !controlsDisabled.value) {
+        // ignore external changes
+      } else if (model.value == null || controlsDisabled.value) {
+        _inputText.value = model.value && !isNaN(model.value) ? String(model.value) : null;
+      } else if (!isNaN(model.value)) {
+        _inputText.value = correctPrecision(model.value);
+      }
+    });
+    const inputText = computed({
+      get: () => _inputText.value,
       set(val) {
         if (val === null || val === '') {
-          _model.value = null;
-          return;
-        }
-        const value = Number(val);
-        if (!isNaN(value) && value <= props.max && value >= props.min) {
-          _model.value = value;
+          model.value = null;
+          _inputText.value = null;
+        } else if (!isNaN(+val) && +val <= props.max && +val >= props.min) {
+          model.value = +val;
+          _inputText.value = val;
         }
       }
     });
-    const vTextFieldRef = ref();
-    const stepDecimals = computed(() => getDecimals(props.step));
-    const modelDecimals = computed(() => typeof model.value === 'number' ? getDecimals(model.value) : 0);
-    const form = useForm(props);
-    const controlsDisabled = computed(() => form.isDisabled.value || form.isReadonly.value);
     const canIncrease = computed(() => {
       if (controlsDisabled.value) return false;
       return (model.value ?? 0) + props.step <= props.max;
@@ -91,23 +107,29 @@ export const VNumberInput = genericComponent()({
     const decrementSlotProps = computed(() => ({
       click: onClickDown
     }));
+    watch(() => props.precision, () => formatInputValue());
     onMounted(() => {
-      if (!controlsDisabled.value) {
-        clampModel();
-      }
+      clampModel();
     });
+    function inferPrecision(value) {
+      if (value == null) return 0;
+      const str = value.toString();
+      const idx = str.indexOf('.');
+      return ~idx ? str.length - idx : 0;
+    }
     function toggleUpDown() {
       let increment = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       if (controlsDisabled.value) return;
       if (model.value == null) {
-        model.value = clamp(0, props.min, props.max);
+        inputText.value = correctPrecision(clamp(0, props.min, props.max));
         return;
       }
-      const decimals = Math.max(modelDecimals.value, stepDecimals.value);
+      let inferredPrecision = Math.max(inferPrecision(model.value), inferPrecision(props.step));
+      if (props.precision != null) inferredPrecision = Math.max(inferredPrecision, props.precision);
       if (increment) {
-        if (canIncrease.value) model.value = +(model.value + props.step).toFixed(decimals);
+        if (canIncrease.value) inputText.value = correctPrecision(model.value + props.step, inferredPrecision);
       } else {
-        if (canDecrease.value) model.value = +(model.value - props.step).toFixed(decimals);
+        if (canDecrease.value) inputText.value = correctPrecision(model.value - props.step, inferredPrecision);
       }
     }
     function onClickUp(e) {
@@ -130,6 +152,16 @@ export const VNumberInput = genericComponent()({
       if (!/^-?(\d+(\.\d*)?|(\.\d+)|\d*|\.)$/.test(potentialNewInputVal)) {
         e.preventDefault();
       }
+      if (props.precision == null) return;
+
+      // Ignore decimal digits above precision limit
+      if (potentialNewInputVal.split('.')[1]?.length > props.precision) {
+        e.preventDefault();
+      }
+      // Ignore decimal separator when precision = 0
+      if (props.precision === 0 && potentialNewInputVal.includes('.')) {
+        e.preventDefault();
+      }
     }
     async function onKeydown(e) {
       if (['Enter', 'ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].includes(e.key) || e.ctrlKey) return;
@@ -149,14 +181,39 @@ export const VNumberInput = genericComponent()({
       e.stopPropagation();
     }
     function clampModel() {
+      if (controlsDisabled.value) return;
       if (!vTextFieldRef.value) return;
-      const inputText = vTextFieldRef.value.value;
-      if (inputText && !isNaN(+inputText)) {
-        model.value = clamp(+inputText, props.min, props.max);
+      const actualText = vTextFieldRef.value.value;
+      if (actualText && !isNaN(+actualText)) {
+        inputText.value = correctPrecision(clamp(+actualText, props.min, props.max));
       } else {
-        model.value = null;
+        inputText.value = null;
       }
     }
+    function formatInputValue() {
+      if (controlsDisabled.value) return;
+      if (model.value === null || isNaN(model.value)) {
+        inputText.value = null;
+        return;
+      }
+      inputText.value = props.precision == null ? String(model.value) : model.value.toFixed(props.precision);
+    }
+    function trimDecimalZeros() {
+      if (controlsDisabled.value) return;
+      if (model.value === null || isNaN(model.value)) {
+        inputText.value = null;
+        return;
+      }
+      inputText.value = model.value.toString();
+    }
+    function onFocus() {
+      isFocused.value = true;
+      trimDecimalZeros();
+    }
+    function onBlur() {
+      isFocused.value = false;
+      clampModel();
+    }
     useRender(() => {
       const {
         modelValue: _,
@@ -234,20 +291,21 @@ export const VNumberInput = genericComponent()({
         "class": "v-number-input__control"
       }, [_createVNode(VDivider, {
         "vertical": true
-      }, null), incrementControlNode()]) : props.reverse ? undefined : _createVNode(_Fragment, null, [dividerNode(), controlNode()]);
+      }, null), incrementControlNode()]) : props.reverse || controlVariant.value === 'hidden' ? undefined : _createVNode(_Fragment, null, [dividerNode(), controlNode()]);
       const hasAppendInner = slots['append-inner'] || appendInnerControl;
       const prependInnerControl = controlVariant.value === 'split' ? _createVNode("div", {
         "class": "v-number-input__control"
       }, [decrementControlNode(), _createVNode(VDivider, {
         "vertical": true
-      }, null)]) : props.reverse ? _createVNode(_Fragment, null, [controlNode(), dividerNode()]) : undefined;
+      }, null)]) : props.reverse && controlVariant.value !== 'hidden' ? _createVNode(_Fragment, null, [controlNode(), dividerNode()]) : undefined;
       const hasPrependInner = slots['prepend-inner'] || prependInnerControl;
       return _createVNode(VTextField, _mergeProps({
         "ref": vTextFieldRef,
-        "modelValue": model.value,
-        "onUpdate:modelValue": $event => model.value = $event,
+        "modelValue": inputText.value,
+        "onUpdate:modelValue": $event => inputText.value = $event,
         "onBeforeinput": onBeforeinput,
-        "onChange": clampModel,
+        "onFocus": onFocus,
+        "onBlur": onBlur,
         "onKeydown": onKeydown,
         "class": ['v-number-input', {
           'v-number-input--default': controlVariant.value === 'default',