quasar 2.15.1 → 2.15.2

package/src/components/date/QDate.json

@@ -11,44 +11,44 @@
       "type": [ "String", "Array", "Object", "null", "undefined" ],
       "desc": "Date(s) of the component; Must be Array if using 'multiple' prop; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive",
       "examples": [
-        "v-model=\"myDate\"",
-        "v-model=\"[myDate1, myDate2]\"",
-        "v-model=\"[{ from: myDateFrom, to: myDateTo }]\"",
-        "v-model=\"[myDate1, { from: myDateFrom, to: myDateTo }, myDate2]\""
+        "# v-model=\"myDate\"",
+        "# v-model=\"[myDate1, myDate2]\"",
+        "# v-model=\"[{ from: myDateFrom, to: myDateTo }]\"",
+        "# v-model=\"[myDate1, { from: myDateFrom, to: myDateTo }, myDate2]\""
       ]
     },
 
     "title": {
       "type": "String",
       "desc": "When specified, it overrides the default header title; Makes sense when not in 'minimal' mode",
-      "examples": [ "Birthday" ],
+      "examples": [ "'Birthday'" ],
       "category": "content"
     },
 
     "subtitle": {
       "type": "String",
       "desc": "When specified, it overrides the default header subtitle; Makes sense when not in 'minimal' mode",
-      "examples": [ "John Doe" ],
+      "examples": [ "'John Doe'" ],
       "category": "content"
     },
 
     "default-year-month": {
       "type": "String",
       "desc": "The default year and month to display (in YYYY/MM format) when model is unfilled (undefined or null); Please ensure it is within the navigation min/max year-month (if using them)",
-      "examples": [ "1986/02" ],
+      "examples": [ "'1986/02'" ],
       "category": "model"
     },
 
     "mask": {
-      "default": "YYYY/MM/DD",
-      "examples": [ "YYYY-MM-DD", "MMMM Do, YYYY", "YYYY-MM-DD HH:mm:ss" ]
+      "default": "'YYYY/MM/DD'",
+      "examples": [ "'YYYY-MM-DD'", "'MMMM Do, YYYY'", "'YYYY-MM-DD HH:mm:ss'" ]
     },
 
     "default-view": {
       "type": "String",
       "desc": "The view which will be displayed by default",
-      "default": "Calendar",
-      "values": [ "Calendar", "Months", "Years" ],
+      "default": "'Calendar'",
+      "values": [ "'Calendar'", "'Months'", "'Years'" ],
       "category": "model"
     },
 
@@ -65,7 +65,7 @@
         "date": {
           "type": "String",
           "desc": "The current date being processed.",
-          "examples": [ "2018/11/05", "2021/10/25" ]
+          "examples": [ "'2018/11/05'", "'2021/10/25'" ]
         }
       },
       "returns": {
@@ -73,8 +73,8 @@
         "desc": "If true, the current date will be highlighted"
       },
       "examples": [
-        ":events=\"['2018/11/05', '2018/11/06', '2018/11/09', '2018/11/23']\"",
-        ":events=\"date => date[9] % 3 === 0\""
+        "['2018/11/05', '2018/11/06', '2018/11/09', '2018/11/23']",
+        "date => date[9] % 3 === 0"
       ],
       "category": "model"
     },
@@ -86,17 +86,17 @@
         "date": {
           "type": "String",
           "desc": "The current date being processed.",
-          "examples": [ "2018/11/05", "2021/10/25" ]
+          "examples": [ "'2018/11/05'", "'2021/10/25'" ]
         }
       },
       "returns": {
         "type": "String",
         "desc": "Color for the current date.",
-        "examples": [ "teal", "orange" ]
+        "examples": [ "'teal'", "'orange'" ]
       },
       "examples": [
-        "teal-10",
-        ":event-color=\"(date) => date[9] % 2 === 0 ? 'teal' : 'orange'\""
+        "'teal-10'",
+        "(date) => date[9] % 2 === 0 ? 'teal' : 'orange'"
       ],
       "category": "style"
     },
