fix: conditions block UI not updated

package.json

@@ -32,11 +32,11 @@
     "defu": "^5.0.0",
     "drawflow": "^0.0.51",
     "idb": "^7.0.0",
+    "mitt": "^3.0.0",
     "mousetrap": "^1.6.5",
     "nanoid": "3.1.28",
     "object-path-immutable": "^4.1.2",
     "papaparse": "^5.3.1",
-    "tiny-emitter": "^2.1.0",
     "tippy.js": "^6.3.1",
     "v-remixicon": "^0.1.1",
     "vue": "3.2.19",

src/components/block/BlockBasic.vue

@@ -33,8 +33,8 @@
   </block-base>
 </template>
 <script setup>
-import emitter from 'tiny-emitter/instance';
 import { useI18n } from 'vue-i18n';
+import emitter from '@/lib/mitt';
 import { useEditorBlock } from '@/composable/editorBlock';
 import { useComponentId } from '@/composable/componentId';
 import BlockBase from './BlockBase.vue';

src/components/block/BlockConditions.vue

@@ -58,12 +58,13 @@
         {{ t('common.fallback') }}
       </p>
     </div>
+    <input class="trigger hidden" @change="onChange" />
   </div>
 </template>
 <script setup>
 import { watch, toRaw, onBeforeUnmount } from 'vue';
 import { useI18n } from 'vue-i18n';
-import emitter from 'tiny-emitter/instance';
+import emitter from '@/lib/mitt';
 import { debounce } from '@/utils/helper';
 import { useComponentId } from '@/composable/componentId';
 import { useEditorBlock } from '@/composable/editorBlock';
@@ -79,6 +80,9 @@ const { t } = useI18n();
 const componentId = useComponentId('block-conditions');
 const block = useEditorBlock(`#${componentId}`, props.editor);
 
