quasar 2.18.7 → 2.19.0

package/src/plugins/cookies/Cookies.json

@@ -14,13 +14,13 @@
           "type": "String",
           "desc": "Cookie name",
           "required": true,
-          "examples": [ "'userId'" ]
+          "examples": ["'userId'"]
         }
       },
       "returns": {
-        "type": [ "String", "null" ],
+        "type": ["String", "null"],
         "desc": "Cookie value; Returns null if cookie not found",
-        "examples": [ "'john12'" ]
+        "examples": ["'john12'"]
       }
     },
 
@@ -30,7 +30,7 @@
       "returns": {
         "type": "Object",
         "desc": "Object with cookie names (as keys) and their values",
-        "examples": [ "{ userId: 'john12', XFrame: 'x534' }" ]
+        "examples": ["{ userId: 'john12', XFrame: 'x534' }"]
       }
     },
 
@@ -41,14 +41,14 @@
           "type": "String",
           "desc": "Cookie name",
           "required": true,
-          "examples": [ "'userId'" ]
+          "examples": ["'userId'"]
         },
 
         "value": {
           "type": "String",
           "desc": "Cookie value",
           "required": true,
-          "examples": [ "'john12'" ]
+          "examples": ["'john12'"]
         },
 
         "options": {
@@ -56,24 +56,32 @@
           "desc": "Cookie options",
           "definition": {
             "expires": {
-              "type": [ "Number", "String", "Date" ],
+              "type": ["Number", "String", "Date"],
               "desc": "Cookie expires detail; If specified as Number, then the unit is days; If specified as String, it can either be raw stringified date or in Xd Xh Xm Xs format (see examples)",
-              "examples": [ "30", "'Wed, 13 Jan 2021 22:23:01 GMT'", "'1d'", "'15m'", "'13d'", "'1d 15m'", "'1d 3h 5m 3s'" ]
+              "examples": [
+                "30",
+                "'Wed, 13 Jan 2021 22:23:01 GMT'",
+                "'1d'",
+                "'15m'",
+                "'13d'",
+                "'1d 15m'",
+                "'1d 3h 5m 3s'"
+              ]
             },
             "path": {
               "type": "String",
               "desc": "Cookie path",
-              "examples": [ "'/accounts'" ]
+              "examples": ["'/accounts'"]
             },
             "domain": {
               "type": "String",
               "desc": "Cookie domain",
-              "examples": [ "'.foo.com'" ]
+              "examples": ["'.foo.com'"]
             },
             "sameSite": {
               "type": "String",
               "desc": "SameSite cookie option",
-              "values": [ "'Lax'", "'Strict'", "'None'" ]
+              "values": ["'Lax'", "'Strict'", "'None'"]
             },
             "httpOnly": {
               "type": "Boolean",
@@ -86,7 +94,7 @@
             "other": {
               "type": "String",
               "desc": "Raw string for other cookie options; To be used as a last resort for possible newer props that are currently not yet implemented in Quasar",
-              "examples": [ "'SomeNewCookieProp'" ]
+              "examples": ["'SomeNewCookieProp'"]
             }
           }
         }
@@ -101,7 +109,7 @@
           "type": "String",
           "desc": "Cookie name",
           "required": true,
-          "examples": [ "'userId'" ]
+          "examples": ["'userId'"]
         }
       },
       "returns": {
@@ -117,7 +125,7 @@
           "type": "String",
           "desc": "Cookie name",
           "required": true,
-          "examples": [ "'userId'" ]
+          "examples": ["'userId'"]
         },
 
         "options": {
@@ -127,12 +135,12 @@
             "path": {
               "type": "String",
               "desc": "Cookie path",
-              "examples": [ "'/accounts'" ]
+              "examples": ["'/accounts'"]
             },
             "domain": {
               "type": "String",
               "desc": "Cookie domain",
-              "examples": [ "'.foo.com'" ]
+              "examples": ["'.foo.com'"]
             }
           }
         }

package/src/plugins/dark/Dark.js

@@ -1,75 +1,81 @@
 import { createReactivePlugin } from '../../utils/private.create/create.js'
 