@@ -108,7 +108,7 @@
         "date": {
           "type": "String",
           "desc": "The current date being processed.",
-          "examples": [ "2018/11/05", "2021/10/25" ]
+          "examples": [ "'2018/11/05'", "'2021/10/25'" ]
         }
       },
       "returns": {
@@ -116,9 +116,9 @@
         "desc": "If true, the current date will be made available for selection"
       },
       "examples": [
-        ":options=\"['2018/11/05', '2018/11/12', '2018/11/19', '2018/11/26' ]\"",
-        ":options=\"date => date[9] % 3 === 0\"",
-        ":options=\"date => date >= '2018/11/03' && date <= '2018/11/15'\""
+        "['2018/11/05', '2018/11/12', '2018/11/19', '2018/11/26' ]",
+        "date => date[9] % 3 === 0",
+        "date => date >= '2018/11/03' && date <= '2018/11/15'"
       ],
       "category": "model"
     },
@@ -126,14 +126,14 @@
     "navigation-min-year-month": {
       "type": "String",
       "desc": "Lock user from navigating below a specific year+month (in YYYY/MM format); This prop is not used to correct the model; You might want to also use 'default-year-month' prop",
-      "examples": [ "2020/07" ],
+      "examples": [ "'2020/07'" ],
       "category": "selection"
     },
 
     "navigation-max-year-month": {
       "type": "String",
       "desc": "Lock user from navigating above a specific year+month (in YYYY/MM format); This prop is not used to correct the model; You might want to also use 'default-year-month' prop",
-      "examples": [ "2020/10" ],
+      "examples": [ "'2020/10'" ],
       "category": "selection"
     },
 
@@ -146,10 +146,11 @@
     "first-day-of-week": {
       "type": [ "String", "Number" ],
       "desc": "Sets the day of the week that is considered the first day (0 - Sunday, 1 - Monday, ...); This day will show in the left-most column of the calendar",
-      "default": "(based on configured Quasar lang language)",
+      "default": "# based on configured Quasar lang language",
       "examples": [
-        "first-day-of-week=\"1\"",
-        ":first-day-of-week=\"selectedFirstDayOfTheWeek\""
+        "1",
+        "# first-day-of-week=\"1\"",
+        "# :first-day-of-week=\"selectedFirstDayOfTheWeek\""
       ],
       "category": "model"
     },
@@ -201,7 +202,7 @@
         "reason": {
           "type": "String",
           "desc": "Reason of the user interaction (what was picked)",
-          "values": [ "add-day", "remove-day", "add-range", "remove-range", "mask", "locale", "year", "month" ]
+          "values": [ "'add-day'", "'remove-day'", "'add-range'", "'remove-range'", "'mask'", "'locale'", "'year'", "'month'" ]
         },
         "details": {
           "type": "Object",
@@ -389,7 +390,7 @@
           "type": "String",
           "required": true,
           "desc": "QDate view name",
-          "values": [ "Calendar", "Months", "Years" ]
+          "values": [ "'Calendar'", "'Months'", "'Years'" ]
         }
       }
     },
@@ -401,7 +402,7 @@
           "type": "String",
           "required": true,
           "desc": "What to increment/decrement",
