vuetify 3.5.9 → 3.5.10

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

@@ -645,9 +645,9 @@ declare const VCalendarDay: {
         events?: any[] | undefined;
         dayIndex?: number | undefined;
     } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+        $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
-        };
+        } | (() => vue.VNodeChild);
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -668,9 +668,9 @@ declare const VCalendarDay: {
         events?: any[] | undefined;
         dayIndex?: number | undefined;
     } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+        $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
-        };
+        } | (() => vue.VNodeChild);
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -709,9 +709,9 @@ declare const VCalendarDay: {
         events?: any[] | undefined;
         dayIndex?: number | undefined;
     } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+        $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
-        };
+        } | (() => vue.VNodeChild);
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -745,9 +745,9 @@ declare const VCalendarDay: {
     events?: any[] | undefined;
     dayIndex?: number | undefined;
 } & {
-    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+    $children?: vue.VNodeChild | {
         default?: (() => vue.VNodeChild) | undefined;
-    };
+    } | (() => vue.VNodeChild);
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
     } | undefined;
@@ -870,9 +870,9 @@ declare const VCalendarHeader: {
     } & {
         title?: string | undefined;
     } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+        $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
-        };
+        } | (() => vue.VNodeChild);
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -894,9 +894,9 @@ declare const VCalendarHeader: {
     } & {
         title?: string | undefined;
     } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+        $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
-        };
+        } | (() => vue.VNodeChild);
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -930,9 +930,9 @@ declare const VCalendarHeader: {
     } & {
         title?: string | undefined;
     } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+        $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
-        };
+        } | (() => vue.VNodeChild);
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -959,9 +959,9 @@ declare const VCalendarHeader: {
 } & {
     title?: string | undefined;
 } & {
-    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+    $children?: vue.VNodeChild | {
         default?: (() => vue.VNodeChild) | undefined;
-    };
+    } | (() => vue.VNodeChild);
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
     } | undefined;
@@ -1036,9 +1036,9 @@ declare const VCalendarInterval: {
         events?: any[] | undefined;
         dayIndex?: number | undefined;
     } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+        $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
-        };
+        } | (() => vue.VNodeChild);
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -1063,9 +1063,9 @@ declare const VCalendarInterval: {
         events?: any[] | undefined;
         dayIndex?: number | undefined;
     } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+        $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
-        };
+        } | (() => vue.VNodeChild);
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -1101,9 +1101,9 @@ declare const VCalendarInterval: {
         events?: any[] | undefined;
         dayIndex?: number | undefined;
     } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+        $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
-        };
+        } | (() => vue.VNodeChild);
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -1139,9 +1139,9 @@ declare const VCalendarInterval: {
     events?: any[] | undefined;
     dayIndex?: number | undefined;
 } & {
-    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+    $children?: vue.VNodeChild | {
         default?: (() => vue.VNodeChild) | undefined;
-    };
+    } | (() => vue.VNodeChild);
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
     } | undefined;
@@ -1266,9 +1266,9 @@ declare const VCalendarIntervalEvent: {
         interval?: Record<string, any> | undefined;
         event?: Record<string, any> | undefined;
     } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+        $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
-        };
+        } | (() => vue.VNodeChild);
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -1283,9 +1283,9 @@ declare const VCalendarIntervalEvent: {
         interval?: Record<string, any> | undefined;
         event?: Record<string, any> | undefined;
     } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+        $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
-        };
+        } | (() => vue.VNodeChild);
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -1313,9 +1313,9 @@ declare const VCalendarIntervalEvent: {
         interval?: Record<string, any> | undefined;
         event?: Record<string, any> | undefined;
     } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+        $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
-        };
+        } | (() => vue.VNodeChild);
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -1336,9 +1336,9 @@ declare const VCalendarIntervalEvent: {
     interval?: Record<string, any> | undefined;
     event?: Record<string, any> | undefined;
 } & {
-    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+    $children?: vue.VNodeChild | {
         default?: (() => vue.VNodeChild) | undefined;
-    };
+    } | (() => vue.VNodeChild);
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
     } | undefined;

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

