feat(editor): add EditScrollElement and EditTextInput components

src/components/block/BlockComparison.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="componentId">
+  <div :id="componentId" class="p-4">
     <div class="flex items-center">
       <div
         :class="block.category.color"

src/components/newtab/workflow/WorkflowDataColumns.vue

@@ -50,7 +50,7 @@ const columns = computed(() =>
 function addColumn() {
   const isColumnExists = state.columns.some(({ name }) => name === state.query);
 
-  if (isColumnExists) return;
+  if (isColumnExists || state.query.trim() === '') return;
 
   state.columns.push({ name: state.query, default: '' });
   state.query = '';

src/components/newtab/workflow/WorkflowEditBlock.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="px-4">
-    <div>
+  <div class="px-4 overflow-auto scroll">
+    <div class="sticky top-0 bg-white border-b border-gray-100 pb-4 mb-4">
       <button class="mr-2 align-middle" @click="$emit('close')">
         <v-remixicon name="riArrowLeftLine" />
       </button>
@@ -8,7 +8,6 @@
         {{ data.name }}
       </p>
     </div>
-    <hr class="mb-4 mt-5 w-full border-gray-100" />
     <component
       :is="data.editComponent"
       v-if="blockData"
@@ -20,14 +19,18 @@
 import { computed } from 'vue';
 import EditTrigger from './edit/EditTrigger.vue';
 import EditGetText from './edit/EditGetText.vue';
+import EditTextInput from './edit/EditTextInput.vue';
 import EditScrollElement from './edit/EditScrollElement.vue';
+import EditAttributeValue from './edit/EditAttributeValue.vue';
 import EditInteractionBase from './edit/EditInteractionBase.vue';
 
 export default {
   components: {
     EditTrigger,
     EditGetText,
+    EditTextInput,
     EditScrollElement,
+    EditAttributeValue,
     EditInteractionBase,
   },
 };

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

@@ -0,0 +1,25 @@
+<template>
+  <edit-interaction-base v-bind="{ data }" @change="updateData">
+    <ui-input
+      :model-value="data.attributeName"
+      placeholder="Attribute name"
+      class="mt-3 w-full"
+      @change="updateData({ attributeName: $event })"
+    />
+  </edit-interaction-base>
+</template>
+<script setup>
+import EditInteractionBase from './EditInteractionBase.vue';
+
+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/EditTextInput.vue

@@ -0,0 +1,50 @@
+<template>
+  <edit-interaction-base v-bind="{ data }" @change="updateData">
+    <ui-textarea
+      :model-value="data.text"
+      placeholder="Text"
+      class="mt-3 w-full"
+      @change="updateData({ text: $event })"
+    />
+    <ui-input
+      :model-value="data.delay"
+      label="Typing delay (0 to disable)"
+      placeholder="Delay"
+      class="w-full"
+      min="0"
+      type="number"
+      @change="updateData({ delay: +$event })"
+    />
+    <div class="mt-3">
+      <p>Trigger these event when input text:</p>
+      <div class="grid grid-cols-2 gap-2 mt-2">
+        <ui-checkbox
+          v-for="event in events"
+          :key="event"
+          :model-value="data[event]"
+          class="capitalize"
+          @change="updateData({ [event]: $event })"
+        >
+          {{ event }}
+        </ui-checkbox>
+      </div>
+    </div>
+  </edit-interaction-base>
+</template>
+<script setup>
+import EditInteractionBase from './EditInteractionBase.vue';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(['update:data']);
+
+const events = ['change', 'input', 'keyup', 'keydown'];
+
+function updateData(value) {
+  emit('update:data', { ...props.data, ...value });
+}
+</script>

src/utils/shared.js

@@ -94,11 +94,11 @@ export const tasks = {
       scrollX: 0,
     },
   },
-  'get-attribute': {
-    name: 'Get attribute',
+  'attribute-value': {
+    name: 'Attribute value',
     icon: 'riBracketsLine',
     component: 'BlockBasic',
-    editComponent: 'EditTrigger',
+    editComponent: 'EditAttributeValue',
     category: 'interaction',
     inputs: 1,
     outputs: 1,
@@ -108,6 +108,7 @@ export const tasks = {
       description: '',
       selector: '',
       multiple: false,
+      attributeName: '',
     },
   },
   'open-website': {
@@ -128,7 +129,7 @@ export const tasks = {
     name: 'Text input',
     icon: 'riInputCursorMove',
     component: 'BlockBasic',
-    editComponent: 'EditTrigger',
+    editComponent: 'EditTextInput',
     category: 'interaction',
     inputs: 1,
     outputs: 1,
@@ -139,6 +140,11 @@ export const tasks = {
       selector: '',
       multiple: false,
       text: '',
+      delay: 0,
+      keyup: true,
+      keydown: true,
+      change: true,
+      input: true,
     },
   },
   'repeat-task': {