feat: add `require` in workflow parameters (#836)

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

@@ -55,8 +55,8 @@
               </div>
               <div class="col-span-4 flex items-center">
                 <component
-                  :is="paramTypes[param.type].valueComp"
-                  v-if="paramTypes[param.type].valueComp"
+                  :is="paramTypes[param.type]?.valueComp"
+                  v-if="paramTypes[param.type]?.valueComp"
                   v-model="param.defaultValue"
                   :param-data="param"
                   :editor="true"
@@ -92,13 +92,21 @@
                   <span>Options</span>
                 </template>
                 <div class="pl-[28px] mt-2 mb-4">
-                  <ui-textarea
-                    v-model="param.description"
-                    placeholder="Description"
-                    title="Description"
-                    class="mb-2 block"
-                    style="max-width: 400px"
-                  />
+                  <div class="flex mb-2 items-start">
+                    <ui-textarea
+                      v-model="param.description"
+                      placeholder="Description"
+                      title="Description"
+                      style="max-width: 400px"
+                    />
+                    <ui-checkbox
+                      v-if="['string', 'number'].includes(param.type)"
+                      v-model="param.data.required"
+                      class="ml-6"
+                    >
+                      Parameter required
+                    </ui-checkbox>
+                  </div>
                   <component
                     :is="paramTypes[param.type].options"
                     v-if="paramTypes[param.type].options"
@@ -144,6 +152,7 @@ const paramTypes = {
     valueComp: ParameterInputValue,
     data: {
       masks: [],
+      required: false,
       useMask: false,
       unmaskValue: false,
     },
@@ -151,6 +160,9 @@ const paramTypes = {
   number: {
     id: 'number',
     name: 'Input (number)',
+    data: {
+      required: false,
+    },
   },
   ...customParameters,
 };

src/params/App.vue

@@ -53,7 +53,7 @@
                 :is="paramsList[param.type].valueComp"
                 v-if="paramsList[param.type]"
                 v-model="param.value"
-                :label="param.name"
+                :label="param.name + (param.data.required ? '*' : '')"
                 :param-data="param"
                 class="w-full"
               />
@@ -61,10 +61,9 @@
                 v-else
                 v-model="param.value"
                 :type="param.inputType"
-                :label="param.name"
+                :label="param.name + (param.data.required ? '*' : '')"
                 :placeholder="param.placeholder"
                 class="w-full"
-                @keyup.enter="runWorkflow(index, workflow)"
               />
               <p
                 v-if="param.description"
@@ -83,6 +82,7 @@
             </ui-button>
             <ui-button
               v-if="workflow.type === 'block'"
+              :disabled="!isValidParams(workflow.params)"
               variant="accent"
               @click="continueWorkflow(index, workflow)"
             >
@@ -90,6 +90,7 @@
             </ui-button>
             <ui-button
               v-else
+              :disabled="!isValidParams(workflow.params)"
               variant="accent"
               @click="runWorkflow(index, workflow)"
             >
@@ -245,6 +246,15 @@ function continueWorkflow(index, { data, params }) {
       deleteWorkflow(index);
     });
 }
+function isValidParams(params) {
+  const isValid = params.every((param) => {
+    if (!param.data?.required) return true;
+
+    return param.value;
+  });
+  console.log(isValid);
+  return isValid;
+}
 
 browser.runtime.onMessage.addListener(({ name, data }) => {
   if (name === 'workflow:params') {