quasar 2.15.1 → 2.15.3

package/src/index.prod.js

@@ -4,8 +4,8 @@
  */
 
 import installQuasar from './install-quasar.js'
-import lang from './lang.js'
-import iconSet from './icon-set.js'
+import Lang from './plugins/lang/Lang.js'
+import IconSet from './plugins/icon-set/IconSet.js'
 
 import * as components from './components.js'
 import * as directives from './directives.js'
@@ -18,6 +18,7 @@ export * from './utils.js'
 
 export const Quasar = {
   version: __QUASAR_VERSION__,
+
   install (app, opts, ssrContext) {
     installQuasar(
       app,
@@ -25,6 +26,12 @@ export const Quasar = {
       ssrContext
     )
   },
-  lang,
-  iconSet
+
+  // TODO: remove in Qv3 (should only be used through the plugin)
+  // We provide a deprecated fallback here
+  lang: Lang,
+
+  // TODO: remove in Qv3 (should only be used through the plugin)
+  // We provide a deprecated fallback here
+  iconSet: IconSet
 }

package/src/index.ssr.js

@@ -3,8 +3,8 @@
  */
 
 import installQuasar from './install-quasar.js'
-import lang from './lang.js'
-import iconSet from './icon-set.js'
+import Lang from './plugins/lang/Lang.js'
+import IconSet from './plugins/icon-set/IconSet.js'
 
 import * as components from './components.js'
 import * as directives from './directives.js'
@@ -17,6 +17,7 @@ export * from './utils.js'
 
 export const Quasar = {
   version: __QUASAR_VERSION__,
+
   install (app, opts, ssrContext) {
     installQuasar(
       app,
@@ -24,6 +25,12 @@ export const Quasar = {
       ssrContext
     )
   },
-  lang,
-  iconSet
+
+  // TODO: remove in Qv3 (should only be used through the plugin)
+  // We provide a deprecated fallback here
+  lang: Lang,
+
+  // TODO: remove in Qv3 (should only be used through the plugin)
+  // We provide a deprecated fallback here
+  iconSet: IconSet
 }

package/src/index.umd.js

@@ -3,8 +3,8 @@
  */
 
 import installQuasar from './install-quasar.js'
-import lang from './lang.js'
-import iconSet from './icon-set.js'
+import Lang from './plugins/lang/Lang.js'
+import IconSet from './plugins/icon-set/IconSet.js'
 
 import * as components from './components.js'
 import * as directives from './directives.js'
@@ -18,6 +18,7 @@ if (window.Vue === void 0) {
 
 window.Quasar = {
   version: __QUASAR_VERSION__,
+
   install (app, opts) {
     installQuasar(app, {
       components,
@@ -26,8 +27,15 @@ window.Quasar = {
       ...opts
     })
   },
-  lang,
-  iconSet,
+
+  // TODO: remove in Qv3 (should only be used through the plugin)
+  // We provide a deprecated fallback here
+  lang: Lang,
+
+  // TODO: remove in Qv3 (should only be used through the plugin)
+  // We provide a deprecated fallback here
+  iconSet: IconSet,
+
   ...components,
   ...directives,
   ...plugins,

package/src/install-quasar.js

@@ -1,17 +1,22 @@
 import { createApp } from 'vue'
 
-import Platform, { isRuntimeSsrPreHydration } from './plugins/Platform.js'
-import Screen from './plugins/Screen.js'
-import Dark from './plugins/Dark.js'
-import History from './history.js'
-import Lang from './lang.js'
-import Body from './body.js'
-import IconSet from './icon-set.js'
-
-import { quasarKey } from './utils/private/symbols.js'
-import { globalConfig, globalConfigIsFrozen, freezeGlobalConfig } from './utils/private/global-config.js'
-import { isObject } from './utils/is.js'
-
+import Platform, { isRuntimeSsrPreHydration } from './plugins/platform/Platform.js'
+import Screen from './plugins/screen/Screen.js'
+import Dark from './plugins/dark/Dark.js'
+import Body from './plugins/private.body/Body.js'
+import History from './plugins/private.history/History.js'
+import Lang from './plugins/lang/Lang.js'
+import IconSet from './plugins/icon-set/IconSet.js'
+
+import { quasarKey } from './utils/private.symbols/symbols.js'
+import { globalConfig, globalConfigIsFrozen, freezeGlobalConfig } from './utils/private.global/global-config.js'
+import { isObject } from './utils/is/is.js'
+
+/**
+ * If the list below changes, make sure
+ * to also edit /ui/testing/specs/generators/generator.plugin.js
+ * on the "autoInstalledPlugins" array
+ */
 const autoInstalledPlugins = [
   Platform,
   Body,

package/src/plugins/{AddressbarColor.js → addressbar/AddressbarColor.js}

@@ -1,6 +1,6 @@
-import { client } from './Platform.js'
-import { noop } from '../utils/event.js'
-import getCssVar from '../utils/get-css-var.js'
+import { client } from '../platform/Platform.js'
+import { noop } from '../../utils/event/event.js'
+import getCssVar from '../../utils/css-var/get-css-var.js'
 
 let metaValue
 

package/src/plugins/{AddressbarColor.json → addressbar/AddressbarColor.json}

@@ -13,9 +13,10 @@
           "type": "String",
           "desc": "Color in hex format",
           "required": true,
-          "examples": [ "#ff0000" ]
+          "examples": [ "'#ff0000'" ]
         }
-      }
+      },
+      "returns": null
     }
   }
 }

