quasar 2.3.0 → 2.3.4

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\"",
@@ -175,35 +209,42 @@
           "definition": {
             "year": {
               "type": "Number",
+              "required": true,
               "desc": "The year of the date that the user has clicked/tapped on",
               "__exemption": [ "examples" ]
             },
             "month": {
               "type": "Number",
+              "required": true,
               "desc": "The month of the date that the user has clicked/tapped on",
               "__exemption": [ "examples" ]
             },
             "day": {
               "type": "Number",
+              "required": true,
               "desc": "The day of the month that the user has clicked/tapped on",
               "__exemption": [ "examples" ]
             },
             "from": {
               "type": "Object",
+              "required": false,
               "desc": "Object of properties of the range starting point (only if range)",
               "definition": {
                 "year": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The year",
                   "__exemption": [ "examples" ]
                 },
                 "month": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The month",
                   "__exemption": [ "examples" ]
                 },
                 "day": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The day of month",
                   "__exemption": [ "examples" ]
                 }
@@ -211,20 +252,24 @@
             },
             "to": {
               "type": "Object",
+              "required": false,
               "desc": "Object of properties of the range ending point (only if range)",
               "definition": {
                 "year": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The year",
                   "__exemption": [ "examples" ]
                 },
                 "month": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The month",
                   "__exemption": [ "examples" ]
                 },
                 "day": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The day of month",
                   "__exemption": [ "examples" ]
                 }
@@ -244,11 +289,13 @@
           "definition": {
             "year": {
               "type": "Number",
+              "required": true,
               "desc": "The year",
               "__exemption": [ "examples" ]
             },
             "month": {
               "type": "Number",
+              "required": true,
               "desc": "The month",
               "__exemption": [ "examples" ]
             }
@@ -266,16 +313,19 @@
           "definition": {
             "year": {
               "type": "Number",
+              "required": true,
               "desc": "The year",
               "__exemption": [ "examples" ]
             },
             "month": {
               "type": "Number",
+              "required": true,
               "desc": "The month",
               "__exemption": [ "examples" ]
             },
             "day": {
               "type": "Number",
+              "required": true,
               "desc": "The day of month",
               "__exemption": [ "examples" ]
             }
@@ -293,20 +343,24 @@
           "definition": {
             "from": {
               "type": "Object",
+              "required": true,
               "desc": "Definition of date from where the range begins",
               "definition": {
                 "year": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The year",
                   "__exemption": [ "examples" ]
                 },
                 "month": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The month",
                   "__exemption": [ "examples" ]
                 },
                 "day": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The day of month",
                   "__exemption": [ "examples" ]
                 }
@@ -314,20 +368,24 @@
             },
             "to": {
               "type": "Object",
+              "required": true,
               "desc": "Definition of date to where the range ends",
               "definition": {
                 "year": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The year",
                   "__exemption": [ "examples" ]
                 },
                 "month": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The month",
                   "__exemption": [ "examples" ]
                 },
                 "day": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The day of month",
                   "__exemption": [ "examples" ]
                 }
@@ -349,8 +407,8 @@
       "params": {
         "view": {
           "type": "String",
-          "desc": "QDate view name",
           "required": true,
+          "desc": "QDate view name",
           "values": [ "Calendar", "Months", "Years" ]
         }
       }

package/src/components/editor/QEditor.js

