feat(editor): add bubbles and cancelable to trigger-event

src/components/newtab/workflow/WorkflowDetailsCard.vue

@@ -35,12 +35,22 @@
     </p>
   </div>
   <div class="flex px-4 mt-2 space-x-2">
-    <ui-button
-      :disabled="!dataChanged"
-      variant="accent"
-      class="flex-1"
-      @click="$emit('save')"
-    >
+    <ui-button variant="accent" class="flex-1 relative" @click="$emit('save')">
+      <span
+        v-if="dataChanged"
+        class="
+          inline-block
+          absolute
+          h-3
+          w-3
+          rounded-full
+          bg-primary
+          -ml-1
+          -mt-1
+          top-0
+          left-0
+        "
+      ></span>
       <v-remixicon name="riSaveLine" class="mr-2 -ml-1" />
       Save
     </ui-button>
@@ -54,7 +64,11 @@
         </ui-button>
       </template>
       <ui-list>
-        <ui-list-item class="cursor-pointer" @click="$emit('showDataColumns')">
+        <ui-list-item
+          v-close-popover
+          class="cursor-pointer"
+          @click="$emit('showDataColumns')"
+        >
           <v-remixicon name="riKey2Line" class="mr-2 -ml-1" />
           <span>Data columns</span>
         </ui-list-item>

src/components/newtab/workflow/edit/EditTriggerEvent.vue

@@ -11,7 +11,6 @@
       </option>
     </ui-select>
     <button
-      v-if="componentName"
       class="mb-2 block w-full text-left mt-4 focus:ring-0"
       @click="showOptions = !showOptions"
     >
@@ -23,9 +22,24 @@
       <span class="align-middle">Options</span>
     </button>
     <transition-expand>
-      <div v-if="showOptions && componentName">
+      <div v-if="showOptions">
+        <div class="grid grid-cols-2 gap-2 mb-4">
+          <ui-checkbox
+            :model-value="params.bubbles"
+            @change="updateParams({ ...params, bubbles: $event })"
+          >
+            Bubbles
+          </ui-checkbox>
+          <ui-checkbox
+            :model-value="params.cancelable"
+            @change="updateParams({ ...params, cancelable: $event })"
+          >
+            Cancelable
+          </ui-checkbox>
+        </div>
         <component
           :is="componentName"
+          v-if="componentName"
           :params="params"
           @update="updateParams"
         />
@@ -88,8 +102,10 @@ function handleEventChange(value) {
   componentName.value = eventComponents[eventType];
 
   if (eventType !== props.eventType) {
-    payload.eventParams = {};
-    params.value = {};
+    const defaultParams = { bubbles: true, cancelable: true };
+
+    payload.eventParams = defaultParams;
+    params.value = defaultParams;
   }
 
   updateData(payload);

src/utils/shared.js

@@ -191,7 +191,7 @@ export const tasks = {
       multiple: false,
       eventName: '',
       eventType: '',
-      eventParams: {},
+      eventParams: { bubbles: true, cancelable: false },
     },
   },
   conditions: {