quasar 2.18.3 → 2.18.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.18.3",
+  "version": "2.18.4",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "type": "module",
   "module": "dist/quasar.client.js",

package/src/components/input/use-mask.js

@@ -1,4 +1,4 @@
-import { ref, watch, nextTick } from 'vue'
+import { ref, computed, watch, nextTick } from 'vue'
 
 import { shouldIgnoreKey } from '../../utils/private.keyboard/key-composition.js'
 
@@ -12,7 +12,7 @@ const NAMED_MASKS = {
   card: '#### #### #### ####'
 }
 
-const TOKENS = {
+const { tokenMap: DEFAULT_TOKEN_MAP, tokenKeys: DEFAULT_TOKEN_MAP_KEYS } = getTokenMap({
   '#': { pattern: '[\\d]', negate: '[^\\d]' },
 
   S: { pattern: '[a-zA-Z]', negate: '[^a-zA-Z]' },
@@ -23,29 +23,62 @@ const TOKENS = {
 
   X: { pattern: '[0-9a-zA-Z]', negate: '[^0-9a-zA-Z]', transform: v => v.toLocaleUpperCase() },
   x: { pattern: '[0-9a-zA-Z]', negate: '[^0-9a-zA-Z]', transform: v => v.toLocaleLowerCase() }
-}
-
-const KEYS = Object.keys(TOKENS)
-KEYS.forEach(key => {
-  TOKENS[ key ].regex = new RegExp(TOKENS[ key ].pattern)
 })
 
-const
-  tokenRegexMask = new RegExp('\\\\([^.*+?^${}()|([\\]])|([.*+?^${}()|[\\]])|([' + KEYS.join('') + '])|(.)', 'g'),
-  escRegex = /[.*+?^${}()|[\]\\]/g
+function getTokenMap (tokens) {
+  const tokenKeys = Object.keys(tokens)
+  const tokenMap = {}
+
+  tokenKeys.forEach(key => {
+    const entry = tokens[ key ]
+    tokenMap[ key ] = {
+      ...entry,
+      regex: new RegExp(entry.pattern)
+    }
+  })
+
+  return { tokenMap, tokenKeys }
+}
+
+function getTokenRegexMask (keys) {
+  return new RegExp('\\\\([^.*+?^${}()|([\\]])|([.*+?^${}()|[\\]])|([' + keys.join('') + '])|(.)', 'g')
+}
 
+const escRegex = /[.*+?^${}()|[\]\\]/g
+const DEFAULT_TOKEN_REGEX_MASK = getTokenRegexMask(DEFAULT_TOKEN_MAP_KEYS)
 const MARKER = String.fromCharCode(1)
 
 export const useMaskProps = {
   mask: String,
   reverseFillMask: Boolean,
   fillMask: [ Boolean, String ],
-  unmaskedValue: Boolean
+  unmaskedValue: Boolean,
+  maskTokens: Object
 }
 
 export default function (props, emit, emitValue, inputRef) {
   let maskMarked, maskReplaced, computedMask, computedUnmask, pastedTextStart, selectionAnchor
 
+  const tokens = computed(() => {
+    if (props.maskTokens === void 0 || props.maskTokens === null) {
+      return {
+        tokenMap: DEFAULT_TOKEN_MAP,
+        tokenRegexMask: DEFAULT_TOKEN_REGEX_MASK
+      }
+    }
+
+    const { tokenMap: customTokens } = getTokenMap(props.maskTokens)
+    const tokenMap = {
+      ...DEFAULT_TOKEN_MAP,
+      ...customTokens
+    }
+
+    return {
+      tokenMap,
+      tokenRegexMask: getTokenRegexMask(Object.keys(tokenMap))
+    }
+  })
+
   const hasMask = ref(null)
   const innerValue = ref(getInitialMaskedValue())
 
@@ -137,9 +170,9 @@ export default function (props, emit, emitValue, inputRef) {
       unmaskChar = '',
       negateChar = ''
 
-    localComputedMask.replace(tokenRegexMask, (_, char1, esc, token, char2) => {
+    localComputedMask.replace(tokens.value.tokenRegexMask, (_, char1, esc, token, char2) => {
       if (token !== void 0) {
-        const c = TOKENS[ token ]
+        const c = tokens.value.tokenMap[ token ]
         mask.push(c)
         negateChar = c.negate
         if (firstMatch === true) {

package/src/components/input/use-mask.json

@@ -6,26 +6,77 @@
       "examples": [
         "'###-##'", "'date'", "'datetime'", "'time'", "'fulltime'", "'phone'", "'card'"
       ],
-      "category": "behavior"
+      "category": "mask"
     },
 
     "fill-mask": {
       "type": [ "Boolean", "String" ],
       "desc": "Fills string with specified characters (or underscore if value is not string) to fill mask's length",
       "examples": [ "true", "'0'", "'_'" ],
-      "category": "behavior"
+      "category": "mask"
     },
 
     "reverse-fill-mask": {
       "type": "Boolean",
       "desc": "Fills string from the right side of the mask",
-      "category": "behavior"
+      "category": "mask"
     },
 
     "unmasked-value": {
       "type": "Boolean",
       "desc": "Model will be unmasked (won't contain tokens/separation characters)",
-      "category": "behavior"
+      "category": "mask"
+    },
+
+    "mask-tokens": {
+      "type": "Object",
+      "desc": "Object of custom mask tokens to be added on top of the default ones; Can also override any of the default ones",
+      "definition": {
+        "...tokenCharacter": {
+          "type": "Object",
+          "desc": "The definition for the current custom mask token",
+          "required": true,
+          "definition": {
+            "pattern": {
+              "type": "String",
+              "required": true,
+              "desc": "A string representing a regular expression to match against a single character",
+              "examples": [ "'[0-9]'", "'[a-zA-Z]'" ]
+            },
+            "negate": {
+              "type": "String",
+              "required": true,
+              "desc": "A string representing a regular expression to NOT match against a single character",
+              "examples": [ "'[^0-9]'", "'[^a-zA-Z]'" ]
+            },
+            "transform": {
+              "type": "Function",
+              "required": false,
+              "desc": "A function that takes the character as argument and returns the transformed character",
+              "examples": [ "v => v.toLocaleUpperCase()" ],
+              "params": {
+                "char": {
+                  "type": "String",
+                  "required": true,
+                  "desc": "The character being transformed",
+                  "examples": [ "'a'", "'1'" ]
+                }
+              },
+              "returns": {
+                "type": "String",
+                "desc": "The transformed character"
+              }
+            }
+          },
+          "examples": [
+            "{ pattern: '[0-4a-eA-E]', negate: '[^0-4a-eA-E]', transform: v => v.toLocaleUpperCase() }",
+            "{ pattern: '[5-8]', negate: '[^5-8]' }"
+          ]
+        }
+      },
+      "examples": [ "{ C: { pattern: '[0-4a-eA-E]', negate: '[^0-4a-eA-E]', transform: v => v.toLocaleUpperCase() } }" ],
+      "category": "mask",
+      "addedIn": "v2.18.4"
     }
   }
 }

package/src/composables/private.use-validate/use-validate.json

@@ -10,20 +10,20 @@
       "type": [ "Boolean", "null" ],
       "default": "null",
       "desc": "Does field have validation errors?",
-      "category": "behavior"
+      "category": "validation"
     },
 
     "error-message": {
       "type": "String",
       "desc": "Validation error message (gets displayed only if 'error' is set to 'true')",
       "examples": [ "'Username must have at least 5 characters'" ],
-      "category": "content"
+      "category": "validation"
     },
 
     "no-error-icon": {
       "type": "Boolean",
       "desc": "Hide error icon when there is an error",
-      "category": "content"
+      "category": "validation"
     },
 
     "rules": {
@@ -35,13 +35,13 @@
         "[ 'fulltime' ]",
         "[ (val, rules) => rules.email(val) || 'Please enter a valid email address' ]"
       ],
-      "category": "behavior"
+      "category": "validation"
     },
 
     "reactive-rules": {
       "type": "Boolean",
       "desc": "By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it",
-      "category": "behavior"
+      "category": "validation"
     },
 
     "lazy-rules": {
@@ -49,7 +49,7 @@
       "desc": "If set to boolean true then it checks validation status against the 'rules' only after field loses focus for first time; If set to 'ondemand' then it will trigger only when component's validate() method is manually called or when the wrapper QForm submits itself",
       "default": "false",
       "values": [ "true", "false", "'ondemand'" ],
-      "category": "behavior"
+      "category": "validation"
     }
   },