quasar 2.15.0 → 2.15.2

package/src/components/uploader/QUploader.json

@@ -9,7 +9,7 @@
     "label": {
       "type": "String",
       "desc": "Label for the uploader",
-      "examples": ["Upload photo here"],
+      "examples": [ "'Upload photo here'" ],
       "category": "content"
     },
 
@@ -161,7 +161,7 @@
         "status": {
           "type": "String",
           "desc": "Status of file",
-          "values": [ "idle", "failed", "uploading", "uploaded" ],
+          "values": [ "'idle'", "'failed'", "'uploading'", "'uploaded'" ],
           "required": true
         },
         "uploadedSize": {
@@ -227,13 +227,13 @@
     "uploadSizeLabel": {
       "type": "String",
       "desc": "Label for the size total of all files",
-      "examples": [ "1.0MB" ]
+      "examples": [ "'1.0MB'" ]
     },
 
     "uploadProgressLabel": {
       "type": "String",
       "desc": "Label for the upload progress (in %)",
-      "examples": [ "52.76%" ]
+      "examples": [ "'52.76%'" ]
     },
 
     "canAddFiles": {

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",
@@ -58,8 +58,8 @@
       "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",
       "examples": [
-        "backgroundFile",
-        ":field-name=\"(file) => 'background' + file.name\""
+        "'backgroundFile'",
+        "(file) => ('background' + file.name)"
       ],
       "params": {
         "files": {
@@ -82,13 +82,13 @@
           "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": [
@@ -117,13 +117,13 @@
           "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": [
@@ -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.json

@@ -10,9 +10,7 @@
       "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/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"
     },

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,14 +101,14 @@
       "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'" ]
         }
       }
     },
@@ -122,7 +122,8 @@
       "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" ]
         }
       }
     }

package/src/composables/private/use-anchor.json

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

package/src/composables/private/use-field.json

@@ -5,7 +5,7 @@
     "label": {
       "type": "String",
       "desc": "A text label that will “float” up above the input field, once the field gets focus",
-      "examples": [ "Username" ],
+      "examples": [ "'Username'" ],
       "category": "content"
     },
 
@@ -18,7 +18,7 @@
     "hint": {
       "type": "String",
       "desc": "Helper (hint) text which gets placed below your wrapped form component",
-      "examples": [ "Fill in between 3 and 12 characters" ],
+      "examples": [ "'Fill in between 3 and 12 characters'" ],
       "category": "content"
     },
 
@@ -31,14 +31,14 @@
     "prefix": {
       "type": "String",
       "desc": "Prefix",
-      "examples": [ "$" ],
+      "examples": [ "'$'" ],
       "category": "content"
     },
 
     "suffix": {
       "type": "String",
       "desc": "Suffix",
-      "examples": [ "@gmail.com" ],
+      "examples": [ "'@gmail.com'" ],
       "category": "content"
     },
 
@@ -74,7 +74,7 @@
     "clear-icon": {
       "type": "String",
       "desc": "Custom icon to use for the clear button when using along with 'clearable' prop",
-      "examples": [ "close" ],
+      "examples": [ "'close'" ],
       "category": "content"
     },
 
@@ -99,10 +99,7 @@
     "standout": {
       "type": [ "Boolean", "String" ],
       "desc": "Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones)",
-      "examples": [
-        "standout",
-        "standout=\"bg-primary text-white\""
-      ],
+      "examples": [ "true", "'bg-primary text-white'" ],
       "category": "style"
     },
 
@@ -167,14 +164,14 @@
     "for": {
       "type": "String",
       "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" ],
+      "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" ],
+      "examples": [ "'car_id'" ],
       "category": "behavior"
     }
   },

package/src/composables/private/use-file.js

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

package/src/composables/private/use-file.json

@@ -9,23 +9,21 @@
     "accept": {
       "type": "String",
       "desc": "Comma separated list of unique file type specifiers. Maps to 'accept' attribute of native input type=file element",
-      "examples": [
-        ".jpg, .pdf, image/*", "image/jpeg, .pdf"
-      ],
+      "examples": [ "'.jpg, .pdf, image/*'", "'image/jpeg, .pdf'" ],
       "category": "behavior"
     },
 
     "capture": {
       "type": "String",
       "desc": "Optionally, specify that a new file should be captured, and which device should be used to capture that new media of a type defined by the 'accept' prop. Maps to 'capture' attribute of native input type=file element",
-      "values": [ "user", "environment" ],
+      "values": [ "'user'", "'environment'" ],
       "category": "behavior"
     },
 
     "max-file-size": {
       "type": [ "Number", "String" ],
       "desc": "Maximum size of individual file in bytes",
-      "examples": [ 1024, 1048576 ],
+      "examples": [ "1024", "'1048576'" ],
       "category": "behavior"
     },
 
