quasar 2.2.4 → 2.3.3

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.2.4
+ * Quasar Framework v2.3.3
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -560,7 +560,7 @@
   }
 
   const SIZE_LIST = [ 'sm', 'md', 'lg', 'xl' ];
-  const { passive: passive$3 } = listenOpts;
+  const { passive: passive$4 } = listenOpts;
 
   var Screen = defineReactivePlugin({
     width: 0,
@@ -697,11 +697,11 @@
         };
 
         this.setDebounce = delay => {
-          updateEvt !== void 0 && target.removeEventListener('resize', updateEvt, passive$3);
+          updateEvt !== void 0 && target.removeEventListener('resize', updateEvt, passive$4);
           updateEvt = delay > 0
             ? debounce(this.__update, delay)
             : this.__update;
-          target.addEventListener('resize', updateEvt, passive$3);
+          target.addEventListener('resize', updateEvt, passive$4);
         };
 
         this.setDebounce(updateDebounce);
@@ -1170,16 +1170,16 @@
   var Body = {
     install (opts) {
 
-      const { $q } = opts;
-
-      $q.config.brand !== void 0 && setColors($q.config.brand);
-
       if (this.__installed === true) { return }
 
       if (isRuntimeSsrPreHydration.value === true) {
         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);
       }
@@ -1437,7 +1437,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.2.4' };
+      const $q = { version: '2.3.3' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -1866,7 +1866,7 @@
   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]? /;
 
   var QIcon = createComponent({
     name: 'QIcon',
@@ -2271,14 +2271,14 @@
 
   // used directly by docs too
   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
       }
 
@@ -3448,6 +3448,7 @@
       }
 
       function onLoadingEvt (evt) {
+        stopAndPrevent(evt);
         evt.qSkipRipple = true;
       }
 
@@ -7028,12 +7029,21 @@
     });
 
     function refocusTarget (e) {
+      const root = rootRef.value;
+
       if (e !== void 0 && e.type.indexOf('key') === 0) {
-        if (document.activeElement !== rootRef.value && rootRef.value.contains(document.activeElement) === true) {
-          rootRef.value.focus();
+        if (
+          root !== null
+          && document.activeElement !== root
+          && root.contains(document.activeElement) === true
+        ) {
+          root.focus();
         }
       }
-      else if ((e === void 0 || rootRef.value.contains(e.target) === true) && refocusRef.value !== null) {
+      else if (
+        refocusRef.value !== null
+        && (e === void 0 || (root !== null && root.contains(e.target) === true))
+      ) {
         refocusRef.value.focus();
       }
     }
@@ -7550,6 +7560,11 @@
         default: 0
       },
 
+      animationSpeed: {
+        type: [ String, Number ],
+        default: 600
+      },
+
       indeterminate: Boolean
     },
 
