quasar 2.1.9 → 2.2.0

package/dist/quasar.sass

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.1.9
+ * Quasar Framework v2.2.0
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1489,7 +1489,10 @@ body.desktop .q-chip--clickable:focus
   &--bordered
     border: 1px solid $separator-color
   &__header
-    height: 68px
+    &-tabs
+      height: 32px
+    &-banner
+      height: 36px
     input
       line-height: 24px
       border: 0
@@ -2675,6 +2678,8 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
   background: $light-dimmed-background
   &--dark
     background: $dimmed-background
+  &__label
+    margin-top: 8px
 .q-textarea
   .q-field__control
     min-height: 56px
@@ -3185,6 +3190,11 @@ body.desktop
 .q-rating
   color: $rating-grade-color
   vertical-align: middle
+  &__icon-container
+    height: 1em
+    outline: 0
+    & + &
+      margin-left: 2px
   &__icon
     color: currentColor
     text-shadow: $rating-shadow
@@ -3197,14 +3207,10 @@ body.desktop
       opacity: 1
     &--exselected
       opacity: .7
-    & + &
-      margin-left: 2px
   &--no-dimming .q-rating__icon
     opacity: 1
-  &--editable .q-icon
+  &--editable .q-rating__icon-container
     cursor: pointer
-  &--non-editable span, .q-icon
-    outline: 0
 .q-responsive
   position: relative
   max-width: 100%
@@ -3326,6 +3332,7 @@ body.platform-ios
       margin-top: 8px
       margin-bottom: 8px
 .q-skeleton
+  --q-skeleton-speed: 1500ms
   background: $separator-color
   border-radius: $generic-border-radius
   &--anim
@@ -3373,13 +3380,13 @@ body.platform-ios
   &--square
     border-radius: 0
   &--anim-fade
-    animation: q-skeleton--fade 1.5s linear .5s infinite
+    animation: q-skeleton--fade var(--q-skeleton-speed) linear .5s infinite
   &--anim-pulse
-    animation: q-skeleton--pulse 1.5s ease-in-out .5s infinite
+    animation: q-skeleton--pulse var(--q-skeleton-speed) ease-in-out .5s infinite
   &--anim-pulse-x
-    animation: q-skeleton--pulse-x 1.5s ease-in-out .5s infinite
+    animation: q-skeleton--pulse-x var(--q-skeleton-speed) ease-in-out .5s infinite
   &--anim-pulse-y
-    animation: q-skeleton--pulse-y 1.5s ease-in-out .5s infinite
+    animation: q-skeleton--pulse-y var(--q-skeleton-speed) ease-in-out .5s infinite
   &--anim-wave,
   &--anim-blink,
   &--anim-pop
@@ -3396,10 +3403,10 @@ body.platform-ios
       z-index: 0
   &--anim-blink:after
     background: rgba(255,255,255,.7)
-    animation: q-skeleton--fade 1.5s linear .5s infinite
+    animation: q-skeleton--fade var(--q-skeleton-speed) linear .5s infinite
   &--anim-wave:after
     background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0))
-    animation: q-skeleton--wave 1.5s linear .5s infinite
+    animation: q-skeleton--wave var(--q-skeleton-speed) linear .5s infinite
   &--dark
     background: rgba(255, 255, 255, 0.05)
     &.q-skeleton--bordered
@@ -6978,9 +6985,6 @@ img.responsive
   touch-action: pan-x
 .q-touch-y
   touch-action: pan-y
-\:root
-  --q-transition-duration: .3s
-  --q-transition-easing: cubic-bezier(0.215,0.61,0.355,1)
 .q-transition
   &--slide-right,
   &--slide-left,
@@ -6994,6 +6998,10 @@ img.responsive
   &--scale,
   &--rotate,
   &--flip
+    &-enter-active,
+    &-leave-active
+      --q-transition-duration: .3s
+      --q-transition-easing: cubic-bezier(0.215,0.61,0.355,1)
     &-leave-active
       position: absolute
   &--slide-right,

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.1.9
+ * Quasar Framework v2.2.0
  * (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.0' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -6064,6 +6064,10 @@
 
     transitionPrev: String,
     transitionNext: String,
+    transitionDuration: {
+      type: [ String, Number ],
+      default: 300
+    },
 
     keepAlive: Boolean,
     keepAliveInclude: [ String, Array, RegExp ],
@@ -6109,6 +6113,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 +6236,7 @@
     }
 
     function getPanelContentChild () {
-      const panel = isValidPanelName(props.modelValue)
+      const panel = isValidPanelName(props.modelValue) === true
         && updatePanelIndex()
         && panels[ panelIndex.value ];
 
@@ -6239,7 +6247,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 +6255,7 @@
         : [
             vue.h('div', {
               class: 'q-panel scroll',
+              style: transitionStyle.value,
               key: contentKey.value,
               role: 'tabpanel'
             }, [ panel ])
@@ -6259,11 +6268,7 @@
       }
 
       return props.animated === true
-        ? [
-            vue.h(vue.Transition, {
-              name: panelTransition.value
-            }, getPanelContentChild)
-          ]
+        ? [ vue.h(vue.Transition, { name: panelTransition.value }, getPanelContentChild) ]
         : getPanelContentChild()
     }
 
@@ -6273,7 +6278,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 +6666,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(() => {
@@ -9924,6 +9936,7 @@
       palette: Array,
 
       noHeader: Boolean,
+      noHeaderTabs: Boolean,
       noFooter: Boolean,
 
       square: Boolean,
@@ -10009,7 +10022,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 +10373,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 +10438,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 +10674,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))
         ]
       }
 
@@ -13749,6 +13773,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 +14017,7 @@
             useBackdrop.value === true
               ? vue.h('div', {
                   class: 'q-dialog__backdrop fixed-full',
+                  style: transitionStyle.value,
                   'aria-hidden': 'true',
                   onMousedown: onBackdropClick
                 })
@@ -14003,6 +14032,7 @@
                 ? vue.h('div', {
                     ref: innerRef,
                     class: classes.value,
+                    style: transitionStyle.value,
                     tabindex: -1,
                     ...onEvents.value
                   }, hSlot(slots.default))
@@ -19790,7 +19820,11 @@
       size: {
         type: [ String, Number ],
         default: 42
-      }
+      },
+
+      label: String,
+      labelClass: String,
+      labelStyle: [ String, Array, Object ]
     },
 
     setup (props, { slots }) {
@@ -19804,6 +19838,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 +19870,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 +21983,7 @@
 
     emits: [ 'update:modelValue' ],
 
-    setup (props, { emit }) {
+    setup (props, { emit, slots }) {
       const { proxy: { $q } } = vue.getCurrentInstance();
 
       const arrayModel = Array.isArray(props.modelValue);
@@ -21973,24 +22027,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)
+        ])
+      }))
     }
   });
 
@@ -24068,6 +24132,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 +24186,8 @@
         }
       });
 
+      const tabindex = vue.computed(() => (editable.value === true ? 0 : null));
+
       function set (value) {
         if (editable.value === true) {
           const
@@ -24124,57 +24235,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');
@@ -26874,6 +26957,10 @@
         validator: v => skeletonAnimations.includes(v),
         default: 'wave'
       },
+      animationSpeed: {
+        type: [ String, Number ],
+        default: 1500
+      },
 
       square: Boolean,
       bordered: Boolean,
@@ -26887,11 +26974,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 }`
@@ -38587,7 +38680,7 @@
   });
 
   var index_umd = {
-    version: '2.1.9',
+    version: '2.2.0',
     install (app, opts) {
       installQuasar(app, {
         components,