feat: improve the element selector

AutomaApp · Dec 5, 2021 · a62c5c7 · a62c5c7
1 parent 6a5ed2a
commit a62c5c7
Show file tree

Hide file tree

Showing 27 changed files with 977 additions and 160 deletions.
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
@@ -2,11 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
+:host, body {
   font-family: 'Inter var';
   font-size: 16px;
   font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
-  @apply bg-gray-50 dark:bg-gray-900;
+  @apply bg-gray-50 dark:bg-gray-900 leading-normal;
 }
 table th,
 table td {

diff --git a/src/background/index.js b/src/background/index.js
@@ -50,6 +50,12 @@ function executeCollection(collection) {
 
 browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
   if (changeInfo.status === 'complete') {
+    if (tab.url.includes('http://localhost')) {
+      browser.tabs.executeScript(tabId, {
+        file: 'contentScript.bundle.js',
+      });
+    }
+
     const { visitWebTriggers } = await browser.storage.local.get(
       'visitWebTriggers'
     );

diff --git a/src/components/newtab/workflow/edit/EditForms.vue b/src/components/newtab/workflow/edit/EditForms.vue
@@ -1,5 +1,5 @@
 <template>
-  <edit-interaction-base v-bind="{ data }" @change="updateData">
+  <edit-interaction-base v-bind="{ data, hide: hideBase }" @change="updateData">
     <ui-select
       :model-value="data.type"
       class="block w-full mt-4 mb-3"
@@ -53,6 +53,10 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  hideBase: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits(['update:data']);
 

diff --git a/src/components/newtab/workflow/edit/EditInteractionBase.vue b/src/components/newtab/workflow/edit/EditInteractionBase.vue
@@ -1,37 +1,39 @@
 <template>
   <div>
     <slot name="prepend" />
-    <ui-textarea
-      :model-value="data.description"
-      :placeholder="t('common.description')"
-      autoresize
-      class="w-full mb-2"
-      @change="updateData({ description: $event })"
-    />
-    <ui-input
-      v-if="!hideSelector"
-      :model-value="data.selector"
-      :placeholder="t('workflow.blocks.base.selector')"
-      class="mb-1 w-full"
-      @change="updateData({ selector: $event })"
-    />
-    <template v-if="!hideSelector">
-      <ui-checkbox
-        v-if="!data.disableMultiple && !hideMultiple"
-        :title="t('workflow.blocks.base.multiple.title')"
-        :model-value="data.multiple"
-        class="mr-6"
-        @change="updateData({ multiple: $event })"
-      >
-        {{ t('workflow.blocks.base.multiple.text') }}
-      </ui-checkbox>
-      <ui-checkbox
-        :model-value="data.markEl"
-        :title="t('workflow.blocks.base.markElement.title')"
-        @change="updateData({ markEl: $event })"
-      >
-        {{ t('workflow.blocks.base.markElement.text') }}
-      </ui-checkbox>
+    <template v-if="!hide">
+      <ui-textarea
+        :model-value="data.description"
+        :placeholder="t('common.description')"
+        autoresize
+        class="w-full mb-2"
+        @change="updateData({ description: $event })"
+      />
+      <ui-input
+        v-if="!hideSelector"
+        :model-value="data.selector"
+        :placeholder="t('workflow.blocks.base.selector')"
+        class="mb-1 w-full"
+        @change="updateData({ selector: $event })"
+      />
+      <template v-if="!hideSelector">
+        <ui-checkbox
+          v-if="!data.disableMultiple && !hideMultiple"
+          :title="t('workflow.blocks.base.multiple.title')"
+          :model-value="data.multiple"
+          class="mr-6"
+          @change="updateData({ multiple: $event })"
+        >
+          {{ t('workflow.blocks.base.multiple.text') }}
+        </ui-checkbox>
+        <ui-checkbox
+          :model-value="data.markEl"
+          :title="t('workflow.blocks.base.markElement.title')"
+          @change="updateData({ markEl: $event })"
+        >
+          {{ t('workflow.blocks.base.markElement.text') }}
+        </ui-checkbox>
+      </template>
     </template>
     <slot></slot>
   </div>
@@ -44,6 +46,10 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  hide: {
+    type: Boolean,
+    default: false,
+  },
   hideSelector: {
     type: Boolean,
     default: false,

diff --git a/src/components/newtab/workflow/edit/EditScrollElement.vue b/src/components/newtab/workflow/edit/EditScrollElement.vue
@@ -1,5 +1,5 @@
 <template>
-  <edit-interaction-base v-bind="{ data }" @change="updateData">
+  <edit-interaction-base v-bind="{ data, hide: hideBase }" @change="updateData">
     <div v-if="!data.scrollIntoView" class="flex items-center mt-3 space-x-2">
       <ui-input
         :model-value="data.scrollX || 0"
@@ -54,6 +54,10 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  hideBase: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits(['update:data']);
 

diff --git a/src/components/newtab/workflow/edit/EditTriggerEvent.vue b/src/components/newtab/workflow/edit/EditTriggerEvent.vue
@@ -1,5 +1,5 @@
 <template>
-  <edit-interaction-base v-bind="{ data }" @change="updateData">
+  <edit-interaction-base v-bind="{ data, hide: hideBase }" @change="updateData">
     <ui-select
       :model-value="data.eventName"
       :placeholder="t('workflow.blocks.trigger-event.selectEvent')"
@@ -46,61 +46,51 @@
           </ui-checkbox>
         </div>
         <component
-          :is="componentName"
-          v-if="componentName"
+          :is="eventComponents[data.eventType]"
+          v-if="eventComponents[data.eventType]"
           :params="params"
           @update="updateParams({ ...params, ...$event })"
         />
       </div>
     </transition-expand>
   </edit-interaction-base>
 </template>
-<script>
-import TriggerEventMouse from './TriggerEventMouse.vue';
-import TriggerEventTouch from './TriggerEventTouch.vue';
-import TriggerEventWheel from './TriggerEventWheel.vue';
-import TriggerEventInput from './TriggerEventInput.vue';
-import TriggerEventKeyboard from './TriggerEventKeyboard.vue';
-
-export default {
-  components: {
-    TriggerEventMouse,
-    TriggerEventWheel,
-    TriggerEventTouch,
-    TriggerEventInput,
-    TriggerEventKeyboard,
-  },
-};
-</script>
 <script setup>
-/* eslint-disable */
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { eventList } from '@/utils/shared';
 import { toCamelCase } from '@/utils/helper';
 import EditInteractionBase from './EditInteractionBase.vue';
+import TriggerEventMouse from './TriggerEventMouse.vue';
+import TriggerEventTouch from './TriggerEventTouch.vue';
+import TriggerEventWheel from './TriggerEventWheel.vue';
+import TriggerEventInput from './TriggerEventInput.vue';
+import TriggerEventKeyboard from './TriggerEventKeyboard.vue';
 
 const props = defineProps({
   data: {
     type: Object,
     default: () => ({}),
   },
+  hideBase: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits(['update:data']);
 
 const { t } = useI18n();
 
 const eventComponents = {
-  'mouse-event': 'TriggerEventMouse',
+  'mouse-event': TriggerEventMouse,
   'focus-event': '',
-  'event': '',
-  'touch-event': 'TriggerEventTouch',
-  'keyboard-event': 'TriggerEventKeyboard',
-  'wheel-event': 'TriggerEventWheel',
-  'input-event': 'TriggerEventInput',
+  event: '',
+  'touch-event': TriggerEventTouch,
+  'keyboard-event': TriggerEventKeyboard,
+  'wheel-event': TriggerEventWheel,
+  'input-event': TriggerEventInput,
 };
 
-const componentName = ref(eventComponents[props.data.eventType]);
 const params = ref(props.data.eventParams);
 const showOptions = ref(false);
 
@@ -120,8 +110,6 @@ function handleSelectChange(value) {
   const eventType = eventList.find(({ id }) => id === value).type;
   const payload = { eventName: value, eventType };
 
-  componentName.value = eventComponents[eventType];
-
   if (eventType !== props.eventType) {
     const defaultParams = { bubbles: true, cancelable: true };