quasar 2.12.3 → 2.12.5

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

@@ -1,21 +1,116 @@
+import QInput from '../QInput'
+
+function getHostElement () {
+  return cy.get('.q-field')
+}
+
+function mountQInput (options) {
+  return cy.mount(QInput, options)
+}
+
 describe('use-mask API', () => {
   describe('Props', () => {
     describe('Category: behavior', () => {
       describe('(prop): mask', () => {
-        it.skip(' ', () => {
-          //
+        const masks = [
+          {
+            mask: 'card',
+            value: '4242424242424242',
+            valueWithMask: '4242 4242 4242 4242'
+          },
+          {
+            mask: 'phone',
+            value: '2374234234',
+            valueWithMask: '(237) 423 - 4234'
+          },
+          {
+            mask: '###@#*#',
+            value: '22222',
+            valueWithMask: '222@2*2'
+          },
+          {
+            mask: 'fulltime',
+            value: '222222',
+            valueWithMask: '22:22:22'
+          },
+          {
+            mask: 'time',
+            value: '222222',
+            valueWithMask: '22:22'
+          },
+          {
+            mask: 'date',
+            value: '20230501',
+            valueWithMask: '2023/05/01'
+          },
+          {
+            mask: 'datetime',
+            value: '2023050106:33',
+            valueWithMask: '2023/05/01 06:33'
+          }
+        ]
+        masks.forEach(({ value, valueWithMask, ...props }) => {
+          it(`should enforce a '${ props.mask }' mask`, () => {
+            mountQInput({
+              props
+            })
+
+            getHostElement().get('input').type(value)
+
+            getHostElement().get('input')
+              .should('not.have.value', value)
+              .should('have.value', valueWithMask)
+          })
         })
       })
 
       describe('(prop): fill-mask', () => {
-        it.skip(' ', () => {
-          //
+        it('should use a default fill mask if one is not set', () => {
+          mountQInput({
+            props: {
+              fillMask: true,
+              mask: '###-###'
+            }
+          })
+
+          getHostElement().get('input').type('222')
+
+          getHostElement().get('input')
+            .should('not.have.value', '222')
+            .should('have.value', '222-___')
+        })
+
+        it('should use a default fill mask if one is not set', () => {
+          mountQInput({
+            props: {
+              fillMask: '@',
+              mask: '###-###'
+            }
+          })
+
+          getHostElement().get('input').type('222')
+
+          getHostElement().get('input')
+            .should('not.have.value', '222')
+            .should('have.value', '222-@@@')
         })
       })
 
       describe('(prop): reverse-fill-mask', () => {
-        it.skip(' ', () => {
-          //
+        it('should enforce a reverse-fill-mask', () => {
+          mountQInput({
+            props: {
+              fillMask: true,
+              reverseFillMask: true,
+              mask: '###-###'
+            }
+          })
+
+          getHostElement().get('input').type('12345')
+
+          getHostElement().get('input')
+            .should('not.have.value', '12345')
+            .should('have.value', '_12-345')
         })
       })
 

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

@@ -430,7 +430,10 @@ export default function (props, emit, emitValue, inputRef) {
   function onMaskedKeydown (e) {
     emit('keydown', e)
 
-    if (shouldIgnoreKey(e) === true) {
+    if (
+      shouldIgnoreKey(e) === true
+      || e.altKey === true // let browser handle these
+    ) {
       return
     }
 

package/src/components/layout/QLayout.json

@@ -43,7 +43,7 @@
             "width": {
               "type": "Number",
               "required": true,
-              "desc": "Layout height"
+              "desc": "Layout width"
             }
           }
         }

package/src/components/select/QSelect.js

@@ -872,12 +872,12 @@ export default createComponent({
             mode = props.newValueMode
           }
 
+          updateInputValue('', props.multiple !== true, true)
+
           if (val === void 0 || val === null) {
             return
           }
 
-          updateInputValue('', props.multiple !== true, true)
-
           const fn = mode === 'toggle' ? toggleOption : add
           fn(val, mode === 'add-unique')
 

package/src/components/spinner/QSpinnerComment.js

@@ -8,7 +8,7 @@ const svg = [
   h('rect', {
     x: '0',
     y: '0',
-    width: ' 100',
+    width: '100',
     height: '100',
     fill: 'none'
   }),

package/src/components/spinner/QSpinnerCube.js

@@ -8,7 +8,7 @@ const svg = [
   h('rect', {
     x: '0',
     y: '0',
-    width: ' 100',
+    width: '100',
     height: '100',
     fill: 'none'
   }),
@@ -18,7 +18,7 @@ const svg = [
     h('rect', {
       x: '-20',
       y: '-20',
-      width: ' 40',
+      width: '40',
       height: '40',
       fill: 'currentColor',
       opacity: '0.9'
@@ -43,7 +43,7 @@ const svg = [
     h('rect', {
       x: '-20',
       y: '-20',
-      width: ' 40',
+      width: '40',
       height: '40',
       fill: 'currentColor',
       opacity: '0.8'
@@ -68,7 +68,7 @@ const svg = [
     h('rect', {
       x: '-20',
       y: '-20',
-      width: ' 40',
+      width: '40',
       height: '40',
       fill: 'currentColor',
       opacity: '0.7'
@@ -93,7 +93,7 @@ const svg = [
     h('rect', {
       x: '-20',
       y: '-20',
-      width: ' 40',
+      width: '40',
       height: '40',
       fill: 'currentColor',
       opacity: '0.6'

package/src/components/spinner/QSpinnerFacebook.js

@@ -11,7 +11,7 @@ const svg = [
     h('rect', {
       x: '-10',
       y: '-30',
-      width: ' 20',
+      width: '20',
       height: '60',
       fill: 'currentColor',
       opacity: '0.6'
@@ -37,7 +37,7 @@ const svg = [
     h('rect', {
       x: '-10',
       y: '-30',
-      width: ' 20',
+      width: '20',
       height: '60',
       fill: 'currentColor',
       opacity: '0.8'
@@ -63,7 +63,7 @@ const svg = [
     h('rect', {
       x: '-10',
       y: '-30',
-      width: ' 20',
+      width: '20',
       height: '60',
       fill: 'currentColor',
       opacity: '0.9'

package/src/components/spinner/QSpinnerHourglass.js

@@ -19,7 +19,7 @@ const svg = [
       h('rect', {
         x: '15',
         y: '20',
-        width: ' 70',
+        width: '70',
         height: '25'
       }, [
         h('animate', {
@@ -48,7 +48,7 @@ const svg = [
       h('rect', {
         x: '15',
         y: '55',
-        width: ' 70',
+        width: '70',
         height: '25'
       }, [
         h('animate', {

package/src/css/normalize.sass

@@ -49,19 +49,15 @@ abbr[title]
 img
   border-style: none
 
-/*
- * Hide the overflow in IE.
- */
-
-svg:not(:root)
-  overflow: hidden
-
 /*
  * line 1: Correct the inheritance and scaling of font size in all browsers.
  * line 2: Correct the odd `em` font sizing in all browsers.
  */
 
-code, kbd, pre, samp
+code,
+kbd,
+pre,
+samp
   font-family: monospace, monospace
   font-size: 1em
 
@@ -154,7 +150,7 @@ progress
   vertical-align: baseline
 
 /*
- * Remove the default vertical scrollbar in IE.
+ * Remove the default vertical scrollbar in IE 10+.
  */
 
 textarea

package/src/plugins/Loading.json

@@ -52,7 +52,8 @@
         "desc": "Color name for background from the Quasar Color Palette"
       },
       "spinner": {
-        "type": "String",
+        "type": "Component",
+        "configFileType": "String",
         "desc": "One of the QSpinners",
         "examples": [ "QSpinnerAudio" ]
       },

package/src/plugins/Notify.json

@@ -20,7 +20,7 @@
       },
 
       "textColor": {
-        "extends": "color"
+        "extends": "text-color"
       },
 
       "message": {
@@ -169,6 +169,47 @@
         "default": 5000
       },
 
+      "actions": {
+        "type": "Array",
+        "tsType": "QNotifyAction",
+        "desc": "Notification actions (buttons); Unless 'noDismiss' is true, clicking/tapping on the button will close the notification; Also check 'closeBtn' convenience prop",
+        "definition": {
+          "handler": {
+            "type": "Function",
+            "configFileType": null,
+            "desc": "Function to be executed when the button is clicked/tapped",
+            "params": null,
+            "returns": null,
+            "examples": [
+              "() => { console.log('button clicked') }"
+            ]
+          },
+          "noDismiss": {
+            "type": "Boolean",
+            "desc": "Do not dismiss the notification when the button is clicked/tapped"
+          },
+          "...": {
+            "type": "Any",
+            "desc": "Any other QBtn prop expect 'onClick' (use 'handler' instead, only possible with UI config)",
+            "examples": [ "label: 'Learn more'", "color: 'primary'" ]
+          }
+        },
+        "examples": [
+          "[ { label: 'Show', handler: () => {}, 'aria-label': 'Button label' }, { icon: 'map', handler: () => {}, color: 'yellow' }, { label: 'Learn more', noDismiss: true, handler: () => {} } ]"
+        ]
+      },
+
+      "onDismiss": {
+        "type": "Function",
+        "configFileType": null,
+        "desc": "Function to call when notification gets dismissed",
+        "params": null,
+        "returns": null,
+        "examples": [
+          "() => { console.log('Dismissed') }"
+        ]
+      },
+
       "closeBtn": {
         "type": [ "Boolean", "String" ],
         "desc": "Convenient way to add a dismiss button with a specific label, without using the 'actions' prop; If set to true, it uses a label according to the current Quasar language",
@@ -205,7 +246,7 @@
             },
 
             "textColor": {
-              "extends": "color"
+              "extends": "text-color"
             },
 
             "message": {
@@ -435,7 +476,7 @@
           "type": "Object",
           "tsType": "QNotifyOptions",
           "required": true,
-          "desc": "Notification options (See 'opts' param of 'create()' for object properties)",
+          "desc": "Notification options except 'ignoreDefaults' (See 'opts' param of 'create()' for object properties)",
           "__exemption": [ "definition" ]
         }
       }
@@ -455,7 +496,7 @@
           "type": "Object",
           "tsType": "QNotifyOptions",
           "required": true,
-          "desc": "Notification options (See 'opts' param of 'create()' for object properties)",
+          "desc": "Notification options except 'ignoreDefaults' (See 'opts' param of 'create()' for object properties)",
           "__exemption": [ "definition" ]
         }
       }

package/src/utils/EventBus.js

@@ -18,9 +18,9 @@ export default class EventBus {
   }
 
   once (name, callback, ctx) {
-    const listener = () => {
+    const listener = (...args) => {
       this.off(name, listener)
-      callback.apply(ctx, arguments)
+      callback.apply(ctx, args)
     }
 
     listener.__callback = callback