feat: numInput属性UI追加

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

frontend/src/components/right/InputText.vue

@@ -1,24 +1,34 @@
 <template>
-  <q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label>
-  <template v-slot:append v-if="hint!==''">
-    <q-icon name="help" size="22px" color="blue-8">
-      <q-tooltip class="bg-yellow-2 text-black shadow-4" anchor="bottom right"><div class="hint-text" v-html="hint"/></q-tooltip>
-    </q-icon>
-  </template>
-  </q-input>
+  <div v-bind="$attrs">
+    <q-input :label="displayName" v-model="inputValue" label-color="primary"
+    :placeholder="placeholder" stack-label
+    :rules="rulesExp"
+    :maxlength="maxLength"
+    >
+      <template v-slot:append v-if="hint !== ''">
+        <q-icon name="help" size="22px" color="blue-8">
+          <q-tooltip class="bg-yellow-2 text-black shadow-4" anchor="bottom right">
+            <div class="hint-text" v-html="hint" />
+          </q-tooltip>
+        </q-icon>
+      </template>
+    </q-input>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent,ref,watchEffect } from 'vue';
+import { kMaxLength } from 'buffer';
+import { defineComponent, ref, watchEffect } from 'vue';
 
 export default defineComponent({
   name: 'InputText',
+  inheritAttrs: false,
   props: {
-    displayName:{
+    displayName: {
       type: String,
       default: '',
     },
-    name:{
+    name: {
       type: String,
       default: '',
     },
@@ -26,33 +36,43 @@ export default defineComponent({
       type: String,
       default: '',
     },
-    hint:{
+    hint: {
       type: String,
       default: '',
     },
+    maxLength:{
+      type: Number,
+      default:undefined
+    },
+    //例：[val=>!!val ||'入力してください']
+    rules:{
+      type:String,
+      default:undefined
+    },
     modelValue: {
       type: String,
       default: '',
     },
   },
 
-  setup(props , { emit }) {
+  setup(props, { emit }) {
     const inputValue = ref(props.modelValue);
-
+    const rulesExp = props.rules===undefined?null : eval(props.rules);
     watchEffect(() => {
       emit('update:modelValue', inputValue.value);
     });
 
     return {
       inputValue,
-      showhint:ref(false)
+      showhint: ref(false),
+      rulesExp
     };
   },
 });
 </script>
 <style lang="scss">
-.hint-text{
-  white-space : always;
+.hint-text {
+  white-space: always;
   max-width: 450px;
   font-size: 1.2em;
 }