quasar 2.18.3 → 2.18.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.18.3",
+  "version": "2.18.5",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "type": "module",
   "module": "dist/quasar.client.js",
@@ -76,8 +76,8 @@
     "tinyglobby": "^0.2.10",
     "typescript": "^5.6.2",
     "vue": "^3.5.5",
-    "eslint-config-quasar": "0.0.3",
-    "@quasar/extras": "1.17.0"
+    "@quasar/extras": "1.17.0",
+    "eslint-config-quasar": "0.0.3"
   },
   "vetur": {
     "tags": "dist/vetur/quasar-tags.json",

package/src/components/field/QField.sass

@@ -131,17 +131,6 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
       -webkit-animation-name: q-autofill
       -webkit-animation-fill-mode: both
 
-    &:-webkit-autofill + .q-field__label
-      transform: translateY(-40%) scale(.75)
-    &[type="color"],
-    &[type="date"],
-    &[type="datetime-local"],
-    &[type="month"],
-    &[type="time"],
-    &[type="week"]
-      + .q-field__label
-        transform: translateY(-40%) scale(.75)
-
     &:invalid
       box-shadow: none
 
@@ -201,6 +190,17 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
     transition: transform $field-transition, max-width $field-transition-label-right-up
     backface-visibility: hidden
 
+    &:has(+ :is(.q-field__native, .q-field__input):is(
+      :-webkit-autofill,
+      [type="color"],
+      [type="date"],
+      [type="datetime-local"],
+      [type="month"],
+      [type="time"],
+      [type="week"]
+    ))
+      transform: translateY(-40%) scale(.75)
+
   &--float .q-field__label
     max-width: 133%
     transform: translateY(-40%) scale(.75)
@@ -445,17 +445,16 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
     &.q-field--float .q-field__label
       transform: translateY(-30%) scale(.75)
 
-    .q-field__native, .q-field__input
-      &:-webkit-autofill + .q-field__label
-        transform: translateY(-30%) scale(.75)
-      &[type="color"],
-      &[type="date"],
-      &[type="datetime-local"],
-      &[type="month"],
-      &[type="time"],
-      &[type="week"]
-        + .q-field__label
-          transform: translateY(-30%) scale(.75)
+    .q-field__label:has(+ :is(.q-field__native, .q-field__input):is(
+      :-webkit-autofill,
+      [type="color"],
+      [type="date"],
+      [type="datetime-local"],
+      [type="month"],
+      [type="time"],
+      [type="week"]
+    ))
+      transform: translateY(-30%) scale(.75)
 
   &--borderless, &--standard
 

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/components/pagination/QPagination.js

@@ -264,18 +264,19 @@ export default createComponent({
       model.value = model.value + offset
     }
 
-    const inputEvents = computed(() => {
-      function updateModel () {
-        model.value = newPage.value
-        newPage.value = null
-      }
+    function updateModel () {
+      model.value = newPage.value
+      newPage.value = null
+      $q.platform.is.mobile === true && document.activeElement.blur()
+    }
 
-      return {
-        'onUpdate:modelValue': val => { newPage.value = val },
-        onKeyup: e => { isKeyCode(e, 13) === true && updateModel() },
-        onBlur: updateModel
-      }
-    })
+    function onInputValue (val) {
+      newPage.value = val
+    }
+
+    function onKeyup (e) {
+      isKeyCode(e, 13) === true && updateModel()
+    }
 
     function getBtn (cfg, page, active) {
       const data = {
@@ -441,7 +442,9 @@ export default createComponent({
               placeholder: inputPlaceholder.value,
               min: minProp.value,
               max: maxProp.value,
-              ...inputEvents.value
+              'onUpdate:modelValue': onInputValue,
+              onKeyup,
+              onBlur: updateModel
             })
             : h('div', {
               class: 'q-pagination__middle row justify-center'

package/src/composables/private.use-field/use-field.js

@@ -440,6 +440,12 @@ export default function (state) {
       )
     }
 
+    hasLabel.value === true && node.push(
+      h('div', {
+        class: labelClass.value
+      }, hSlot(slots.label, props.label))
+    )
+
     if (state.getControl !== void 0) {
       node.push(state.getControl())
     }
@@ -459,12 +465,6 @@ export default function (state) {
       )
     }
 
-    hasLabel.value === true && node.push(
-      h('div', {
-        class: labelClass.value
-      }, hSlot(slots.label, props.label))
-    )
-
     props.suffix !== void 0 && props.suffix !== null && node.push(
       h('div', {
         class: 'q-field__suffix no-pointer-events row items-center'

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"
     }
   },