quasar 2.15.1 → 2.15.3

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",
@@ -36,10 +36,10 @@
 
     "method": {
       "type": [ "String", "Function" ],
-      "default": "POST",
+      "default": "'POST'",
       "desc": "HTTP method to use for upload; Takes String or factory function which returns a 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",
-      "values": [ "POST", "PUT" ],
-      "examples": [ "POST", ":method=\"files => files.length > 10 ? 'POST' : 'PUT'\"" ],
+      "values": [ "'POST'", "'PUT'" ],
+      "examples": [ "'POST'", "files => (files.length > 10 ? 'POST' : 'PUT')" ],
       "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",
-        ":field-name=\"(file) => 'background' + file.name\""
+        "'backgroundFile'",
+        "file => ('background' + file.name)"
       ],
       "params": {
         "files": {
@@ -82,19 +82,19 @@
           "type": "String",
           "required": true,
           "desc": "Header name",
-          "examples": [ "Content-Type", "Accept", "Cache-Control" ]
+          "examples": [ "'Content-Type'", "'Accept'", "'Cache-Control'" ]
         },
         "value": {
           "type": "String",
           "required": true,
           "desc": "Header value",
-          "examples": [ "application/json", "no-cache" ]
+          "examples": [ "'application/json'", "'no-cache'" ]
         }
       },
       "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": {
@@ -117,19 +117,19 @@
           "type": "String",
           "required": true,
           "desc": "Field name",
-          "examples": [ "Some field" ]
+          "examples": [ "'Some field'" ]
         },
         "value": {
           "type": "String",
           "required": true,
           "desc": "Field value",
-          "examples": [ "some-value" ]
+          "examples": [ "'some-value'" ]
         }
       },
       "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": {
@@ -147,7 +147,7 @@
     "with-credentials": {
       "type": [ "Boolean", "Function" ],
       "desc": "Sets withCredentials to true on the XHR that manages the upload; Takes boolean or factory function for Boolean; 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": [ "with-credentials", ":with-credentials=\"files => ...\"" ],
+      "examples": [ "true", "files => (files.length === 2)" ],
       "params": {
         "files": {
           "type": "Array",
@@ -164,7 +164,7 @@
     "send-raw": {
       "type": [ "Boolean", "Function" ],
       "desc": "Send raw files without wrapping into a Form(); Takes boolean or factory function for Boolean; 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": [ "send-raw", ":send-raw=\"files => ...\"" ],
+      "examples": [ "true", "files => (files.length > 2)" ],
       "params": {
         "files": {
           "type": "Array",

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,16 +3,14 @@
     "docsUrl": "https://v2.quasar.dev/vue-components/video"
   },
 
-  "mixins": [ "composables/private/use-ratio" ],
+  "mixins": [ "composables/private.use-ratio/use-ratio" ],
 
   "props": {
     "src": {
       "type": "String",
       "desc": "The source url to display in an iframe",
       "required": true,
-      "examples": [
-        "https://www.youtube.com/embed/k3_tw44QsZQ"
-      ],
+      "examples": [ "'https://www.youtube.com/embed/k3_tw44QsZQ'" ],
       "category": "model"
     },
 
@@ -20,9 +18,7 @@
       "type": "String",
       "desc": "(Accessibility) Set the native 'title' attribute value of the inner iframe being used",
       "required": false,
-      "examples": [
-        "My Daily Marathon"
-      ],
+      "examples": [ "'My Daily Marathon'" ],
       "category": "accessibility",
       "addedIn": "v2.4.3"
     },
@@ -30,8 +26,8 @@
     "fetchpriority": {
       "type": "String",
       "desc": "Provides a hint of the relative priority to use when fetching the iframe document",
-      "default": "auto",
-      "values": [ "high", "low", "auto" ],
+      "default": "'auto'",
+      "values": [ "'high'", "'low'", "'auto'" ],
       "category": "behavior",
       "addedIn": "v2.6.6"
     },
@@ -39,8 +35,8 @@
     "loading": {
       "type": "String",
       "desc": "Indicates how the browser should load the iframe",
-      "default": "eager",
-      "values": [ "eager", "lazy" ],
+      "default": "'eager'",
+      "values": [ "'eager'", "'lazy'" ],
       "category": "behavior",
       "addedIn": "v2.6.6"
     },
@@ -48,16 +44,16 @@
     "referrerpolicy": {
       "type": "String",
       "desc": "Indicates which referrer to send when fetching the frame's resource",
-      "default": "strict-origin-when-cross-origin",
+      "default": "'strict-origin-when-cross-origin'",
       "values": [
-        "no-referrer",
-        "no-referrer-when-downgrade",
-        "origin",
-        "origin-when-cross-origin",
-        "same-origin",
-        "strict-origin",
-        "strict-origin-when-cross-origin",
-        "unsafe-url"
+        "'no-referrer'",
+        "'no-referrer-when-downgrade'",
+        "'origin'",
+        "'origin-when-cross-origin'",
+        "'same-origin'",
+        "'strict-origin'",
+        "'strict-origin-when-cross-origin'",
+        "'unsafe-url'"
       ],
       "category": "behavior",
       "addedIn": "v2.6.6"

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

@@ -9,8 +9,8 @@
     "type": {
       "type": "String",
       "desc": "The type of content: list (default) or table",
-      "default": "list",
-      "values": [ "list", "table" ],
+      "default": "'list'",
+      "values": [ "'list'", "'table'" ],
       "category": "content"
     },
 
@@ -19,8 +19,8 @@
       "desc": "Available list items that will be passed to the scoped slot; For best performance freeze the list of items; Required if 'itemsFn' is not supplied",
       "default": "[]",
       "examples": [
-        ":items=\"[ 'BMW', 'Samsung Phone' ]\"",
-        ":items=\"[ { label: 'BMW', value: 'car' }, { label: 'Samsung Phone', value: 'phone' } ]\""
+        "[ 'Tesla', 'iPhone' ]",
+        "[ { label: 'Tesla', value: 'car' }, { label: 'iPhone', value: 'phone' } ]"
       ],
       "category": "content"
     },
@@ -28,11 +28,8 @@
     "items-size": {
       "type": "Number",
       "desc": "Number of available items in the list; Required and used only if 'itemsFn' is provided",
-      "default": "void 0",
-      "examples": [
-        ":items-size=\"100000\"",
-        ":items-size=\"500\""
-      ],
+      "default": "# void 0",
+      "examples": [ "100000" ],
       "category": "content"
     },
 
@@ -54,7 +51,7 @@
         "desc": "List of scope for items to be displayed"
       },
       "examples": [
-        ":items-fn=\"(from, size) => { const items = []; for (let i = 0; i < size; i++) { items.push('Item ' + i) }; return items }\""
+        "(from, size) => { const items = []; for (let i = 0; i < size; i++) { items.push('Item ' + i) }; return items }"
       ],
       "category": "content"
     },
@@ -70,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

@@ -10,28 +10,28 @@
       "type": [ "Number", "String", "null" ],
       "desc": "Minimum number of items to render in the virtual list",
       "default": "30",
-      "examples": [ "virtual-scroll-slice-size=\"60\"" ],
+      "examples": [ "60", "'60'" ],
       "category": "virtual-scroll"
     },
 
     "virtual-scroll-slice-ratio-before": {
       "type": [ "Number", "String" ],
       "desc": "Ratio of number of items in visible zone to render before it",
-      "default": 1,
+      "default": "1",
       "category": "virtual-scroll"
     },
 
     "virtual-scroll-slice-ratio-after": {
       "type": [ "Number", "String" ],
       "desc": "Ratio of number of items in visible zone to render after it",
-      "default": 1,
+      "default": "1",
       "category": "virtual-scroll"
     },
 
     "virtual-scroll-item-size": {
       "type": [ "Number", "String" ],
       "desc": "Default size in pixels (height if vertical, width if horizontal) of an item; This value is used for rendering the initial list; Try to use a value close to the minimum size of an item",
-      "default": 24,
+      "default": "24",
       "category": "virtual-scroll"
     },
 
@@ -83,7 +83,7 @@
               "type": "String",
               "required": true,
               "desc": "Direction of change",
-              "values": [ "increase", "decrease" ]
+              "values": [ "'increase'", "'decrease'" ]
             },
             "ref": {
               "type": "Component",
@@ -101,20 +101,23 @@
       "desc": "Scroll the virtual scroll list to the item with the specified index (0 based)",
       "params": {
         "index": {
-          "type": [ "String", "Number" ],
+          "type": [ "Number", "String" ],
           "desc": "The index of the list item (0 based)",
           "required": true
         },
         "edge": {
           "type": "String",
           "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" ]
+          "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": {
@@ -122,9 +125,11 @@
       "params": {
         "index": {
           "type": [ "String", "Number" ],
-          "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"
+          "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
     }
   }
 }

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

@@ -3,13 +3,12 @@
     "target": {
       "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": [ "(Boolean) true", "(Boolean) false", "(CSS selector)", "(DOM Element)" ],
+      "default": "true",
       "examples": [
-        ":target=\"false\"",
-        ":target=\"$refs.target\"",
-        "target=\".my-parent\"",
-        "target=\"#target-id\""
+        "false",
+        ".my-parent",
+        "#target-id",
+        "$refs.target"
       ],
       "category": "behavior"
     },