quasar 2.15.2 → 2.15.3

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-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-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-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.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": [