quasar 2.1.9 → 2.2.3

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.1.9
+ * Quasar Framework v2.2.3
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1437,7 +1437,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.1.9' };
+      const $q = { version: '2.2.3' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -1460,6 +1460,9 @@
       });
     };
 
+  const createComponent = raw => vue.markRaw(vue.defineComponent(raw));
+  const createDirective = raw => vue.markRaw(raw);
+
   const units = [ 'B', 'KB', 'MB', 'GB', 'TB', 'PB' ];
 
   function humanStorageSize (bytes) {
@@ -1589,7 +1592,7 @@
     }
   }
 
-  var QAjaxBar = vue.defineComponent({
+  var QAjaxBar = createComponent({
     name: 'QAjaxBar',
 
     props: {
@@ -1865,7 +1868,7 @@
   const ionRE = /^ion-/;
   const faLaRE = /^[l|f]a[s|r|l|b|d]? /;
 
-  var QIcon = vue.defineComponent({
+  var QIcon = createComponent({
     name: 'QIcon',
 
     props: {
@@ -2033,7 +2036,7 @@
     }
   });
 
-  var QAvatar = vue.defineComponent({
+  var QAvatar = createComponent({
     name: 'QAvatar',
 
     props: {
@@ -2089,7 +2092,7 @@
 
   const alignValues$3 = [ 'top', 'middle', 'bottom' ];
 
-  var QBadge = vue.defineComponent({
+  var QBadge = createComponent({
     name: 'QBadge',
 
     props: {
@@ -2159,7 +2162,7 @@
     ))
   }
 
-  var QBanner = vue.defineComponent({
+  var QBanner = createComponent({
     name: 'QBanner',
 
     props: {
@@ -2211,7 +2214,7 @@
     }
   });
 
-  var QBar = vue.defineComponent({
+  var QBar = createComponent({
     name: 'QBar',
 
     props: {
@@ -2305,7 +2308,7 @@
     return vm.appContext.config.globalProperties.$router !== void 0
   }
 
-  var QBreadcrumbs = vue.defineComponent({
+  var QBreadcrumbs = createComponent({
     name: 'QBreadcrumbs',
 
     props: {
@@ -2632,7 +2635,7 @@
     }
   }
 
-  var QBreadcrumbsEl = vue.defineComponent({
+  var QBreadcrumbsEl = createComponent({
     name: 'QBreadcrumbsEl',
 
     props: {
@@ -2705,7 +2708,7 @@
     }
   }
 
-  var QSpinner = vue.defineComponent({
+  var QSpinner = createComponent({
     name: 'QSpinner',
 
     props: {
@@ -2918,7 +2921,7 @@
     };
   }
 
-  var Ripple = {
+  var Ripple = createDirective({
         name: 'ripple',
 
         beforeMount (el, binding) {
@@ -2983,7 +2986,8 @@
           cleanEvt(ctx, 'main');
           delete el._qripple;
         }
-      };
+      }
+  );
 
   const padding = {
     none: 0,
@@ -3186,7 +3190,7 @@
     keyboardTarget = null,
     mouseTarget = null;
 
-  var QBtn = vue.defineComponent({
+  var QBtn = createComponent({
     name: 'QBtn',
 
     props: {
@@ -3218,7 +3222,7 @@
       );
 
       const ripple = vue.computed(() => (
-        props.ripple === false
+        props.disable === true || props.ripple === false
           ? false
           : {
               keyCodes: isLink.value === true ? [ 13, 32 ] : [ 13 ],
@@ -3226,6 +3230,8 @@
             }
       ));
 
+      const rippleProps = vue.computed(() => ({ center: props.round }));
+
       const percentageStyle = vue.computed(() => {
         const val = Math.max(0, Math.min(100, props.percentage));
         return val > 0
@@ -3259,16 +3265,6 @@
         }
       });
 
-      const directives = vue.computed(() => {
-        // if props.disable !== true && props.ripple !== false
-        return [ [
-          Ripple,
-          ripple.value,
-          void 0,
-          { center: props.round }
-        ] ]
-      });
-
       const nodeProps = vue.computed(() => ({
         ref: rootRef,
         class: 'q-btn q-btn-item non-selectable no-outline ' + classes.value,
@@ -3532,19 +3528,24 @@
           ))
         );
 
-        return hDir(
-          isLink.value === true ? 'a' : 'button',
-          nodeProps.value,
-          child,
-          'ripple',
-          props.disable !== true && props.ripple !== false,
-          () => directives.value
+        return vue.withDirectives(
+          vue.h(
+            isLink.value === true ? 'a' : 'button',
+            nodeProps.value,
+            child
+          ),
+          [ [
+            Ripple,
+            ripple.value,
+            void 0,
+            rippleProps.value
+          ] ]
         )
       }
     }
   });
 
-  var QBtnGroup = vue.defineComponent({
+  var QBtnGroup = createComponent({
     name: 'QBtnGroup',
 
     props: {
@@ -4895,7 +4896,7 @@
     }
   }
 
-  var QMenu = vue.defineComponent({
+  var QMenu = createComponent({
     name: 'QMenu',
 
     inheritAttrs: false,
@@ -5242,7 +5243,7 @@
     }
   });
 
-  var QBtnDropdown = vue.defineComponent({
+  var QBtnDropdown = createComponent({
     name: 'QBtnDropdown',
 
     props: {
@@ -5474,7 +5475,7 @@
     return vue.computed(() => props.name || props.for)
   }
 
-  var QBtnToggle = vue.defineComponent({
+  var QBtnToggle = createComponent({
     name: 'QBtnToggle',
 
     props: {
@@ -5632,7 +5633,7 @@
     }
   });
 
-  var QCard = vue.defineComponent({
+  var QCard = createComponent({
     name: 'QCard',
 
     props: {
@@ -5664,7 +5665,7 @@
     }
   });
 
-  var QCardSection = vue.defineComponent({
+  var QCardSection = createComponent({
     name: 'QCardSection',
 
     props: {
@@ -5686,7 +5687,7 @@
     }
   });
 
-  var QCardActions = vue.defineComponent({
+  var QCardActions = createComponent({
     name: 'QCardActions',
 
     props: {
@@ -5778,7 +5779,7 @@
     return data
   }
 
-  var TouchSwipe = {
+  var TouchSwipe = createDirective({
         name: 'touch-swipe',
 
         beforeMount (el, { value, arg, modifiers }) {
@@ -6018,7 +6019,8 @@
             delete el.__qtouchswipe;
           }
         }
-      };
+      }
+  );
 
   function useCache () {
     const cache = new Map();
@@ -6064,6 +6066,10 @@
 
     transitionPrev: String,
     transitionNext: String,
+    transitionDuration: {
+      type: [ String, Number ],
+      default: 300
+    },
 
     keepAlive: Boolean,
     keepAliveInclude: [ String, Array, RegExp ],
@@ -6109,6 +6115,10 @@
       props.transitionNext || `slide-${ props.vertical === true ? 'up' : 'left' }`
     );
 
+    const transitionStyle = vue.computed(
+      () => `--q-transition-duration: ${ props.transitionDuration }ms`
+    );
+
     const contentKey = vue.computed(() => (
       typeof props.modelValue === 'string' || typeof props.modelValue === 'number'
         ? props.modelValue
@@ -6228,7 +6238,7 @@
     }
 
     function getPanelContentChild () {
-      const panel = isValidPanelName(props.modelValue)
+      const panel = isValidPanelName(props.modelValue) === true
         && updatePanelIndex()
         && panels[ panelIndex.value ];
 
@@ -6239,7 +6249,7 @@
                 needsUniqueKeepAliveWrapper.value === true
                   ? getCacheWithFn(contentKey.value, () => ({ ...PanelWrapper$1, name: contentKey.value }))
                   : PanelWrapper$1,
-                { key: contentKey.value },
+                { key: contentKey.value, style: transitionStyle.value },
                 () => panel
               )
             ])
@@ -6247,6 +6257,7 @@
         : [
             vue.h('div', {
               class: 'q-panel scroll',
+              style: transitionStyle.value,
               key: contentKey.value,
               role: 'tabpanel'
             }, [ panel ])
@@ -6259,11 +6270,7 @@
       }
 
       return props.animated === true
-        ? [
-            vue.h(vue.Transition, {
-              name: panelTransition.value
-            }, getPanelContentChild)
-          ]
+        ? [ vue.h(vue.Transition, { name: panelTransition.value }, getPanelContentChild) ]
         : getPanelContentChild()
     }
 
@@ -6273,7 +6280,7 @@
       ).filter(
         panel => panel.props !== null
           && panel.props.slot === void 0
-          && isValidPanelName(panel.props.name)
+          && isValidPanelName(panel.props.name) === true
       );
 
       return panels.length
@@ -6537,7 +6544,7 @@
   const navigationPositionOptions = [ 'top', 'right', 'bottom', 'left' ];
   const controlTypeOptions = [ 'regular', 'flat', 'outline', 'push', 'unelevated' ];
 
-  var QCarousel = vue.defineComponent({
+  var QCarousel = createComponent({
     name: 'QCarousel',
 
     props: {
@@ -6661,7 +6668,14 @@
       });
 
       function startTimer () {
-        timer = setTimeout(nextPanel, isNumber(props.autoplay) ? props.autoplay : 5000);
+        const duration = isNumber(props.autoplay) === true
+          ? props.autoplay
+          : 5000;
+
+        timer = setTimeout(
+          duration >= 0 ? nextPanel : previousPanel,
+          Math.abs(duration)
+        );
       }
 
       vue.onMounted(() => {
@@ -6791,7 +6805,7 @@
     }
   });
 
-  var QCarouselSlide = vue.defineComponent({
+  var QCarouselSlide = createComponent({
     name: 'QCarouselSlide',
 
     props: {
@@ -6813,7 +6827,7 @@
     }
   });
 
-  var QCarouselControl = vue.defineComponent({
+  var QCarouselControl = createComponent({
     name: 'QCarouselControl',
 
     props: {
@@ -6846,7 +6860,7 @@
     }
   });
 
-  var QChatMessage = vue.defineComponent({
+  var QChatMessage = createComponent({
     name: 'QChatMessage',
 
     props: {
@@ -7285,7 +7299,7 @@
     ])
   ]);
 
-  var QCheckbox = vue.defineComponent({
+  var QCheckbox = createComponent({
     name: 'QCheckbox',
 
     props: useCheckboxProps,
@@ -7304,7 +7318,7 @@
     xl: 24
   };
 
-  var QChip = vue.defineComponent({
+  var QChip = createComponent({
     name: 'QChip',
 
     props: {
@@ -7525,7 +7539,7 @@
     circumference = diameter * Math.PI,
     strokeDashArray = Math.round(circumference * 1000) / 1000;
 
-  var QCircularProgress = vue.defineComponent({
+  var QCircularProgress = createComponent({
     name: 'QCircularProgress',
 
     props: {
@@ -7760,7 +7774,7 @@
 
   let uid$4 = 0;
 
-  var TouchPan = {
+  var TouchPan = createDirective({
         name: 'touch-pan',
 
         beforeMount (el, { value, modifiers }) {
@@ -8062,7 +8076,8 @@
             delete el.__qtouchpan;
           }
         }
-      };
+      }
+  );
 
   // PGDOWN, LEFT, DOWN, PGUP, RIGHT, UP
   const keyCodes$2 = [ 34, 37, 40, 33, 39, 38 ];
@@ -8117,7 +8132,7 @@
 
     label: Boolean,
     labelAlways: Boolean,
-    markers: Boolean,
+    markers: [ Boolean, Number ],
     snap: Boolean,
 
     vertical: Boolean,
@@ -8170,9 +8185,13 @@
     const step = vue.computed(() => (props.step === 0 ? 1 : props.step));
     const minMaxDiff = vue.computed(() => props.max - props.min);
 
+    const markerStep = vue.computed(() => (
+      isNumber(props.markers) === true ? props.markers : step.value)
+    );
+
     const markerStyle = vue.computed(() => {
       if (minMaxDiff.value !== 0) {
-        const size = 100 * step.value / minMaxDiff.value;
+        const size = 100 * markerStep.value / minMaxDiff.value;
 
         return {
           backgroundSize: props.vertical === true
@@ -8360,7 +8379,7 @@
     }
   }
 
-  var QSlider = vue.defineComponent({
+  var QSlider = createComponent({
     name: 'QSlider',
 
     props: {
@@ -8552,7 +8571,7 @@
           })
         ];
 
-        props.markers === true && track.push(
+        props.markers !== false && track.push(
           vue.h('div', {
             class: `q-slider__track-markers q-slider__track-markers${ state.axis.value } absolute-full fit`,
             style: state.markerStyle.value
@@ -8604,7 +8623,7 @@
         url: 'about:blank'
       };
 
-  var QResizeObserver = vue.defineComponent({
+  var QResizeObserver = createComponent({
     name: 'QResizeObserver',
 
     props: {
@@ -8764,7 +8783,7 @@
   const alignValues$1 = [ 'left', 'center', 'right', 'justify' ];
   const emptyFn = () => {};
 
-  var QTabs = vue.defineComponent({
+  var QTabs = createComponent({
     name: 'QTabs',
 
     props: {
@@ -9328,6 +9347,12 @@
     const rootRef = vue.ref(null);
     const tabIndicatorRef = vue.ref(null);
 
+    const ripple = vue.computed(() => (
+      props.disable === true
+        ? false
+        : props.ripple
+    ));
+
     const isActive = vue.computed(() => $tabs.currentModel.value === props.name);
 
     const classes = vue.computed(() =>
@@ -9484,20 +9509,16 @@
         ...customData
       };
 
-      return hDir(
-        tag,
-        data,
-        getContent(),
-        'main',
-        props.ripple !== false && props.disable === false,
-        () => [ [ Ripple, props.ripple ] ]
+      return vue.withDirectives(
+        vue.h(tag, data, getContent()),
+        [ [ Ripple, ripple.value ] ]
       )
     }
 
     return { renderTab, $tabs }
   }
 
-  var QTab = vue.defineComponent({
+  var QTab = createComponent({
     name: 'QTab',
 
     props: useTabProps,
@@ -9510,7 +9531,7 @@
     }
   });
 
-  var QTabPanels = vue.defineComponent({
+  var QTabPanels = createComponent({
     name: 'QTabPanels',
 
     props: {
@@ -9546,7 +9567,7 @@
     }
   });
 
-  var QTabPanel = vue.defineComponent({
+  var QTabPanel = createComponent({
     name: 'QTabPanel',
 
     props: usePanelChildProps,
@@ -9899,7 +9920,7 @@
 
   const thumbPath = 'M5 5 h10 v10 h-10 v-10 z';
 
-  var QColor = vue.defineComponent({
+  var QColor = createComponent({
     name: 'QColor',
 
     props: {
@@ -9924,6 +9945,7 @@
       palette: Array,
 
       noHeader: Boolean,
+      noHeaderTabs: Boolean,
       noFooter: Boolean,
 
       square: Boolean,
@@ -10009,7 +10031,7 @@
           ? true
           : luminosity(model.value) > 0.4;
 
-        return 'q-color-picker__header-content absolute-full'
+        return 'q-color-picker__header-content'
           + ` q-color-picker__header-content--${ light ? 'light' : 'dark' }`
       });
 
@@ -10360,6 +10382,63 @@
       }
 
       function getHeader () {
+        const child = [];
+
+        props.noHeaderTabs !== true && child.push(
+          vue.h(QTabs, {
+            class: 'q-color-picker__header-tabs',
+            modelValue: topView.value,
+            dense: true,
+            align: 'justify',
+            ...getCache('topVTab', {
+              'onUpdate:modelValue': val => { topView.value = val; }
+            })
+          }, () => [
+            vue.h(QTab, {
+              label: 'HEX' + (hasAlpha.value === true ? 'A' : ''),
+              name: 'hex',
+              ripple: false
+            }),
+
+            vue.h(QTab, {
+              label: 'RGB' + (hasAlpha.value === true ? 'A' : ''),
+              name: 'rgb',
+              ripple: false
+            })
+          ])
+        );
+
+        child.push(
+          vue.h('div', {
+            class: 'q-color-picker__header-banner row flex-center no-wrap'
+          }, [
+            vue.h('input', {
+              class: 'fit',
+              value: model.value[ topView.value ],
+              ...(editable.value !== true
+                ? { readonly: true }
+                : {}
+              ),
+              ...getCache('topIn', {
+                onInput: evt => {
+                  updateErrorIcon(onEditorChange(evt) === true);
+                },
+                onChange: stop,
+                onBlur: evt => {
+                  onEditorChange(evt, true) === true && proxy.$forceUpdate();
+                  updateErrorIcon(false);
+                }
+              })
+            }),
+
+            vue.h(QIcon, {
+              ref: errorIconRef,
+              class: 'q-color-picker__error-icon absolute no-pointer-events',
+              name: $q.iconSet.type.negative
+            })
+          ])
+        );
+
         return vue.h('div', {
           class: 'q-color-picker__header relative-position overflow-hidden'
         }, [
@@ -10368,57 +10447,7 @@
           vue.h('div', {
             class: headerClass.value,
             style: currentBgColor.value
-          }, [
-            vue.h(QTabs, {
-              modelValue: topView.value,
-              dense: true,
-              align: 'justify',
-              ...getCache('topVTab', {
-                'onUpdate:modelValue': val => { topView.value = val; }
-              })
-            }, () => [
-              vue.h(QTab, {
-                label: 'HEX' + (hasAlpha.value === true ? 'A' : ''),
-                name: 'hex',
-                ripple: false
-              }),
-
-              vue.h(QTab, {
-                label: 'RGB' + (hasAlpha.value === true ? 'A' : ''),
-                name: 'rgb',
-                ripple: false
-              })
-            ]),
-
-            vue.h('div', {
-              class: 'q-color-picker__header-banner row flex-center no-wrap'
-            }, [
-              vue.h('input', {
-                class: 'fit',
-                value: model.value[ topView.value ],
-                ...(editable.value !== true
-                  ? { readonly: true }
-                  : {}
-                ),
-                ...getCache('topIn', {
-                  onInput: evt => {
-                    updateErrorIcon(onEditorChange(evt) === true);
-                  },
-                  onChange: stop,
-                  onBlur: evt => {
-                    onEditorChange(evt, true) === true && proxy.$forceUpdate();
-                    updateErrorIcon(false);
-                  }
-                })
-              }),
-
-              vue.h(QIcon, {
-                ref: errorIconRef,
-                class: 'q-color-picker__error-icon absolute no-pointer-events',
-                name: $q.iconSet.type.negative
-              })
-            ])
-          ])
+          }, child)
         ])
       }
 
@@ -10654,19 +10683,23 @@
       }
 
       function getPaletteTab () {
+        const fn = color => vue.h('div', {
+          class: 'q-color-picker__cube col-auto',
+          style: { backgroundColor: color },
+          ...(
+            editable.value === true
+              ? getCache('palette#' + color, {
+                onClick: () => { onPalettePick(color); }
+              })
+              : {}
+          )
+        });
+
         return [
           vue.h('div', {
             class: 'row items-center q-color-picker__palette-rows'
               + (editable.value === true ? ' q-color-picker__palette-rows--editable' : '')
-          }, computedPalette.value.map(color => vue.h('div', {
-            class: 'q-color-picker__cube col-auto',
-            style: { backgroundColor: color },
-            ...(editable.value === true ? getCache('palette#' + color, {
-              onClick: () => {
-                onPalettePick(color);
-              }
-            }) : {})
-          })))
+          }, computedPalette.value.map(fn))
         ]
       }
 
@@ -11215,6 +11248,96 @@
         )
   }
 
+  function formatTimezone (offset, delimeter = '') {
+    const
+      sign = offset > 0 ? '-' : '+',
+      absOffset = Math.abs(offset),
+      hours = Math.floor(absOffset / 60),
+      minutes = absOffset % 60;
+
+    return sign + pad(hours) + delimeter + pad(minutes)
+  }
+
+  function applyYearMonthDayChange (date, mod, sign) {
+    let
+      year = date.getFullYear(),
+      month = date.getMonth(),
+      day = date.getDate();
+
+    if (mod.years !== void 0) {
+      year += sign * mod.years;
+    }
+
+    if (mod.months !== void 0) {
+      month += sign * mod.months;
+    }
+
+    if (mod.days !== void 0) {
+      day += sign * mod.days;
+    }
+
+    date.setDate(1);
+    date.setMonth(2);
+
+    date.setFullYear(year);
+    date.setMonth(month);
+    date.setDate(day);
+
+    return date
+  }
+
+  function getChange (date, mod, sign) {
+    const
+      d = new Date(date),
+      t = mod.years !== void 0 || mod.months !== void 0 || mod.days !== void 0
+        ? applyYearMonthDayChange(d, mod, sign)
+        : d;
+
+    Object.keys(mod).forEach(key => {
+      if (key !== 'years' && key !== 'months' && key !== 'days') {
+        const op = capitalize(key);
+        t[ `set${ op }` ](t[ `get${ op }` ]() + sign * mod[ key ]);
+      }
+    });
+
+    return t
+  }
+
+  function applyYearMonthDay (date, mod, middle) {
+    const
+      year = mod.year !== void 0 ? mod.year : date[ `get${ middle }FullYear` ](),
+      month = mod.month !== void 0 ? mod.month - 1 : date[ `get${ middle }Month` ](),
+      maxDay = (new Date(year, month + 1, 0)).getDate(),
+      day = Math.min(maxDay, mod.date !== void 0 ? mod.date : date[ `get${ middle }Date` ]());
+
+    date[ `set${ middle }Date` ](1);
+    date[ `set${ middle }Month` ](2);
+
+    date[ `set${ middle }FullYear` ](year);
+    date[ `set${ middle }Month` ](month);
+    date[ `set${ middle }Date` ](day);
+
+    return date
+  }
+
+  function adjustDate (date, mod, utc) {
+    const
+      middle = utc === true ? 'UTC' : '',
+      d = new Date(date),
+      t = mod.year !== void 0 || mod.month !== void 0 || mod.date !== void 0
+        ? applyYearMonthDay(d, mod, middle)
+        : d;
+
+    Object.keys(mod).forEach(key => {
+      if (key !== 'year' && key !== 'month' && key !== 'date') {
+        const op = key.charAt(0).toUpperCase() + key.slice(1);
+        t[ `set${ middle }${ op }` ](mod[ key ]);
+      }
+    });
+
+    return t
+  }
+
   function extractDate (str, mask, dateLocale) {
     const d = __splitDate(str, mask, dateLocale);
 
@@ -11232,7 +11355,7 @@
 
     return d.timezoneOffset === null || d.timezoneOffset === tzOffset
       ? date
-      : getChange(date, { minutes: d.timezoneOffset - tzOffset }, true)
+      : getChange(date, { minutes: d.timezoneOffset - tzOffset }, 1)
   }
 
   function __splitDate (str, mask, dateLocale, calendar, defaultModel) {
@@ -11373,43 +11496,6 @@
     return date
   }
 
-  function formatTimezone (offset, delimeter = '') {
-    const
-      sign = offset > 0 ? '-' : '+',
-      absOffset = Math.abs(offset),
-      hours = Math.floor(absOffset / 60),
-      minutes = absOffset % 60;
-
-    return sign + pad(hours) + delimeter + pad(minutes)
-  }
-
-  function setMonth (date, newMonth /* 1-based */) {
-    const
-      test = new Date(date.getFullYear(), newMonth, 0, 0, 0, 0, 0),
-      days = test.getDate();
-
-    date.setMonth(newMonth - 1, Math.min(days, date.getDate()));
-  }
-
-  function getChange (date, mod, add) {
-    const
-      t = new Date(date),
-      sign = (add ? 1 : -1);
-
-    Object.keys(mod).forEach(key => {
-      if (key === 'months') {
-        setMonth(t, t.getMonth() + 1 + sign * mod.months);
-        return
-      }
-
-      const op = key === 'years'
-        ? 'FullYear'
-        : capitalize(key === 'days' ? 'date' : key);
-      t[ `set${ op }` ](t[ `get${ op }` ]() + sign * mod[ key ]);
-    });
-    return t
-  }
-
   function isValid (date) {
     return typeof date === 'number'
       ? true
@@ -11467,30 +11553,10 @@
   }
 
   function addToDate (date, mod) {
-    return getChange(date, mod, true)
+    return getChange(date, mod, 1)
   }
   function subtractFromDate (date, mod) {
-    return getChange(date, mod, false)
-  }
-
-  function adjustDate (date, mod, utc) {
-    const
-      t = new Date(date),
-      prefix = `set${ utc === true ? 'UTC' : '' }`;
-
-    Object.keys(mod).forEach(key => {
-      if (key === 'month') {
-        setMonth(t, mod.month);
-        return
-      }
-
-      const op = key === 'year'
-        ? 'FullYear'
-        : key.charAt(0).toUpperCase() + key.slice(1);
-      t[ `${ prefix }${ op }` ](mod[ key ]);
-    });
-
-    return t
+    return getChange(date, mod, -1)
   }
 
   function startOfDate (date, unit, utc) {
@@ -11959,7 +12025,7 @@
     return date.year + '/' + pad(date.month)
   }
 
-  var QDate = vue.defineComponent({
+  var QDate = createComponent({
     name: 'QDate',
 
     props: {
@@ -12737,8 +12803,9 @@
           return getDefaultViewModel()
         }
 
+        const target = model[ model.length - 1 ];
         const decoded = decodeString(
-          model[ 0 ].from !== void 0 ? model[ 0 ].from : model[ 0 ],
+          target.from !== void 0 ? target.from : target,
           mask,
           locale
         );
@@ -13646,7 +13713,7 @@
     left: [ 'slide-right', 'slide-left' ]
   };
 
-  var QDialog = vue.defineComponent({
+  var QDialog = createComponent({
     name: 'QDialog',
 
     inheritAttrs: false,
@@ -13749,6 +13816,10 @@
           : transitionShow.value
       ));
 
+      const transitionStyle = vue.computed(
+        () => `--q-transition-duration: ${ props.transitionDuration }ms`
+      );
+
       const useBackdrop = vue.computed(() => showing.value === true && props.seamless !== true);
 
       const onEvents = vue.computed(() => (
@@ -13989,6 +14060,7 @@
             useBackdrop.value === true
               ? vue.h('div', {
                   class: 'q-dialog__backdrop fixed-full',
+                  style: transitionStyle.value,
                   'aria-hidden': 'true',
                   onMousedown: onBackdropClick
                 })
@@ -14003,6 +14075,7 @@
                 ? vue.h('div', {
                     ref: innerRef,
                     class: classes.value,
+                    style: transitionStyle.value,
                     tabindex: -1,
                     ...onEvents.value
                   }, hSlot(slots.default))
@@ -14018,7 +14091,7 @@
 
   const duration = 150;
 
-  var QDrawer = vue.defineComponent({
+  var QDrawer = createComponent({
     name: 'QDrawer',
 
     inheritAttrs: false,
@@ -14464,6 +14537,9 @@
         flagMiniAnimate.value = true;
         timerMini = setTimeout(() => {
           flagMiniAnimate.value = false;
+          if (vm && vm.proxy && vm.proxy.$el) {
+            vm.proxy.$el.classList.remove('q-drawer--mini-animate');
+          }
         }, 150);
       }
 
@@ -15058,7 +15134,7 @@
     }
   }
 
-  var QTooltip = vue.defineComponent({
+  var QTooltip = createComponent({
     name: 'QTooltip',
 
     inheritAttrs: false,
@@ -15352,7 +15428,7 @@
     }
   });
 
-  var QItem = vue.defineComponent({
+  var QItem = createComponent({
     name: 'QItem',
 
     props: {
@@ -15500,7 +15576,7 @@
     }
   });
 
-  var QItemSection = vue.defineComponent({
+  var QItemSection = createComponent({
     name: 'QItemSection',
 
     props: {
@@ -15916,7 +15992,7 @@
     return target
   }
 
-  var QEditor = vue.defineComponent({
+  var QEditor = createComponent({
     name: 'QEditor',
 
     props: {
@@ -16440,7 +16516,7 @@
     }
   });
 
-  var QItemLabel = vue.defineComponent({
+  var QItemLabel = createComponent({
     name: 'QItemLabel',
 
     props: {
@@ -16479,7 +16555,7 @@
     }
   });
 
-  var QSlideTransition = vue.defineComponent({
+  var QSlideTransition = createComponent({
     name: 'QSlideTransition',
 
     props: {
@@ -16605,7 +16681,7 @@
     xl: 24
   };
 
-  var QSeparator = vue.defineComponent({
+  var QSeparator = createComponent({
     name: 'QSeparator',
 
     props: {
@@ -16748,7 +16824,7 @@
   const itemGroups = vue.shallowReactive({});
   const LINK_PROPS = Object.keys(useRouterLinkProps);
 
-  var QExpansionItem = vue.defineComponent({
+  var QExpansionItem = createComponent({
     name: 'QExpansionItem',
 
     props: {
@@ -17158,7 +17234,7 @@
   const directions = [ 'up', 'right', 'down', 'left' ];
   const alignValues = [ 'left', 'center', 'right' ];
 
-  var QFab = vue.defineComponent({
+  var QFab = createComponent({
     name: 'QFab',
 
     props: {
@@ -17289,7 +17365,7 @@
 
   const anchorValues = Object.keys(anchorMap);
 
-  var QFabAction = vue.defineComponent({
+  var QFabAction = createComponent({
     name: 'QFabAction',
 
     props: {
@@ -18182,7 +18258,7 @@
     }
   }
 
-  var QField = vue.defineComponent({
+  var QField = createComponent({
     name: 'QField',
 
     inheritAttrs: false,
@@ -18437,7 +18513,7 @@
       : vue.computed(getFormDomProps)
   }
 
-  var QFile = vue.defineComponent({
+  var QFile = createComponent({
     name: 'QFile',
 
     inheritAttrs: false,
@@ -18699,7 +18775,7 @@
     }
   });
 
-  var QFooter = vue.defineComponent({
+  var QFooter = createComponent({
     name: 'QFooter',
 
     props: {
@@ -18891,7 +18967,7 @@
     }
   });
 
-  var QForm = vue.defineComponent({
+  var QForm = createComponent({
     name: 'QForm',
 
     props: {
@@ -19107,7 +19183,7 @@
     }
   };
 
-  var QHeader = vue.defineComponent({
+  var QHeader = createComponent({
     name: 'QHeader',
 
     props: {
@@ -19299,7 +19375,7 @@
 
   const defaultRatio = 16 / 9;
 
-  var QImg = vue.defineComponent({
+  var QImg = createComponent({
     name: 'QImg',
 
     props: {
@@ -19569,7 +19645,7 @@
     }
   });
 
-  var QInfiniteScroll = vue.defineComponent({
+  var QInfiniteScroll = createComponent({
     name: 'QInfiniteScroll',
 
     props: {
@@ -19777,7 +19853,7 @@
     }
   });
 
-  var QInnerLoading = vue.defineComponent({
+  var QInnerLoading = createComponent({
     name: 'QInnerLoading',
 
     props: {
@@ -19790,7 +19866,11 @@
       size: {
         type: [ String, Number ],
         default: 42
-      }
+      },
+
+      label: String,
+      labelClass: String,
+      labelStyle: [ String, Array, Object ]
     },
 
     setup (props, { slots }) {
@@ -19804,6 +19884,31 @@
         + (isDark.value === true ? ' q-inner-loading--dark' : '')
       );
 
+      const labelClass = vue.computed(() =>
+        'q-inner-loading__label'
+        + (props.labelClass !== void 0 ? ` ${ props.labelClass}` : '')
+      );
+
+      function getInner () {
+        const child = [
+          vue.h(QSpinner, {
+            size: props.size,
+            color: props.color
+          })
+        ];
+
+        if (props.label !== void 0) {
+          child.push(
+            vue.h('div', {
+              class: labelClass.value,
+              style: props.labelStyle
+            }, [ props.label ])
+          );
+        }
+
+        return child
+      }
+
       function getContent () {
         return props.showing === true
           ? vue.h(
@@ -19811,12 +19916,7 @@
               { class: classes.value, style: transitionStyle.value },
               slots.default !== void 0
                 ? slots.default()
-                : [
-                    vue.h(QSpinner, {
-                      size: props.size,
-                      color: props.color
-                    })
-                  ]
+                : getInner()
             )
           : null
       }
@@ -20395,7 +20495,7 @@
     }
   }
 
-  var QInput = vue.defineComponent({
+  var QInput = createComponent({
     name: 'QInput',
 
     inheritAttrs: false,
@@ -20844,7 +20944,7 @@
     }
   }
 
-  var Intersection = {
+  var Intersection = createDirective({
         name: 'intersection',
 
         mounted (el, { modifiers, value }) {
@@ -20863,9 +20963,10 @@
         },
 
         beforeUnmount: destroy$1
-      };
+      }
+  );
 
-  var QIntersection = vue.defineComponent({
+  var QIntersection = createComponent({
     name: 'QIntersection',
 
     props: {
@@ -20955,7 +21056,7 @@
     }
   });
 
-  var QList = vue.defineComponent({
+  var QList = createComponent({
     name: 'QList',
 
     props: {
@@ -20988,7 +21089,7 @@
   const keyCodes$1 = [ 34, 37, 40, 33, 39, 38 ];
   const commonPropsName = Object.keys(useCircularCommonProps);
 
-  var QKnob = vue.defineComponent({
+  var QKnob = createComponent({
     name: 'QKnob',
 
     props: {
@@ -21255,7 +21356,7 @@
   const { passive: passive$2 } = listenOpts;
   const axisValues = [ 'both', 'horizontal', 'vertical' ];
 
-  var QScrollObserver = vue.defineComponent({
+  var QScrollObserver = createComponent({
     name: 'QScrollObserver',
 
     props: {
@@ -21383,7 +21484,7 @@
     }
   });
 
-  var QLayout = vue.defineComponent({
+  var QLayout = createComponent({
     name: 'QLayout',
 
     props: {
@@ -21583,7 +21684,7 @@
 
   const separatorValues = [ 'horizontal', 'vertical', 'cell', 'none' ];
 
-  var QMarkupTable = vue.defineComponent({
+  var QMarkupTable = createComponent({
     name: 'QMarkupTable',
 
     props: {
@@ -21625,7 +21726,7 @@
     }
   });
 
-  var QNoSsr = vue.defineComponent({
+  var QNoSsr = createComponent({
     name: 'QNoSsr',
 
     props: {
@@ -21681,7 +21782,7 @@
     })
   ]);
 
-  var QRadio = vue.defineComponent({
+  var QRadio = createComponent({
     name: 'QRadio',
 
     props: {
@@ -21835,7 +21936,7 @@
     }
   });
 
-  var QToggle = vue.defineComponent({
+  var QToggle = createComponent({
     name: 'QToggle',
 
     props: {
@@ -21895,7 +21996,7 @@
 
   const typeValues = Object.keys(components$1);
 
-  var QOptionGroup = vue.defineComponent({
+  var QOptionGroup = createComponent({
     name: 'QOptionGroup',
 
     props: {
@@ -21929,7 +22030,7 @@
 
     emits: [ 'update:modelValue' ],
 
-    setup (props, { emit }) {
+    setup (props, { emit, slots }) {
       const { proxy: { $q } } = vue.getCurrentInstance();
 
       const arrayModel = Array.isArray(props.modelValue);
@@ -21973,28 +22074,38 @@
       return () => vue.h('div', {
         class: classes.value,
         ...attrs.value
-      }, props.options.map(opt => vue.h('div', [
-        vue.h(component.value, {
-          modelValue: props.modelValue,
-          val: opt.value,
-          name: opt.name === void 0 ? props.name : opt.name,
-          disable: props.disable || opt.disable,
-          label: opt.label,
-          leftLabel: opt.leftLabel === void 0 ? props.leftLabel : opt.leftLabel,
-          color: opt.color === void 0 ? props.color : opt.color,
-          checkedIcon: opt.checkedIcon,
-          uncheckedIcon: opt.uncheckedIcon,
-          dark: opt.dark || isDark.value,
-          size: opt.size === void 0 ? props.size : opt.size,
-          dense: props.dense,
-          keepColor: opt.keepColor === void 0 ? props.keepColor : opt.keepColor,
-          'onUpdate:modelValue': onUpdateModelValue
-        })
-      ])))
+      }, props.options.map((opt, i) => {
+        const child = slots[ 'label-' + i ] !== void 0
+          ? () => slots[ 'label-' + i ](opt)
+          : (
+              slots.label !== void 0
+                ? () => slots.label(opt)
+                : void 0
+            );
+
+        return vue.h('div', [
+          vue.h(component.value, {
+            modelValue: props.modelValue,
+            val: opt.value,
+            name: opt.name === void 0 ? props.name : opt.name,
+            disable: props.disable || opt.disable,
+            label: child === void 0 ? opt.label : null,
+            leftLabel: opt.leftLabel === void 0 ? props.leftLabel : opt.leftLabel,
+            color: opt.color === void 0 ? props.color : opt.color,
+            checkedIcon: opt.checkedIcon,
+            uncheckedIcon: opt.uncheckedIcon,
+            dark: opt.dark || isDark.value,
+            size: opt.size === void 0 ? props.size : opt.size,
+            dense: props.dense,
+            keepColor: opt.keepColor === void 0 ? props.keepColor : opt.keepColor,
+            'onUpdate:modelValue': onUpdateModelValue
+          }, child)
+        ])
+      }))
     }
   });
 
-  var QPage = vue.defineComponent({
+  var QPage = createComponent({
     name: 'QPage',
 
     props: {
@@ -22045,7 +22156,7 @@
     }
   });
 
-  var QPageContainer = vue.defineComponent({
+  var QPageContainer = createComponent({
     name: 'QPageContainer',
 
     setup (_, { slots }) {
@@ -22196,7 +22307,7 @@
     }
   }
 
-  var QPageScroller = vue.defineComponent({
+  var QPageScroller = createComponent({
     name: 'QPageScroller',
 
     props: {
@@ -22308,7 +22419,7 @@
     }
   });
 
-  var QPageSticky = vue.defineComponent({
+  var QPageSticky = createComponent({
     name: 'QPageSticky',
 
     props: usePageStickyProps,
@@ -22319,7 +22430,7 @@
     }
   });
 
-  var QPagination = vue.defineComponent({
+  var QPagination = createComponent({
     name: 'QPagination',
 
     props: {
@@ -22709,7 +22820,7 @@
 
   const { passive: passive$1 } = listenOpts;
 
-  var QParallax = vue.defineComponent({
+  var QParallax = createComponent({
     name: 'QParallax',
 
     props: {
@@ -22873,7 +22984,7 @@
     }
   }
 
-  var QPopupEdit = vue.defineComponent({
+  var QPopupEdit = createComponent({
     name: 'QPopupEdit',
 
     props: {
@@ -23059,7 +23170,7 @@
     }
   });
 
-  var QPopupProxy = vue.defineComponent({
+  var QPopupProxy = createComponent({
     name: 'QPopupProxy',
 
     props: {
@@ -23172,7 +23283,7 @@
     }
   }
 
-  var QLinearProgress = vue.defineComponent({
+  var QLinearProgress = createComponent({
     name: 'QLinearProgress',
 
     props: {
@@ -23269,7 +23380,7 @@
     PULLER_HEIGHT = 40,
     OFFSET_TOP = 20;
 
-  var QPullToRefresh = vue.defineComponent({
+  var QPullToRefresh = createComponent({
     name: 'QPullToRefresh',
 
     props: {
@@ -23474,7 +23585,7 @@
     MAX: 2
   };
 
-  var QRange = vue.defineComponent({
+  var QRange = createComponent({
     name: 'QRange',
 
     props: {
@@ -23942,7 +24053,7 @@
           })
         ];
 
-        props.markers === true && track.push(
+        props.markers !== false && track.push(
           vue.h('div', {
             class: `q-slider__track-markers q-slider__track-markers${ state.axis.value } absolute-full fit`,
             style: state.markerStyle.value
@@ -23982,7 +24093,7 @@
     }
   });
 
-  var QRating = vue.defineComponent({
+  var QRating = createComponent({
     name: 'QRating',
 
     props: {
@@ -24068,6 +24179,51 @@
         }
       });
 
+      const stars = vue.computed(() => {
+        const
+          acc = [],
+          icons = iconData.value,
+          ceil = Math.ceil(props.modelValue);
+
+        const halfIndex = props.iconHalf === void 0 || ceil === props.modelValue
+          ? -1
+          : ceil;
+
+        for (let i = 1; i <= props.max; i++) {
+          const
+            active = (mouseModel.value === 0 && props.modelValue >= i) || (mouseModel.value > 0 && mouseModel.value >= i),
+            half = halfIndex === i && mouseModel.value < i,
+            exSelected = mouseModel.value > 0 && (half === true ? ceil : props.modelValue) >= i && mouseModel.value < i,
+            color = half === true
+              ? (i <= icons.halfColorLen ? props.colorHalf[ i - 1 ] : icons.halfColor)
+              : (
+                  icons.selColor !== void 0 && active === true
+                    ? (i <= icons.selColorLen ? props.colorSelected[ i - 1 ] : icons.selColor)
+                    : (i <= icons.colorLen ? props.color[ i - 1 ] : icons.color)
+                );
+
+          acc.push({
+            name: (
+              half === true
+                ? (i <= icons.halfIconLen ? props.iconHalf[ i - 1 ] : icons.halfIcon)
+                : (
+                    icons.selIcon !== void 0 && (active === true || exSelected === true)
+                      ? (i <= icons.selIconLen ? props.iconSelected[ i - 1 ] : icons.selIcon)
+                      : (i <= icons.iconLen ? props.icon[ i - 1 ] : icons.icon)
+                  )
+            ) || $q.iconSet.rating.icon,
+
+            classes: 'q-rating__icon'
+              + (active === true || half === true ? ' q-rating__icon--active' : '')
+              + (exSelected === true ? ' q-rating__icon--exselected' : '')
+              + (mouseModel.value === i ? ' q-rating__icon--hovered' : '')
+              + (color !== void 0 ? ` text-${ color }` : '')
+          });
+        }
+
+        return acc
+      });
+
       const attributes = vue.computed(() => {
         if (props.disable === true) {
           return { 'aria-disabled': 'true' }
@@ -24077,6 +24233,8 @@
         }
       });
 
+      const tabindex = vue.computed(() => (editable.value === true ? 0 : null));
+
       function set (value) {
         if (editable.value === true) {
           const
@@ -24124,57 +24282,29 @@
       });
 
       return () => {
-        const
-          child = [],
-          tabindex = editable.value === true ? 0 : null,
-          icons = iconData.value,
-          ceil = Math.ceil(props.modelValue);
-
-        const halfIndex = props.iconHalf === void 0 || ceil === props.modelValue
-          ? -1
-          : ceil;
+        const child = [];
 
-        for (let i = 1; i <= props.max; i++) {
-          const
-            active = (mouseModel.value === 0 && props.modelValue >= i) || (mouseModel.value > 0 && mouseModel.value >= i),
-            half = halfIndex === i && mouseModel.value < i,
-            exSelected = mouseModel.value > 0 && (half === true ? ceil : props.modelValue) >= i && mouseModel.value < i,
-            name = half === true
-              ? (i <= icons.halfIconLen ? props.iconHalf[ i - 1 ] : icons.halfIcon)
-              : (
-                  icons.selIcon !== void 0 && (active === true || exSelected === true)
-                    ? (i <= icons.selIconLen ? props.iconSelected[ i - 1 ] : icons.selIcon)
-                    : (i <= icons.iconLen ? props.icon[ i - 1 ] : icons.icon)
-                ),
-            color = half === true
-              ? (i <= icons.halfColorLen ? props.colorHalf[ i - 1 ] : icons.halfColor)
-              : (
-                  icons.selColor !== void 0 && active === true
-                    ? (i <= icons.selColorLen ? props.colorSelected[ i - 1 ] : icons.selColor)
-                    : (i <= icons.colorLen ? props.color[ i - 1 ] : icons.color)
-                ),
-            classes = 'q-rating__icon'
-              + (active === true || half === true ? ' q-rating__icon--active' : '')
-              + (exSelected === true ? ' q-rating__icon--exselected' : '')
-              + (mouseModel.value === i ? ' q-rating__icon--hovered' : '')
-              + (color !== void 0 ? ` text-${ color }` : '');
+        stars.value.forEach(({ classes, name }, index) => {
+          const i = index + 1;
 
           child.push(
-            vue.h(QIcon, {
+            vue.h('div', {
               key: i,
               ref: vm => { iconRefs[ `rt${ i }` ] = vm; },
-              class: classes,
-              name: name || $q.iconSet.rating.icon,
-              tabindex,
+              class: 'q-rating__icon-container flex flex-center',
+              tabindex: tabindex.value,
               onClick () { set(i); },
               onMouseover () { setHoverValue(i); },
               onMouseout: resetMouseModel,
               onFocus () { setHoverValue(i); },
               onBlur: resetMouseModel,
               onKeyup (e) { onKeyup(e, i); }
-            }, slots[ `tip-${ i }` ])
+            }, hMergeSlot(
+              slots[ `tip-${ i }` ],
+              [ vue.h(QIcon, { class: classes, name }) ]
+            ))
           );
-        }
+        });
 
         if (props.name !== void 0 && props.disable !== true) {
           injectFormInput(child, 'push');
@@ -24189,7 +24319,7 @@
     }
   });
 
-  var QResponsive = vue.defineComponent({
+  var QResponsive = createComponent({
     name: 'QResponsive',
 
     props: useRatioProps,
@@ -24219,7 +24349,7 @@
     horizontal: { offset: 'offsetX', scroll: 'scrollLeft', dir: 'right', dist: 'x' }
   };
 
-  var QScrollArea = vue.defineComponent({
+  var QScrollArea = createComponent({
     name: 'QScrollArea',
 
     props: {
@@ -25348,7 +25478,7 @@
   const reEscapeList = '.*+?^${}()|[]\\';
   const fieldPropsList = Object.keys(useFieldProps);
 
-  var QSelect = vue.defineComponent({
+  var QSelect = createComponent({
     name: 'QSelect',
 
     inheritAttrs: false,
@@ -26852,7 +26982,7 @@
     'wave', 'pulse', 'pulse-x', 'pulse-y', 'fade', 'blink', 'none'
   ];
 
-  var QSkeleton = vue.defineComponent({
+  var QSkeleton = createComponent({
     name: 'QSkeleton',
 
     props: {
@@ -26874,6 +27004,10 @@
         validator: v => skeletonAnimations.includes(v),
         default: 'wave'
       },
+      animationSpeed: {
+        type: [ String, Number ],
+        default: 1500
+      },
 
       square: Boolean,
       bordered: Boolean,
@@ -26887,11 +27021,17 @@
       const vm = vue.getCurrentInstance();
       const isDark = useDark(props, vm.proxy.$q);
 
-      const style = vue.computed(() => (
-        props.size !== void 0
-          ? { width: props.size, height: props.size }
-          : { width: props.width, height: props.height }
-      ));
+      const style = vue.computed(() => {
+        const size = props.size !== void 0
+          ? [ props.size, props.size ]
+          : [ props.width, props.height ];
+
+        return {
+          '--q-skeleton-speed': `${ props.animationSpeed }ms`,
+          width: size[ 0 ],
+          height: size[ 1 ]
+        }
+      });
 
       const classes = vue.computed(() =>
         `q-skeleton q-skeleton--${ isDark.value === true ? 'dark' : 'light' } q-skeleton--type-${ props.type }`
@@ -26914,7 +27054,7 @@
     [ 'bottom', 'end', 'center', 'height' ]
   ];
 
-  var QSlideItem = vue.defineComponent({
+  var QSlideItem = createComponent({
     name: 'QSlideItem',
 
     props: {
@@ -27133,7 +27273,7 @@
 
   const space = vue.h('div', { class: 'q-space' });
 
-  var QSpace = vue.defineComponent({
+  var QSpace = createComponent({
     name: 'QSpace',
 
     setup () {
@@ -27207,7 +27347,7 @@
     ])
   ];
 
-  var QSpinnerAudio = vue.defineComponent({
+  var QSpinnerAudio = createComponent({
     name: 'QSpinnerAudio',
 
     props: useSpinnerProps,
@@ -27308,7 +27448,7 @@
     ])
   ];
 
-  var QSpinnerBall = vue.defineComponent({
+  var QSpinnerBall = createComponent({
     name: 'QSpinnerBall',
 
     props: useSpinnerProps,
@@ -27448,7 +27588,7 @@
     ])
   ];
 
-  var QSpinnerBars = vue.defineComponent({
+  var QSpinnerBars = createComponent({
     name: 'QSpinnerBars',
 
     props: useSpinnerProps,
@@ -27506,7 +27646,7 @@
     ])
   ];
 
-  var QSpinnerBox = vue.defineComponent({
+  var QSpinnerBox = createComponent({
     name: 'QSpinnerBox',
 
     props: useSpinnerProps,
@@ -27575,7 +27715,7 @@
     ])
   ];
 
-  var QSpinnerClock = vue.defineComponent({
+  var QSpinnerClock = createComponent({
     name: 'QSpinnerClock',
 
     props: useSpinnerProps,
@@ -27656,7 +27796,7 @@
     ])
   ];
 
-  var QSpinnerComment = vue.defineComponent({
+  var QSpinnerComment = createComponent({
     name: 'QSpinnerComment',
 
     props: useSpinnerProps,
@@ -27785,7 +27925,7 @@
     ])
   ];
 
-  var QSpinnerCube = vue.defineComponent({
+  var QSpinnerCube = createComponent({
     name: 'QSpinnerCube',
 
     props: useSpinnerProps,
@@ -27886,7 +28026,7 @@
     ])
   ];
 
-  var QSpinnerDots = vue.defineComponent({
+  var QSpinnerDots = createComponent({
     name: 'QSpinnerDots',
 
     props: useSpinnerProps,
@@ -27986,7 +28126,7 @@
     ])
   ];
 
-  var QSpinnerFacebook = vue.defineComponent({
+  var QSpinnerFacebook = createComponent({
     name: 'QSpinnerFacebook',
 
     props: useSpinnerProps,
@@ -28042,7 +28182,7 @@
     ])
   ];
 
-  var QSpinnerGears = vue.defineComponent({
+  var QSpinnerGears = createComponent({
     name: 'QSpinnerGears',
 
     props: useSpinnerProps,
@@ -28191,7 +28331,7 @@
     ])
   ];
 
-  var QSpinnerGrid = vue.defineComponent({
+  var QSpinnerGrid = createComponent({
     name: 'QSpinnerGrid',
 
     props: useSpinnerProps,
@@ -28242,7 +28382,7 @@
     })
   ];
 
-  var QSpinnerHearts = vue.defineComponent({
+  var QSpinnerHearts = createComponent({
     name: 'QSpinnerHearts',
 
     props: useSpinnerProps,
@@ -28351,7 +28491,7 @@
     ])
   ];
 
-  var QSpinnerHourglass = vue.defineComponent({
+  var QSpinnerHourglass = createComponent({
     name: 'QSpinnerHourglass',
 
     props: useSpinnerProps,
@@ -28391,7 +28531,7 @@
     ])
   ];
 
-  var QSpinnerInfinity = vue.defineComponent({
+  var QSpinnerInfinity = createComponent({
     name: 'QSpinnerInfinity',
 
     props: useSpinnerProps,
@@ -28561,7 +28701,7 @@
     ])
   ];
 
-  var QSpinnerIos = vue.defineComponent({
+  var QSpinnerIos = createComponent({
     name: 'QSpinnerIos',
 
     props: useSpinnerProps,
@@ -28609,7 +28749,7 @@
     ])
   ];
 
-  var QSpinnerOrbit = vue.defineComponent({
+  var QSpinnerOrbit = createComponent({
     name: 'QSpinnerOrbit',
 
     props: useSpinnerProps,
@@ -28656,7 +28796,7 @@
     ])
   ];
 
-  var QSpinnerOval = vue.defineComponent({
+  var QSpinnerOval = createComponent({
     name: 'QSpinnerOval',
 
     props: useSpinnerProps,
@@ -28734,7 +28874,7 @@
     ])
   ];
 
-  var QSpinnerPie = vue.defineComponent({
+  var QSpinnerPie = createComponent({
     name: 'QSpinnerPie',
 
     props: useSpinnerProps,
@@ -28814,7 +28954,7 @@
     ])
   ];
 
-  var QSpinnerPuff = vue.defineComponent({
+  var QSpinnerPuff = createComponent({
     name: 'QSpinnerPuff',
 
     props: useSpinnerProps,
@@ -28887,7 +29027,7 @@
     ])
   ];
 
-  var QSpinnerRadio = vue.defineComponent({
+  var QSpinnerRadio = createComponent({
     name: 'QSpinnerRadio',
 
     props: useSpinnerProps,
@@ -28990,7 +29130,7 @@
     ])
   ];
 
-  var QSpinnerRings = vue.defineComponent({
+  var QSpinnerRings = createComponent({
     name: 'QSpinnerRings',
 
     props: useSpinnerProps,
@@ -29071,7 +29211,7 @@
     ])
   ];
 
-  var QSpinnerTail = vue.defineComponent({
+  var QSpinnerTail = createComponent({
     name: 'QSpinnerTail',
 
     props: useSpinnerProps,
@@ -29089,7 +29229,7 @@
     }
   });
 
-  var QSplitter = vue.defineComponent({
+  var QSplitter = createComponent({
     name: 'QSplitter',
 
     props: {
@@ -29287,7 +29427,7 @@
     }
   });
 
-  var StepHeader = vue.defineComponent({
+  var StepHeader = createComponent({
     name: 'StepHeader',
 
     props: {
@@ -29379,6 +29519,12 @@
           + (isDisable.value === true ? ' q-stepper__tab--disabled' : '')
       });
 
+      const ripple = vue.computed(() => (
+        props.stepper.headerNav !== true
+          ? false
+          : headerNav.value
+      ));
+
       function onActivate () {
         blurRef.value !== null && blurRef.value.focus();
         isActive.value === false && props.goToPanel(props.step.name);
@@ -29434,13 +29580,9 @@
           );
         }
 
-        return hDir(
-          'div',
-          data,
-          child,
-          'head',
-          props.stepper.headerNav === true && headerNav.value !== false,
-          () => [ [ Ripple, headerNav.value ] ]
+        return vue.withDirectives(
+          vue.h('div', data, child),
+          [ [ Ripple, ripple.value ] ]
         )
       }
     }
@@ -29462,7 +29604,7 @@
     }
   };
 
-  var QStep = vue.defineComponent({
+  var QStep = createComponent({
     name: 'QStep',
 
     props: {
@@ -29579,7 +29721,7 @@
     return acc
   }
 
-  var QStepper = vue.defineComponent({
+  var QStepper = createComponent({
     name: 'QStepper',
 
     props: {
@@ -29692,7 +29834,7 @@
     }
   });
 
-  var QStepperNavigation = vue.defineComponent({
+  var QStepperNavigation = createComponent({
     name: 'QStepperNavigation',
 
     setup (_, { slots }) {
@@ -29700,7 +29842,7 @@
     }
   });
 
-  var QTh = vue.defineComponent({
+  var QTh = createComponent({
     name: 'QTh',
 
     props: {
@@ -29777,7 +29919,7 @@
 
   const typeOptions = [ 'list', 'table', '__qtable' ];
 
-  var QVirtualScroll = vue.defineComponent({
+  var QVirtualScroll = createComponent({
     name: 'QVirtualScroll',
 
     props: {
@@ -30521,7 +30663,7 @@
   const commonVirtPropsObj = {};
   commonVirtPropsList.forEach(p => { commonVirtPropsObj[ p ] = {}; });
 
-  var QTable = vue.defineComponent({
+  var QTable = createComponent({
     name: 'QTable',
 
     props: {
@@ -31560,7 +31702,7 @@
     }
   });
 
-  var QTr = vue.defineComponent({
+  var QTr = createComponent({
     name: 'QTr',
 
     props: {
@@ -31579,7 +31721,7 @@
     }
   });
 
-  var QTd = vue.defineComponent({
+  var QTd = createComponent({
     name: 'QTd',
 
     props: {
@@ -31619,7 +31761,7 @@
     }
   });
 
-  var QRouteTab = vue.defineComponent({
+  var QRouteTab = createComponent({
     name: 'QRouteTab',
 
     props: {
@@ -31675,7 +31817,7 @@
     }
   }
 
-  var QTime = vue.defineComponent({
+  var QTime = createComponent({
     name: 'QTime',
 
     props: {
@@ -31927,8 +32069,6 @@
           defaultDateModel.value
         );
 
-        console.log({ ...model });
-
         if (
           model.dateHash !== innerModel.value.dateHash
           || model.timeHash !== innerModel.value.timeHash
@@ -32562,7 +32702,7 @@
     }
   });
 
-  var QTimeline = vue.defineComponent({
+  var QTimeline = createComponent({
     name: 'QTimeline',
 
     props: {
@@ -32599,7 +32739,7 @@
     }
   });
 
-  var QTimelineEntry = vue.defineComponent({
+  var QTimelineEntry = createComponent({
     name: 'QTimelineEntry',
 
     props: {
@@ -32703,7 +32843,7 @@
     }
   });
 
-  var QToolbar = vue.defineComponent({
+  var QToolbar = createComponent({
     name: 'QToolbar',
 
     props: {
@@ -32720,7 +32860,7 @@
     }
   });
 
-  var QToolbarTitle = vue.defineComponent({
+  var QToolbarTitle = createComponent({
     name: 'QToolbarTitle',
 
     props: {
@@ -32737,7 +32877,7 @@
     }
   });
 
-  var QTree = vue.defineComponent({
+  var QTree = createComponent({
     name: 'QTree',
 
     props: {
@@ -33885,7 +34025,7 @@
     }
   }
 
-  var createUploaderComponent = ({ name, props, emits, injectPlugin }) => vue.defineComponent({
+  var createUploaderComponent = ({ name, props, emits, injectPlugin }) => createComponent({
     name,
 
     props: {
@@ -34162,7 +34302,7 @@
 
   var QUploader = createUploaderComponent(xhrUploaderPlugin);
 
-  var QUploaderAddTrigger = vue.defineComponent({
+  var QUploaderAddTrigger = createComponent({
     name: 'QUploaderAddTrigger',
 
     setup () {
@@ -34172,7 +34312,7 @@
     }
   });
 
-  var QVideo = vue.defineComponent({
+  var QVideo = createComponent({
     name: 'QVideo',
 
     props: {
@@ -34351,7 +34491,7 @@
     return isNaN(depth) ? 0 : depth
   }
 
-  var ClosePopup = {
+  var ClosePopup = createDirective({
         name: 'close-popup',
 
         beforeMount (el, { value }) {
@@ -34391,7 +34531,8 @@
           el.removeEventListener('keyup', ctx.handlerKey);
           delete el.__qclosepopup;
         }
-      };
+      }
+  );
 
   let id = 0;
   let offsetBase = void 0;
@@ -35541,7 +35682,7 @@
     }
   }
 
-  var Morph = {
+  var Morph = createDirective({
         name: 'morph',
 
         mounted (el, binding) {
@@ -35586,7 +35727,8 @@
 
           delete el.__qmorph;
         }
-      };
+      }
+  );
 
   const defaultCfg = {
     childList: true,
@@ -35622,7 +35764,7 @@
     }
   }
 
-  var Mutation = {
+  var Mutation = createDirective({
         name: 'mutation',
 
         mounted (el, { modifiers: { once, ...mod }, value }) {
@@ -35646,7 +35788,8 @@
         },
 
         beforeUnmount: destroy
-      };
+      }
+  );
 
   const { passive } = listenOpts;
 
@@ -35663,7 +35806,7 @@
     }
   }
 
-  var ScrollFire = {
+  var ScrollFire = createDirective({
         name: 'scroll-fire',
 
         mounted (el, binding) {
@@ -35704,7 +35847,8 @@
           ctx.scrollTarget.removeEventListener('scroll', ctx.scroll, passive);
           delete el.__qscrollfire;
         }
-      };
+      }
+  );
 
   function update (ctx, { value, oldValue }) {
     if (typeof value !== 'function') {
@@ -35718,7 +35862,7 @@
     }
   }
 
-  var Scroll = {
+  var Scroll = createDirective({
         name: 'scroll',
 
         mounted (el, binding) {
@@ -35748,9 +35892,10 @@
           ctx.scrollTarget.removeEventListener('scroll', ctx.scroll, listenOpts.passive);
           delete el.__qscroll;
         }
-      };
+      }
+  );
 
-  var TouchHold = {
+  var TouchHold = createDirective({
         name: 'touch-hold',
 
         beforeMount (el, binding) {
@@ -35901,7 +36046,8 @@
             delete el.__qtouchhold;
           }
         }
-      };
+      }
+  );
 
   const
     keyCodes = {
@@ -35924,7 +36070,7 @@
       || Math.abs(top - origin.top) >= 7
   }
 
-  var TouchRepeat = {
+  var TouchRepeat = createDirective({
         name: 'touch-repeat',
 
         beforeMount (el, { modifiers, value, arg }) {
@@ -36135,7 +36281,8 @@
             delete el.__qtouchrepeat;
           }
         }
-      };
+      }
+  );
 
   var directives = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -36368,7 +36515,7 @@
     }
   }
 
-  var BottomSheet$1 = vue.defineComponent({
+  var BottomSheet$1 = createComponent({
     name: 'BottomSheetPlugin',
 
     props: {
@@ -36885,7 +37032,7 @@
     Object.assign(Plugin$3, getObject());
   }
 
-  var DialogPlugin = vue.defineComponent({
+  var DialogPlugin = createComponent({
     name: 'DialogPlugin',
 
     props: {
@@ -37628,9 +37775,9 @@
   }
 
   function getComponent ($q) {
-    return vue.defineComponent({
+    return createComponent({
       name: 'QNotifications',
-      
+
       // hide App from Vue devtools
       devtools: { hide: true },
 
@@ -38587,7 +38734,7 @@
   });
 
   var index_umd = {
-    version: '2.1.9',
+    version: '2.2.3',
     install (app, opts) {
       installQuasar(app, {
         components,