quasar 2.12.3 → 2.12.4

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/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/Notify.json

@@ -20,7 +20,7 @@
       },
 
       "textColor": {
-        "extends": "color"
+        "extends": "text-color"
       },
 
       "message": {
@@ -169,6 +169,26 @@
         "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": {
+          "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)",
+            "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: () => {} } ]"
+        ]
+      },
+
       "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 +225,7 @@
             },
 
             "textColor": {
-              "extends": "color"
+              "extends": "text-color"
             },
 
             "message": {