feat: プリセット管理ダイアログを編集可能にする

src/components/Base/BaseListItem.vue

@@ -36,6 +36,7 @@ defineEmits<{
   border: none;
   padding: vars.$padding-1 vars.$padding-2;
   border-radius: vars.$radius-1;
+  text-align: left;
 
   &:not(.selected):hover {
     background-color: colors.$clear-hovered;

src/components/Base/BaseSlider.vue

@@ -5,7 +5,7 @@
     :max
     :step
     :disabled
-    :modelValue="[model]"
+    :modelValue="[modelValue]"
     @update:modelValue="
       (value) => {
         if (value == undefined) {
@@ -14,6 +14,8 @@
         $emit('update:modelValue', value[0]);
       }
     "
+    @wheel="onWheel"
+    @valueCommit="$emit('valueCommit', $event[0])"
   >
     <SliderTrack class="SliderTrack">
       <SliderRange class="SliderRange" />
@@ -24,20 +26,52 @@
 
 <script setup lang="ts">
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "radix-vue";
+import { isOnCommandOrCtrlKeyDown } from "@/store/utility";
+import { debounce } from "@/helpers/timer";
 
-defineProps<{
-  min?: number;
-  max?: number;
-  step?: number;
-  disabled?: boolean;
-  modelValue: number;
-}>();
+const props = withDefaults(
+  defineProps<{
+    min?: number;
+    max?: number;
+    step?: number;
+    scrollStep?: number;
+    disabled?: boolean;
+    modelValue: number;
+  }>(),
+  {
+    min: 0,
+    max: 100,
+    step: 1,
+    scrollStep: undefined,
+  },
+);
 
-defineEmits<{
+const emit = defineEmits<{
   "update:modelValue": [value: number];
+  valueCommit: [value: number];
 }>();
 
-const model = defineModel<number>({ required: true });
+const debounceEmitValueCommit = debounce(
+  (value: number) => emit("valueCommit", value),
+  300,
+);
+
+const onWheel = (event: WheelEvent) => {
+  if (props.disabled) return;
+  event.preventDefault();
+
+  const delta = event.deltaY > 0 ? -1 : 1;
+  const scrollStep =
+    props.scrollStep && !isOnCommandOrCtrlKeyDown(event)
+      ? props.scrollStep
+      : props.step;
+
+  const value = props.modelValue + scrollStep * delta;
+  const clampedValue = Math.min(props.max, Math.max(props.min, value));
+
+  emit("update:modelValue", clampedValue);
+  debounceEmitValueCommit(clampedValue);
+};
 </script>
 
 <style lang="scss">
@@ -49,7 +83,7 @@ const model = defineModel<number>({ required: true });
   position: relative;
   display: flex;
   align-items: center;
-  height: vars.$size-control;
+  height: vars.$size-indicator;
   cursor: grab;
 
   &:active {

src/components/Base/BaseTextField.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="wrapper">
     <input
+      :id
       v-model="model"
       type="text"
       class="input"
       :class="{ error: hasError }"
       :placeholder
       :readonly
       :disabled
+      @change="(payload) => $emit('change', payload)"
       @click="(payload) => $emit('click', payload)"
     />
     <div v-if="hasError" class="error-label">
@@ -22,9 +24,11 @@ defineProps<{
   hasError?: boolean;
   readonly?: boolean;
   disabled?: boolean;
+  id?: string;
 }>();
 
 defineEmits<{
+  change: [payload: Event];
   click: [payload: MouseEvent];
 }>();
 
@@ -66,7 +70,8 @@ const model = defineModel<string>();
 }
 
 .error {
-  border: 2px solid colors.$display-warning;
+  @include mixin.on-focus;
+  outline-color: colors.$display-warning !important;
 }
 
 .error-label {