v1.8.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "automa",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "description": "An extension for automating your browser by connecting blocks",
   "license": "MIT",
   "repository": {
@@ -34,12 +34,13 @@
     "@tiptap/extension-placeholder": "^2.0.0-beta.48",
     "@tiptap/starter-kit": "^2.0.0-beta.181",
     "@tiptap/vue-3": "^2.0.0-beta.90",
+    "@viselect/vanilla": "^3.0.0-beta.13",
     "@vuex-orm/core": "^0.36.4",
     "compare-versions": "^4.1.2",
     "crypto-js": "^4.1.1",
     "css-selector-generator": "^3.6.0",
     "dayjs": "^1.10.7",
-    "defu": "^5.0.1",
+    "defu": "^6.0.0",
     "drawflow": "^0.0.51",
     "idb": "^7.0.0",
     "lodash.clonedeep": "^4.5.0",

src/assets/css/drawflow.css

@@ -1,3 +1,4 @@
+.drawflow-node.selected-list .menu,
 .drawflow-node.selected .menu,
 .drawflow-node .block-base:hover .menu {
   @apply translate-y-11;
@@ -34,7 +35,8 @@
   @apply rounded-lg transition ring-2 ring-transparent duration-200 shadow-lg;
 }
 
-.drawflow .drawflow-node.selected {
+.drawflow .drawflow-node.selected,
+.drawflow .drawflow-node.selected-list {
   @apply ring-accent;
 }
 

src/background/workflow-engine/blocks-handler/handler-export-data.js

@@ -11,6 +11,15 @@ async function exportData({ data, outputs }) {
 
     if (dataToExport === 'google-sheets') {
       payload = this.referenceData.googleSheets[data.refKey] || [];
+    } else if (dataToExport === 'variable') {
+      payload = this.referenceData.variables[data.variableName] || [];
+
+      if (!Array.isArray(payload)) {
+        payload = [payload];
+
+        if (data.type === 'csv' && typeof payload[0] !== 'object')
+          payload = [payload];
+      }
     }
 
     const hasDownloadAccess = await browser.permissions.contains({

src/background/workflow-engine/blocks-handler/handler-interaction-block.js

@@ -36,7 +36,7 @@ async function interactionHandler(block) {
 
     if (
       (block.data.saveData && block.name !== 'forms') ||
-      block.data.getValue
+      (block.data.getValue && block.data.saveData)
     ) {
       const currentColumnType =
         this.columns[block.data.dataColumn]?.type || 'any';

src/background/workflow-engine/blocks-handler/handler-loop-breakpoint.js

@@ -4,10 +4,14 @@ function loopBreakpoint(block, { prevBlockData }) {
   const currentLoop = this.loopList[block.data.loopId];
 
   return new Promise((resolve) => {
-    const validLoopData =
-      currentLoop.type === 'numbers'
-        ? true
-        : currentLoop.index <= currentLoop.data.length - 1;
+    let validLoopData = false;
+
+    if (currentLoop) {
+      validLoopData =
+        currentLoop.type === 'numbers'
+          ? true
+          : currentLoop.index <= currentLoop.data.length - 1;
+    }
 
     if (
       currentLoop &&

src/components/newtab/settings/SettingsBackupItems.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="overflow-auto scroll w-full content">
+    <div v-if="!query && workflows.length === 0" class="text-center">
+      <img src="@/assets/svg/files-and-folder.svg" class="mx-auto max-w-sm" />
+      <p class="text-xl font-semibold">{{ t('message.noData') }}</p>
+    </div>
+    <ui-list class="space-y-1">
+      <ui-list-item
+        v-for="workflow in workflows"
+        :key="workflow.id"
+        :class="{ 'bg-box-transparent': isActive(workflow.id) }"
+        class="overflow-hidden group"
+      >
+        <ui-checkbox
+          :disabled="exceedLimit && !isActive(workflow.id)"
+          :model-value="isActive(workflow.id)"
+          class="mr-4"
+          @change="toggleDeleteWorkflow($event, workflow.id)"
+        />
+        <ui-img
+          v-if="workflow.icon?.startsWith('http')"
+          :src="workflow.icon"
+          style="height: 24px; width: 24px"
+          alt="Can not display"
+        />
+        <v-remixicon v-else :name="workflow.icon" />
+        <div class="flex-1 ml-2 overflow-hidden">
+          <p class="text-overflow flex-1">{{ workflow.name }}</p>
+          <p
+            class="text-gray-600 text-sm dark:text-gray-200 leading-tight text-overflow"
+          >
+            {{ workflow.description }}
+          </p>
+        </div>
+        <slot :workflow="workflow" />
+      </ui-list-item>
+    </ui-list>
+  </div>
+  <div class="flex items-center">
+    <ui-checkbox
+      :model-value="exceedLimit"
+      :indeterminate="modelValue.length > 0 && modelValue.length < limit"
+      class="mt-2 ml-4"
+      @change="$emit('select', $event)"
+    >
+      {{
+        t(
+          `settings.backupWorkflows.cloud.${
+            modelValue.length > 0 && modelValue.length >= limit
+              ? 'deselectAll'
+              : 'selectAll'
+          }`
+        )
+      }}
+    </ui-checkbox>
+    <div class="flex-grow"></div>
+    <span> {{ modelValue.length }}/{{ limit }} </span>
+  </div>
+</template>
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  workflows: {
+    type: Array,
+    default: () => [],
+  },
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+  limit: {
+    type: Number,
+    default: Infinity,
+  },
+  query: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['update:modelValue', 'select']);
+
+const { t } = useI18n();
+
+const exceedLimit = computed(() => props.modelValue.length >= props.limit);
+
+function toggleDeleteWorkflow(selected, workflowId) {
+  const workflows = [...props.modelValue];
+
+  if (selected) {
+    workflows.push(workflowId);
+  } else {
+    const index = workflows.indexOf(workflowId);
+
+    if (index !== -1) workflows.splice(index, 1);
+  }
+
+  emit('update:modelValue', workflows);
+}
+function isActive(workflowId) {
+  return props.modelValue.includes(workflowId);
+}
+</script>