package/src/plugins/{AppFullscreen.js → app-fullscreen/AppFullscreen.js}

@@ -1,5 +1,5 @@
-import defineReactivePlugin from '../utils/private/define-reactive-plugin.js'
-import { changeGlobalNodesTarget } from '../utils/private/global-nodes.js'
+import { createReactivePlugin } from '../../utils/private.create/create.js'
+import { changeGlobalNodesTarget } from '../../utils/private.global/global-nodes.js'
 
 const prefixes = {}
 
@@ -51,7 +51,7 @@ function promisify (target, fn) {
   }
 }
 
-const Plugin = defineReactivePlugin({
+const Plugin = createReactivePlugin({
   isActive: false,
   activeEl: null
 }, {

package/src/plugins/{AppFullscreen.json → app-fullscreen/AppFullscreen.json}

@@ -44,6 +44,7 @@
 
     "exit": {
       "desc": "Request exiting out of Fullscreen mode",
+      "params": null,
       "returns": {
         "type": "Promise<void>",
         "desc": "A Promise which is resolved when exited out of fullscreen mode. It gets rejected with 'Not capable' if the browser is not capable, and with an Error object if something else went wrong.",

package/src/plugins/{AppVisibility.js → app-visibility/AppVisibility.js}

@@ -1,7 +1,7 @@
-import defineReactivePlugin from '../utils/private/define-reactive-plugin.js'
-import { injectProp } from '../utils/private/inject-obj-prop.js'
+import { createReactivePlugin } from '../../utils/private.create/create.js'
+import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
 
-const Plugin = defineReactivePlugin({
+const Plugin = createReactivePlugin({
   appVisible: true
 }, {
   install ({ $q }) {

package/src/plugins/bottom-sheet/BottomSheet.js

@@ -0,0 +1,8 @@
+import BottomSheet from './component/BottomSheetComponent.js'
+import globalDialog from '../../utils/private.global/global-dialog.js'
+
+export default {
+  install ({ $q, parentApp }) {
+    $q.bottomSheet = this.create = globalDialog(BottomSheet, false, parentApp)
+  }
+}

package/src/plugins/{BottomSheet.json → bottom-sheet/BottomSheet.json}

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "utils/private/global-dialog" ],
+  "mixins": [ "utils/private.global/global-dialog" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/quasar-plugins/bottom-sheet"
@@ -18,13 +18,13 @@
             "title": {
               "type": "String",
               "desc": "Title",
-              "examples": [ "Share" ]
+              "examples": [ "'Share'" ]
             },
 
             "message": {
               "type": "String",
               "desc": "Message",
-              "examples": [ "Please select how to share" ]
+              "examples": [ "'Please select how to share'" ]
             },
 
             "actions": {
@@ -35,7 +35,7 @@
                   "type": [ "String", "Array", "Object" ],
                   "tsType": "VueClassProp",
                   "desc": "CSS classes for this action",
-                  "examples": [ "my-class" ]
+                  "examples": [ "'my-class'" ]
                 },
 
                 "style": {
@@ -54,9 +54,9 @@
                   "type": "String",
                   "desc": "Path to an image for this action",
                   "examples": [
-                    "(public folder) img/something.png",
-                    "(relative path format) :src=\"require('./my_img.jpg')\"",
-                    "(URL) https://some-site.net/some-img.gif"
+                    "# (public folder) 'img/something.png'",
+                    "# (relative path format) :src=\"require('./my_img.jpg')\"",
+                    "# (URL) https://some-site.net/some-img.gif"
                   ]
                 },
 
@@ -64,16 +64,16 @@
                   "type": "String",
                   "desc": "Path to an avatar image for this action",
                   "examples": [
-                    "(public folder) img/avatar.png",
-                    "(relative path format) :src=\"require('./my_img.jpg')\"",
-                    "(URL) https://some-site.net/some-img.gif"
+                    "# (public folder) 'img/avatar.png'",
+                    "# (relative path format) :src=\"require('./my_img.jpg')\"",
+                    "# (URL) https://some-site.net/some-img.gif"
                   ]
                 },
 
                 "label": {
                   "type": [ "String", "Number" ],
                   "desc": "Action label",
-                  "examples": [ "Facebook" ]
+                  "examples": [ "'Facebook'" ]
                 },
 
                 "...": {

package/src/{components/dialog-bottom-sheet/BottomSheet.js → plugins/bottom-sheet/component/BottomSheetComponent.js}

@@ -1,21 +1,21 @@
 import { h, ref, getCurrentInstance } from 'vue'
 
-import QDialog from '../dialog/QDialog.js'
+import QDialog from '../../../components/dialog/QDialog.js'
 
-import QIcon from '../icon/QIcon.js'
-import QSeparator from '../separator/QSeparator.js'
+import QIcon from '../../../components/icon/QIcon.js'
+import QSeparator from '../../../components/separator/QSeparator.js'
 
-import QCard from '../card/QCard.js'
-import QCardSection from '../card/QCardSection.js'
+import QCard from '../../../components/card/QCard.js'
+import QCardSection from '../../../components/card/QCardSection.js'
 
-import QItem from '../item/QItem.js'
-import QItemSection from '../item/QItemSection.js'
+import QItem from '../../../components/item/QItem.js'
+import QItemSection from '../../../components/item/QItemSection.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+import { createComponent } from '../../../utils/private.create/create.js'
+import useDark, { useDarkProps } from '../../../composables/private.use-dark/use-dark.js'
 
 export default createComponent({
-  name: 'BottomSheetPlugin',
+  name: 'BottomSheetComponent',
 
   props: {
     ...useDarkProps,

package/src/plugins/{Cookies.json → cookies/Cookies.json}

@@ -14,24 +14,23 @@
           "type": "String",
           "desc": "Cookie name",
           "required": true,
-          "examples": [ "userId" ]
+          "examples": [ "'userId'" ]
         }
       },
       "returns": {
         "type": [ "String", "null" ],
         "desc": "Cookie value; Returns null if cookie not found",
-        "examples": [ "john12" ]
+        "examples": [ "'john12'" ]
       }
     },
 
     "getAll": {
       "desc": "Get all cookies",
+      "params": null,
       "returns": {
         "type": "Object",
         "desc": "Object with cookie names (as keys) and their values",
-        "examples": [
-          "{ userId: 'john12', XFrame: 'x534' }"
-        ]
+        "examples": [ "{ userId: 'john12', XFrame: 'x534' }" ]
       }
     },
 
@@ -42,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": {
@@ -59,22 +58,22 @@
             "expires": {
               "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",
@@ -87,11 +86,12 @@
             "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'" ]
             }
           }
         }
-      }
+      },
+      "returns": null
     },
 
     "has": {
@@ -101,7 +101,7 @@
           "type": "String",
           "desc": "Cookie name",
           "required": true,
-          "examples": [ "userId" ]
+          "examples": [ "'userId'" ]
         }
       },
       "returns": {
@@ -117,7 +117,7 @@
           "type": "String",
           "desc": "Cookie name",
           "required": true,
-          "examples": [ "userId" ]
+          "examples": [ "'userId'" ]
         },
 
         "options": {
@@ -127,16 +127,17 @@
             "path": {
               "type": "String",
               "desc": "Cookie path",
-              "examples": [ "/accounts" ]
+              "examples": [ "'/accounts'" ]
             },
             "domain": {
               "type": "String",
               "desc": "Cookie domain",
-              "examples": [ ".foo.com" ]
+              "examples": [ "'.foo.com'" ]
             }
           }
         }
-      }
+      },
+      "returns": null
     },
 
     "parseSSR": {

package/src/plugins/{Dark.js → dark/Dark.js}

@@ -1,6 +1,6 @@
-import defineReactivePlugin from '../utils/private/define-reactive-plugin.js'
+import { createReactivePlugin } from '../../utils/private.create/create.js'
 
-const Plugin = defineReactivePlugin({
+const Plugin = createReactivePlugin({
   isActive: false,
   mode: false
 }, {

package/src/plugins/{Dark.json → dark/Dark.json}

@@ -9,7 +9,7 @@
     "propName": "dark",
     "type": [ "Boolean", "String" ],
     "desc": "\"'auto'\" uses the OS/browser preference. \"true\" forces dark mode. \"false\" forces light mode.",
-    "values": [ "auto", "(Boolean) true", "(Boolean) false" ]
+    "values": [ "'auto'", "true", "false" ]
   },
 
   "props": {
@@ -22,7 +22,7 @@
     "mode": {
       "type": [ "Boolean", "String" ],
       "desc": "Dark mode configuration (not status)",
-      "values": [ "auto", "(Boolean) true", "(Boolean) false" ],
+      "values": [ "'auto'", "true", "false" ],
       "reactive": true
     }
   },
@@ -34,14 +34,17 @@
         "status": {
           "type": [ "Boolean", "String" ],
           "desc": "Dark mode status",
-          "values": [ "(Boolean) true", "(Boolean) false", "auto" ],
+          "values": [ "true", "false", "'auto'" ],
           "required": true
         }
-      }
+      },
+      "returns": null
     },
 
     "toggle": {
-      "desc": "Toggle dark mode status"
+      "desc": "Toggle dark mode status",
+      "params": null,
+      "returns": null
     }
   }
 }

