Browse Source

feat(editor): add EditClickCompo component

Ahmad Kholid 3 years ago
parent
commit
69fc22a9ef

+ 8 - 2
src/components/newtab/workflow/WorkflowEditBlock.vue

@@ -9,15 +9,20 @@
       </p>
       </p>
     </div>
     </div>
     <hr class="mb-4 mt-5 w-full border-gray-100" />
     <hr class="mb-4 mt-5 w-full border-gray-100" />
-    <component :is="data.editComponent" v-model:data="blockData" />
+    <component
+      :is="data.editComponent"
+      v-if="blockData"
+      v-model:data="blockData"
+    />
   </div>
   </div>
 </template>
 </template>
 <script>
 <script>
 import { computed } from 'vue';
 import { computed } from 'vue';
 import EditTrigger from './edit/EditTrigger.vue';
 import EditTrigger from './edit/EditTrigger.vue';
+import EditClickElement from './edit/EditClickElement.vue';
 
 
 export default {
 export default {
-  components: { EditTrigger },
+  components: { EditTrigger, EditClickElement },
 };
 };
 </script>
 </script>
 <script setup>
 <script setup>
@@ -31,6 +36,7 @@ const emit = defineEmits(['close', 'update']);
 
 
 const blockData = computed({
 const blockData = computed({
   get() {
   get() {
+    console.log(props.data);
     return props.data.data || {};
     return props.data.data || {};
   },
   },
   set(value) {
   set(value) {

+ 36 - 0
src/components/newtab/workflow/edit/EditClickElement.vue

@@ -0,0 +1,36 @@
+<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>

+ 1 - 1
src/components/newtab/workflow/edit/EditTrigger.vue

@@ -1,6 +1,6 @@
 <template>
 <template>
   <ui-textarea
   <ui-textarea
-    :model-value="blockData.description"
+    :model-value="data.description"
     autoresize
     autoresize
     placeholder="Description"
     placeholder="Description"
     class="w-full mb-2"
     class="w-full mb-2"

+ 1 - 1
src/utils/shared.js

@@ -18,7 +18,7 @@ export const tasks = {
     name: 'Click element',
     name: 'Click element',
     icon: 'riCursorLine',
     icon: 'riCursorLine',
     component: 'BlockBasic',
     component: 'BlockBasic',
-    editComponent: 'EditTrigger',
+    editComponent: 'EditClickElement',
     category: 'interaction',
     category: 'interaction',
     inputs: 1,
     inputs: 1,
     outputs: 1,
     outputs: 1,