+function onChange({ detail }) {
+  if (detail.conditions) block.data.conditions = detail.conditions;
+}
 function editBlock() {
   emitter.emit('editor:edit-block', {
     ...block.details,
@@ -106,7 +110,10 @@ function deleteConditionEmit({ index, id }) {
 }
 function deleteCondition(index) {
   block.data.conditions.splice(index, 1);
-
+  emitter.emit('conditions-block:delete-cond', {
+    index,
+    id: block.id,
+  });
   deleteConditionEmit({ index, id: block.id });
 }
 

src/components/block/BlockDelay.vue

@@ -29,7 +29,7 @@
 </template>
 <script setup>
 import { useI18n } from 'vue-i18n';
-import emitter from 'tiny-emitter/instance';
+import emitter from '@/lib/mitt';
 import { useComponentId } from '@/composable/componentId';
 import { useEditorBlock } from '@/composable/editorBlock';
 

src/components/block/BlockElementExists.vue

@@ -35,7 +35,7 @@
 </template>
 <script setup>
 import { useI18n } from 'vue-i18n';
-import emitter from 'tiny-emitter/instance';
+import emitter from '@/lib/mitt';
 import BlockBase from './BlockBase.vue';
 import { useComponentId } from '@/composable/componentId';
 import { useEditorBlock } from '@/composable/editorBlock';

src/components/block/BlockExportData.vue

@@ -34,7 +34,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { watch } from 'vue';
-import emitter from 'tiny-emitter/instance';
+import emitter from '@/lib/mitt';
 import { dataExportTypes } from '@/utils/shared';
 import { debounce } from '@/utils/helper';
 import { useComponentId } from '@/composable/componentId';

src/components/block/BlockGroup.vue

@@ -88,7 +88,7 @@ import { watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { nanoid } from 'nanoid';
 import draggable from 'vuedraggable';
-import emitter from 'tiny-emitter/instance';
+import emitter from '@/lib/mitt';
 import { tasks } from '@/utils/shared';
 import { useComponentId } from '@/composable/componentId';
 import { useEditorBlock } from '@/composable/editorBlock';

src/components/block/BlockLoopBreakpoint.vue

@@ -27,7 +27,7 @@
 </template>
 <script setup>
 import { useI18n } from 'vue-i18n';
-import emitter from 'tiny-emitter/instance';
+import emitter from '@/lib/mitt';
 import { useComponentId } from '@/composable/componentId';
 import { useEditorBlock } from '@/composable/editorBlock';
 

src/components/block/BlockRepeatTask.vue

@@ -37,7 +37,7 @@
 </template>
 <script setup>
 import { useI18n } from 'vue-i18n';
-import emitter from 'tiny-emitter/instance';
+import emitter from '@/lib/mitt';
 import { useComponentId } from '@/composable/componentId';
 import { useEditorBlock } from '@/composable/editorBlock';
 

src/components/newtab/workflow/WorkflowBuilder.vue

@@ -65,7 +65,7 @@ import { onMounted, shallowRef, reactive, getCurrentInstance } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { compare } from 'compare-versions';
 import defu from 'defu';
-import emitter from 'tiny-emitter/instance';
+import emitter from '@/lib/mitt';
 import { useShortcut, getShortcut } from '@/composable/shortcut';
 import { tasks } from '@/utils/shared';
 import { parseJSON } from '@/utils/helper';

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

@@ -54,9 +54,9 @@
   </div>
 </template>
 <script setup>
-import { toRef } from 'vue';
+import { ref, watch, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import emitter from 'tiny-emitter/instance';
+import emitter from '@/lib/mitt';
 
 const props = defineProps({
   data: {
@@ -68,7 +68,7 @@ const props = defineProps({
     default: '',
   },
 });
-defineEmits(['update:data']);
+const emit = defineEmits(['update:data']);
 
 const conditionTypes = {
   '==': 'equals',
@@ -81,7 +81,7 @@ const conditionTypes = {
 };
 const { t } = useI18n();
 
-const conditions = toRef(props.data, 'conditions');
+const conditions = ref(props.data.conditions);
 
 function getTitle(index) {
   const type = conditionTypes[conditions.value[index]?.type] || 'equals';
@@ -109,7 +109,25 @@ function deleteCondition(index) {
     id: props.blockId,
   });
 }
-// function updateData(value) {
-//   emit('update:data', { ...props.data, ...value });
-// }
+function handleDelCondition({ index, id }) {
+  if (props.blockId !== id) return;
+
+  conditions.value.splice(index, 1);
+}
+
+emitter.on('conditions-block:delete-cond', handleDelCondition);
+
+watch(
+  conditions,
+  () => {
+    emit('update:data', {
+      conditions: conditions.value,
+    });
+  },
+  { deep: true }
+);
+
+onUnmounted(() => {
+  emitter.off('conditions-block:delete-cond', handleDelCondition);
+});
 </script>

src/components/ui/UiDialog.vue

@@ -35,7 +35,7 @@
 <script>
 import { reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import emitter from 'tiny-emitter/instance';
+import emitter from '@/lib/mitt';
 
 export default {
   setup() {
@@ -60,7 +60,7 @@ export default {
       options: defaultOptions,
     });
 
-    emitter.on('show-dialog', (type, options) => {
+    emitter.on('show-dialog', ({ type, options }) => {
       state.type = type;
       state.input = options?.inputValue ?? '';
       state.options = {

src/composable/dialog.js

@@ -1,12 +1,12 @@
-import emitter from 'tiny-emitter/instance';
+import emitter from '@/lib/mitt';
 
 export function useDialog() {
   function confirm(options) {
-    emitter.emit('show-dialog', 'confirm', options);
+    emitter.emit('show-dialog', { type: 'confirm', options });
   }
 
   function prompt(options) {
-    emitter.emit('show-dialog', 'prompt', options);
+    emitter.emit('show-dialog', { type: 'prompt', options });
   }
 
   return {

src/lib/mitt.js

@@ -0,0 +1,5 @@
+import mitt from 'mitt';
+
+const emitter = mitt();
+
+export default emitter;

src/manifest.json

@@ -31,7 +31,6 @@
     "proxy",
     "alarms",
     "storage",
-    "debugger",
     "webNavigation",
     "unlimitedStorage",
     "<all_urls>"

src/newtab/pages/workflows/[id].vue

@@ -149,7 +149,7 @@ import { useStore } from 'vuex';
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import defu from 'defu';
-import emitter from 'tiny-emitter/instance';
+import emitter from '@/lib/mitt';
 import { useDialog } from '@/composable/dialog';
 import { tasks } from '@/utils/shared';
 import { sendMessage } from '@/utils/message';

yarn.lock

@@ -4898,6 +4898,11 @@ minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
+mitt@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.0.tgz#69ef9bd5c80ff6f57473e8d89326d01c414be0bd"
+  integrity sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==
+
 mixin-deep@^1.2.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
@@ -6639,11 +6644,6 @@ thunky@^1.0.2:
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
   integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
-tiny-emitter@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
-  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
-
 tippy.js@^6.3.1:
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"