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

frontend/src/components/right/AppFieldSelect.vue

@@ -82,7 +82,7 @@
                     </div>
                 </div>
                 <div class="row">
-                    <field-select ref="fieldDlg" name="フィールド" :type="selectType" :updateSelects="updateItems"
+                    <field-select ref="fieldDlg" name="フィールド" type="multiple" :updateSelects="updateItems"
                         :appId="selectedField.app?.id" not_page :filter="fieldFilter" :selectedFields="selectedField.fields"></field-select>
                 </div>
             </div>
@@ -151,11 +151,9 @@ export default defineComponent({
             type: Object,
             default: null
         },
-        selectType:{
+
-            type:String,
-            default:'single'
-        }
     },
+
     setup(props, { emit }) {
         const appDlg = ref();
         const fieldDlg = ref();

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>

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>

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: {

plugin/kintone-addins/readme.md

@@ -68,10 +68,6 @@
 | modelValue  | 空文字             | コンポーネントの初期値を設定します。<br>初期設定ないの場合は空文字で設定する。
 | name        | field              | 属性の設定値の名前です。   |
 | placeholder | 対象項目を選択してください| 入力フィールドに表示されるプレースホルダーのテキストです。この場合は設定されていません。          |
-| hint        | 説明文| 長い説明文を設定することが可能です。（markdown形式サポート予定、現在HTML可能）          |
-| selectType  |`single` or `multiple`| フィールド選択・他のアプリのフィールド選択の選択モードを設定する         |
-
-
 
 ### 使用可能なコンポーネント
 | No. | コンポーネント名      | コンポーネントタイプ | 説明                                     |