quasar 2.7.1 → 2.7.4

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.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/timeline/QTimeline.sass

@@ -60,6 +60,10 @@
       line-height: 38px
       width: 100%
       color: #fff
+      > svg,
+      > img
+        width: 1em
+        height: 1em
 
   &__dot-img
     position: absolute

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(() =>

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

@@ -20,7 +20,12 @@ const filterProto = Array.prototype.filter
 const setOverflowAnchor = __QUASAR_SSR__ || window.getComputedStyle(document.body).overflowAnchor === void 0
   ? noop
   : function (contentEl, index) {
-    requestAnimationFrame(() => {
+    if (contentEl === null) {
+      return
+    }
+
+    cancelAnimationFrame(contentEl._qOverflowAnimationFrame)
+    contentEl._qOverflowAnimationFrame = requestAnimationFrame(() => {
       if (contentEl === null) {
         return
       }

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
           }
         })

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

@@ -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

@@ -556,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

@@ -12,22 +12,18 @@ export default function (onInput) {
       e.target.qComposing = false
       onInput(e)
     }
-    else if (e.type === 'compositionupdate') {
-      if (
-        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
+    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
-        }
+      if (isComposing === true) {
+        e.target.qComposing = true
       }
     }
-    else {
-      e.target.qComposing = true
-    }
   }
 }

package/src/directives/Ripple.js

@@ -61,8 +61,8 @@ function showRipple (evt, el, ctx, forceCenter) {
   }, 50)
 }
 
-function updateModifiers (ctx, { modifiers, value, arg, instance }) {
-  const cfg = Object.assign({}, instance.$q.config.ripple, modifiers, value)
+function updateModifiers (ctx, { modifiers, value, arg }) {
+  const cfg = Object.assign({}, ctx.cfg.ripple, modifiers, value)
   ctx.modifiers = {
     early: cfg.early === true,
     stop: cfg.stop === true,
@@ -79,6 +79,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
 
       beforeMount (el, binding) {
         const ctx = {
+          cfg: binding.instance.$.appContext.config.globalProperties.$q.config,
           enabled: binding.value !== false,
           modifiers: {},
           abort: [],
@@ -87,11 +88,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 +111,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,
@@ -737,7 +737,7 @@ const formatter = {
   YY (date, dateLocale, forcedYear) {
     // workaround for < 1900 with new Date()
     const y = this.YYYY(date, dateLocale, forcedYear) % 100
-    return y > 0
+    return y >= 0
       ? pad(y)
       : '-' + pad(Math.abs(y))
   },

package/src/components/select/__tests__/WrapperOne.vue

@@ -1,28 +0,0 @@
-<template>
-  <div style="margin: 150px auto" class="row justify-center" data-cy="wrapper">
-    <q-select
-      data-cy="select"
-      class="select-root"
-      ref="compRef"
-      v-bind="$attrs"
-      style="min-width: 300px"
-    >
-      <template v-for="(_, slot) in $slots" v-slot:[slot]="scope">
-        <slot :name="slot" v-bind="{ ...scope }" />
-      </template>
-    </q-select>
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  inheritAttrs: false,
-  setup () {
-    const compRef = ref(null)
-
-    return { compRef }
-  }
-})
-</script>