quasar 2.15.2 → 2.15.4

package/src/plugins/app-fullscreen/AppFullscreen.js

@@ -1,5 +1,5 @@
-import defineReactivePlugin from '../../utils/private/define-reactive-plugin.js'
-import { changeGlobalNodesTarget } from '../../utils/private/global-nodes.js'
+import { createReactivePlugin } from '../../utils/private.create/create.js'
+import { changeGlobalNodesTarget } from '../../utils/private.global/global-nodes.js'
 
 const prefixes = {}
 
@@ -51,7 +51,7 @@ function promisify (target, fn) {
   }
 }
 
-const Plugin = defineReactivePlugin({
+const Plugin = createReactivePlugin({
   isActive: false,
   activeEl: null
 }, {

package/src/plugins/app-fullscreen/AppFullscreen.json

@@ -13,12 +13,14 @@
 
     "isActive": {
       "type": "Boolean",
-      "desc": "Is Fullscreen active?"
+      "desc": "Is Fullscreen active?",
+      "reactive": true
     },
 
     "activeEl": {
       "type": [ "Element", "null" ],
       "desc": "The DOM element used as root for fullscreen, otherwise 'null'",
+      "reactive": true,
       "examples": [ "document.fullscreenElement", "null" ]
     }
   },
@@ -44,6 +46,7 @@
 
     "exit": {
       "desc": "Request exiting out of Fullscreen mode",
+      "params": null,
       "returns": {
         "type": "Promise<void>",
         "desc": "A Promise which is resolved when exited out of fullscreen mode. It gets rejected with 'Not capable' if the browser is not capable, and with an Error object if something else went wrong.",

package/src/plugins/app-fullscreen/AppFullscreen.test.js

@@ -0,0 +1,206 @@
+import { describe, test, expect, afterEach } from 'vitest'
+import { mount, config } from '@vue/test-utils'
+
+// jsdom hack
+// this import should always sit before the AppFullscreen one
+import { createMockedEl } from './test/mock-fullscreen.js'
+
+import AppFullscreen from './AppFullscreen.js'
+
+const mountPlugin = () => mount({ template: '<div />' })
+
+// We override Quasar install so it installs this plugin
+const quasarVuePlugin = config.global.plugins.find(entry => entry.name === 'Quasar')
+const { install } = quasarVuePlugin
+quasarVuePlugin.install = app => install(app, { plugins: { AppFullscreen } })
+
+afterEach(async () => {
+  // ensure we don't leave test in fullscreen state
+  await AppFullscreen.exit()
+})
+
+describe('[AppFullscreen API]', () => {
+  describe('[Injection]', () => {
+    test('is injected into $q', () => {
+      const wrapper = mountPlugin()
+      expect(AppFullscreen).toMatchObject(wrapper.vm.$q.fullscreen)
+    })
+  })
+
+  describe('[Props]', () => {
+    describe('[(prop)isCapable]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(AppFullscreen.isCapable).toBeTypeOf('boolean')
+      })
+    })
+
+    describe('[(prop)isActive]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(AppFullscreen.isActive).toBeTypeOf('boolean')
+      })
+
+      test('is reactive', async () => {
+        mountPlugin()
+
+        expect(AppFullscreen.isActive).toBe(false)
+        await AppFullscreen.request()
+        expect(AppFullscreen.isActive).toBe(true)
+
+        await AppFullscreen.exit()
+        expect(AppFullscreen.isActive).toBe(false)
+      })
+    })
+
+    describe('[(prop)activeEl]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(AppFullscreen.activeEl).$any([
+          expect.any(Element),
+          null
+        ])
+      })
+
+      test('is reactive', async () => {
+        mountPlugin()
+
+        expect(AppFullscreen.activeEl).toBe(null)
+        await AppFullscreen.request()
+        expect(AppFullscreen.activeEl).not.toBe(null)
+
+        await AppFullscreen.exit()
+        expect(AppFullscreen.activeEl).toBe(null)
+      })
+    })
+  })
+
+  describe('[Methods]', () => {
+    describe('[(method)request]', () => {
+      test('request()', async () => {
+        mountPlugin()
+
+        const result = AppFullscreen.request()
+        expect(
+          result
+        ).toBeInstanceOf(Promise)
+
+        await result
+        expect(AppFullscreen.isActive).toBe(true)
+        expect(AppFullscreen.activeEl).not.toBe(null)
+
+        await AppFullscreen.exit()
+        expect(AppFullscreen.isActive).toBe(false)
+        expect(AppFullscreen.activeEl).toBe(null)
+      })
+
+      test('request(el)', async () => {
+        mountPlugin()
+
+        const el = createMockedEl()
+
+        const result = AppFullscreen.request(el)
+        expect(
+          result
+        ).toBeInstanceOf(Promise)
+
+        await result
+
+        expect(el.requestFullscreen).toHaveBeenCalledTimes(1)
+        expect(AppFullscreen.isActive).toBe(true)
+        expect(AppFullscreen.activeEl).toBe(el)
+
+        await AppFullscreen.exit()
+        expect(AppFullscreen.isActive).toBe(false)
+        expect(AppFullscreen.activeEl).toBe(null)
+      })
+
+      test('call request(el) 2 times', async () => {
+        mountPlugin()
+
+        const el = createMockedEl()
+
+        const result = AppFullscreen.request(el)
+        expect(
+          result
+        ).toBeInstanceOf(Promise)
+
+        await result
+        expect(el.requestFullscreen).toHaveBeenCalledTimes(1)
+        expect(AppFullscreen.activeEl).toBe(el)
+
+        await AppFullscreen.request(el)
+        expect(el.requestFullscreen).toHaveBeenCalledTimes(1)
+        expect(AppFullscreen.activeEl).toBe(el)
+
+        await AppFullscreen.exit()
+        expect(AppFullscreen.activeEl).toBe(null)
+      })
+    })
+
+    describe('[(method)exit]', () => {
+      test('should be callable', () => {
+        mountPlugin()
+        expect(
+          AppFullscreen.exit()
+        ).toBeInstanceOf(Promise)
+      })
+
+      test('request() + exit()', async () => {
+        mountPlugin()
+
+        const result = AppFullscreen.request()
+        expect(
+          result
+        ).toBeInstanceOf(Promise)
+
+        await result
+        expect(AppFullscreen.isActive).toBe(true)
+        expect(AppFullscreen.activeEl).not.toBe(null)
+
+        await AppFullscreen.exit()
+        expect(AppFullscreen.isActive).toBe(false)
+        expect(AppFullscreen.activeEl).toBe(null)
+      })
+    })
+
+    describe('[(method)toggle]', () => {
+      test('toggle()', async () => {
+        mountPlugin()
+
+        const result = AppFullscreen.toggle()
+        expect(
+          result
+        ).toBeInstanceOf(Promise)
+
+        await result
+        expect(AppFullscreen.isActive).toBe(true)
+        expect(AppFullscreen.activeEl).not.toBe(null)
+
+        await AppFullscreen.toggle()
+        expect(AppFullscreen.isActive).toBe(false)
+        expect(AppFullscreen.activeEl).toBe(null)
+      })
+
+      test('toggle(el)', async () => {
+        mountPlugin()
+
+        const el = createMockedEl()
+
+        const result = AppFullscreen.toggle(el)
+        expect(
+          result
+        ).toBeInstanceOf(Promise)
+
+        await result
+        expect(el.requestFullscreen).toHaveBeenCalledTimes(1)
+        expect(AppFullscreen.isActive).toBe(true)
+        expect(AppFullscreen.activeEl).toBe(el)
+
+        await AppFullscreen.toggle()
+        expect(AppFullscreen.isActive).toBe(false)
+        expect(AppFullscreen.activeEl).toBe(null)
+      })
+    })
+  })
+})

