replace el-input-number with NumberField

This commit is contained in:
pa
2026-01-11 23:06:49 +09:00
committed by Natsumi
parent a3212da97b
commit 8b29ae9267
10 changed files with 224 additions and 27 deletions

View File

@@ -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"
:controls="false"
class="mutual-graph__number-input" />
:step="1"
:format-options="{ maximumFractionDigits: 0 }"
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"
:controls="false"
class="mutual-graph__number-input" />
:step="1"
:format-options="{ maximumFractionDigits: 0 }"
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"
:controls="false"
class="mutual-graph__number-input" />
:step="1"
:format-options="{ maximumFractionDigits: 0 }"
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"
:controls="false"
class="mutual-graph__number-input" />
:format-options="{ maximumFractionDigits: 1 }"
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';

View File

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

View File

@@ -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"
:precision="0"
style="width: 128px"
@change="setZoomLevel" />
:step="1"
:format-options="{ maximumFractionDigits: 0 }"
class="w-32"
@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,

View File

@@ -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
size="small"
<NumberField
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
size="small"
<NumberField
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';