quasar 2.2.3 → 2.3.2

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/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

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

@@ -6,7 +6,6 @@ import QMenu from '../menu/QMenu.js'
 import useAnchor, { useAnchorProps } from '../../composables/private/use-anchor.js'
 
 import { createComponent } from '../../utils/private/create.js'
-import { hSlot } from '../../utils/private/render.js'
 
 export default createComponent({
   name: 'QPopupProxy',
@@ -40,6 +39,10 @@ export default createComponent({
 
     const type = ref(getType())
 
+    const popupProps = computed(() => (
+      type.value === 'menu' ? { maxHeight: '99vh' } : {})
+    )
+
     watch(() => getType(), val => {
       if (showing.value !== true) {
         type.value = val
@@ -65,21 +68,9 @@ export default createComponent({
     }
 
     return () => {
-      const def = hSlot(slots.default)
-
-      const popupProps = (
-        type.value === 'menu'
-        && def !== void 0
-        && def[ 0 ] !== void 0
-        && def[ 0 ].type !== void 0
-        && [ 'QDate', 'QTime', 'QCarousel', 'QColor' ].includes(
-          def[ 0 ].type.name
-        )
-      ) ? { cover: true, maxHeight: '99vh' } : {}
-
       const data = {
         ref: popupRef,
-        ...popupProps,
+        ...popupProps.value,
         ...attrs,
         onShow,
         onHide
@@ -100,7 +91,7 @@ export default createComponent({
         })
       }
 
-      return h(component, data, () => def)
+      return h(component, data, slots.default)
     }
   }
 })

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

@@ -173,7 +173,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
     ))

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

@@ -933,6 +933,12 @@ export default createComponent({
     }
 
     function getAllOptions () {
+      if (noOptions.value === true) {
+        return slots[ 'no-option' ] !== void 0
+          ? slots[ 'no-option' ]({ inputValue: inputValue.value })
+          : void 0
+      }
+
       const fn = slots.option !== void 0
         ? slots.option
         : scope => {
@@ -1114,14 +1120,6 @@ export default createComponent({
     }
 
     function getMenu () {
-      const child = noOptions.value === true
-        ? (
-            slots[ 'no-option' ] !== void 0
-              ? () => slots[ 'no-option' ]({ inputValue: inputValue.value })
-              : void 0
-          )
-        : getAllOptions
-
       return h(QMenu, {
         ref: menuRef,
         class: menuContentClass.value,
@@ -1146,7 +1144,7 @@ export default createComponent({
         onBeforeShow: onControlPopupShow,
         onBeforeHide: onMenuBeforeHide,
         onShow: onMenuShow
-      }, child)
+      }, getAllOptions)
     }
 
     function onMenuBeforeHide (e) {
@@ -1175,7 +1173,7 @@ export default createComponent({
     function getDialog () {
       const content = [
         h(QField, {
-          class: `col-auto ${ state.fieldClass }`,
+          class: `col-auto ${ state.fieldClass.value }`,
           ...innerFieldProps.value,
           for: state.targetUid.value,
           dark: isOptionsDark.value,
@@ -1203,15 +1201,7 @@ export default createComponent({
           ...listboxAttrs.value,
           onClick: prevent,
           onScrollPassive: onVirtualScrollEvt
-        }, (
-          noOptions.value === true
-            ? (
-                slots[ 'no-option' ] !== void 0
-                  ? slots[ 'no-option' ]({ inputValue: inputValue.value })
-                  : null
-              )
-            : getAllOptions()
-        ))
+        }, getAllOptions())
       )
 
       return h(QDialog, {
@@ -1349,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)
     }
 
@@ -1428,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/skeleton/QSkeleton.json

@@ -33,11 +33,8 @@
     },
 
     "animation-speed": {
-      "type": [ "String", "Number" ],
-      "desc": "Animation speed (in milliseconds, without unit)",
+      "extends": "animation-speed",
       "default": 300,
-      "examples": [ 500, "1200" ],
-      "category": "style",
       "addedIn": "v2.2"
     },
 

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/table/table-pagination.js

@@ -26,7 +26,7 @@ export const useTablePaginationProps = {
     default: () => [ 5, 7, 10, 15, 20, 25, 50, 0 ]
   },
 
-  'onUpdate:pagination': Function
+  'onUpdate:pagination': [ Function, Array ]
 }
 
 export function useTablePaginationState (vm, getCellValue) {
@@ -76,7 +76,7 @@ export function useTablePaginationState (vm, getCellValue) {
       ...val
     })
 
-    if (samePagination(computedPagination.value, newPagination)) {
+    if (samePagination(computedPagination.value, newPagination) === true) {
       if (isServerSide.value === true && forceServerRequest === true) {
         sendServerRequest(newPagination)
       }