quasar 2.9.1 → 2.9.2

package/dist/types/index.d.ts

@@ -12385,6 +12385,10 @@ export interface QTreeProps {
    * Allows the tree to be set in accordion mode
    */
   accordion?: boolean | undefined;
+  /**
+   * Turn off transition effects when expanding/collapsing nodes; Also enhances perf by a lot as a side-effect; Recommended for big trees
+   */
+  noTransition?: boolean | undefined;
   /**
    * The text value to be used for filtering nodes
    */

package/dist/vetur/quasar-attributes.json

@@ -5651,6 +5651,10 @@
     "type": "boolean",
     "description": "Allows the tree to be set in accordion mode"
   },
+  "q-tree/no-transition": {
+    "type": "boolean",
+    "description": "Turn off transition effects when expanding/collapsing nodes; Also enhances perf by a lot as a side-effect; Recommended for big trees"
+  },
   "q-tree/filter": {
     "type": "string",
     "description": "The text value to be used for filtering nodes"

package/dist/vetur/quasar-tags.json

@@ -2000,6 +2000,7 @@
       "no-selection-unset",
       "default-expand-all",
       "accordion",
+      "no-transition",
       "filter",
       "filter-method",
       "duration",

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.9.1",
+  "version": "2.9.2",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -18237,6 +18237,16 @@
               "doc-url": "https://v2.quasar.dev/vue-components/tree",
               "type": "boolean"
             },