@@ -46,7 +44,7 @@
       "desc": "Custom filter for added files; Only files that pass this filter will be added to the queue and uploaded; For best performance, reference it from your scope and do not define it inline",
       "params": {
         "files": {
-          "type": [ "FileList", "Array" ],
+          "type": [ "Array", "FileList" ],
           "desc": "Candidate files to be added to queue"
         }
       },
@@ -54,7 +52,7 @@
         "type": "Array",
         "desc": "Filtered files to be added to queue"
       },
-      "examples": [ ":filter=\"files => files.filter(file => file.size === 1024)\"" ],
+      "examples": [ "files => files.filter(file => file.size === 1024)" ],
       "category": "behavior"
     }
   },
@@ -86,7 +84,7 @@
       "desc": "Add files programmatically",
       "params": {
         "files": {
-          "type": [ "FileList", "Array" ],
+          "type": [ "Array", "FileList" ],
           "desc": "Array of files (instances of File)",
           "required": true
         }

package/src/composables/private/use-form.json

@@ -3,7 +3,7 @@
     "name": {
       "type": "String",
       "desc": "Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL",
-      "examples": [ "car_id" ],
+      "examples": [ "'car_id'" ],
       "category": "behavior"
     }
   }

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

@@ -0,0 +1,93 @@
+import { describe, test, expect } from 'vitest'
+import { computed } from 'vue'
+
+import { useFormAttrs, useFormInject, useFormInputNameAttr } from './use-form.js'
+
+describe('[useForm API]', () => {
+  describe('useForm', () => {
+    test('useForm(props)', () => {
+      const { value: result } = useFormAttrs({
+        name: 'MyName',
+        modelValue: 'MyModelValue'
+      })
+
+      expect(result).toBeTruthy()
+      expect(result.name).toBe('MyName')
+      expect(result.value).toBe('MyModelValue')
+    })
+  })
+
+  describe('useFormInputNameAttr', () => {
+    test('useFormInputNameAttr()', () => {
+      const fn = useFormInject()
+
+      expect(typeof fn).toBe('function')
+
+      const acc = []
+      fn(acc, 'push')
+      fn(acc, 'push', ' MyClassName')
+
+      expect(acc.length).toBe(2)
+
+      expect(acc[ 0 ].type).toBe('input')
+      expect(Object.keys(acc[ 0 ].props).length).toBe(1)
+      expect(acc[ 0 ].props.class).toBe('hidden')
+
+      expect(acc[ 1 ].type).toBe('input')
+      expect(Object.keys(acc[ 1 ].props).length).toBe(1)
+      expect(acc[ 1 ].props.class).toBe('hidden MyClassName')
+    })
+
+    test('useFormInputNameAttr(formAttrs)', () => {
+      const fn = useFormInject(
+        computed(() => ({
+          myAttr: 'MyAttrValue'
+        }))
+      )
+
+      const acc = []
+
+      fn(acc, 'push')
+      fn(acc, 'push', ' MyClassName')
+
+      expect(acc.length).toBe(2)
+
+      expect(acc[ 0 ].type).toBe('input')
+      expect(Object.keys(acc[ 0 ].props).length).toBe(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).length).toBe(2)
+      expect(acc[ 1 ].props.class).toBe('hidden MyClassName')
+      expect(acc[ 1 ].props.myAttr).toBe('MyAttrValue')
+    })
+  })
+
+  describe('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/private/use-fullscreen.json

@@ -4,9 +4,7 @@
       "type": "Boolean",
       "sync": true,
       "desc": "Fullscreen mode",
-      "examples": [
-        "v-model:fullscreen=\"isFullscreen\""
-      ],
+      "examples": [ "# v-model:fullscreen=\"isFullscreen\"" ],
       "category": "behavior"
     },
 

package/src/composables/private/use-key-composition.js

@@ -1,4 +1,4 @@
-import { client } from '../../plugins/Platform.js'
+import { client } from '../../plugins/platform/Platform.js'
 
 const isJapanese = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf]/
 const isChinese = /[\u4e00-\u9fff\u3400-\u4dbf\u{20000}-\u{2a6df}\u{2a700}-\u{2b73f}\u{2b740}-\u{2b81f}\u{2b820}-\u{2ceaf}\uf900-\ufaff\u3300-\u33ff\ufe30-\ufe4f\uf900-\ufaff\u{2f800}-\u{2fa1f}]/u

package/src/composables/private/use-panel.child.json

@@ -4,9 +4,7 @@
       "type": "Any",
       "desc": "Panel name",
       "required": true,
-      "examples": [
-        "accounts", "firstPanel", ":name=\"1\""
-      ],
+      "examples": [ "'accounts'", "'firstPanel'", "1" ],
       "category": "general"
     },
 

package/src/composables/private/use-panel.js

@@ -1,6 +1,6 @@
 import { h, ref, computed, watch, nextTick, getCurrentInstance, Transition, KeepAlive } from 'vue'
 
-import TouchSwipe from '../../directives/TouchSwipe.js'
+import TouchSwipe from '../../directives/touch-swipe/TouchSwipe.js'
 
 import useRenderCache from '../../composables/use-render-cache.js'