feat: add business folder

business/dev/index.js

@@ -0,0 +1,3 @@
+export default {
+  workflowParameters: {},
+};

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

@@ -21,7 +21,7 @@
       </thead>
       <tbody>
         <template v-for="(param, index) in state.parameters" :key="index">
-          <tr>
+          <tr class="align-top">
             <td>
               <ui-input
                 :model-value="param.name"
@@ -30,7 +30,10 @@
               />
             </td>
             <td>
-              <ui-select v-model="param.type">
+              <ui-select
+                :model-value="param.type"
+                @change="updateParamType(index, $event)"
+              >
                 <option
                   v-for="type in paramTypes"
                   :key="type.id"
@@ -49,6 +52,7 @@
                 v-if="paramTypes[param.type].valueComp"
                 v-model="param.defaultValue"
                 :param-data="param"
+                max-width="250px"
               />
               <ui-input
                 v-else
@@ -135,6 +139,12 @@ function addParameter() {
 function updateParam(index, value) {
   state.parameters[index].name = value.replace(/\s/g, '_');
 }
+function updateParamType(index, type) {
+  const param = state.parameters[index];
+
+  param.type = type;
+  param.data = paramTypes[type].data || {};
+}
 
 watch(
   () => state.parameters,

src/params/App.vue

@@ -41,18 +41,27 @@
           </div>
         </template>
         <div class="px-4 pb-4">
-          <div class="space-y-2">
-            <ui-input
-              v-for="(param, paramIdx) in workflow.params"
-              :key="paramIdx"
-              v-model="param.value"
-              :type="param.inputType"
-              :label="param.name"
-              :placeholder="param.placeholder"
-              class="w-full"
-              @keyup.enter="runWorkflow(index, workflow)"
-            />
-          </div>
+          <ul class="space-y-2">
+            <li v-for="(param, paramIdx) in workflow.params" :key="paramIdx">
+              <component
+                :is="workflowParameters[param.type].valueComp"
+                v-if="workflowParameters[param.type]"
+                v-model="param.value"
+                :label="param.name"
+                :param-data="param"
+                class="w-full"
+              />
+              <ui-input
+                v-else
+                v-model="param.value"
+                :type="param.inputType"
+                :label="param.name"
+                :placeholder="param.placeholder"
+                class="w-full"
+                @keyup.enter="runWorkflow(index, workflow)"
+              />
+            </li>
+          </ul>
           <div class="flex items-center mt-6">
             <p>{{ dayjs(workflow.addedDate).fromNow() }}</p>
             <div class="flex-grow" />
@@ -72,6 +81,7 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
 import browser from 'webextension-polyfill';
+import { workflowParameters } from '@business';
 import dayjs from '@/lib/dayjs';
 import { useTheme } from '@/composable/theme';
 
@@ -150,10 +160,15 @@ function runWorkflow(index, { data, params }) {
   const getParamVal = {
     string: (str) => str,
     number: (num) => (Number.isNaN(+num) ? 0 : +num),
+    default: (value) => value,
   };
 
   const variables = params.reduce((acc, param) => {
-    const value = getParamVal[param.type](param.value || param.defaultValue);
+    const valueFunc =
+      getParamVal[param.type] ||
+      workflowParameters[param.type]?.getValue ||
+      getParamVal.default;
+    const value = valueFunc(param.value || param.defaultValue);
     acc[param.name] = value;
 
     return acc;

tailwind.config.js

@@ -37,7 +37,7 @@ function rem2px(input, fontSize = 16) {
 }
 
 module.exports = {
-  content: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
+  content: ['./src/**/*.{js,jsx,ts,tsx,vue}', './business/**/*.{js,jsx,ts,tsx,vue}'],
   darkMode: 'class', // or 'media' or 'class'
   theme: {
     borderRadius: rem2px(defaultTheme.borderRadius),