feat(editor): add edit 'get text' component

src/components/block/BlockRepeatTask.vue

@@ -33,7 +33,7 @@
       <input
         :value="block.data.repeatFor || 0"
         min="0"
-        class="pl-4 py-2 bg-transparent rounded-l-lg w-32 mr-2"
+        class="pl-4 py-2 bg-transparent rounded-l-lg w-28 mr-2"
         type="number"
         required
         @input="handleInput"

src/components/newtab/workflow/WorkflowEditBlock.vue

@@ -19,10 +19,11 @@
 <script>
 import { computed } from 'vue';
 import EditTrigger from './edit/EditTrigger.vue';
-import EditClickElement from './edit/EditClickElement.vue';
+import EditGetText from './edit/EditGetText.vue';
+import EditInteractionBase from './edit/EditInteractionBase.vue';
 
 export default {
-  components: { EditTrigger, EditClickElement },
+  components: { EditTrigger, EditGetText, EditInteractionBase },
 };
 </script>
 <script setup>
@@ -36,7 +37,6 @@ const emit = defineEmits(['close', 'update']);
 
 const blockData = computed({
   get() {
-    console.log(props.data);
     return props.data.data || {};
   },
   set(value) {

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

@@ -1,36 +0,0 @@
-<template>
-  <ui-textarea
-    :model-value="data.description"
-    autoresize
-    placeholder="Description"
-    class="w-full mb-2"
-    @change="updateData({ description: $event })"
-  />
-  <div class="flex items-center">
-    <ui-input
-      :model-value="data.selector"
-      placeholder="Element selector"
-      class="mr-4"
-      @change="updateData({ selector: $event })"
-    />
-    <ui-checkbox
-      :model-value="data.multiple"
-      @change="updateData({ multiple: $event })"
-    >
-      Multiple
-    </ui-checkbox>
-  </div>
-</template>
-<script setup>
-const props = defineProps({
-  data: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-const emit = defineEmits(['update:data']);
-
-function updateData(value) {
-  emit('update:data', { ...props.data, ...value });
-}
-</script>

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

@@ -0,0 +1,47 @@
+<template>
+  <edit-interaction-base v-bind="{ data }" @change="updateData">
+    <ui-input
+      :model-value="data.regex"
+      placeholder="Regex"
+      class="mt-2 w-full"
+      @change="updateData"
+    />
+    <ui-input
+      :model-value="data.dataColumn"
+      list="data-columns"
+      placeholder="Data column"
+      class="mt-3 w-full"
+      @blur="updateDataColumn"
+    ></ui-input>
+    <datalist id="data-columns">
+      <option
+        v-for="column in workflow.data.dataColumns"
+        :key="column"
+        :value="column"
+      />
+    </datalist>
+  </edit-interaction-base>
+</template>
+<script setup>
+import { inject } from 'vue';
+import EditInteractionBase from './EditInteractionBase.vue';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(['update:data']);
+
+const workflow = inject('workflow');
+
+function updateData(value) {
+  emit('update:data', { ...props.data, ...value });
+}
+function updateDataColumn({ target: { value } }) {
+  if (!value.trim()) return;
+
+  console.log(value, workflow.data);
+}
+</script>

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

@@ -0,0 +1,38 @@
+<template>
+  <ui-textarea
+    :model-value="data.description"
+    autoresize
+    placeholder="Description"
+    class="w-full mb-2"
+    @change="updateData({ description: $event })"
+  />
+  <ui-input
+    :model-value="data.selector"
+    placeholder="Element selector"
+    class="mb-1 w-full"
+    @change="updateData({ selector: $event })"
+  />
+  <ui-checkbox
+    :model-value="data.multiple"
+    @change="updateData({ multiple: $event })"
+  >
+    Multiple
+  </ui-checkbox>
+  <slot></slot>
+</template>
+<script setup>
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(['update:data', 'change']);
+
+function updateData(value) {
+  const payload = { ...props.data, ...value };
+
+  emit('update:data', payload);
+  emit('change', payload);
+}
+</script>

src/components/ui/UiInput.vue

@@ -24,14 +24,17 @@
             autofocus,
             min,
             max,
+            list,
           }"
           :class="{
             'opacity-75 pointer-events-none': disabled,
             'pl-10': prependIcon || $slots.prepend,
+            'appearance-none': list,
           }"
           :value="modelValue"
           class="py-2 px-4 rounded-lg w-full bg-input bg-transparent transition"
           @keydown="$emit('keydown', $event)"
+          @blur="$emit('blur', $event)"
           @input="emitValue"
         />
       </div>
@@ -68,6 +71,10 @@ export default {
       type: String,
       default: '',
     },
+    list: {
+      type: String,
+      default: null,
+    },
     type: {
       type: String,
       default: 'text',
@@ -85,7 +92,7 @@ export default {
       default: null,
     },
   },
-  emits: ['update:modelValue', 'change', 'keydown'],
+  emits: ['update:modelValue', 'change', 'keydown', 'blur'],
   setup(props, { emit }) {
     function emitValue(event) {
       let { value } = event.target;

src/models/workflow.js

@@ -14,7 +14,7 @@ class Workflow extends Model {
       icon: this.string('riGlobalLine'),
       data: this.attr(null),
       drawflow: this.string(''),
-      dataSchema: this.attr([]),
+      dataColumns: this.attr([]),
       lastRunAt: this.number(),
       createdAt: this.number(),
       tasks: this.hasMany(Task, 'workflowId'),

src/newtab/pages/workflows/[id].vue

@@ -28,7 +28,14 @@
   </div>
 </template>
 <script setup>
-import { computed, reactive, shallowRef, onMounted, onUnmounted } from 'vue';
+import {
+  computed,
+  reactive,
+  shallowRef,
+  provide,
+  onMounted,
+  onUnmounted,
+} from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import emitter from 'tiny-emitter/instance';
 import Task from '@/models/task';
@@ -90,6 +97,11 @@ function executeWorkflow() {
   console.log(editor.value);
 }
 
+provide('workflow', {
+  data: workflow,
+  updateWorkflow,
+});
+
 onMounted(() => {
   const isWorkflowExists = Workflow.query().where('id', workflowId).exists();
 

src/utils/shared.js

@@ -18,7 +18,7 @@ export const tasks = {
     name: 'Click element',
     icon: 'riCursorLine',
     component: 'BlockBasic',
-    editComponent: 'EditClickElement',
+    editComponent: 'EditInteractionBase',
     category: 'interaction',
     inputs: 1,
     outputs: 1,
@@ -48,7 +48,7 @@ export const tasks = {
     name: 'Get text',
     icon: 'riParagraph',
     component: 'BlockBasic',
-    editComponent: 'EditTrigger',
+    editComponent: 'EditGetText',
     category: 'interaction',
     inputs: 1,
     outputs: 1,
@@ -59,6 +59,7 @@ export const tasks = {
       selector: '',
       multiple: false,
       regex: '',
+      dataColumn: '',
     },
   },
   'export-data': {