feat(editor): add 'element exists' block

src/components/block/BlockComparison.vue → src/components/block/BlockConditions.vue

@@ -106,6 +106,7 @@ const conditions = {
   '>=': 'Greater than or equal',
   '<': 'Less than',
   '<=': 'Less than or equal',
+  '()': 'Contains',
 };
 
 function addComparison() {

src/components/block/BlockElementExists.vue

@@ -0,0 +1,62 @@
+<template>
+  <div :id="componentId" class="p-4 element-exists">
+    <div class="flex items-center mb-2">
+      <div
+        :class="block.category.color"
+        class="inline-block text-sm mr-4 p-2 rounded-lg"
+      >
+        <v-remixicon
+          :path="icons.riFocus3Line"
+          size="20"
+          class="inline-block mr-1"
+        />
+        <span>Element exists</span>
+      </div>
+      <div class="flex-grow"></div>
+      <v-remixicon
+        :path="icons.riDeleteBin7Line"
+        class="cursor-pointer"
+        @click="editor.removeNodeId(`node-${block.id}`)"
+      />
+    </div>
+    <input
+      :value="block.data.selector"
+      class="px-4 py-2 rounded-lg w-48 mb-2 bg-input"
+      placeholder="Element selector"
+      required
+      @input="handleInput"
+    />
+    <p class="text-right text-gray-600">Fallback</p>
+  </div>
+</template>
+<script setup>
+import { VRemixIcon as VRemixicon } from 'v-remixicon';
+import { icons } from '@/lib/v-remixicon';
+import { useComponentId } from '@/composable/componentId';
+import { useEditorBlock } from '@/composable/editorBlock';
+
+const props = defineProps({
+  editor: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const componentId = useComponentId('block-delay');
+const block = useEditorBlock(`#${componentId}`, props.editor);
+
+function handleInput({ target }) {
+  target.reportValidity();
+
+  props.editor.updateNodeDataFromId(block.id, { selector: target.value });
+}
+</script>
+<style>
+.drawflow .element-exists .outputs {
+  top: 74px !important;
+  transform: none !important;
+}
+.drawflow .element-exists .output {
+  margin-bottom: 22px;
+}
+</style>

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

@@ -6,9 +6,33 @@
       class="mt-3 w-full"
       @change="updateData({ attributeName: $event })"
     />
+    <div class="flex items-center mt-3">
+      <ui-select
+        :model-value="data.dataColumn"
+        placeholder="Data column"
+        class="mr-2 flex-1"
+        @change="updateData({ dataColumn: $event })"
+      >
+        <option
+          v-for="column in workflow.data.value.dataColumns"
+          :key="column.name"
+          :value="column.name"
+        >
+          {{ column.name }}
+        </option>
+      </ui-select>
+      <ui-button
+        icon
+        title="Data columns"
+        @click="workflow.showDataColumnsModal(true)"
+      >
+        <v-remixicon name="riKey2Line" />
+      </ui-button>
+    </div>
   </edit-interaction-base>
 </template>
 <script setup>
+import { inject } from 'vue';
 import EditInteractionBase from './EditInteractionBase.vue';
 
 const props = defineProps({
@@ -19,6 +43,8 @@ const props = defineProps({
 });
 const emit = defineEmits(['update:data']);
 
+const workflow = inject('workflow');
+
 function updateData(value) {
   emit('update:data', { ...props.data, ...value });
 }

src/utils/shared.js

@@ -109,6 +109,7 @@ export const tasks = {
       selector: '',
       multiple: false,
       attributeName: '',
+      dataColumn: '',
     },
   },
   'open-website': {
@@ -192,30 +193,17 @@ export const tasks = {
       eventParams: {},
     },
   },
-  comparison: {
-    name: 'Comparison',
+  conditions: {
+    name: 'Conditions',
     icon: 'riAB',
-    component: 'BlockComparison',
+    component: 'BlockConditions',
     category: 'conditions',
     inputs: 1,
     outputs: 0,
     allowedInputs: [],
     maxConnection: false,
     data: {
-      comparison: [],
-    },
-  },
-  'contains-text': {
-    name: 'Contains text',
-    icon: 'riTBoxLine',
-    component: 'BlockComparison',
-    category: 'conditions',
-    inputs: 1,
-    outputs: 0,
-    allowedInputs: [],
-    maxConnection: false,
-    data: {
-      contains: [],
+      conditions: [],
     },
   },
   'element-exists': {
@@ -224,7 +212,7 @@ export const tasks = {
     component: 'BlockElementExists',
     category: 'conditions',
     inputs: 1,
-    outputs: 0,
+    outputs: 2,
     allowedInputs: [],
     maxConnection: false,
     data: {