+            {
+              "name": "no-transition",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "description": "Turn off transition effects when expanding/collapsing nodes; Also enhances perf by a lot as a side-effect; Recommended for big trees",
+              "doc-url": "https://v2.quasar.dev/vue-components/tree",
+              "type": "boolean"
+            },
             {
               "name": "filter",
               "value": {
@@ -19260,11 +19270,6 @@
               "description": "Calls event.preventDefault() for touch events",
               "doc-url": "https://v2.quasar.dev/vue-directives/touch-pan"
             },
-            {
-              "name": "mightPrevent",
-              "description": "Required when you might call event.preventDefault() in your handler for touch events",
-              "doc-url": "https://v2.quasar.dev/vue-directives/touch-pan"
-            },
             {
               "name": "capture",
               "description": "Use capture for touchstart event",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.9.1",
+  "version": "2.9.2",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",

package/src/components/badge/__tests__/QBadge.spec.js

@@ -1,64 +1,126 @@
-// import { mount } from '@cypress/vue'
-// import QBadge from '../QBadge.js'
+import { mount } from '@cypress/vue'
+import QBadge from '../QBadge.js'
 
-// const snapshotOptions = { customSnapshotsDir: '../src/components/badge/__tests__' }
+const defaultOptions = {
+  label: 'simple badge'
+}
+
+const alignValues = [ 'top', 'middle', 'bottom' ]
+
+function mountQBadge (options = {}) {
+  options.props = {
+    ...defaultOptions,
+    ...options.props
+  }
+
+  return mount(QBadge, options)
+}
 
 describe('Badge API', () => {
   describe('Props', () => {
     describe('Category: content', () => {
       describe('(prop): floating', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a floating badge', () => {
+          mountQBadge({
+            props: { floating: true }
+          })
+
+          cy.get('.q-badge')
+            .should('have.class', 'q-badge--floating')
         })
       })
 
       describe('(prop): multi-line', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a content with multiple lines', () => {
+          mountQBadge({
+            props: { multiLine: true }
+          })
+
+          cy.get('.q-badge')
+            .should('have.class', 'q-badge--multi-line')
         })
       })
 
       describe('(prop): label', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a label inside the badge', () => {
+          const label = 'Badge label'
+
+          mountQBadge({
+            props: { label }
+          })
+
+          cy.get('.q-badge')
+            .should('contain', label)
         })
       })
 
       describe('(prop): align', () => {
-        it.skip(' ', () => {
-          //
+        it(`should render a badge aligned based on defined values: ${ alignValues.join(', ') }`, () => {
+          mountQBadge()
+
+          // loop over alignValues
+          for (const align of alignValues) {
+            cy.get('.q-badge')
+              .then(() => Cypress.vueWrapper.setProps({ align }))
+              .should('have.css', 'vertical-align', align)
+          }
         })
       })
     })
 
     describe('Category: style', () => {
       describe('(prop): color', () => {
-        it.skip(' ', () => {
-          //
+        it('should change color based on Quasar Color Palette', () => {
+          mountQBadge({
+            props: { color: 'red' }
+          })
+
+          cy.get('.q-badge')
+            .should('have.class', 'bg-red')
         })
       })
 
       describe('(prop): text-color', () => {
-        it.skip(' ', () => {
-          //
+        it('should change text color based on Quasar Color Palette', () => {
+          mountQBadge({
+            props: { textColor: 'red' }
+          })
+
+          cy.get('.q-badge')
+            .should('have.class', 'text-red')
         })
       })
 
       describe('(prop): transparent', () => {
-        it.skip(' ', () => {
-          //
+        it('should have opacity style when "transparent" prop is true', () => {
+          mountQBadge({
+            props: { transparent: true }
+          })
+
+          cy.get('.q-badge')
+            .should('have.class', 'q-badge--transparent')
         })
       })
 
       describe('(prop): outline', () => {
-        it.skip(' ', () => {
-          //
+        it('should have a outline style when "outline" prop is true', () => {
+          mountQBadge({
+            props: { outline: true }
+          })
+
+          cy.get('.q-badge')
+            .should('have.class', 'q-badge--outline')
         })
       })
 
       describe('(prop): rounded', () => {
-        it.skip(' ', () => {
-          //
+        it('should have a rounded style when "rounded" prop is true', () => {
+          mountQBadge({
+            props: { rounded: true }
+          })
+
+          cy.get('.q-badge')
+            .should('have.class', 'q-badge--rounded')
         })
       })
     })
@@ -66,8 +128,21 @@ describe('Badge API', () => {
 
   describe('Slots', () => {
     describe('(slot): default', () => {
-      it.skip(' ', () => {
-        //
+      it('should display the default slot content', () => {
+        const label = 'Badge label'
+
+        mountQBadge({
+          props: {
+            label: undefined
+          },
+
+          slots: {
+            default: label
+          }
+        })
+
+        cy.get('.q-badge')
+          .should('have.text', label)
       })
     })
   })

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

@@ -166,7 +166,7 @@ export default function (props, emit, emitValue, inputRef) {
         '^'
         + unmask.join('')
         + '(' + (unmaskChar === '' ? '.' : '[^' + unmaskChar + ']') + '+)?'
-        + '$'
+        + '[' + unmaskChar + ']*$'
       ),
       extractLast = extract.length - 1,
       extractMatcher = extract.map((re, index) => {

package/src/components/pull-to-refresh/QPullToRefresh.js

@@ -111,10 +111,7 @@ export default createComponent({
 
     const directives = computed(() => {
       // if props.disable === false
-      const modifiers = {
-        down: true,
-        mightPrevent: true
-      }
+      const modifiers = { down: true }
 
       if (props.noMouse !== true) {
         modifiers.mouse = true

package/src/components/tabs/QTabs.js

@@ -572,8 +572,8 @@ export default createComponent({
 
       recalculateScroll()
 
-      // if it's a QTab
-      if (tabData.routeData === void 0) {
+      // if it's a QTab or we don't have Vue Router
+      if (tabData.routeData === void 0 || proxy.$route === void 0) {
         // we should position to the currently active tab (if any)
         registerScrollToTabTimeout(() => {
           if (scrollable.value === true) {

package/src/components/tree/QTree.js

@@ -68,6 +68,7 @@ export default createComponent({
 
     duration: Number,
     noConnectors: Boolean,
+    noTransition: Boolean,
 
     noNodesLabel: String,
     noResultsLabel: String
@@ -140,7 +141,6 @@ export default createComponent({
         const
           key = node[ props.nodeKey ],
           isParent = node[ props.childrenKey ] && node[ props.childrenKey ].length > 0,
-          isLeaf = isParent !== true,
           selectable = node.disabled !== true && hasSelection.value === true && node.selectable !== false,
           expandable = node.disabled !== true && node.expandable !== false,
           hasTicking = tickStrategy !== 'none',
@@ -166,7 +166,6 @@ export default createComponent({
           key,
           parent,
           isParent,
-          isLeaf,
           lazy: localLazy,
           disabled: node.disabled,
           link: node.disabled !== true && (selectable === true || (expandable === true && (isParent === true || localLazy === true))),
@@ -186,7 +185,7 @@ export default createComponent({
           leafTicking,
           ticked: strictTicking === true
             ? innerTicked.value.includes(key)
-            : (isLeaf === true ? innerTicked.value.includes(key) : false)
+            : (isParent === true ? false : innerTicked.value.includes(key))
         }
 
         meta[ key ] = m
@@ -586,23 +585,37 @@ export default createComponent({
         ]),
 
         isParent === true
-          ? h(QSlideTransition, {
-            duration: props.duration,
-            onShow,
-            onHide
-          }, () => withDirectives(
-            h('div', {
-              class: 'q-tree__node-collapsible' + textColorClass.value,
-              key: `${ key }__q`
-            }, [
-              body,
-              h('div', {
-                class: 'q-tree__children'
-                  + (m.disabled === true ? ' q-tree__node--disabled' : '')
-              }, children)
-            ]),
-            [ [ vShow, m.expanded ] ]
-          ))
+          ? (
+              props.noTransition === true
+                ? h('div', {
+                  class: 'q-tree__node-collapsible' + textColorClass.value,
+                  key: `${ key }__q`
+                }, [
+                  body,
+                  h('div', {
+                    class: 'q-tree__children'
+                      + (m.disabled === true ? ' q-tree__node--disabled' : '')
+                  }, m.expanded ? children : null)
+                ])
+
+                : h(QSlideTransition, {
+                  duration: props.duration,
+                  onShow,
+                  onHide
+                }, () => withDirectives(
+                  h('div', {
+                    class: 'q-tree__node-collapsible' + textColorClass.value,
+                    key: `${ key }__q`
+                  }, [
+                    body,
+                    h('div', {
+                      class: 'q-tree__children'
+                        + (m.disabled === true ? ' q-tree__node--disabled' : '')
+                    }, children)
+                  ]),
+                  [ [ vShow, m.expanded ] ]
+                ))
+            )
           : body
       ])
     }

package/src/components/tree/QTree.json

@@ -126,6 +126,13 @@
       "category": "behavior"
     },
 
+    "no-transition": {
+      "type": "Boolean",
+      "desc": "Turn off transition effects when expanding/collapsing nodes; Also enhances perf by a lot as a side-effect; Recommended for big trees",
+      "category": "behavior",
+      "addedIn": "v2.9.2"
+    },
+
     "filter": {
       "type": "String",
       "desc": "The text value to be used for filtering nodes",

package/src/directives/TouchHold.js

@@ -126,9 +126,16 @@ export default createDirective(__QUASAR_SSR_SERVER__
 
         el.__qtouchhold = ctx
 
-        modifiers.mouse === true && addEvt(ctx, 'main', [
-          [ el, 'mousedown', 'mouseStart', `passive${ modifiers.mouseCapture === true ? 'Capture' : '' }` ]
-        ])
+        if (modifiers.mouse === true) {
+          // account for UMD too where modifiers will be lowercased to work
+          const capture = modifiers.mouseCapture === true || modifiers.mousecapture === true
+            ? 'Capture'
+            : ''
+
+          addEvt(ctx, 'main', [
+            [ el, 'mousedown', 'mouseStart', `passive${ capture }` ]
+          ])
+        }
 
         client.has.touch === true && addEvt(ctx, 'main', [
           [ el, 'touchstart', 'touchStart', `passive${ modifiers.capture === true ? 'Capture' : '' }` ],

package/src/directives/TouchPan.js

@@ -188,7 +188,8 @@ export default createDirective(__QUASAR_SSR_SERVER__
               */
               if (
                 ctx.direction.all !== true
-                && (mouseEvent !== true || ctx.modifiers.mouseAllDir !== true)
+                // account for UMD too where modifiers will be lowercased to work
+                && (mouseEvent !== true || (ctx.modifiers.mouseAllDir !== true && ctx.modifiers.mousealldir !== true))
               ) {
                 const clone = evt.type.indexOf('mouse') > -1
                   ? new MouseEvent(evt.type, evt)
@@ -255,9 +256,12 @@ export default createDirective(__QUASAR_SSR_SERVER__
             const start = () => {
               handleEvent(evt, isMouseEvt)
 
-              if (modifiers.preserveCursor !== true) {
+              let cursor
+              if (modifiers.preserveCursor !== true && modifiers.preservecursor !== true) {
+                cursor = document.documentElement.style.cursor || ''
                 document.documentElement.style.cursor = 'grabbing'
               }
+
               isMouseEvt === true && document.body.classList.add('no-pointer-events--children')
               document.body.classList.add('non-selectable')
               clearSelection()
@@ -265,9 +269,10 @@ export default createDirective(__QUASAR_SSR_SERVER__
               ctx.styleCleanup = withDelayedFn => {
                 ctx.styleCleanup = void 0
 
-                if (modifiers.preserveCursor !== true) {
-                  document.documentElement.style.cursor = ''
+                if (cursor !== void 0) {
+                  document.documentElement.style.cursor = cursor
                 }
+
                 document.body.classList.remove('non-selectable')
 
                 if (isMouseEvt === true) {
@@ -315,7 +320,8 @@ export default createDirective(__QUASAR_SSR_SERVER__
 
             if (
               ctx.direction.all === true
-              || (isMouseEvt === true && ctx.modifiers.mouseAllDir === true)
+              // account for UMD too where modifiers will be lowercased to work
+              || (isMouseEvt === true && (ctx.modifiers.mouseAllDir === true || ctx.modifiers.mousealldir === true))
             ) {
               start()
               ctx.event.detected = true
@@ -382,9 +388,16 @@ export default createDirective(__QUASAR_SSR_SERVER__
 
         el.__qtouchpan = ctx
 
-        modifiers.mouse === true && addEvt(ctx, 'main', [
-          [ el, 'mousedown', 'mouseStart', `passive${ modifiers.mouseCapture === true ? 'Capture' : '' }` ]
-        ])
+        if (modifiers.mouse === true) {
+          // account for UMD too where modifiers will be lowercased to work
+          const capture = modifiers.mouseCapture === true || modifiers.mousecapture === true
+            ? 'Capture'
+            : ''
+
+          addEvt(ctx, 'main', [
+            [ el, 'mousedown', 'mouseStart', `passive${ capture }` ]
+          ])
+        }
 
         client.has.touch === true && addEvt(ctx, 'main', [
           [ el, 'touchstart', 'touchStart', `passive${ modifiers.capture === true ? 'Capture' : '' }` ],

package/src/directives/TouchPan.json

@@ -123,11 +123,6 @@
       "desc": "Calls event.preventDefault() for touch events"
     },
 
-    "mightPrevent": {
-      "type": "Boolean",
-      "desc": "Required when you might call event.preventDefault() in your handler for touch events"
-    },
-
     "capture": {
       "type": "Boolean",
       "desc": "Use capture for touchstart event"

package/src/directives/TouchRepeat.js

@@ -203,18 +203,32 @@ export default createDirective(__QUASAR_SSR_SERVER__
 
         el.__qtouchrepeat = ctx
 
-        modifiers.mouse === true && addEvt(ctx, 'main', [
-          [ el, 'mousedown', 'mouseStart', `passive${ modifiers.mouseCapture === true ? 'Capture' : '' }` ]
-        ])
+        if (modifiers.mouse === true) {
+          // account for UMD too where modifiers will be lowercased to work
+          const capture = modifiers.mouseCapture === true || modifiers.mousecapture === true
+            ? 'Capture'
+            : ''
+
+          addEvt(ctx, 'main', [
+            [ el, 'mousedown', 'mouseStart', `passive${ capture }` ]
+          ])
+        }
 
         client.has.touch === true && addEvt(ctx, 'main', [
           [ el, 'touchstart', 'touchStart', `passive${ modifiers.capture === true ? 'Capture' : '' }` ],
           [ el, 'touchend', 'noop', 'passiveCapture' ]
         ])
 
-        keyboard.length > 0 && addEvt(ctx, 'main', [
-          [ el, 'keydown', 'keyboardStart', `notPassive${ modifiers.keyCapture === true ? 'Capture' : '' }` ]
-        ])
+        if (keyboard.length !== 0) {
+          // account for UMD too where modifiers will be lowercased to work
+          const capture = modifiers.keyCapture === true || modifiers.keycapture === true
+            ? 'Capture'
+            : ''
+
+          addEvt(ctx, 'main', [
+            [ el, 'keydown', 'keyboardStart', `notPassive${ capture }` ]
+          ])
+        }
       },
 
       updated (el, { oldValue, value }) {

package/src/directives/TouchSwipe.js

@@ -228,9 +228,16 @@ export default createDirective(__QUASAR_SSR_SERVER__
 
         el.__qtouchswipe = ctx
 
-        modifiers.mouse === true && addEvt(ctx, 'main', [
-          [ el, 'mousedown', 'mouseStart', `passive${ mouseCapture }` ]
-        ])
+        if (modifiers.mouse === true) {
+          // account for UMD too where modifiers will be lowercased to work
+          const capture = modifiers.mouseCapture === true || modifiers.mousecapture === true
+            ? 'Capture'
+            : ''
+
+          addEvt(ctx, 'main', [
+            [ el, 'mousedown', 'mouseStart', `passive${ capture }` ]
+          ])
+        }
 
         client.has.touch === true && addEvt(ctx, 'main', [
           [ el, 'touchstart', 'touchStart', `passive${ modifiers.capture === true ? 'Capture' : '' }` ],

package/src/utils/morph.js

@@ -154,9 +154,13 @@ function normalizeOptions (options) {
     fill: typeof options.fill === 'string' && options.fill.length > 0 ? options.fill : 'none',
 
     resize: options.resize === true,
-    useCSS: options.useCSS === true,
-    hideFromClone: options.hideFromClone === true,
-    keepToClone: options.keepToClone === true,
+
+    // account for UMD too where modifiers will be lowercased to work
+    useCSS: options.useCSS === true || options.usecss === true,
+    // account for UMD too where modifiers will be lowercased to work
+    hideFromClone: options.hideFromClone === true || options.hidefromclone === true,
+    // account for UMD too where modifiers will be lowercased to work
+    keepToClone: options.keepToClone === true || options.keeptoclone === true,
 
     tween: options.tween === true,
     tweenFromOpacity: isNaN(options.tweenFromOpacity) === true ? 0.6 : parseFloat(options.tweenFromOpacity),