quasar 2.6.6 → 2.7.2

package/src/components/slider/use-slider.js

@@ -129,7 +129,7 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
     && innerMin.value < innerMax.value
   ))
 
-  const decimals = computed(() => (String(props.step).trim('0').split('.')[ 1 ] || '').length)
+  const decimals = computed(() => (String(props.step).trim().split('.')[ 1 ] || '').length)
   const step = computed(() => (props.step === 0 ? 1 : props.step))
   const tabindex = computed(() => (editable.value === true ? props.tabindex || 0 : -1))
 

package/src/components/table/QTable.js

@@ -152,7 +152,6 @@ export default createComponent({
 
     const __containerClass = computed(() =>
       `q-table__container q-table--${ props.separator }-separator column no-wrap`
-      + (props.loading === true ? ' q-table--loading' : '')
       + (props.grid === true ? ' q-table--grid' : cardDefaultClass.value)
       + (isDark.value === true ? ' q-table--dark' : '')
       + (props.dense === true ? ' q-table--dense' : '')

package/src/components/table/QTable.json

@@ -676,6 +676,7 @@
           "examples": [ 100, 200 ]
         }
       },
+      "syncable": true,
       "examples": [
         ":pagination=\"myInitialPagination\"",
         "v-model:pagination=\"myPagination\""
@@ -706,6 +707,7 @@
       "type": "Array",
       "desc": "Keeps the user selection array",
       "default": "[]",
+      "syncable": true,
       "examples": [
         "v-model:selected=\"selection\""
       ],
@@ -716,6 +718,7 @@
       "type": "Array",
       "desc": "Keeps the array with expanded rows keys",
       "default": "[]",
+      "syncable": true,
       "examples": [
         "v-model:expanded=\"expanded\""
       ],

package/src/components/table/QTable.sass

@@ -183,7 +183,7 @@
  * Separators
  */
 .q-table--horizontal-separator, .q-table--cell-separator
-  thead th, tbody tr:not(:last-child) td
+  thead th, tbody tr:not(:last-child) > td
     border-bottom-width: 1px
 
 .q-table--vertical-separator, .q-table--cell-separator

package/src/components/tabs/QTabs.sass

@@ -181,9 +181,3 @@
       min-height: 36px
       &--full
         min-height: 52px
-
-
-@media (min-width: $breakpoint-lg-min)
-  .q-header, .q-footer
-    .q-tab__content
-      min-width: 128px

package/src/components/uploader/uploader-core.js

@@ -149,6 +149,7 @@ export function getRenderer (getPlugin) {
     + (props.square === true ? ' q-uploader--square no-border-radius' : '')
     + (props.flat === true ? ' q-uploader--flat no-shadow' : '')
     + (props.disable === true ? ' disabled q-uploader--disable' : '')
+    + (dnd.value === true ? ' q-uploader--dnd' : '')
   )
 
   const colorClass = computed(() =>
@@ -339,28 +340,32 @@ export function getRenderer (getPlugin) {
 
     return [
       h('div', {
-        class: 'q-uploader__header-content flex flex-center no-wrap q-gutter-xs'
+        class: 'q-uploader__header-content column'
       }, [
-        getBtn(state.queuedFiles.value.length > 0, 'removeQueue', removeQueuedFiles),
-        getBtn(state.uploadedFiles.value.length > 0, 'removeUploaded', removeUploadedFiles),
-
-        state.isUploading.value === true
-          ? h(QSpinner, { class: 'q-uploader__spinner' })
-          : null,
-
-        h('div', { class: 'col column justify-center' }, [
-          props.label !== void 0
-            ? h('div', { class: 'q-uploader__title' }, [ props.label ])
+        h('div', {
+          class: 'flex flex-center no-wrap q-gutter-xs'
+        }, [
+          getBtn(state.queuedFiles.value.length > 0, 'removeQueue', removeQueuedFiles),
+          getBtn(state.uploadedFiles.value.length > 0, 'removeUploaded', removeUploadedFiles),
+
+          state.isUploading.value === true
+            ? h(QSpinner, { class: 'q-uploader__spinner' })
             : null,
 
-          h('div', { class: 'q-uploader__subtitle' }, [
-            uploadSizeLabel.value + ' / ' + uploadProgressLabel.value
-          ])
-        ]),
+          h('div', { class: 'col column justify-center' }, [
+            props.label !== void 0
+              ? h('div', { class: 'q-uploader__title' }, [ props.label ])
+              : null,
+
+            h('div', { class: 'q-uploader__subtitle' }, [
+              uploadSizeLabel.value + ' / ' + uploadProgressLabel.value
+            ])
+          ]),
 
-        getBtn(canAddFiles.value, 'add'),
-        getBtn(props.hideUploadBtn === false && canUpload.value === true, 'upload', state.upload),
-        getBtn(state.isUploading.value, 'clear', state.abort)
+          getBtn(canAddFiles.value, 'add'),
+          getBtn(props.hideUploadBtn === false && canUpload.value === true, 'upload', state.upload),
+          getBtn(state.isUploading.value, 'clear', state.abort)
+        ])
       ])
     ]
   }

package/src/components/virtual-scroll/use-virtual-scroll.js

@@ -20,8 +20,13 @@ const filterProto = Array.prototype.filter
 const setOverflowAnchor = __QUASAR_SSR__ || window.getComputedStyle(document.body).overflowAnchor === void 0
   ? noop
   : function (contentEl, index) {
-    requestAnimationFrame(() => {
-      if (contentEl === void 0) {
+    if (contentEl === null) {
+      return
+    }
+
+    cancelAnimationFrame(contentEl._qOverflowAnimationFrame)
+    contentEl._qOverflowAnimationFrame = requestAnimationFrame(() => {
+      if (contentEl === null) {
         return
       }
 
@@ -415,7 +420,7 @@ export function useVirtualScroll ({
       contentEl.addEventListener('focusout', onBlurRefocusFn)
 
       setTimeout(() => {
-        contentEl !== void 0 && contentEl.removeEventListener('focusout', onBlurRefocusFn)
+        contentEl !== null && contentEl.removeEventListener('focusout', onBlurRefocusFn)
       })
     }
 
@@ -528,7 +533,7 @@ export function useVirtualScroll ({
   }
 
   function onBlurRefocusFn () {
-    contentRef.value !== void 0 && contentRef.value.focus()
+    contentRef.value !== null && contentRef.value !== void 0 && contentRef.value.focus()
   }
 
   function localResetVirtualScroll (toIndex, fullReset) {

package/src/composables/private/__tests__/use-anchor.spec.js

@@ -7,7 +7,7 @@ describe('use-anchor API', () => {
       describe('(prop): target', () => {
         it('should use another target using a CSS selector', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               target: '.other-target'
             }
           })
@@ -27,7 +27,7 @@ describe('use-anchor API', () => {
 
         it('should not show when target is false', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               target: false
             }
           })
@@ -42,7 +42,7 @@ describe('use-anchor API', () => {
       describe('(prop): no-parent-event', () => {
         it('should not show when clicking parent with no-parent-event true', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               'no-parent-event': true
             }
           })
@@ -55,7 +55,7 @@ describe('use-anchor API', () => {
 
         it('should show when clicking parent with no-parent-event false', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               'no-parent-event': false
             }
           })
@@ -70,7 +70,7 @@ describe('use-anchor API', () => {
       describe('(prop): context-menu', () => {
         it('should not show when left clicking parent', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               'context-menu': true
             }
           })
@@ -83,7 +83,7 @@ describe('use-anchor API', () => {
 
         it('should show when right clicking parent', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               'context-menu': true
             }
           })

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

@@ -42,7 +42,7 @@ describe('use-field API', () => {
         it('should show the label when supplied', () => {
           const label = 'Select something'
           mount(FieldWrapper, {
-            attrs: {
+            props: {
               label
             }
           })
@@ -53,7 +53,7 @@ describe('use-field API', () => {
         it('should show the label centered when not focused', () => {
           const label = 'Select something'
           mount(FieldWrapper, {
-            attrs: {
+            props: {
               label
             }
           })
@@ -66,7 +66,7 @@ describe('use-field API', () => {
         it('should show the label stacked when focused', () => {
           const label = 'Select something'
           mount(FieldWrapper, {
-            attrs: {
+            props: {
               label
             }
           })
@@ -82,7 +82,7 @@ describe('use-field API', () => {
         it('should show the label stacked', () => {
           const label = 'Select something'
           mount(FieldWrapper, {
-            attrs: {
+            props: {
               label,
               stackLabel: true
             }
@@ -97,7 +97,7 @@ describe('use-field API', () => {
         it('should show a hint text', () => {
           const hint = 'Select something'
           mount(FieldWrapper, {
-            attrs: {
+            props: {
               hint
             }
           })
@@ -110,7 +110,7 @@ describe('use-field API', () => {
         it('should not show a hint text when not focused', () => {
           const hint = 'Select something'
           mount(FieldWrapper, {
-            attrs: {
+            props: {
               hint,
               hideHint: true
             }
@@ -121,7 +121,7 @@ describe('use-field API', () => {
         it('should show a hint text when focused', () => {
           const hint = 'Select something'
           mount(FieldWrapper, {
-            attrs: {
+            props: {
               hint,
               hideHint: true
             }

package/src/composables/private/__tests__/use-model-toggle.spec.js

@@ -3,40 +3,41 @@ import { mount } from '@cypress/vue'
 import WrapperOne from './../../../components/menu/__tests__/WrapperOne.vue'
 import WrapperTwo from './../../../components/menu/__tests__/WrapperTwo.vue'
 import { ref } from 'vue'
+import { vModelAdapter } from '../../../../test/cypress/helpers/v-model-adapter'
 
 describe('use-model-toggle API', () => {
   describe('Props', () => {
     describe('Category: model', () => {
       describe('(prop): model-value', () => {
         it('should open the dialog when modifying the model-value', () => {
-          const modelValue = ref(false)
+          const model = ref(false)
           mount(WrapperOne, {
-            attrs: {
-              modelValue
+            props: {
+              ...vModelAdapter(model)
             }
           })
           cy.dataCy('wrapper')
           cy.dataCy('menu')
             .should('not.exist')
             .then(() => {
-              modelValue.value = true
+              model.value = true
               cy.dataCy('menu')
                 .should('exist')
             })
         })
 
         it('should close the dialog when modifying the model-value', () => {
-          const modelValue = ref(true)
+          const model = ref(true)
           mount(WrapperOne, {
-            attrs: {
-              modelValue
+            props: {
+              ...vModelAdapter(model)
             }
           })
           cy.dataCy('wrapper')
           cy.dataCy('menu')
             .should('exist')
             .then(() => {
-              modelValue.value = false
+              model.value = false
               cy.dataCy('menu')
                 .should('not.exist')
             })
@@ -50,7 +51,7 @@ describe('use-model-toggle API', () => {
       it('should emit @update:model-value event when state changes', () => {
         const fn = cy.stub()
         mount(WrapperOne, {
-          attrs: {
+          props: {
             'onUpdate:modelValue': fn
           }
         })
@@ -70,7 +71,7 @@ describe('use-model-toggle API', () => {
       it('should emit @show event when menu is triggered by parent', () => {
         const fn = cy.stub()
         mount(WrapperOne, {
-          attrs: {
+          props: {
             onShow: fn
           }
         })
@@ -89,7 +90,7 @@ describe('use-model-toggle API', () => {
       it('should emit @show event when component is triggered with the show() method', () => {
         const fn = cy.stub()
         mount(WrapperOne, {
-          attrs: {
+          props: {
             onShow: fn
           }
         })
@@ -111,7 +112,7 @@ describe('use-model-toggle API', () => {
       it('should emit @before-show event when menu is triggered by parent', () => {
         const fn = cy.stub()
         mount(WrapperOne, {
-          attrs: {
+          props: {
             onBeforeShow: fn
           }
         })
@@ -129,7 +130,7 @@ describe('use-model-toggle API', () => {
       it('should emit @before-show event when component is triggered with the show() method', () => {
         const fn = cy.stub()
         mount(WrapperOne, {
-          attrs: {
+          props: {
             onBeforeShow: fn
           }
         })
@@ -150,7 +151,7 @@ describe('use-model-toggle API', () => {
       it('should emit @hide event when menu is triggered by parent', () => {
         const fn = cy.stub()
         mount(WrapperOne, {
-          attrs: {
+          props: {
             onHide: fn
           }
         })
@@ -175,7 +176,7 @@ describe('use-model-toggle API', () => {
       it('should emit @hide event when component is triggered with the show() method', () => {
         const fn = cy.stub()
         mount(WrapperOne, {
-          attrs: {
+          props: {
             onHide: fn
           }
         })
@@ -203,7 +204,7 @@ describe('use-model-toggle API', () => {
       it('should emit @before-hide event when menu is triggered by parent', () => {
         const fn = cy.stub()
         mount(WrapperOne, {
-          attrs: {
+          props: {
             onBeforeHide: fn
           }
         })
@@ -228,7 +229,7 @@ describe('use-model-toggle API', () => {
       it('should emit @before-hide event when component is triggered with the show() method', () => {
         const fn = cy.stub()
         mount(WrapperOne, {
-          attrs: {
+          props: {
             onBeforeHide: fn
           }
         })
@@ -255,7 +256,7 @@ describe('use-model-toggle API', () => {
 
   describe('Methods', () => {
     describe('(method): show', () => {
-      it('should tigger the menu to show', () => {
+      it('should trigger the menu to show', () => {
         mount(WrapperOne)
 
         cy.dataCy('wrapper')
@@ -267,7 +268,7 @@ describe('use-model-toggle API', () => {
     })
 
     describe('(method): hide', () => {
-      it('should tigger the menu to hide', () => {
+      it('should trigger the menu to hide', () => {
         mount(WrapperOne)
 
         cy.dataCy('wrapper')

package/src/composables/private/__tests__/use-size.spec.js

@@ -1,6 +1,6 @@
-import QAvatar from './../../../components/avatar/QAvatar'
+import QAvatar from './../../../components/avatar/QAvatar.js'
 import { mount } from '@cypress/vue'
-import { useSizeDefaults } from './../use-size'
+import { useSizeDefaults } from './../use-size.js'
 
 describe('use-size API', () => {
   describe('Props', () => {

package/src/composables/private/__tests__/use-transition.spec.js

@@ -16,7 +16,7 @@ describe('use-transition API', () => {
         it('should use a different show transition if defined', () => {
           const transition = 'scale'
           mount(WrapperOne, {
-            attrs: {
+            props: {
               transitionShow: transition
             }
           })
@@ -43,7 +43,7 @@ describe('use-transition API', () => {
         it('should use a different hide transition if defined', () => {
           const transition = 'scale'
           mount(WrapperOne, {
-            attrs: {
+            props: {
               transitionHide: transition
             }
           })
@@ -64,7 +64,7 @@ describe('use-transition API', () => {
           cy.dataCy('wrapper')
             .click()
             .wait(300)
-          cy.dataCy('menu', { timeout: 0 }) // Disable retry
+          cy.dataCy('menu', { timeout: 350 })
             .should('not.have.class', 'q-transition--fade-enter-active')
         })
 
@@ -79,7 +79,7 @@ describe('use-transition API', () => {
 
         it('should be done after a custom 1000ms passed', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               transitionDuration: 1000
             }
           })
@@ -92,7 +92,7 @@ describe('use-transition API', () => {
 
         it('should not be done before a custom 1000ms passed', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               transitionDuration: 1000
             }
           })

package/src/composables/private/__tests__/use-validate.spec.js

@@ -1,6 +1,6 @@
 import { mount } from '@cypress/vue'
 import FieldWrapper from './FieldWrapper.vue'
-import Icons from './../../../../icon-set/material-icons'
+import Icons from './../../../../icon-set/material-icons.mjs'
 
 // const snapshotOptions = { customSnapshotsDir: '../__tests__' }
 
@@ -37,7 +37,7 @@ describe('use-validate API', () => {
         it('should show an error-message when error is true', () => {
           const message = 'Please select something'
           mount(FieldWrapper, {
-            attrs: {
+            props: {
               error: true,
               errorMessage: message
             }
@@ -49,7 +49,7 @@ describe('use-validate API', () => {
         it('should not show an error-message when error is false', () => {
           const message = 'Please select something'
           mount(FieldWrapper, {
-            attrs: {
+            props: {
               error: false,
               errorMessage: message
             }
@@ -62,7 +62,7 @@ describe('use-validate API', () => {
       describe('(prop): no-error-icon', () => {
         it('should not show an error icon when error is true', () => {
           mount(FieldWrapper, {
-            attrs: {
+            props: {
               error: true,
               noErrorIcon: true
             }
@@ -74,7 +74,7 @@ describe('use-validate API', () => {
 
         it('should show an error icon when error is true an no-error-icon is false', () => {
           mount(FieldWrapper, {
-            attrs: {
+            props: {
               error: true,
               noErrorIcon: false
             }

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

@@ -137,7 +137,7 @@ export default function ({
   }
 
   function pickAnchorEl () {
-    if (props.target === false || props.target === '') {
+    if (props.target === false || props.target === '' || proxy.$el.parentNode === null) {
       anchorEl.value = null
     }
     else if (props.target === true) {

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

@@ -445,6 +445,7 @@ export default function (state) {
         h('div', {
           ref: state.targetRef,
           class: 'q-field__native row',
+          tabindex: -1,
           ...state.splitAttrs.attributes.value,
           'data-autofocus': props.autofocus === true || void 0
         }, slots.control(controlSlotScope.value))
@@ -555,7 +556,7 @@ export default function (state) {
     const labelAttrs = state.getControl === void 0 && slots.control === void 0
       ? {
           ...state.splitAttrs.attributes.value,
-          'data-autofocus': props.autofocus,
+          'data-autofocus': props.autofocus === true || void 0,
           ...attributes.value
         }
       : attributes.value

package/src/composables/private/use-key-composition.js

@@ -1,26 +1,29 @@
+import { client } from '../../plugins/Platform.js'
+
 const isJapanese = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf]/
 const isChinese = /[\u4e00-\u9fff\u3400-\u4dbf\u{20000}-\u{2a6df}\u{2a700}-\u{2b73f}\u{2b740}-\u{2b81f}\u{2b820}-\u{2ceaf}\uf900-\ufaff\u3300-\u33ff\ufe30-\ufe4f\uf900-\ufaff\u{2f800}-\u{2fa1f}]/u
 const isKorean = /[\u3131-\u314e\u314f-\u3163\uac00-\ud7a3]/
+const isPlainText = /[a-z0-9_ -]$/i
 
 export default function (onInput) {
   return function onComposition (e) {
     if (e.type === 'compositionend' || e.type === 'change') {
-      if (e.target.composing !== true) { return }
-      e.target.composing = false
+      if (e.target.qComposing !== true) { return }
+      e.target.qComposing = false
       onInput(e)
     }
-    else if (e.type === 'compositionupdate') {
-      if (
-        typeof e.data === 'string'
-        && isJapanese.test(e.data) === false
-        && isChinese.test(e.data) === false
-        && isKorean.test(e.data) === false
-      ) {
-        e.target.composing = false
+    else if (
+      e.type === 'compositionupdate'
+      && e.target.qComposing !== true
+      && typeof e.data === 'string'
+    ) {
+      const isComposing = client.is.firefox === true
+        ? isPlainText.test(e.data) === false
+        : isJapanese.test(e.data) === true || isChinese.test(e.data) === true || isKorean.test(e.data) === true
+
+      if (isComposing === true) {
+        e.target.qComposing = true
       }
     }
-    else {
-      e.target.composing = true
-    }
   }
 }

package/src/directives/Ripple.js

@@ -87,11 +87,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
             if (
               ctx.enabled === true
               && evt.qSkipRipple !== true
-              && (
-                ctx.modifiers.early === true
-                  ? [ 'mousedown', 'touchstart' ].includes(evt.type) === true
-                  : evt.type === 'click'
-              )
+              && evt.type === (ctx.modifiers.early === true ? 'pointerdown' : 'click')
             ) {
               showRipple(evt, el, ctx, evt.qKeyEvent === true)
             }
@@ -114,8 +110,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
         el.__qripple = ctx
 
         addEvt(ctx, 'main', [
-          [ el, 'mousedown', 'start', 'passive' ],
-          [ el, 'touchstart', 'start', 'passive' ],
+          [ el, 'pointerdown', 'start', 'passive' ],
           [ el, 'click', 'start', 'passive' ],
           [ el, 'keydown', 'keystart', 'passive' ],
           [ el, 'keyup', 'keystart', 'passive' ]

package/src/utils/date.js

@@ -308,7 +308,7 @@ export function extractDate (str, mask, dateLocale) {
   const date = new Date(
     d.year,
     d.month === null ? null : d.month - 1,
-    d.day,
+    d.day === null ? 1 : d.day,
     d.hour,
     d.minute,
     d.second,

package/src/utils/private/global-dialog.js

@@ -59,19 +59,31 @@ export default function (DefaultComponent, supportsCustomComponent, parentApp) {
     const applyState = cmd => {
       if (dialogRef.value !== null && dialogRef.value[ cmd ] !== void 0) {
         dialogRef.value[ cmd ]()
+        return
       }
-      else if (
+
+      const target = vm.$.subTree
+
+      if (target && target.component) {
         // account for "script setup" way of declaring component
-        vm.$.subTree
-        && vm.$.subTree.component
-        && vm.$.subTree.component.proxy
-        && vm.$.subTree.component.proxy[ cmd ]
-      ) {
-        vm.$.subTree.component.proxy[ cmd ]()
-      }
-      else {
-        console.error('[Quasar] Incorrectly defined Dialog component')
+        if (target.component.proxy && target.component.proxy[ cmd ]) {
+          target.component.proxy[ cmd ]()
+          return
+        }
+
+        // account for "script setup" + async component way of declaring component
+        if (
+          target.component.subTree &&
+          target.component.subTree.component &&
+          target.component.subTree.component.proxy &&
+          target.component.subTree.component.proxy[ cmd ]
+        ) {
+          target.component.subTree.component.proxy[ cmd ]()
+          return
+        }
       }
+
+      console.error('[Quasar] Incorrectly defined Dialog component')
     }
 
     const