vuetify 3.7.13 → 3.7.15

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

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { ComponentPropsOptions, ExtractPropTypes, PropType, ComponentPublicInstance, FunctionalComponent, Ref } from 'vue';
+import { ComponentPropsOptions, ExtractPropTypes, PropType, ComponentPublicInstance, FunctionalComponent, ComputedRef, Ref } from 'vue';
 
 type ClassValue = any;
 
@@ -33,6 +33,17 @@ interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions
 type EventProp<T extends any[] = any[], F = (...args: T) => void> = F;
 declare const EventProp: <T extends any[] = any[]>() => PropType<EventProp<T>>;
 
+type VCounterSlot = {
+    counter: string;
+    max: string | number | undefined;
+    value: string | number | undefined;
+};
+
+interface LoaderSlotProps {
+    color: string | undefined;
+    isActive: boolean;
+}
+
 type Density = null | 'default' | 'comfortable' | 'compact';
 
 type ValidationResult = string | boolean;
@@ -61,6 +72,32 @@ type JSXComponent<Props = any> = {
 type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 
+type VMessageSlot = {
+    message: string;
+};
+
+interface VInputSlot {
+    id: ComputedRef<string>;
+    messagesId: ComputedRef<string>;
+    isDirty: ComputedRef<boolean>;
+    isDisabled: ComputedRef<boolean>;
+    isReadonly: ComputedRef<boolean>;
+    isPristine: Ref<boolean>;
+    isValid: ComputedRef<boolean | null>;
+    isValidating: Ref<boolean>;
+    reset: () => void;
+    resetValidation: () => void;
+    validate: () => void;
+}
+
+interface DefaultInputSlot {
+    isActive: Ref<boolean>;
+    isFocused: Ref<boolean>;
+    controlRef: Ref<HTMLElement | undefined>;
+    focus: () => void;
+    blur: () => void;
+}
+
 interface LocationStrategyData {
     contentEl: Ref<HTMLElement | undefined>;
     target: Ref<HTMLElement | [x: number, y: number] | undefined>;
@@ -202,14 +239,59 @@ declare const VDateInput: {
         allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+            message?: ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+            clear?: ((arg: DefaultInputSlot & {
+                props: Record<string, any>;
+            }) => vue.VNodeChild) | undefined;
+            details?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            label?: ((arg: DefaultInputSlot & {
+                label: string | undefined;
+                props: Record<string, any>;
+            }) => vue.VNodeChild) | undefined;
+            append?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            prepend?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            loader?: ((arg: LoaderSlotProps) => vue.VNodeChild) | undefined;
+            counter?: ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
+            'prepend-inner'?: ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
+            'append-inner'?: ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
             actions?: ((arg: VDateInputActionsSlot) => vue.VNodeChild) | undefined;
             default?: (() => vue.VNodeChild) | undefined;
         };
         'v-slots'?: {
+            message?: false | ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+            clear?: false | ((arg: DefaultInputSlot & {
+                props: Record<string, any>;
+            }) => vue.VNodeChild) | undefined;
+            details?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            label?: false | ((arg: DefaultInputSlot & {
+                label: string | undefined;
+                props: Record<string, any>;
+            }) => vue.VNodeChild) | undefined;
+            append?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            prepend?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            loader?: false | ((arg: LoaderSlotProps) => vue.VNodeChild) | undefined;
+            counter?: false | ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
+            'prepend-inner'?: false | ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
+            'append-inner'?: false | ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
             actions?: false | ((arg: VDateInputActionsSlot) => vue.VNodeChild) | undefined;
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
+        "v-slot:message"?: false | ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+        "v-slot:clear"?: false | ((arg: DefaultInputSlot & {
+            props: Record<string, any>;
+        }) => vue.VNodeChild) | undefined;
+        "v-slot:details"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:label"?: false | ((arg: DefaultInputSlot & {
+            label: string | undefined;
+            props: Record<string, any>;
+        }) => vue.VNodeChild) | undefined;
+        "v-slot:append"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:prepend"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:loader"?: false | ((arg: LoaderSlotProps) => vue.VNodeChild) | undefined;
+        "v-slot:counter"?: false | ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
+        "v-slot:prepend-inner"?: false | ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:append-inner"?: false | ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
         "v-slot:actions"?: false | ((arg: VDateInputActionsSlot) => vue.VNodeChild) | undefined;
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
     } & {
@@ -317,14 +399,59 @@ declare const VDateInput: {
         allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+            message?: ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+            clear?: ((arg: DefaultInputSlot & {
+                props: Record<string, any>;
+            }) => vue.VNodeChild) | undefined;
+            details?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            label?: ((arg: DefaultInputSlot & {
+                label: string | undefined;
+                props: Record<string, any>;
+            }) => vue.VNodeChild) | undefined;
+            append?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            prepend?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            loader?: ((arg: LoaderSlotProps) => vue.VNodeChild) | undefined;
+            counter?: ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
+            'prepend-inner'?: ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
+            'append-inner'?: ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
             actions?: ((arg: VDateInputActionsSlot) => vue.VNodeChild) | undefined;
             default?: (() => vue.VNodeChild) | undefined;
         };
         'v-slots'?: {
+            message?: false | ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+            clear?: false | ((arg: DefaultInputSlot & {
+                props: Record<string, any>;
+            }) => vue.VNodeChild) | undefined;
+            details?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            label?: false | ((arg: DefaultInputSlot & {
+                label: string | undefined;
+                props: Record<string, any>;
+            }) => vue.VNodeChild) | undefined;
+            append?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            prepend?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            loader?: false | ((arg: LoaderSlotProps) => vue.VNodeChild) | undefined;
+            counter?: false | ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
+            'prepend-inner'?: false | ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
+            'append-inner'?: false | ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
             actions?: false | ((arg: VDateInputActionsSlot) => vue.VNodeChild) | undefined;
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
+        "v-slot:message"?: false | ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+        "v-slot:clear"?: false | ((arg: DefaultInputSlot & {
+            props: Record<string, any>;
+        }) => vue.VNodeChild) | undefined;
+        "v-slot:details"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:label"?: false | ((arg: DefaultInputSlot & {
+            label: string | undefined;
+            props: Record<string, any>;
+        }) => vue.VNodeChild) | undefined;
+        "v-slot:append"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:prepend"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:loader"?: false | ((arg: LoaderSlotProps) => vue.VNodeChild) | undefined;
+        "v-slot:counter"?: false | ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
+        "v-slot:prepend-inner"?: false | ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:append-inner"?: false | ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
         "v-slot:actions"?: false | ((arg: VDateInputActionsSlot) => vue.VNodeChild) | undefined;
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
     } & {
@@ -382,6 +509,21 @@ declare const VDateInput: {
         hideHeader: boolean;
         hideActions: boolean;
     }, true, {}, vue.SlotsType<Partial<{
+        message: (arg: VMessageSlot) => vue.VNode[];
+        clear: (arg: DefaultInputSlot & {
+            props: Record<string, any>;
+        }) => vue.VNode[];
+        details: (arg: VInputSlot) => vue.VNode[];
+        label: (arg: DefaultInputSlot & {
+            label: string | undefined;
+            props: Record<string, any>;
+        }) => vue.VNode[];
+        append: (arg: VInputSlot) => vue.VNode[];
+        prepend: (arg: VInputSlot) => vue.VNode[];
+        loader: (arg: LoaderSlotProps) => vue.VNode[];
+        counter: (arg: VCounterSlot) => vue.VNode[];
+        'prepend-inner': (arg: DefaultInputSlot) => vue.VNode[];
+        'append-inner': (arg: DefaultInputSlot) => vue.VNode[];
         actions: (arg: VDateInputActionsSlot) => vue.VNode[];
         default: () => vue.VNode[];
     }>>, {
@@ -492,14 +634,59 @@ declare const VDateInput: {
         allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+            message?: ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+            clear?: ((arg: DefaultInputSlot & {
+                props: Record<string, any>;
+            }) => vue.VNodeChild) | undefined;
+            details?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            label?: ((arg: DefaultInputSlot & {
+                label: string | undefined;
+                props: Record<string, any>;
+            }) => vue.VNodeChild) | undefined;
+            append?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            prepend?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            loader?: ((arg: LoaderSlotProps) => vue.VNodeChild) | undefined;
+            counter?: ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
+            'prepend-inner'?: ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
+            'append-inner'?: ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
             actions?: ((arg: VDateInputActionsSlot) => vue.VNodeChild) | undefined;
             default?: (() => vue.VNodeChild) | undefined;
         };
         'v-slots'?: {
+            message?: false | ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+            clear?: false | ((arg: DefaultInputSlot & {
+                props: Record<string, any>;
+            }) => vue.VNodeChild) | undefined;
+            details?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            label?: false | ((arg: DefaultInputSlot & {
+                label: string | undefined;
+                props: Record<string, any>;
+            }) => vue.VNodeChild) | undefined;
+            append?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            prepend?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+            loader?: false | ((arg: LoaderSlotProps) => vue.VNodeChild) | undefined;
+            counter?: false | ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
+            'prepend-inner'?: false | ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
+            'append-inner'?: false | ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
             actions?: false | ((arg: VDateInputActionsSlot) => vue.VNodeChild) | undefined;
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
+        "v-slot:message"?: false | ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+        "v-slot:clear"?: false | ((arg: DefaultInputSlot & {
+            props: Record<string, any>;
+        }) => vue.VNodeChild) | undefined;
+        "v-slot:details"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:label"?: false | ((arg: DefaultInputSlot & {
+            label: string | undefined;
+            props: Record<string, any>;
+        }) => vue.VNodeChild) | undefined;
+        "v-slot:append"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:prepend"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:loader"?: false | ((arg: LoaderSlotProps) => vue.VNodeChild) | undefined;
+        "v-slot:counter"?: false | ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
+        "v-slot:prepend-inner"?: false | ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:append-inner"?: false | ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
         "v-slot:actions"?: false | ((arg: VDateInputActionsSlot) => vue.VNodeChild) | undefined;
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
     } & {
@@ -661,14 +848,59 @@ declare const VDateInput: {
     allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
 } & {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+        message?: ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+        clear?: ((arg: DefaultInputSlot & {
+            props: Record<string, any>;
+        }) => vue.VNodeChild) | undefined;
+        details?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        label?: ((arg: DefaultInputSlot & {
+            label: string | undefined;
+            props: Record<string, any>;
+        }) => vue.VNodeChild) | undefined;
+        append?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        prepend?: ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        loader?: ((arg: LoaderSlotProps) => vue.VNodeChild) | undefined;
+        counter?: ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
+        'prepend-inner'?: ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
+        'append-inner'?: ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
         actions?: ((arg: VDateInputActionsSlot) => vue.VNodeChild) | undefined;
         default?: (() => vue.VNodeChild) | undefined;
     };
     'v-slots'?: {
+        message?: false | ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+        clear?: false | ((arg: DefaultInputSlot & {
+            props: Record<string, any>;
+        }) => vue.VNodeChild) | undefined;
+        details?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        label?: false | ((arg: DefaultInputSlot & {
+            label: string | undefined;
+            props: Record<string, any>;
+        }) => vue.VNodeChild) | undefined;
+        append?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        prepend?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+        loader?: false | ((arg: LoaderSlotProps) => vue.VNodeChild) | undefined;
+        counter?: false | ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
+        'prepend-inner'?: false | ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
+        'append-inner'?: false | ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
         actions?: false | ((arg: VDateInputActionsSlot) => vue.VNodeChild) | undefined;
         default?: false | (() => vue.VNodeChild) | undefined;
     } | undefined;
 } & {
+    "v-slot:message"?: false | ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
+    "v-slot:clear"?: false | ((arg: DefaultInputSlot & {
+        props: Record<string, any>;
+    }) => vue.VNodeChild) | undefined;
+    "v-slot:details"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:label"?: false | ((arg: DefaultInputSlot & {
+        label: string | undefined;
+        props: Record<string, any>;
+    }) => vue.VNodeChild) | undefined;
+    "v-slot:append"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:prepend"?: false | ((arg: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:loader"?: false | ((arg: LoaderSlotProps) => vue.VNodeChild) | undefined;
+    "v-slot:counter"?: false | ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
+    "v-slot:prepend-inner"?: false | ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:append-inner"?: false | ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
     "v-slot:actions"?: false | ((arg: VDateInputActionsSlot) => vue.VNodeChild) | undefined;
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
 } & {
@@ -728,6 +960,21 @@ declare const VDateInput: {
     hideHeader: boolean;
     hideActions: boolean;
 }, {}, string, vue.SlotsType<Partial<{
+    message: (arg: VMessageSlot) => vue.VNode[];
+    clear: (arg: DefaultInputSlot & {
+        props: Record<string, any>;
+    }) => vue.VNode[];
+    details: (arg: VInputSlot) => vue.VNode[];
+    label: (arg: DefaultInputSlot & {
+        label: string | undefined;
+        props: Record<string, any>;
+    }) => vue.VNode[];
+    append: (arg: VInputSlot) => vue.VNode[];
+    prepend: (arg: VInputSlot) => vue.VNode[];
+    loader: (arg: LoaderSlotProps) => vue.VNode[];
+    counter: (arg: VCounterSlot) => vue.VNode[];
+    'prepend-inner': (arg: DefaultInputSlot) => vue.VNode[];
+    'append-inner': (arg: DefaultInputSlot) => vue.VNode[];
     actions: (arg: VDateInputActionsSlot) => vue.VNode[];
     default: () => vue.VNode[];
 }>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{

package/lib/labs/VFileUpload/VFileUpload.css

@@ -1,5 +1,5 @@
 .v-file-upload {
-  padding: 64px 0;
+  padding: 64px 16px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -41,6 +41,7 @@
 .v-file-upload-title {
   font-size: 1.5rem;
   font-weight: 600;
+  text-align: center;
 }
 
 .v-file-upload-icon {
@@ -64,6 +65,9 @@
   justify-content: center;
   width: 100%;
 }
+.v-file-upload-divider .v-divider__wrapper {
+  max-width: 100%;
+}
 
 .v-file-upload-items {
   margin: 16px 0;

package/lib/labs/VFileUpload/VFileUpload.sass

@@ -46,6 +46,7 @@
   .v-file-upload-title
     font-size: $file-upload-title-font-size
     font-weight: 600
+    text-align: center
 
   .v-file-upload-icon
     opacity: var(--v-medium-emphasis-opacity)
@@ -67,6 +68,9 @@
     justify-content: center
     width: 100%
 
+    .v-divider__wrapper
+      max-width: 100%
+
   .v-file-upload-items
     margin: $file-upload-items-margin
 

package/lib/labs/VFileUpload/_variables.scss

@@ -2,7 +2,7 @@
 @use '../../styles/settings';
 
 $file-upload-title-font-size: 1.5rem !default;
-$file-upload-padding: 64px 0 !default;
+$file-upload-padding: 64px 16px !default;
 $file-upload-border-radius: 4px !default;
 $file-upload-border-width: 2px !default;
 $file-upload-title-font-weight: 600 !default;

package/lib/labs/VNumberInput/VNumberInput.mjs

@@ -7,6 +7,8 @@ import { VBtn } from "../../components/VBtn/index.mjs";
 import { VDefaultsProvider } from "../../components/VDefaultsProvider/index.mjs";
 import { VDivider } from "../../components/VDivider/index.mjs";
 import { makeVTextFieldProps, VTextField } from "../../components/VTextField/VTextField.mjs"; // Composables
+import { useHold } from "./hold.mjs";
+import { useFocus } from "../../composables/focus.mjs";
 import { useForm } from "../../composables/form.mjs";
 import { forwardRefs } from "../../composables/forwardRefs.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
@@ -39,7 +41,7 @@ const makeVNumberInputProps = propsFactory({
     type: Number,
     default: 0
   },
-  ...omit(makeVTextFieldProps({}), ['modelValue'])
+  ...omit(makeVTextFieldProps(), ['modelValue', 'validationValue'])
 }, 'VNumberInput');
 export const VNumberInput = genericComponent()({
   name: 'VNumberInput',
@@ -54,9 +56,19 @@ export const VNumberInput = genericComponent()({
       slots
     } = _ref;
     const vTextFieldRef = ref();
+    const {
+      holdStart,
+      holdStop
+    } = useHold({
+      toggleUpDown
+    });
     const form = useForm(props);
     const controlsDisabled = computed(() => form.isDisabled.value || form.isReadonly.value);
-    const isFocused = ref(false);
+    const {
+      isFocused,
+      focus,
+      blur
+    } = useFocus(props);
     function correctPrecision(val) {
       let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.precision;
       const fixed = precision == null ? String(val) : val.toFixed(precision);
@@ -68,8 +80,8 @@ export const VNumberInput = genericComponent()({
     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 (model.value == null) {
+        _inputText.value = null;
       } else if (!isNaN(model.value)) {
         _inputText.value = correctPrecision(model.value);
       }
@@ -102,10 +114,18 @@ export const VNumberInput = genericComponent()({
     const controlNodeSize = computed(() => controlVariant.value === 'split' ? 'default' : 'small');
     const controlNodeDefaultHeight = computed(() => controlVariant.value === 'stacked' ? 'auto' : '100%');
     const incrementSlotProps = computed(() => ({
-      click: onClickUp
+      props: {
+        onClick: onControlClick,
+        onPointerup: onControlMouseup,
+        onPointerdown: onUpControlMousedown
+      }
     }));
     const decrementSlotProps = computed(() => ({
-      click: onClickDown
+      props: {
+        onClick: onControlClick,
+        onPointerup: onControlMouseup,
+        onPointerdown: onDownControlMousedown
+      }
     }));
     watch(() => props.precision, () => formatInputValue());
     onMounted(() => {
@@ -132,14 +152,6 @@ export const VNumberInput = genericComponent()({
         if (canDecrease.value) inputText.value = correctPrecision(model.value - props.step, inferredPrecision);
       }
     }
-    function onClickUp(e) {
-      e.stopPropagation();
-      toggleUpDown();
-    }
-    function onClickDown(e) {
-      e.stopPropagation();
-      toggleUpDown(false);
-    }
     function onBeforeinput(e) {
       if (!e.data) return;
       const existingTxt = e.target?.value;
@@ -177,8 +189,29 @@ export const VNumberInput = genericComponent()({
         }
       }
     }
-    function onControlMousedown(e) {
+    function onControlClick(e) {
+      e.stopPropagation();
+    }
+    function onControlMouseup(e) {
+      const el = e.currentTarget;
+      el?.releasePointerCapture(e.pointerId);
+      e.preventDefault();
+      e.stopPropagation();
+      holdStop();
+    }
+    function onUpControlMousedown(e) {
+      const el = e.currentTarget;
+      el?.setPointerCapture(e.pointerId);
+      e.preventDefault();
+      e.stopPropagation();
+      holdStart('up');
+    }
+    function onDownControlMousedown(e) {
+      const el = e.currentTarget;
+      el?.setPointerCapture(e.pointerId);
+      e.preventDefault();
       e.stopPropagation();
+      holdStart('down');
     }
     function clampModel() {
       if (controlsDisabled.value) return;
@@ -207,11 +240,11 @@ export const VNumberInput = genericComponent()({
       inputText.value = model.value.toString();
     }
     function onFocus() {
-      isFocused.value = true;
+      focus();
       trimDecimalZeros();
     }
     function onBlur() {
-      isFocused.value = false;
+      blur();
       clampModel();
     }
     useRender(() => {
@@ -228,8 +261,9 @@ export const VNumberInput = genericComponent()({
           "data-testid": "increment",
           "aria-hidden": "true",
           "icon": incrementIcon.value,
-          "onClick": onClickUp,
-          "onMousedown": onControlMousedown,
+          "onClick": onControlClick,
+          "onPointerup": onControlMouseup,
+          "onPointerdown": onUpControlMousedown,
           "size": controlNodeSize.value,
           "tabindex": "-1"
         }, null) : _createVNode(VDefaultsProvider, {
@@ -258,8 +292,9 @@ export const VNumberInput = genericComponent()({
           "icon": decrementIcon.value,
           "size": controlNodeSize.value,
           "tabindex": "-1",
-          "onClick": onClickDown,
-          "onMousedown": onControlMousedown
+          "onClick": onControlClick,
+          "onPointerup": onControlMouseup,
+          "onPointerdown": onDownControlMousedown
         }, null) : _createVNode(VDefaultsProvider, {
           "key": "decrement-defaults",
           "defaults": {
@@ -303,6 +338,7 @@ export const VNumberInput = genericComponent()({
         "ref": vTextFieldRef,
         "modelValue": inputText.value,
         "onUpdate:modelValue": $event => inputText.value = $event,
+        "validationValue": model.value,
         "onBeforeinput": onBeforeinput,
         "onFocus": onFocus,
         "onBlur": onBlur,