quasar 2.15.2 → 2.15.4

package/src/composables/private.use-transition/use-transition.test.js

@@ -0,0 +1,118 @@
+import { describe, test, expect } from 'vitest'
+
+import useTransition, { useTransitionProps } from './use-transition.js'
+
+describe('[useTransition API]', () => {
+  describe('[Variables]', () => {
+    describe('[(variable)useTransitionProps]', () => {
+      test('is defined correctly', () => {
+        expect(useTransitionProps).toBeTypeOf('object')
+        expect(Object.keys(useTransitionProps)).not.toHaveLength(0)
+      })
+    })
+  })
+
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('has correct return value', () => {
+        expect(
+          useTransition({})
+        ).toStrictEqual({
+          transitionStyle: expect.$ref(
+            expect.any(String)
+          ),
+
+          transitionProps: expect.$ref({
+            appear: expect.any(Boolean),
+
+            enterFromClass: expect.any(String),
+            enterActiveClass: expect.any(String),
+            enterToClass: expect.any(String),
+
+            leaveFromClass: expect.any(String),
+            leaveActiveClass: expect.any(String),
+            leaveToClass: expect.any(String)
+          })
+        })
+      })
+
+      test('props.transitionDuration is handled correctly', () => {
+        const { transitionStyle } = useTransition({
+          transitionDuration: 555
+        })
+
+        expect(
+          transitionStyle.value
+        ).toMatch(/555ms/)
+      })
+
+      test('props.transitionShow is handled correctly', () => {
+        const { transitionProps } = useTransition({
+          transitionShow: 'some-transition'
+        })
+
+        expect(
+          transitionProps.value
+        ).toMatchObject({
+          enterFromClass: 'q-transition--some-transition-enter-from',
+          enterActiveClass: 'q-transition--some-transition-enter-active',
+          enterToClass: 'q-transition--some-transition-enter-to'
+        })
+      })
+
+      test('props.transitionHide is handled correctly', () => {
+        const { transitionProps } = useTransition({
+          transitionHide: 'some-transition'
+        })
+
+        expect(
+          transitionProps.value
+        ).toMatchObject({
+          leaveFromClass: 'q-transition--some-transition-leave-from',
+          leaveActiveClass: 'q-transition--some-transition-leave-active',
+          leaveToClass: 'q-transition--some-transition-leave-to'
+        })
+      })
+
+      test('defaultShowFn + defaultHideFn is handled correctly', () => {
+        const { transitionProps } = useTransition(
+          {},
+          () => 'show',
+          () => 'hide'
+        )
+
+        expect(
+          transitionProps.value
+        ).toMatchObject({
+          enterFromClass: 'q-transition--show-enter-from',
+          enterActiveClass: 'q-transition--show-enter-active',
+          enterToClass: 'q-transition--show-enter-to',
+
+          leaveFromClass: 'q-transition--hide-leave-from',
+          leaveActiveClass: 'q-transition--hide-leave-active',
+          leaveToClass: 'q-transition--hide-leave-to'
+        })
+      })
+
+      test('props.transitionShow & props.transitionHide are handled correctly with defaultShowFn + defaultHideFn too', () => {
+        const { transitionProps } = useTransition(
+          { transitionShow: 'show', transitionHide: 'hide' },
+          () => 'X',
+          () => 'Y'
+        )
+
+        expect(
+          transitionProps.value
+        ).toMatchObject({
+          enterFromClass: 'q-transition--show-enter-from',
+          enterActiveClass: 'q-transition--show-enter-active',
+          enterToClass: 'q-transition--show-enter-to',
+
+          leaveFromClass: 'q-transition--hide-leave-from',
+          leaveActiveClass: 'q-transition--hide-leave-active',
+          leaveToClass: 'q-transition--hide-leave-to'
+        })
+      })
+    })
+  })
+})

package/src/composables/{private → private.use-validate}/use-validate.js

@@ -1,9 +1,9 @@
 import { ref, computed, watch, onBeforeUnmount, getCurrentInstance } from 'vue'
 
