feat(editor): add EditScrollElement component

src/components/newtab/workflow/WorkflowEditBlock.vue

@@ -20,10 +20,16 @@
 import { computed } from 'vue';
 import EditTrigger from './edit/EditTrigger.vue';
 import EditGetText from './edit/EditGetText.vue';
+import EditScrollElement from './edit/EditScrollElement.vue';
 import EditInteractionBase from './edit/EditInteractionBase.vue';
 
 export default {
-  components: { EditTrigger, EditGetText, EditInteractionBase },
+  components: {
+    EditTrigger,
+    EditGetText,
+    EditScrollElement,
+    EditInteractionBase,
+  },
 };
 </script>
 <script setup>

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

@@ -0,0 +1,33 @@
+<template>
+  <edit-interaction-base v-bind="{ data }" @change="updateData">
+    <div class="flex items-center mt-3 space-x-2">
+      <ui-input
+        :model-value="data.scrollX || 0"
+        type="number"
+        label="Scroll horizontal"
+        @change="updateData({ scrollX: +$event })"
+      />
+      <ui-input
+        :model-value="data.scrollY || 0"
+        type="number"
+        label="Scroll vertical"
+        @change="updateData({ scrollY: +$event })"
+      />
+    </div>
+  </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/utils/shared.js

@@ -80,7 +80,7 @@ export const tasks = {
     name: 'Scroll element',
     icon: 'riMouseLine',
     component: 'BlockBasic',
-    editComponent: 'EditTrigger',
+    editComponent: 'EditScrollElement',
     category: 'interaction',
     inputs: 1,
     outputs: 1,