@@ -80,12 +80,12 @@ export default createComponent({
   ],
 
   setup (props, { slots, emit, attrs }) {
-    const { proxy } = getCurrentInstance()
+    const { proxy, vnode } = getCurrentInstance()
     const { $q } = proxy
 
     const isDark = useDark(props, $q)
     const { inFullscreen, toggleFullscreen } = useFullscreen()
-    const splitAttrs = useSplitAttrs(attrs)
+    const splitAttrs = useSplitAttrs(attrs, vnode)
 
     const rootRef = ref(null)
     const contentRef = ref(null)

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/expansion-item/QExpansionItem.json

@@ -7,8 +7,9 @@
 
   "props": {
     "model-value": {
+      "extends": "model-value",
       "desc": "Model of the component defining 'open' state; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "category": "model"
+      "required": false
     },
 
     "icon": {

package/src/components/fab/QFab.json

@@ -3,8 +3,10 @@
 
   "props": {
     "model-value": {
+      "extends": "model-value",
       "desc": "Controls state of fab actions (showing/hidden); Works best with v-model directive, otherwise use along listening to 'update:modelValue' event",
-      "category": "model"
+      "category": "model",
+      "required": false
     },
 
     "icon": {

package/src/components/field/QField.json

@@ -30,9 +30,8 @@
           "examples": [ "qf_363270c0-7a83-62b1-8dcf-6dfd64ee38fa" ]
         },
         "field": {
-          "type": "Object",
-          "desc": "DOM element of the field",
-          "__exemption": [ "examples" ]
+          "type": "Element",
+          "desc": "DOM element of the field"
         },
         "editable": {
           "type": "Boolean",
@@ -57,6 +56,7 @@
           "params": {
             "value": {
               "type": "Any",
+              "required": true,
               "desc": "Value to be emitted",
               "examples": [ 0, "Changed text" ]
             }

package/src/components/file/QFile.json

@@ -42,16 +42,19 @@
           "definition": {
             "totalSize": {
               "type": "String",
+              "required": true,
               "desc": "The total size of files in human readable format",
               "examples": [ "1.42MB" ]
             },
             "filesNumber": {
               "type": "Number",
+              "required": true,
               "desc": "Number of picked files",
               "examples": [ 5 ]
             },
             "maxFiles": {
               "type": [ "Number", "String" ],
+              "required": true,
               "desc": "Maximum number of files (same as 'max-files' prop, if specified); When 'max-files' is not specified, this has 'void 0' as value",
               "examples": [ 5 ]
             }
@@ -111,9 +114,9 @@
         },
 
         "ref": {
-          "type": "Object",
-          "desc": "Reference to the QFile component",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "tsType": "QFile",
+          "desc": "Reference to the QFile component"
         }
       }
     },
@@ -128,9 +131,9 @@
         },
 
         "ref": {
-          "type": "Object",
-          "desc": "Reference to the QFile component",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "tsType": "QFile",
+          "desc": "Reference to the QFile component"
         }
       }
     }

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/form/QForm.json

@@ -52,9 +52,8 @@
       "desc": "Emitted after a validation was triggered and at least one of the inner Quasar components models are NOT valid",
       "params": {
         "ref": {
-          "type": "Object",
-          "desc": "Vue reference to the first component that triggered the validation error",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "desc": "Vue reference to the first component that triggered the validation error"
         }
       }
     }

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/icon/QIcon.js

@@ -29,11 +29,11 @@ const matMap = {
 
 const libRE = new RegExp('^(' + Object.keys(libMap).join('|') + ')')
 const matRE = new RegExp('^(' + Object.keys(matMap).join('|') + ')')
-const mRE = /^M/
+const mRE = /^[Mm] ?\d/
 const imgRE = /^img:/
 const svgUseRE = /^svguse:/
 const ionRE = /^ion-/
-const faLaRE = /^[l|f]a[s|r|l|b|d]? /
+const faLaRE = /^[lf]a[srlbdk]? /
 
 export default createComponent({
   name: 'QIcon',

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/layout/QLayout.json

@@ -37,11 +37,13 @@
           "definition": {
             "height": {
               "type": "Number",
+              "required": true,
               "desc": "Layout height",
               "examples": [ 575 ]
             },
             "width": {
               "type": "Number",
+              "required": true,
               "desc": "Layout height",
               "examples": [ 575 ]
             }
@@ -59,27 +61,32 @@
           "definition": {
             "position": {
               "type": "Number",
+              "required": true,
               "desc": "Scroll offset from top (vertical)",
               "examples": [ 120 ]
             },
 
             "direction": {
               "type": "String",
+              "required": true,
               "desc": "Direction of scroll",
               "values": [ "up", "down" ]
             },
             "directionChanged": {
               "type": "Boolean",
+              "required": true,
               "desc": "Has scroll direction changed since event was last emitted?"
             },
             "delta": {
               "type": "Number",
+              "required": true,
               "desc": "Vertical delta distance since event was last emitted",
               "examples": [ 120 ]
             },
 
             "inflectionPoint": {
               "type": "Number",
+              "required": true,
               "desc": "Scroll offset from top (vertical)",
               "examples": [ 120 ]
             }
@@ -94,7 +101,7 @@
         "height": {
           "type": "Number",
           "desc": "New scroll height of layout",
-          "examples": [1442]
+          "examples": [ 1442 ]
         }
       }
     }

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

@@ -58,6 +58,7 @@ export default createComponent({
     const sizeStyle = useSize(props, defaultSizes)
 
     const motion = computed(() => props.indeterminate === true || props.query === true)
+    const widthReverse = computed(() => props.reverse !== props.query)
     const style = computed(() => ({
       ...(sizeStyle.value !== null ? sizeStyle.value : {}),
       '--q-linear-progress-speed': `${ props.animationSpeed }ms`
@@ -70,7 +71,7 @@ export default createComponent({
       + (props.rounded === true ? ' rounded-borders' : '')
     )
 
-    const trackStyle = computed(() => width(props.buffer !== void 0 ? props.buffer : 1, props.reverse, proxy.$q))
+    const trackStyle = computed(() => width(props.buffer !== void 0 ? props.buffer : 1, widthReverse.value, proxy.$q))
     const trackClass = computed(() =>
       'q-linear-progress__track absolute-full'
       + ` q-linear-progress__track--with${ props.instantFeedback === true ? 'out' : '' }-transition`
@@ -78,7 +79,7 @@ export default createComponent({
       + (props.trackColor !== void 0 ? ` bg-${ props.trackColor }` : '')
     )
 
-    const modelStyle = computed(() => width(motion.value === true ? 1 : props.value, props.reverse, proxy.$q))
+    const modelStyle = computed(() => width(motion.value === true ? 1 : props.value, widthReverse.value, proxy.$q))
     const modelClass = computed(() =>
       'q-linear-progress__model absolute-full'
       + ` q-linear-progress__model--with${ props.instantFeedback === true ? 'out' : '' }-transition`

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/linear-progress/QLinearProgress.sass

@@ -51,7 +51,7 @@
       background: rgba(255,255,255,.6)
 
   &__stripe
-    transition: width .3s
+    transition: width var(--q-linear-progress-speed)
     background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0)) !important
     background-size: 40px 40px !important
 

package/src/components/pagination/QPagination.json

@@ -22,7 +22,6 @@
     "max": {
       "type": "Number",
       "desc": "Number of last page (must be higher than 'min')",
-      "default": 100,
       "required": true,
       "examples": [ 10 ],
       "category": "model"

package/src/components/popup-edit/QPopupEdit.json

@@ -173,6 +173,7 @@
           "params": {
             "value": {
               "type": "Any",
+              "required": true,
               "desc": "Value to be checked",
               "examples": [ 0, "Changed text" ]
             }

package/src/components/popup-proxy/QPopupProxy.json

@@ -7,9 +7,10 @@
 
   "props": {
     "model-value": {
+      "extends": "model-value",
       "type": "Boolean",
       "desc": "Defines the state of the component (shown/hidden); Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "category": "model"
+      "required": false
     },
 
     "breakpoint": {

package/src/components/rating/QRating.json

@@ -9,7 +9,7 @@
     "model-value": {
       "extends": "model-value",
       "type": "Number",
-      "examples": [ ":value=\"2\"" ]
+      "examples": [ "v-model=\"rating\"", ":model-value=\"rating\"", ":model-value=\"2\"" ]
     },
 
     "max": {

package/src/components/resize-observer/QResizeObserver.json

@@ -23,11 +23,13 @@
           "definition": {
             "height": {
               "type": "Number",
+              "required": true,
               "desc": "Layout height",
               "examples": [ 822 ]
             },
             "width": {
               "type": "Number",
+              "required": true,
               "desc": "Layout width",
               "examples": [ 822 ]
             }

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

@@ -18,6 +18,11 @@ const dirProps = {
   vertical: { offset: 'offsetY', scroll: 'scrollTop', dir: 'down', dist: 'y' },
   horizontal: { offset: 'offsetX', scroll: 'scrollLeft', dir: 'right', dist: 'x' }
 }
+const panOpts = {
+  prevent: true,
+  mouse: true,
+  mouseAllDir: true
+}
 
 export default createComponent({
   name: 'QScrollArea',
@@ -173,7 +178,7 @@ export default createComponent({
     )
 
     const mainStyle = computed(() => (
-      scroll.vertical.thumbHidden.value === true || scroll.horizontal.thumbHidden.value === true
+      scroll.vertical.thumbHidden.value === true && scroll.horizontal.thumbHidden.value === true
         ? props.contentStyle
         : props.contentActiveStyle
     ))
@@ -182,24 +187,14 @@ export default createComponent({
       TouchPan,
       e => { onPanThumb(e, 'vertical') },
       void 0,
-      {
-        vertical: true,
-        prevent: true,
-        mouse: true,
-        mouseAllDir: true
-      }
+      { vertical: true, ...panOpts }
     ] ]
 
     const thumbHorizDir = [ [
       TouchPan,
       e => { onPanThumb(e, 'horizontal') },
       void 0,
-      {
-        horizontal: true,
-        prevent: true,
-        mouse: true,
-        mouseAllDir: true
-      }
+      { horizontal: true, ...panOpts }
     ] ]
 
     function getScroll () {