quasar 2.15.2 → 2.15.4

package/src/components/toolbar/QToolbarTitle.test.js

@@ -0,0 +1,45 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QToolbarTitle from './QToolbarTitle.js'
+
+describe('[QToolbarTitle API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)shrink]', () => {
+      test('is defined correctly', () => {
+        expect(QToolbarTitle.props.shrink).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QToolbarTitle)
+        const target = wrapper.get('.q-toolbar__title')
+
+        expect(
+          target.classes()
+        ).not.toContain('col-shrink')
+
+        await wrapper.setProps({ shrink: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('col-shrink')
+      })
+    })
+  })
+
+  describe('[Slots]', () => {
+    describe('[(slot)default]', () => {
+      test('renders the content', () => {
+        const slotContent = 'some-slot-content'
+        const wrapper = mount(QToolbarTitle, {
+          slots: {
+            default: () => slotContent
+          }
+        })
+
+        expect(wrapper.html()).toContain(slotContent)
+      })
+    })
+  })
+})

package/src/components/tooltip/QTooltip.js

@@ -1,22 +1,22 @@
 import { h, ref, computed, watch, onBeforeUnmount, Transition, getCurrentInstance } from 'vue'
 
-import useAnchor, { useAnchorProps } from '../../composables/private/use-anchor.js'
-import useScrollTarget from '../../composables/private/use-scroll-target.js'
-import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
-import usePortal from '../../composables/private/use-portal.js'
-import useTransition, { useTransitionProps } from '../../composables/private/use-transition.js'
-import useTick from '../../composables/use-tick.js'
-import useTimeout from '../../composables/use-timeout.js'
-
-import { createComponent } from '../../utils/private/create.js'
-import { getScrollTarget } from '../../utils/scroll.js'
-import { stopAndPrevent, addEvt, cleanEvt } from '../../utils/event.js'
-import { clearSelection } from '../../utils/private/selection.js'
-import { hSlot } from '../../utils/private/render.js'
-import { addClickOutside, removeClickOutside } from '../../utils/private/click-outside.js'
+import useAnchor, { useAnchorProps } from '../../composables/private.use-anchor/use-anchor.js'
+import useScrollTarget from '../../composables/private.use-scroll-target/use-scroll-target.js'
+import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private.use-model-toggle/use-model-toggle.js'
+import usePortal from '../../composables/private.use-portal/use-portal.js'
+import useTransition, { useTransitionProps } from '../../composables/private.use-transition/use-transition.js'
+import useTick from '../../composables/use-tick/use-tick.js'
+import useTimeout from '../../composables/use-timeout/use-timeout.js'
+
+import { createComponent } from '../../utils/private.create/create.js'
+import { getScrollTarget } from '../../utils/scroll/scroll.js'
+import { stopAndPrevent, addEvt, cleanEvt } from '../../utils/event/event.js'
+import { clearSelection } from '../../utils/private.selection/selection.js'
+import { hSlot } from '../../utils/private.render/render.js'
+import { addClickOutside, removeClickOutside } from '../../utils/private.click-outside/click-outside.js'
 import {
   validatePosition, validateOffset, setPosition, parsePosition
-} from '../../utils/private/position-engine.js'
+} from '../../utils/private.position-engine/position-engine.js'
 
 export default createComponent({
   name: 'QTooltip',

package/src/components/tooltip/QTooltip.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-model-toggle", "composables/private/use-portal", "composables/private/use-transition" ],
+  "mixins": [ "composables/private.use-model-toggle/use-model-toggle", "composables/private.use-portal/use-portal", "composables/private.use-transition/use-transition" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/tooltip"
@@ -57,8 +57,8 @@
     "offset": {
       "type": "Array",
       "desc": "An array of two numbers to offset the Tooltip horizontally and vertically in pixels",
-      "default": "[14, 14]",
-      "examples": [ "[8, 8]", "[5, 10]" ],
+      "default": "[ 14, 14 ]",
+      "examples": [ "[ 8, 8 ]", "[ 5, 10 ]" ],
       "category": "position"
     },
 
@@ -70,7 +70,6 @@
       "type": [ "Boolean", "String" ],
       "desc": "Configure a target element to trigger Tooltip 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) it attaches the events to the specified DOM element (if it exists)",
       "default": "true",
-      "values": [ "true", "false", "# CSS selector" ],
       "examples": [ "# :target=\"false\"", "# target=\".my-parent\"" ],
       "category": "behavior"
     },
@@ -110,7 +109,9 @@
 
   "methods": {
     "updatePosition": {
-      "desc": "There are some custom scenarios for which Quasar cannot automatically reposition the tooltip without significant performance drawbacks so the optimal solution is for you to call this method when you need it"
+      "desc": "There are some custom scenarios for which Quasar cannot automatically reposition the tooltip without significant performance drawbacks so the optimal solution is for you to call this method when you need it",
+      "params": null,
+      "returns": null
     }
   }
 }

package/src/components/tree/QTree.js

@@ -8,12 +8,12 @@ import QCheckbox from '../checkbox/QCheckbox.js'
 import QSlideTransition from '../slide-transition/QSlideTransition.js'
 import QSpinner from '../spinner/QSpinner.js'
 
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { stopAndPrevent } from '../../utils/event.js'
-import { shouldIgnoreKey } from '../../utils/private/key-composition.js'
-import { injectProp } from '../../utils/private/inject-obj-prop.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { stopAndPrevent } from '../../utils/event/event.js'
+import { shouldIgnoreKey } from '../../utils/private.keyboard/key-composition.js'
+import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
 
 const tickStrategyOptions = [ 'none', 'strict', 'leaf', 'leaf-filtered' ]
 

package/src/components/tree/QTree.json

@@ -442,6 +442,7 @@
 
     "getTickedNodes": {
       "desc": "Get array of nodes that are ticked",
+      "params": null,
       "returns": {
         "type": "Array",
         "desc": "Ticked node objects"
@@ -450,6 +451,7 @@
 
     "getExpandedNodes": {
       "desc": "Get array of nodes that are expanded",
+      "params": null,
       "returns": {
         "type": "Array",
         "desc": "Expanded node objects"
@@ -473,11 +475,15 @@
     },
 
     "expandAll": {
-      "desc": "Use to expand all branches of the tree"
+      "desc": "Use to expand all branches of the tree",
+      "params": null,
+      "returns": null
     },
 
     "collapseAll": {
-      "desc": "Use to collapse all branches of the tree"
+      "desc": "Use to collapse all branches of the tree",
+      "params": null,
+      "returns": null
     },
 
     "setExpanded": {
@@ -494,7 +500,8 @@
           "required": true,
           "desc": "Set to 'true' to expand the branch of the tree, otherwise 'false' collapses it"
         }
-      }
+      },
+      "returns": null
     },
 
     "isTicked": {
@@ -527,7 +534,8 @@
           "required": true,
           "desc": "Set to 'true' to tick the checkbox of nodes, otherwise 'false' unticks them"
         }
-      }
+      },
+      "returns": null
     }
   }
 }