package/src/plugins/app-fullscreen/test/mock-fullscreen.js

@@ -0,0 +1,43 @@
+import { vi } from 'vitest'
+
+/**
+ * jsdom does not support Fullscreen API,
+ * so we mock the functionality
+ */
+
+export function mockedRequestFullscreen (el = document.documentElement) {
+  document.fullscreenElement = el
+  mockedToggleFullscreen()
+}
+
+export function mockedExitFullscreen () {
+  document.fullscreenElement = null
+  mockedToggleFullscreen()
+}
+
+export function mockedToggleFullscreen () {
+  document.onfullscreenchange()
+}
+
+export function createMockedEl () {
+  const el = document.createElement('div')
+  el.setAttribute('tabindex', '0')
+  document.body.appendChild(el)
+
+  el.requestFullscreen = vi.fn(() => {
+    document.fullscreenElement = el
+    mockedToggleFullscreen()
+  })
+
+  el.exitFullscreen = mockedExitFullscreen
+
+  onTestFinished(() => { el.remove() })
+
+  return el
+}
+
+document.documentElement.requestFullscreen = mockedRequestFullscreen
+document.documentElement.exitFullscreen = mockedExitFullscreen
+
+document.requestFullscreen = mockedRequestFullscreen
+document.exitFullscreen = mockedExitFullscreen

