vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/labs/VNumberInput/VNumberInput.mjs

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, withDirectives as _withDirectives, mergeProps as _mergeProps, vModelText as _vModelText, createVNode as _createVNode } from "vue";
+import { Fragment as _Fragment, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 // Styles
 import "./VNumberInput.css";
 
@@ -10,8 +10,8 @@ import { filterFieldProps, makeVFieldProps, VField } from "../../components/VFie
 import { makeVInputProps, VInput } from "../../components/VInput/VInput.mjs"; // Composables
 import { makeFocusProps, useFocus } from "../../composables/focus.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
-import { computed, ref } from 'vue';
-import { filterInputAttrs, genericComponent, only, propsFactory, useRender } from "../../util/index.mjs"; // Types
+import { computed, ref, watchEffect } from 'vue';
+import { clamp, filterInputAttrs, genericComponent, getDecimals, only, propsFactory, useRender } from "../../util/index.mjs"; // Types
 const makeVNumberInputProps = propsFactory({
   controlVariant: {
     type: String,
@@ -19,9 +19,18 @@ const makeVNumberInputProps = propsFactory({
   },
   inset: Boolean,
   hideInput: Boolean,
-  min: Number,
-  max: Number,
-  step: Number,
+  min: {
+    type: Number,
+    default: -Infinity
+  },
+  max: {
+    type: Number,
+    default: Infinity
+  },
+  step: {
+    type: Number,
+    default: 1
+  },
   ...only(makeVInputProps(), ['density', 'disabled', 'focused', 'hideDetails', 'hint', 'label', 'persistentHint', 'readonly']),
   ...only(makeVFieldProps(), ['baseColor', 'bgColor', 'class', 'color', 'disabled', 'error', 'loading', 'reverse', 'rounded', 'style', 'theme', 'variant']),
   ...makeFocusProps()
@@ -32,8 +41,8 @@ export const VNumberInput = genericComponent()({
   props: {
     ...makeVNumberInputProps(),
     modelValue: {
-      type: [Number, String],
-      default: 0
+      type: Number,
+      default: undefined
     }
   },
   emits: {
@@ -52,20 +61,45 @@ export const VNumberInput = genericComponent()({
       blur
     } = useFocus(props);
     const inputRef = ref();
+    const stepDecimals = computed(() => getDecimals(props.step));
+    const modelDecimals = computed(() => model.value != null ? getDecimals(model.value) : 0);
+    const canIncrease = computed(() => {
+      if (model.value == null) return true;
+      return model.value + props.step <= props.max;
+    });
+    const canDecrease = computed(() => {
+      if (model.value == null) return true;
+      return model.value - props.step >= props.min;
+    });
+    watchEffect(() => {
+      if (model.value != null && (model.value < props.min || model.value > props.max)) {
+        model.value = clamp(model.value, props.min, props.max);
+      }
+    });
     function onFocus() {
       if (!isFocused.value) focus();
     }
     const controlVariant = computed(() => {
       return props.hideInput ? 'stacked' : props.controlVariant;
     });
+    const incrementSlotProps = computed(() => ({
+      click: onClickUp
+    }));
+    const decrementSlotProps = computed(() => ({
+      click: onClickDown
+    }));
     function toggleUpDown() {
       let increment = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      if (model.value == null) {
+        model.value = 0;
+        return;
+      }
+      const decimals = Math.max(modelDecimals.value, stepDecimals.value);
       if (increment) {
-        inputRef.value?.stepUp();
+        if (canIncrease.value) model.value = +(model.value + props.step).toFixed(decimals);
       } else {
-        inputRef.value?.stepDown();
+        if (canDecrease.value) model.value = +(model.value - props.step).toFixed(decimals);
       }
-      if (inputRef.value) model.value = parseInt(inputRef.value.value, 10);
     }
     function onClickUp() {
       toggleUpDown();
@@ -73,12 +107,28 @@ export const VNumberInput = genericComponent()({
     function onClickDown() {
       toggleUpDown(false);
     }
-    const incrementSlotProps = computed(() => ({
-      click: onClickUp
-    }));
-    const decrementSlotProps = computed(() => ({
-      click: onClickDown
-    }));
+    function onKeydown(e) {
+      if (['Enter', 'ArrowLeft', 'ArrowRight', 'Backspace'].includes(e.key) || e.ctrlKey) return;
+      if (['ArrowDown'].includes(e.key)) {
+        e.preventDefault();
+        toggleUpDown(false);
+        return;
+      }
+      if (['ArrowUp'].includes(e.key)) {
+        e.preventDefault();
+        toggleUpDown();
+        return;
+      }
+
+      // Only numbers, +, - & . are allowed
+      if (!/^[0-9\-+.]+$/.test(e.key)) {
+        e.preventDefault();
+      }
+    }
+    function onInput(e) {
+      const el = e.target;
+      model.value = el.value ? +el.value : undefined;
+    }
     useRender(() => {
       const fieldProps = filterFieldProps(props);
       const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
@@ -91,9 +141,11 @@ export const VNumberInput = genericComponent()({
         return _createVNode("div", {
           "class": "v-number-input__control"
         }, [!slots.decrement ? _createVNode(VBtn, {
+          "disabled": !canDecrease.value,
           "flat": true,
           "key": "decrement-btn",
           "height": defaultHeight,
+          "name": "decrement-btn",
           "icon": "$expand",
           "size": "small",
           "onClick": onClickDown
@@ -101,6 +153,7 @@ export const VNumberInput = genericComponent()({
           "key": "decrement-defaults",
           "defaults": {
             VBtn: {
+              disabled: !canDecrease.value,
               flat: true,
               height: defaultHeight,
               size: 'small',
@@ -112,9 +165,11 @@ export const VNumberInput = genericComponent()({
         }), _createVNode(VDivider, {
           "vertical": controlVariant.value !== 'stacked'
         }, null), !slots.increment ? _createVNode(VBtn, {
+          "disabled": !canIncrease.value,
           "flat": true,
           "key": "increment-btn",
           "height": defaultHeight,
+          "name": "increment-btn",
           "icon": "$collapse",
           "onClick": onClickUp,
           "size": "small"
@@ -122,6 +177,7 @@ export const VNumberInput = genericComponent()({
           "key": "increment-defaults",
           "defaults": {
             VBtn: {
+              disabled: !canIncrease.value,
               flat: true,
               height: defaultHeight,
               size: 'small',
@@ -163,17 +219,16 @@ export const VNumberInput = genericComponent()({
                 ...slotProps
               }
             } = _ref2;
-            return _withDirectives(_createVNode("input", _mergeProps({
+            return _createVNode("input", _mergeProps({
               "ref": inputRef,
-              "type": "number",
-              "onUpdate:modelValue": $event => model.value = $event,
+              "type": "text",
+              "value": model.value,
+              "onInput": onInput,
+              "onKeydown": onKeydown,
               "class": fieldClass,
-              "max": props.max,
-              "min": props.min,
-              "step": props.step,
               "onFocus": onFocus,
               "onBlur": blur
-            }, inputAttrs), null), [[_vModelText, model.value]]);
+            }, inputAttrs), null);
           },
           'append-inner': controlVariant.value === 'split' ? () => _createVNode("div", {
             "class": "v-number-input__control"

package/lib/labs/VNumberInput/VNumberInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VNumberInput.mjs","names":["VBtn","VDefaultsProvider","VDivider","filterFieldProps","makeVFieldProps","VField","makeVInputProps","VInput","makeFocusProps","useFocus","useProxiedModel","computed","ref","filterInputAttrs","genericComponent","only","propsFactory","useRender","makeVNumberInputProps","controlVariant","type","String","default","inset","Boolean","hideInput","min","Number","max","step","VNumberInput","name","inheritAttrs","props","modelValue","emits","val","setup","_ref","attrs","emit","slots","model","isFocused","focus","blur","inputRef","onFocus","value","toggleUpDown","increment","arguments","length","undefined","stepUp","stepDown","parseInt","onClickUp","onClickDown","incrementSlotProps","click","decrementSlotProps","fieldProps","rootAttrs","inputAttrs","_","inputProps","filterProps","controlNode","defaultHeight","_createVNode","decrement","flat","height","size","icon","dividerNode","_mergeProps","reverse","class","style","_ref2","fieldClass","slotProps","_withDirectives","$event","_vModelText","_Fragment"],"sources":["../../../src/labs/VNumberInput/VNumberInput.tsx"],"sourcesContent":["// Styles\nimport './VNumberInput.sass'\n\n// Components\nimport { VBtn } from '../../components/VBtn'\nimport { VDefaultsProvider } from '../../components/VDefaultsProvider'\nimport { VDivider } from '../../components/VDivider'\nimport { filterFieldProps, makeVFieldProps, VField } from '@/components/VField/VField'\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\n\n// Composables\nimport { makeFocusProps, useFocus } from '@/composables/focus'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { filterInputAttrs, genericComponent, only, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VFieldSlots } from '@/components/VField/VField'\nimport type { VInputSlots } from '@/components/VInput/VInput'\n\ntype ControlSlot = {\n  click: () => void\n}\n\ntype VNumberInputSlots = Omit<VInputSlots & VFieldSlots, 'default'> & {\n  increment: ControlSlot\n  decrement: ControlSlot\n}\n\ntype ControlVariant = 'default' | 'stacked' | 'split'\n\nconst makeVNumberInputProps = propsFactory({\n  controlVariant: {\n    type: String as PropType<ControlVariant>,\n    default: 'default',\n  },\n  inset: Boolean,\n  hideInput: Boolean,\n  min: Number,\n  max: Number,\n  step: Number,\n\n  ...only(makeVInputProps(), [\n    'density',\n    'disabled',\n    'focused',\n    'hideDetails',\n    'hint',\n    'label',\n    'persistentHint',\n    'readonly',\n  ]),\n  ...only(makeVFieldProps(), [\n    'baseColor',\n    'bgColor',\n    'class',\n    'color',\n    'disabled',\n    'error',\n    'loading',\n    'reverse',\n    'rounded',\n    'style',\n    'theme',\n    'variant',\n  ]),\n  ...makeFocusProps(),\n}, 'VNumberInput')\n\nexport const VNumberInput = genericComponent<VNumberInputSlots>()({\n  name: 'VNumberInput',\n\n  inheritAttrs: false,\n\n  props: {\n    ...makeVNumberInputProps(),\n\n    modelValue: {\n      type: [Number, String],\n      default: 0,\n    },\n  },\n\n  emits: {\n    'update:modelValue': (val: number) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const { isFocused, focus, blur } = useFocus(props)\n    const inputRef = ref<HTMLInputElement>()\n\n    function onFocus () {\n      if (!isFocused.value) focus()\n    }\n\n    const controlVariant = computed(() => {\n      return props.hideInput ? 'stacked' : props.controlVariant\n    })\n\n    function toggleUpDown (increment = true) {\n      if (increment) {\n        inputRef.value?.stepUp()\n      } else {\n        inputRef.value?.stepDown()\n      }\n\n      if (inputRef.value) model.value = parseInt(inputRef.value.value, 10)\n    }\n\n    function onClickUp () {\n      toggleUpDown()\n    }\n\n    function onClickDown () {\n      toggleUpDown(false)\n    }\n\n    const incrementSlotProps = computed(() => ({ click: onClickUp }))\n\n    const decrementSlotProps = computed(() => ({ click: onClickDown }))\n\n    useRender(() => {\n      const fieldProps = filterFieldProps(props)\n      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n      const { modelValue: _, ...inputProps } = VInput.filterProps(props)\n\n      function controlNode () {\n        const defaultHeight = controlVariant.value === 'stacked' ? 'auto' : '100%'\n        return (\n          <div class=\"v-number-input__control\">\n            {\n              !slots.decrement ? (\n                <VBtn\n                  flat\n                  key=\"decrement-btn\"\n                  height={ defaultHeight }\n                  icon=\"$expand\"\n                  size=\"small\"\n                  onClick={ onClickDown }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"decrement-defaults\"\n                  defaults={{\n                    VBtn: {\n                      flat: true,\n                      height: defaultHeight,\n                      size: 'small',\n                      icon: '$expand',\n                    },\n                  }}\n                >\n                  { slots.decrement(decrementSlotProps.value) }\n                </VDefaultsProvider>\n              )\n            }\n\n            <VDivider\n              vertical={ controlVariant.value !== 'stacked' }\n            />\n\n            {\n              !slots.increment ? (\n                <VBtn\n                  flat\n                  key=\"increment-btn\"\n                  height={ defaultHeight }\n                  icon=\"$collapse\"\n                  onClick={ onClickUp }\n                  size=\"small\"\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"increment-defaults\"\n                  defaults={{\n                    VBtn: {\n                      flat: true,\n                      height: defaultHeight,\n                      size: 'small',\n                      icon: '$collapse',\n                    },\n                  }}\n                >\n                  { slots.increment(incrementSlotProps.value) }\n                </VDefaultsProvider>\n              )\n            }\n          </div>\n        )\n      }\n\n      function dividerNode () {\n        return !props.hideInput && !props.inset ? <VDivider vertical /> : undefined\n      }\n\n      return (\n        <VInput\n          class={[\n            'v-number-input',\n            {\n              'v-number-input--default': controlVariant.value === 'default',\n              'v-number-input--hide-input': props.hideInput,\n              'v-number-input--inset': props.inset,\n              'v-number-input--reverse': props.reverse,\n              'v-number-input--split': controlVariant.value === 'split',\n              'v-number-input--stacked': controlVariant.value === 'stacked',\n            },\n            props.class,\n          ]}\n          { ...rootAttrs }\n          { ...inputProps }\n          focused={ isFocused.value }\n          style={ props.style }\n        >\n          {{\n            ...slots,\n            default: () => (\n              <VField\n                { ...fieldProps }\n                active\n                focused={ isFocused.value }\n              >\n                {{\n                  ...slots,\n                  default: ({\n                    props: { class: fieldClass, ...slotProps },\n                  }) => (\n                    <input\n                      ref={ inputRef }\n                      type=\"number\"\n                      v-model={ model.value }\n                      class={ fieldClass }\n                      max={ props.max }\n                      min={ props.min }\n                      step={ props.step }\n                      onFocus={ onFocus }\n                      onBlur={ blur }\n                      { ...inputAttrs }\n                    />\n                  ),\n                  'append-inner': controlVariant.value === 'split' ? () => (\n                    <div class=\"v-number-input__control\">\n                      <VDivider vertical />\n\n                      <VBtn\n                        flat\n                        height=\"100%\"\n                        icon=\"$plus\"\n                        tile\n                        onClick={ onClickUp }\n                      />\n                    </div>\n                  ) : (!props.reverse\n                    ? () => <>{ dividerNode() }{ controlNode() }</>\n                    : undefined),\n                  'prepend-inner': controlVariant.value === 'split' ? () => (\n                    <div class=\"v-number-input__control\">\n                      <VBtn\n                        flat\n                        height=\"100%\"\n                        icon=\"$minus\"\n                        tile\n                        onClick={ onClickDown }\n                      />\n\n                      <VDivider vertical />\n                    </div>\n                  ) : (props.reverse\n                    ? () => <>{ controlNode() }{ dividerNode() }</>\n                    : undefined),\n                }}\n              </VField>\n            ),\n          }}\n        </VInput>\n      )\n    })\n  },\n})\n\nexport type VNumberInput = InstanceType<typeof VNumberInput>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VNumberInput.mjs","names":["VBtn","VDefaultsProvider","VDivider","filterFieldProps","makeVFieldProps","VField","makeVInputProps","VInput","makeFocusProps","useFocus","useProxiedModel","computed","ref","watchEffect","clamp","filterInputAttrs","genericComponent","getDecimals","only","propsFactory","useRender","makeVNumberInputProps","controlVariant","type","String","default","inset","Boolean","hideInput","min","Number","Infinity","max","step","VNumberInput","name","inheritAttrs","props","modelValue","undefined","emits","val","setup","_ref","attrs","emit","slots","model","isFocused","focus","blur","inputRef","stepDecimals","modelDecimals","value","canIncrease","canDecrease","onFocus","incrementSlotProps","click","onClickUp","decrementSlotProps","onClickDown","toggleUpDown","increment","arguments","length","decimals","Math","toFixed","onKeydown","e","includes","key","ctrlKey","preventDefault","test","onInput","el","target","fieldProps","rootAttrs","inputAttrs","_","inputProps","filterProps","controlNode","defaultHeight","_createVNode","decrement","disabled","flat","height","size","icon","dividerNode","_mergeProps","reverse","class","style","_ref2","fieldClass","slotProps","_Fragment"],"sources":["../../../src/labs/VNumberInput/VNumberInput.tsx"],"sourcesContent":["// Styles\nimport './VNumberInput.sass'\n\n// Components\nimport { VBtn } from '../../components/VBtn'\nimport { VDefaultsProvider } from '../../components/VDefaultsProvider'\nimport { VDivider } from '../../components/VDivider'\nimport { filterFieldProps, makeVFieldProps, VField } from '@/components/VField/VField'\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\n\n// Composables\nimport { makeFocusProps, useFocus } from '@/composables/focus'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref, watchEffect } from 'vue'\nimport { clamp, filterInputAttrs, genericComponent, getDecimals, only, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VFieldSlots } from '@/components/VField/VField'\nimport type { VInputSlots } from '@/components/VInput/VInput'\n\ntype ControlSlot = {\n  click: () => void\n}\n\ntype VNumberInputSlots = Omit<VInputSlots & VFieldSlots, 'default'> & {\n  increment: ControlSlot\n  decrement: ControlSlot\n}\n\ntype ControlVariant = 'default' | 'stacked' | 'split'\n\nconst makeVNumberInputProps = propsFactory({\n  controlVariant: {\n    type: String as PropType<ControlVariant>,\n    default: 'default',\n  },\n  inset: Boolean,\n  hideInput: Boolean,\n  min: {\n    type: Number,\n    default: -Infinity,\n  },\n  max: {\n    type: Number,\n    default: Infinity,\n  },\n  step: {\n    type: Number,\n    default: 1,\n  },\n\n  ...only(makeVInputProps(), [\n    'density',\n    'disabled',\n    'focused',\n    'hideDetails',\n    'hint',\n    'label',\n    'persistentHint',\n    'readonly',\n  ]),\n  ...only(makeVFieldProps(), [\n    'baseColor',\n    'bgColor',\n    'class',\n    'color',\n    'disabled',\n    'error',\n    'loading',\n    'reverse',\n    'rounded',\n    'style',\n    'theme',\n    'variant',\n  ]),\n  ...makeFocusProps(),\n}, 'VNumberInput')\n\nexport const VNumberInput = genericComponent<VNumberInputSlots>()({\n  name: 'VNumberInput',\n\n  inheritAttrs: false,\n\n  props: {\n    ...makeVNumberInputProps(),\n\n    modelValue: {\n      type: Number,\n      default: undefined,\n    },\n  },\n\n  emits: {\n    'update:modelValue': (val: number) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const { isFocused, focus, blur } = useFocus(props)\n    const inputRef = ref<HTMLInputElement>()\n\n    const stepDecimals = computed(() => getDecimals(props.step))\n    const modelDecimals = computed(() => model.value != null ? getDecimals(model.value) : 0)\n\n    const canIncrease = computed(() => {\n      if (model.value == null) return true\n      return model.value + props.step <= props.max\n    })\n    const canDecrease = computed(() => {\n      if (model.value == null) return true\n      return model.value - props.step >= props.min\n    })\n\n    watchEffect(() => {\n      if (model.value != null && (model.value < props.min || model.value > props.max)) {\n        model.value = clamp(model.value, props.min, props.max)\n      }\n    })\n\n    function onFocus () {\n      if (!isFocused.value) focus()\n    }\n\n    const controlVariant = computed(() => {\n      return props.hideInput ? 'stacked' : props.controlVariant\n    })\n\n    const incrementSlotProps = computed(() => ({ click: onClickUp }))\n\n    const decrementSlotProps = computed(() => ({ click: onClickDown }))\n\n    function toggleUpDown (increment = true) {\n      if (model.value == null) {\n        model.value = 0\n        return\n      }\n\n      const decimals = Math.max(modelDecimals.value, stepDecimals.value)\n      if (increment) {\n        if (canIncrease.value) model.value = +(((model.value + props.step).toFixed(decimals)))\n      } else {\n        if (canDecrease.value) model.value = +(((model.value - props.step).toFixed(decimals)))\n      }\n    }\n\n    function onClickUp () {\n      toggleUpDown()\n    }\n\n    function onClickDown () {\n      toggleUpDown(false)\n    }\n\n    function onKeydown (e: KeyboardEvent) {\n      if (\n        ['Enter', 'ArrowLeft', 'ArrowRight', 'Backspace'].includes(e.key) ||\n        e.ctrlKey\n      ) return\n\n      if (['ArrowDown'].includes(e.key)) {\n        e.preventDefault()\n        toggleUpDown(false)\n        return\n      }\n      if (['ArrowUp'].includes(e.key)) {\n        e.preventDefault()\n        toggleUpDown()\n        return\n      }\n\n      // Only numbers, +, - & . are allowed\n      if (!/^[0-9\\-+.]+$/.test(e.key)) {\n        e.preventDefault()\n      }\n    }\n\n    function onInput (e: Event) {\n      const el = e.target as HTMLInputElement\n      model.value = el.value ? +(el.value) : undefined\n    }\n\n    useRender(() => {\n      const fieldProps = filterFieldProps(props)\n      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n      const { modelValue: _, ...inputProps } = VInput.filterProps(props)\n\n      function controlNode () {\n        const defaultHeight = controlVariant.value === 'stacked' ? 'auto' : '100%'\n        return (\n          <div class=\"v-number-input__control\">\n            {\n              !slots.decrement ? (\n                <VBtn\n                  disabled={ !canDecrease.value }\n                  flat\n                  key=\"decrement-btn\"\n                  height={ defaultHeight }\n                  name=\"decrement-btn\"\n                  icon=\"$expand\"\n                  size=\"small\"\n                  onClick={ onClickDown }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"decrement-defaults\"\n                  defaults={{\n                    VBtn: {\n                      disabled: !canDecrease.value,\n                      flat: true,\n                      height: defaultHeight,\n                      size: 'small',\n                      icon: '$expand',\n                    },\n                  }}\n                >\n                  { slots.decrement(decrementSlotProps.value) }\n                </VDefaultsProvider>\n              )\n            }\n\n            <VDivider\n              vertical={ controlVariant.value !== 'stacked' }\n            />\n\n            {\n              !slots.increment ? (\n                <VBtn\n                  disabled={ !canIncrease.value }\n                  flat\n                  key=\"increment-btn\"\n                  height={ defaultHeight }\n                  name=\"increment-btn\"\n                  icon=\"$collapse\"\n                  onClick={ onClickUp }\n                  size=\"small\"\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"increment-defaults\"\n                  defaults={{\n                    VBtn: {\n                      disabled: !canIncrease.value,\n                      flat: true,\n                      height: defaultHeight,\n                      size: 'small',\n                      icon: '$collapse',\n                    },\n                  }}\n                >\n                  { slots.increment(incrementSlotProps.value) }\n                </VDefaultsProvider>\n              )\n            }\n          </div>\n        )\n      }\n\n      function dividerNode () {\n        return !props.hideInput && !props.inset ? <VDivider vertical /> : undefined\n      }\n\n      return (\n        <VInput\n          class={[\n            'v-number-input',\n            {\n              'v-number-input--default': controlVariant.value === 'default',\n              'v-number-input--hide-input': props.hideInput,\n              'v-number-input--inset': props.inset,\n              'v-number-input--reverse': props.reverse,\n              'v-number-input--split': controlVariant.value === 'split',\n              'v-number-input--stacked': controlVariant.value === 'stacked',\n            },\n            props.class,\n          ]}\n          { ...rootAttrs }\n          { ...inputProps }\n          focused={ isFocused.value }\n          style={ props.style }\n        >\n          {{\n            ...slots,\n            default: () => (\n              <VField\n                { ...fieldProps }\n                active\n                focused={ isFocused.value }\n              >\n                {{\n                  ...slots,\n                  default: ({\n                    props: { class: fieldClass, ...slotProps },\n                  }) => (\n                    <input\n                      ref={ inputRef }\n                      type=\"text\"\n                      value={ model.value }\n                      onInput={ onInput }\n                      onKeydown={ onKeydown }\n                      class={ fieldClass }\n                      onFocus={ onFocus }\n                      onBlur={ blur }\n                      { ...inputAttrs }\n                    />\n                  ),\n                  'append-inner': controlVariant.value === 'split' ? () => (\n                    <div class=\"v-number-input__control\">\n                      <VDivider vertical />\n\n                      <VBtn\n                        flat\n                        height=\"100%\"\n                        icon=\"$plus\"\n                        tile\n                        onClick={ onClickUp }\n                      />\n                    </div>\n                  ) : (!props.reverse\n                    ? () => <>{ dividerNode() }{ controlNode() }</>\n                    : undefined),\n                  'prepend-inner': controlVariant.value === 'split' ? () => (\n                    <div class=\"v-number-input__control\">\n                      <VBtn\n                        flat\n                        height=\"100%\"\n                        icon=\"$minus\"\n                        tile\n                        onClick={ onClickDown }\n                      />\n\n                      <VDivider vertical />\n                    </div>\n                  ) : (props.reverse\n                    ? () => <>{ controlNode() }{ dividerNode() }</>\n                    : undefined),\n                }}\n              </VField>\n            ),\n          }}\n        </VInput>\n      )\n    })\n  },\n})\n\nexport type VNumberInput = InstanceType<typeof VNumberInput>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,IAAI;AAAA,SACJC,iBAAiB;AAAA,SACjBC,QAAQ;AAAA,SACRC,gBAAgB,EAAEC,eAAe,EAAEC,MAAM;AAAA,SACzCC,eAAe,EAAEC,MAAM,8CAEhC;AAAA,SACSC,cAAc,EAAEC,QAAQ;AAAA,SACxBC,eAAe,8CAExB;AACA,SAASC,QAAQ,EAAEC,GAAG,EAAEC,WAAW,QAAQ,KAAK;AAAA,SACvCC,KAAK,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,WAAW,EAAEC,IAAI,EAAEC,YAAY,EAAEC,SAAS,gCAE9F;AAgBA,MAAMC,qBAAqB,GAAGF,YAAY,CAAC;EACzCG,cAAc,EAAE;IACdC,IAAI,EAAEC,MAAkC;IACxCC,OAAO,EAAE;EACX,CAAC;EACDC,KAAK,EAAEC,OAAO;EACdC,SAAS,EAAED,OAAO;EAClBE,GAAG,EAAE;IACHN,IAAI,EAAEO,MAAM;IACZL,OAAO,EAAE,CAACM;EACZ,CAAC;EACDC,GAAG,EAAE;IACHT,IAAI,EAAEO,MAAM;IACZL,OAAO,EAAEM;EACX,CAAC;EACDE,IAAI,EAAE;IACJV,IAAI,EAAEO,MAAM;IACZL,OAAO,EAAE;EACX,CAAC;EAED,GAAGP,IAAI,CAACZ,eAAe,CAAC,CAAC,EAAE,CACzB,SAAS,EACT,UAAU,EACV,SAAS,EACT,aAAa,EACb,MAAM,EACN,OAAO,EACP,gBAAgB,EAChB,UAAU,CACX,CAAC;EACF,GAAGY,IAAI,CAACd,eAAe,CAAC,CAAC,EAAE,CACzB,WAAW,EACX,SAAS,EACT,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,SAAS,EACT,SAAS,EACT,SAAS,EACT,OAAO,EACP,OAAO,EACP,SAAS,CACV,CAAC;EACF,GAAGI,cAAc,CAAC;AACpB,CAAC,EAAE,cAAc,CAAC;AAElB,OAAO,MAAM0B,YAAY,GAAGlB,gBAAgB,CAAoB,CAAC,CAAC;EAChEmB,IAAI,EAAE,cAAc;EAEpBC,YAAY,EAAE,KAAK;EAEnBC,KAAK,EAAE;IACL,GAAGhB,qBAAqB,CAAC,CAAC;IAE1BiB,UAAU,EAAE;MACVf,IAAI,EAAEO,MAAM;MACZL,OAAO,EAAEc;IACX;EACF,CAAC;EAEDC,KAAK,EAAE;IACL,mBAAmB,EAAGC,GAAW,IAAK;EACxC,CAAC;EAEDC,KAAKA,CAAEL,KAAK,EAAAM,IAAA,EAA0B;IAAA,IAAxB;MAAEC,KAAK;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAH,IAAA;IAClC,MAAMI,KAAK,GAAGrC,eAAe,CAAC2B,KAAK,EAAE,YAAY,CAAC;IAClD,MAAM;MAAEW,SAAS;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAGzC,QAAQ,CAAC4B,KAAK,CAAC;IAClD,MAAMc,QAAQ,GAAGvC,GAAG,CAAmB,CAAC;IAExC,MAAMwC,YAAY,GAAGzC,QAAQ,CAAC,MAAMM,WAAW,CAACoB,KAAK,CAACJ,IAAI,CAAC,CAAC;IAC5D,MAAMoB,aAAa,GAAG1C,QAAQ,CAAC,MAAMoC,KAAK,CAACO,KAAK,IAAI,IAAI,GAAGrC,WAAW,CAAC8B,KAAK,CAACO,KAAK,CAAC,GAAG,CAAC,CAAC;IAExF,MAAMC,WAAW,GAAG5C,QAAQ,CAAC,MAAM;MACjC,IAAIoC,KAAK,CAACO,KAAK,IAAI,IAAI,EAAE,OAAO,IAAI;MACpC,OAAOP,KAAK,CAACO,KAAK,GAAGjB,KAAK,CAACJ,IAAI,IAAII,KAAK,CAACL,GAAG;IAC9C,CAAC,CAAC;IACF,MAAMwB,WAAW,GAAG7C,QAAQ,CAAC,MAAM;MACjC,IAAIoC,KAAK,CAACO,KAAK,IAAI,IAAI,EAAE,OAAO,IAAI;MACpC,OAAOP,KAAK,CAACO,KAAK,GAAGjB,KAAK,CAACJ,IAAI,IAAII,KAAK,CAACR,GAAG;IAC9C,CAAC,CAAC;IAEFhB,WAAW,CAAC,MAAM;MAChB,IAAIkC,KAAK,CAACO,KAAK,IAAI,IAAI,KAAKP,KAAK,CAACO,KAAK,GAAGjB,KAAK,CAACR,GAAG,IAAIkB,KAAK,CAACO,KAAK,GAAGjB,KAAK,CAACL,GAAG,CAAC,EAAE;QAC/Ee,KAAK,CAACO,KAAK,GAAGxC,KAAK,CAACiC,KAAK,CAACO,KAAK,EAAEjB,KAAK,CAACR,GAAG,EAAEQ,KAAK,CAACL,GAAG,CAAC;MACxD;IACF,CAAC,CAAC;IAEF,SAASyB,OAAOA,CAAA,EAAI;MAClB,IAAI,CAACT,SAAS,CAACM,KAAK,EAAEL,KAAK,CAAC,CAAC;IAC/B;IAEA,MAAM3B,cAAc,GAAGX,QAAQ,CAAC,MAAM;MACpC,OAAO0B,KAAK,CAACT,SAAS,GAAG,SAAS,GAAGS,KAAK,CAACf,cAAc;IAC3D,CAAC,CAAC;IAEF,MAAMoC,kBAAkB,GAAG/C,QAAQ,CAAC,OAAO;MAAEgD,KAAK,EAAEC;IAAU,CAAC,CAAC,CAAC;IAEjE,MAAMC,kBAAkB,GAAGlD,QAAQ,CAAC,OAAO;MAAEgD,KAAK,EAAEG;IAAY,CAAC,CAAC,CAAC;IAEnE,SAASC,YAAYA,CAAA,EAAoB;MAAA,IAAlBC,SAAS,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAA1B,SAAA,GAAA0B,SAAA,MAAG,IAAI;MACrC,IAAIlB,KAAK,CAACO,KAAK,IAAI,IAAI,EAAE;QACvBP,KAAK,CAACO,KAAK,GAAG,CAAC;QACf;MACF;MAEA,MAAMa,QAAQ,GAAGC,IAAI,CAACpC,GAAG,CAACqB,aAAa,CAACC,KAAK,EAAEF,YAAY,CAACE,KAAK,CAAC;MAClE,IAAIU,SAAS,EAAE;QACb,IAAIT,WAAW,CAACD,KAAK,EAAEP,KAAK,CAACO,KAAK,GAAG,CAAG,CAACP,KAAK,CAACO,KAAK,GAAGjB,KAAK,CAACJ,IAAI,EAAEoC,OAAO,CAACF,QAAQ,CAAG;MACxF,CAAC,MAAM;QACL,IAAIX,WAAW,CAACF,KAAK,EAAEP,KAAK,CAACO,KAAK,GAAG,CAAG,CAACP,KAAK,CAACO,KAAK,GAAGjB,KAAK,CAACJ,IAAI,EAAEoC,OAAO,CAACF,QAAQ,CAAG;MACxF;IACF;IAEA,SAASP,SAASA,CAAA,EAAI;MACpBG,YAAY,CAAC,CAAC;IAChB;IAEA,SAASD,WAAWA,CAAA,EAAI;MACtBC,YAAY,CAAC,KAAK,CAAC;IACrB;IAEA,SAASO,SAASA,CAAEC,CAAgB,EAAE;MACpC,IACE,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACD,CAAC,CAACE,GAAG,CAAC,IACjEF,CAAC,CAACG,OAAO,EACT;MAEF,IAAI,CAAC,WAAW,CAAC,CAACF,QAAQ,CAACD,CAAC,CAACE,GAAG,CAAC,EAAE;QACjCF,CAAC,CAACI,cAAc,CAAC,CAAC;QAClBZ,YAAY,CAAC,KAAK,CAAC;QACnB;MACF;MACA,IAAI,CAAC,SAAS,CAAC,CAACS,QAAQ,CAACD,CAAC,CAACE,GAAG,CAAC,EAAE;QAC/BF,CAAC,CAACI,cAAc,CAAC,CAAC;QAClBZ,YAAY,CAAC,CAAC;QACd;MACF;;MAEA;MACA,IAAI,CAAC,cAAc,CAACa,IAAI,CAACL,CAAC,CAACE,GAAG,CAAC,EAAE;QAC/BF,CAAC,CAACI,cAAc,CAAC,CAAC;MACpB;IACF;IAEA,SAASE,OAAOA,CAAEN,CAAQ,EAAE;MAC1B,MAAMO,EAAE,GAAGP,CAAC,CAACQ,MAA0B;MACvChC,KAAK,CAACO,KAAK,GAAGwB,EAAE,CAACxB,KAAK,GAAG,CAAEwB,EAAE,CAACxB,KAAM,GAAGf,SAAS;IAClD;IAEAnB,SAAS,CAAC,MAAM;MACd,MAAM4D,UAAU,GAAG7E,gBAAgB,CAACkC,KAAK,CAAC;MAC1C,MAAM,CAAC4C,SAAS,EAAEC,UAAU,CAAC,GAAGnE,gBAAgB,CAAC6B,KAAK,CAAC;MACvD,MAAM;QAAEN,UAAU,EAAE6C,CAAC;QAAE,GAAGC;MAAW,CAAC,GAAG7E,MAAM,CAAC8E,WAAW,CAAChD,KAAK,CAAC;MAElE,SAASiD,WAAWA,CAAA,EAAI;QACtB,MAAMC,aAAa,GAAGjE,cAAc,CAACgC,KAAK,KAAK,SAAS,GAAG,MAAM,GAAG,MAAM;QAC1E,OAAAkC,YAAA;UAAA;QAAA,IAGM,CAAC1C,KAAK,CAAC2C,SAAS,GAAAD,YAAA,CAAAxF,IAAA;UAAA,YAED,CAACwD,WAAW,CAACF,KAAK;UAAA;UAAA;UAAA,UAGpBiC,aAAa;UAAA;UAAA;UAAA;UAAA,WAIZzB;QAAW,WAAA0B,YAAA,CAAAvF,iBAAA;UAAA;UAAA,YAKX;YACRD,IAAI,EAAE;cACJ0F,QAAQ,EAAE,CAAClC,WAAW,CAACF,KAAK;cAC5BqC,IAAI,EAAE,IAAI;cACVC,MAAM,EAAEL,aAAa;cACrBM,IAAI,EAAE,OAAO;cACbC,IAAI,EAAE;YACR;UACF;QAAC;UAAArE,OAAA,EAAAA,CAAA,MAECqB,KAAK,CAAC2C,SAAS,CAAC5B,kBAAkB,CAACP,KAAK,CAAC;QAAA,EAE9C,EAAAkC,YAAA,CAAAtF,QAAA;UAAA,YAIUoB,cAAc,CAACgC,KAAK,KAAK;QAAS,UAI7C,CAACR,KAAK,CAACkB,SAAS,GAAAwB,YAAA,CAAAxF,IAAA;UAAA,YAED,CAACuD,WAAW,CAACD,KAAK;UAAA;UAAA;UAAA,UAGpBiC,aAAa;UAAA;UAAA;UAAA,WAGZ3B,SAAS;UAAA;QAAA,WAAA4B,YAAA,CAAAvF,iBAAA;UAAA;UAAA,YAMT;YACRD,IAAI,EAAE;cACJ0F,QAAQ,EAAE,CAACnC,WAAW,CAACD,KAAK;cAC5BqC,IAAI,EAAE,IAAI;cACVC,MAAM,EAAEL,aAAa;cACrBM,IAAI,EAAE,OAAO;cACbC,IAAI,EAAE;YACR;UACF;QAAC;UAAArE,OAAA,EAAAA,CAAA,MAECqB,KAAK,CAACkB,SAAS,CAACN,kBAAkB,CAACJ,KAAK,CAAC;QAAA,EAE9C;MAIT;MAEA,SAASyC,WAAWA,CAAA,EAAI;QACtB,OAAO,CAAC1D,KAAK,CAACT,SAAS,IAAI,CAACS,KAAK,CAACX,KAAK,GAAA8D,YAAA,CAAAtF,QAAA;UAAA;QAAA,WAA2BqC,SAAS;MAC7E;MAEA,OAAAiD,YAAA,CAAAjF,MAAA,EAAAyF,WAAA;QAAA,SAEW,CACL,gBAAgB,EAChB;UACE,yBAAyB,EAAE1E,cAAc,CAACgC,KAAK,KAAK,SAAS;UAC7D,4BAA4B,EAAEjB,KAAK,CAACT,SAAS;UAC7C,uBAAuB,EAAES,KAAK,CAACX,KAAK;UACpC,yBAAyB,EAAEW,KAAK,CAAC4D,OAAO;UACxC,uBAAuB,EAAE3E,cAAc,CAACgC,KAAK,KAAK,OAAO;UACzD,yBAAyB,EAAEhC,cAAc,CAACgC,KAAK,KAAK;QACtD,CAAC,EACDjB,KAAK,CAAC6D,KAAK;MACZ,GACIjB,SAAS,EACTG,UAAU;QAAA,WACLpC,SAAS,CAACM,KAAK;QAAA,SACjBjB,KAAK,CAAC8D;MAAK;QAGjB,GAAGrD,KAAK;QACRrB,OAAO,EAAEA,CAAA,KAAA+D,YAAA,CAAAnF,MAAA,EAAA2F,WAAA,CAEAhB,UAAU;UAAA;UAAA,WAELhC,SAAS,CAACM;QAAK;UAGvB,GAAGR,KAAK;UACRrB,OAAO,EAAE2E,KAAA;YAAA,IAAC;cACR/D,KAAK,EAAE;gBAAE6D,KAAK,EAAEG,UAAU;gBAAE,GAAGC;cAAU;YAC3C,CAAC,GAAAF,KAAA;YAAA,OAAAZ,YAAA,UAAAQ,WAAA;cAAA,OAES7C,QAAQ;cAAA;cAAA,SAENJ,KAAK,CAACO,KAAK;cAAA,WACTuB,OAAO;cAAA,aACLP,SAAS;cAAA,SACb+B,UAAU;cAAA,WACR5C,OAAO;cAAA,UACRP;YAAI,GACRgC,UAAU;UAAA,CAElB;UACD,cAAc,EAAE5D,cAAc,CAACgC,KAAK,KAAK,OAAO,GAAG,MAAAkC,YAAA;YAAA;UAAA,IAAAA,YAAA,CAAAtF,QAAA;YAAA;UAAA,UAAAsF,YAAA,CAAAxF,IAAA;YAAA;YAAA;YAAA;YAAA;YAAA,WASnC4D;UAAS,UAGxB,GAAI,CAACvB,KAAK,CAAC4D,OAAO,GACf,MAAAT,YAAA,CAAAe,SAAA,SAAUR,WAAW,CAAC,CAAC,EAAIT,WAAW,CAAC,CAAC,EAAK,GAC7C/C,SAAU;UACd,eAAe,EAAEjB,cAAc,CAACgC,KAAK,KAAK,OAAO,GAAG,MAAAkC,YAAA;YAAA;UAAA,IAAAA,YAAA,CAAAxF,IAAA;YAAA;YAAA;YAAA;YAAA;YAAA,WAOpC8D;UAAW,UAAA0B,YAAA,CAAAtF,QAAA;YAAA;UAAA,UAK1B,GAAImC,KAAK,CAAC4D,OAAO,GACd,MAAAT,YAAA,CAAAe,SAAA,SAAUjB,WAAW,CAAC,CAAC,EAAIS,WAAW,CAAC,CAAC,EAAK,GAC7CxD;QAAU;MAGnB;IAIT,CAAC,CAAC;EACJ;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/labs/VNumberInput/VNumberInput.sass

@@ -1,48 +1,50 @@
 @use 'sass:selector'
+@use '../../styles/tools'
 @use './variables' as *
 
-.v-number-input
-  $root: &
-  $control-root: #{selector.append($root, '__control')}
+@include tools.layer('components')
+  .v-number-input
+    $root: &
+    $control-root: #{selector.append($root, '__control')}
 
-  input[type="number"]
-    -moz-appearance: textfield
+    input[type="number"]
+      -moz-appearance: textfield
 
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button
-      -webkit-appearance: none
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button
+        -webkit-appearance: none
 
-  .v-field
-    padding-inline-end: 0
-    padding-inline-start: 0
-
-  &--inset
-    .v-divider
-      height: $number-input-inset-divider-size
-      width: $number-input-inset-divider-size
-      align-self: center
-
-  &--split
-    .v-field__input
-      text-align: center
+    .v-field
+      padding-inline-end: 0
+      padding-inline-start: 0
+
+    &--inset
+      .v-divider
+        height: $number-input-inset-divider-size
+        width: $number-input-inset-divider-size
+        align-self: center
+
+    &--split
+      .v-field__input
+        text-align: center
+
+    &--stacked
+      #{$control-root}
+        flex-direction: column-reverse
+        .v-btn
+          flex: 1
+
+    &--hide-input
+      .v-field
+        flex: none
+        &__input
+          width: 0
+          padding-inline: 0
+
+    &__control
+      display: flex
+      height: 100%
 
-  &--stacked 
-    #{$control-root}
-      flex-direction: column-reverse
       .v-btn
-        flex: 1
-
-  &--hide-input
-    .v-field
-      flex: none
-      &__input
-        width: 0
-        padding-inline: 0
-
-  &__control
-    display: flex
-    height: 100%
-
-    .v-btn
-      background-color: transparent
-      border-radius: 0
+        background-color: transparent
+        border-radius: 0

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

@@ -50,11 +50,13 @@ declare const VNumberInput: {
         disabled: boolean;
         focused: boolean;
         readonly: boolean | null;
-        modelValue: string | number;
         variant: "underlined" | "filled" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled";
         inset: boolean;
         density: Density;
+        max: number;
         persistentHint: boolean;
+        min: number;
+        step: number;
         hideInput: boolean;
         controlVariant: ControlVariant;
     } & {
@@ -64,14 +66,12 @@ declare const VNumberInput: {
         color?: string | undefined;
         loading?: string | boolean | undefined;
         'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
+        modelValue?: number | undefined;
         rounded?: string | number | boolean | undefined;
         baseColor?: string | undefined;
-        max?: number | undefined;
         bgColor?: string | undefined;
         hint?: string | undefined;
         hideDetails?: boolean | "auto" | undefined;
-        min?: number | undefined;
-        step?: number | undefined;
     } & {
         $children?: {} | vue.VNodeChild | {
             clear?: ((arg: DefaultInputSlot & {
@@ -137,11 +137,13 @@ declare const VNumberInput: {
         disabled: boolean;
         focused: boolean;
         readonly: boolean | null;
-        modelValue: string | number;
         variant: "underlined" | "filled" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled";
         inset: boolean;
         density: Density;
+        max: number;
         persistentHint: boolean;
+        min: number;
+        step: number;
         hideInput: boolean;
         controlVariant: ControlVariant;
     } & {
@@ -151,14 +153,12 @@ declare const VNumberInput: {
         color?: string | undefined;
         loading?: string | boolean | undefined;
         'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
+        modelValue?: number | undefined;
         rounded?: string | number | boolean | undefined;
         baseColor?: string | undefined;
-        max?: number | undefined;
         bgColor?: string | undefined;
         hint?: string | undefined;
         hideDetails?: boolean | "auto" | undefined;
-        min?: number | undefined;
-        step?: number | undefined;
     } & {
         $children?: {} | vue.VNodeChild | {
             clear?: ((arg: DefaultInputSlot & {
@@ -222,12 +222,15 @@ declare const VNumberInput: {
         disabled: boolean;
         focused: boolean;
         readonly: boolean | null;
-        modelValue: string | number;
+        modelValue: number;
         rounded: string | number | boolean;
         variant: "underlined" | "filled" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled";
         inset: boolean;
         density: Density;
+        max: number;
         persistentHint: boolean;
+        min: number;
+        step: number;
         hideInput: boolean;
         controlVariant: ControlVariant;
     }, true, {}, vue.SlotsType<Partial<{
@@ -283,11 +286,13 @@ declare const VNumberInput: {
         disabled: boolean;
         focused: boolean;
         readonly: boolean | null;
-        modelValue: string | number;
         variant: "underlined" | "filled" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled";
         inset: boolean;
         density: Density;
+        max: number;
         persistentHint: boolean;
+        min: number;
+        step: number;
         hideInput: boolean;
         controlVariant: ControlVariant;
     } & {
@@ -297,14 +302,12 @@ declare const VNumberInput: {
         color?: string | undefined;
         loading?: string | boolean | undefined;
         'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
+        modelValue?: number | undefined;
         rounded?: string | number | boolean | undefined;
         baseColor?: string | undefined;
-        max?: number | undefined;
         bgColor?: string | undefined;
         hint?: string | undefined;
         hideDetails?: boolean | "auto" | undefined;
-        min?: number | undefined;
-        step?: number | undefined;
     } & {
         $children?: {} | vue.VNodeChild | {
             clear?: ((arg: DefaultInputSlot & {
@@ -368,12 +371,15 @@ declare const VNumberInput: {
         disabled: boolean;
         focused: boolean;
         readonly: boolean | null;
-        modelValue: string | number;
+        modelValue: number;
         rounded: string | number | boolean;
         variant: "underlined" | "filled" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled";
         inset: boolean;
         density: Density;
+        max: number;
         persistentHint: boolean;
+        min: number;
+        step: number;
         hideInput: boolean;
         controlVariant: ControlVariant;
     }>;
@@ -387,11 +393,13 @@ declare const VNumberInput: {
     disabled: boolean;
     focused: boolean;
     readonly: boolean | null;
-    modelValue: string | number;
     variant: "underlined" | "filled" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled";
     inset: boolean;
     density: Density;
+    max: number;
     persistentHint: boolean;
+    min: number;
+    step: number;
     hideInput: boolean;
     controlVariant: ControlVariant;
 } & {
@@ -401,14 +409,12 @@ declare const VNumberInput: {
     color?: string | undefined;
     loading?: string | boolean | undefined;
     'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
+    modelValue?: number | undefined;
     rounded?: string | number | boolean | undefined;
     baseColor?: string | undefined;
-    max?: number | undefined;
     bgColor?: string | undefined;
     hint?: string | undefined;
     hideDetails?: boolean | "auto" | undefined;
-    min?: number | undefined;
-    step?: number | undefined;
 } & {
     $children?: {} | vue.VNodeChild | {
         clear?: ((arg: DefaultInputSlot & {
@@ -474,12 +480,15 @@ declare const VNumberInput: {
     disabled: boolean;
     focused: boolean;
     readonly: boolean | null;
-    modelValue: string | number;
+    modelValue: number;
     rounded: string | number | boolean;
     variant: "underlined" | "filled" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled";
     inset: boolean;
     density: Density;
+    max: number;
     persistentHint: boolean;
+    min: number;
+    step: number;
     hideInput: boolean;
     controlVariant: ControlVariant;
 }, {}, string, vue.SlotsType<Partial<{
@@ -523,8 +532,8 @@ declare const VNumberInput: {
     }>[];
 }>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
+        type: NumberConstructor;
+        default: undefined;
     };
     focused: BooleanConstructor;
     'onUpdate:focused': PropType<(args_0: boolean) => void>;
@@ -572,13 +581,22 @@ declare const VNumberInput: {
     };
     inset: BooleanConstructor;
     hideInput: BooleanConstructor;
-    min: NumberConstructor;
-    max: NumberConstructor;
-    step: NumberConstructor;
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
 }, vue.ExtractPropTypes<{
     modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
+        type: NumberConstructor;
+        default: undefined;
     };
     focused: BooleanConstructor;
     'onUpdate:focused': PropType<(args_0: boolean) => void>;
@@ -626,9 +644,18 @@ declare const VNumberInput: {
     };
     inset: BooleanConstructor;
     hideInput: BooleanConstructor;
-    min: NumberConstructor;
-    max: NumberConstructor;
-    step: NumberConstructor;
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>>;
 type VNumberInput = InstanceType<typeof VNumberInput>;