保存ボタンクリック時にイベントを一括削除

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

backend/app/core/security.py

@@ -9,7 +9,7 @@ pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
 
 SECRET_KEY = "alicorns"
 ALGORITHM = "HS256"
-ACCESS_TOKEN_EXPIRE_MINUTES = 30
+ACCESS_TOKEN_EXPIRE_MINUTES = 2880
 
 
 def get_password_hash(password: str) -> str:
@@ -25,7 +25,7 @@ def create_access_token(*, data: dict, expires_delta: timedelta = None):
     if expires_delta:
         expire = datetime.utcnow() + expires_delta
     else:
-        expire = datetime.utcnow() + timedelta(minutes=2880)
+        expire = datetime.utcnow() + timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
     to_encode.update({"exp": expire})
     encoded_jwt = jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
     return encoded_jwt

frontend/package.json

@@ -2,7 +2,7 @@
   "name": "kintone-automate",
   "version": "0.2.0",
   "description": "Kintoneアプリの自動生成とデプロイを支援ツールです",
-  "productName": "Kintone Automate",
+  "productName": "kintone Automate",
   "author": "maxiaozhe@alicorns.co.jp <maxiaozhe@alicorns.co.jp>",
   "private": true,
   "scripts": {

frontend/src/components/ActionSelect.vue

@@ -56,7 +56,7 @@ export default {
 </script>
 <style lang="scss">
 .action-table{
-  height: 100%;
+  min-height: 10vh;
-  max-height: 540px;
+  max-height: 68vh;
 }
 </style>

frontend/src/components/AppSelect.vue

@@ -1,21 +1,11 @@
 <template>
-  <div class="q-pa-md" >
+  <div class="q-px-xs">
     <div v-if="!isLoaded" class="spinner flex flex-center">
       <q-spinner color="primary" size="3em" />
     </div>
-    <q-table v-else
+    <q-table v-else class="app-table" :selection="type" row-key="id" v-model:selected="selected" flat bordered
-      class="app-table"
+      virtual-scroll :columns="columns" :rows="rows" :pagination="pagination" :rows-per-page-options="[0]"
-      :selection="type"
+      :filter="filter" style="max-height: 65vh;">
-      row-key="id"
-      v-model:selected="selected"
-      flat bordered
-      virtual-scroll
-      :columns="columns"
-      :rows="rows"
-      :pagination="pagination"
-      :rows-per-page-options="[0]"
-      :filter="filter"
-    >
       <template v-slot:body-cell-description="props">
         <q-td :props="props">
           <q-scroll-area class="description-cell">
@@ -27,18 +17,20 @@
   </div>
 </template>
 <script lang="ts">
-import { ref,onMounted,reactive } from 'vue'
+import { ref, onMounted, reactive, watchEffect } from 'vue'
 import { api } from 'boot/axios';
-import { LeftDataBus } from './flowEditor/left/DataBus';
 
 export default {
   name: 'AppSelect',
   props: {
     name: String,
     type: String,
-    filter:String
+    filter: String,
+    updateExternalSelectAppInfo: {
+      type: Function
+    }
   },
-  setup() {
+  setup(props) {
     const columns = [
       { name: 'id', required: true, label: 'ID', align: 'left', field: 'id', sortable: true },
       { name: 'name', label: 'アプリ名', field: 'name', sortable: true, align: 'left' },
@@ -47,15 +39,22 @@ export default {
     ]
     const isLoaded = ref(false);
     const rows: any[] = reactive([]);
+    const selected = ref([])
+
+    watchEffect(()=>{
+      if (selected.value && selected.value[0] && props.updateExternalSelectAppInfo) {
+        props.updateExternalSelectAppInfo(selected.value[0])
+      }
+    });
     onMounted(() => {
       api.get('api/v1/allapps').then(res => {
-          res.data.apps.forEach((item:any) =>
+        res.data.apps.forEach((item: any) => {
-              {
           rows.push({
             id: item.appId,
             name: item.name,
             description: item.description,
-                  createdate:dateFormat(item.createdAt)});
+            createdate: dateFormat(item.createdAt)
+          });
         });
         isLoaded.value = true;
       });
@@ -75,7 +74,7 @@ export default {
     return {
       columns,
       rows,
-      selected: ref([]),
+      selected,
       isLoaded,
       pagination: ref({
         rowsPerPage: 10
@@ -93,12 +92,9 @@ export default {
   max-width: 300px;
   white-space: break-spaces;
 }
+
 .spinner {
   min-height: 300px;
   min-width: 400px;
 }
-.app-table{
-  height: 100%;
-  max-height: 600px;
-}
 </style>

frontend/src/components/FieldSelect.vue

@@ -1,21 +1,37 @@
 <template>
-  <div class="q-pa-md">
+  <div class="q-px-md" style=" min-width: 50vw; max-width: 85vw;">
     <div v-if="!isLoaded" class="spinner flex flex-center">
       <q-spinner color="primary" size="3em" />
     </div>
-    <q-table v-else  row-key="name"  :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
+    <q-table  flat bordered v-else row-key="name" :selection="type" v-model:selected="selected" :columns="columns"
+      :rows="rows" :pagination="pageSetting" :filter="filter" style="max-height: 55vh;"/>
   </div>
 </template>
 <script>
-import { ref,onMounted,reactive } from 'vue'
+import { ref, onMounted, reactive, watchEffect } from 'vue'
 import { api } from 'boot/axios';
 
 export default {
   name: 'fieldSelect',
   props: {
     name: String,
+    type: {
       type: String,
-    appId:Number
+      default: 'single'
+    },
+    appId: Number,
+    not_page: {
+      type: Boolean,
+      default: false,
+    },
+    selectedFields:{
+      type:Array,
+      default:()=>[]
+    },
+    updateSelects: {
+      type: Function
+    },
+    filter: String,
   },
   setup(props) {
     const isLoaded = ref(false);
@@ -24,7 +40,20 @@ export default {
       { name: 'code', label: 'フィールドコード', align: 'left', field: 'code', sortable: true },
       { name: 'type', label: 'フィールドタイプ', align: 'left', field: 'type', sortable: true }
     ]
-    const rows = reactive([])
+    const pageSetting = ref({
+      sortBy: 'desc',
+      descending: false,
+      page: 2,
+      rowsPerPage: props.not_page ? 0 : 5
+      // rowsNumber: xx if getting data from a server
+    });
+    const rows = reactive([]);
+    const selected = ref(props.selectedFields && props.selectedFields.length>0?props.selectedFields:[]);
+
+    watchEffect(() => {
+        props.updateSelects(selected);
+    });
+
     onMounted(async () => {
       const res = await api.get('api/v1/appfields', {
         params: {
@@ -33,8 +62,7 @@ export default {
       });
       let fields = res.data.properties;
       console.log(fields);
-            Object.keys(fields).forEach((key) =>
+      Object.keys(fields).forEach((key) => {
-            {
         const fld = fields[key];
         // rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
         rows.push({ name: fld.label, ...fld });
@@ -45,8 +73,9 @@ export default {
     return {
       columns,
       rows,
-        selected: ref([]),
+      selected,
-        isLoaded
+      isLoaded,
+      pageSetting
     }
   },
 

frontend/src/components/ShowDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- <div class="q-pa-md q-gutter-sm" > -->
     <q-dialog :model-value="visible" persistent bordered >
-      <q-card :style="cardStyle" >
+      <q-card :style="cardStyle"  style=" min-width: 40vw; max-width: 80vw; max-height: 95vh;">
         <q-toolbar class="bg-grey-4">
           <q-toolbar-title>{{ name }}</q-toolbar-title>
           <q-space></q-space>
@@ -14,7 +14,7 @@
         <q-card-section class="q-pt-none" :style="sectionStyle">
          <slot></slot>
         </q-card-section>
-        <q-card-actions align="right" class="text-primary">
+        <q-card-actions align="right" class="text-primary q-mt-lg">
           <q-btn flat label="確定" v-close-popup @click="CloseDialogue('OK')" />
           <q-btn flat label="キャンセル" v-close-popup @click="CloseDialogue('Cancel')" />
         </q-card-actions>

frontend/src/components/left/AppSelector.vue

@@ -22,7 +22,7 @@
       ></q-btn>
     </div>
   </div>
-  <ShowDialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeDg" min-width="680px" min-height="600px" height="600px">
+  <ShowDialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeDg" min-width="50vw" min-height="50vh" >
     <template v-slot:toolbar>
         <q-input  dense debounce="300" v-model="filter" placeholder="検索" clearable>
           <template v-slot:before>

frontend/src/components/left/EventTree.vue

@@ -1,48 +1,55 @@
 <template>
   <!-- <div class="q-pa-md q-gutter-sm"> -->
-    <q-tree
+  <q-tree :nodes="store.eventTree.screens" node-key="eventId" children-key="events" no-connectors
-      :nodes="store.eventTree.screens"
+    v-model:expanded="store.expandedScreen" :dense="true" :ref="tree">
-      node-key="eventId"
-      children-key="events"
-      no-connectors
-      v-model:expanded="store.expandedScreen"
-      :dense="true"
-      :ref="tree"
-    >
     <template v-slot:header-EVENT="prop">
-        <div class="row col items-start no-wrap event-node" @click="onSelected(prop.node)">
+      <div :ref="prop.node.eventId" class="row col items-center no-wrap event-node">
-          <q-icon v-if="prop.node.eventId"
+        <q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px"
-                  name="play_circle"
+          class="q-mr-sm">
-                  :color="prop.node.hasFlow?'green':'grey'"
-                  size="16px" class="q-mr-sm">
         </q-icon>
-          <div class="no-wrap" :class="selectedEvent && prop.node.eventId===selectedEvent.eventId?'selected-node':''">{{ prop.node.label }}</div>
+        <div class="no-wrap" @click="onSelected(prop.node)"
+          :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''">{{
+            prop.node.label }}</div>
         <q-space></q-space>
         <!-- <q-icon v-if="prop.node.hasFlow" name="delete" color="negative" size="16px" class="q-mr-sm"></q-icon> -->
       </div>
     </template>
     <template v-slot:header-CHANGE="prop">
-        <div class="row col items-start no-wrap event-node" >
+      <div class="row col items-center no-wrap event-node">
         <div class="no-wrap">{{ prop.node.label }}</div>
         <q-space></q-space>
-          <q-icon name="add_circle" color="primary" size="16px" class="q-mr-sm" @click="addChangeEvent(prop.node)"></q-icon>
+        <q-icon name="add_circle" color="primary" size="16px" class="q-mr-sm"
+          @click="addChangeEvent(prop.node)"></q-icon>
+      </div>
+    </template>
+    <template v-slot:header-DELETABLE="prop">
+      <div class="row col items-center event-node">
+        <div class="row col items-center" @click="onSelected(prop.node)">
+          <q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px"
+            class="q-mr-sm">
+          </q-icon>
+          <div>{{ prop.node.label }}</div>
+        </div>
+        <div>
+          <q-btn class="q-mr-sm delete-btn" flat fab-mini icon="delete_forever" padding="none" color="negative"
+            @click="deleteEvent(prop.node)"></q-btn>
+        </div>
       </div>
     </template>
   </q-tree>
-    <show-dialog v-model:visible="showDialog" name="フィールド選択" @close="closeDg" widht="400px">
+  <show-dialog v-model:visible="showDialog" name="フィールド選択" @close="closeDg">
     <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
   </show-dialog>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref } from 'vue';
-import { IKintoneEvent ,IKintoneEventGroup, IKintoneEventNode, kintoneEvent} from '../../types/KintoneEvents';
-import { storeToRefs } from 'pinia';
-import { useFlowEditorStore } from 'stores/flowEditor';
-import { ActionFlow, ActionNode, RootAction } from 'src/types/ActionTypes';
-import ShowDialog from '../ShowDialog.vue';
-import FieldSelect from '../FieldSelect.vue';
 import { QTree } from 'quasar';
+import { ActionFlow, RootAction } from 'src/types/ActionTypes';
+import { useFlowEditorStore } from 'stores/flowEditor';
+import { defineComponent, ref } from 'vue';
+import { IKintoneEvent, IKintoneEventGroup, IKintoneEventNode } from '../../types/KintoneEvents';
+import FieldSelect from '../FieldSelect.vue';
+import ShowDialog from '../ShowDialog.vue';
 export default defineComponent({
   name: 'EventTree',
   components: {
@@ -72,12 +79,12 @@ export default defineComponent({
         if (store.eventTree.findEventById(eventid)) {
           return;
         }
-        selectedChangeEvent.value?.events.push(
+        selectedChangeEvent.value?.events.push({
-          new kintoneEvent(
+          eventId: eventid,
-            field.label,
+          label: field.name,
-            eventid,
+          parentId: selectedChangeEvent.value.eventId,
-            selectedChangeEvent.value.eventId)
+          header: 'DELETABLE'
-        );
+        });
         tree.value?.expanded?.push(selectedChangeEvent.value.eventId);
         tree.value?.expandAll();
       }
@@ -89,6 +96,17 @@ export default defineComponent({
       selectedChangeEvent.value = node;
       showDialog.value = true;
     }
+
+    const deleteEvent = (node: IKintoneEvent) => {
+      if (!node.eventId) {
+        return;
+      }
+      store.deleteStoreEventAndFlow(node);
+      store.selectFlow(undefined)
+      console.log(store.selectedFlow);
+      
+    }
+
     const onSelected = (node: IKintoneEvent) => {
       if (!node.eventId) {
         return;
@@ -98,6 +116,7 @@ export default defineComponent({
         return;
       }
       const screen = store.eventTree.findEventById(node.parentId);
+
       let flow = store.findFlowByEventId(node.eventId);
       let screenName = screen !== null ? screen.label : "";
       let nodeLabel = node.label;
@@ -105,6 +124,7 @@ export default defineComponent({
       //   screenName=nodeLabel;
       //   nodeLabel=`${node.label}の値を変更したとき`;
       // }
+
       if (flow !== undefined && flow !== null) {
         store.selectFlow(flow);
       } else {
@@ -125,6 +145,7 @@ export default defineComponent({
       onSelected,
       selectedEvent,
       addChangeEvent,
+      deleteEvent,
       closeDg,
       store
     }
@@ -136,16 +157,21 @@ export default defineComponent({
   flex-wrap: nowarp;
   text-wrap: nowarp;
 }
+
 .event-node {
   cursor: pointer;
 }
+
 .selected-node {
   color: $primary;
   font-weight: bolder;
 }
+
 .event-node:hover {
   background-color: $light-blue-1;
 }
 
+.delete-btn {
+  margin-right: 5px;
+}
 </style>
-

frontend/src/components/right/AppFieldSelect.vue

@@ -0,0 +1,235 @@
+<template>
+    <div class="q-my-md" v-bind="$attrs">
+        <q-card flat>
+            <q-card-section class="q-pa-none q-my-sm q-mr-md">
+                <!-- <div class=" q-my-none ">App Field Select</div> -->
+                <div class="row q-mb-xs">
+                    <div class="text-primary q-mb-xs text-caption">{{ $props.displayName }}</div>
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <div class="q-mb-xs">{{ selectedField.app?.name || '未選択' }}</div>
+                    </div>
+                    <div class="col-1">
+                        <q-btn round flat size="sm" color="primary" icon="search" @click="showDg" />
+                    </div>
+                </div>
+            </q-card-section>
+            <q-separator />
+            <q-card-section class="q-pa-none q-ma-none">
+                <div style="">
+                    <div v-if="selectedField.fields && selectedField.fields.length > 0 ">
+                      <q-list bordered>
+                        <q-virtual-scroll style="max-height: 160px;" :items="selectedField.fields" separator v-slot="{ item, index }">
+                            <q-item :key="index" dense clickable >
+                                <q-item-section>
+                                    <q-item-label>
+                                        {{ item.label }}
+                                    </q-item-label>
+                                </q-item-section>
+                                <q-item-section side>
+                                    <q-btn round flat size="sm" icon="clear" @click="removeField(index)" />
+                                </q-item-section>
+                            </q-item>
+                        </q-virtual-scroll>
+                      </q-list>
+                    </div>
+                    <!-- <div v-else class="row q-mt-lg">
+                    </div> -->
+                </div>
+                <!-- <q-separator /> -->
+            </q-card-section>
+            <q-card-section class="q-px-none q-py-xs" v-if="selectedField.fields && selectedField.fields.length===0">
+                <div class="row">
+                    <div class="text-grey text-caption"> {{ $props.placeholder }}</div>
+                    <!-- <q-btn flat color="grey" label="clear" @click="clear" /> -->
+                </div>
+            </q-card-section>
+        </q-card>
+     </div>
+
+    <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeFieldDialog" ref="fieldDlg">
+
+        <div class="q-mx-md q-mb-lg">
+            <div class="q-mb-xs q-ml-md text-primary">アプリ選択</div>
+
+            <div class="q-pa-md row" style="border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 4px;">
+                <div v-if="!showSelectApp && selectedField.app">{{ selectedField.app?.name }}</div>
+                <q-space />
+                <div>
+                    <q-btn outline dense label="選 択" padding="none sm" color="primary" @click="() => {
+                        showSelectApp = true;
+                    }"></q-btn>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="!showSelectApp && selectedField.app?.name">
+            <div>
+                <div class="row q-mb-md">
+                    <!-- <div class="col"> -->
+                    <div class="q-mb-xs q-ml-md text-primary">フィールド選択</div>
+                    <!-- </div> -->
+                    <q-space />
+                    <!-- <div class="col"> -->
+                    <div class="q-mr-md">
+                      <q-input dense debounce="300" v-model="fieldFilter" placeholder="フィールド検索" clearable>
+                          <template v-slot:before>
+                              <q-icon name="search" />
+                          </template>
+                      </q-input>
+                    </div>
+                </div>
+                <div class="row">
+                    <field-select ref="fieldDlg" name="フィールド" :type="selectType" :updateSelects="updateItems"
+                        :appId="selectedField.app?.id" not_page :filter="fieldFilter" :selectedFields="selectedField.fields"></field-select>
+                </div>
+            </div>
+        </div>
+        <div style="min-width: 45vw;" v-else>
+        </div>
+
+    </show-dialog>
+
+    <show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeAppDlg">
+        <template v-slot:toolbar>
+            <q-input dense debounce="300" v-model="filter" placeholder="検索" clearable>
+                <template v-slot:before>
+                    <q-icon name="search" />
+                </template>
+            </q-input>
+        </template>
+
+        <AppSelect ref="appDlg" name="アプリ" type="single" :filter="filter"
+            :updateExternalSelectAppInfo="updateExternalSelectAppInfo"></AppSelect>
+    </show-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watchEffect, computed } from 'vue';
+import ShowDialog from '../ShowDialog.vue';
+import FieldSelect from '../FieldSelect.vue';
+import { useFlowEditorStore } from 'stores/flowEditor';
+import AppSelect from '../AppSelect.vue';
+interface IApp{
+  id:string,
+  name:string
+}
+interface IField {
+    name: string,
+    code: string,
+    type: string
+}
+
+interface IAppFields{
+   app?:IApp,
+   fields:IField[]
+}
+
+export default defineComponent({
+    inheritAttrs:false,
+    name: 'FieldInput',
+    components: {
+        ShowDialog,
+        FieldSelect,
+        AppSelect,
+    },
+    props: {
+        displayName: {
+            type: String,
+            default: '',
+        },
+        name: {
+            type: String,
+            default: '',
+        },
+        placeholder: {
+            type: String,
+            default: '',
+        },
+        modelValue: {
+            type: Object,
+            default: null
+        },
+        selectType:{
+            type:String,
+            default:'single'
+        }
+    },
+    setup(props, { emit }) {
+        const appDlg = ref();
+        const fieldDlg = ref();
+        const show = ref(false);
+        const showSelectApp = ref(false);
+       const selectedField = ref<IAppFields>({
+          app:undefined,
+          fields:[]
+       });
+       if(props.modelValue && "app" in props.modelValue && "fields" in props.modelValue){
+         selectedField.value=props.modelValue as IAppFields;
+       }
+        const store = useFlowEditorStore();
+
+        const isSelected = computed(() => {
+            return selectedField.value !== null && typeof selectedField.value === 'object' && ('app' in selectedField.value)
+        });
+
+        const showDg = () => {
+            show.value = true;
+        };
+
+        const clear = () => {
+            selectedField.value ={
+              fields:[]
+            } ;
+        }
+
+        const closeAppDlg = (val: string) => {
+            if (val == 'OK') {
+                selectedField.value.app = appDlg.value.selected[0];
+                selectedField.value.fields=[];
+                showSelectApp.value=false;
+            }
+        };
+
+        const closeFieldDialog=(val:string)=>{
+          if (val == 'OK') {
+                selectedField.value.fields = fieldDlg.value.selected;
+            }
+        };
+        const updateExternalSelectAppInfo = (newAppinfo:IApp) => {
+          // selectedField.value.app = newAppinfo
+        }
+
+        const updateItems = (newFields:IField[]) => {
+          // selectedField.value.fields = newFields
+        }
+
+        const removeField=(index:number)=>{
+          selectedField.value.fields.splice(index,1);
+        }
+        watchEffect(() => {
+            emit('update:modelValue', selectedField.value);
+        });
+
+        return {
+            store,
+            appDlg,
+            fieldDlg,
+            show,
+            showDg,
+            closeAppDlg,
+            closeFieldDialog,
+            selectedField,
+            showSelectApp,
+            isSelected,
+            updateExternalSelectAppInfo,
+            filter: ref(),
+            updateItems,
+            clear,
+            fieldFilter: ref(),
+            removeField
+        };
+    }
+});
+</script>

frontend/src/components/right/ColorPicker.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="" v-bind="$attrs">
+        <q-field v-model="color" :label="displayName" labelColor="primary"  :clearable="isSelected" stack-label :bottom-slots="!isSelected" >
+            <template v-slot:control>
+                <q-chip text-color="black" color="white" v-if="isSelected">
+                    <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" color="primary" >
+                    <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,watchEffect } from 'vue';
+export default defineComponent({
+    inheritAttrs:false,
+    name: 'ColorPicker',
+    components: {
+    },
+    props: {
+        displayName: {
+            type: String,
+            default: '',
+        },
+        name: {
+            type: String,
+            default: '',
+        },
+        placeholder: {
+            type: String,
+            default: '',
+        },
+        hint: {
+            type: String,
+            default: '',
+        },
+        modelValue: {
+            type: String,
+            default: null
+        },
+    },
+
+    setup(props, { emit }) {
+        const color = ref(props.modelValue??"");
+        const isSelected = computed(()=>props.modelValue && props.modelValue!=="");
+        watchEffect(()=>{
+          emit('update:modelValue', color.value);
+        });
+        return {
+            color,
+            isSelected
+        };
+    }
+});
+</script>

frontend/src/components/right/ConditionInput.vue

@@ -1,4 +1,5 @@
 <template>
+  <div v-bind="$attrs">
     <q-field v-model="tree" :label="displayName" labelColor="primary" stack-label >
       <template v-slot:control >
         <q-card flat class="full-width">
@@ -13,6 +14,7 @@
       </template>
     </q-field>
     <condition-editor v-model:show="show" v-model:conditionTree="tree" @closed="onClosed"></condition-editor>
+  </div>
 </template>
 
   <script lang="ts">
@@ -21,6 +23,7 @@
   import ConditionEditor from '../ConditionEditor/ConditionEditor.vue'
   export default defineComponent({
     name: 'FieldInput',
+    inheritAttrs:false,
     components: {
       ConditionEditor
     },

frontend/src/components/right/DatePicker.vue

@@ -1,5 +1,5 @@
 <template>
-
+  <div v-bind="$attrs">
     <q-input v-model="selectedDate" :label="displayName" :placeholder="placeholder" label-color="primary" mask="date" :rules="['date']" stack-label>
       <template v-slot:append>
         <q-icon name="event" class="cursor-pointer">
@@ -13,6 +13,7 @@
         </q-icon>
       </template>
     </q-input>
+  </div>
 </template>
 
 <script lang="ts">
@@ -20,6 +21,7 @@ import { defineComponent, ref ,watchEffect} from 'vue';
 
 export default defineComponent({
   name: 'DatePicker',
+  inheritAttrs:false,
   props: {
     displayName:{
       type: String,

frontend/src/components/right/EventSetter.vue

@@ -1,9 +1,11 @@
 <template>
+  <div v-bind="$attrs">
     <q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label>
       <template v-slot:append>
         <q-btn round dense flat icon="add" @click="addButtonEvent()" />
       </template>
     </q-input>
+  </div>
 </template>
 
 <script lang="ts">
@@ -13,6 +15,7 @@ import { IKintoneEventGroup,kintoneEvent } from 'src/types/KintoneEvents';
 
 export default defineComponent({
   name: 'EventSetter',
+  inheritAttrs:false,
   props: {
     displayName:{
       type: String,

frontend/src/components/right/FieldInput.vue

@@ -1,6 +1,7 @@
 <template>
-<q-field v-model="selectedField" :label="displayName" labelColor="primary"
+  <div v-bind="$attrs">
-        :clearable="isSelected" stack-label :bottom-slots="!isSelected" >
+    <q-field v-model="selectedField" :label="displayName" labelColor="primary" :clearable="isSelected" stack-label
+      :bottom-slots="!isSelected">
       <template v-slot:control>
         <q-chip color="primary" text-color="white" v-if="isSelected">
           {{ selectedField.name }}
@@ -14,12 +15,13 @@
       </template>
 
       <template v-slot:append>
-  <q-icon name="search" class="cursor-pointer"  @click="showDg"/>
+        <q-icon name="search" class="cursor-pointer" color="primary" @click="showDg" />
       </template>
     </q-field>
     <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px">
       <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
     </show-dialog>
+  </div>
 </template>
 
 <script lang="ts">
@@ -34,6 +36,7 @@ interface IField{
 }
 export default defineComponent({
   name: 'FieldInput',
+  inheritAttrs:false,
   components: {
     ShowDialog,
     FieldSelect,

frontend/src/components/right/InputText.vue

@@ -1,12 +1,28 @@
 <template>
-  <q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label/>
+  <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 { kMaxLength } from 'buffer';
 import { defineComponent, ref, watchEffect } from 'vue';
 
 export default defineComponent({
   name: 'InputText',
+  inheritAttrs: false,
   props: {
     displayName: {
       type: String,
@@ -24,6 +40,15 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    maxLength:{
+      type: Number,
+      default:undefined
+    },
+    //例：[val=>!!val ||'入力してください']
+    rules:{
+      type:String,
+      default:undefined
+    },
     modelValue: {
       type: String,
       default: '',
@@ -32,14 +57,23 @@ export default defineComponent({
 
   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),
+      rulesExp
     };
   },
 });
 </script>
+<style lang="scss">
+.hint-text {
+  white-space: always;
+  max-width: 450px;
+  font-size: 1.2em;
+}
+</style>

frontend/src/components/right/MuiltInputText.vue

@@ -1,5 +1,8 @@
 <template>
-  <q-input :label="displayName"   label-color="primary" v-model="inputValue" :placeholder="placeholder" autogrow stack-label/>
+  <div v-bind="$attrs">
+    <q-input :label="displayName" label-color="primary" v-model="inputValue" :placeholder="placeholder" autogrow
+      stack-label />
+  </div>
 </template>
 
 <script lang="ts">
@@ -7,6 +10,7 @@ import { defineComponent,ref,watchEffect } from 'vue';
 
 export default defineComponent({
   name: 'MuiltInputText',
+  inheritAttrs: false,
   props: {
     displayName: {
       type: String,

frontend/src/components/right/NumInput.vue

@@ -0,0 +1,87 @@
+<template>
+  <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>
+    </q-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watchEffect } from 'vue';
+export default defineComponent({
+  name: 'NumInput',
+  inheritAttrs:false,
+  components: {
+  },
+  props: {
+    displayName: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    hint: {
+      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: [Number , String],
+      default: undefined
+    },
+  },
+
+  setup(props, { emit }) {
+    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
+    };
+  }
+});
+</script>

frontend/src/components/right/PropertyList.vue

@@ -15,9 +15,12 @@ import InputText from '../right/InputText.vue';
 import SelectBox from '../right/SelectBox.vue';
 import DatePicker from '../right/DatePicker.vue';
 import FieldInput from '../right/FieldInput.vue';
+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({
@@ -27,9 +30,12 @@ export default defineComponent({
     SelectBox,
     DatePicker,
     FieldInput,
+    AppFieldSelect,
     MuiltInputText,
     ConditionInput,
-    EventSetter
+    EventSetter,
+    ColorPicker,
+    NumInput
   },
   props: {
     nodeProps: {

frontend/src/components/right/PropertyPanel.vue

@@ -11,7 +11,7 @@
          elevated
          overlay
        >
-        <q-card class="column full-height" style="width: 300px">
+        <q-card class="column" style="max-width: 300px;min-height: 100%">
          <q-card-section>
            <div class="text-h6">{{ actionNode?.subTitle }}：設定</div>
          </q-card-section>

frontend/src/components/right/SelectBox.vue

@@ -1,5 +1,7 @@
 <template>
+  <div v-bind="$attrs">
   <q-select v-model="selectedValue" :label="displayName" :options="options"/>
+</div>
 </template>
 
 <script lang="ts">
@@ -7,6 +9,7 @@ import { defineComponent,ref,watchEffect } from 'vue';
 
 export default defineComponent({
   name: 'SelectBox',
+  inheritAttrs:false,
   props: {
     displayName:{
       type: String,

frontend/src/control/flowctrl.ts

@@ -1,11 +1,8 @@
 import { api } from 'boot/axios';
 import { ActionFlow } from 'src/types/ActionTypes';
 
-export class FlowCtrl
+export class FlowCtrl {
-{
+  async getFlows(appId: string): Promise<ActionFlow[]> {
-
-  async getFlows(appId:string):Promise<ActionFlow[]>
-  {
     const flows: ActionFlow[] = [];
     try {
       const result = await api.get(`api/flows/${appId}`);
@@ -24,10 +21,9 @@ export class FlowCtrl
     }
   }
 
-  async SaveFlow(jsonData:any):Promise<boolean>
+  async SaveFlow(jsonData: any): Promise<boolean> {
-  {
     const result = await api.post('api/flow', jsonData);
-       console.info(result.data)
+    console.info(result.data);
     return true;
   }
   /**
@@ -35,10 +31,19 @@ export class FlowCtrl
    * @param jsonData
    * @returns
    */
-  async  UpdateFlow(jsonData:any):Promise<boolean>
+  async UpdateFlow(jsonData: any): Promise<boolean> {
-  {
     const result = await api.put('api/flow/' + jsonData.flowid, jsonData);
-    console.info(result.data)
+    console.info(result.data);
+    return true;
+  }
+  /**
+   * フローを消去する
+   * @param flowId
+   * @returns
+   */
+  async DeleteFlow(flowId: string): Promise<boolean> {
+    const result = await api.delete('api/flow/' + flowId);
+    console.info(result.data);
     return true;
   }
   /**
@@ -46,12 +51,9 @@ export class FlowCtrl
    * @param appid
    * @returns
    */
-  async depoly(appid:string):Promise<boolean>
+  async depoly(appid: string): Promise<boolean> {
-  {
     const result = await api.post(`api/v1/createjstokintone?app=${appid}`);
     console.info(result.data);
     return true;
   }
-
 }
-

frontend/src/pages/FlowChart.vue

@@ -20,10 +20,9 @@
           </div>
         </q-drawer>
       </div>
-      <q-btn flat dense round
+      <q-btn flat dense round :icon="drawerLeft ? 'keyboard_double_arrow_left' : 'keyboard_double_arrow_right'"
-              :icon="drawerLeft?'keyboard_double_arrow_left':'keyboard_double_arrow_right'"
+        :style="[drawerLeft ? { 'left': '300px' } : { 'left': '0px' }]" @click="drawerLeft = !drawerLeft"
-              :style="[drawerLeft?{'left':'300px'}:{'left':'0px'}]"
+        class="expand" />
-              @click="drawerLeft=!drawerLeft" class="expand" />
       <div class="q-pa-md q-gutter-sm" :style="{ minWidth: minPanelWidth }">
         <div class="flowchart" v-if="store.currentFlow" :style="[drawerLeft ? { paddingLeft: '300px' } : {}]">
           <node-item v-if="rootNode !== undefined" :key="rootNode.id" :isSelected="rootNode === store.activeNode"
@@ -195,7 +194,22 @@ const onDeploy = async () => {
 
 const onSaveFlow = async () => {
   const targetFlow = store.selectedFlow;
+
+  const deleteFlows = () => {
+    $q.notify({
+      type: 'positive',
+      caption: "通知",
+      message: `削除 ${store.deleteFlowIds.length} イベント`
+    });
+    store.deletebackendFlow();
+  }
+
   if (targetFlow === undefined) {
+    if (store.deleteFlowIds.length > 0) {
+      deleteFlows();
+      return;
+    }
+
     $q.notify({
       type: 'negative',
       caption: "エラー",
@@ -204,6 +218,9 @@ const onSaveFlow = async () => {
     return;
   }
   try {
+    if (store.deleteFlowIds.length > 0) {
+      deleteFlows();
+    }
     saveLoading.value = true;
     await store.saveFlow(targetFlow);
     saveLoading.value = false;
@@ -265,6 +282,7 @@ onMounted(() => {
   top: 50px;
   z-index: 999;
 }
+
 .expand {
   position: fixed;
   left: 0px;

frontend/src/stores/flowEditor.ts

@@ -12,10 +12,11 @@ export interface FlowEditorState{
   eventTree: KintoneEventManager;
   selectedEvent: IKintoneEvent | undefined;
   expandedScreen: any[];
+  deleteFlowIds: string[];
 }
 const flowCtrl = new FlowCtrl();
 const eventTree = new KintoneEventManager();
-export const useFlowEditorStore = defineStore("flowEditor",{
+export const useFlowEditorStore = defineStore('flowEditor', {
   state: (): FlowEditorState => ({
     flowNames1: '',
     appInfo: undefined,
@@ -24,7 +25,8 @@ export const useFlowEditorStore = defineStore("flowEditor",{
     activeNode: undefined,
     eventTree: eventTree,
     selectedEvent: undefined,
-      expandedScreen:[]
+    expandedScreen: [],
+    deleteFlowIds: [],
   }),
   getters: {
     /**
@@ -43,17 +45,29 @@ export const useFlowEditorStore = defineStore("flowEditor",{
       return (eventId: string) => {
         return state.flows?.find((flow) => {
           const root = flow.getRoot();
-              return root?.name===eventId
+          return root?.name === eventId;
         });
-      }
+      };
-    }
+    },
+
+    findEventById(state) {
+      return (eventId: string) => {
+        return state.eventTree.findEventById(eventId);
+      };
+    },
+
+    findEventFrist(state) {
+      return () => {
+        return state.eventTree.findEventFrist();
+      };
+    },
   },
 
   actions: {
     setFlows(flows: IActionFlow[]) {
       this.flows = flows;
     },
-    selectFlow(flow:IActionFlow){
+    selectFlow(flow: IActionFlow | undefined) {
       this.selectedFlow = flow;
     },
     setActiveNode(node: IActionNode) {
@@ -62,6 +76,12 @@ export const useFlowEditorStore = defineStore("flowEditor",{
     setApp(app: AppInfo) {
       this.appInfo = app;
     },
+    addDeleteFlowId(flowId: string) {
+      this.deleteFlowIds.push(flowId);
+    },
+    clearDeleteFlowIds() {
+      this.deleteFlowIds = [];
+    },
     /**
      * DBからフルーを保存する
      * @returns
@@ -80,7 +100,7 @@ export const useFlowEditorStore = defineStore("flowEditor",{
       if (actionFlows && actionFlows.length > 0) {
         this.selectFlow(actionFlows[0]);
       }
-        const expandNames = actionFlows.map(flow=>flow.getRoot()?.title);
+      const expandNames = actionFlows.map((flow) => flow.getRoot()?.title);
       // const expandName =actionFlows[0].getRoot()?.title;
       this.expandedScreen = expandNames;
     },
@@ -95,8 +115,8 @@ export const useFlowEditorStore = defineStore("flowEditor",{
         appid: this.appInfo?.appId,
         eventid: root?.name,
         name: root?.subTitle,
-        content: JSON.stringify(flow)
+        content: JSON.stringify(flow),
-      }
+      };
 
       if (isNew) {
         return await flowCtrl.SaveFlow(jsonData);
@@ -104,6 +124,33 @@ export const useFlowEditorStore = defineStore("flowEditor",{
         return await flowCtrl.UpdateFlow(jsonData);
       }
     },
+
+    async deletebackendFlow() {
+      const deletePromises = Object.values(this.deleteFlowIds).map((flowId) =>
+        flowCtrl.DeleteFlow(flowId)
+      );
+      await Promise.all(deletePromises);
+      this.clearDeleteFlowIds();
+    },
+
+    deleteStoreEventAndFlow(event: IKintoneEvent) {
+      const store = useFlowEditorStore();
+      if (event.flowData) {
+        const flow = event.flowData;
+        if (flow.id === '') {
+          return;
+        }
+        console.log('delete flow', flow);
+        
+        this.addDeleteFlowId(flow.id);
+        eventTree.deleteEvent(event, store);
+        if(this.flows){
+          this.flows = this.flows.filter((f) => f.id !== flow.id);
+        }
+      } else {
+        eventTree.deleteEvent(event, store);
+      }
+    },
     /**
      * デプロイする
      */
@@ -112,7 +159,6 @@ export const useFlowEditorStore = defineStore("flowEditor",{
         return false;
       }
       return await flowCtrl.depoly(this.appInfo?.appId);
-   }
+    },
-
+  },
-  }
 });

frontend/src/types/ActionTypes.ts

@@ -447,7 +447,7 @@ export class ActionFlow implements IActionFlow {
 
   getPrevVarNames(prevNode:IActionNode):IActionVariable[]{
     let varNames:IActionVariable[]=[];
-    if(prevNode.varName!==undefined){
+    if(prevNode.varName!==undefined && prevNode.varName.modelValue){
       varNames.unshift({
         actionName:prevNode.name,
         displayName:prevNode.varName.displayName,

frontend/src/types/KintoneEvents.ts

@@ -1,3 +1,4 @@
+import { useFlowEditorStore } from 'src/stores/flowEditor';
 import { IActionFlow } from './ActionTypes';
 export interface IKintoneEventNode {
   label: string;
@@ -15,18 +16,15 @@ export interface IKintoneEventGroup extends IKintoneEventNode {
   events: IKintoneEventNode[];
 }
 
-
 export class kintoneEvent implements IKintoneEvent {
   eventId: string;
   parentId: string;
   get hasFlow(): boolean {
-    return this.flowData!==undefined && this.flowData.actionNodes.length>1
+    return this.flowData !== undefined && this.flowData.actionNodes.length > 1;
-  };
+  }
   flowData?: IActionFlow | undefined;
   label: string;
-  get header():string{
+  header = 'EVENT';
-    return "EVENT";
-  }
   constructor(label: string, eventId: string, parentId: string) {
     this.eventId = eventId;
     this.label = label;
@@ -40,9 +38,14 @@ export class kintoneEventGroup implements IKintoneEventGroup{
   label: string;
   events: IKintoneEventNode[];
   get header(): string {
-    return "EVENTGROUP";
+    return 'EVENTGROUP';
   }
-  constructor(eventId:string,label:string,events:IKintoneEventNode[],parentId:string){
+  constructor(
+    eventId: string,
+    label: string,
+    events: IKintoneEventNode[],
+    parentId: string
+  ) {
     this.eventId = eventId;
     this.label = label;
     this.events = events;
@@ -50,16 +53,20 @@ export class kintoneEventGroup implements IKintoneEventGroup{
   }
 }
 
-
 export class kintoneEventForChange implements IKintoneEventGroup {
   eventId: string;
   parentId: string;
   label: string;
   events: IKintoneEventNode[];
   get header(): string {
-    return "CHANGE";
+    return 'CHANGE';
   }
-  constructor(eventId:string,label:string,events:IKintoneEventNode[],parentId:string){
+  constructor(
+    eventId: string,
+    label: string,
+    events: IKintoneEventNode[],
+    parentId: string
+  ) {
     this.eventId = eventId;
     this.label = label;
     this.events = events;
@@ -67,8 +74,6 @@ export class kintoneEventForChange implements IKintoneEventGroup{
   }
 }
 
-
-
 export class KintoneEventManager {
   public screens: IKintoneEventGroup[];
 
@@ -80,24 +85,38 @@ export class KintoneEventManager {
     this.screens = this.getKintoneEvents();
     for (const flow of flows) {
       const eventId = flow.getRoot()?.name;
+      console.log('eventId:', eventId);
       if (eventId !== undefined) {
         const eventNode = this.findEventById(eventId);
-        if(eventNode!==null && eventNode.header==="EVENT"){
+        if (eventNode !== null && eventNode.header === 'EVENT') {
           const event = eventNode as kintoneEvent;
           event.flowData = flow;
         } else {
           //EventGroupのIDを取得
-          const lastIndex = eventId.lastIndexOf(".");
+          const lastIndex = eventId.lastIndexOf('.');
           const groupId = eventId.substring(0, lastIndex);
           const eventNode = this.findEventById(groupId);
-          if(eventNode && (eventNode.header==="EVENTGROUP" || eventNode.header==="CHANGE")){
+          if (
+            eventNode &&
+            (eventNode.header === 'EVENTGROUP' || eventNode.header === 'CHANGE')
+          ) {
             const groupEvent = eventNode as kintoneEventGroup;
-            const newEvent =new kintoneEvent(
+            console.log('label:', flow.getRoot()?.subTitle);
-              flow.getRoot()?.subTitle || "",
+
-              eventId,
+            const newEvent = {
-              groupEvent.parentId
+              label: flow.getRoot()?.subTitle || '',
-            );
+              eventId: eventId,
-            newEvent.flowData=flow;
+              parentId: groupId,
+              header: 'DELETABLE',
+              hasFlow: true,
+              flowData: flow,
+            };
+
+            // new kintoneEvent(
+            // flow.getRoot()?.subTitle || '',
+            // eventId,
+            // groupEvent.parentId
+            // );
             groupEvent.events.push(newEvent);
           }
         }
@@ -105,19 +124,25 @@ export class KintoneEventManager {
     }
   }
 
+  public findEventFrist() {
+    return this.findEventById('app.record.create.show') as IKintoneEvent;
+  }
+
   public findEventById(eventId: string): IKintoneEventNode | null {
     const screen = this.findScreen(eventId);
-    if(screen) {return screen;}
+    if (screen) {
+      return screen;
+    }
     for (const screen of this.screens) {
       for (const event of screen.events) {
         if (event.eventId === eventId) {
           return event;
         }
-          if(event.header==="EVENTGROUP"||event.header==="CHANGE"){
+        if (event.header === 'EVENTGROUP' || event.header === 'CHANGE') {
           const eventGroup = event as IKintoneEventGroup;
           const targetEvent = eventGroup.events.find((ev) => {
             return ev.eventId === eventId;
-            })
+          });
           if (targetEvent) {
             return targetEvent;
           }
@@ -128,39 +153,169 @@ export class KintoneEventManager {
   }
 
   public findScreen(eventId: string): IKintoneEventGroup | undefined {
-    return this.screens.find(screen=>screen.eventId==eventId);
+    return this.screens.find((screen) => screen.eventId == eventId);
+  }
+
+  public deleteEvent(
+    event: kintoneEvent,
+    store: ReturnType<typeof useFlowEditorStore>
+  ) {
+    if (event.header !== 'DELETABLE') {
+      return;
+    }
+
+    const parent = store.findEventById(event.parentId);
+    if (parent?.header !== 'CHANGE' && parent?.header !== 'EVENTGROUP') {
+      return;
+    }
+    const realParent = parent as kintoneEventForChange;
+
+    const index = realParent.events.findIndex(
+      (e) => e.eventId === event.eventId
+    );
+
+    if (index !== -1) {
+      realParent.events.splice(index, 1);
+    }
   }
 
   public getKintoneEvents(): IKintoneEventGroup[] {
     return [
-        new kintoneEventGroup("app.record.create","レコード追加画面",[
+      new kintoneEventGroup(
-          new kintoneEvent('レコード追加画面を表示した後','app.record.create.show',"app.record.create"),
+        'app.record.create',
-          new kintoneEvent('保存をクリックしたとき','app.record.create.submit',"app.record.create"),
+        'レコード追加画面',
-          new kintoneEvent('保存が成功したとき','app.record.create.submit.success',"app.record.create"),
+        [
-          new kintoneEventForChange('app.record.create.change','フィールドの値を変更したとき',[],"app.record.create"),
+          new kintoneEvent(
-          new kintoneEventGroup('app.record.create.show.customButtonClick','ボタンをクリックした時',[],"app.record.create")
+            'レコード追加画面を表示した後',
-        ],""),
+            'app.record.create.show',
-        new kintoneEventGroup("app.record.detail","レコード詳細画面",[
+            'app.record.create'
-          new kintoneEvent('レコード詳細画面を表示した後','app.record.detail.show',"app.record.detail"),
+          ),
-          new kintoneEvent('レコードを削除するとき','app.record.detail.delete.submit',"app.record.detail"),
+          new kintoneEvent(
-          new kintoneEvent('プロセス管理のアクションを実行したとき','app.record.detail.process.proceed',"app.record.detail"),
+            '保存をクリックしたとき',
-          new kintoneEventGroup('app.record.detail.show.customButtonClick','ボタンをクリックした時',[],"app.record.detail"),
+            'app.record.create.submit',
-        ],""),
+            'app.record.create'
-        new kintoneEventGroup("app.record.edit","レコード編集画面",[
+          ),
-          new kintoneEvent('レコード編集画面を表示した後','app.record.edit.show',"app.record.edit"),
+          new kintoneEvent(
-          new kintoneEvent('保存をクリックしたとき','app.record.edit.submit',"app.record.edit"),
+            '保存が成功したとき',
-          new kintoneEvent('保存が成功したとき','app.record.edit.submit.success',"app.record.edit"),
+            'app.record.create.submit.success',
-          new kintoneEventForChange('app.record.edit.change','フィールドの値を変更したとき',[],"app.record.edit"),
+            'app.record.create'
-          new kintoneEventGroup('app.record.edit.show.customButtonClick','ボタンをクリックした時',[],"app.record.edit"),
+          ),
-        ],""),
+          new kintoneEventForChange(
-        new kintoneEventGroup("app.record.index","レコード一覧画面",[
+            'app.record.create.change',
-          new kintoneEvent('一覧画面を表示した後', 'app.record.index.show',"app.record.index"),
+            'フィールドの値を変更したとき',
-          new kintoneEvent('インライン編集を開始したとき','app.record.index.edit.show',"app.record.index"),
+            [],
-          new kintoneEvent('インライン編集の【保存】をクリックしたとき','app.record.index.edit.submit',"app.record.index"),
+            'app.record.create'
-          new kintoneEvent('インライン編集の保存が成功したとき', 'app.record.index.edit.submit.success',"app.record.index"),
+          ),
-          new kintoneEventForChange('app.record.index.edit.change','インライン編集のフィールド値を変更したとき' ,[],"app.record.index"),
+          new kintoneEventGroup(
-          new kintoneEventGroup('app.record.detail.show.customButtonClick','ボタンをクリックした時',[],"app.record.index"),
+            'app.record.create.show.customButtonClick',
-        ],"")
+            'ボタンをクリックした時',
+            [],
+            'app.record.create'
+          ),
+        ],
+        ''
+      ),
+      new kintoneEventGroup(
+        'app.record.detail',
+        'レコード詳細画面',
+        [
+          new kintoneEvent(
+            'レコード詳細画面を表示した後',
+            'app.record.detail.show',
+            'app.record.detail'
+          ),
+          new kintoneEvent(
+            'レコードを削除するとき',
+            'app.record.detail.delete.submit',
+            'app.record.detail'
+          ),
+          new kintoneEvent(
+            'プロセス管理のアクションを実行したとき',
+            'app.record.detail.process.proceed',
+            'app.record.detail'
+          ),
+          new kintoneEventGroup(
+            'app.record.detail.show.customButtonClick',
+            'ボタンをクリックした時',
+            [],
+            'app.record.detail'
+          ),
+        ],
+        ''
+      ),
+      new kintoneEventGroup(
+        'app.record.edit',
+        'レコード編集画面',
+        [
+          new kintoneEvent(
+            'レコード編集画面を表示した後',
+            'app.record.edit.show',
+            'app.record.edit'
+          ),
+          new kintoneEvent(
+            '保存をクリックしたとき',
+            'app.record.edit.submit',
+            'app.record.edit'
+          ),
+          new kintoneEvent(
+            '保存が成功したとき',
+            'app.record.edit.submit.success',
+            'app.record.edit'
+          ),
+          new kintoneEventForChange(
+            'app.record.edit.change',
+            'フィールドの値を変更したとき',
+            [],
+            'app.record.edit'
+          ),
+          new kintoneEventGroup(
+            'app.record.edit.show.customButtonClick',
+            'ボタンをクリックした時',
+            [],
+            'app.record.edit'
+          ),
+        ],
+        ''
+      ),
+      new kintoneEventGroup(
+        'app.record.index',
+        'レコード一覧画面',
+        [
+          new kintoneEvent(
+            '一覧画面を表示した後',
+            'app.record.index.show',
+            'app.record.index'
+          ),
+          new kintoneEvent(
+            'インライン編集を開始したとき',
+            'app.record.index.edit.show',
+            'app.record.index'
+          ),
+          new kintoneEvent(
+            'インライン編集の【保存】をクリックしたとき',
+            'app.record.index.edit.submit',
+            'app.record.index'
+          ),
+          new kintoneEvent(
+            'インライン編集の保存が成功したとき',
+            'app.record.index.edit.submit.success',
+            'app.record.index'
+          ),
+          new kintoneEventForChange(
+            'app.record.index.edit.change',
+            'インライン編集のフィールド値を変更したとき',
+            [],
+            'app.record.index'
+          ),
+          new kintoneEventGroup(
+            'app.record.detail.show.customButtonClick',
+            'ボタンをクリックした時',
+            [],
+            'app.record.index'
+          ),
+        ],
+        ''
+      ),
     ];
   }
 }

plugin/kintone-addins/readme.md

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

sample.json

@@ -2,25 +2,22 @@
   "id": "",
   "actionNodes": [
     {
-      "id": "cdd696f5-7e9c-4fd7-bf8b-9cd1b1605870",
+      "id": "c5cd772a-04be-418e-a811-3787f98a2285",
-      "name": "app.record.create.submit",
+      "name": "app.record.create.show",
       "title": "レコード追加画面",
-      "subTitle": "保存をクリックしたとき",
+      "subTitle": "レコード追加画面を表示した後",
       "inputPoint": "",
       "outputPoints": [],
       "isRoot": true,
       "actionProps": [],
       "ActionValue": {},
-      "nextNodeIds": [
+      "nextNodeIds": {
-        [
+        "": "1eb097b1-9d08-462e-97b0-6e3e1232edef"
-          "",
+      }
-          "dfa6df09-7b3e-4848-89ad-2e9147004f31"
-        ]
-      ]
     },
     {
-      "id": "dfa6df09-7b3e-4848-89ad-2e9147004f31",
+      "id": "1eb097b1-9d08-462e-97b0-6e3e1232edef",
-      "name": "自動採番する",
+      "name": "属性UIテスト用",
       "inputPoint": "",
       "outputPoints": [],
       "actionProps": [
@@ -31,185 +28,86 @@
             "displayName": "表示名",
             "placeholder": "表示を入力してください",
             "hint": "",
-            "modelValue": "文書番号を自動採番する"
+            "modelValue": "属性UIテスト用"
           }
         },
         {
-          "component": "FieldInput",
+          "component": "AppFieldSelect",
           "props": {
-            "displayName": "採番項目",
+            "displayName": "フィールド選択(複数)",
             "modelValue": {
-              "name": "文書番号",
+              "app": {
-              "type": "SINGLE_LINE_TEXT",
+                "id": "64",
-              "code": "文書番号",
+                "name": "日報テスト",
-              "label": "文書番号",
+                "description": "日々の業務内容、報告事項、所感などを記載していくアプリです。\n記録を行うだけでなく、あとからの振り返りやメンバー間のコミュニケーションにも活用できます。",
+                "createdate": "2023/07/15 10:15:03"
+              },
+              "fields": [
+                {
+                  "name": "ステータス",
+                  "type": "STATUS",
+                  "code": "ステータス",
+                  "label": "ステータス",
+                  "enabled": false
+                }
+              ]
+            },
+            "name": "selectFields",
+            "placeholder": "アプリ選択後、フィールドを選んでください",
+            "selectType": "multiple"
+          }
+        },
+        {
+          "component": "AppFieldSelect",
+          "props": {
+            "displayName": "フィールド選択(単一)",
+            "modelValue": {
+              "app": {
+                "id": "58",
+                "name": "日報",
+                "description": "",
+                "createdate": "2023/07/13 19:05:26"
+              },
+              "fields": [
+                {
+                  "name": "所感、学び",
+                  "type": "MULTI_LINE_TEXT",
+                  "code": "文字列__複数行__0",
+                  "label": "所感、学び",
                   "noLabel": false,
                   "required": false,
-              "minLength": "",
-              "maxLength": "",
-              "expression": "",
-              "hideExpression": false,
-              "unique": false,
                   "defaultValue": ""
+                }
+              ]
             },
-            "name": "field",
+            "name": "selectField",
-            "placeholder": "採番項目を選択してください"
+            "placeholder": "アプリ選択後、フィールドを選んでください",
+            "selectType": "single"
           }
         },
         {
-          "component": "InputText",
+          "component": "ColorPicker",
           "props": {
-            "displayName": "フォーマット",
+            "displayName": "色選択",
-            "modelValue": "000000",
+            "modelValue": "#f50000",
-            "name": "format",
+            "name": "color",
-            "placeholder": "数値書式文字列を指定します"
+            "placeholder": "カラーを選択してください"
           }
         },
         {
-          "component": "InputText",
+          "component": "NumInput",
           "props": {
-            "displayName": "前につける文字列",
+            "displayName": "数値入力フィールド",
-            "modelValue": "",
+            "modelValue": 100,
-            "name": "prefix",
+            "name": "num",
-            "placeholder": "前につける文字列を入力してください"
+            "max": 100,
-          }
+            "min": 0,
-        },
+            "placeholder": "数値を入力してください"
-        {
-          "component": "InputText",
-          "props": {
-            "displayName": "後ろにつける文字列",
-            "modelValue": "{$format('yyyyMMdd')}",
-            "name": "suffix",
-            "placeholder": "後ろにつける文字列を入力してください"
-          }
-        },
-        {
-          "component": "InputText",
-          "props": {
-            "displayName": "結果（戻り値）",
-            "modelValue": "docNumber",
-            "name": "verName",
-            "placeholder": "変数名を入力してください"
           }
         }
       ],
-      "prevNodeId": "cdd696f5-7e9c-4fd7-bf8b-9cd1b1605870",
+      "prevNodeId": "c5cd772a-04be-418e-a811-3787f98a2285",
-      "nextNodeIds": [
+      "nextNodeIds": {}
-        [
-          "",
-          "b32bf329-f05a-486f-9b79-9920b57fe324"
-        ]
-      ]
-    },
-    {
-      "id": "b32bf329-f05a-486f-9b79-9920b57fe324",
-      "name": "条件式",
-      "inputPoint": "",
-      "outputPoints": [
-        "はい",
-        "いいえ"
-      ],
-      "actionProps": [
-        {
-          "component": "InputText",
-          "props": {
-            "name": "displayName",
-            "displayName": "表示名",
-            "placeholder": "表示を入力してください",
-            "hint": "",
-            "modelValue": "条件式を設定する"
-          }
-        },
-        {
-          "component": "ConditionInput",
-          "props": {
-            "displayName": "条件",
-            "modelValue": "{\"index\":0,\"type\":\"root\",\"children\":[{\"index\":1,\"type\":\"condition\",\"parent\":\"root\",\"object\":{\"name\":\"部署\",\"objectType\":\"field\",\"type\":\"DROP_DOWN\",\"code\":\"ドロップダウン\",\"label\":\"部署\",\"noLabel\":false,\"required\":false,\"options\":{\"総務\":{\"label\":\"総務\",\"index\":\"2\"},\"サポート\":{\"label\":\"サポート\",\"index\":\"3\"},\"マーケティング\":{\"label\":\"マーケティング\",\"index\":\"1\"},\"営業\":{\"label\":\"営業\",\"index\":\"0\"},\"開発\":{\"label\":\"開発\",\"index\":\"4\"}},\"defaultValue\":\"\"},\"operator\":\"!=\",\"value\":\"\"},{\"index\":2,\"type\":\"condition\",\"parent\":\"root\",\"object\":{\"name\":\"所感、学び\",\"objectType\":\"field\",\"type\":\"MULTI_LINE_TEXT\",\"code\":\"文字列__複数行__0\",\"label\":\"所感、学び\",\"noLabel\":false,\"required\":false,\"defaultValue\":\"\"},\"operator\":\"!=\",\"value\":\"\"},{\"index\":3,\"type\":\"condition\",\"parent\":\"root\",\"object\":{\"name\":\"業務内容\",\"objectType\":\"field\",\"type\":\"MULTI_LINE_TEXT\",\"code\":\"文字列__複数行_\",\"label\":\"業務内容\",\"noLabel\":false,\"required\":false,\"defaultValue\":\"\"},\"operator\":\"!=\",\"value\":\"\"},{\"index\":4,\"type\":\"condition\",\"parent\":\"root\",\"object\":{\"name\":\"ステータス\",\"objectType\":\"field\",\"type\":\"STATUS\",\"code\":\"ステータス\",\"label\":\"ステータス\",\"enabled\":true},\"operator\":\"=\",\"value\":\"作成中\"}],\"parent\":null,\"logicalOperator\":\"AND\"}",
-            "name": "condition",
-            "placeholder": "条件式を設定してください"
-          }
-        },
-        {
-          "component": "InputText",
-          "props": {
-            "displayName": "結果（戻り値）",
-            "modelValue": "conditionResult",
-            "name": "verName",
-            "placeholder": "変数名を入力してください"
-          }
-        }
-      ],
-      "prevNodeId": "dfa6df09-7b3e-4848-89ad-2e9147004f31",
-      "nextNodeIds": [
-        [
-          "いいえ",
-          "82bdcbcc-d8c1-4e2c-b38f-f736c95b193a"
-        ]
-      ]
-    },
-    {
-      "id": "82bdcbcc-d8c1-4e2c-b38f-f736c95b193a",
-      "name": "表示／非表示",
-      "inputPoint": "いいえ",
-      "outputPoints": [],
-      "actionProps": [
-        {
-          "component": "InputText",
-          "props": {
-            "name": "displayName",
-            "displayName": "表示名",
-            "placeholder": "表示を入力してください",
-            "hint": "",
-            "modelValue": "指定項目の表示・非表示を設定する"
-          }
-        },
-        {
-          "component": "FieldInput",
-          "props": {
-            "displayName": "フィールド",
-            "modelValue": {
-              "name": "文書番号",
-              "type": "SINGLE_LINE_TEXT",
-              "code": "文書番号",
-              "label": "文書番号",
-              "noLabel": false,
-              "required": false,
-              "minLength": "",
-              "maxLength": "",
-              "expression": "",
-              "hideExpression": false,
-              "unique": false,
-              "defaultValue": ""
-            },
-            "name": "field",
-            "placeholder": "対象項目を選択してください"
-          }
-        },
-        {
-          "component": "SelectBox",
-          "props": {
-            "displayName": "表示／非表示",
-            "options": [
-              "表示",
-              "非表示"
-            ],
-            "modelValue": "非表示",
-            "name": "show",
-            "placeholder": ""
-          }
-        },
-        {
-          "component": "ConditionInput",
-          "props": {
-            "displayName": "条件",
-            "modelValue": "{\"index\":0,\"type\":\"root\",\"children\":[{\"index\":1,\"type\":\"condition\",\"parent\":\"root\",\"object\":{},\"operator\":\"=\",\"value\":\"\"}],\"parent\":null,\"logicalOperator\":\"AND\"}",
-            "name": "condition",
-            "placeholder": "条件式を設定してください"
-          }
-        }
-      ],
-      "prevNodeId": "b32bf329-f05a-486f-9b79-9920b57fe324",
-      "nextNodeIds": []
     }
   ]
 }

sample2.json

@@ -2,36 +2,54 @@
     {
         "component": "InputText",
         "props": {
-            "displayName": "ボタン名",
+            "displayName": "文字入力",
             "modelValue": "",
-            "name": "buttonName",
+            "name": "str",
-            "placeholder": "ボタンのラベルを入力してください"
+            "placeholder": "文字を入力してください",
+            "maxLength":"20",
+            "hint":"文字列入力<br>入力ルール指定可能。ルールの設定例：[val=>!!val||'必須入力です']",
+            "rules":"[val=>!!val||'必須入力です']"
         }
     },
     {
-        "component": "SelectBox",
+        "component": "AppFieldSelect",
         "props": {
-            "displayName": "追加位置",
+            "displayName": "フィールド選択(複数)",
-            "modelValue": "",
+            "modelValue": {},
-            "name": "position",
+            "name": "selectFields",
-            "options":[
+            "placeholder": "アプリ選択後、フィールドを選んでください",
-                "一番右に追加する",
+            "selectType":"multiple"
-                "一番左に追加する"
-            ],
-            "placeholder": "追加位置を選択してください"
         }
     },
     {
-        "component": "EventSetter",
+        "component": "AppFieldSelect",
         "props": {
-            "displayName": "イベント名",
+            "displayName": "フィールド選択(単一)",
+            "modelValue": {},
+            "name": "selectField",
+            "placeholder": "アプリ選択後、フィールドを選んでください",
+            "selectType":"single"
+        }
+    },
+    {
+        "component": "ColorPicker",
+        "props": {
+            "displayName": "色選択",
             "modelValue": "",
-            "name": "eventName",
+            "name": "color",
-            "connectProps":[{
+            "placeholder": "カラーを選択してください"
-                "key":"displayName",
+        }
-                "propName":"buttonName"
+    },
-            }],
+    {
-            "placeholder": "イベント名を入力してください"
+        "component": "NumInput",
+        "props": {
+            "displayName": "数値入力フィールド",
+            "modelValue": "",
+            "name": "num",
+            "max":100,
+            "min":0,
+            "placeholder": "数値を入力してください",
+            "rules":"[val=>!!val ||'数値を入力してください',val=>val<=100 && val>=1 || '1-100の範囲内の数値を入力してください']"
         }
     }
 ]