quasar 2.15.2 → 2.15.4

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

@@ -0,0 +1,62 @@
+import { describe, test, expect } from 'vitest'
+
+import useAlign, { alignMap, alignValues, useAlignProps } from './use-align.js'
+
+describe('[useAlign API]', () => {
+  describe('[Variables]', () => {
+    describe('[(variable)alignMap]', () => {
+      test('is defined correctly', () => {
+        expect(alignMap).toBeTypeOf('object')
+        expect(Object.keys(alignMap)).not.toHaveLength(0)
+      })
+    })
+
+    describe('[(variable)alignValues]', () => {
+      test('is defined correctly', () => {
+        expect(Array.isArray(alignValues)).toBe(true)
+        expect(alignValues).not.toHaveLength(0)
+      })
+    })
+
+    describe('[(variable)useAlignProps]', () => {
+      test('is defined correctly', () => {
+        expect(useAlignProps).toBeTypeOf('object')
+        expect(Object.keys(useAlignProps)).not.toHaveLength(0)
+      })
+    })
+  })
+
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('returns correctly', () => {
+        expect(
+          useAlign({})
+        ).$ref()
+      })
+
+      test('horizontal', () => {
+        expect(
+          useAlign({}).value
+        ).toMatch(/^justify-/)
+      })
+
+      test('vertical', () => {
+        expect(
+          useAlign({ vertical: true }).value
+        ).toMatch(/^items-/)
+      })
+
+      test.each([
+        [ 'empty', {}, 'justify-start' ],
+        [ 'vertical', { vertical: true }, 'items-stretch' ],
+        [ 'align right', { align: 'right' }, 'justify-end' ],
+        [ 'align evenly', { align: 'evenly' }, 'justify-evenly' ],
+        [ 'vertical right', { vertical: true, align: 'right' }, 'items-end' ]
+      ])('useAlign: %s', (_, arg, expected) => {
+        expect(
+          useAlign(arg)
+        ).$ref(expected)
+      })
+    })
+  })
+})

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

@@ -1,8 +1,8 @@
 import { ref, watch, onMounted, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
 
-import { clearSelection } from '../../utils/private/selection.js'
-import { addEvt, cleanEvt, prevent } from '../../utils/event.js'
-import { isKeyCode } from '../../utils/private/key-composition.js'
+import { clearSelection } from '../../utils/private.selection/selection.js'
+import { addEvt, cleanEvt, prevent } from '../../utils/event/event.js'
+import { isKeyCode } from '../../utils/private.keyboard/key-composition.js'
 
 export const useAnchorProps = {
   target: {

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

@@ -4,7 +4,6 @@
       "type": [ "Boolean", "String", "Element" ],
       "desc": "Configure a target element to trigger component toggle; 'true' means it enables the parent DOM element, 'false' means it disables attaching events to any DOM elements; By using a String (CSS selector) or a DOM element it attaches the events to the specified DOM element (if it exists)",
       "default": "true",
-      "values": [ "true", "false", "# CSS selector", "# DOM Element" ],
       "examples": [
         "false",
         ".my-parent",

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

@@ -0,0 +1,68 @@
+import { describe, test, expect } from 'vitest'
+
+import useDark, { useDarkProps } from './use-dark.js'
+
+describe('[useDark API]', () => {
+  describe('[Variables]', () => {
+    describe('[(variable)useDarkProps]', () => {
+      test('is defined correctly', () => {
+        expect(useDarkProps).toBeTypeOf('object')
+        expect(Object.keys(useDarkProps)).not.toHaveLength(0)
+      })
+    })
+  })
+
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('has correct return value', () => {
+        expect(
+          useDark({}, {})
+        ).$ref()
+      })
+
+      test('keeps account of $q.dark when prop is null', () => {
+        const $q = {
+          dark: {
+            isActive: true
+          }
+        }
+
+        expect(
+          useDark({ dark: null }, $q)
+        ).$ref(true)
+
+        $q.dark.isActive = false
+
+        expect(
+          useDark({ dark: null }, $q)
+        ).$ref(false)
+      })
+
+      test('returns prop value regardless of $q.dark', () => {
+        const $q = {
+          dark: {
+            isActive: true
+          }
+        }
+
+        expect(
+          useDark({ dark: true }, $q)
+        ).$ref(true)
+
+        expect(
+          useDark({ dark: false }, $q)
+        ).$ref(false)
+
+        $q.dark.isActive = false
+
+        expect(
+          useDark({ dark: true }, $q)
+        ).$ref(true)
+
+        expect(
+          useDark({ dark: false }, $q)
+        ).$ref(false)
+      })
+    })
+  })
+})

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