@@ -57,10 +57,10 @@ declare const VFab: {
         tag: string;
         appear: boolean;
         app: boolean;
+        modelValue: boolean;
         tile: boolean;
         density: Density;
         extended: boolean;
-        modelValue: boolean;
         slim: boolean;
         stacked: boolean;
         ripple: boolean | {
@@ -91,9 +91,9 @@ declare const VFab: {
         prependIcon?: IconValue | undefined;
         appendIcon?: IconValue | undefined;
     } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+        $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
-        };
+        } | (() => vue.VNodeChild);
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -124,10 +124,10 @@ declare const VFab: {
         tag: string;
         appear: boolean;
         app: boolean;
+        modelValue: boolean;
         tile: boolean;
         density: Density;
         extended: boolean;
-        modelValue: boolean;
         slim: boolean;
         stacked: boolean;
         ripple: boolean | {
@@ -158,9 +158,9 @@ declare const VFab: {
         prependIcon?: IconValue | undefined;
         appendIcon?: IconValue | undefined;
     } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+        $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
-        };
+        } | (() => vue.VNodeChild);
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -189,11 +189,11 @@ declare const VFab: {
         tag: string;
         appear: boolean;
         app: boolean;
+        modelValue: boolean;
         rounded: string | number | boolean;
         tile: boolean;
         density: Density;
         extended: boolean;
-        modelValue: boolean;
         slim: boolean;
         stacked: boolean;
         ripple: boolean | {
@@ -231,10 +231,10 @@ declare const VFab: {
         tag: string;
         appear: boolean;
         app: boolean;
+        modelValue: boolean;
         tile: boolean;
         density: Density;
         extended: boolean;
-        modelValue: boolean;
         slim: boolean;
         stacked: boolean;
         ripple: boolean | {
@@ -265,9 +265,9 @@ declare const VFab: {
         prependIcon?: IconValue | undefined;
         appendIcon?: IconValue | undefined;
     } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+        $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
-        };
+        } | (() => vue.VNodeChild);
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -296,11 +296,11 @@ declare const VFab: {
         tag: string;
         appear: boolean;
         app: boolean;
+        modelValue: boolean;
         rounded: string | number | boolean;
         tile: boolean;
         density: Density;
         extended: boolean;
-        modelValue: boolean;
         slim: boolean;
         stacked: boolean;
         ripple: boolean | {
@@ -331,10 +331,10 @@ declare const VFab: {
     tag: string;
     appear: boolean;
     app: boolean;
+    modelValue: boolean;
     tile: boolean;
     density: Density;
     extended: boolean;
-    modelValue: boolean;
     slim: boolean;
     stacked: boolean;
     ripple: boolean | {
@@ -365,9 +365,9 @@ declare const VFab: {
     prependIcon?: IconValue | undefined;
     appendIcon?: IconValue | undefined;
 } & {
-    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+    $children?: vue.VNodeChild | {
         default?: (() => vue.VNodeChild) | undefined;
-    };
+    } | (() => vue.VNodeChild);
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
     } | undefined;
@@ -398,11 +398,11 @@ declare const VFab: {
     tag: string;
     appear: boolean;
     app: boolean;
+    modelValue: boolean;
     rounded: string | number | boolean;
     tile: boolean;
     density: Density;
     extended: boolean;
-    modelValue: boolean;
     slim: boolean;
     stacked: boolean;
     ripple: boolean | {

package/lib/labs/VNumberInput/VNumberInput.css

@@ -0,0 +1,38 @@
+.v-number-input input[type=number] {
+  -moz-appearance: textfield;
+}
+.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;
+  padding-inline-start: 0;
+}
+.v-number-input--inset .v-divider {
+  height: 55%;
+  width: 55%;
+  align-self: center;
+}
+.v-number-input--split .v-field__input {
+  text-align: center;
+}
+.v-number-input--stacked .v-number-input__control {
+  flex-direction: column-reverse;
+}
+.v-number-input--stacked .v-number-input__control .v-btn {
+  flex: 1;
+}
+.v-number-input--hide-input .v-field {
+  flex: none;
+}
+.v-number-input--hide-input .v-field__input {
+  width: 0;
+  padding-inline: 0;
+}
+.v-number-input__control {
+  display: flex;
+  height: 100%;
+}
+.v-number-input__control .v-btn {
+  background-color: transparent;
+}

package/lib/labs/VNumberInput/VNumberInput.mjs

@@ -0,0 +1,209 @@
+import { Fragment as _Fragment, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+// Styles
+import "./VNumberInput.css";
+
+// Components
+import { VBtn } from "../../components/VBtn/index.mjs";
+import { VDefaultsProvider } from "../../components/VDefaultsProvider/index.mjs";
+import { VDivider } from "../../components/VDivider/index.mjs";
+import { filterFieldProps, makeVFieldProps, VField } from "../../components/VField/VField.mjs";
+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
+const makeVNumberInputProps = propsFactory({
+  controlVariant: {
+    type: String,
+    default: 'default'
+  },
+  inset: Boolean,
+  hideInput: Boolean,
+  min: Number,
+  max: Number,
+  step: Number,
+  ...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()
+}, 'VNumberInput');
+export const VNumberInput = genericComponent()({
+  name: 'VNumberInput',
+  inheritAttrs: false,
+  props: {
+    ...makeVNumberInputProps(),
+    modelValue: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+  emits: {
+    'update:modelValue': val => true
+  },
+  setup(props, _ref) {
+    let {
+      attrs,
+      emit,
+      slots
+    } = _ref;
+    const model = useProxiedModel(props, 'modelValue');
+    const {
+      isFocused,
+      focus,
+      blur
+    } = useFocus(props);
+    const inputRef = ref();
+    function onFocus() {
+      if (!isFocused.value) focus();
+    }
+    const controlVariant = computed(() => {
+      return props.hideInput ? 'stacked' : props.controlVariant;
+    });
+    function toggleUpDown() {
+      let increment = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      if (increment) {
+        inputRef.value?.stepUp();
+      } else {
+        inputRef.value?.stepDown();
+      }
+      if (inputRef.value) model.value = parseInt(inputRef.value.value, 10);
+    }
+    function onClickUp() {
+      toggleUpDown();
+    }
+    function onClickDown() {
+      toggleUpDown(false);
+    }
+    const incrementSlotProps = computed(() => ({
+      click: onClickUp
+    }));
+    const decrementSlotProps = computed(() => ({
+      click: onClickDown
+    }));
+    useRender(() => {
+      const fieldProps = filterFieldProps(props);
+      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
+      const {
+        modelValue: _,
+        ...inputProps
+      } = VInput.filterProps(props);
+      function controlNode() {
+        const defaultHeight = controlVariant.value === 'stacked' ? 'auto' : '100%';
+        return _createVNode("div", {
+          "class": "v-number-input__control"
+        }, [!slots.decrement ? _createVNode(VBtn, {
+          "flat": true,
+          "key": "decrement-btn",
+          "height": defaultHeight,
+          "icon": "mdi-chevron-down",
+          "rounded": "0",
+          "size": "small",
+          "onClick": onClickDown
+        }, null) : _createVNode(VDefaultsProvider, {
+          "key": "decrement-defaults",
+          "defaults": {
+            VBtn: {
+              flat: true,
+              rounded: '0',
+              height: defaultHeight,
+              size: 'small',
+              icon: 'mdi-chevron-down'
+            }
+          }
+        }, {
+          default: () => [slots.decrement(decrementSlotProps.value)]
+        }), _createVNode(VDivider, {
+          "vertical": controlVariant.value !== 'stacked'
+        }, null), !slots.increment ? _createVNode(VBtn, {
+          "flat": true,
+          "key": "increment-btn",
+          "height": defaultHeight,
+          "icon": "mdi-chevron-up",
+          "onClick": onClickUp,
+          "rounded": "0",
+          "size": "small"
+        }, null) : _createVNode(VDefaultsProvider, {
+          "key": "increment-defaults",
+          "defaults": {
+            VBtn: {
+              flat: true,
+              height: defaultHeight,
+              rounded: '0',
+              size: 'small',
+              icon: 'mdi-chevron-up'
+            }
+          }
+        }, {
+          default: () => [slots.increment(incrementSlotProps.value)]
+        })]);
+      }
+      function dividerNode() {
+        return !props.hideInput && !props.inset ? _createVNode(VDivider, {
+          "vertical": true
+        }, null) : undefined;
+      }
+      return _createVNode(VInput, _mergeProps({
+        "class": ['v-number-input', {
+          'v-number-input--default': controlVariant.value === 'default',
+          'v-number-input--hide-input': props.hideInput,
+          'v-number-input--inset': props.inset,
+          'v-number-input--reverse': props.reverse,
+          'v-number-input--split': controlVariant.value === 'split',
+          'v-number-input--stacked': controlVariant.value === 'stacked'
+        }, props.class]
+      }, rootAttrs, inputProps, {
+        "focused": isFocused.value,
+        "style": props.style
+      }), {
+        ...slots,
+        default: () => _createVNode(VField, _mergeProps(fieldProps, {
+          "active": true,
+          "focused": isFocused.value
+        }), {
+          ...slots,
+          default: _ref2 => {
+            let {
+              props: {
+                class: fieldClass,
+                ...slotProps
+              }
+            } = _ref2;
+            return _createVNode("input", _mergeProps({
+              "ref": inputRef,
+              "type": "number",
+              "value": model.value,
+              "class": fieldClass,
+              "max": props.max,
+              "min": props.min,
+              "step": props.step,
+              "onFocus": onFocus,
+              "onBlur": blur
+            }, inputAttrs), null);
+          },
+          'append-inner': controlVariant.value === 'split' ? () => _createVNode("div", {
+            "class": "v-number-input__control"
+          }, [_createVNode(VDivider, {
+            "vertical": true
+          }, null), _createVNode(VBtn, {
+            "flat": true,
+            "height": "100%",
+            "icon": "mdi-plus",
+            "tile": true,
+            "onClick": onClickUp
+          }, null)]) : !props.reverse ? () => _createVNode(_Fragment, null, [dividerNode(), controlNode()]) : undefined,
+          'prepend-inner': controlVariant.value === 'split' ? () => _createVNode("div", {
+            "class": "v-number-input__control"
+          }, [_createVNode(VBtn, {
+            "flat": true,
+            "height": "100%",
+            "icon": "mdi-minus",
+            "tile": true,
+            "onClick": onClickDown
+          }, null), _createVNode(VDivider, {
+            "vertical": true
+          }, null)]) : props.reverse ? () => _createVNode(_Fragment, null, [controlNode(), dividerNode()]) : undefined
+        })
+      });
+    });
+  }
+});
+//# sourceMappingURL=VNumberInput.mjs.map

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

@@ -0,0 +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","rounded","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 } 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=\"mdi-chevron-down\"\n                  rounded=\"0\"\n                  size=\"small\"\n                  onClick={ onClickDown }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"decrement-defaults\"\n                  defaults={{\n                    VBtn: {\n                      flat: true,\n                      rounded: '0',\n                      height: defaultHeight,\n                      size: 'small',\n                      icon: 'mdi-chevron-down',\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=\"mdi-chevron-up\"\n                  onClick={ onClickUp }\n                  rounded=\"0\"\n                  size=\"small\"\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"increment-defaults\"\n                  defaults={{\n                    VBtn: {\n                      flat: true,\n                      height: defaultHeight,\n                      rounded: '0',\n                      size: 'small',\n                      icon: 'mdi-chevron-up',\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                      value={ 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=\"mdi-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=\"mdi-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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"}

package/lib/labs/VNumberInput/VNumberInput.sass

@@ -0,0 +1,47 @@
+@use 'sass:selector'
+@use './variables' as *
+
+.v-number-input
+  $root: &
+  $control-root: #{selector.append($root, '__control')}
+
+  input[type="number"]
+    -moz-appearance: textfield
+
+    &::-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
+
+  &--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

package/lib/labs/VNumberInput/_variables.scss

@@ -0,0 +1 @@
+$number-input-inset-divider-size: 55% !default;