-import useFormChild from '../use-form-child.js'
-import { testPattern } from '../../utils/patterns.js'
-import debounce from '../../utils/debounce.js'
-import { injectProp } from '../../utils/private/inject-obj-prop.js'
+import useFormChild from '../use-form/use-form-child.js'
+import { testPattern } from '../../utils/patterns/patterns.js'
+import debounce from '../../utils/debounce/debounce.js'
+import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
 
 const lazyRulesValues = [ true, false, 'ondemand' ]
 

package/src/composables/{private → private.use-validate}/use-validate.json

@@ -54,7 +54,9 @@
 
   "methods": {
     "resetValidation": {
-      "desc": "Reset validation status"
+      "desc": "Reset validation status",
+      "params": null,
+      "returns": null
     },
 
     "validate": {

package/src/composables/{use-dialog-plugin-component.js → use-dialog-plugin-component/use-dialog-plugin-component.js}

@@ -1,11 +1,11 @@
 import { ref, getCurrentInstance } from 'vue'
 
-import getEmitsObject from '../utils/private/get-emits-object'
+import getEmitsObject from '../../utils/private.get-emits-object/get-emits-object.js'
 
 // To be used for the custom component
 // used on a Dialog plugin
 
-function useDialogPluginComponent () {
+export default function useDialogPluginComponent () {
   const { emit, proxy } = getCurrentInstance()
 
   // we need a Vue reference to the QDialog
@@ -41,5 +41,3 @@ const emits = [ 'ok', 'hide' ]
 
 useDialogPluginComponent.emits = emits
 useDialogPluginComponent.emitsObject = getEmitsObject(emits)
-
-export default useDialogPluginComponent

package/src/composables/use-form/private.use-form.test.js

@@ -0,0 +1,107 @@
+import { describe, test, expect } from 'vitest'
+import { computed } from 'vue'
+
+import {
+  useFormProps,
+  useFormAttrs, useFormInject, useFormInputNameAttr
+} from './private.use-form.js'
+
+describe('[useForm API]', () => {
+  describe('[Variables]', () => {
+    describe('[(variable)useFormProps]', () => {
+      test('is defined correctly', () => {
+        expect(useFormProps).toBeTypeOf('object')
+        expect(Object.keys(useFormProps)).not.toHaveLength(0)
+      })
+    })
+  })
+
+  describe('[Functions]', () => {
+    describe('[(function)useFormAttrs]', () => {
+      test('has correct return value', () => {
+        const { value: result } = useFormAttrs({
+          name: 'MyName',
+          modelValue: 'MyModelValue'
+        })
+
+        expect(result).toBeTypeOf('object')
+        expect(result.name).toBe('MyName')
+        expect(result.value).toBe('MyModelValue')
+      })
+    })
+
+    describe('[(function)useFormInject]', () => {
+      test('useFormInject()', () => {
+        const fn = useFormInject()
+
+        expect(typeof fn).toBe('function')
+
+        const acc = []
+        fn(acc, 'push')
+        fn(acc, 'push', ' MyClassName')
+
+        expect(acc).toHaveLength(2)
+
+        expect(acc[ 0 ].type).toBe('input')
+        expect(Object.keys(acc[ 0 ].props)).toHaveLength(1)
+        expect(acc[ 0 ].props.class).toBe('hidden')
+
+        expect(acc[ 1 ].type).toBe('input')
+        expect(Object.keys(acc[ 1 ].props)).toHaveLength(1)
+        expect(acc[ 1 ].props.class).toBe('hidden MyClassName')
+      })
+
+      test('useFormInject(formAttrs)', () => {
+        const fn = useFormInject(
+          computed(() => ({
+            myAttr: 'MyAttrValue'
+          }))
+        )
+
+        const acc = []
+
+        fn(acc, 'push')
+        fn(acc, 'push', ' MyClassName')
+
+        expect(acc).toHaveLength(2)
+
+        expect(acc[ 0 ].type).toBe('input')
+        expect(Object.keys(acc[ 0 ].props)).toHaveLength(2)
+        expect(acc[ 0 ].props.class).toBe('hidden')
+        expect(acc[ 0 ].props.myAttr).toBe('MyAttrValue')
+
+        expect(acc[ 1 ].type).toBe('input')
+        expect(Object.keys(acc[ 1 ].props)).toHaveLength(2)
+        expect(acc[ 1 ].props.class).toBe('hidden MyClassName')
+        expect(acc[ 1 ].props.myAttr).toBe('MyAttrValue')
+      })
+    })
+
+    describe('[(function)useFormInputNameAttr]', () => {
+      test('useFormInputNameAttr({ name })', () => {
+        const { value: result } = useFormInputNameAttr({
+          name: 'MyName'
+        })
+
+        expect(result).toBe('MyName')
+      })
+
+      test('useFormInputNameAttr({ for })', () => {
+        const { value: result } = useFormInputNameAttr({
+          for: 'MyFor'
+        })
+
+        expect(result).toBe('MyFor')
+      })
+
+      test('useFormInputNameAttr({ name, for })', () => {
+        const { value: result } = useFormInputNameAttr({
+          name: 'MyName',
+          for: 'MyFor'
+        })
+
+        expect(result).toBe('MyName')
+      })
+    })
+  })
+})

package/src/composables/{use-form-child.js → use-form/use-form-child.js}

@@ -1,6 +1,6 @@
 import { inject, watch, getCurrentInstance, onMounted, onBeforeUnmount } from 'vue'
 
-import { formKey } from '../utils/private/symbols.js'
+import { formKey } from '../../utils/private.symbols/symbols.js'
 
 export default function ({ validate, resetValidation, requiresQForm }) {
   const $form = inject(formKey, false)

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

@@ -1,7 +1,7 @@
 import { ref, onMounted } from 'vue'
 
 // using it to manage SSR rendering with best performance
-import { isRuntimeSsrPreHydration } from '../plugins/platform/Platform.js'
+import { isRuntimeSsrPreHydration } from '../../plugins/platform/Platform.js'
 
 export default function () {
   const isHydrated = ref(!isRuntimeSsrPreHydration.value)

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

@@ -0,0 +1,27 @@
+import { describe, test, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+
+import useHydration from './use-hydration.js'
+
+describe('[useHydration API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('can be used in a Vue Component', () => {
+        const wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const result = useHydration()
+              return { result }
+            }
+          })
+        )
+
+        expect(
+          wrapper.vm.result.isHydrated
+        ).$ref(true)
+      })
+    })
+  })
+})

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