package/src/components/uploader/QUploader.js

@@ -1,4 +1,4 @@
-import createUploaderComponent from '../../utils/create-uploader-component.js'
+import createUploaderComponent from '../../utils/create-uploader-component/create-uploader-component.js'
 import xhrUploaderPlugin from './xhr-uploader-plugin.js'
 
 export default createUploaderComponent(xhrUploaderPlugin)

package/src/components/uploader/QUploader.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-file", "components/uploader/xhr-uploader-plugin" ],
+  "mixins": [ "composables/private.use-file/use-file", "components/uploader/xhr-uploader-plugin" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/uploader"
@@ -120,23 +120,33 @@
 
   "methods": {
     "upload": {
-      "desc": "Start uploading (same as clicking the upload button)"
+      "desc": "Start uploading (same as clicking the upload button)",
+      "params": null,
+      "returns": null
     },
 
     "abort": {
-      "desc": "Abort upload of all files (same as clicking the abort button)"
+      "desc": "Abort upload of all files (same as clicking the abort button)",
+      "params": null,
+      "returns": null
     },
 
     "reset": {
-      "desc": "Resets uploader to default; Empties queue, aborts current uploads"
+      "desc": "Resets uploader to default; Empties queue, aborts current uploads",
+      "params": null,
+      "returns": null
     },
 
     "removeUploadedFiles": {
-      "desc": "Removes already uploaded files from the list"
+      "desc": "Removes already uploaded files from the list",
+      "params": null,
+      "returns": null
     },
 
     "removeQueuedFiles": {
-      "desc": "Remove files that are waiting for upload to start (same as clicking the left clear button)"
+      "desc": "Remove files that are waiting for upload to start (same as clicking the left clear button)",
+      "params": null,
+      "returns": null
     },
 
     "removeFile": {
@@ -147,7 +157,8 @@
           "desc": "The file to remove",
           "required": true
         }
-      }
+      },
+      "returns": null
     },
 
     "updateFileStatus": {
@@ -169,11 +180,13 @@
           "desc": "The number of uploaded bytes of the file; Is required explicitly only when status is NOT 'uploaded'",
           "required": true
         }