@@ -7569,7 +7584,7 @@
 
       const circleStyle = vue.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` }
           : ''
       ));
 
@@ -8281,7 +8296,7 @@
     }
 
     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:
@@ -8291,7 +8306,7 @@
         }
         active.value = false;
       }
-      else if (event.isFirst) {
+      else if (event.isFirst === true) {
         dragging.value = getDragging(event.evt);
         updatePosition(event.evt);
         updateValue();
@@ -8321,7 +8336,7 @@
     function onDeactivate () {
       preventFocus.value = false;
 
-      if (dragging.value === void 0) {
+      if (dragging.value === false) {
         active.value = false;
       }
 
@@ -15878,27 +15893,30 @@
 
   const listenerRE = /^on[A-Z]/;
 
-  function useSplitAttrs (attrs) {
+  function useSplitAttrs (attrs, vnode) {
     const acc = {
       listeners: vue.ref({}),
       attributes: vue.ref({})
     };
 
     function update () {
-      const listeners = {};
       const attributes = {};
+      const listeners = {};
 
       Object.keys(attrs).forEach(key => {
-        if (listenerRE.test(key) === true) {
-          listeners[ key ] = attrs[ key ];
-        }
-        else if (key !== 'class' && key !== 'style') {
+        if (key !== 'class' && key !== 'style' && listenerRE.test(key) === false) {
           attributes[ key ] = attrs[ key ];
         }
       });
 
-      acc.listeners.value = listeners;
+      Object.keys(vnode.props).forEach(key => {
+        if (listenerRE.test(key) === true) {
+          listeners[ key ] = vnode.props[ key ];
+        }
+      });
+
       acc.attributes.value = attributes;
+      acc.listeners.value = listeners;
     }
 
     vue.onBeforeUpdate(update);
@@ -16059,12 +16077,12 @@
     ],
 
     setup (props, { slots, emit, attrs }) {
-      const { proxy } = vue.getCurrentInstance();
+      const { proxy, vnode } = vue.getCurrentInstance();
       const { $q } = proxy;
 
       const isDark = useDark(props, $q);
       const { inFullscreen, toggleFullscreen } = useFullscreen();
-      const splitAttrs = useSplitAttrs(attrs);
+      const splitAttrs = useSplitAttrs(attrs, vnode);
 
       const rootRef = vue.ref(null);
       const contentRef = vue.ref(null);
@@ -17747,7 +17765,7 @@
   const useFieldEmits = [ 'update:modelValue', 'clear', 'focus', 'blur', 'popup-show', 'popup-hide' ];
 
   function useFieldState () {
-    const { props, attrs, proxy } = vue.getCurrentInstance();
+    const { props, attrs, proxy, vnode } = vue.getCurrentInstance();
 
     const isDark = useDark(props, proxy.$q);
 
@@ -17760,9 +17778,9 @@
 
       innerLoading: vue.ref(false),
       focused: vue.ref(false),
-      hasPopupOpen: vue.ref(false),
+      hasPopupOpen: false,
 
-      splitAttrs: useSplitAttrs(attrs),
+      splitAttrs: useSplitAttrs(attrs, vnode),
       targetUid: vue.ref(getTargetUid(props.for)),
 
       rootRef: vue.ref(null),
@@ -17973,7 +17991,7 @@
       focusoutTimer = setTimeout(() => {
         if (
           document.hasFocus() === true && (
-            state.hasPopupOpen.value === true
+            state.hasPopupOpen === true
             || (
               state.controlRef !== void 0
               && (
@@ -19653,6 +19671,8 @@
     }
   });
 
+  const { passive: passive$3 } = listenOpts;
+
   var QInfiniteScroll = createComponent({
     name: 'QInfiniteScroll',
 
@@ -19680,20 +19700,21 @@
     emits: [ 'load' ],
 
     setup (props, { slots, emit }) {
-      const fetching = vue.ref(false);
+      const isFetching = vue.ref(false);
+      const isWorking = vue.ref(true);
       const rootRef = vue.ref(null);
 
       let index = props.initialIndex || 0;
-      let isWorking = true;
+      let scrollPos = false;
       let localScrollTarget, poll;
 
       const classes = vue.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
         }
 
@@ -19715,18 +19736,18 @@
       }
 
       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;
             vue.nextTick(() => {
               if (props.reverse === true) {
                 const
@@ -19753,31 +19774,31 @@
       }
 
       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$3);
         }
 
         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$3);
         }
       }
 
       function updateScrollTarget () {
-        if (localScrollTarget && isWorking === true) {
-          localScrollTarget.removeEventListener('scroll', poll, listenOpts.passive);
+        if (localScrollTarget && isWorking.value === true) {
+          localScrollTarget.removeEventListener('scroll', poll, passive$3);
         }
 
         localScrollTarget = getScrollTarget(rootRef.value, props.scrollTarget);
 
-        if (isWorking === true) {
-          localScrollTarget.addEventListener('scroll', poll, listenOpts.passive);
+        if (isWorking.value === true) {
+          localScrollTarget.addEventListener('scroll', poll, passive$3);
         }
       }
 
@@ -19801,30 +19822,44 @@
           ? 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$3);
           }
 
-          localScrollTarget.addEventListener('scroll', poll, listenOpts.passive);
+          localScrollTarget.addEventListener('scroll', poll, passive$3);
         }
       }
 
       vue.watch(() => props.disable, val => {
-        if (val === true) {
-          stop();
-        }
-        else {
-          resume();
+        if (val === true) { stop(); }
+        else { resume(); }
+      });
+
+      vue.watch(() => props.reverse, val => {
+        if (isFetching.value === false && isWorking.value === true) {
+          immediatePoll();
         }
       });
 
       vue.watch(() => props.scrollTarget, updateScrollTarget);
       vue.watch(() => props.debounce, setDebounce);
 
+      vue.onActivated(() => {
+        if (localScrollTarget && scrollPos !== false) {
+          setVerticalScrollPosition(localScrollTarget, scrollPos);
+        }
+      });
+
+      vue.onDeactivated(() => {
+        scrollPos = localScrollTarget
+          ? getVerticalScrollPosition(localScrollTarget)
+          : false;
+      });
+
       vue.onBeforeUnmount(() => {
-        if (isWorking === true) {
-          localScrollTarget.removeEventListener('scroll', poll, listenOpts.passive);
+        if (isWorking.value === true) {
+          localScrollTarget.removeEventListener('scroll', poll, passive$3);
         }
       });
 
@@ -19847,7 +19882,7 @@
       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' ](
             vue.h('div', { class: classes.value }, hSlot(slots.loading))
           );
@@ -20985,6 +21020,10 @@
 
       once: Boolean,
       transition: String,
+      transitionDuration: {
+        type: [ String, Number ],
+        default: 300
+      },
 
       ssrPrerender: Boolean,
 
@@ -21030,6 +21069,10 @@
         ] ]
       });
 
+      const transitionStyle = vue.computed(
+        () => `--q-transition-duration: ${ props.transitionDuration }ms`
+      );
+
       function trigger (entry) {
         if (showing.value !== entry.isIntersecting) {
           showing.value = entry.isIntersecting;
@@ -21039,7 +21082,7 @@
 
       function getContent () {
         return showing.value === true
-          ? [ vue.h('div', { key: 'content' }, hSlot(slots.default)) ]
+          ? [ vue.h('div', { key: 'content', style: transitionStyle.value }, hSlot(slots.default)) ]
           : void 0
       }
 
@@ -23210,6 +23253,10 @@
 
       const type = vue.ref(getType());
 
+      const popupProps = vue.computed(() => (
+        type.value === 'menu' ? { maxHeight: '99vh' } : {})
+      );
+
       vue.watch(() => getType(), val => {
         if (showing.value !== true) {
           type.value = val;
@@ -23235,21 +23282,9 @@
       }
 
       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
@@ -23270,7 +23305,7 @@
           });
         }
 
-        return vue.h(component, data, () => def)
+        return vue.h(component, data, slots.default)
       }
     }
   });
@@ -23313,6 +23348,11 @@
       query: Boolean,
       rounded: Boolean,
 
+      animationSpeed: {
+        type: [ String, Number ],
+        default: 2100
+      },
+
       instantFeedback: Boolean
     },
 
@@ -23322,6 +23362,10 @@
       const sizeStyle = useSize(props, defaultSizes);
 
       const motion = vue.computed(() => props.indeterminate === true || props.query === true);
+      const style = vue.computed(() => ({
+        ...(sizeStyle.value !== null ? sizeStyle.value : {}),
+        '--q-linear-progress-speed': `${ props.animationSpeed }ms`
+      }));
 
       const classes = vue.computed(() =>
         'q-linear-progress'
@@ -23372,7 +23416,7 @@
 
         return vue.h('div', {
           class: classes.value,
-          style: sizeStyle.value,
+          style: style.value,
           role: 'progressbar',
           'aria-valuemin': 0,
           'aria-valuemax': 1,
@@ -24356,6 +24400,11 @@
     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
+  };
 
   var QScrollArea = createComponent({
     name: 'QScrollArea',
@@ -24511,7 +24560,7 @@
       );
 
       const mainStyle = vue.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
       ));
@@ -24520,24 +24569,14 @@
         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 () {
@@ -25459,6 +25498,22 @@
       setVirtualScrollSize();
     });
 
+    vue.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 && vue.onBeforeUnmount(() => {
       const styleSheet = document.getElementById(vsId + '_ss');
       styleSheet !== null && styleSheet.remove();
@@ -26632,7 +26687,7 @@
       function getDialog () {
         const content = [
           vue.h(QField, {
-            class: `col-auto ${ state.fieldClass }`,
+            class: `col-auto ${ state.fieldClass.value }`,
             ...innerFieldProps.value,
             for: state.targetUid.value,
             dark: isOptionsDark.value,
@@ -26798,14 +26853,14 @@
       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);
       }
 
@@ -26877,6 +26932,10 @@
           ) {
             return hasDialog === true ? getDialog() : getMenu()
           }
+          else if (state.hasPopupOpen === true) {
+            // explicitly set it otherwise TAB will not blur component
+            state.hasPopupOpen = false;
+          }
         },
 
         controlEvents: {
@@ -30244,7 +30303,7 @@
       default: () => [ 5, 7, 10, 15, 20, 25, 50, 0 ]
     },
 
-    'onUpdate:pagination': Function
+    'onUpdate:pagination': [ Function, Array ]
   };
 
   function useTablePaginationState (vm, getCellValue) {
@@ -30282,6 +30341,10 @@
       vue.nextTick(() => {
         emit('request', {
           pagination: prop.pagination || computedPagination.value,
+          // FIXME: 'props.filter' is string/object, but 'prop.filter' can be controlled by the user, and the docs are suggesting 'prop.filter' is a function
+          // So, value of 'filter' becomes function/string/object, which makes a lot of things unpredictable and can break things
+          // Either update the docs to say 'prop.filter' should be a string/object, or use 'prop.filter || props.filterMethod' or maybe get 'computedFilterFunction' here and use that instead of 'props.filterMethod'
+          // The examples on our docs are using 'filter' as a string in onRequest handler, but the JSON API is saying 'filter' is a function
           filter: prop.filter || props.filter,
           getCellValue
         });
@@ -30294,7 +30357,7 @@
         ...val
       });
 
-      if (samePagination(computedPagination.value, newPagination)) {
+      if (samePagination(computedPagination.value, newPagination) === true) {
         if (isServerSide.value === true && forceServerRequest === true) {
           sendServerRequest(newPagination);
         }
@@ -34023,6 +34086,20 @@
     }
   }
 
+  const trueFn = () => true;
+
+  function getEmitsObject (emitsArray) {
+    const emitsObject = {};
+
+    emitsArray.forEach(val => {
+      emitsObject[ val ] = trueFn;
+    });
+
+    return emitsObject
+  }
+
+  const coreEmitsObject = getEmitsObject(coreEmits);
+
   var createUploaderComponent = ({ name, props, emits, injectPlugin }) => createComponent({
     name,
 
@@ -34031,10 +34108,9 @@
       ...props
     },
 
-    emits: [
-      ...coreEmits,
-      ...emits
-    ],
+    emits: Object(emits) === emits
+      ? { ...coreEmitsObject, ...emits }
+      : [ ...coreEmits, ...emits ],
 
     setup () {
       return getRenderer(injectPlugin)
@@ -34068,7 +34144,7 @@
     factory: Function
   };
 
-  const emits = [ 'factory-failed', 'uploaded', 'failed', 'uploading' ];
+  const emits$1 = [ 'factory-failed', 'uploaded', 'failed', 'uploading' ];
 
   function injectPlugin ({ props, emit, helpers }) {
     const xhrs = vue.ref([]);
@@ -34294,7 +34370,7 @@
   var xhrUploaderPlugin = {
     name: 'QUploader',
     props: props$2,
-    emits,
+    emits: emits$1,
     injectPlugin
   };
 
@@ -38676,7 +38752,11 @@
     }
   }
 
-  useDialogPluginComponent.emits = [ 'ok', 'hide' ];
+  // Don't forget to update the types in "ui/types/composables.d.ts"
+  const emits = [ 'ok', 'hide' ];
+
+  useDialogPluginComponent.emits = emits;
+  useDialogPluginComponent.emitsObject = getEmitsObject(emits);
 
   function useMeta (metaOptions) {
     {
@@ -38732,7 +38812,7 @@
   });
 
   var index_umd = {
-    version: '2.2.4',
+    version: '2.3.3',
     install (app, opts) {
       installQuasar(app, {
         components,