quasar 2.15.2 → 2.15.4

package/src/composables/use-render-cache/use-render-cache.test.js

@@ -0,0 +1,73 @@
+import { describe, test, expect } from 'vitest'
+
+import useRenderCache from './use-render-cache.js'
+
+describe('[useRenderCache API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('has correct return value', () => {
+        const result = useRenderCache()
+        expect(result).toStrictEqual({
+          getCache: expect.any(Function),
+          setCache: expect.any(Function),
+          hasCache: expect.any(Function),
+          clearCache: expect.any(Function)
+        })
+      })
+
+      test('getCache() returns undefined', () => {
+        const { getCache } = useRenderCache()
+        expect(getCache('key')).toBeUndefined()
+      })
+
+      test('setCache() sets cache', () => {
+        const { setCache, getCache } = useRenderCache()
+        setCache('key', 'value')
+        expect(getCache('key')).toBe('value')
+
+        setCache('key', 'second-value')
+        expect(getCache('key')).toBe('second-value')
+
+        setCache('another-key', 'another-value')
+        expect(getCache('another-key')).toBe('another-value')
+        expect(getCache('key')).toBe('second-value')
+      })
+
+      test('hasCache() returns true', () => {
+        const { hasCache, setCache } = useRenderCache()
+        setCache('key', 0)
+        setCache('key2', 10)
+        expect(hasCache('key')).toBe(true)
+        expect(hasCache('key2')).toBe(true)
+      })
+
+      test('clearCache() clears cache', () => {
+        const { clearCache, setCache, getCache, hasCache } = useRenderCache()
+        setCache('key', 0)
+        setCache('key2', 0)
+
+        clearCache()
+
+        expect(hasCache('key')).toBe(false)
+        expect(getCache('key')).toBeUndefined()
+
+        expect(hasCache('key2')).toBe(false)
+        expect(getCache('key2')).toBeUndefined()
+      })
+
+      test('clearCache(key) clears only the key', () => {
+        const { clearCache, setCache, getCache, hasCache } = useRenderCache()
+        setCache('key', 0)
+        setCache('key2', 0)
+
+        clearCache('key')
+
+        expect(hasCache('key')).toBe(false)
+        expect(getCache('key')).toBeUndefined()
+
+        expect(hasCache('key2')).toBe(true)
+        expect(getCache('key2')).toBe(0)
+      })
+    })
+  })
+})

package/src/composables/use-split-attrs/use-split-attrs.test.js

@@ -0,0 +1,55 @@
+import { describe, test, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+
+import useSplitAttrs from './use-split-attrs.js'
+
+describe('[useSplitAttrs API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test.each([
+        [ 'no attrs', {}, [] ],
+        [ 'attrs', { a: '1' }, [] ],
+        [ 'listeners', {}, [ 'b' ] ],
+        [ 'attrs and listeners', { a: '1' }, [ 'b' ] ],
+        [ 'multiple attrs and listeners', { a: '1', b: '2' }, [ 'f1', 'f2' ] ]
+      ])('correctly splits: %s', (_, attrs, listeners) => {
+        const attrHtml = Object.keys(attrs).map(
+          key => `${ key }="${ attrs[ key ] }"`
+        ).join(' ')
+
+        const fn = () => {}
+        const fnList = {}
+        const listenerHtml = listeners.map(key => {
+          fnList[ 'on' + key.toUpperCase() ] = fn
+          return `@${ key }="fn"`
+        }).join(' ')
+
+        const ChildComponent = {
+          name: 'ChildComponent',
+          template: '<div />',
+          setup () {
+            const result = useSplitAttrs()
+            return { result }
+          }
+        }
+
+        const wrapper = mount(
+          defineComponent({
+            template: `<ChildComponent ${ attrHtml } ${ listenerHtml } />`,
+            components: { ChildComponent },
+            setup () {
+              return { fn }
+            }
+          })
+        )
+
+        const target = wrapper.findComponent({ name: 'ChildComponent' })
+        expect(target.vm.result).toStrictEqual({
+          attributes: expect.$ref(attrs),
+          listeners: expect.$ref(fnList)
+        })
+      })
+    })
+  })
+})

