feat: numInput属性UI追加

inputText,numInputにrules設定追加、入力ルール設定可能

frontend/src/components/right/NumInput.vue

@@ -1,6 +1,10 @@
 <template>
-  <div class="">
-    <q-input v-model.number="numValue" type="number" :label="displayName" label-color="primary" bottom-slots>
+  <div class="" v-bind="$attrs">
+    <q-input v-model.number="numValue" type="number" :label="displayName" label-color="primary" stack-label bottom-slots
+     :min="min"
+     :max="max"
+     :rules="rulesExp"
+     >
       <template v-slot:hint>
         {{ placeholder }}
       </template>
@@ -9,9 +13,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { computed, defineComponent, ref, watchEffect } from 'vue';
 export default defineComponent({
   name: 'NumInput',
+  inheritAttrs:false,
   components: {
   },
   props: {
@@ -31,17 +36,51 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    min:{
+      type:Number,
+      default:undefined
+    },
+    max:{
+      type:Number,
+      default:undefined
+    },
+    //[val=>!!val ||'数値を入力してください',val=>val<=100 && val>=1 || '1-100の範囲内の数値を入力してください']
+    rules:{
+      type:String,
+      default:undefined
+    },
     modelValue: {
-      type: Object,
-      default: null
+      type: [Number , String],
+      default: undefined
     },
   },
 
   setup(props, { emit }) {
-    const numValue = ref(0);
+    const numValue = ref(props.modelValue);
+    const rulesExp = props.rules===undefined?null : eval(props.rules);
+    const isError = computed(()=>{
+      const val = numValue.value;
+      if (val === undefined) {
+        return false;
+      }
+      const numVal = typeof val === "string" ? parseInt(val) : val;
+      // Ensure parsed value is a valid number
+      if (isNaN(numVal)) {
+        return true;
+      }
+      // Check against min and max boundaries, if defined
+      if ((props.min !== undefined && numVal < props.min) || (props.max !== undefined && numVal > props.max)) {
+        return true;
+      }
+      return false;
+    });
 
+    watchEffect(()=>{
+      emit("update:modelValue",numValue.value);
+    });
     return {
       numValue,
+      rulesExp
     };
   }
 });