From 994a0174f583dd1e3dfd8b0c4fc1d6dc5964e8ad Mon Sep 17 00:00:00 2001
From: Mouriya <mouriya@bu.edu>
Date: Mon, 6 May 2024 20:58:06 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=AB=E3=83=A9=E3=83=BC=E3=83=94=E3=83=83?=
 =?UTF-8?q?=E3=82=AB=E3=83=BC=E3=81=A8=E6=95=B0=E5=AD=97=E5=85=A5=E5=8A=9B?=
 =?UTF-8?q?=E3=83=9C=E3=83=83=E3=82=AF=E3=82=B9=E3=81=AE=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/right/ColorPicker.vue | 68 +++++++++++++++++++
 frontend/src/components/right/NumInput.vue    | 48 +++++++++++++
 .../src/components/right/PropertyList.vue     |  6 +-
 3 files changed, 121 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/right/ColorPicker.vue
 create mode 100644 frontend/src/components/right/NumInput.vue

diff --git a/frontend/src/components/right/ColorPicker.vue b/frontend/src/components/right/ColorPicker.vue
new file mode 100644
index 0000000..aae3896
--- /dev/null
+++ b/frontend/src/components/right/ColorPicker.vue
@@ -0,0 +1,68 @@
+<template>
+    <div class="">
+        <q-field v-model="color" :label="displayName" bottom-slots labelColor="primary">
+            <template v-slot:control>
+                <q-chip text-color="black" color="white">
+                    <div class="row">
+                        <div class="col-4">
+                            <q-avatar class="shadow-1" :style="{ background: color }" size="xs"></q-avatar>
+                        </div>
+                        <div class="col">
+                            {{ color }}
+                        </div>
+                    </div>
+                </q-chip>
+            </template>
+            <template v-slot:append>
+                <q-icon name="colorize" class="cursor-pointer">
+                    <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+                        <q-color no-header default-view="palette" v-model="color" />
+                    </q-popup-proxy>
+                </q-icon>
+            </template>
+            <template v-slot:hint>
+                {{ placeholder }}
+            </template>
+        </q-field>
+
+
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue';
+export default defineComponent({
+    name: 'ColorPicker',
+    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 color = ref("#ffffff");
+        return {
+            color,
+        };
+    }
+});
+</script>
diff --git a/frontend/src/components/right/NumInput.vue b/frontend/src/components/right/NumInput.vue
new file mode 100644
index 0000000..d916c94
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/right/PropertyList.vue b/frontend/src/components/right/PropertyList.vue
index 61bff1c..e113923 100644
--- a/frontend/src/components/right/PropertyList.vue
+++ b/frontend/src/components/right/PropertyList.vue
@@ -19,6 +19,8 @@ import AppFieldSelect from './AppFieldSelect.vue';
 import MuiltInputText from '../right/MuiltInputText.vue';
 import ConditionInput from '../right/ConditionInput.vue';
 import EventSetter from '../right/EventSetter.vue';
+import ColorPicker from './ColorPicker.vue';
+import NumInput from './NumInput.vue';
 import { IActionNode,IActionProperty,IProp } from 'src/types/ActionTypes';
 
 export default defineComponent({
@@ -31,7 +33,9 @@ export default defineComponent({
     AppFieldSelect,
     MuiltInputText,
     ConditionInput,
-    EventSetter
+    EventSetter,
+    ColorPicker,
+    NumInput
   },
   props: {
     nodeProps: {