[ルックアップ更新]条件式の不具合対応

frontend/src/components/left/EventTree.vue

@@ -8,8 +8,8 @@
           class="q-mr-sm">
         </q-icon>
         <div class="no-wrap"
-          :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''">{{
-            prop.node.label }}</div>
+          :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>
@@ -27,7 +27,7 @@
     <template v-slot:header-DELETABLE="prop">
       <div class="row col items-start event-node" @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" />
-          <div class="no-wrap" :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''" >{{ prop.node.label }}</div>
+          <div class="no-wrap" :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''" >{{ prop.node.label}}</div>
           <q-space></q-space>
           <q-icon  name="delete_forever"  color="negative" size="16px" @click="deleteEvent(prop.node)"></q-icon>
       </div>

frontend/src/components/right/ColorPicker.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="" v-bind="$attrs">
-        <q-field v-model="color" :label="displayName" labelColor="primary"  :clearable="isSelected" stack-label :bottom-slots="!isSelected" >
+        <q-field v-model="color" :label="displayName" labelColor="primary"  :clearable="isSelected" stack-label :bottom-slots="!isSelected" :rules="rulesExp">
             <template v-slot:control>
                 <q-chip text-color="black" color="white" v-if="isSelected">
                     <div class="row">
@@ -57,17 +57,34 @@ export default defineComponent({
             type: String,
             default: null
         },
+        //例：[val=>!!val ||'入力してください']
+        rules: {
+          type: String,
+          default: undefined
+        },
+        required:{
+          type:Boolean,
+          default:false
+        },
+        requiredMessage: {
+          type: String,
+          default: ''
+        }
     },
-
     setup(props, { emit }) {
         const color = ref(props.modelValue??"");
         const isSelected = computed(()=>props.modelValue && props.modelValue!=="");
+        const customExp = props.rules === undefined ? [] : eval(props.rules);
+        const errmsg = props.requiredMessage?props.requiredMessage:`${props.displayName}が必須です。`;
+        const requiredExp = props.required?[((val:any)=>!!val || errmsg ),"anyColor"]:[];
+        const rulesExp=[...requiredExp,...customExp];
         watchEffect(()=>{
           emit('update:modelValue', color.value);
         });
         return {
             color,
-            isSelected
+            isSelected,
+            rulesExp
         };
     }
 });

frontend/src/components/right/ConditionInput.vue

@@ -59,6 +59,10 @@ export default defineComponent({
       type: String,
       default: 'field'
     },
+    connectProps:{
+      type:Object,
+      default:()=>({})
+    },
     onlySourceSelect: {
       type: Boolean,
       default: false
@@ -87,7 +91,10 @@ export default defineComponent({
   },
 
   setup(props, { emit }) {
-    const source = props.context.find(element => element.props.name === 'sources')
+    let source = reactive(props.connectProps["source"]);
+    if(!source){
+      source = props.context.find(element => element.props.name === 'sources');
+    }
 
     if (source) {
       if (props.sourceType === 'field') {