quasar 2.4.10 → 2.5.0

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

@@ -0,0 +1,306 @@
+/* eslint-disable no-unused-expressions */
+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'
+
+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)
+          mount(WrapperOne, {
+            attrs: {
+              modelValue
+            }
+          })
+          cy.dataCy('wrapper')
+          cy.dataCy('menu')
+            .should('not.exist')
+            .then(() => {
+              modelValue.value = true
+              cy.dataCy('menu')
+                .should('exist')
+            })
+        })
+
+        it('should close the dialog when modifying the model-value', () => {
+          const modelValue = ref(true)
+          mount(WrapperOne, {
+            attrs: {
+              modelValue
+            }
+          })
+          cy.dataCy('wrapper')
+          cy.dataCy('menu')
+            .should('exist')
+            .then(() => {
+              modelValue.value = false
+              cy.dataCy('menu')
+                .should('not.exist')
+            })
+        })
+      })
+    })
+  })
+
+  describe('Events', () => {
+    describe('(event): update:model-value', () => {
+      it('should emit @update:model-value event when state changes', () => {
+        const fn = cy.stub()
+        mount(WrapperOne, {
+          attrs: {
+            'onUpdate:modelValue': fn
+          }
+        })
+
+        expect(fn).not.to.be.called
+        cy.dataCy('wrapper')
+          .click()
+        cy.dataCy('menu')
+          .should('exist')
+          .then(() => {
+            expect(fn).to.be.called
+          })
+      })
+    })
+
+    describe('(event): show', () => {
+      it('should emit @show event when menu is triggered by parent', () => {
+        const fn = cy.stub()
+        mount(WrapperOne, {
+          attrs: {
+            onShow: fn
+          }
+        })
+
+        expect(fn).not.to.be.called
+        cy.dataCy('wrapper')
+          .click()
+        cy.dataCy('menu')
+          .should('exist')
+          .wait(300) // Await menu animation
+          .then(() => {
+            expect(fn).to.be.called
+          })
+      })
+
+      it('should emit @show event when component is triggered with the show() method', () => {
+        const fn = cy.stub()
+        mount(WrapperOne, {
+          attrs: {
+            onShow: fn
+          }
+        })
+
+        expect(fn).not.to.be.called
+        cy.dataCy('wrapper')
+        cy.dataCy('method-show')
+          .click({ force: true }) // Element is hidden to prevent clogging the window
+        cy.dataCy('menu')
+          .should('exist')
+          .wait(300) // Await menu animation
+          .then(() => {
+            expect(fn).to.be.called
+          })
+      })
+    })
+
+    describe('(event): before-show', () => {
+      it('should emit @before-show event when menu is triggered by parent', () => {
+        const fn = cy.stub()
+        mount(WrapperOne, {
+          attrs: {
+            onBeforeShow: fn
+          }
+        })
+
+        expect(fn).not.to.be.called
+        cy.dataCy('wrapper')
+          .click()
+        cy.dataCy('menu')
+          .should('exist')
+          .then(() => {
+            expect(fn).to.be.called
+          })
+      })
+
+      it('should emit @before-show event when component is triggered with the show() method', () => {
+        const fn = cy.stub()
+        mount(WrapperOne, {
+          attrs: {
+            onBeforeShow: fn
+          }
+        })
+
+        expect(fn).not.to.be.called
+        cy.dataCy('wrapper')
+        cy.dataCy('method-show')
+          .click({ force: true }) // Element is hidden to prevent clogging the window
+        cy.dataCy('menu')
+          .should('exist')
+          .then(() => {
+            expect(fn).to.be.called
+          })
+      })
+    })
+
+    describe('(event): hide', () => {
+      it('should emit @hide event when menu is triggered by parent', () => {
+        const fn = cy.stub()
+        mount(WrapperOne, {
+          attrs: {
+            onHide: fn
+          }
+        })
+
+        expect(fn).not.to.be.called
+        cy.dataCy('wrapper')
+          .click()
+        cy.dataCy('menu')
+          .should('exist')
+          .then(() => {
+            expect(fn).not.to.be.called
+          })
+        cy.get('body')
+          .click(499, 0)
+        cy.dataCy('menu')
+          .should('not.exist')
+          .then(() => {
+            expect(fn).to.be.called
+          })
+      })
+
+      it('should emit @hide event when component is triggered with the show() method', () => {
+        const fn = cy.stub()
+        mount(WrapperOne, {
+          attrs: {
+            onHide: fn
+          }
+        })
+
+        expect(fn).not.to.be.called
+        cy.dataCy('wrapper')
+        cy.dataCy('method-show')
+          .click({ force: true }) // Element is hidden to prevent clogging the window
+        cy.dataCy('menu')
+          .should('exist')
+          .then(() => {
+            expect(fn).not.to.be.called
+          })
+        cy.dataCy('method-hide')
+          .click({ force: true })
+        cy.dataCy('menu')
+          .should('not.exist') // Element is hidden to prevent clogging the window
+          .then(() => {
+            expect(fn).to.be.called
+          })
+      })
+    })
+
+    describe('(event): before-hide', () => {
+      it('should emit @before-hide event when menu is triggered by parent', () => {
+        const fn = cy.stub()
+        mount(WrapperOne, {
+          attrs: {
+            onBeforeHide: fn
+          }
+        })
+
+        expect(fn).not.to.be.called
+        cy.dataCy('wrapper')
+          .click()
+        cy.dataCy('menu')
+          .should('exist')
+          .then(() => {
+            expect(fn).not.to.be.called
+          })
+        cy.get('body')
+          .click(499, 0)
+          .then(() => {
+            expect(fn).to.be.called
+          })
+        cy.dataCy('menu')
+          .should('not.exist')
+      })
+
+      it('should emit @before-hide event when component is triggered with the show() method', () => {
+        const fn = cy.stub()
+        mount(WrapperOne, {
+          attrs: {
+            onBeforeHide: fn
+          }
+        })
+
+        expect(fn).not.to.be.called
+        cy.dataCy('wrapper')
+        cy.dataCy('method-show')
+          .click({ force: true }) // Element is hidden to prevent clogging the window
+        cy.dataCy('menu')
+          .should('exist')
+          .then(() => {
+            expect(fn).not.to.be.called
+          })
+        cy.dataCy('method-hide')
+          .click({ force: true })
+          .then(() => {
+            expect(fn).to.be.called
+          })
+        cy.dataCy('menu')
+          .should('not.exist')
+      })
+    })
+  })
+
+  describe('Methods', () => {
+    describe('(method): show', () => {
+      it('should tigger the menu to show', () => {
+        mount(WrapperOne)
+
+        cy.dataCy('wrapper')
+        cy.dataCy('method-show')
+          .click({ force: true })
+        cy.dataCy('menu')
+          .should('exist')
+      })
+    })
+
+    describe('(method): hide', () => {
+      it('should tigger the menu to hide', () => {
+        mount(WrapperOne)
+
+        cy.dataCy('wrapper')
+          .click()
+        cy.dataCy('menu')
+          .should('exist')
+        cy.dataCy('method-hide')
+          .click({ force: true })
+        cy.dataCy('menu')
+          .should('not.exist')
+      })
+    })
+
+    describe('(method): toggle', () => {
+      it('should toggle the menu', () => {
+        mount(WrapperTwo)
+
+        cy.dataCy('wrapper')
+          .then(() => {
+            // Need to call method from wrapper
+            // Click a button closes the menu
+            Cypress.vueWrapper.vm.toggle()
+          })
+        cy.dataCy('menu')
+          .should('exist')
+          .then(() => {
+            // Need to call method from wrapper
+            // Click a button closes the menu
+            Cypress.vueWrapper.vm.toggle()
+          })
+        cy.dataCy('menu')
+          .should('not.exist')
+      })
+    })
+  })
+})

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