package/src/composables/{use-tick.js → use-tick/use-tick.js}

@@ -1,6 +1,6 @@
 import { nextTick, onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
 
-import { vmIsDestroyed } from '../utils/private/vm'
+import { vmIsDestroyed } from '../../utils/private.vm/vm.js'
 
 /*
  * Usage:

package/src/composables/use-tick/use-tick.test.js

@@ -0,0 +1,118 @@
+import { describe, test, expect, vi, afterEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+
+import useTick from './use-tick.js'
+
+let wrapper
+
+afterEach(() => {
+  if (wrapper !== null) {
+    wrapper.unmount()
+    wrapper = null
+  }
+})
+
+describe('[useTick API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('correctly registers a tick', async () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerTick } = useTick()
+
+              registerTick(fn)
+              return {}
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+        await flushPromises()
+        expect(fn).toHaveBeenCalledTimes(1)
+      })
+
+      test('removeTick works correctly', async () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const {
+                registerTick,
+                removeTick
+              } = useTick()
+
+              registerTick(fn)
+              return { registerTick, removeTick }
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+        wrapper.vm.removeTick()
+
+        await flushPromises()
+        expect(fn).not.toHaveBeenCalled()
+      })
+
+      test('unmount stops tick', async () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerTick } = useTick()
+
+              registerTick(fn)
+              return {}
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+
+        wrapper.unmount()
+        wrapper = null
+
+        await flushPromises()
+
+        expect(fn).not.toHaveBeenCalled()
+      })
+
+      test('can override tick', async () => {
+        const fn1 = vi.fn()
+        const fn2 = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerTick } = useTick()
+              return { registerTick }
+            }
+          })
+        )
+
+        expect(fn1).not.toHaveBeenCalled()
+        wrapper.vm.registerTick(fn1)
+        expect(fn1).not.toHaveBeenCalled()
+
+        wrapper.vm.registerTick(fn2)
+        expect(fn1).not.toHaveBeenCalled()
+        expect(fn2).not.toHaveBeenCalled()
+
+        await flushPromises()
+
+        expect(fn1).not.toHaveBeenCalled()
+        expect(fn2).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+})

package/src/composables/{use-timeout.js → use-timeout/use-timeout.js}

@@ -1,6 +1,6 @@
 import { onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
 
-import { vmIsDestroyed } from '../utils/private/vm.js'
+import { vmIsDestroyed } from '../../utils/private.vm/vm.js'
 
 /*
  * Usage:

package/src/composables/use-timeout/use-timeout.test.js

@@ -0,0 +1,169 @@
+import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+
+import useTimeout from './use-timeout.js'
+
+let wrapper
+
+beforeEach(() => {
+  vi.useFakeTimers()
+})
+
+afterEach(() => {
+  vi.clearAllTimers()
+  vi.restoreAllMocks()
+
+  if (wrapper !== null) {
+    wrapper.unmount()
+    wrapper = null
+  }
+})
+
+describe('[useTimeout API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('correctly registers a timeout (int)', () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerTimeout } = useTimeout()
+
+              registerTimeout(fn, 100)
+              return {}
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(99)
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(1)
+        expect(fn).toHaveBeenCalledTimes(1)
+
+        vi.runAllTimers()
+        expect(fn).toHaveBeenCalledTimes(1)
+      })
+
+      test('correctly registers a timeout (str)', () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerTimeout } = useTimeout()
+
+              registerTimeout(fn, '100')
+              return {}
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(99)
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(1)
+        expect(fn).toHaveBeenCalledTimes(1)
+
+        vi.runAllTimers()
+        expect(fn).toHaveBeenCalledTimes(1)
+      })
+
+      test('removeTimeout works correctly', () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const {
+                registerTimeout,
+                removeTimeout
+              } = useTimeout()
+
+              registerTimeout(fn, 100)
+              return { registerTimeout, removeTimeout }
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(200)
+        expect(fn).toHaveBeenCalledTimes(1)
+
+        wrapper.vm.removeTimeout()
+        vi.runAllTimers()
+
+        expect(fn).toHaveBeenCalledTimes(1)
+
+        wrapper.vm.registerTimeout(fn, 100)
+        wrapper.unmount()
+
+        vi.runAllTimers()
+
+        expect(fn).toHaveBeenCalledTimes(1)
+      })
+
+      test('unmount stops timeout', () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerTimeout } = useTimeout()
+
+              registerTimeout(fn, 100)
+              return {}
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+
+        wrapper.unmount()
+        wrapper = null
+
+        vi.runAllTimers()
+
+        expect(fn).not.toHaveBeenCalled()
+      })
+
+      test('can override timeout', () => {
+        const fn1 = vi.fn()
+        const fn2 = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerTimeout } = useTimeout()
+              return { registerTimeout }
+            }
+          })
+        )
+
+        wrapper.vm.registerTimeout(fn1, 100)
+        vi.advanceTimersByTime(99)
+        expect(fn1).not.toHaveBeenCalled()
+
+        wrapper.vm.registerTimeout(fn2, 200)
+        vi.advanceTimersByTime(199)
+        expect(fn1).not.toHaveBeenCalled()
+        expect(fn2).not.toHaveBeenCalled()
+
+        vi.advanceTimersByTime(1)
+        expect(fn1).not.toHaveBeenCalled()
+        expect(fn2).toHaveBeenCalledTimes(1)
+
+        vi.runAllTimers()
+        expect(fn1).not.toHaveBeenCalled()
+        expect(fn2).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+})

package/src/composables.js

@@ -1,15 +1,15 @@
-import useDialogPluginComponent from './composables/use-dialog-plugin-component.js'
-import useFormChild from './composables/use-form-child.js'
-import useMeta from './composables/use-meta.js'
-import useQuasar from './composables/use-quasar.js'
+import useDialogPluginComponent from './composables/use-dialog-plugin-component/use-dialog-plugin-component.js'
+import useFormChild from './composables/use-form/use-form-child.js'
+import useMeta from './composables/use-meta/use-meta.js'
+import useQuasar from './composables/use-quasar/use-quasar.js'
 
-import useHydration from './composables/use-hydration.js'
-import useId from './composables/use-id.js'
-import useInterval from './composables/use-interval.js'
-import useRenderCache from './composables/use-render-cache.js'
-import useSplitAttrs from './composables/use-split-attrs.js'
-import useTick from './composables/use-tick.js'
-import useTimeout from './composables/use-timeout.js'
+import useHydration from './composables/use-hydration/use-hydration.js'
+import useId from './composables/use-id/use-id.js'
+import useInterval from './composables/use-interval/use-interval.js'
+import useRenderCache from './composables/use-render-cache/use-render-cache.js'
+import useSplitAttrs from './composables/use-split-attrs/use-split-attrs.js'
+import useTick from './composables/use-tick/use-tick.js'
+import useTimeout from './composables/use-timeout/use-timeout.js'
 
 export {
   useDialogPluginComponent,

package/src/css/index.sass

@@ -7,7 +7,7 @@
 @import '../components/icon/QIcon.sass'
 
 /* Composables */
-@import '../composables/private/use-panel.sass'
+@import '../composables/private.use-panel/use-panel.sass'
 
 /* Components */
 @import '../components/ajax-bar/QAjaxBar.sass'

package/src/directives/close-popup/ClosePopup.js

@@ -1,7 +1,7 @@
-import { createDirective } from '../../utils/private/create.js'
-import { closePortals, getPortalProxy } from '../../utils/private/portal.js'
-import { isKeyCode } from '../../utils/private/key-composition.js'
-import getSSRProps from '../../utils/private/noop-ssr-directive-transform.js'
+import { createDirective } from '../../utils/private.create/create.js'
+import { closePortals, getPortalProxy } from '../../utils/private.portal/portal.js'
+import { isKeyCode } from '../../utils/private.keyboard/key-composition.js'
+import getSSRProps from '../../utils/private.noop-ssr-directive-transform/noop-ssr-directive-transform.js'
 
 /*
  * depth

package/src/directives/intersection/Intersection.js

@@ -1,6 +1,6 @@
-import { createDirective } from '../../utils/private/create.js'
-import { isDeepEqual } from '../../utils/is.js'
-import getSSRProps from '../../utils/private/noop-ssr-directive-transform.js'
+import { createDirective } from '../../utils/private.create/create.js'
+import { isDeepEqual } from '../../utils/is/is.js'
+import getSSRProps from '../../utils/private.noop-ssr-directive-transform/noop-ssr-directive-transform.js'
 
 const defaultCfg = {
   threshold: 0,

package/src/directives/morph/Morph.js

@@ -1,5 +1,5 @@
-import { createDirective } from '../../utils/private/create.js'
-import morph from '../../utils/morph.js'
+import { createDirective } from '../../utils/private.create/create.js'
+import morph from '../../utils/morph/morph.js'
 
 const morphGroups = {}
 const props = [

package/src/directives/morph/Morph.json

@@ -122,7 +122,7 @@
             "desc": "Was the morphing aborted?"
           }
         },
-        "examples": [ "(direction, aborted) => { if (direction !== 'to') { revertLogic() } }" ]
+        "examples": [ "(direction, _aborted) => { if (direction !== 'to') { /* revertLogic() */ } }" ]
       }
     },
 

