feat: add mask

package.json

@@ -60,6 +60,7 @@
     "jspdf": "^2.5.1",
     "lodash.clonedeep": "^4.5.0",
     "lodash.merge": "^4.6.2",
+    "maska": "^1.5.0",
     "mitt": "^3.0.0",
     "mousetrap": "^1.6.5",
     "nanoid": "^4.0.0",
@@ -71,6 +72,7 @@
     "v-remixicon": "^0.1.1",
     "vue": "^3.2.37",
     "vue-i18n": "^9.2.0-beta.40",
+    "vue-imask": "^6.4.2",
     "vue-router": "^4.1.5",
     "vue-toastification": "^2.0.0-rc.5",
     "vuedraggable": "^4.1.0",

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

@@ -164,7 +164,7 @@ const { t } = useI18n();
 const toast = useToast();
 
 const workflow = inject('workflow', {});
-const showModal = ref(true);
+const showModal = ref(false);
 const hasFileAccess = ref(false);
 const dataList = ref(JSON.parse(JSON.stringify(props.data.dataList)));
 

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

@@ -86,6 +86,7 @@
                   <component
                     :is="paramTypes[param.type].options"
                     v-model="param.data"
+                    :default-value="paramTypes[param.type].data"
                   />
                 </div>
               </ui-expand>