-const Plugin = createReactivePlugin({
-  isActive: false,
-  mode: false
-}, {
-  __media: void 0,
+const Plugin = createReactivePlugin(
+  {
+    isActive: false,
+    mode: false
+  },
+  {
+    __media: void 0,
 
-  set (val) {
-    if (__QUASAR_SSR_SERVER__) return
+    set(val) {
+      if (__QUASAR_SSR_SERVER__) return
 
-    Plugin.mode = val
+      Plugin.mode = val
 
-    if (val === 'auto') {
-      if (Plugin.__media === void 0) {
-        Plugin.__media = window.matchMedia('(prefers-color-scheme: dark)')
-        Plugin.__updateMedia = () => { Plugin.set('auto') }
-        Plugin.__media.addListener(Plugin.__updateMedia)
-      }
+      if (val === 'auto') {
+        if (Plugin.__media === void 0) {
+          Plugin.__media = window.matchMedia('(prefers-color-scheme: dark)')
+          Plugin.__updateMedia = () => {
+            Plugin.set('auto')
+          }
+          Plugin.__media.addListener(Plugin.__updateMedia)
+        }
 
-      val = Plugin.__media.matches
-    }
-    else if (Plugin.__media !== void 0) {
-      Plugin.__media.removeListener(Plugin.__updateMedia)
-      Plugin.__media = void 0
-    }
+        val = Plugin.__media.matches
+      } else if (Plugin.__media !== void 0) {
+        Plugin.__media.removeListener(Plugin.__updateMedia)
+        Plugin.__media = void 0
+      }
 
-    Plugin.isActive = val === true
-    document.body.classList.remove(`body--${ val === true ? 'light' : 'dark' }`)
-    document.body.classList.add(`body--${ val === true ? 'dark' : 'light' }`)
-  },
+      Plugin.isActive = val === true
+      document.body.classList.remove(`body--${val === true ? 'light' : 'dark'}`)
+      document.body.classList.add(`body--${val === true ? 'dark' : 'light'}`)
+    },
 
-  toggle () {
-    if (__QUASAR_SSR_SERVER__ !== true) {
-      Plugin.set(Plugin.isActive === false)
-    }
-  },
+    toggle() {
+      if (__QUASAR_SSR_SERVER__ !== true) {
+        Plugin.set(Plugin.isActive === false)
+      }
+    },
 
-  install ({ $q, ssrContext }) {
-    const dark = __QUASAR_SSR_CLIENT__
-      ? document.body.classList.contains('body--dark')
-      : $q.config.dark
+    install({ $q, ssrContext }) {
+      const dark = __QUASAR_SSR_CLIENT__
+        ? document.body.classList.contains('body--dark')
+        : $q.config.dark
 
-    if (__QUASAR_SSR_SERVER__) {
-      this.isActive = dark === true
+      if (__QUASAR_SSR_SERVER__) {
+        this.isActive = dark === true
 
-      $q.dark = {
-        isActive: false,
-        mode: false,
-        set: val => {
-          ssrContext._meta.bodyClasses = ssrContext._meta.bodyClasses
-            .replace(' body--light', '')
-            .replace(' body--dark', '') + ` body--${ val === true ? 'dark' : 'light' }`
+        $q.dark = {
+          isActive: false,
+          mode: false,
+          set: val => {
+            ssrContext._meta.bodyClasses =
+              ssrContext._meta.bodyClasses
+                .replace(' body--light', '')
+                .replace(' body--dark', '') +
+              ` body--${val === true ? 'dark' : 'light'}`
 
-          $q.dark.isActive = val === true
-          $q.dark.mode = val
-        },
-        toggle: () => {
-          $q.dark.set($q.dark.isActive === false)
+            $q.dark.isActive = val === true
+            $q.dark.mode = val
+          },
+          toggle: () => {
+            $q.dark.set($q.dark.isActive === false)
+          }
         }
-      }
 
-      $q.dark.set(dark)
-      return
-    }
+        $q.dark.set(dark)
+        return
+      }
 
-    $q.dark = this
+      $q.dark = this
 
-    if (this.__installed !== true) {
-      this.set(dark !== void 0 ? dark : false)
+      if (this.__installed !== true) {
+        this.set(dark !== void 0 ? dark : false)
+      }
     }
   }
-})
+)
 
 export default Plugin

package/src/plugins/dark/Dark.json

@@ -7,9 +7,9 @@
 
   "quasarConfOptions": {
     "propName": "dark",
-    "type": [ "Boolean", "String" ],
+    "type": ["Boolean", "String"],
     "desc": "\"'auto'\" uses the OS/browser preference. \"true\" forces dark mode. \"false\" forces light mode.",
-    "values": [ "'auto'", "true", "false" ]
+    "values": ["'auto'", "true", "false"]
   },
 
   "props": {
@@ -20,9 +20,9 @@
     },
 
     "mode": {
-      "type": [ "Boolean", "String" ],
+      "type": ["Boolean", "String"],
       "desc": "Dark mode configuration (not status)",
-      "values": [ "'auto'", "true", "false" ],
+      "values": ["'auto'", "true", "false"],
       "reactive": true
     }
   },
@@ -32,9 +32,9 @@
       "desc": "Set dark mode status",
       "params": {
         "status": {
-          "type": [ "Boolean", "String" ],
+          "type": ["Boolean", "String"],
           "desc": "Dark mode status",
-          "values": [ "true", "false", "'auto'" ],
+          "values": ["true", "false", "'auto'"],
           "required": true
         }
       },

package/src/plugins/dark/Dark.test.js

@@ -21,28 +21,26 @@ describe('[Dark API]', () => {
       })
 
       test('is reactive', () => {
-        const { vm: { $q } } = mountPlugin()
+        const {
+          vm: { $q }
+        } = mountPlugin()
 
         expect(Dark.isActive).toBe(false)
         expect($q.dark.isActive).toBe(false)
-        expect(
-          document.body.classList.contains('body--dark')
-        ).toBe(false)
+        expect(document.body.classList.contains('body--dark')).toBe(false)
 
         Dark.set(true)
 
         expect(Dark.isActive).toBe(true)
         expect($q.dark.isActive).toBe(true)
-        expect(
-          document.body.classList.contains('body--dark')
-        ).toBe(true)
+        expect(document.body.classList.contains('body--dark')).toBe(true)
       })
     })
 
     describe('[(prop)mode]', () => {
       test('is correct type', () => {
         mountPlugin()
-        expect([ 'auto', true, false ]).toContain(Dark.mode)
+        expect(['auto', true, false]).toContain(Dark.mode)
       })
     })
   })
