feat(newtab): add context to drawflow

package.json

@@ -25,7 +25,7 @@
     "@webcomponents/custom-elements": "^1.5.0",
     "css-selector-generator": "^3.4.4",
     "dayjs": "^1.10.7",
-    "drawflow": "^0.0.49",
+    "drawflow": "^0.0.51",
     "nanoid": "3.1.28",
     "papaparse": "^5.3.1",
     "prismjs": "^1.25.0",

src/components/block/BlockBase.vue

@@ -11,14 +11,14 @@
     >
       <div class="bg-accent px-3 py-2 text-white rounded-lg flex items-center">
         <button v-if="!hideEdit" @click="$emit('edit')">
-          <v-remixicon size="20" :path="icons.riPencilLine" />
+          <v-remixicon size="20" name="riPencilLine" />
         </button>
         <hr
           v-if="!hideDelete && !hideEdit"
           class="border-r border-gray-600 h-5 mx-3"
         />
         <button v-if="!hideDelete" @click="$emit('delete')">
-          <v-remixicon size="20" :path="icons.riDeleteBin7Line" />
+          <v-remixicon size="20" name="riDeleteBin7Line" />
         </button>
         <slot name="action" />
       </div>
@@ -26,9 +26,6 @@
   </div>
 </template>
 <script setup>
