ボタンクリックイベント対応

frontend/src/components/right/ActionProperty.vue

@@ -1,25 +1,27 @@
 <template>
   <div>
     <div v-for="(item, index) in componentData" :key="index">
-      <component :is="item.component" v-bind="item.props" v-model="item.props.modelValue"></component>
+      <component :is="item.component" v-bind="item.props" :connectProps="connectProps" v-model="item.props.modelValue"></component>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent,computed } from 'vue';
 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 EventSetter from '../right/EventSetter.vue';
+import { IActionProperty, IProp } from 'src/types/ActionTypes';
 export default defineComponent({
   name: 'ActionProperty',
   components: {
     InputText,
     SelectBox,
     DatePicker,
-    FieldInput
+    FieldInput,
+    EventSetter
   },
   props: {
     jsonData: {
@@ -31,27 +33,43 @@ export default defineComponent({
       required: false,
     }
   },
-  computed: {
-      componentData() {
-      return this.jsonData.elements.map((element: any) => {
-        if(this.jsonValue != undefined )
+  setup(props){
+    const componentData=computed<Array<IActionProperty>>(()=>{
+      return props.jsonData.elements.map((element: any) => {
+        if(props.jsonValue != undefined )
         {
-          if(this.jsonValue.hasOwnProperty(element.props.name))
+          if(props.jsonValue.hasOwnProperty(element.props.name))
           {
-            element.props.modelValue = this.jsonValue[element.props.name];
+            element.props.modelValue = props.jsonValue[element.props.name];
           }
           else
           {
             element.props.modelValue = '';
           }
-
         }
         return {
           component: element.component,
           props: element.props,
         };
       });
-    },
-  },
+    });
+    const connectProps=(props:IProp)=>{
+       const connProps:any={};
+       if(props && "connectProps" in props && props.connectProps!=undefined){
+          for(let connProp of props.connectProps){
+            let targetProp = componentData.value.find((prop)=>prop.props.name===connProp.propName);
+            if(targetProp){
+              connProps[connProp.key]=targetProp;
+            }
+          }
+       }
+       return connProps;
+    }
+
+    return{
+        componentData,
+        connectProps
+    }
+  }
 });
 </script>