@@ -50,31 +48,27 @@ describe('[Dark API]', () => {
   describe('[Methods]', () => {
     describe('[(method)set]', () => {
       test('should be callable', () => {
-        const { vm: { $q } } = mountPlugin()
+        const {
+          vm: { $q }
+        } = mountPlugin()
 
-        expect(
-          Dark.set(true)
-        ).toBeUndefined()
+        expect(Dark.set(true)).toBeUndefined()
 
         expect(Dark.isActive).toBe(true)
         expect($q.dark.isActive).toBe(true)
-        expect(
-          document.body.classList.contains('body--dark')
-        ).toBe(true)
+        expect(document.body.classList.contains('body--dark')).toBe(true)
 
-        expect(
-          Dark.set(false)
-        ).toBeUndefined()
+        expect(Dark.set(false)).toBeUndefined()
 
         expect(Dark.isActive).toBe(false)
         expect($q.dark.isActive).toBe(false)
-        expect(
-          document.body.classList.contains('body--dark')
-        ).toBe(false)
+        expect(document.body.classList.contains('body--dark')).toBe(false)
       })
 
       test('should handle auto mode', () => {
-        const { vm: { $q } } = mountPlugin()
+        const {
+          vm: { $q }
+        } = mountPlugin()
 
         // jsdom hack
         const media = {
@@ -93,9 +87,7 @@ describe('[Dark API]', () => {
 
         expect(Dark.isActive).toBe(true)
         expect($q.dark.isActive).toBe(true)
-        expect(
-          document.body.classList.contains('body--dark')
-        ).toBe(true)
+        expect(document.body.classList.contains('body--dark')).toBe(true)
 
         media.matches = false
         Dark.__updateMedia()
@@ -105,9 +97,7 @@ describe('[Dark API]', () => {
 
         expect(Dark.isActive).toBe(false)
         expect($q.dark.isActive).toBe(false)
-        expect(
-          document.body.classList.contains('body--dark')
-        ).toBe(false)
+        expect(document.body.classList.contains('body--dark')).toBe(false)
 
         Dark.set(true)
         expect(Dark.mode).not.toBe('auto')
@@ -117,41 +107,33 @@ describe('[Dark API]', () => {
 
         expect(Dark.isActive).toBe(true)
         expect($q.dark.isActive).toBe(true)
-        expect(
-          document.body.classList.contains('body--dark')
-        ).toBe(true)
+        expect(document.body.classList.contains('body--dark')).toBe(true)
       })
     })
 
     describe('[(method)toggle]', () => {
       test('should be callable', () => {
-        const { vm: { $q } } = mountPlugin()
+        const {
+          vm: { $q }
+        } = mountPlugin()
 
         Dark.set(true)
 
         expect(Dark.isActive).toBe(true)
         expect($q.dark.isActive).toBe(true)
-        expect(
-          document.body.classList.contains('body--dark')
-        ).toBe(true)
+        expect(document.body.classList.contains('body--dark')).toBe(true)
 
-        expect(
-          Dark.toggle()
-        ).toBeUndefined()
+        expect(Dark.toggle()).toBeUndefined()
 
         expect(Dark.isActive).toBe(false)
         expect($q.dark.isActive).toBe(false)
-        expect(
-          document.body.classList.contains('body--dark')
-        ).toBe(false)
+        expect(document.body.classList.contains('body--dark')).toBe(false)
 
         Dark.toggle()
 
         expect(Dark.isActive).toBe(true)
         expect($q.dark.isActive).toBe(true)
-        expect(
-          document.body.classList.contains('body--dark')
-        ).toBe(true)
+        expect(document.body.classList.contains('body--dark')).toBe(true)
       })
     })
   })

package/src/plugins/dialog/Dialog.js

@@ -2,7 +2,7 @@ import DialogPlugin from './component/DialogPluginComponent.js'
 import globalDialog from '../../utils/private.dialog/create-dialog.js'
 
 export default {
-  install ({ $q, parentApp }) {
+  install({ $q, parentApp }) {
     $q.dialog = this.create = globalDialog(DialogPlugin, true, parentApp)
   }
 }

package/src/plugins/dialog/Dialog.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "utils/private.dialog/create-dialog" ],
+  "mixins": ["utils/private.dialog/create-dialog"],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/quasar-plugins/dialog"
@@ -19,13 +19,13 @@
             "title": {
               "type": "String",
               "desc": "A text for the heading title of the dialog",
-              "examples": [ "'Continue?'" ]
+              "examples": ["'Continue?'"]
             },
 
             "message": {
               "type": "String",
               "desc": "A text with more information about what needs to be input, selected or confirmed.",
-              "examples": [ "'Are you certain you want to continue?'" ]
+              "examples": ["'Are you certain you want to continue?'"]
             },
 
             "html": {
@@ -36,7 +36,13 @@
             "position": {
               "type": "String",
               "desc": "Position of the Dialog on screen. Standard is centered.",
-              "values": [ "'top'", "'right'", "'bottom'", "'left'", "'standard'" ],
+              "values": [
+                "'top'",
+                "'right'",
+                "'bottom'",
+                "'left'",
+                "'standard'"
+              ],
               "default": "'standard'"
             },
 
@@ -44,7 +50,7 @@
               "type": "Object",
               "tsType": "QDialogInputPrompt",
               "desc": "An object definition of the input field for the prompting question.",
-              "examples": [ "{ model: 'initial-value', type: 'number' }" ],
+              "examples": ["{ model: 'initial-value', type: 'number' }"],
               "definition": {
                 "model": {
                   "type": "String",
@@ -56,7 +62,7 @@
                   "type": "String",
                   "desc": "Optional property to determine the input field type",
                   "default": "'text'",
-                  "examples": [ "'text'", "'number'", "'textarea'" ]
+                  "examples": ["'text'", "'number'", "'textarea'"]
                 },
 
                 "isValid": {
@@ -89,7 +95,7 @@
                 "...nativeAttributes": {
                   "type": "Object",
                   "desc": "Any native attributes to pass to the prompt control",
-                  "examples": [ "# autocomplete: 'off'" ]
+                  "examples": ["# autocomplete: 'off'"]
                 }
               }
             },
@@ -98,27 +104,29 @@
               "type": "Object",
               "tsType": "QDialogSelectionPrompt",
               "desc": "An object definition for creating the selection form content",
-              "examples": [ "{ model: null, type: 'radio', items: [ /* ...listOfItems */ ] }" ],
+              "examples": [
+                "{ model: null, type: 'radio', items: [ /* ...listOfItems */ ] }"
+              ],
               "definition": {
                 "model": {
-                  "type": [ "String", "Array" ],
+                  "type": ["String", "Array"],
                   "required": true,
                   "desc": "The value of the selection (String if it's of type radio or Array otherwise)",
-                  "examples": [ "[]" ]
+                  "examples": ["[]"]
                 },
 
                 "type": {
                   "type": "String",
                   "desc": "The type of selection",
                   "default": "'radio'",
-                  "values": [ "'radio'", "'checkbox'", "'toggle'" ]
+                  "values": ["'radio'", "'checkbox'", "'toggle'"]
                 },
 
                 "items": {
                   "type": "Array",
                   "desc": "The list of options to interact with; Equivalent to options prop of the QOptionGroup component",
                   "examples": [
-                    "[ { label: 'Option 1', value: 'op1' }, { label: 'Option 2', value: 'op2' }, { label: 'Option 3', value: 'op3' } ]"
+                    "[{ label: 'Option 1', value: 'op1' }, { label: 'Option 2', value: 'op2' }, { label: 'Option 3', value: 'op3' }]"
                   ]
                 },
 
@@ -127,14 +135,14 @@
                   "desc": "Is the model valid?",
                   "params": {
                     "model": {
-                      "type": [ "String", "Array" ],
+                      "type": ["String", "Array"],
                       "required": true,
                       "desc": "The current model (String if it's of type radio or Array otherwise)",
                       "examples": [
                         "'opt2'",
-                        "[ 'opt1' ]",
+                        "['opt1']",
                         "[]",
-                        "[ 'opt1', 'opt3' ]"
+                        "['opt1', 'opt3']"
                       ]
                     }
                   },
@@ -163,7 +171,7 @@
             },
 
             "progress": {
-              "type": [ "Boolean", "Object" ],
+              "type": ["Boolean", "Object"],
               "desc": "Display a Quasar spinner (if value is true, then the defaults are used); Useful for conveying the idea that something is happening behind the covers; Tip: use along with persistent, ok: false and update() method",
               "definition": {
                 "spinner": {
@@ -177,7 +185,7 @@
             },
 
             "ok": {
-              "type": [ "String", "Object", "Boolean" ],
+              "type": ["String", "Object", "Boolean"],
               "desc": "Props for an 'OK' button",
               "definition": {
                 "...props": {
@@ -188,7 +196,7 @@
             },
 
             "cancel": {
-              "type": [ "String", "Object", "Boolean" ],
+              "type": ["String", "Object", "Boolean"],
               "desc": "Props for a 'CANCEL' button",
               "definition": {
                 "...props": {
@@ -201,7 +209,7 @@
             "focus": {
               "type": "String",
               "desc": "What button to focus, unless you also have 'prompt' or 'options'",
-              "values": [ "'ok'", "'cancel'", "'none'" ],
+              "values": ["'ok'", "'cancel'", "'none'"],
               "default": "'ok'"
             },
 
@@ -270,9 +278,9 @@
             },
 
             "component": {
-              "type": [ "Component", "String" ],
+              "type": ["Component", "String"],
               "desc": "Use custom dialog component; use along with 'componentProps' prop where possible",
-              "examples": [ "CustomComponent", "'custom-component'" ]
+              "examples": ["CustomComponent", "'custom-component'"]
             },
 
             "componentProps": {