feat: add input and change event in trigger event

src/background/index.js

@@ -98,7 +98,7 @@ chrome.runtime.onInstalled.addListener((details) => {
       });
   }
 });
-
+console.log(browser.tabs);
 const message = new MessageListener('background');
 
 message.on('get:sender', (_, sender) => {

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

@@ -11,15 +11,23 @@
       </option>
     </ui-select>
     <button
-      class="mb-2 block w-full text-left mt-4 focus:ring-0"
+      class="mb-2 block flex items-center w-full text-left mt-4 focus:ring-0"
       @click="showOptions = !showOptions"
     >
       <v-remixicon
         name="riArrowLeftSLine"
-        class="mr-1 transition-transform align-middle inline-block -ml-1"
+        class="mr-1 transition-transform -ml-1"
         :rotate="showOptions ? 270 : 180"
       />
-      <span class="align-middle">Options</span>
+      <span class="flex-1">Options</span>
+      <a
+        :href="getEventDetailsUrl()"
+        rel="noopener"
+        target="_blank"
+        @click.stop
+      >
+        <v-remixicon name="riInformationLine" size="20" />
+      </a>
     </button>
     <transition-expand>
       <div v-if="showOptions">
@@ -51,6 +59,7 @@
 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 {
@@ -58,6 +67,7 @@ export default {
     TriggerEventMouse,
     TriggerEventWheel,
     TriggerEventTouch,
+    TriggerEventInput,
     TriggerEventKeyboard,
   },
 };
@@ -66,6 +76,7 @@ export default {
 /* eslint-disable */
 import { ref } from 'vue';
 import { eventList } from '@/utils/shared';
+import { toCamelCase } from '@/utils/helper';
 import EditInteractionBase from './EditInteractionBase.vue';
 
 const props = defineProps({
@@ -79,15 +90,22 @@ const emit = defineEmits(['update:data']);
 const eventComponents = {
   'mouse-event': 'TriggerEventMouse',
   'focus-event': '',
+  '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);
 
+function getEventDetailsUrl() {
+  const eventType = toCamelCase(props.data.eventType);
+
+  return `https://developer.mozilla.org/en-US/docs/Web/API/${eventType}/${eventType}`;
+}
 function updateData(value) {
   emit('update:data', { ...props.data, ...value });
 }

src/lib/v-remixicon.js

@@ -2,6 +2,7 @@ import vRemixicon from 'v-remixicon';
 import {
   riHome5Line,
   riFolderLine,
+  riInformationLine,
   riArrowUpDownLine,
   riRefreshLine,
   riBookOpenLine,
@@ -71,6 +72,7 @@ import {
 export const icons = {
   riHome5Line,
   riFolderLine,
+  riInformationLine,
   riArrowUpDownLine,
   riRefreshLine,
   riBookOpenLine,

src/utils/handle-form-element.js

@@ -21,17 +21,15 @@ function formEvent(element, data) {
     });
   }
 
+  simulateEvent(element, 'input', {
+    inputType: 'insertText',
+    data: data.value,
+    bubbles: true,
+    cancelable: true,
+  });
   element.dispatchEvent(
     new Event('change', { bubbles: true, cancelable: true })
   );
-  element.dispatchEvent(
-    new InputEvent('input', {
-      inputType: 'insertText',
-      data: data.value,
-      bubbles: true,
-      cancelable: true,
-    })
-  );
 }
 function inputText({ data, element, index = 0, callback }) {
   const noDelay = data.delay === 0;

src/utils/shared.js

@@ -465,6 +465,8 @@ export const eventList = [
   { id: 'mousedown', name: 'Mousedown', type: 'mouse-event' },
   { id: 'focus', name: 'Focus', type: 'focus-event' },
   { id: 'blur', name: 'Blur', type: 'focus-event' },
+  { id: 'input', name: 'Input', type: 'input-event' },
+  { id: 'change', name: 'Change', type: 'event' },
   { id: 'touchstart', name: 'Touch start', type: 'touch-event' },
   { id: 'touchend', name: 'Touch end', type: 'touch-event' },
   { id: 'touchmove', name: 'Touch move', type: 'touch-event' },

src/utils/simulate-event.js

@@ -20,7 +20,7 @@ export function getEventObj(name, params) {
     case 'wheel-event':
       event = new WheelEvent(name, params);
       break;
-    case 'input':
+    case 'input-event':
       event = new InputEvent(name, params);
       break;
     default: