quasar 2.3.0 → 2.3.1

package/dist/vetur/quasar-attributes.json

@@ -2136,7 +2136,7 @@
     "description": "Adds a default shadow to the footer"
   },
   "q-footer/height-hint": {
-    "type": "number|string ",
+    "type": "number|string",
     "description": "When using SSR, you can optionally hint of the height (in pixels) of the QFooter"
   },
   "q-form/autofocus": {
@@ -2176,7 +2176,7 @@
     "description": "Adds a default shadow to the header"
   },
   "q-header/height-hint": {
-    "type": "number|string ",
+    "type": "number|string",
     "description": "When using SSR, you can optionally hint of the height (in pixels) of the QHeader"
   },
   "q-icon/size": {
@@ -2579,6 +2579,10 @@
     "type": "string",
     "description": "One of Quasar's embedded transitions"
   },
+  "q-intersection/transition-duration": {
+    "type": "string|number",
+    "description": "Transition duration (in milliseconds, without unit)"
+  },
   "q-intersection/disable": {
     "type": "boolean",
     "description": "Disable visibility observable (content will remain as it was, visible or hidden)"

package/dist/vetur/quasar-tags.json

@@ -845,6 +845,7 @@
       "margin",
       "threshold",
       "transition",
+      "transition-duration",
       "disable"
     ],
     "description": ""

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -6715,7 +6715,7 @@
               "name": "height-hint",
               "value": {
                 "kind": "expression",
-                "type": "number|String "
+                "type": "number|string"
               },
               "description": "When using SSR, you can optionally hint of the height (in pixels) of the QFooter\n\nExamples:\n150",
               "doc-url": "https://v2.quasar.dev/layout/header-and-footer",
@@ -6907,7 +6907,7 @@
               "name": "height-hint",
               "value": {
                 "kind": "expression",
-                "type": "number|String "
+                "type": "number|string"
               },
               "description": "When using SSR, you can optionally hint of the height (in pixels) of the QHeader\n\nExamples:\n150",
               "doc-url": "https://v2.quasar.dev/layout/header-and-footer",
@@ -8150,6 +8150,16 @@
               "description": "One of Quasar's embedded transitions\n\nExamples:\nfade\nslide-down",
               "doc-url": "https://v2.quasar.dev/vue-components/intersection"
             },
+            {
+              "name": "transition-duration",
+              "value": {
+                "kind": "expression",
+                "type": "string|number"
+              },
+              "description": "Transition duration (in milliseconds, without unit)\n\nExamples:\n500\n1200",
+              "doc-url": "https://v2.quasar.dev/vue-components/intersection",
+              "default": "300"
+            },
             {
               "name": "disable",
               "value": {
@@ -11537,6 +11547,7 @@
                 {
                   "name": "info",
                   "type": "object",
+                  "description": "An object containing scroll information",
                   "doc-url": "https://v2.quasar.dev/vue-components/scroll-area"
                 }
               ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",
@@ -67,6 +67,8 @@
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.3",
     "babel-preset-es2015-rollup": "^3.0.0",
+    "cli-highlight": "^2.1.11",
+    "diff": "^5.0.0",
     "eslint": "^7.4.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-friendly-formatter": "^4.0.1",
@@ -75,6 +77,7 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-vue": "^7.0.0",
     "eslint-webpack-plugin": "^2.4.1",
+    "fast-glob": "^3.2.7",
     "json-beautify": "^1.1.1",
     "module-alias": "^2.2.2",
     "prettier": "^2.4.1",

package/src/body.js

@@ -82,12 +82,18 @@ export default {
       }
 
       ssrContext._meta.bodyClasses += cls.join(' ')
-      return
-    }
 
-    const { $q } = opts
+      const brand = $q.config.brand
+      if (brand !== void 0) {
+        const vars = Object.keys(brand)
+          .map(key => `--q-${ key }:${ brand[ key ] };`)
+          .join('')
+
+        ssrContext._meta.endingHeadTags += `<style>:root{${ vars }}</style>`
+      }
 
-    $q.config.brand !== void 0 && setColors($q.config.brand)
+      return
+    }
 
     if (this.__installed === true) { return }
 
