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';

src/views/Charts/components/MutualFriends.vue

@@ -52,43 +52,58 @@
             </p>
             <el-form label-position="top" size="small" class="mutual-graph__force-form">
                 <el-form-item :label="t('view.charts.mutual_friend.force_dialog.repulsion')">
-                    <el-input-number
+                    <NumberField
                         v-model="forceForm.repulsion"
-                        :precision="0"
+                        :step="1"
-                        :controls="false"
+                        :format-options="{ maximumFractionDigits: 0 }"
-                        class="mutual-graph__number-input" />
+                        class="mutual-graph__number-input">
+                        <NumberFieldContent>
+                            <NumberFieldInput />
+                        </NumberFieldContent>
+                    </NumberField>
                     <div class="mutual-graph__helper">
                         {{ t('view.charts.mutual_friend.force_dialog.repulsion_help') }}
                     </div>
                 </el-form-item>
                 <el-form-item :label="t('view.charts.mutual_friend.force_dialog.edge_length_min')">
-                    <el-input-number
+                    <NumberField
                         v-model="forceForm.edgeLengthMin"
-                        :precision="0"
+                        :step="1"
-                        :controls="false"
+                        :format-options="{ maximumFractionDigits: 0 }"
-                        class="mutual-graph__number-input" />
+                        class="mutual-graph__number-input">
+                        <NumberFieldContent>
+                            <NumberFieldInput />
+                        </NumberFieldContent>
+                    </NumberField>
                     <div class="mutual-graph__helper">
                         {{ t('view.charts.mutual_friend.force_dialog.edge_length_min_help') }}
                     </div>
                 </el-form-item>
                 <el-form-item :label="t('view.charts.mutual_friend.force_dialog.edge_length_max')">
-                    <el-input-number
+                    <NumberField
                         v-model="forceForm.edgeLengthMax"
-                        :precision="0"
+                        :step="1"
-                        :controls="false"
+                        :format-options="{ maximumFractionDigits: 0 }"
-                        class="mutual-graph__number-input" />
+                        class="mutual-graph__number-input">
+                        <NumberFieldContent>
+                            <NumberFieldInput />
+                        </NumberFieldContent>
+                    </NumberField>
                     <div class="mutual-graph__helper">
                         {{ t('view.charts.mutual_friend.force_dialog.edge_length_max_help') }}
                     </div>
                 </el-form-item>
                 <el-form-item :label="t('view.charts.mutual_friend.force_dialog.gravity')">
-                    <el-input-number
+                    <NumberField
                         v-model="forceForm.gravity"
                         :max="1"
                         :step="0.1"
-                        :precision="1"
+                        :format-options="{ maximumFractionDigits: 1 }"
-                        :controls="false"
+                        class="mutual-graph__number-input">
-                        class="mutual-graph__number-input" />
+                        <NumberFieldContent>
+                            <NumberFieldInput />
+                        </NumberFieldContent>
+                    </NumberField>
                     <div class="mutual-graph__helper">
                         {{ t('view.charts.mutual_friend.force_dialog.gravity_help') }}
                     </div>
@@ -111,6 +126,7 @@
 
 <script setup>
     import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
+    import { NumberField, NumberFieldContent, NumberFieldInput } from '@/components/ui/number-field';
     import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
     import { Settings } from 'lucide-vue-next';

src/views/GameLog/GameLog.vue

@@ -52,6 +52,7 @@
 <script setup>
     import { computed, ref, watch } from 'vue';
     import { ElMessageBox } from 'element-plus';
+    import { Switch } from '@/components/ui/switch';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/views/Settings/components/Tabs/AppearanceTab.vue

@@ -34,12 +34,18 @@
             </div>
             <div v-if="!isLinux" class="options-container-item">
                 <span class="name">{{ t('view.settings.appearance.appearance.zoom') }}</span>
-                <el-input-number
+                <NumberField
                     v-model="zoomLevel"
-                    size="small"
+                    :step="1"
-                    :precision="0"
+                    :format-options="{ maximumFractionDigits: 0 }"
-                    style="width: 128px"
+                    class="w-32"
-                    @change="setZoomLevel" />
+                    @update:modelValue="setZoomLevel">
+                    <NumberFieldContent>
+                        <NumberFieldDecrement />
+                        <NumberFieldInput />
+                        <NumberFieldIncrement />
+                    </NumberFieldContent>
+                </NumberField>
             </div>
             <simple-switch
                 :label="t('view.settings.appearance.appearance.show_notification_icon_dot')"
@@ -416,6 +422,13 @@
 <script setup>
     import { ListboxContent, ListboxFilter, ListboxItem, ListboxItemIndicator, ListboxRoot, useFilter } from 'reka-ui';
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+    import {
+        NumberField,
+        NumberFieldContent,
+        NumberFieldDecrement,
+        NumberFieldIncrement,
+        NumberFieldInput
+    } from '@/components/ui/number-field';
     import {
         TagsInput,
         TagsInputInput,

src/views/Tools/Gallery.vue

@@ -226,21 +226,35 @@
                             {{ t('dialog.gallery_icons.create_animated_emoji') }}
                         </el-button>
                         <span style="margin-right: 10px">{{ t('dialog.gallery_icons.emoji_animation_fps') }}</span>
-                        <el-input-number
+                        <NumberField
-                            size="small"
                             v-model="emojiAnimFps"
                             :min="1"
                             :max="64"
-                            style="margin-right: 10px; width: 112px"></el-input-number>
+                            :step="1"
+                            :format-options="{ maximumFractionDigits: 0 }"
+                            class="mr-2.5 w-28">
+                            <NumberFieldContent>
+                                <NumberFieldDecrement />
+                                <NumberFieldInput />
+                                <NumberFieldIncrement />
+                            </NumberFieldContent>
+                        </NumberField>
                         <span style="margin-right: 10px">{{
                             t('dialog.gallery_icons.emoji_animation_frame_count')
                         }}</span>
-                        <el-input-number
+                        <NumberField
-                            size="small"
                             v-model="emojiAnimFrameCount"
                             :min="2"
                             :max="64"
-                            style="margin-right: 10px; width: 112px"></el-input-number>
+                            :step="1"
+                            :format-options="{ maximumFractionDigits: 0 }"
+                            class="mr-2.5 w-28">
+                            <NumberFieldContent>
+                                <NumberFieldDecrement />
+                                <NumberFieldInput />
+                                <NumberFieldIncrement />
+                            </NumberFieldContent>
+                        </NumberField>
                         <label class="inline-flex items-center gap-2" style="margin-left: 10px; margin-right: 10px">
                             <Checkbox v-model="emojiAnimLoopPingPong" />
                             <span>{{ t('dialog.gallery_icons.emoji_loop_pingpong') }}</span>
@@ -534,6 +548,13 @@
 
 <script setup>
     import { ArrowLeft, Close, Delete, Link, Picture, Plus, Present, Refresh, Upload } from '@element-plus/icons-vue';
+    import {
+        NumberField,
+        NumberFieldContent,
+        NumberFieldDecrement,
+        NumberFieldIncrement,
+        NumberFieldInput
+    } from '@/components/ui/number-field';
     import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
     import { Button } from '@/components/ui/button';
     import { ButtonGroup } from '@/components/ui/button-group';