refac: 숫자 입력기 재작성

- 입력마다 min, max clamp 작업 취소

hwe/ts/components/NumberInputWithInfo.vue

@@ -4,7 +4,7 @@
     <div class="col">
       <input
         ref="input"
-        v-model="rawValue"
+        v-model.number="rawValue"
         type="number"
         :step="step ?? undefined"
         class="form-control f_tnum"
@@ -29,103 +29,102 @@
     <small class="form-text text-muted"><slot /></small>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import { clamp } from "lodash";
-import { defineComponent } from "vue";
+import { ref, watch } from "vue";
 
-export default defineComponent({
+const props = defineProps({
-  name: "NumberInputWithInfo",
+  readonly: {
-  props: {
+    type: Boolean,
-    readonly: {
+    required: false,
-      type: Boolean,
+    default: false,
-      required: false,
-      default: false,
-    },
-    int: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    title: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    min: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-    max: {
-      type: Number,
-      default: undefined,
-      required: false,
-    },
-    step: {
-      type: Number,
-      default: undefined,
-      required: false,
-    },
-    modelValue: {
-      type: Number,
-      default: 0,
-    },
-    right: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
-  emits: ["update:modelValue"],
+  int: {
-  data() {
+    type: Boolean,
-    return {
+    required: false,
-      editmode: false,
+    default: true,
-      rawValue: this.modelValue,
-      printValue: this.modelValue.toLocaleString(),
-    };
   },
-  watch: {
+  title: {
-    modelValue: function (newVal: number) {
+    type: String,
-      this.rawValue = newVal;
+    required: false,
-      this.printValue = newVal.toLocaleString();
+    default: null,
-    },
   },
-  methods: {
+  min: {
-    updateValue() {
+    type: Number,
-      if (this.readonly) {
+    required: false,
-        return;
+    default: 0,
-      }
+  },
-      if (this.int) {
+  max: {
-        this.rawValue = Math.floor(this.rawValue);
+    type: Number,
-      }
+    default: undefined,
-      this.printValue = this.rawValue.toLocaleString();
+    required: false,
-      if (this.min !== undefined || this.max !== undefined) {
+  },
-        const clampedValue = clamp(this.rawValue, this.min ?? this.rawValue, this.max ?? this.rawValue);
+  step: {
-        this.$emit("update:modelValue", clampedValue);
+    type: Number,
-      } else {
+    default: undefined,
-        this.$emit("update:modelValue", this.rawValue);
+    required: false,
-      }
+  },
-    },
+  modelValue: {
-    onBlurNumber() {
+    type: Number,
-      this.editmode = false;
+    default: 0,
-      this.printValue = this.rawValue.toLocaleString();
+  },
-      if (this.min !== undefined || this.max !== undefined) {
+  right: {
-        const clampedValue = clamp(this.rawValue, this.min ?? this.rawValue, this.max ?? this.rawValue);
+    type: Boolean,
-        if (clampedValue !== this.rawValue) {
+    required: false,
-          this.rawValue = clampedValue;
+    default: false,
-          this.updateValue();
-        }
-      }
-    },
-    onFocusText() {
-      if (this.readonly) {
-        return;
-      }
-      this.editmode = true;
-      setTimeout(() => {
-        (this.$refs.input as HTMLInputElement).focus();
-      }, 0);
-    },
   },
 });
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: number): void;
+}>();
+
+const editmode = ref(false);
+const rawValue = ref(props.modelValue);
+const printValue = ref(props.modelValue.toLocaleString());
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    rawValue.value = value;
+    printValue.value = value.toLocaleString();
+  }
+);
+
+function updateValue() {
+  if (props.readonly) {
+    return;
+  }
+  let value = rawValue.value;
+  if (props.int) {
+    value = Math.round(value);
+  }
+
+  rawValue.value = value;
+
+  printValue.value = value.toLocaleString();
+  emit("update:modelValue", value);
+}
+const input = ref<HTMLInputElement>();
+function onBlurNumber() {
+  editmode.value = false;
+  printValue.value = rawValue.value.toLocaleString();
+  if (props.min !== undefined || props.max !== undefined) {
+    const clampedValue = clamp(rawValue.value, props.min ?? rawValue.value, props.max ?? rawValue.value);
+    if (clampedValue !== rawValue.value) {
+      rawValue.value = clampedValue;
+      updateValue();
+    }
+  }
+}
+
+function onFocusText() {
+  if (props.readonly) {
+    return;
+  }
+  editmode.value = true;
+  setTimeout(() => {
+    input.value?.focus();
+  }, 0);
+}
 </script>