package/src/directives/mutation/Mutation.js

@@ -1,5 +1,5 @@
-import { createDirective } from '../../utils/private/create.js'
-import getSSRProps from '../../utils/private/noop-ssr-directive-transform.js'
+import { createDirective } from '../../utils/private.create/create.js'
+import getSSRProps from '../../utils/private.noop-ssr-directive-transform/noop-ssr-directive-transform.js'
 
 const defaultCfg = {
   childList: true,

package/src/directives/ripple/Ripple.js

@@ -1,9 +1,9 @@
-import { createDirective } from '../../utils/private/create.js'
-import { css } from '../../utils/dom.js'
-import { position, stop, addEvt, cleanEvt } from '../../utils/event.js'
-import { isKeyCode } from '../../utils/private/key-composition.js'
-import throttle from '../../utils/throttle.js'
-import getSSRProps from '../../utils/private/noop-ssr-directive-transform.js'
+import { createDirective } from '../../utils/private.create/create.js'
+import { css } from '../../utils/dom/dom.js'
+import { position, stop, addEvt, cleanEvt } from '../../utils/event/event.js'
+import { isKeyCode } from '../../utils/private.keyboard/key-composition.js'
+import throttle from '../../utils/throttle/throttle.js'
+import getSSRProps from '../../utils/private.noop-ssr-directive-transform/noop-ssr-directive-transform.js'
 
 function showRipple (evt, el, ctx, forceCenter) {
   ctx.modifiers.stop === true && stop(evt)

package/src/directives/ripple/Ripple.json

@@ -31,7 +31,7 @@
       "keyCodes": {
         "type": [ "Array", "Number" ],
         "desc": "List of keyCode that should trigger the ripple",
-        "examples": [ "[]", "[13, 32]" ]
+        "examples": [ "[]", "[ 13, 32 ]" ]
       }
     }
   },
@@ -64,7 +64,7 @@
       "keyCodes": {
         "type": [ "Array", "Number" ],
         "desc": "List of keyCode that should trigger the ripple",
-        "examples": [ "[]", "[13, 32]" ]
+        "examples": [ "[]", "[ 13, 32 ]" ]
       }
     },
     "examples": [