quasar 2.2.4 → 2.3.0

package/dist/ssr-directives/Morph.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.2.4
+ * Quasar Framework v2.3.0
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */

package/dist/types/index.d.ts

@@ -2699,6 +2699,11 @@ export interface QCircularProgressProps {
    * No animation when model changes
    */
   instantFeedback?: boolean | undefined;
+  /**
+   * Animation speed (in milliseconds, without unit)
+   * Default value: 600
+   */
+  animationSpeed?: string | number | undefined;
 }
 
 export interface QCircularProgressSlots {
@@ -5932,6 +5937,11 @@ export interface QLinearProgressProps {
    * No transition when model changes
    */
   instantFeedback?: boolean | undefined;
+  /**
+   * Animation speed (in milliseconds, without unit)
+   * Default value: 300
+   */
+  animationSpeed?: string | number | undefined;
 }
 
 export interface QLinearProgressSlots {

package/dist/vetur/quasar-attributes.json

@@ -1027,6 +1027,10 @@
     "type": "boolean",
     "description": "No animation when model changes"
   },
+  "q-circular-progress/animation-speed": {
+    "type": "string|number",
+    "description": "Animation speed (in milliseconds, without unit)"
+  },
   "q-color/name": {
     "type": "string",
     "description": "Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL"
@@ -2819,6 +2823,10 @@
     "type": "boolean",
     "description": "No transition when model changes"
   },
+  "q-linear-progress/animation-speed": {
+    "type": "string|number",
+    "description": "Animation speed (in milliseconds, without unit)"
+  },
   "q-markup-table/dense": {
     "type": "boolean",
     "description": "Dense mode; occupies less space"

package/dist/vetur/quasar-tags.json

@@ -357,7 +357,8 @@
       "indeterminate",
       "show-value",
       "reverse",
-      "instant-feedback"
+      "instant-feedback",
+      "animation-speed"
     ],
     "description": ""
   },
@@ -939,7 +940,8 @@
       "indeterminate",
       "query",
       "rounded",
-      "instant-feedback"
+      "instant-feedback",
+      "animation-speed"
     ],
     "description": ""
   },

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

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -3155,6 +3155,16 @@
               "description": "No animation when model changes",
               "doc-url": "https://v2.quasar.dev/vue-components/circular-progress",
               "type": "boolean"
+            },
+            {
+              "name": "animation-speed",
+              "value": {
+                "kind": "expression",
+                "type": "string|number"
+              },
+              "description": "Animation speed (in milliseconds, without unit)\n\nExamples:\n500\n1200",
+              "doc-url": "https://v2.quasar.dev/vue-components/circular-progress",
+              "default": "600"
             }
           ],
           "slots": [
@@ -8952,6 +8962,16 @@
               "description": "No transition when model changes",
               "doc-url": "https://v2.quasar.dev/vue-components/linear-progress",
               "type": "boolean"
+            },
+            {
+              "name": "animation-speed",
+              "value": {
+                "kind": "expression",
+                "type": "string|number"
+              },
+              "description": "Animation speed (in milliseconds, without unit)\n\nExamples:\n500\n1200",
+              "doc-url": "https://v2.quasar.dev/vue-components/linear-progress",
+              "default": "300"
             }
           ],
           "slots": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "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",

package/src/api.extends.json

@@ -95,6 +95,13 @@
       "category": "transition"
     },
 
+    "animation-speed": {
+      "type": [ "String", "Number" ],
+      "desc": "Animation speed (in milliseconds, without unit)",
+      "examples": [ 500, "1200" ],
+      "category": "style"
+    },
+
     "model-value": {
       "desc": "Model of the component; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive",
       "required": true,

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

@@ -24,6 +24,11 @@ export default createComponent({
       default: 0
     },
 
+    animationSpeed: {
+      type: [ String, Number ],
+      default: 600
+    },
+
     indeterminate: Boolean
   },
 
@@ -43,7 +48,7 @@ export default createComponent({
 
     const circleStyle = computed(() => (
       props.instantFeedback !== true && props.indeterminate !== true
-        ? { transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease' }
+        ? { transition: `stroke-dashoffset ${ props.animationSpeed }ms ease 0s, stroke ${ props.animationSpeed }ms ease` }
         : ''
     ))
 

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

@@ -91,6 +91,12 @@
       "type": "Boolean",
       "desc": "No animation when model changes",
       "category": "behavior"
+    },
+
+    "animation-speed": {
+      "extends": "animation-speed",
+      "default": 600,
+      "addedIn": "v2.2.5"
     }
   },
 

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/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.2.5"
     }
   },
 

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