-          "values": [ "month", "year" ]
+          "values": [ "'month'", "'year'" ]
         },
         "descending": {
           "type": "Boolean",

package/src/components/date/use-datetime.json

@@ -17,7 +17,7 @@
     "locale": {
       "type": "Object",
       "desc": "Locale formatting options",
-      "examples": [ ":locale=\"{ monthsShort: ['Ian', 'Feb', 'Mar', '...'] }\"" ],
+      "examples": [ "{ monthsShort: ['Ian', 'Feb', 'Mar', '...'] }" ],
       "definition": {
         "days": {
           "type": "Array",
@@ -46,8 +46,8 @@
     "calendar": {
       "type": "String",
       "desc": "Specify calendar type",
-      "default": "gregorian",
-      "values": [ "gregorian", "persian" ],
+      "default": "'gregorian'",
+      "values": [ "'gregorian'", "'persian'" ],
       "category": "model"
     },
 

package/src/components/dialog/QDialog.json

@@ -46,16 +46,16 @@
       "type": "String",
       "desc": "Apply a backdrop filter; The value needs to be the same as in the CSS specs for backdrop-filter; The examples are not an exhaustive list",
       "examples": [
-        "blur(4px)",
-        "blur(4px) saturate(150%)",
-        "brightness(60%)",
-        "invert(70%)",
-        "grayscale(100%)",
-        "contrast(40%)",
-        "hue-rotate(120deg)",
-        "sepia(90%)",
-        "saturate(80%)",
-        "none"
+        "'blur(4px)'",
+        "'blur(4px) saturate(150%)'",
+        "'brightness(60%)'",
+        "'invert(70%)'",
+        "'grayscale(100%)'",
+        "'contrast(40%)'",
+        "'hue-rotate(120deg)'",
+        "'sepia(90%)'",
+        "'saturate(80%)'",
+        "'none'"
       ],
       "category": "style",
       "addedIn": "v2.15"
@@ -82,8 +82,8 @@
     "position": {
       "type": "String",
       "desc": "Stick dialog to one of the sides (top, right, bottom or left)",
-      "default": "standard",
-      "values": [ "standard", "top", "right", "bottom", "left" ],
+      "default": "'standard'",
+      "values": [ "'standard'", "'top'", "'right'", "'bottom'", "'left'" ],
       "category": "content"
     },
 
@@ -138,7 +138,7 @@
           "type": "String",
           "required": false,
           "desc": "Optional CSS selector to override default focusable element",
-          "examples": [ "[tabindex]:not([tabindex=\"-1\"])" ],
+          "examples": [ "'[tabindex]:not([tabindex=\"-1\"])'" ],
           "addedIn": "v2.6.5"
         }
       }

package/src/components/dialog/QDialog.test.js

@@ -0,0 +1,390 @@
+import { mount } from '@vue/test-utils'
+import { describe, test, expect, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import { timeToPass } from 'test/runtime.utils.js'
+import QDialog from './QDialog.js'
+import DialogWrapper from './test/DialogWrapper.vue'
+
+function mountDialog (props = {}) {
+  const wrapper = mount(DialogWrapper, {
+    props: {
+      modelValue: false,
+      'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
+      transitionDuration: 0,
+      ...props
+    }
+  })
+
+  const getDialog = () => wrapper.findComponent({ name: 'QDialog' })
+  const getPortal = () => wrapper.findComponent({ name: 'QPortal' })
+
+  return {
+    wrapper,
+
+    getDialog,
+    getPortal,
+
+    setProps: props => {
+      wrapper.setProps(props)
+      return nextTick()
+    },
+
+    isMounted: () => {
+      const portal = getPortal()
+      if (portal.exists() === false) return false
+      return document.body.contains(portal.element)
+    },
+
+    show: () => {
+      wrapper.setProps({ modelValue: true })
+      return vi.waitUntil(
+        () => getPortal().exists(),
+        {
+          timeout: 150, // default is 1000
+          interval: 5 // default is 50
+        }
+      )
+    },
+
+    hide: () => {
+      wrapper.setProps({ modelValue: false })
+      return vi.waitUntil(
+        () => getPortal().exists() === false,
+        {
+          timeout: 150, // default is 1000
+          interval: 5 // default is 50
+        }
+      )
+    },
+
+    waitForEvent: eventName => {
+      const dlg = getDialog()
+      const evtLen = 1 + (
+        dlg.emitted()[ eventName ]?.length
+        || 0
+      )
+
+      return vi.waitUntil(
+        () => (dlg.emitted()[ eventName ]?.length === evtLen),
+        {
+          timeout: 150, // default is 1000
+          interval: 5 // default is 50
+        }
+      )
+    },
+
+    triggerEscape: () => {
+      const portal = getPortal()
+      portal.trigger('keydown', { keyCode: 27 })
+      portal.trigger('keyup', { keyCode: 27 })
+    },
+
+    triggerBackdropClick: () => {
+      getPortal()
+        .find('.q-dialog__backdrop')
+        .trigger('click')
+    }
+  }
+}
+
+describe('[QDialog API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)transition-show]', () => {
+      test('is defined', () => {
+        expect(QDialog.props.transitionShow).toBeDefined()
+      })
+
+      test.todo('has effect', () => {
+        const propVal = 'fade'
+        const wrapper = mount(QDialog, {
+          props: {
+            transitionShow: propVal
+          }
+        })
+
+        // TODO: test the effect of the prop
+      })
+    })
+
+    describe('[(prop)persistent]', () => {
+      test('should display a persistent dialog', async () => {
+        const dlg = mountDialog({ persistent: true })
+
+        await dlg.show()
+        expect(dlg.isMounted()).toBe(true)
+
+        dlg.triggerBackdropClick()
+        await timeToPass(30)
+        expect(dlg.isMounted()).toBe(true)
+
+        dlg.triggerEscape()
+        await timeToPass(30)
+        expect(dlg.isMounted()).toBe(true)
+
+        await dlg.setProps({ persistent: false })
+        dlg.triggerBackdropClick()
+
+        await dlg.waitForEvent('hide')
+        expect(dlg.isMounted()).toBe(false)
+      })
+    })
+
+    describe('[(prop)no-esc-dismiss]', () => {
+      test('should not allow closing the dialog with the escape key', async () => {
+        const dlg = mountDialog({ noEscDismiss: true })
+
+        await dlg.show()
+        dlg.triggerEscape()
+
+        await timeToPass(30)
+        expect(dlg.isMounted()).toBe(true)
+
+        await dlg.setProps({ noEscDismiss: false })
+        dlg.triggerEscape()
+
+        await dlg.waitForEvent('hide')
+        expect(dlg.isMounted()).toBe(false)
+      })
+    })
+
+    describe('[(prop)no-backdrop-dismiss]', () => {
+      test('should not close dialog with backdrop', async () => {
+        const dlg = mountDialog({ noBackdropDismiss: true })
+
+        await dlg.show()
+        dlg.triggerBackdropClick()
+        await timeToPass(30)
+
+        expect(dlg.isMounted()).toBe(true)
+
+        await dlg.setProps({ noBackdropDismiss: false })
+        dlg.triggerBackdropClick()
+
+        await dlg.waitForEvent('hide')
+        expect(dlg.isMounted()).toBe(false)
+      })
+    })
+
+    describe.todo('[(prop)no-route-dismiss]', () => {
+      test.todo(' ', () => {
+        //
+      })
+    })
+
+    describe('[(prop)auto-close]', () => {
+      test('should auto-close the dialog', async () => {
+        const dlg = mountDialog({ autoClose: false })
+
+        await dlg.show()
+        dlg.wrapper.findComponent({ name: 'QBtn' })
+          .trigger('click')
+
+        await timeToPass(30)
+
+        expect(dlg.isMounted()).toBe(true)
+
+        await dlg.setProps({ autoClose: true })
+
+        dlg.wrapper.findComponent({ name: 'QBtn' })
+          .trigger('click')
+
+        await dlg.waitForEvent('hide')
+        expect(dlg.isMounted()).toBe(false)
+      })
+    })
+
+    describe('[(prop)seamless]', () => {
+      test('should put the dialog in a seamless state', async () => {
+        const dlg = mountDialog({ seamless: true })
+
+        await dlg.show()
+        const target = dlg.getPortal().get('.q-dialog')
+
+        expect(
+          target.classes()
+        ).toContain('q-dialog--seamless')
+
+        await dlg.setProps({ seamless: false })
+
+        expect(
+          target.classes()
+        ).not.toContain('q-dialog--seamless')
+      })
+    })
+
+    describe('[(prop)maximized]', () => {
+      test('should maximize the dialog', async () => {
+        const dlg = mountDialog({ maximized: true })
+
+        await dlg.show()
+        const target = dlg.getPortal().get('.q-dialog__inner')
+
+        expect(
+          target.classes()
+        ).toContain('q-dialog__inner--maximized')
+
+        await dlg.setProps({ maximized: false })
+
+        expect(
+          target.classes()
+        ).not.toContain('q-dialog__inner--maximized')
+      })
+    })
+
+    describe('[(prop)full-width]', () => {
+      test('should use a full-width for the dialog', async () => {
+        const dlg = mountDialog({ fullWidth: true })
+
+        await dlg.show()
+        const target = dlg.getPortal().get('.q-dialog__inner')
+
+        expect(
+          target.classes()
+        ).toContain('q-dialog__inner--fullwidth')
+
+        await dlg.setProps({ fullWidth: false })
+
+        expect(
+          target.classes()
+        ).not.toContain('q-dialog__inner--fullwidth')
+      })
+    })
+
+    describe('[(prop)full-height]', () => {
+      test('should set the dialog to full-height', async () => {
+        const dlg = mountDialog({ fullHeight: true })
+
+        await dlg.show()
+        const target = dlg.getPortal().get('.q-dialog__inner')
+
+        expect(
+          target.classes()
+        ).toContain('q-dialog__inner--fullheight')
+
+        await dlg.setProps({ fullHeight: false })
+
+        expect(
+          target.classes()
+        ).not.toContain('q-dialog__inner--fullheight')
+      })
+    })
+
+    describe('[(prop)position]', () => {
+      test('should display the dialog at a specific position', async () => {
+        const dlg = mountDialog()
+
+        await dlg.show()
+
+        const target = dlg.getPortal().get('.q-dialog__inner')
+        const positions = [ 'top', 'right', 'bottom', 'left' ]
+
+        for (const position of positions) {
+          await dlg.setProps({ position })
+
+          const cls = target.classes()
+          expect(cls).toContain(`q-dialog__inner--${ position }`)
+          expect(cls).toContain(`fixed-${ position }`)
+        }
+      })
+    })
+
+    describe('[(prop)square]', () => {
+      test('should use a square style for dialog', async () => {
+        const dlg = mountDialog({ square: true })
+        await dlg.show()
+
+        const target = dlg.getPortal().get('.q-dialog__inner')
+
+        expect(target.classes()).toContain('q-dialog__inner--square')
+        await dlg.setProps({ square: false })
+        expect(target.classes()).not.toContain('q-dialog__inner--square')
+      })
+    })
+  })
+
+  describe('[Slots]', () => {
+    describe('[(slot)default]', () => {
+      test('should display a default slot', async () => {
+        const dlg = mountDialog({ persistent: true })
+        await dlg.show()
+
+        expect(
+          dlg.wrapper.findComponent({ name: 'QBtn' })
+            .exists()
+        ).toBe(true)
+      })
+    })
+  })
+
+  describe('[Events]', () => {
+    describe('[(event)shake]', () => {
+      test('should emit shake event', async () => {
+        const fn = vi.fn()
+        const dlg = mountDialog({
+          noEscDismiss: true,
+          onShake: fn
+        })
+
+        await dlg.show()
+
+        dlg.triggerEscape()
+        await nextTick()
+
+        expect(fn).toHaveBeenCalledTimes(1)
+
+        dlg.getDialog().vm.shake()
+        await nextTick()
+
+        expect(fn).toHaveBeenCalledTimes(2)
+      })
+    })
+
+    describe('[(event)escape-key]', () => {
+      test('should emit escape-key event', async () => {
+        const fn = vi.fn()
+        const dlg = mountDialog({
+          onEscapeKey: fn
+        })
+
+        await dlg.show()
+
+        dlg.triggerEscape()
+        await nextTick()
+
+        expect(fn).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+
+  describe('[Methods]', () => {
+    describe('[(method)shake]', () => {
+      test('should use the shake method to shake dialog', async () => {
+        const dlg = mountDialog({ noEscDismiss: true })
+
+        await dlg.show()
+
+        const target = dlg.getPortal().get('.q-dialog__inner')
+        expect(target.classes()).not.toContain('q-animate--scale')
+
+        dlg.triggerEscape()
+        await nextTick()
+
+        expect(target.classes()).toContain('q-animate--scale')
+
+        await vi.waitUntil(
+          () => target.classes().includes('q-animate--scale') === false,
+          {
+            timeout: 400, // default is 1000
+            interval: 50 // default is 50
+          }
+        )
+
+        dlg.getDialog().vm.shake()
+        await nextTick()
+
+        expect(target.classes()).toContain('q-animate--scale')
+      })
+    })
+  })
+})

package/src/components/dialog/test/DialogWrapper.vue

@@ -0,0 +1,17 @@
+<template>
+  <q-dialog ref="dialogRef" v-bind="$attrs">
+    <q-card>
+      <q-card-section>
+        <q-btn label="Dialog Button" />
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+
+  <input />
+</template>
+
+<script setup>
+defineOptions({
+  inheritAttrs: false
+})
+</script>

package/src/components/drawer/QDrawer.js

@@ -6,7 +6,7 @@ import usePreventScroll from '../../composables/private/use-prevent-scroll.js'
 import useTimeout from '../../composables/use-timeout.js'
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
-import TouchPan from '../../directives/TouchPan.js'
+import TouchPan from '../../directives/touch-pan/TouchPan.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { between } from '../../utils/format.js'