replace el-input-number with NumberField

src/components/ui/number-field/NumberField.vue

@@ -0,0 +1,37 @@
+<script setup>
+    import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        defaultValue: { type: Number, required: false },
+        modelValue: { type: [Number, null], required: false },
+        min: { type: Number, required: false },
+        max: { type: Number, required: false },
+        step: { type: Number, required: false },
+        stepSnapping: { type: Boolean, required: false },
+        formatOptions: { type: null, required: false },
+        locale: { type: String, required: false },
+        disabled: { type: Boolean, required: false },
+        readonly: { type: Boolean, required: false },
+        disableWheelChange: { type: Boolean, required: false },
+        invertWheelChange: { type: Boolean, required: false },
+        id: { type: String, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        name: { type: String, required: false },
+        required: { type: Boolean, required: false },
+        class: { type: null, required: false }
+    });
+    const emits = defineEmits(['update:modelValue']);
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <NumberFieldRoot v-slot="slotProps" v-bind="forwarded" :class="cn('grid gap-1.5', props.class)">
+        <slot v-bind="slotProps" />
+    </NumberFieldRoot>
+</template>

src/components/ui/number-field/NumberFieldContent.vue

@@ -0,0 +1,19 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div
+        :class="
+            cn(
+                'relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5',
+                props.class
+            )
+        ">
+        <slot />
+    </div>
+</template>

src/components/ui/number-field/NumberFieldDecrement.vue

@@ -0,0 +1,33 @@
+<script setup>
+    import { NumberFieldDecrement, useForwardProps } from 'reka-ui';
+    import { Minus } from 'lucide-vue-next';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        disabled: { type: Boolean, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <NumberFieldDecrement
+        data-slot="decrement"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20',
+                props.class
+            )
+        ">
+        <slot>
+            <Minus class="h-4 w-4" />
+        </slot>
+    </NumberFieldDecrement>
+</template>

src/components/ui/number-field/NumberFieldIncrement.vue

@@ -0,0 +1,33 @@
+<script setup>
+    import { NumberFieldIncrement, useForwardProps } from 'reka-ui';
+    import { Plus } from 'lucide-vue-next';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        disabled: { type: Boolean, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <NumberFieldIncrement
+        data-slot="increment"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3',
+                props.class
+            )
+        ">
+        <slot>
+            <Plus class="h-4 w-4" />
+        </slot>
+    </NumberFieldIncrement>
+</template>

src/components/ui/number-field/NumberFieldInput.vue

@@ -0,0 +1,19 @@
+<script setup>
+    import { NumberFieldInput } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <NumberFieldInput
+        data-slot="input"
+        :class="
+            cn(
+                'flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+                props.class
+            )
+        " />
+</template>

src/components/ui/number-field/index.js

@@ -0,0 +1,5 @@
+export { default as NumberField } from './NumberField.vue';
+export { default as NumberFieldContent } from './NumberFieldContent.vue';
+export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue';
+export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue';
+export { default as NumberFieldInput } from './NumberFieldInput.vue';