feat: data exist in conditions block

src/components/newtab/app/AppSidebar.vue

@@ -126,7 +126,7 @@ const extensionVersion = browser.runtime.getManifest().version;
 const subColors = {
   free: 'bg-box-transparent',
   pro: 'bg-accent text-white',
-  business: 'bg-accent text-white',
+  business: 'bg-accent text-white dark:text-black',
 };
 const tabs = [
   {

src/components/newtab/shared/SharedConditionBuilder/index.vue

@@ -163,6 +163,8 @@ function getConditionText({ category, type, data }) {
     const textDetail = data.attrName || data.selector;
 
     if (textDetail) text += `(${textDetail})`;
+  } else if (type.startsWith('data')) {
+    text = `Data exists (${data.dataPath})`;
   }
 
   return text;

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

@@ -96,7 +96,7 @@
                     v-model="param.description"
                     placeholder="Description"
                     title="Description"
-                    class="mb-2"
+                    class="mb-2 block"
                     style="max-width: 400px"
                   />
                   <component
@@ -154,7 +154,9 @@ const paramTypes = {
   },
   ...customParameters,
 };
-const paramTypesArr = Object.values(paramTypes).filter((item) => item.id);
+const paramTypesArr = Object.values(paramTypes)
+  .filter((item) => item.id)
+  .sort((a, b) => (a.name > b.name ? 1 : -1));
 
 const state = reactive({
   parameters: cloneDeep(props.data || []).map((item) => {

src/components/ui/UiInput.vue

@@ -31,6 +31,7 @@
         v-autofocus="autofocus"
         v-imask="mask"
         :class="[
+          statusColors[status],
           inputClass,
           {
             'opacity-75 pointer-events-none': disabled,
@@ -119,6 +120,10 @@ const props = defineProps({
     type: [Array, Object],
     default: null,
   },
+  status: {
+    type: String,
+    default: '',
+  },
   unmaskValue: Boolean,
 });
 const emit = defineEmits([
@@ -132,6 +137,10 @@ const emit = defineEmits([
 
 const componentId = useComponentId('ui-input');
 
+const statusColors = {
+  error: 'ring-red-400 ring-2 focus:ring-red-400 focus:ring-2',
+};
+
 function emitValue(event) {
   let { value } = event.target;
 

src/utils/shared.js

@@ -1542,6 +1542,14 @@ export const conditionBuilder = {
       compareable: false,
       data: { code: '\nreturn true;' },
     },
+    {
+      id: 'data#exists',
+      category: 'value',
+      name: 'Data exists',
+      compareable: false,
+      valueKey: 'dataPath',
+      data: { dataPath: '' },
+    },
     {
       id: 'element#text',
       category: 'element',
@@ -1648,5 +1656,9 @@ export const conditionBuilder = {
       label: 'Attribute name',
       placeholder: 'name',
     },
+    dataPath: {
+      label: 'variables.variableName',
+      placeholder: '',
+    },
   },
 };

src/utils/testConditions.js

@@ -1,4 +1,5 @@
 import cloneDeep from 'lodash.clonedeep';
+import objectPath from 'object-path';
 import mustacheReplacer from './referenceData/mustacheReplacer';
 import { conditionBuilder } from './shared';
 
@@ -41,6 +42,10 @@ export default async function (conditionsArr, workflowData) {
   };
 
   async function getConditionItemValue({ type, data }) {
+    if (type.startsWith('data')) {
+      return objectPath.has(workflowData.refData, data.dataPath);
+    }
+
     const copyData = cloneDeep(data);
 
     Object.keys(data).forEach((key) => {