@@ -1,8 +1,8 @@
 import { ref, computed, watch, onMounted } from 'vue'
 
-import uid from '../utils/uid.js'
+import uid from '../../utils/uid/uid.js'
 
-import { isRuntimeSsrPreHydration } from '../plugins/platform/Platform.js'
+import { isRuntimeSsrPreHydration } from '../../plugins/platform/Platform.js'
 
 function parseValue (val) {
   return val === void 0 || val === null

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

@@ -0,0 +1,72 @@
+import { describe, test, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+
+import useId from './use-id.js'
+
+const uidRE = /^f_/
+
+describe('[useId API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('useId()', () => {
+        const { value: result } = useId()
+        expect(result).toMatch(uidRE)
+      })
+
+      test('useId({})', () => {
+        const { value: result } = useId({})
+        expect(result).toMatch(uidRE)
+      })
+
+      test('useId({ getValue })', () => {
+        const { value: result } = useId({
+          getValue: () => 'MyValue'
+        })
+
+        expect(result).toBe('MyValue')
+      })
+
+      test('useId({ getValue: () => null })', () => {
+        const { value: result } = useId({
+          getValue: () => null
+        })
+
+        expect(result).toMatch(uidRE)
+      })
+
+      test('useId({ getValue: () => null, required: true })', () => {
+        const { value: result } = useId({
+          getValue: () => null,
+          required: true
+        })
+
+        expect(result).toMatch(uidRE)
+      })
+
+      test('useId({ getValue: () => null, required: false })', () => {
+        const { value: result } = useId({
+          getValue: () => null,
+          required: false
+        })
+
+        expect(result).toBeNull()
+      })
+
+      test('can be used in a Vue Component', () => {
+        const wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              // eslint-disable-next-line
+              const result = useId()
+              return { result }
+            }
+          })
+        )
+
+        expect(wrapper.vm.result).toMatch(/^f_/)
+      })
+    })
+  })
+})

