quasar 2.1.8 → 2.2.2

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.1.8
+ * Quasar Framework v2.2.2
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1437,7 +1437,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.1.8' };
+      const $q = { version: '2.2.2' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -3218,7 +3218,7 @@
       );
 
       const ripple = vue.computed(() => (
-        props.ripple === false
+        props.disable === true || props.ripple === false
           ? false
           : {
               keyCodes: isLink.value === true ? [ 13, 32 ] : [ 13 ],
@@ -3226,6 +3226,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 +3261,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,13 +3524,18 @@
           ))
         );
 
-        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
+          ] ]
         )
       }
     }
@@ -6064,6 +6061,10 @@
 
     transitionPrev: String,
     transitionNext: String,
+    transitionDuration: {
+      type: [ String, Number ],
+      default: 300
+    },
 
     keepAlive: Boolean,
     keepAliveInclude: [ String, Array, RegExp ],
@@ -6109,6 +6110,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 +6233,7 @@
     }
 
     function getPanelContentChild () {
-      const panel = isValidPanelName(props.modelValue)
+      const panel = isValidPanelName(props.modelValue) === true
         && updatePanelIndex()
         && panels[ panelIndex.value ];
 
@@ -6239,7 +6244,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 +6252,7 @@
         : [
             vue.h('div', {
               class: 'q-panel scroll',
+              style: transitionStyle.value,
               key: contentKey.value,
               role: 'tabpanel'
             }, [ panel ])
@@ -6259,11 +6265,7 @@
       }
 
       return props.animated === true
-        ? [
-            vue.h(vue.Transition, {
-              name: panelTransition.value
-            }, getPanelContentChild)
-          ]
+        ? [ vue.h(vue.Transition, { name: panelTransition.value }, getPanelContentChild) ]
         : getPanelContentChild()
     }
 
@@ -6273,7 +6275,7 @@
       ).filter(
         panel => panel.props !== null
           && panel.props.slot === void 0
-          && isValidPanelName(panel.props.name)
+          && isValidPanelName(panel.props.name) === true
       );
 
       return panels.length
@@ -6661,7 +6663,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(() => {
@@ -8117,7 +8126,7 @@
 
     label: Boolean,
     labelAlways: Boolean,
-    markers: Boolean,
+    markers: [ Boolean, Number ],
     snap: Boolean,
 
     vertical: Boolean,
@@ -8170,9 +8179,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
@@ -8552,7 +8565,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
@@ -9328,6 +9341,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,13 +9503,9 @@
         ...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 ] ]
       )
     }
 
@@ -9924,6 +9939,7 @@
       palette: Array,
 
       noHeader: Boolean,
+      noHeaderTabs: Boolean,
       noFooter: Boolean,
 
       square: Boolean,
@@ -10009,7 +10025,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 +10376,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 +10441,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 +10677,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 +11242,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 +11349,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 +11490,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 +11547,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) {
@@ -13749,6 +13809,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 +14053,7 @@
             useBackdrop.value === true
               ? vue.h('div', {
                   class: 'q-dialog__backdrop fixed-full',
+                  style: transitionStyle.value,
                   'aria-hidden': 'true',
                   onMousedown: onBackdropClick
                 })
@@ -14003,6 +14068,7 @@
                 ? vue.h('div', {
                     ref: innerRef,
                     class: classes.value,
+                    style: transitionStyle.value,
                     tabindex: -1,
                     ...onEvents.value
                   }, hSlot(slots.default))
@@ -14464,6 +14530,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);
       }
 
@@ -19790,7 +19859,11 @@
       size: {
         type: [ String, Number ],
         default: 42
-      }
+      },
+
+      label: String,
+      labelClass: String,
+      labelStyle: [ String, Array, Object ]
     },
 
     setup (props, { slots }) {
@@ -19804,6 +19877,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 +19909,7 @@
               { class: classes.value, style: transitionStyle.value },
               slots.default !== void 0
                 ? slots.default()
-                : [
-                    vue.h(QSpinner, {
-                      size: props.size,
-                      color: props.color
-                    })
-                  ]
+                : getInner()
             )
           : null
       }
@@ -21929,7 +22022,7 @@
 
     emits: [ 'update:modelValue' ],
 
-    setup (props, { emit }) {
+    setup (props, { emit, slots }) {
       const { proxy: { $q } } = vue.getCurrentInstance();
 
       const arrayModel = Array.isArray(props.modelValue);
@@ -21973,24 +22066,34 @@
       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)
+        ])
+      }))
     }
   });
 
@@ -23942,7 +24045,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
@@ -24068,6 +24171,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 +24225,8 @@
         }
       });
 
+      const tabindex = vue.computed(() => (editable.value === true ? 0 : null));
+
       function set (value) {
         if (editable.value === true) {
           const
@@ -24124,57 +24274,29 @@
       });
 
       return () => {
-        const
-          child = [],
-          tabindex = editable.value === true ? 0 : null,
-          icons = iconData.value,
-          ceil = Math.ceil(props.modelValue);
+        const child = [];
 
-        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,
-            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');
@@ -25590,7 +25712,7 @@
       const tabindex = vue.computed(() => (state.focused.value === true ? props.tabindex : -1));
 
       const comboboxAttrs = vue.computed(() => ({
-        tabindex: tabindex.value,
+        tabindex: props.tabindex,
         role: 'combobox',
         'aria-label': props.label,
         'aria-autocomplete': props.useInput === true ? 'list' : 'none',
@@ -26874,6 +26996,10 @@
         validator: v => skeletonAnimations.includes(v),
         default: 'wave'
       },
+      animationSpeed: {
+        type: [ String, Number ],
+        default: 1500
+      },
 
       square: Boolean,
       bordered: Boolean,
@@ -26887,11 +27013,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 }`
@@ -29379,6 +29511,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 +29572,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 ] ]
         )
       }
     }
@@ -31927,8 +32061,6 @@
           defaultDateModel.value
         );
 
-        console.log({ ...model });
-
         if (
           model.dateHash !== innerModel.value.dateHash
           || model.timeHash !== innerModel.value.timeHash
@@ -38587,7 +38719,7 @@
   });
 
   var index_umd = {
-    version: '2.1.8',
+    version: '2.2.2',
     install (app, opts) {
       installQuasar(app, {
         components,