package/src/plugins/app-visibility/AppVisibility.js

@@ -1,7 +1,7 @@
-import defineReactivePlugin from '../../utils/private/define-reactive-plugin.js'
-import { injectProp } from '../../utils/private/inject-obj-prop.js'
+import { createReactivePlugin } from '../../utils/private.create/create.js'
+import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
 
-const Plugin = defineReactivePlugin({
+const Plugin = createReactivePlugin({
   appVisible: true
 }, {
   install ({ $q }) {

package/src/plugins/app-visibility/AppVisibility.test.js

@@ -0,0 +1,45 @@
+import { describe, test, expect } from 'vitest'
+import { mount, config } from '@vue/test-utils'
+
+import AppVisibility from './AppVisibility.js'
+
+const mountPlugin = () => mount({ template: '<div />' })
+
+// We override Quasar install so it installs this plugin
+const quasarVuePlugin = config.global.plugins.find(entry => entry.name === 'Quasar')
+const { install } = quasarVuePlugin
+quasarVuePlugin.install = app => install(app, { plugins: { AppVisibility } })
+
+describe('[AppVisibility API]', () => {
+  describe('[Injection]', () => {
+    test('is injected into $q', () => {
+      const wrapper = mountPlugin()
+      expect(wrapper.vm.$q.appVisible).toBe(AppVisibility.appVisible)
+    })
+  })
+
+  describe('[Props]', () => {
+    describe('[(prop)appVisible]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(AppVisibility.appVisible).toBe(true)
+      })
+
+      test('is reactive', () => {
+        const wrapper = mountPlugin()
+        expect(AppVisibility.appVisible).toBe(true)
+
+        // jsdom hack
+        Object.defineProperty(document, 'hidden', {
+          configurable: true,
+          get: () => true
+        })
+
+        document.dispatchEvent(new Event('visibilitychange'))
+
+        expect(AppVisibility.appVisible).toBe(false)
+        expect(wrapper.vm.$q.appVisible).toBe(false)
+      })
+    })
+  })
+})

package/src/plugins/bottom-sheet/BottomSheet.js

@@ -1,11 +1,8 @@
 import BottomSheet from './component/BottomSheetComponent.js'
-import globalDialog from '../../utils/private/global-dialog.js'
+import globalDialog from '../../utils/private.global/global-dialog.js'
 
 export default {
   install ({ $q, parentApp }) {
-    $q.bottomSheet = globalDialog(BottomSheet, false, parentApp)
-    if (this.__installed !== true) {
-      this.create = $q.bottomSheet
-    }
+    $q.bottomSheet = this.create = globalDialog(BottomSheet, false, parentApp)
   }
 }

package/src/plugins/bottom-sheet/BottomSheet.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "utils/private/global-dialog" ],
+  "mixins": [ "utils/private.global/global-dialog" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/quasar-plugins/bottom-sheet"

package/src/plugins/bottom-sheet/component/BottomSheetComponent.js

@@ -11,8 +11,8 @@ import QCardSection from '../../../components/card/QCardSection.js'
 import QItem from '../../../components/item/QItem.js'
 import QItemSection from '../../../components/item/QItemSection.js'
 
-import { createComponent } from '../../../utils/private/create.js'
-import useDark, { useDarkProps } from '../../../composables/private/use-dark.js'
+import { createComponent } from '../../../utils/private.create/create.js'
+import useDark, { useDarkProps } from '../../../composables/private.use-dark/use-dark.js'
 
 export default createComponent({
   name: 'BottomSheetComponent',

package/src/plugins/cookies/Cookies.json

@@ -26,6 +26,7 @@
 
     "getAll": {
       "desc": "Get all cookies",
+      "params": null,
       "returns": {
         "type": "Object",
         "desc": "Object with cookie names (as keys) and their values",
@@ -89,7 +90,8 @@
             }
           }
         }
-      }
+      },
+      "returns": null
     },
 
     "has": {
@@ -134,7 +136,8 @@
             }
           }
         }