@@ -3,14 +3,14 @@ import { h, ref, computed, Transition, nextTick, onActivated, onDeactivated, onB
 import QIcon from '../../components/icon/QIcon.js'
 import QSpinner from '../../components/spinner/QSpinner.js'
 
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useId from '../use-id.js'
-import useValidate, { useValidateProps } from './use-validate.js'
-import useSplitAttrs from '../use-split-attrs.js'
-
-import { hSlot } from '../../utils/private/render.js'
-import { prevent, stopAndPrevent } from '../../utils/event.js'
-import { addFocusFn, removeFocusFn } from '../../utils/private/focus-manager.js'
+import useId from '../use-id/use-id.js'
+import useSplitAttrs from '../use-split-attrs/use-split-attrs.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useValidate, { useValidateProps } from '../private.use-validate/use-validate.js'
+
+import { hSlot } from '../../utils/private.render/render.js'
+import { prevent, stopAndPrevent } from '../../utils/event/event.js'
+import { addFocusFn, removeFocusFn } from '../../utils/private.focus/focus-manager.js'
 
 export function fieldValueIsFilled (val) {
   return val !== void 0

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

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-validate" ],
+  "mixins": [ "composables/private.use-validate/use-validate" ],
 
   "props": {
     "label": {
@@ -166,13 +166,6 @@
       "desc": "Used to specify the 'id' of the control and also the 'for' attribute of the label that wraps it; If no 'name' prop is specified, then it is used for this attribute as well",
       "examples": [ "'myFieldsId'" ],
       "category": "behavior"
-    },
-
-    "name": {
-      "type": "String",
-      "desc": "Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of 'for' prop, if it exists",
-      "examples": [ "'car_id'" ],
-      "category": "behavior"
     }
   },
 
@@ -232,11 +225,15 @@
 
   "methods": {
     "focus": {
-      "desc": "Focus component"
+      "desc": "Focus component",
+      "params": null,
+      "returns": null
     },
 
     "blur": {
-      "desc": "Blur component (lose focus)"
+      "desc": "Blur component (lose focus)",
+      "params": null,
+      "returns": null
     }
   }
 }

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

@@ -1,7 +1,7 @@
 import { h, ref, computed, getCurrentInstance } from 'vue'
 
 import { client } from '../../plugins/platform/Platform.js'
-import { stop, stopAndPrevent } from '../../utils/event.js'
+import { stop, stopAndPrevent } from '../../utils/event/event.js'
 
 function filterFiles (files, rejectedFiles, failedPropValidation, filterFn) {
   const acceptedFiles = []

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

@@ -77,7 +77,8 @@
         "evt": {
           "extends": "evt"
         }
-      }
+      },
+      "returns": null
     },
 
     "addFiles": {
@@ -88,7 +89,8 @@
           "desc": "Array of files (instances of File)",
           "required": true
         }
-      }
+      },
+      "returns": null
     }
   }
 }

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

@@ -1,7 +1,7 @@
 import { ref, watch, onBeforeMount, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
 
-import History from '../../history.js'
-import { vmHasRouter } from '../../utils/private/vm.js'
+import History from '../../plugins/private.history/History.js'
+import { vmHasRouter } from '../../utils/private.vm/vm.js'
 
 let counter = 0
 

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

@@ -29,14 +29,20 @@
 
   "methods": {
     "toggleFullscreen": {
-      "desc": "Toggle the view to be fullscreen or not fullscreen"
+      "desc": "Toggle the view to be fullscreen or not fullscreen",
+      "params": null,
+      "returns": null
     },
     "setFullscreen": {
-      "desc": "Enter the fullscreen view"
+      "desc": "Enter the fullscreen view",
+      "params": null,
+      "returns": null
     },
 
     "exitFullscreen": {
-      "desc": "Leave the fullscreen view"
+      "desc": "Leave the fullscreen view",
+      "params": null,
+      "returns": null
     }
   }
 }

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

@@ -1,6 +1,6 @@
 import { onBeforeUnmount } from 'vue'
 