-import { VRemixIcon as VRemixicon } from 'v-remixicon';
-import { icons } from '@/lib/v-remixicon';
-
 defineProps({
   hideDelete: {
     type: Boolean,

src/components/block/BlockBasic.vue

@@ -11,7 +11,7 @@
       :class="block.category.color"
       class="inline-block p-2 mr-2 rounded-lg bg-green-200"
     >
-      <v-remixicon :path="icons[block.details.icon] || icons.riGlobalLine" />
+      <v-remixicon :name="block.details.icon || 'riGlobalLine'" />
     </span>
     <div style="max-width: 200px">
       <p class="font-semibold leading-none whitespace-nowrap">
@@ -30,9 +30,7 @@
   </block-base>
 </template>
 <script setup>
-import { VRemixIcon as VRemixicon } from 'v-remixicon';
 import emitter from 'tiny-emitter/instance';
-import { icons } from '@/lib/v-remixicon';
 import { useEditorBlock } from '@/composable/editorBlock';
 import { useComponentId } from '@/composable/componentId';
 import BlockBase from './BlockBase.vue';

src/components/block/BlockConditions.vue

@@ -5,23 +5,24 @@
         :class="block.category.color"
         class="inline-block text-sm mr-4 p-2 rounded-lg"
       >
-        <v-remixicon :path="icons.riAB" size="20" class="inline-block mr-1" />
+        <v-remixicon name="riAB" size="20" class="inline-block mr-1" />
         <span>conditions</span>
       </div>
       <div class="flex-grow"></div>
       <v-remixicon
-        :path="icons.riDeleteBin7Line"
-        class="cursor-pointer"
+        name="riDeleteBin7Line"
+        class="cursor-pointer mr-2"
         @click="editor.removeNodeId(`node-${block.id}`)"
       />
-      <button
+      <ui-button
         :disabled="block.data.conditions && block.data.conditions.length > 4"
-        class="bg-accent ml-2 rounded-lg text-white text-center"
+        icon
+        variant="accent"
         style="height: 37px; width: 37px"
         @click="addComparison"
       >
-        <v-remixicon :path="icons.riAddLine" class="inline-block" />
-      </button>
+        <v-remixicon name="riAddLine" class="inline-block" />
+      </ui-button>
     </div>
     <div
       v-if="block.data.conditions && block.data.conditions.length !== 0"
@@ -33,7 +34,7 @@
         class="flex items-center group justify-end"
       >
         <v-remixicon
-          :path="icons.riDeleteBin7Line"
+          name="riDeleteBin7Line"
           class="mr-2 invisible group-hover:visible cursor-pointer"
           @click="deleteComparison(index)"
         />
@@ -83,10 +84,8 @@
 </template>
 <script setup>
 import { watch, toRaw } from 'vue';
-import { VRemixIcon as VRemixicon } from 'v-remixicon';
 import emitter from 'tiny-emitter/instance';
 import { debounce } from '@/utils/helper';
-import { icons } from '@/lib/v-remixicon';
 import { useComponentId } from '@/composable/componentId';
 import { useEditorBlock } from '@/composable/editorBlock';
 
@@ -148,7 +147,7 @@ watch(
   transform: none !important;
 }
 .drawflow .drawflow-node.conditions .output {
-  margin-bottom: 30px;
+  margin-bottom: 32px;
 }
 .drawflow .drawflow-node.conditions .output:nth-last-child(2) {
   margin-bottom: 20px;

src/components/block/BlockDelay.vue

@@ -5,16 +5,12 @@
         :class="block.category.color"
         class="inline-block text-sm mr-4 p-2 rounded-lg"
       >
-        <v-remixicon
-          :path="icons.riTimerLine"
-          size="20"
-          class="inline-block mr-1"
-        />
+        <v-remixicon name="riTimerLine" size="20" class="inline-block mr-1" />
         <span>Delay</span>
       </div>
       <div class="flex-grow"></div>
       <v-remixicon
-        :path="icons.riDeleteBin7Line"
+        name="riDeleteBin7Line"
         class="cursor-pointer"
         @click="editor.removeNodeId(`node-${block.id}`)"
       />
@@ -32,9 +28,7 @@
   </div>
 </template>
 <script setup>
-import { VRemixIcon as VRemixicon } from 'v-remixicon';
 import emitter from 'tiny-emitter/instance';
-import { icons } from '@/lib/v-remixicon';
 import { useComponentId } from '@/composable/componentId';
 import { useEditorBlock } from '@/composable/editorBlock';
 

src/components/block/BlockElementExists.vue

@@ -9,11 +9,7 @@
       :class="block.category.color"
       class="inline-block text-sm mb-2 p-2 rounded-lg"
     >
-      <v-remixicon
-        :path="icons.riFocus3Line"
-        size="20"
-        class="inline-block mr-1"
-      />
+      <v-remixicon name="riFocus3Line" size="20" class="inline-block mr-1" />
       <span>Element exists</span>
     </div>
     <p
@@ -45,10 +41,8 @@
   </block-base>
 </template>
 <script setup>
-import { VRemixIcon as VRemixicon } from 'v-remixicon';
 import emitter from 'tiny-emitter/instance';
 import BlockBase from './BlockBase.vue';
-import { icons } from '@/lib/v-remixicon';
 import { useComponentId } from '@/composable/componentId';
 import { useEditorBlock } from '@/composable/editorBlock';
 

src/components/block/BlockExportData.vue

@@ -6,7 +6,7 @@
         class="inline-block text-sm mr-4 p-2 rounded-lg"
       >
         <v-remixicon
-          :path="icons.riDownloadLine"
+          name="riDownloadLine"
           size="20"
           class="inline-block mr-1"
         />
@@ -14,7 +14,7 @@
       </div>
       <div class="flex-grow"></div>
       <v-remixicon
-        :path="icons.riDeleteBin7Line"
+        name="riDeleteBin7Line"
         class="cursor-pointer"
         @click="editor.removeNodeId(`node-${block.id}`)"
       />
@@ -24,24 +24,21 @@
       class="w-full bg-input rounded-lg transition mb-2 py-2 px-4 block"
       placeholder="File name"
     />
-    <select
+    <ui-select
       v-model="block.data.type"
       class="px-4 py-2 rounded-lg w-40 bg-input"
-      required
+      placeholder="Export as"
     >
-      <option value="" disabled selected>Export as</option>
       <option v-for="type in dataExportTypes" :key="type.id" :value="type.id">
         {{ type.name }}
       </option>
-    </select>
+    </ui-select>
   </div>
 </template>
 <script setup>
 import { watch } from 'vue';
-import { VRemixIcon as VRemixicon } from 'v-remixicon';
 import emitter from 'tiny-emitter/instance';
 import { dataExportTypes } from '@/utils/shared';
-import { icons } from '@/lib/v-remixicon';
 import { debounce } from '@/utils/helper';
 import { useComponentId } from '@/composable/componentId';
 import { useEditorBlock } from '@/composable/editorBlock';

src/components/block/BlockNewTab.vue

@@ -5,16 +5,12 @@
         :class="block.category.color"
         class="inline-block text-sm mr-4 p-2 rounded-lg"
       >
-        <v-remixicon
-          :path="icons.riGlobalLine"
-          size="20"
-          class="inline-block mr-1"
-        />
+        <v-remixicon name="riGlobalLine" size="20" class="inline-block mr-1" />
         <span>{{ block.details.name }}</span>
       </div>
       <div class="flex-grow"></div>
       <v-remixicon
-        :path="icons.riDeleteBin7Line"
+        name="riDeleteBin7Line"
         class="cursor-pointer"
         @click="editor.removeNodeId(`node-${block.id}`)"
       />
@@ -33,10 +29,7 @@
   </div>
 </template>
 <script setup>
-import { VRemixIcon as VRemixicon } from 'v-remixicon';
 import emitter from 'tiny-emitter/instance';
-import UiCheckbox from '@/components/ui/UiCheckbox.vue';
-import { icons } from '@/lib/v-remixicon';
 import { debounce } from '@/utils/helper';
 import { useComponentId } from '@/composable/componentId';
 import { useEditorBlock } from '@/composable/editorBlock';

src/components/block/BlockRepeatTask.vue

@@ -5,16 +5,12 @@
         :class="block.category.color"
         class="inline-block text-sm mr-4 p-2 rounded-lg"
       >
-        <v-remixicon
-          :path="icons.riRepeat2Line"
-          size="20"
-          class="inline-block mr-1"
-        />
+        <v-remixicon name="riRepeat2Line" size="20" class="inline-block mr-1" />
         <span>Repeat task</span>
       </div>
       <div class="flex-grow"></div>
       <v-remixicon
-        :path="icons.riDeleteBin7Line"
+        name="riDeleteBin7Line"
         class="cursor-pointer"
         @click="editor.removeNodeId(`node-${block.id}`)"
       />
@@ -44,9 +40,7 @@
   </div>
 </template>
 <script setup>
-import { VRemixIcon as VRemixicon } from 'v-remixicon';
 import emitter from 'tiny-emitter/instance';
-import { icons } from '@/lib/v-remixicon';
 import { useComponentId } from '@/composable/componentId';
 import { useEditorBlock } from '@/composable/editorBlock';
 

src/components/newtab/workflow/WorkflowBuilder.vue

@@ -88,9 +88,11 @@ export default {
     }
 
     onMounted(() => {
-      const element = document.querySelector('#drawflow', getCurrentInstance());
+      /* eslint-disable-next-line */
+      const context = getCurrentInstance().appContext.app._context;
+      const element = document.querySelector('#drawflow');
 
-      editor.value = drawflow(element);
+      editor.value = drawflow(element, context);
       editor.value.start();
 
       emit('load', editor.value);

src/components/ui/uiCheckbox.vue

@@ -30,7 +30,7 @@
         "
       >
         <v-remixicon
-          :path="icons.riCheckLine"
+          name="riCheckLine"
           size="20"
           class="text-white"
         ></v-remixicon>
@@ -42,11 +42,7 @@
   </label>
 </template>
 <script>
-import { VRemixIcon as VRemixicon } from 'v-remixicon';
-import { icons } from '@/lib/v-remixicon';
-
 export default {
-  components: { VRemixicon },
   props: {
     modelValue: {
       type: Boolean,
@@ -61,7 +57,6 @@ export default {
     }
 
     return {
-      icons,
       changeHandler,
     };
   },

src/lib/drawflow.js

@@ -1,15 +1,11 @@
-import { createApp, h, defineComponent } from 'vue';
+import { h, render } from 'vue';
 import Drawflow from 'drawflow';
 import '@/assets/css/drawflow.css';
 
 const blockComponents = require.context('../components/block', false, /\.vue$/);
 
 export default function (element, ctx) {
-  const editor = new Drawflow(
-    element,
-    { defineComponent, createApp, version: 3, h },
-    ctx
-  );
+  const editor = new Drawflow(element, { render, version: 3, h }, ctx);
 
   editor.useuuid = true;
   editor.reroute = true;

yarn.lock

@@ -2445,10 +2445,10 @@ dot-case@^3.0.4:
     no-case "^3.0.4"
     tslib "^2.0.3"
 
-drawflow@^0.0.49:
-  version "0.0.49"
-  resolved "https://registry.yarnpkg.com/drawflow/-/drawflow-0.0.49.tgz#0dfc86d1b83757a3c6625caaa74fd4a2e399fdf0"
-  integrity sha512-oNTJ2BqUAGaM6KILWD4blpOs7q6CwFId8ZZXRqSCidyaKgDnhdkDREaPOfPaRa05TAOnGjYGde4ijZ0DpyYcIA==
+drawflow@^0.0.51:
+  version "0.0.51"
+  resolved "https://registry.yarnpkg.com/drawflow/-/drawflow-0.0.51.tgz#094b2b679a6d7487cec1d3b404bbbcc65e5049bb"
+  integrity sha512-1MjueSSy3fYKYJVKO/lc6BJCfAMS8E3ul44QrCzw1onl2MmfgCu528mHYfAmz6gEp5FMvwBNMjOyjTXgrTT2aw==
 
 ee-first@1.1.1:
   version "1.1.1"