-      }
+      },
+      "returns": null
     },
 
     "parseSSR": {

package/src/plugins/dark/Dark.js

@@ -1,6 +1,6 @@
-import defineReactivePlugin from '../../utils/private/define-reactive-plugin.js'
+import { createReactivePlugin } from '../../utils/private.create/create.js'
 
-const Plugin = defineReactivePlugin({
+const Plugin = createReactivePlugin({
   isActive: false,
   mode: false
 }, {

package/src/plugins/dark/Dark.json

@@ -37,11 +37,14 @@
           "values": [ "true", "false", "'auto'" ],
           "required": true
         }
-      }
+      },
+      "returns": null
     },
 
     "toggle": {
-      "desc": "Toggle dark mode status"
+      "desc": "Toggle dark mode status",
+      "params": null,
+      "returns": null
     }
   }
 }

package/src/plugins/dark/Dark.test.js

@@ -0,0 +1,158 @@
+import { describe, test, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import Dark from './Dark.js'
+
+const mountPlugin = () => mount({ template: '<div />' })
+
+describe('[Dark API]', () => {
+  describe('[Injection]', () => {
+    test('is injected into $q', () => {
+      const wrapper = mountPlugin()
+      expect(Dark).toMatchObject(wrapper.vm.$q.dark)
+    })
+  })
+
+  describe('[Props]', () => {
+    describe('[(prop)isActive]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(Dark.isActive).toBeTypeOf('boolean')
+      })
+
+      test('is reactive', () => {
+        const { vm: { $q } } = mountPlugin()
+
+        expect(Dark.isActive).toBe(false)
+        expect($q.dark.isActive).toBe(false)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(false)
+
+        Dark.set(true)
+
+        expect(Dark.isActive).toBe(true)
+        expect($q.dark.isActive).toBe(true)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(true)
+      })
+    })
+
+    describe('[(prop)mode]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect([ 'auto', true, false ]).toContain(Dark.mode)
+      })
+    })
+  })
+
+  describe('[Methods]', () => {
+    describe('[(method)set]', () => {
+      test('should be callable', () => {
+        const { vm: { $q } } = mountPlugin()
+
+        expect(
+          Dark.set(true)
+        ).toBeUndefined()
+
+        expect(Dark.isActive).toBe(true)
+        expect($q.dark.isActive).toBe(true)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(true)
+
+        expect(
+          Dark.set(false)
+        ).toBeUndefined()
+
+        expect(Dark.isActive).toBe(false)
+        expect($q.dark.isActive).toBe(false)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(false)
+      })
+
+      test('should handle auto mode', () => {
+        const { vm: { $q } } = mountPlugin()
+
+        // jsdom hack
+        const media = {
+          matches: true,
+          addListener: vi.fn(),
+          removeListener: vi.fn()
+        }
+        window.matchMedia = vi.fn(() => media)
+
+        Dark.set('auto')
+
+        expect(Dark.mode).toBe('auto')
+
+        expect(media.addListener).toHaveBeenCalledTimes(1)
+        expect(media.removeListener).not.toHaveBeenCalled()
+
+        expect(Dark.isActive).toBe(true)
+        expect($q.dark.isActive).toBe(true)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(true)
+
+        media.matches = false
+        Dark.__updateMedia()
+
+        expect(media.addListener).toHaveBeenCalledTimes(1)
+        expect(media.removeListener).not.toHaveBeenCalled()
+
+        expect(Dark.isActive).toBe(false)
+        expect($q.dark.isActive).toBe(false)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(false)
+
+        Dark.set(true)
+        expect(Dark.mode).not.toBe('auto')
+
+        expect(media.addListener).toHaveBeenCalledTimes(1)
+        expect(media.removeListener).toHaveBeenCalledTimes(1)
+
+        expect(Dark.isActive).toBe(true)
+        expect($q.dark.isActive).toBe(true)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(true)
+      })
+    })
+
+    describe('[(method)toggle]', () => {
+      test('should be callable', () => {
+        const { vm: { $q } } = mountPlugin()
+
+        Dark.set(true)
+
+        expect(Dark.isActive).toBe(true)
+        expect($q.dark.isActive).toBe(true)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(true)
+
+        expect(
+          Dark.toggle()
+        ).toBeUndefined()
+
+        expect(Dark.isActive).toBe(false)
+        expect($q.dark.isActive).toBe(false)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(false)
+
+        Dark.toggle()
+
+        expect(Dark.isActive).toBe(true)
+        expect($q.dark.isActive).toBe(true)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(true)
+      })
+    })
+  })
+})