-import History from '../../history.js'
+import History from '../../plugins/private.history/History.js'
 
 export default function (showing, hide, hideOnRouteChange) {
   let historyEntry

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

@@ -0,0 +1,116 @@
+import { mount } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+import { computed, defineComponent } from 'vue'
+
+import useHistory from './use-history.js'
+
+describe('[useHistory API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('can be used in a Vue Component', () => {
+        const wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const showing = computed(() => false)
+              const hide = () => {}
+              const hideOnRouteChange = computed(() => false)
+              const result = useHistory(showing, hide, hideOnRouteChange)
+              return { result }
+            }
+          })
+        )
+
+        expect(
+          wrapper.vm.result
+        ).toStrictEqual({
+          removeFromHistory: expect.any(Function),
+          addToHistory: expect.any(Function)
+        })
+
+        wrapper.unmount()
+      })
+
+      test('can add and remove', () => {
+        const wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const showing = computed(() => false)
+              const hide = () => {}
+              const hideOnRouteChange = computed(() => false)
+              return useHistory(showing, hide, hideOnRouteChange)
+            }
+          })
+        )
+
+        expect(
+          () => wrapper.vm.removeFromHistory()
+        ).not.toThrow()
+
+        expect(
+          wrapper.vm.addToHistory()
+        ).toBeUndefined()
+
+        expect(
+          wrapper.vm.removeFromHistory()
+        ).toBeUndefined()
+
+        expect(
+          () => wrapper.vm.removeFromHistory()
+        ).not.toThrow()
+      })
+
+      test('does not throw on unmount with showing=true', () => {
+        const wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const showing = computed(() => true)
+              const hide = () => {}
+              const hideOnRouteChange = computed(() => false)
+              return useHistory(showing, hide, hideOnRouteChange)
+            }
+          })
+        )
+
+        expect(
+          () => wrapper.unmount()
+        ).not.toThrow()
+      })
+
+      /*
+       * Needs Capacitor or Cordova
+       *
+
+      test('hide handler is called on route change', async () => {
+        const router = await getRouter('/home')
+
+        const hide = vi.fn()
+
+        const wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const showing = computed(() => false)
+              const hideOnRouteChange = computed(() => true)
+              return useHistory(showing, hide, hideOnRouteChange)
+            }
+          }, {
+            global: {
+              plugins: [ router ]
+            }
+          })
+        )
+
+        await router.push('/home')
+
+        // trigger BACK button
+
+        expect(hide).toHaveBeenCalledTimes(1)
+        expect(hide).toHaveBeenCalledWith()
+      })
+      */
+    })
+  })
+})

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

@@ -1,6 +1,6 @@
 import { watch, nextTick, onMounted, getCurrentInstance } from 'vue'
 
-import { vmHasRouter } from '../../utils/private/vm.js'
+import { vmHasRouter } from '../../utils/private.vm/vm.js'
 
 export const useModelToggleProps = {
   modelValue: {

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

@@ -2,10 +2,10 @@ import { h, ref, computed, watch, nextTick, getCurrentInstance, Transition, Keep
 
 import TouchSwipe from '../../directives/touch-swipe/TouchSwipe.js'
 
-import useRenderCache from '../../composables/use-render-cache.js'
+import useRenderCache from '../../composables/use-render-cache/use-render-cache.js'
 
-import { hSlot } from '../../utils/private/render.js'
-import { getNormalizedVNodes } from '../../utils/private/vm.js'
+import { hSlot } from '../../utils/private.render/render.js'
+import { getNormalizedVNodes } from '../../utils/private.vm/vm.js'
 
 export const usePanelChildProps = {
   name: { required: true },

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

@@ -16,14 +16,14 @@
     "keep-alive-include": {
       "type": [ "String", "Array", "RegExp" ],
       "desc": "Equivalent to using Vue's native include prop for <keep-alive>; Values must be valid Vue component names",
-      "examples": [ "'a,b'", "/a|b/", "['a', 'b']" ],
+      "examples": [ "'a,b'", "/a|b/", "[ 'a', 'b' ]" ],
       "category": "behavior"
     },
 
     "keep-alive-exclude": {
       "type": [ "String", "Array", "RegExp"  ],
       "desc": "Equivalent to using Vue's native exclude prop for <keep-alive>; Values must be valid Vue component names",
-      "examples": [ "'a,b'", "/a|b/", "['a', 'b']" ],
+      "examples": [ "'a,b'", "/a|b/", "[ 'a', 'b' ]" ],
       "category": "behavior"
     },
 
@@ -127,11 +127,15 @@
 
   "methods": {
     "next": {
-      "desc": "Go to next panel"
+      "desc": "Go to next panel",
+      "params": null,
+      "returns": null
     },
 
     "previous": {
-      "desc": "Go to previous panel"
+      "desc": "Go to previous panel",
+      "params": null,
+      "returns": null
     },
 
     "goTo": {
@@ -143,7 +147,8 @@
           "required": true,
           "examples": [ "'dashboard'" ]
         }
-      }
+      },
+      "returns": null
     }
   }
 }

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

