quasar 2.3.0 → 2.3.4

package/dist/quasar.sass

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.3.0
+ * Quasar Framework v2.3.4
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -3035,7 +3035,7 @@ body.platform-ios
     &--dark
       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
 @keyframes q-linear-progress--indeterminate
@@ -4904,39 +4904,42 @@ body.desktop
     .q-tree__node-header:before,
     .q-tree__node-body:after
       display: none !important
-  &--dense .q-tree
-    &__arrow,
-    &__spinner
-      margin-right: 1px
-    &__img
-      height: 32px
-    &__tickbox
-      margin-right: 3px
-    &__node
-      padding: 0
-      &:after
-        top: 0
-        left: -8px
-    &__node-header
-      margin-top: 0
-      padding: 1px
-      &:before
-        top: 0
-        left: -8px
-        width: 8px
-    &__node--child
-      padding-left: 17px
-      > .q-tree__node-header:before
-        left: -25px
-        width: 21px
-    &__node-body
-      padding: 0 0 2px
-    &__node--parent > .q-tree__node-collapsible > .q-tree__node-body
-      padding: 0 0 2px 20px
-      &:after
-        left: 8px
-    &__children
-      padding-left: 16px
+  &--dense
+    > .q-tree__node--child > .q-tree__node-header
+      padding-left: 1px
+    .q-tree
+      &__arrow,
+      &__spinner
+        margin-right: 1px
+      &__img
+        height: 32px
+      &__tickbox
+        margin-right: 3px
+      &__node
+        padding: 0
+        &:after
+          top: 0
+          left: -8px
+      &__node-header
+        margin-top: 0
+        padding: 1px
+        &:before
+          top: 0
+          left: -8px
+          width: 8px
+      &__node--child
+        padding-left: 17px
+        > .q-tree__node-header:before
+          left: -25px
+          width: 21px
+      &__node-body
+        padding: 0 0 2px
+      &__node--parent > .q-tree__node-collapsible > .q-tree__node-body
+        padding: 0 0 2px 20px
+        &:after
+          left: 8px
+      &__children
+        padding-left: 16px
 [dir=rtl]
   .q-tree__arrow
     transform: rotate3d(0, 0, 1, 180deg) #{"/* rtl:ignore */"}
@@ -7023,6 +7026,8 @@ img.responsive
   touch-action: pan-x
 .q-touch-y
   touch-action: pan-y
+\:root
+  --q-transition-duration: .3s
 .q-transition
   &--slide-right,
   &--slide-left,

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.3.0
+ * Quasar Framework v2.3.4
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -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.3.0' };
+      const $q = { version: '2.3.4' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -1862,11 +1862,11 @@
 
   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]? /;
 
   var QIcon = createComponent({
     name: 'QIcon',
@@ -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();
       }
     }
@@ -8286,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:
@@ -8296,7 +8306,7 @@
         }
         active.value = false;
       }
-      else if (event.isFirst) {
+      else if (event.isFirst === true) {
         dragging.value = getDragging(event.evt);
         updatePosition(event.evt);
         updateValue();
@@ -8326,7 +8336,7 @@
     function onDeactivate () {
       preventFocus.value = false;
 
-      if (dragging.value === void 0) {
+      if (dragging.value === false) {
         active.value = false;
       }
 
@@ -15883,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);
@@ -16064,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);
@@ -17752,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);
 
@@ -17765,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),
@@ -17978,7 +17991,7 @@
       focusoutTimer = setTimeout(() => {
         if (
           document.hasFocus() === true && (
-            state.hasPopupOpen.value === true
+            state.hasPopupOpen === true
             || (
               state.controlRef !== void 0
               && (
@@ -21007,6 +21020,10 @@
 
       once: Boolean,
       transition: String,
+      transitionDuration: {
+        type: [ String, Number ],
+        default: 300
+      },
 
       ssrPrerender: Boolean,
 
@@ -21052,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;
@@ -21061,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
       }
 
@@ -23341,6 +23362,7 @@
       const sizeStyle = useSize(props, defaultSizes);
 
       const motion = vue.computed(() => props.indeterminate === true || props.query === true);
+      const widthReverse = vue.computed(() => props.reverse !== props.query);
       const style = vue.computed(() => ({
         ...(sizeStyle.value !== null ? sizeStyle.value : {}),
         '--q-linear-progress-speed': `${ props.animationSpeed }ms`
@@ -23353,7 +23375,7 @@
         + (props.rounded === true ? ' rounded-borders' : '')
       );
 
-      const trackStyle = vue.computed(() => width(props.buffer !== void 0 ? props.buffer : 1, props.reverse, proxy.$q));
+      const trackStyle = vue.computed(() => width(props.buffer !== void 0 ? props.buffer : 1, widthReverse.value, proxy.$q));
       const trackClass = vue.computed(() =>
         'q-linear-progress__track absolute-full'
         + ` q-linear-progress__track--with${ props.instantFeedback === true ? 'out' : '' }-transition`
@@ -23361,7 +23383,7 @@
         + (props.trackColor !== void 0 ? ` bg-${ props.trackColor }` : '')
       );
 
-      const modelStyle = vue.computed(() => width(motion.value === true ? 1 : props.value, props.reverse, proxy.$q));
+      const modelStyle = vue.computed(() => width(motion.value === true ? 1 : props.value, widthReverse.value, proxy.$q));
       const modelClass = vue.computed(() =>
         'q-linear-progress__model absolute-full'
         + ` q-linear-progress__model--with${ props.instantFeedback === true ? 'out' : '' }-transition`
@@ -24379,6 +24401,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',
@@ -24534,7 +24561,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
       ));
@@ -24543,24 +24570,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 () {
@@ -26671,7 +26688,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,
@@ -26837,14 +26854,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);
       }
 
@@ -26916,6 +26933,10 @@
           ) {
             return hasDialog === true ? getDialog() : getMenu()
           }
+          else if (state.hasPopupOpen === true) {
+            // explicitly set it otherwise TAB will not blur component
+            state.hasPopupOpen = false;
+          }
         },
 
         controlEvents: {
@@ -30321,6 +30342,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
         });
@@ -31232,7 +31257,7 @@
           topSelection = slots[ 'top-selection' ],
           hasSelection = hasSelectionMode.value === true
             && topSelection !== void 0
-            && rowsSelectedNumber.vaue > 0,
+            && rowsSelectedNumber.value > 0,
           topClass = 'q-table__top relative-position row items-center';
 
         if (top !== void 0) {
@@ -38728,6 +38753,7 @@
     }
   }
 
+  // Don't forget to update the types in "ui/types/composables.d.ts"
   const emits = [ 'ok', 'hide' ];
 
   useDialogPluginComponent.emits = emits;
@@ -38787,7 +38813,7 @@
   });
 
   var index_umd = {
-    version: '2.3.0',
+    version: '2.3.4',
     install (app, opts) {
       installQuasar(app, {
         components,