@@ -0,0 +1,4 @@
+describe('use-portal API', () => {
+  describe('Props', () => {
+  })
+})

package/src/composables/private/__tests__/use-router-link.spec.js

@@ -0,0 +1,55 @@
+describe('use-router-link API', () => {
+  describe('Props', () => {
+    describe('Category: navigation', () => {
+      describe('(prop): to', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): exact', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): replace', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): active-class', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): exact-active-class', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): href', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): target', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: state', () => {
+      describe('(prop): disable', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+  })
+})

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

@@ -0,0 +1,37 @@
+import QAvatar from './../../../components/avatar/QAvatar'
+import { mount } from '@cypress/vue'
+import { useSizeDefaults } from './../use-size'
+
+describe('use-size API', () => {
+  describe('Props', () => {
+    describe('Category: style', () => {
+      describe('(prop): size', () => {
+        it('should set the size', () => {
+          const size = '24px'
+          mount(QAvatar, {
+            props: {
+              size,
+              color: 'grey'
+            }
+          })
+
+          cy.get('.q-avatar')
+            .should('have.css', 'font-size', size)
+        })
+
+        it('should set the size with standard size names', () => {
+          const size = 'sm'
+          mount(QAvatar, {
+            props: {
+              size,
+              color: 'grey'
+            }
+          })
+
+          cy.get('.q-avatar')
+            .should('have.css', 'font-size', `${ useSizeDefaults.sm }px`)
+        })
+      })
+    })
+  })
+})

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

@@ -0,0 +1,108 @@
+import { mount } from '@cypress/vue'
+import WrapperOne from './../../../components/menu/__tests__/WrapperOne.vue'
+
+describe('use-transition API', () => {
+  describe('Props', () => {
+    describe('Category: transition', () => {
+      describe('(prop): transition-show', () => {
+        it('should use the fade transition by default', () => {
+          mount(WrapperOne)
+          cy.dataCy('wrapper')
+            .click()
+          cy.dataCy('menu', { timeout: 0 }) // Disable retry
+            .should('have.class', 'q-transition--fade-enter-active')
+        })
+
+        it('should use a different show transtion if defined', () => {
+          const transition = 'scale'
+          mount(WrapperOne, {
+            attrs: {
+              transitionShow: transition
+            }
+          })
+          cy.dataCy('wrapper')
+            .click()
+          cy.dataCy('menu', { timeout: 0 }) // Disable retry
+            .should('have.class', `q-transition--${ transition }-enter-active`)
+        })
+      })
+
+      describe('(prop): transition-hide', () => {
+        it('should use the fade transition by default', () => {
+          mount(WrapperOne)
+          cy.dataCy('wrapper')
+            .click()
+          cy.dataCy('menu')
+            .should('exist')
+          cy.get('body')
+            .type('{esc}')
+          cy.dataCy('menu', { timeout: 0 }) // Disable retry
+            .should('have.class', 'q-transition--fade-leave-active')
+        })
+
+        it('should use a different hide transtion if defined', () => {
+          const transition = 'scale'
+          mount(WrapperOne, {
+            attrs: {
+              transitionHide: transition
+            }
+          })
+          cy.dataCy('wrapper')
+            .click()
+          cy.dataCy('menu')
+            .should('exist')
+          cy.get('body')
+            .type('{esc}')
+          cy.dataCy('menu', { timeout: 0 }) // Disable retry
+            .should('have.class', `q-transition--${ transition }-leave-active`)
+        })
+      })
+
+      describe('(prop): transition-duration', () => {
+        it('should be done with transitioning after 300ms passed', () => {
+          mount(WrapperOne)
+          cy.dataCy('wrapper')
+            .click()
+            .wait(300)
+          cy.dataCy('menu', { timeout: 0 }) // Disable retry
+            .should('not.have.class', 'q-transition--fade-enter-active')
+        })
+
+        it('should not be done with transitioning before 300ms passed', () => {
+          mount(WrapperOne)
+          cy.dataCy('wrapper')
+            .click()
+            .wait(200) // Commands take some time so a high value can fail, just take a decent margin
+          cy.dataCy('menu', { timeout: 0 }) // Disable retry
+            .should('have.class', 'q-transition--fade-enter-active')
+        })
+
+        it('should be done after a custom 1000ms passed', () => {
+          mount(WrapperOne, {
+            attrs: {
+              transitionDuration: 1000
+            }
+          })
+          cy.dataCy('wrapper')
+            .click()
+            .wait(1000)
+          cy.dataCy('menu', { timeout: 0 }) // Disable retry
+            .should('not.have.class', 'q-transition--fade-enter-active')
+        })
+
+        it('should not be done before a custom 1000ms passed', () => {
+          mount(WrapperOne, {
+            attrs: {
+              transitionDuration: 1000
+            }
+          })
+          cy.dataCy('wrapper')
+            .click()
+            .wait(900)
+          cy.dataCy('menu', { timeout: 0 }) // Disable retry
+            .should('have.class', 'q-transition--fade-enter-active')
+        })
+      })
+    })
+  })
+})

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

@@ -0,0 +1,111 @@
+import { mount } from '@cypress/vue'
+import FieldWrapper from './FieldWrapper.vue'
+import Icons from './../../../../icon-set/material-icons'
+
+// const snapshotOptions = { customSnapshotsDir: '../__tests__' }
+
+describe('use-validate API', () => {
+  describe('Props', () => {
+    describe('Category: behavior', () => {
+      describe('(prop): error', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): rules', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): reactive-rules', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): lazy-rules', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: content', () => {
+      describe('(prop): error-message', () => {
+        it('should show an error-message when error is true', () => {
+          const message = 'Please select something'
+          mount(FieldWrapper, {
+            attrs: {
+              error: true,
+              errorMessage: message
+            }
+          })
+          cy.get('.select-root')
+            .should('include.text', message)
+        })
+
+        it('should not show an error-message when error is false', () => {
+          const message = 'Please select something'
+          mount(FieldWrapper, {
+            attrs: {
+              error: false,
+              errorMessage: message
+            }
+          })
+          cy.get('.select-root')
+            .should('not.include.text', message)
+        })
+      })
+
+      describe('(prop): no-error-icon', () => {
+        it('should not show an error icon when error is true', () => {
+          mount(FieldWrapper, {
+            attrs: {
+              error: true,
+              noErrorIcon: true
+            }
+          })
+          cy.get('.select-root')
+            .get(`i:contains(${ Icons.field.error })`)
+            .should('not.exist')
+        })
+
+        it('should show an error icon when error is true an no-error-icon is false', () => {
+          mount(FieldWrapper, {
+            attrs: {
+              error: true,
+              noErrorIcon: false
+            }
+          })
+          cy.get('.select-root')
+            .get(`i:contains(${ Icons.field.error })`)
+            .should('exist')
+        })
+      })
+    })
+
+    describe('Category: model', () => {
+      describe('(prop): model-value', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+  })
+
+  describe('Methods', () => {
+    describe('(method): resetValidation', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(method): validate', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+})

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

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, Transition, nextTick, onBeforeUnmount, onMounted, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, Transition, nextTick, onActivated, onDeactivated, onBeforeUnmount, onMounted, getCurrentInstance } from 'vue'
 
 import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
 
@@ -270,7 +270,7 @@ export default function (state) {
     if (target && (el === null || el.id !== state.targetUid.value)) {
       target.hasAttribute('tabindex') === true || (target = target.querySelector('[tabindex]'))
       if (target && target !== el) {
-        target.focus()
+        target.focus({ preventScroll: true })
       }
     }
   }
@@ -288,6 +288,7 @@ export default function (state) {
   }
 
   function onControlFocusin (e) {
+    clearTimeout(focusoutTimer)
     if (state.editable.value === true && state.focused.value === false) {
       state.focused.value = true
       emit('focus', e)
@@ -300,13 +301,9 @@ export default function (state) {
       if (
         document.hasFocus() === true && (
           state.hasPopupOpen === true
-          || (
-            state.controlRef !== void 0
-            && (
-              state.controlRef.value === null
-              || state.controlRef.value.contains(document.activeElement) !== false
-            )
-          )
+          || state.controlRef === void 0
+          || state.controlRef.value === null
+          || state.controlRef.value.contains(document.activeElement) !== false
         )
       ) {
         return
@@ -532,6 +529,16 @@ export default function (state) {
   // expose public methods
   Object.assign(proxy, { focus, blur })
 
+  let shouldActivate = false
+
+  onDeactivated(() => {
+    shouldActivate = true
+  })
+
+  onActivated(() => {
+    shouldActivate === true && props.autofocus === true && proxy.focus()
+  })
+
   onMounted(() => {
     if (isRuntimeSsrPreHydration.value === true && props.for === void 0) {
       state.targetUid.value = getTargetUid()

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

@@ -19,7 +19,7 @@ export default function () {
   let historyEntry, fullscreenFillerNode, container
   const inFullscreen = ref(false)
 
-  vmHasRouter(vm) === true && watch(() => proxy.$route, () => {
+  vmHasRouter(vm) === true && watch(() => proxy.$route.fullPath, () => {
     props.noRouteFullscreenExit !== true && exitFullscreen()
   })
 

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

@@ -136,7 +136,7 @@ export default function ({
   watch(() => props.modelValue, processModelChange)
 
   if (hideOnRouteChange !== void 0 && vmHasRouter(vm) === true) {
-    watch(() => proxy.$route, () => {
+    watch(() => proxy.$route.fullPath, () => {
       if (hideOnRouteChange.value === true && showing.value === true) {
         hide()
       }