package/src/plugins/dialog/Dialog.js

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

package/src/plugins/{Dialog.json → dialog/Dialog.json}

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "utils/private/global-dialog" ],
+  "mixins": [ "utils/private.global/global-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,15 +36,15 @@
             "position": {
               "type": "String",
               "desc": "Position of the Dialog on screen. Standard is centered.",
-              "values": [ "top", "right", "bottom", "left", "standard" ],
-              "default": "standard"
+              "values": [ "'top'", "'right'", "'bottom'", "'left'", "'standard'" ],
+              "default": "'standard'"
             },
 
             "prompt": {
               "type": "Object",
               "tsType": "QDialogInputPrompt",
               "desc": "An object definition of the input field for the prompting question.",
-              "examples": [ "prompt: { model: this.promptVal, type: 'number' }" ],
+              "examples": [ "{ model: 'initial-value', type: 'number' }" ],
               "definition": {
                 "model": {
                   "type": "String",
@@ -55,8 +55,8 @@
                 "type": {
                   "type": "String",
                   "desc": "Optional property to determine the input field type",
-                  "default": "text",
-                  "examples": [ "text", "number", "textarea" ]
+                  "default": "'text'",
+                  "examples": [ "'text'", "'number'", "'textarea'" ]
                 },
 
                 "isValid": {
@@ -89,7 +89,7 @@
                 "...nativeAttributes": {
                   "type": "Object",
                   "desc": "Any native attributes to pass to the prompt control",
-                  "examples": [ "autocomplete: 'off'" ]
+                  "examples": [ "# autocomplete: 'off'" ]
                 }
               }
             },
@@ -98,7 +98,7 @@
               "type": "Object",
               "tsType": "QDialogSelectionPrompt",
               "desc": "An object definition for creating the selection form content",
-              "examples": [ "{ model: this.dialogSelection, type: 'radio', items: [...listOfItems] }" ],
+              "examples": [ "{ model: null, type: 'radio', items: [ /* ...listOfItems */ ] }" ],
               "definition": {
                 "model": {
                   "type": [ "String", "Array" ],
@@ -110,8 +110,8 @@
                 "type": {
                   "type": "String",
                   "desc": "The type of selection",
-                  "default": "radio",
-                  "values": [ "radio", "checkbox", "toggle" ]
+                  "default": "'radio'",
+                  "values": [ "'radio'", "'checkbox'", "'toggle'" ]
                 },
 
                 "items": {
@@ -131,7 +131,7 @@
                       "required": true,
                       "desc": "The current model (String if it's of type radio or Array otherwise)",
                       "examples": [
-                        "opt2",
+                        "'opt2'",
                         "[ 'opt1' ]",
                         "[]",
                         "[ 'opt1', 'opt3' ]"
@@ -201,8 +201,8 @@
             "focus": {
               "type": "String",
               "desc": "What button to focus, unless you also have 'prompt' or 'options'",
-              "values": [ "ok", "cancel", "none" ],
-              "default": "ok"
+              "values": [ "'ok'", "'cancel'", "'none'" ],
+              "default": "'ok'"
             },
 
             "stackButtons": {
@@ -261,12 +261,12 @@
 
             "transitionShow": {
               "extends": "transition",
-              "default": "scale"
+              "default": "'scale'"
             },
 
             "transitionHide": {
               "extends": "transition",
-              "default": "scale"
+              "default": "'scale'"
             },
 
             "component": {