quasar 2.1.6 → 2.2.0

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.1.6
+ * 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.6' };
+      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');
@@ -25464,7 +25547,7 @@
       const dialogFieldFocused = vue.ref(false);
       const innerLoadingIndicator = vue.ref(false);
 
-      let inputTimer, innerValueCache, optionScopeCache,
+      let inputTimer, innerValueCache,
         hasDialog, userInputValue, filterId, defaultInputValue,
         transitionShowComputed, searchBuffer, searchBufferExp;
 
@@ -25590,7 +25673,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',
@@ -25631,7 +25714,6 @@
         }
 
         const { from, to } = virtualScrollSliceRange.value;
-        const { options, optionEls } = optionScopeCache;
 
         return props.options.slice(from, to).map((opt, i) => {
           const disable = isOptionDisabled.value(opt) === true;
@@ -25663,7 +25745,7 @@
             }
           }
 
-          const option = {
+          return {
             index,
             opt,
             html: needsHtmlFn.value(opt),
@@ -25673,23 +25755,7 @@
             toggleOption,
             setOptionIndex,
             itemProps
-          };
-
-          const optionWithoutEvents = {
-            ...option,
-            itemProps: {
-              ...itemProps,
-              onClick: void 0,
-              onMousemove: void 0
-            }
-          };
-
-          if (options[ i ] === void 0 || isDeepEqual(optionWithoutEvents, options[ i ]) !== true) {
-            options[ i ] = optionWithoutEvents;
-            optionEls[ i ] = void 0;
           }
-
-          return option
         })
       });
 
@@ -26271,14 +26337,6 @@
       }
 
       function getAllOptions () {
-        if (
-          slots.option !== void 0
-          && optionScopeCache.optionSlot !== slots.option
-        ) {
-          optionScopeCache.optionSlot = slots.option;
-          optionScopeCache.optionEls = [];
-        }
-
         const fn = slots.option !== void 0
           ? slots.option
           : scope => {
@@ -26298,17 +26356,7 @@
             })
           };
 
-        const { optionEls } = optionScopeCache;
-
-        let options = padVirtualScroll('div', optionScope.value.map((scope, i) => {
-          if (optionEls[ i ] === void 0) {
-            optionEls[ i ] = fn(scope);
-          }
-
-          // rendered vnode always needs a new
-          // "instance" otherwise DOM diff will say nothing changed
-          return { ...optionEls[ i ] }
-        }));
+        let options = padVirtualScroll('div', optionScope.value.map(fn));
 
         if (slots[ 'before-options' ] !== void 0) {
           options = slots[ 'before-options' ]().concat(options);
@@ -26620,10 +26668,6 @@
       }
 
       function closeMenu () {
-        if (optionScopeCache !== void 0) {
-          optionScopeCache.optionEls = [];
-        }
-
         if (dialog.value === true) {
           return
         }
@@ -26739,16 +26783,7 @@
 
       updatePreState();
 
-      vue.onBeforeMount(() => {
-        optionScopeCache = {
-          optionSlot: slots.option,
-          options: [],
-          optionEls: []
-        };
-      });
-
       vue.onBeforeUnmount(() => {
-        optionScopeCache = void 0;
         clearTimeout(inputTimer);
       });
 
@@ -26922,6 +26957,10 @@
         validator: v => skeletonAnimations.includes(v),
         default: 'wave'
       },
+      animationSpeed: {
+        type: [ String, Number ],
+        default: 1500
+      },
 
       square: Boolean,
       bordered: Boolean,
@@ -26935,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 }`
@@ -38635,7 +38680,7 @@
   });
 
   var index_umd = {
-    version: '2.1.6',
+    version: '2.2.0',
     install (app, opts) {
       installQuasar(app, {
         components,