quasar 2.2.4 → 2.3.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\"",
@@ -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/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 ]
             }

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

@@ -33,7 +33,7 @@ const mRE = /^M/
 const imgRE = /^img:/
 const svgUseRE = /^svguse:/
 const ionRE = /^ion-/
-const faLaRE = /^[l|f]a[s|r|l|b|d]? /
+const faLaRE = /^[l|f]a[s|r|l|b|d|k]? /
 
 export default createComponent({
   name: 'QIcon',

package/src/components/infinite-scroll/QInfiniteScroll.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onMounted, onActivated, onDeactivated, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
 
 import { createComponent } from '../../utils/private/create.js'
 import debounce from '../../utils/debounce.js'
@@ -7,6 +7,8 @@ import { getScrollTarget, getScrollHeight, getVerticalScrollPosition, setVertica
 import { listenOpts } from '../../utils/event.js'
 import { hSlot, hUniqueSlot } from '../../utils/private/render.js'
 
+const { passive } = listenOpts
+
 export default createComponent({
   name: 'QInfiniteScroll',
 
@@ -34,20 +36,21 @@ export default createComponent({
   emits: [ 'load' ],
 
   setup (props, { slots, emit }) {
-    const fetching = ref(false)
+    const isFetching = ref(false)
+    const isWorking = ref(true)
     const rootRef = ref(null)
 
     let index = props.initialIndex || 0
-    let isWorking = true
+    let scrollPos = false
     let localScrollTarget, poll
 
     const classes = computed(() =>
       'q-infinite-scroll__loading'
-      + (fetching.value === true ? '' : ' invisible')
+      + (isFetching.value === true ? '' : ' invisible')
     )
 
     function immediatePoll () {
-      if (props.disable === true || fetching.value === true || isWorking === false) {
+      if (props.disable === true || isFetching.value === true || isWorking.value === false) {
         return
       }
 
@@ -69,18 +72,18 @@ export default createComponent({
     }
 
     function trigger () {
-      if (props.disable === true || fetching.value === true || isWorking === false) {
+      if (props.disable === true || isFetching.value === true || isWorking.value === false) {
         return
       }
 
       index++
-      fetching.value = true
+      isFetching.value = true
 
       const heightBefore = getScrollHeight(localScrollTarget)
 
       emit('load', index, isDone => {
-        if (isWorking === true) {
-          fetching.value = false
+        if (isWorking.value === true) {
+          isFetching.value = false
           nextTick(() => {
             if (props.reverse === true) {
               const
@@ -107,31 +110,31 @@ export default createComponent({
     }
 
     function resume () {
-      if (isWorking === false) {
-        isWorking = true
-        localScrollTarget.addEventListener('scroll', poll, listenOpts.passive)
+      if (isWorking.value === false) {
+        isWorking.value = true
+        localScrollTarget.addEventListener('scroll', poll, passive)
       }
 
       immediatePoll()
     }
 
     function stop () {
-      if (isWorking === true) {
-        isWorking = false
-        fetching.value = false
-        localScrollTarget.removeEventListener('scroll', poll, listenOpts.passive)
+      if (isWorking.value === true) {
+        isWorking.value = false
+        isFetching.value = false
+        localScrollTarget.removeEventListener('scroll', poll, passive)
       }
     }
 
     function updateScrollTarget () {
-      if (localScrollTarget && isWorking === true) {
-        localScrollTarget.removeEventListener('scroll', poll, listenOpts.passive)
+      if (localScrollTarget && isWorking.value === true) {
+        localScrollTarget.removeEventListener('scroll', poll, passive)
       }
 
       localScrollTarget = getScrollTarget(rootRef.value, props.scrollTarget)
 
-      if (isWorking === true) {
-        localScrollTarget.addEventListener('scroll', poll, listenOpts.passive)
+      if (isWorking.value === true) {
+        localScrollTarget.addEventListener('scroll', poll, passive)
       }
     }
 
@@ -155,30 +158,44 @@ export default createComponent({
         ? immediatePoll
         : debounce(immediatePoll, isNaN(val) === true ? 100 : val)
 
-      if (localScrollTarget && isWorking === true) {
+      if (localScrollTarget && isWorking.value === true) {
         if (oldPoll !== void 0) {
-          localScrollTarget.removeEventListener('scroll', oldPoll, listenOpts.passive)
+          localScrollTarget.removeEventListener('scroll', oldPoll, passive)
         }
 
-        localScrollTarget.addEventListener('scroll', poll, listenOpts.passive)
+        localScrollTarget.addEventListener('scroll', poll, passive)
       }
     }
 
     watch(() => props.disable, val => {
-      if (val === true) {
-        stop()
-      }
-      else {
-        resume()
+      if (val === true) { stop() }
+      else { resume() }
+    })
+
+    watch(() => props.reverse, val => {
+      if (isFetching.value === false && isWorking.value === true) {
+        immediatePoll()
       }
     })
 
     watch(() => props.scrollTarget, updateScrollTarget)
     watch(() => props.debounce, setDebounce)
 
+    onActivated(() => {
+      if (localScrollTarget && scrollPos !== false) {
+        setVerticalScrollPosition(localScrollTarget, scrollPos)
+      }
+    })
+
+    onDeactivated(() => {
+      scrollPos = localScrollTarget
+        ? getVerticalScrollPosition(localScrollTarget)
+        : false
+    })
+
     onBeforeUnmount(() => {
-      if (isWorking === true) {
-        localScrollTarget.removeEventListener('scroll', poll, listenOpts.passive)
+      if (isWorking.value === true) {
+        localScrollTarget.removeEventListener('scroll', poll, passive)
       }
     })
 
@@ -201,7 +218,7 @@ export default createComponent({
     return () => {
       const child = hUniqueSlot(slots.default, [])
 
-      if (props.disable !== true && isWorking === true) {
+      if (props.disable !== true && isWorking.value === true) {
         child[ props.reverse === false ? 'push' : 'unshift' ](
           h('div', { class: classes.value }, hSlot(slots.loading))
         )

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

@@ -44,6 +44,11 @@ export default createComponent({
     query: Boolean,
     rounded: Boolean,
 
+    animationSpeed: {
+      type: [ String, Number ],
+      default: 2100
+    },
+
     instantFeedback: Boolean
   },
 
@@ -53,6 +58,10 @@ export default createComponent({
     const sizeStyle = useSize(props, defaultSizes)
 
     const motion = computed(() => props.indeterminate === true || props.query === true)
+    const style = computed(() => ({
+      ...(sizeStyle.value !== null ? sizeStyle.value : {}),
+      '--q-linear-progress-speed': `${ props.animationSpeed }ms`
+    }))
 
     const classes = computed(() =>
       'q-linear-progress'
@@ -103,7 +112,7 @@ export default createComponent({
 
       return h('div', {
         class: classes.value,
-        style: sizeStyle.value,
+        style: style.value,
         role: 'progressbar',
         'aria-valuemin': 0,
         'aria-valuemax': 1,

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

@@ -66,6 +66,12 @@
       "type": "Boolean",
       "desc": "No transition when model changes",
       "category": "behavior"
+    },
+
+    "animation-speed": {
+      "extends": "animation-speed",
+      "default": 300,
+      "addedIn": "v2.3"
     }
   },
 

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

@@ -1,4 +1,5 @@
 .q-linear-progress
+  --q-linear-progress-speed: .3s
   position: relative
   width: 100%
   overflow: hidden
@@ -10,7 +11,7 @@
     transform-origin: 0 0
 
     &--with-transition
-      transition: transform .3s
+      transition: transform var(--q-linear-progress-speed)
 
   &--reverse
     .q-linear-progress
@@ -50,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"