package/src/composables/{use-interval.js → use-interval/use-interval.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-interval/use-interval.test.js

@@ -0,0 +1,173 @@
+import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+
+import useInterval from './use-interval.js'
+
+let wrapper
+
+beforeEach(() => {
+  vi.useFakeTimers()
+})
+
+afterEach(() => {
+  vi.clearAllTimers()
+  vi.restoreAllMocks()
+
+  if (wrapper !== null) {
+    wrapper.unmount()
+    wrapper = null
+  }
+})
+
+describe('[useInterval API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('correctly registers an interval (int)', () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerInterval } = useInterval()
+
+              registerInterval(fn, 100)
+              return {}
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(99)
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(1)
+        expect(fn).toHaveBeenCalledTimes(1)
+
+        vi.advanceTimersByTime(100)
+
+        expect(fn).toHaveBeenCalledTimes(2)
+      })
+
+      test('correctly registers an interval (str)', () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerInterval } = useInterval()
+
+              registerInterval(fn, '100')
+              return {}
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(99)
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(1)
+        expect(fn).toHaveBeenCalledTimes(1)
+
+        vi.advanceTimersByTime(100)
+
+        expect(fn).toHaveBeenCalledTimes(2)
+      })
+
+      test('removeInterval works correctly', () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const {
+                registerInterval,
+                removeInterval
+              } = useInterval()
+
+              registerInterval(fn, 100)
+              return { registerInterval, removeInterval }
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(200)
+        expect(fn).toHaveBeenCalledTimes(2)
+
+        wrapper.vm.removeInterval()
+        vi.advanceTimersToNextTimer()
+
+        expect(fn).toHaveBeenCalledTimes(2)
+
+        wrapper.vm.registerInterval(fn, 100)
+        wrapper.unmount()
+
+        vi.advanceTimersToNextTimer()
+        vi.runAllTimers()
+
+        expect(fn).toHaveBeenCalledTimes(2)
+      })
+
+      test('unmount stops timeout', () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerInterval } = useInterval()
+
+              registerInterval(fn, 100)
+              return {}
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+
+        wrapper.unmount()
+        wrapper = null
+
+        vi.advanceTimersToNextTimer()
+        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 { registerInterval } = useInterval()
+              return { registerInterval }
+            }
+          })
+        )
+
+        wrapper.vm.registerInterval(fn1, 100)
+        vi.advanceTimersByTime(99)
+        expect(fn1).not.toHaveBeenCalled()
+
+        wrapper.vm.registerInterval(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.advanceTimersToNextTimer()
+        expect(fn1).not.toHaveBeenCalled()
+        expect(fn2).toHaveBeenCalledTimes(2)
+      })
+    })
+  })
+})

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

@@ -1,6 +1,6 @@
 import { computed, watch, onActivated, onDeactivated, onUnmounted, useSSRContext } from 'vue'
 
-import { clientList, planClientUpdate } from '../plugins/meta/Meta.js'
+import { clientList, planClientUpdate } from '../../plugins/meta/Meta.js'
 
 export default function (metaOptions) {
   if (__QUASAR_SSR_SERVER__) {

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

@@ -1,5 +1,6 @@
 import { inject } from 'vue'
-import { quasarKey } from '../utils/private/symbols.js'
+
+import { quasarKey } from '../../utils/private.symbols/symbols.js'
 
 /**
  * Returns the $q instance.

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

@@ -0,0 +1,35 @@
+import { describe, test, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+
+import useQuasar from './use-quasar.js'
+
+describe('[useQuasar API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('can be used in a Vue Component', () => {
+        const wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const result = useQuasar()
+              return { result }
+            }
+          })
+        )
+
+        expect(
+          wrapper.vm.result
+        ).toBeTypeOf('object')
+
+        expect(
+          Object.keys(wrapper.vm.result)
+        ).not.toHaveLength(0)
+
+        expect(
+          wrapper.vm.result.version
+        ).toMatch(/^\d+\.\d+\.\d+$/)
+      })
+    })
+  })
+})

package/src/composables/{use-render-cache.js → use-render-cache/use-render-cache.js}

@@ -25,7 +25,7 @@ export default function () {
     },
 
     hasCache (key) {
-      return cache.hasOwnProperty(key)
+      return Object.hasOwnProperty.call(cache, key)
     },
 
     clearCache (key) {
@@ -33,7 +33,7 @@ export default function () {
         delete cache[ key ]
       }
       else {
-        cache = {}
+        cache = Object.create(null)
       }
     }
   }