@@ -1,11 +1,11 @@
 import { h, ref, onUnmounted, Teleport } from 'vue'
 
-import { createComponent } from '../../utils/private/create.js'
-import { noop } from '../../utils/event.js'
-import { addFocusWaitFlag, removeFocusWaitFlag } from '../../utils/private/focus-manager.js'
-import { createGlobalNode, removeGlobalNode } from '../../utils/private/global-nodes.js'
-import { portalProxyList } from '../../utils/private/portal.js'
-import { injectProp } from '../../utils/private/inject-obj-prop.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { noop } from '../../utils/event/event.js'
+import { addFocusWaitFlag, removeFocusWaitFlag } from '../../utils/private.focus/focus-manager.js'
+import { createGlobalNode, removeGlobalNode } from '../../utils/private.global/global-nodes.js'
+import { portalProxyList } from '../../utils/private.portal/portal.js'
+import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
 
 /**
  * Noop internal component to ease testing

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

@@ -1,4 +1,4 @@
-import preventScroll from '../../utils/prevent-scroll.js'
+import preventScroll from '../../utils/scroll/prevent-scroll.js'
 
 export default function () {
   let currentState

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

@@ -0,0 +1,40 @@
+import { describe, test, expect } from 'vitest'
+
+import useRatio, { useRatioProps } from './use-ratio.js'
+
+describe('[useRatio API]', () => {
+  describe('[Variables]', () => {
+    describe('[(variable)useRatioProps]', () => {
+      test('is defined correctly', () => {
+        expect(useRatioProps).toBeTypeOf('object')
+        expect(Object.keys(useRatioProps)).not.toHaveLength(0)
+      })
+    })
+  })
+
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('should return padding when ratio is supplied', () => {
+        const { value } = useRatio({ ratio: 2 })
+        expect(value).toBeTypeOf('object')
+        expect(value.paddingBottom).toBeTruthy()
+      })
+
+      test('should return padding when naturalRatio is supplied', () => {
+        const { value } = useRatio({}, { value: 2 })
+        expect(value).toBeTypeOf('object')
+        expect(value.paddingBottom).toBeTruthy()
+      })
+
+      test('should not return padding when invalid params', () => {
+        const { value } = useRatio({ ratio: 'a' })
+        expect(value).toBeNull()
+      })
+
+      test('should not return padding when no params are supplied', () => {
+        const { value } = useRatio({})
+        expect(value).toBeNull()
+      })
+    })
+  })
+})

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

@@ -5,7 +5,7 @@
 
 import { computed, getCurrentInstance } from 'vue'
 
-import { vmHasRouter } from '../../utils/private/vm.js'
+import { vmHasRouter } from '../../utils/private.vm/vm.js'
 
 // Get the original path value of a record by following its aliasOf
 function getOriginalPath (record) {

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

@@ -1,11 +1,8 @@
 import { ref, watch, onBeforeUnmount } from 'vue'
 
-import { listenOpts } from '../../utils/event.js'
+import { listenOpts } from '../../utils/event/event.js'
 
-export default function (
-  props,
-  configureScrollTarget
-) {
+export default function (props, configureScrollTarget) {
   const localScrollTarget = ref(null)
   let scrollFn
 

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

@@ -0,0 +1,40 @@
+import { describe, test, expect } from 'vitest'
+
+import useSize, { useSizeDefaults, useSizeProps } from './use-size.js'
+
+describe('[useSize API]', () => {
+  describe('[Variables]', () => {
+    describe('[(variable)useSizeDefaults]', () => {
+      test('is defined correctly', () => {
+        expect(useSizeDefaults).toBeTypeOf('object')
+        expect(Object.keys(useSizeDefaults)).not.toHaveLength(0)
+      })
+    })
+
+    describe('[(variable)useSizeProps]', () => {
+      test('is defined correctly', () => {
+        expect(useSizeProps).toBeTypeOf('object')
+        expect(Object.keys(useSizeProps)).not.toHaveLength(0)
+      })
+    })
+  })
+
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('should set the size', () => {
+        const { value } = useSize({ size: '24px' })
+        expect(value.fontSize).toBe('24px')
+      })
+
+      test('should set the size with standard size names', () => {
+        const { value } = useSize({ size: 'sm' })
+        expect(value.fontSize).toBe(`${ useSizeDefaults.sm }px`)
+      })
+
+      test('should set the size with custom size names', () => {
+        const { value } = useSize({ size: 'xs' }, { xs: 55 })
+        expect(value.fontSize).toBe('55px')
+      })
+    })
+  })
+})