@@ -131,7 +132,6 @@ const state = reactive({
 
 function addParameter() {
   state.parameters.push({
-    data: {},
     name: 'param',
     type: 'string',
     defaultValue: '',

src/components/newtab/workflow/edit/Parameter/ParameterInputOptions.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="flex items-center">
+    <label class="flex items-center">
+      <ui-switch v-model="options.useMask" />
+      <span class="ml-2"> Use mask </span>
+    </label>
+    <v-remixicon
+      v-tooltip="{ content: maskInfo, allowHTML: true }"
+      name="riInformationLine"
+      class="ml-1 text-gray-600 dark:text-gray-200"
+      size="20"
+    />
+  </div>
+  <div v-if="options.useMask" class="mt-4">
+    <p>Masks</p>
+    <div class="grid grid-cols-3 gap-4">
+      <div
+        v-for="(mask, index) in options.masks"
+        :key="index"
+        class="flex items-center"
+      >
+        <ui-input v-model="options.masks[index]" placeholder="###-###-###" />
+        <v-remixicon
+          name="riDeleteBin7Line"
+          class="cursor-pointer flex-shrink-0 ml-1"
+          @click="options.masks.splice(index, 1)"
+        />
+      </div>
+    </div>
+    <ui-button class="mt-4" @click="options.masks.push('')">
+      Add mask
+    </ui-button>
+    <template v-if="false">
+      <p>Custom tokens</p>
+      <div class="grid grid-cols-2 gap-4">
+        <div
+          v-for="(token, index) in options.customTokens"
+          :key="index"
+          class="flex items-center"
+        >
+          <ui-input
+            v-model="token.symbol"
+            placeholder="Symbol"
+            style="width: 120px"
+          />
+          <ui-input
+            v-model="token.regex"
+            placeholder="RegEx"
+            class="flex-1 ml-2"
+          />
+          <v-remixicon
+            name="riDeleteBin7Line"
+            class="cursor-pointer flex-shrink-0 ml-1"
+            @click="options.customTokens.splice(index, 1)"
+          />
+        </div>
+      </div>
+      <ui-button class="mt-4" @click="addToken"> Add token </ui-button>
+    </template>
+  </div>
+</template>
+<script setup>
+import { reactive, watch } from 'vue';
+import cloneDeep from 'lodash.clonedeep';
+
+const props = defineProps({
+  modelValue: {
+    type: [Object, String],
+    default: () => ({}),
+  },
+  defaultValue: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(['update:modelValue']);
+
+const maskInfo = `
+Add mask to the input field
+<p class="mt-2">Supported tokens</p>
+<table class="tokens">
+	<tbody>
+		<tr>
+			<td>#</td>
+			<td>Number (0-9)</td>
+		</tr>
+		<tr>
+			<td>X</td>
+			<td>Number (0-9) or Letter (A-Z|a-z)</td>
+		</tr>
+		<tr>
+			<td>S</td>
+			<td>Letter (A-Z|a-z)</td>
+		</tr>
+		<tr>
+			<td>A</td>
+			<td>Letter (A-Z)</td>
+		</tr>
+		<tr>
+			<td>a</td>
+			<td>Letter (a-z)</td>
+		</tr>
+		<tr>
+			<td>!</td>
+			<td>Escape character</td>
+		</tr>
+		<tr>
+			<td>*</td>
+			<td>Repeat character</td>
+		</tr>
+	<tbody>
+</table>
+`;
+
+const cloneData = cloneDeep(props.modelValue || {});
+const options = reactive({
+  ...(props.defaultValue || {}),
+  ...cloneData,
+});
+
+function addToken() {
+  options.customTokens.push({
+    symbol: '',
+    regex: '',
+  });
+}
+
+watch(
+  options,
+  () => {
+    emit('update:modelValue', options);
+  },
+  { deep: true }
+);
+</script>

src/lib/compsUi.js

@@ -1,3 +1,4 @@
+import { maska } from 'maska';
 import VTooltip from '../directives/VTooltip';
 import VAutofocus from '../directives/VAutofocus';
 import VClosePopover from '../directives/VClosePopover';
@@ -19,6 +20,7 @@ function componentsExtractor(app, components) {
 }
 
 export default function (app) {
+  app.directive('maska', maska);
   app.directive('tooltip', VTooltip);
   app.directive('autofocus', VAutofocus);
   app.directive('close-popover', VClosePopover);

yarn.lock

@@ -4143,6 +4143,11 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
+imask@^6.4.2:
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/imask/-/imask-6.4.2.tgz#f1c67e6961640bf5b09d7b4a34dcf4f9a3df7e22"
+  integrity sha512-xvEgbTdk6y2dW2UAysq0NRPmO6PuaXM5NHIt4TXEJEwXUHj26M0p/fXqyrSJdNXFaGVOtqYjPRnNdrjQQhDuuA==
+
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -4722,6 +4727,11 @@ make-dir@^3.0.2, make-dir@^3.1.0:
   dependencies:
     semver "^6.0.0"
 
+maska@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/maska/-/maska-1.5.0.tgz#6e2f6386d290ab7dc8b44cfc04f34891e06a1e25"
+  integrity sha512-BwZXzs5gHeu6wtn3iWFqrKRtcsM3sTpkHvfAngVNVNlN7tl9ZyQUeHTz11s9Sy7Bq1MoQ+xyR/+IzghY8nR84Q==
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -6519,6 +6529,11 @@ vue-demi@*:
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.6.tgz#f9433cbd75e68a970dec066647f4ba6c08ced48f"
   integrity sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==
 
+vue-demi@^0.12.1:
+  version "0.12.5"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.5.tgz#8eeed566a7d86eb090209a11723f887d28aeb2d1"
+  integrity sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==
+
 vue-eslint-parser@^9.0.1:
   version "9.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.0.3.tgz#0c17a89e0932cc94fa6a79f0726697e13bfe3c96"
@@ -6542,6 +6557,14 @@ vue-i18n@^9.2.0-beta.40:
     "@intlify/vue-devtools" "9.2.2"
     "@vue/devtools-api" "^6.2.1"
 
+vue-imask@^6.4.2:
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/vue-imask/-/vue-imask-6.4.2.tgz#1cffc9cfaab5673ad0ab68c1bd44cfa5e17f2043"
+  integrity sha512-WJgwZa+cENuOwZmI3FY6aiuoXs2/QSbtXjtRHCC9/bX7CTgeVBaBabh2tBX38QFEvQeUfmDnzKL6++SgQdYjQA==
+  dependencies:
+    imask "^6.4.2"
+    vue-demi "^0.12.1"
+
 vue-loader@^17.0.0:
   version "17.0.0"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-17.0.0.tgz#2eaa80aab125b19f00faa794b5bd867b17f85acb"