package/src/components/virtual-scroll/use-virtual-scroll.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, onBeforeMount, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onActivated, onBeforeMount, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
 
 import debounce from '../../utils/debounce.js'
 import { noop } from '../../utils/event.js'
@@ -679,6 +679,22 @@ export function useVirtualScroll ({
     setVirtualScrollSize()
   })
 
+  onActivated(() => {
+    const scrollEl = getVirtualScrollTarget()
+
+    if (prevScrollStart !== void 0 && scrollEl !== void 0 && scrollEl !== null && scrollEl.nodeType !== 8) {
+      setScroll(
+        scrollEl,
+        prevScrollStart,
+        props.virtualScrollHorizontal,
+        $q.lang.rtl
+      )
+    }
+    else {
+      scrollTo(prevToIndex)
+    }
+  })
+
   setOverflowAnchor !== noop && onBeforeUnmount(() => {
     const styleSheet = document.getElementById(vsId + '_ss')
     styleSheet !== null && styleSheet.remove()

package/src/composables/use-dialog-plugin-component.js

@@ -1,5 +1,7 @@
 import { ref, getCurrentInstance } from 'vue'
 
+import getEmitsObject from '../utils/private/get-emits-object'
+
 // To be used for the custom component
 // used on a Dialog plugin
 
@@ -34,6 +36,9 @@ function useDialogPluginComponent () {
   }
 }
 
-useDialogPluginComponent.emits = [ 'ok', 'hide' ]
+const emits = [ 'ok', 'hide' ]
+
+useDialogPluginComponent.emits = emits
+useDialogPluginComponent.emitsObject = getEmitsObject(emits)
 
 export default useDialogPluginComponent

package/src/utils/create-uploader-component.js

@@ -1,6 +1,9 @@
 import { coreProps, coreEmits, getRenderer } from '../components/uploader/uploader-core.js'
 
 import { createComponent } from './private/create.js'
+import getEmitsObject from './private/get-emits-object.js'
+
+const coreEmitsObject = getEmitsObject(coreEmits)
 
 export default ({ name, props, emits, injectPlugin }) => createComponent({
   name,
@@ -10,10 +13,9 @@ export default ({ name, props, emits, injectPlugin }) => createComponent({
     ...props
   },
 
-  emits: [
-    ...coreEmits,
-    ...emits
-  ],
+  emits: Object(emits) === emits
+    ? { ...coreEmitsObject, ...emits }
+    : [ ...coreEmits, ...emits ],
 
   setup () {
     return getRenderer(injectPlugin)

package/src/utils/private/get-emits-object.js

@@ -0,0 +1,11 @@
+const trueFn = () => true
+
+export default function (emitsArray) {
+  const emitsObject = {}
+
+  emitsArray.forEach(val => {
+    emitsObject[ val ] = trueFn
+  })
+
+  return emitsObject
+}

package/src/utils/private/vm.js

@@ -1,13 +1,13 @@
 // used directly by docs too
 export function getParentVm (vm) {
-  if (vm.$parent !== void 0 && vm.$parent !== null) {
+  if (Object(vm.$parent) === vm.$parent) {
     return vm.$parent
   }
 
   vm = vm.$.parent
 
-  while (vm !== void 0 && vm !== null) {
-    if (vm.proxy !== void 0 && vm.proxy !== null) {
+  while (Object(vm) === vm) {
+    if (Object(vm.proxy) === vm.proxy) {
       return vm.proxy
     }