カラーピッカーと数字入力ボックスの追加

frontend/src/components/right/NumInput.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="">
+    <q-input v-model.number="numValue" type="number" :label="displayName" label-color="primary" bottom-slots>
+      <template v-slot:hint>
+        {{ placeholder }}
+      </template>
+    </q-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+export default defineComponent({
+  name: 'NumInput',
+  components: {
+  },
+  props: {
+    displayName: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    hint: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: Object,
+      default: null
+    },
+  },
+
+  setup(props, { emit }) {
+    const numValue = ref(0);
+
+    return {
+      numValue,
+    };
+  }
+});
+</script>