-      }
+      },
+      "returns": null
     },
 
     "isAlive": {
       "desc": "Is the component alive (activated but not unmounted); Useful to determine if you still need to compute anything going further",
+      "params": null,
       "returns": {
         "type": "Boolean",
         "desc": "If true, the current component is still activated and mounted"
@@ -188,7 +201,8 @@
           "required": true,
           "desc": "JS event object of the original user interaction handler"
         }
-      }
+      },
+      "returns": null
     },
 
     "addFiles": {
@@ -199,7 +213,8 @@
           "required": true,
           "desc": "Must be an array of instances of JS File type"
         }
-      }
+      },
+      "returns": null
     }
   },
 

package/src/components/uploader/QUploaderAddTrigger.js

@@ -1,7 +1,7 @@
 import { inject } from 'vue'
 
-import { createComponent } from '../../utils/private/create.js'
-import { uploaderKey, emptyRenderFn } from '../../utils/private/symbols.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { uploaderKey, emptyRenderFn } from '../../utils/private.symbols/symbols.js'
 
 export default createComponent({
   name: 'QUploaderAddTrigger',

package/src/components/uploader/uploader-core.js

@@ -5,14 +5,14 @@ import QIcon from '../icon/QIcon.js'
 import QSpinner from '../spinner/QSpinner.js'
 import QCircularProgress from '../circular-progress/QCircularProgress.js'
 
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useFile, { useFileProps, useFileEmits } from '../../composables/private/use-file.js'
-
-import { stop } from '../../utils/event.js'
-import { humanStorageSize } from '../../utils/format.js'
-import { uploaderKey } from '../../utils/private/symbols.js'
-import { injectProp, injectMultipleProps } from '../../utils/private/inject-obj-prop.js'
-import { vmIsDestroyed } from '../../utils/private/vm.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useFile, { useFileProps, useFileEmits } from '../../composables/private.use-file/use-file.js'
+
+import { stop } from '../../utils/event/event.js'
+import { humanStorageSize } from '../../utils/format/format.js'
+import { uploaderKey } from '../../utils/private.symbols/symbols.js'
+import { injectProp, injectMultipleProps } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
+import { vmIsDestroyed } from '../../utils/private.vm/vm.js'
 
 function getProgressLabel (p) {
   return (p * 100).toFixed(2) + '%'

package/src/components/uploader/xhr-uploader-plugin.js

@@ -6,6 +6,8 @@ function getFn (prop) {
     : () => prop
 }
 
+const name = 'QUploader'
+
 const props = {
   url: [ Function, String ],
   method: {
@@ -251,7 +253,7 @@ function injectPlugin ({ props, emit, helpers }) {
 }
 
 export default {
-  name: 'QUploader',
+  name,
   props,
   emits,
   injectPlugin

package/src/components/uploader/xhr-uploader-plugin.json

@@ -20,7 +20,7 @@
     "url": {
       "type": [ "String", "Function" ],
       "desc": "URL or path to the server which handles the upload. Takes String or factory function, which returns String. Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
-      "examples": [ "'https://example.com/path'", "files => `https://example.com?count=${files.length}`" ],
+      "examples": [ "'https://example.com/path'", "files => `https://example.com?count=${ files.length }`" ],
       "params": {
         "files": {
           "type": "Array",
@@ -56,10 +56,10 @@
     "field-name": {
       "type": [ "String", "Function" ],
       "desc": "Field name for each file upload; This goes into the following header: 'Content-Disposition: form-data; name=\"__HERE__\"; filename=\"somefile.png\"; If using a function then for best performance, reference it from your scope and do not define it inline",
-      "default": "(file) => file.name",
+      "default": "file => file.name",
       "examples": [
         "'backgroundFile'",
-        "(file) => ('background' + file.name)"
+        "file => ('background' + file.name)"
       ],
       "params": {
         "files": {
@@ -92,9 +92,9 @@
         }
       },
       "examples": [
-        "[{name: 'Content-Type', value: 'application/json'}, {name: 'Accept', value: 'application/json'}]",
-        "() => [{name: 'X-Custom-Timestamp', value: Date.now()}]",
-        "files => [{name: 'X-Custom-Count', value: files.length}]"
+        "[ { name: 'Content-Type', value: 'application/json' }, { name: 'Accept', value: 'application/json' } ]",
+        "() => [ { name: 'X-Custom-Timestamp', value: Date.now() } ]",
+        "files => [ { name: 'X-Custom-Count', value: files.length } ]"
       ],
       "params": {
         "files": {
@@ -127,9 +127,9 @@
         }
       },
       "examples": [
-        "[{name: 'my-field', value: 'my-value'}]",
-        "() => [{name: 'my-field', value: 'my-value'}]",
-        "files => [{name: 'my-field', value: 'my-value' + files.length}]"
+        "[ { name: 'my-field', value: 'my-value' } ]",
+        "() => [ { name: 'my-field', value: 'my-value' } ]",
+        "files => [ { name: 'my-field', value: 'my-value' + files.length } ]"
       ],
       "params": {
         "files": {

package/src/components/video/QVideo.js

@@ -1,8 +1,8 @@
 import { h, computed } from 'vue'
 
-import useRatio, { useRatioProps } from '../../composables/private/use-ratio.js'
+import useRatio, { useRatioProps } from '../../composables/private.use-ratio/use-ratio.js'
 
-import { createComponent } from '../../utils/private/create.js'
+import { createComponent } from '../../utils/private.create/create.js'
 
 export default createComponent({
   name: 'QVideo',

package/src/components/video/QVideo.json

@@ -3,7 +3,7 @@
     "docsUrl": "https://v2.quasar.dev/vue-components/video"
   },
 
-  "mixins": [ "composables/private/use-ratio" ],
+  "mixins": [ "composables/private.use-ratio/use-ratio" ],
 
   "props": {
     "src": {

package/src/components/video/QVideo.test.js

@@ -0,0 +1,183 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QVideo from './QVideo.js'
+
+describe('[QVideo API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)ratio]', () => {
+      test('is defined correctly', () => {
+        expect(QVideo.props.ratio).toBeDefined()
+      })
+
+      test.each([
+        [ 'String', '5' ],
+        [ 'Number', 5 ]
+      ])('type %s has effect', async (_, propVal) => {
+        const wrapper = mount(QVideo, {
+          props: {
+            src: 'https://www.youtube.com/embed/k3_tw44QsZQ'
+          }
+        })
+
+        expect(
+          wrapper.get('.q-video')
+            .$style('padding-bottom')
+        ).toBe('')
+
+        await wrapper.setProps({ ratio: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.get('.q-video')
+            .$style('padding-bottom')
+        ).toBe('20%')
+      })
+    })
+
+    describe('[(prop)src]', () => {
+      test('is defined correctly', () => {
+        expect(QVideo.props.src).toBeDefined()
+      })
+
+      test('type String has effect', () => {
+        const propVal = 'https://www.youtube.com/embed/k3_tw44QsZQ'
+        const wrapper = mount(QVideo, {
+          props: {
+            src: propVal
+          }
+        })
+
+        expect(
+          wrapper.get('iframe')
+            .attributes('src')
+        ).toBe(propVal)
+      })
+    })
+
+    describe('[(prop)title]', () => {
+      test('is defined correctly', () => {
+        expect(QVideo.props.title).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const wrapper = mount(QVideo, {
+          props: {
+            src: 'https://www.youtube.com/embed/k3_tw44QsZQ'
+          }
+        })
+
+        expect(
+          wrapper.get('iframe')
+            .attributes('title')
+        ).toBeUndefined()
+
+        const propVal = 'My Daily Marathon'
+        await wrapper.setProps({ title: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.get('iframe')
+            .attributes('title')
+        ).toBe(propVal)
+      })
+    })
+
+    describe('[(prop)fetchpriority]', () => {
+      test('is defined correctly', () => {
+        expect(QVideo.props.fetchpriority).toBeDefined()
+      })
+
+      test.each([
+        [ 'high' ],
+        [ 'low' ],
+        [ 'auto' ]
+      ])('value "%s" has effect', async propVal => {
+        const wrapper = mount(QVideo, {
+          props: {
+            src: 'https://www.youtube.com/embed/k3_tw44QsZQ'
+          }
+        })
+
+        expect(
+          wrapper.get('iframe')
+            .attributes('fetchpriority')
+        ).toBe('auto')
+
+        await wrapper.setProps({ fetchpriority: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.get('iframe')
+            .attributes('fetchpriority')
+        ).toBe(propVal)
+      })
+    })
+
+    describe('[(prop)loading]', () => {
+      test('is defined correctly', () => {
+        expect(QVideo.props.loading).toBeDefined()
+      })
+
+      test.each([
+        [ 'eager' ],
+        [ 'lazy' ]
+      ])('value "%s" has effect', async propVal => {
+        const wrapper = mount(QVideo, {
+          props: {
+            src: 'https://www.youtube.com/embed/k3_tw44QsZQ'
+          }
+        })
+
+        expect(
+          wrapper.get('iframe')
+            .attributes('loading')
+        ).toBe('eager')
+
+        await wrapper.setProps({ loading: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.get('iframe')
+            .attributes('loading')
+        ).toBe(propVal)
+      })
+    })
+
+    describe('[(prop)referrerpolicy]', () => {
+      test('is defined correctly', () => {
+        expect(QVideo.props.referrerpolicy).toBeDefined()
+      })
+
+      test.each([
+        [ 'no-referrer' ],
+        [ 'no-referrer-when-downgrade' ],
+        [ 'origin' ],
+        [ 'origin-when-cross-origin' ],
+        [ 'same-origin' ],
+        [ 'strict-origin' ],
+        [ 'strict-origin-when-cross-origin' ],
+        [ 'unsafe-url' ]
+      ])('value "%s" has effect', async propVal => {
+        const wrapper = mount(QVideo, {
+          props: {
+            src: 'https://www.youtube.com/embed/k3_tw44QsZQ'
+          }
+        })
+
+        expect(
+          wrapper.get('iframe')
+            .attributes('referrerpolicy')
+        ).toBe('strict-origin-when-cross-origin')
+
+        await wrapper.setProps({ referrerpolicy: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.get('iframe')
+            .attributes('referrerpolicy')
+        ).toBe(propVal)
+      })
+    })
+  })
+})

package/src/components/virtual-scroll/QVirtualScroll.js

@@ -6,10 +6,10 @@ import getTableMiddle from '../table/get-table-middle.js'
 
 import { useVirtualScroll, useVirtualScrollProps } from './use-virtual-scroll.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { getScrollTarget } from '../../utils/scroll.js'
-import { listenOpts } from '../../utils/event.js'
-import { hMergeSlot } from '../../utils/private/render.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { getScrollTarget } from '../../utils/scroll/scroll.js'
+import { listenOpts } from '../../utils/event/event.js'
+import { hMergeSlot } from '../../utils/private.render/render.js'
 
 const comps = {
   list: QList,

package/src/components/virtual-scroll/QVirtualScroll.json

@@ -67,6 +67,7 @@
         "details": {
           "definition": {
             "ref": {
+              "type": "Component",
               "tsType": "QVirtualScroll",
               "desc": "Vue reference to the QVirtualScroll"
             }

package/src/components/virtual-scroll/use-virtual-scroll.js

@@ -1,8 +1,8 @@
 import { h, ref, computed, watch, onActivated, onDeactivated, onBeforeMount, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
 
-import debounce from '../../utils/debounce.js'
-import { noop } from '../../utils/event.js'
-import { rtlHasScrollBug } from '../../utils/private/rtl.js'
+import debounce from '../../utils/debounce/debounce.js'
+import { noop } from '../../utils/event/event.js'
+import { rtlHasScrollBug } from '../../utils/private.rtl/rtl.js'
 
 const aggBucketSize = 1000
 

package/src/components/virtual-scroll/use-virtual-scroll.json

@@ -110,11 +110,14 @@
           "desc": "The edge to align to if the item is not visible already (by default it aligns to end if scrolling towards the end and to start otherwise); If the '-force' version is used then it always aligns",
           "values": [ "'start'", "'center'", "'end'", "'start-force'", "'center-force'", "'end-force'" ]
         }
-      }
+      },
+      "returns": null
     },
 
     "reset": {
-      "desc": "Resets the virtual scroll computations; Needed for custom edge-cases"
+      "desc": "Resets the virtual scroll computations; Needed for custom edge-cases",
+      "params": null,
+      "returns": null
     },
 
     "refresh": {
@@ -125,7 +128,8 @@
           "desc": "The index of the list item to scroll to after refresh (0 based); If it's not specified the scroll position is not changed; Use a negative value to keep scroll position",
           "examples": [ "5" ]
         }
-      }
+      },
+      "returns": null
     }
   }
 }