package/src/plugins/dialog/Dialog.js

@@ -1,11 +1,8 @@
 import DialogPlugin from './component/DialogPluginComponent.js'
-import globalDialog from '../../utils/private/global-dialog.js'
+import globalDialog from '../../utils/private.global/global-dialog.js'
 
 export default {
   install ({ $q, parentApp }) {
-    $q.dialog = globalDialog(DialogPlugin, true, parentApp)
-    if (this.__installed !== true) {
-      this.create = $q.dialog
-    }
+    $q.dialog = this.create = globalDialog(DialogPlugin, true, parentApp)
   }
 }

package/src/plugins/dialog/Dialog.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "utils/private/global-dialog" ],
+  "mixins": [ "utils/private.global/global-dialog" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/quasar-plugins/dialog"
@@ -44,7 +44,7 @@
               "type": "Object",
               "tsType": "QDialogInputPrompt",
               "desc": "An object definition of the input field for the prompting question.",
-              "examples": [ "{ model: this.promptVal, type: 'number' }" ],
+              "examples": [ "{ model: 'initial-value', type: 'number' }" ],
               "definition": {
                 "model": {
                   "type": "String",
@@ -98,7 +98,7 @@
               "type": "Object",
               "tsType": "QDialogSelectionPrompt",
               "desc": "An object definition for creating the selection form content",
-              "examples": [ "{ model: this.dialogSelection, type: 'radio', items: [...listOfItems] }" ],
+              "examples": [ "{ model: null, type: 'radio', items: [ /* ...listOfItems */ ] }" ],
               "definition": {
                 "model": {
                   "type": [ "String", "Array" ],

package/src/plugins/dialog/component/DialogPluginComponent.js

@@ -13,11 +13,11 @@ import QOptionGroup from '../../../components/option-group/QOptionGroup.js'
 
 import QSpinner from '../../../components/spinner/QSpinner.js'
 
-import { createComponent } from '../../../utils/private/create.js'
-import useDark, { useDarkProps } from '../../../composables/private/use-dark.js'
+import { createComponent } from '../../../utils/private.create/create.js'
+import useDark, { useDarkProps } from '../../../composables/private.use-dark/use-dark.js'
 
-import { isKeyCode } from '../../../utils/private/key-composition.js'
-import { isObject } from '../../../utils/is.js'
+import { isKeyCode } from '../../../utils/private.keyboard/key-composition.js'
+import { isObject } from '../../../utils/is/is.js'
 
 export default createComponent({
   name: 'DialogPluginComponent',