@@ -95,6 +101,10 @@ export default {
       applyClientSsrCorrections()
     }
     else {
+      const { $q } = opts
+
+      $q.config.brand !== void 0 && setColors($q.config.brand)
+
       const cls = getBodyClasses(client, $q.config)
       document.body.classList.add.apply(document.body.classList, cls)
     }

package/src/components/circular-progress/QCircularProgress.json

@@ -96,7 +96,7 @@
     "animation-speed": {
       "extends": "animation-speed",
       "default": 600,
-      "addedIn": "v2.2.5"
+      "addedIn": "v2.3"
     }
   },
 

package/src/components/date/QDate.json

@@ -61,6 +61,17 @@
     "events": {
       "type": [ "Array", "Function" ],
       "desc": "A list of events to highlight on the calendar; If using a function, it receives the date as a String and must return a Boolean (matches or not); If using a function then for best performance, reference it from your scope and do not define it inline",
+      "params": {
+        "date": {
+          "type": "String",
+          "desc": "The current date being processed.",
+          "examples": [ "2018/11/05", "2021/10/25" ]
+        }
+      },
+      "returns": {
+        "type": "Boolean",
+        "desc": "If true, the current date will be highlighted"
+      },
       "examples": [
         ":events=\"['2018/11/05', '2018/11/06', '2018/11/09', '2018/11/23']\"",
         ":events=\"date => date[9] % 3 === 0\""
@@ -71,6 +82,18 @@
     "event-color": {
       "type": [ "String", "Function" ],
       "desc": "Color name (from the Quasar Color Palette); If using a function, it receives the date as a String and must return a String (color for the received date); If using a function then for best performance, reference it from your scope and do not define it inline",
+      "params": {
+        "date": {
+          "type": "String",
+          "desc": "The current date being processed.",
+          "examples": [ "2018/11/05", "2021/10/25" ]
+        }
+      },
+      "returns": {
+        "type": "String",
+        "desc": "Color for the current date.",
+        "examples": [ "teal", "orange" ]
+      },
       "examples": [
         "teal-10",
         ":event-color=\"(date) => date[9] % 2 === 0 ? 'teal' : 'orange'\""
@@ -81,6 +104,17 @@
     "options": {
       "type": [ "Array", "Function" ],
       "desc": "Optionally configure the days that are selectable; If using a function, it receives the date as a String and must return a Boolean (is date acceptable or not); If using a function then for best performance, reference it from your scope and do not define it inline; Incompatible with 'range' prop",
+      "params": {
+        "date": {
+          "type": "String",
+          "desc": "The current date being processed.",
+          "examples": [ "2018/11/05", "2021/10/25" ]
+        }
+      },
+      "returns": {
+        "type": "Boolean",
+        "desc": "If true, the current date will be made available for selection"
+      },
       "examples": [
         ":options=\"['2018/11/05', '2018/11/12', '2018/11/19', '2018/11/26' ]\"",
         ":options=\"date => date[9] % 3 === 0\"",

package/src/components/editor/QEditor.json

@@ -120,8 +120,12 @@
         },
         "disable": {
           "type": [ "Boolean", "Function" ],
-          "desc": "Is button disabled? If specifying a function, return a Boolean value.",
-          "examples": [ "() => this.userIsActive()" ]
+          "desc": "Is button disabled?",
+          "returns": {
+            "type": "Boolean",
+            "desc": "If true, the button will be disabled"
+          },
+          "examples": [ "!user.active", "() => !checkIfUserIsActive()" ]
         },
         "type": {
           "type": "String",

package/src/components/footer/QFooter.json

@@ -32,7 +32,7 @@
     },
 
     "height-hint": {
-      "type": [ "Number", "String " ],
+      "type": [ "Number", "String" ],
       "desc": "When using SSR, you can optionally hint of the height (in pixels) of the QFooter",
       "default": 50,
       "examples": [ "150" ],

package/src/components/header/QHeader.json

@@ -42,7 +42,7 @@
     },
 
     "height-hint": {
-      "type": [ "Number", "String " ],
+      "type": [ "Number", "String" ],
       "desc": "When using SSR, you can optionally hint of the height (in pixels) of the QHeader",
       "default": 50,
       "examples": [ "150" ],

package/src/components/intersection/QIntersection.js

@@ -18,6 +18,10 @@ export default createComponent({
 
     once: Boolean,
     transition: String,
+    transitionDuration: {
+      type: [ String, Number ],
+      default: 300
+    },
 
     ssrPrerender: Boolean,
 
@@ -63,6 +67,10 @@ export default createComponent({
       ] ]
     })
 
+    const transitionStyle = computed(
+      () => `--q-transition-duration: ${ props.transitionDuration }ms`
+    )
+
     function trigger (entry) {
       if (showing.value !== entry.isIntersecting) {
         showing.value = entry.isIntersecting
@@ -72,7 +80,7 @@ export default createComponent({
 
     function getContent () {
       return showing.value === true
-        ? [ h('div', { key: 'content' }, hSlot(slots.default)) ]
+        ? [ h('div', { key: 'content', style: transitionStyle.value }, hSlot(slots.default)) ]
         : void 0
     }
 

package/src/components/intersection/QIntersection.json

@@ -51,6 +51,15 @@
       "category": "behavior"
     },
 
+    "transition-duration": {
+      "type": [ "String", "Number" ],
+      "desc": "Transition duration (in milliseconds, without unit)",
+      "default": 300,
+      "examples": [ 500, "1200" ],
+      "category": "behavior",
+      "addedIn": "v2.3.1"
+    },
+
     "disable": {
       "type": "Boolean",
       "desc": "Disable visibility observable (content will remain as it was, visible or hidden)",

package/src/components/linear-progress/QLinearProgress.json

@@ -71,7 +71,7 @@
     "animation-speed": {
       "extends": "animation-speed",
       "default": 300,
-      "addedIn": "v2.2.5"
+      "addedIn": "v2.3"
     }
   },
 

package/src/components/scroll-area/QScrollArea.json

@@ -95,13 +95,14 @@
       "params": {
         "info": {
           "type": "Object",
-          "__exemption": [ "examples" ],
+          "desc": "An object containing scroll information",
           "definition": {
             "ref": {
               "type": "Object",
               "desc": "Vue reference to the QScrollArea which triggered the event",
               "__exemption": [ "examples" ]
             },
+
             "verticalPosition": {
               "type": "Number",
               "desc": "Vertical scroll position (in px)",
@@ -215,6 +216,7 @@
       "desc": "Get current scroll position",
       "returns": {
         "type": "Object",
+        "desc": "An object containing scroll position information",
         "definition": {
           "top": {
             "type": "Number",
@@ -235,6 +237,7 @@
       "desc": "Get current scroll position in percentage (0.0 <= x <= 1.0)",
       "returns": {
         "type": "Object",
+        "desc": "An object containing scroll position information in percentage",
         "definition": {
           "top": {
             "type": "Number",

package/src/components/select/QSelect.js

@@ -1339,14 +1339,14 @@ export default createComponent({
     function onControlPopupShow (e) {
       e !== void 0 && stop(e)
       emit('popup-show', e)
-      state.hasPopupOpen.value = true
+      state.hasPopupOpen = true
       state.onControlFocusin(e)
     }
 
     function onControlPopupHide (e) {
       e !== void 0 && stop(e)
       emit('popup-hide', e)
-      state.hasPopupOpen.value = false
+      state.hasPopupOpen = false
       state.onControlFocusout(e)
     }
 
@@ -1418,6 +1418,10 @@ export default createComponent({
         ) {
           return hasDialog === true ? getDialog() : getMenu()
         }
+        else if (state.hasPopupOpen === true) {
+          // explicitly set it otherwise TAB will not blur component
+          state.hasPopupOpen = false
+        }
       },
 
       controlEvents: {

package/src/components/select/QSelect.json

@@ -47,6 +47,22 @@
       "type": [ "Function", "String" ],
       "desc": "Property of option which holds the 'value'; If using a function then for best performance, reference it from your scope and do not define it inline",
       "default": "value",
+      "params": {
+        "option": {
+          "type": [ "String", "Object" ],
+          "desc": "The current option being processed",
+          "examples": [
+            "'BMW'",
+            "'Samsung Phone'",
+            "{ label: 'BMW', value: 'car', cannotSelect: true }"
+          ]
+        }
+      },
+      "returns": {
+        "type": "Any",
+        "desc": "Value of the current option",
+        "examples": [ "'car'", "34" ]
+      },
       "examples": [
         "option-value=\"modelNumber\"",
         ":option-value=\"(item) => item === null ? null : item.modelNumber\""
@@ -58,6 +74,22 @@
       "type": [ "Function", "String" ],
       "desc": "Property of option which holds the 'label'; If using a function then for best performance, reference it from your scope and do not define it inline",
       "default": "label",
+      "params": {
+        "option": {
+          "type": [ "String", "Object" ],
+          "desc": "The current option being processed",
+          "examples": [
+            "'BMW'",
+            "'Samsung Phone'",
+            "{ label: 'BMW', value: 'car', cannotSelect: true }"
+          ]
+        }
+      },
+      "returns": {
+        "type": "String",
+        "desc": "Label of the current option",
+        "examples": [ "'BMW'", "'Samsung Phone'" ]
+      },
       "examples": [
         "option-label=\"itemName\"",
         ":option-label=\"(item) => item === null ? 'Null value' : item.itemName\""
@@ -69,6 +101,21 @@
       "type": [ "Function", "String" ],
       "desc": "Property of option which tells it's disabled; The value of the property must be a Boolean; If using a function then for best performance, reference it from your scope and do not define it inline",
       "default": "disable",
+      "params": {
+        "option": {
+          "type": [ "String", "Object" ],
+          "desc": "The current option being processed",
+          "examples": [
+            "'BMW'",
+            "'Samsung Phone'",
+            "{ label: 'BMW', value: 'car', cannotSelect: true }"
+          ]
+        }
+      },
+      "returns": {
+        "type": "Boolean",
+        "desc": "If true, the current option will be disabled"
+      },
       "examples": [
         "option-disable=\"cannotSelect\"",
         ":option-disable=\"(item) => item === null ? true : item.cannotSelect\""

package/src/components/slider/use-slider.js

@@ -210,7 +210,7 @@ export default function ({ updateValue, updatePosition, getDragging }) {
   }
 
   function onPan (event) {
-    if (event.isFinal) {
+    if (event.isFinal === true) {
       if (dragging.value !== void 0) {
         updatePosition(event.evt)
         // only if touch, because we also have mousedown/up:
@@ -220,7 +220,7 @@ export default function ({ updateValue, updatePosition, getDragging }) {
       }
       active.value = false
     }
-    else if (event.isFirst) {
+    else if (event.isFirst === true) {
       dragging.value = getDragging(event.evt)
       updatePosition(event.evt)
       updateValue()
@@ -250,7 +250,7 @@ export default function ({ updateValue, updatePosition, getDragging }) {
   function onDeactivate () {
     preventFocus.value = false
 
-    if (dragging.value === void 0) {
+    if (dragging.value === false) {
       active.value = false
     }
 

package/src/components/table/QTable.json

@@ -17,6 +17,18 @@
       "type": [ "String", "Function" ],
       "desc": "Property of each row that defines the unique key of each row (the result must be a primitive, not Object, Array, etc); The value of property must be string or a function taking a row and returning the desired (nested) key in the row; If supplying a function then for best performance, reference it from your scope and do not define it inline",
       "default": "id",
+      "params": {
+        "row": {
+          "type": "Object",
+          "desc": "The current row being processed",
+          "examples": [ "{ name: 'Lorem Ipsum', price: 19 }" ]
+        }
+      },
+      "returns": {
+        "type": "Any",
+        "desc": "Current row's key",
+        "examples": [ "'34f39dda-6206-4071-a9df-4393aabe49ac'", "34" ]
+      },
       "examples": [ "row-key=\"name\"", ":row-key=\"row => row.name\"" ],
       "category": "general"
     },
@@ -146,7 +158,19 @@
           "type": [ "String", "Function" ],
           "desc": "Row Object property to determine value for this column or function which maps to the required property",
           "required": true,
-          "examples": [ "name", "row => row.some.nested.prop" ]
+          "params": {
+            "row": {
+              "type": "Object",
+              "desc": "The current row being processed",
+              "examples": [ "{ name: 'Lorem Ipsum', prices: { active: 19, old: 25, list: 29 } }" ]
+            }
+          },
+          "returns": {
+            "type": "Any",
+            "desc": "Value for this column",
+            "examples": [ "19" ]
+          },
+          "examples": [ "name", "row => row.prices.active" ]
         },
         "required": {
           "type": "Boolean",
@@ -228,17 +252,39 @@
         "style": {
           "type": [ "String", "Function" ],
           "desc": "Style to apply on normal cells of the column",
+          "params": {
+            "row": {
+              "type": "Object",
+              "desc": "The current row being processed",
+              "examples": [ "{ name: 'Frozen Yogurt', calories: 159 }" ]
+            }
+          },
+          "returns": {
+            "type": "String",
+            "__exemption": [ "desc", "examples" ]
+          },
           "examples": [
-            "width: 500px",
-            "row => (row.calories % 2 === 0 ? 'width:10px' : 'font-size:2em')"
+            "'width: 500px'",
+            "row => (row.calories % 2 === 0 ? 'width: 10px' : 'font-size: 2em; font-weight: bold')"
           ]
         },
         "classes": {
           "type": [ "String", "Function" ],
           "desc": "Classes to add on normal cells of the column",
+          "params": {
+            "row": {
+              "type": "Object",
+              "desc": "The current row being processed",
+              "examples": [ "{ name: 'Frozen Yogurt', calories: 159 }" ]
+            }
+          },
+          "returns": {
+            "type": "String",
+            "__exemption": [ "desc", "examples" ]
+          },
           "examples": [
-            "my-special-class",
-            "row => (row.calories % 2 === 0 ? 'bg-green' : 'bg-yellow')"
+            "'my-special-class bg-primary'",
+            "row => (row.calories % 2 === 0 ? 'bg-green text-white' : 'bg-yellow')"
           ]
         },
         "headerStyle": {

package/src/components/tabs/QRouteTab.json

@@ -24,29 +24,7 @@
         "navigateFn": {
           "type": "Function",
           "desc": "When you need to control the time at which the tab should trigger the route navigation then set 'evt.navigate' to false and call this function; Useful if you have async work to be done before the actual route navigation",
-          "params": {
-            "to": {
-              "type": [ "String", "Object" ],
-              "desc": "Equivalent to Vue Router <router-link> 'to' property",
-              "examples": [
-                "/home/dashboard",
-                "{ name: 'my-route-name' }"
-              ],
-              "default": "Tab's 'to' property"
-            },
-
-            "append": {
-              "type": "Boolean",
-              "desc": "Equivalent to Vue Router <router-link> 'append' property",
-              "default": "Tab's 'append' property"
-            },
-
-            "replace": {
-              "type": "Boolean",
-              "desc": "Equivalent to Vue Router <router-link> 'replace' property",
-              "default": "Tab's 'replace' property"
-            }
-          },
+          "params": null,
           "returns": null
         }
       }