quasar 2.14.1 → 2.14.3

package/dist/quasar.sass

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.14.1
+ * Quasar Framework v2.14.3
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.14.1
+ * Quasar Framework v2.14.3
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -798,36 +798,13 @@
       }
     },
 
-    install ({ $q, onSSRHydrated, ssrContext }) {
+    install ({ $q, ssrContext }) {
       const { dark } = $q.config;
 
       $q.dark = this;
 
-      if (this.__installed === true && dark === void 0) {
-        return
-      }
-
-      this.isActive = dark === true;
-
-      const initialVal = dark !== void 0 ? dark : false;
-
-      if (isRuntimeSsrPreHydration.value === true) {
-        const ssrSet = val => {
-          this.__fromSSR = val;
-        };
-
-        const originalSet = this.set;
-
-        this.set = ssrSet;
-        ssrSet(initialVal);
-
-        onSSRHydrated.push(() => {
-          this.set = originalSet;
-          this.set(this.__fromSSR);
-        });
-      }
-      else {
-        this.set(initialVal);
+      if (this.__installed !== true) {
+        this.set(dark !== void 0 ? dark : false);
       }
     }
   });
@@ -1653,7 +1630,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.14.1' };
+      const $q = { version: '2.14.3' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -1917,13 +1894,23 @@
 
         progress.value = 0;
 
+        /**
+         * We're trying to avoid side effects if start() is called inside a watchEffect()
+         * so we're accessing the _value property directly (under the covers implementation detail of ref())
+         *
+         * Otherwise, any refs() accessed here would be marked as deps for the watchEffect()
+         * -- and we are changing them below, which would cause an infinite loop
+         */
+
         timer = setTimeout(() => {
           timer = null;
           animate.value = true;
           newSpeed > 0 && planNextStep();
-        }, onScreen.value === true ? 500 : 1);
+          // eslint-disable-next-line vue/no-ref-as-operand
+        }, onScreen._value === true ? 500 : 1);
 
-        if (onScreen.value !== true) {
+        // eslint-disable-next-line vue/no-ref-as-operand
+        if (onScreen._value !== true) {
           onScreen.value = true;
           animate.value = false;
         }
@@ -2282,13 +2269,13 @@
         }
 
         if (type.value.img === true) {
-          return vue.h('span', data, hMergeSlot(slots.default, [
+          return vue.h(props.tag, data, hMergeSlot(slots.default, [
             vue.h('img', { src: type.value.src })
           ]))
         }
 
         if (type.value.svg === true) {
-          return vue.h('span', data, hMergeSlot(slots.default, [
+          return vue.h(props.tag, data, hMergeSlot(slots.default, [
             vue.h('svg', {
               viewBox: type.value.viewBox || '0 0 24 24'
             }, type.value.nodes)
@@ -2296,7 +2283,7 @@
         }
 
         if (type.value.svguse === true) {
-          return vue.h('span', data, hMergeSlot(slots.default, [
+          return vue.h(props.tag, data, hMergeSlot(slots.default, [
             vue.h('svg', {
               viewBox: type.value.viewBox
             }, [
@@ -5864,6 +5851,35 @@
       + hexBytes[ b[ 14 ] ] + hexBytes[ b[ 15 ] ]
   }
 
+  function getId (val, requiredId) {
+    return val === void 0
+      ? (requiredId === true ? `f_${ uid$3() }` : void 0)
+      : val
+  }
+
+  /**
+   * Returns an "id" which is a ref() that can be used as a unique identifier.
+   * On SSR, it takes care of generating the id on the client side (only) to
+   * avoid hydration errors.
+   */
+  function useId (initialId, requiredId = true) {
+    if (isRuntimeSsrPreHydration.value === true) {
+      const id = vue.ref(initialId);
+
+      if (requiredId === true && initialId === void 0) {
+        vue.onMounted(() => {
+          id.value = `f_${ uid$3() }`; // getId(void 0, true)
+        });
+      }
+
+      return id
+    }
+
+    return vue.ref(
+      getId(initialId, requiredId)
+    )
+  }
+
   const btnPropsList = Object.keys(useBtnProps);
 
   const passBtnProps = props => btnPropsList.reduce(
@@ -5921,13 +5937,13 @@
 
       const showing = vue.ref(props.modelValue);
       const menuRef = vue.ref(null);
-      const targetUid = uid$3();
+      const targetUid = useId();
 
       const ariaAttrs = vue.computed(() => {
         const acc = {
           'aria-expanded': showing.value === true ? 'true' : 'false',
           'aria-haspopup': 'true',
-          'aria-controls': targetUid,
+          'aria-controls': targetUid.value,
           'aria-label': props.toggleAriaLabel || proxy.$q.lang.label[ showing.value === true ? 'collapse' : 'expand' ](props.label)
         };
 
@@ -6021,7 +6037,7 @@
         props.disableDropdown !== true && Arrow.push(
           vue.h(QMenu, {
             ref: menuRef,
-            id: targetUid,
+            id: targetUid.value,
             class: props.contentClass,
             style: props.contentStyle,
             cover: props.cover,
@@ -8837,8 +8853,16 @@
       && innerMin.value < innerMax.value
     ));
 
-    const decimals = vue.computed(() => (String(props.step).trim().split('.')[ 1 ] || '').length);
-    const step = vue.computed(() => (props.step === 0 ? 1 : props.step));
+    const roundValueFn = vue.computed(() => {
+      if (props.step === 0) {
+        return v => v
+      }
+
+      const decimals = (String(props.step).trim().split('.')[ 1 ] || '').length;
+      return v => parseFloat(v.toFixed(decimals))
+    });
+
+    const keyStep = vue.computed(() => (props.step === 0 ? 1 : props.step));
     const tabindex = vue.computed(() => (editable.value === true ? props.tabindex || 0 : -1));
 
     const trackLen = vue.computed(() => props.max - props.min);
@@ -8950,9 +8974,7 @@
         model += (Math.abs(modulo) >= step / 2 ? (modulo < 0 ? -1 : 1) * step : 0) - modulo;
       }
 
-      if (decimals.value > 0) {
-        model = parseFloat(model.toFixed(decimals.value));
-      }
+      model = roundValueFn.value(model);
 
       return between(model, innerMin.value, innerMax.value)
     }
@@ -8978,7 +9000,7 @@
     }
 
     const markerStep = vue.computed(() => (
-      isNumber(props.markers) === true ? props.markers : step.value)
+      isNumber(props.markers) === true ? props.markers : keyStep.value)
     );
 
     const markerTicks = vue.computed(() => {
@@ -9338,8 +9360,8 @@
         tabindex,
         attributes,
 
-        step,
-        decimals,
+        roundValueFn,
+        keyStep,
         trackLen,
         innerMin,
         innerMinRatio,
@@ -9485,7 +9507,7 @@
         stopAndPrevent(evt);
 
         const
-          stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * state.step.value,
+          stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * state.keyStep.value,
           offset = (
             ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1)
             * (state.isReversed.value === true ? -1 : 1)
@@ -9493,7 +9515,7 @@
           );
 
         model.value = between(
-          parseFloat((model.value + offset).toFixed(state.decimals.value)),
+          state.roundValueFn.value(model.value + offset),
           state.innerMin.value,
           state.innerMax.value
         );
@@ -9582,6 +9604,9 @@
 
       const { proxy } = vue.getCurrentInstance();
 
+      // expose public method
+      proxy.trigger = trigger;
+
       if (hasObserver === true) {
         let observer;
 
@@ -9655,9 +9680,6 @@
 
         vue.onBeforeUnmount(cleanup);
 
-        // expose public method
-        proxy.trigger = trigger;
-
         return () => {
           if (canRender.value === true) {
             return vue.h('object', {
@@ -10502,7 +10524,7 @@
                 if (
                   hardError === void 0 && (
                     softError === void 0
-                    || softError.message.startsWith('Avoided redundant navigation') === true
+                    || (softError.message !== void 0 && softError.message.startsWith('Avoided redundant navigation') === true)
                   )
                 ) {
                   $tabs.updateModel({ name: props.name });
@@ -11179,15 +11201,11 @@
         + (isDark.value === true ? ' q-color-picker--dark q-dark' : '')
       );
 
-      const attributes = vue.computed(() => {
-        if (props.disable === true) {
-          return { 'aria-disabled': 'true' }
-        }
-        if (props.readonly === true) {
-          return { 'aria-readonly': 'true' }
-        }
-        return {}
-      });
+      const attributes = vue.computed(() => (
+        props.disable === true
+          ? { 'aria-disabled': 'true' }
+          : {}
+      ));
 
       const spectrumDirective = vue.computed(() => {
         // if editable.value === true
@@ -13897,7 +13915,7 @@
       const attributes = vue.computed(() => (
         props.disable === true
           ? { 'aria-disabled': 'true' }
-          : (props.readonly === true ? { 'aria-readonly': 'true' } : {})
+          : {}
       ));
 
       vue.watch(() => props.modelValue, v => {
@@ -17545,7 +17563,7 @@
       const attributes = vue.computed(() => (
         props.disable === true
           ? { 'aria-disabled': 'true' }
-          : (props.readonly === true ? { 'aria-readonly': 'true' } : {})
+          : {}
       ));
 
       function onInput () {
@@ -18072,7 +18090,7 @@
       );
 
       const blurTargetRef = vue.ref(null);
-      const targetUid = uid$3();
+      const targetUid = useId();
 
       const { show, hide, toggle } = useModelToggle({ showing });
 
@@ -18140,7 +18158,7 @@
         return {
           role: 'button',
           'aria-expanded': showing.value === true ? 'true' : 'false',
-          'aria-controls': targetUid,
+          'aria-controls': targetUid.value,
           'aria-label': toggleAriaLabel
         }
       });
@@ -18317,7 +18335,7 @@
             key: 'e-content',
             class: 'q-expansion-item__content relative-position',
             style: contentStyle.value,
-            id: targetUid
+            id: targetUid.value
           }, hSlot(slots.default)),
           [ [
             vue.vShow,
@@ -18492,7 +18510,7 @@
     setup (props, { slots }) {
       const triggerRef = vue.ref(null);
       const showing = vue.ref(props.modelValue === true);
-      const targetUid = uid$3();
+      const targetUid = useId();
 
       const { proxy: { $q } } = vue.getCurrentInstance();
       const { formClass, labelProps } = useFab(props, showing);
@@ -18520,7 +18538,7 @@
 
       const actionAttrs = vue.computed(() => {
         const attrs = {
-          id: targetUid,
+          id: targetUid.value,
           role: 'menu'
         };
 
@@ -18592,7 +18610,7 @@
           fab: true,
           'aria-expanded': showing.value === true ? 'true' : 'false',
           'aria-haspopup': 'true',
-          'aria-controls': targetUid,
+          'aria-controls': targetUid.value,
           onClick: toggle
         }, getTriggerContent),
 
@@ -18744,6 +18762,7 @@
     reactiveRules: Boolean,
     lazyRules: {
       type: [ Boolean, String ],
+      default: false, // statement unneeded but avoids future vue implementation changes
       validator: v => lazyRulesValues.includes(v)
     }
   };
@@ -18753,7 +18772,7 @@
 
     const innerError = vue.ref(false);
     const innerErrorMessage = vue.ref(null);
-    const isDirtyModel = vue.ref(null);
+    const isDirtyModel = vue.ref(false);
 
     useFormChild({ validate, resetValidation });
 
@@ -18765,10 +18784,14 @@
       && props.rules.length !== 0
     );
 
-    const hasActiveRules = vue.computed(() =>
+    const canDebounceValidate = vue.computed(() => (
       props.disable !== true
       && hasRules.value === true
-    );
+      // Should not have a validation in progress already;
+      // It might mean that focus switched to submit btn and
+      // QForm's submit() has been called already (ENTER key)
+      && innerLoading.value === false
+    ));
 
     const hasError = vue.computed(() =>
       props.error === true || innerError.value === true
@@ -18781,15 +18804,31 @@
     ));
 
     vue.watch(() => props.modelValue, () => {
-      validateIfNeeded();
+      isDirtyModel.value = true;
+
+      if (
+        canDebounceValidate.value === true
+        // trigger validation if not using any kind of lazy-rules
+        && props.lazyRules === false
+      ) {
+        debouncedValidate();
+      }
     });
 
+    function onRulesChange () {
+      if (
+        props.lazyRules !== 'ondemand'
+        && canDebounceValidate.value === true
+        && isDirtyModel.value === true
+      ) {
+        debouncedValidate();
+      }
+    }
+
     vue.watch(() => props.reactiveRules, val => {
       if (val === true) {
         if (unwatchRules === void 0) {
-          unwatchRules = vue.watch(() => props.rules, () => {
-            validateIfNeeded(true);
-          });
+          unwatchRules = vue.watch(() => props.rules, onRulesChange, { immediate: true, deep: true });
         }
       }
       else if (unwatchRules !== void 0) {
@@ -18798,32 +18837,24 @@
       }
     }, { immediate: true });
 
+    vue.watch(() => props.lazyRules, onRulesChange);
+
     vue.watch(focused, val => {
       if (val === true) {
-        if (isDirtyModel.value === null) {
-          isDirtyModel.value = false;
-        }
-      }
-      else if (isDirtyModel.value === false) {
         isDirtyModel.value = true;
-
-        if (
-          hasActiveRules.value === true
-          && props.lazyRules !== 'ondemand'
-          // Don't re-trigger if it's already in progress;
-          // It might mean that focus switched to submit btn and
-          // QForm's submit() has been called already (ENTER key)
-          && innerLoading.value === false
-        ) {
-          debouncedValidate();
-        }
+      }
+      else if (
+        canDebounceValidate.value === true
+        && props.lazyRules !== 'ondemand'
+      ) {
+        debouncedValidate();
       }
     });
 
     function resetValidation () {
       validateIndex++;
       innerLoading.value = false;
-      isDirtyModel.value = null;
+      isDirtyModel.value = false;
       innerError.value = false;
       innerErrorMessage.value = null;
       debouncedValidate.cancel();
@@ -18836,7 +18867,10 @@
      *   - Promise (pending async validation)
      */
     function validate (val = props.modelValue) {
-      if (hasActiveRules.value !== true) {
+      if (
+        props.disable === true
+        || hasRules.value === false
+      ) {
         return true
       }
 
@@ -18905,16 +18939,6 @@
       )
     }
 
-    function validateIfNeeded (changedRules) {
-      if (
-        hasActiveRules.value === true
-        && props.lazyRules !== 'ondemand'
-        && (isDirtyModel.value === true || (props.lazyRules !== true && changedRules !== true))
-      ) {
-        debouncedValidate();
-      }
-    }
-
     const debouncedValidate = debounce(validate, 0);
 
     vue.onBeforeUnmount(() => {
@@ -18937,12 +18961,6 @@
     }
   }
 
-  function getTargetUid (val, requiredForAttr) {
-    return val === void 0
-      ? (requiredForAttr === true ? `f_${ uid$3() }` : void 0)
-      : val
-  }
-
   function fieldValueIsFilled (val) {
     return val !== void 0
       && val !== null
@@ -19003,6 +19021,7 @@
     const { props, attrs, proxy, vnode } = vue.getCurrentInstance();
 
     const isDark = useDark(props, proxy.$q);
+    const targetUid = useId(props.for, requiredForAttr);
 
     return {
       requiredForAttr,
@@ -19021,9 +19040,7 @@
       hasPopupOpen: false,
 
       splitAttrs: useSplitAttrs(attrs, vnode),
-      targetUid: vue.ref(
-        getTargetUid(props.for, requiredForAttr)
-      ),
+      targetUid,
 
       rootRef: vue.ref(null),
       targetRef: vue.ref(null),
@@ -19175,16 +19192,15 @@
     }));
 
     const attributes = vue.computed(() => {
-      const acc = {
-        for: state.targetUid.value
-      };
+      const acc = {};
+
+      if (state.targetUid.value) {
+        acc.for = state.targetUid.value;
+      }
 
       if (props.disable === true) {
         acc[ 'aria-disabled' ] = 'true';
       }
-      else if (props.readonly === true) {
-        acc[ 'aria-readonly' ] = 'true';
-      }
 
       return acc
     });
@@ -19192,7 +19208,7 @@
     vue.watch(() => props.for, val => {
       // don't transform targetUid into a computed
       // prop as it will break SSR
-      state.targetUid.value = getTargetUid(val, state.requiredForAttr);
+      state.targetUid.value = getId(val, state.requiredForAttr);
     });
 
     function focusHandler () {
@@ -19268,7 +19284,7 @@
         document.activeElement.blur();
       }
 
-      if (props.type === 'file') { // TODO vue3
+      if (props.type === 'file') {
         // do not let focus be triggered
         // as it will make the native file dialog
         // appear for another selection
@@ -19279,11 +19295,9 @@
       emit('clear', props.modelValue);
 
       vue.nextTick(() => {
+        const isDirty = isDirtyModel.value;
         resetValidation();
-
-        if ($q.platform.is.mobile !== true) {
-          isDirtyModel.value = false;
-        }
+        isDirtyModel.value = isDirty;
       });
     }
 
@@ -19476,16 +19490,8 @@
       shouldActivate === true && props.autofocus === true && proxy.focus();
     });
 
-    vue.onMounted(() => {
-      if (
-        isRuntimeSsrPreHydration.value === true
-        && state.requiredForAttr === true
-        && props.for === void 0
-      ) {
-        state.targetUid.value = `f_${ uid$3() }`; // getTargetUid(void 0, true)
-      }
-
-      props.autofocus === true && proxy.focus();
+    props.autofocus === true && vue.onMounted(() => {
+      proxy.focus();
     });
 
     vue.onBeforeUnmount(() => {
@@ -21264,7 +21270,7 @@
       const vm = vue.getCurrentInstance();
       Object.assign(vm.proxy, {
         poll: () => { poll !== void 0 && poll(); },
-        trigger, stop, reset, resume, setIndex
+        trigger, stop, reset, resume, setIndex, updateScrollTarget
       });
 
       return () => {
@@ -25613,15 +25619,15 @@
           case dragType.RANGE:
             const
               ratioDelta = ratio - dragging.offsetRatio,
-              minR = between(dragging.ratioMin + ratioDelta, 0, 1 - dragging.rangeRatio),
+              minR = between(dragging.ratioMin + ratioDelta, state.innerMinRatio.value, state.innerMaxRatio.value - dragging.rangeRatio),
               modelDelta = localModel - dragging.offsetModel,
-              min = between(dragging.valueMin + modelDelta, props.min, props.max - dragging.rangeValue);
+              min = between(dragging.valueMin + modelDelta, state.innerMin.value, state.innerMax.value - dragging.rangeValue);
 
             pos = {
               minR,
               maxR: minR + dragging.rangeRatio,
-              min: parseFloat(min.toFixed(state.decimals.value)),
-              max: parseFloat((min + dragging.rangeValue).toFixed(state.decimals.value))
+              min: state.roundValueFn.value(min),
+              max: state.roundValueFn.value(min + dragging.rangeValue)
             };
 
             state.focus.value = 'both';
@@ -25651,7 +25657,7 @@
         stopAndPrevent(evt);
 
         const
-          stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * state.step.value,
+          stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * state.keyStep.value,
           offset = (
             ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1)
             * (state.isReversed.value === true ? -1 : 1)
@@ -25661,14 +25667,14 @@
         if (state.focus.value === 'both') {
           const interval = model.value.max - model.value.min;
           const min = between(
-            parseFloat((model.value.min + offset).toFixed(state.decimals.value)),
+            state.roundValueFn.value(model.value.min + offset),
             state.innerMin.value,
             state.innerMax.value - interval
           );
 
           model.value = {
             min,
-            max: parseFloat((min + interval).toFixed(state.decimals.value))
+            max: state.roundValueFn.value(min + interval)
           };
         }
         else if (state.focus.value === false) {
@@ -25680,7 +25686,7 @@
           model.value = {
             ...model.value,
             [ which ]: between(
-              parseFloat((model.value[ which ] + offset).toFixed(state.decimals.value)),
+              state.roundValueFn.value(model.value[ which ] + offset),
               which === 'min' ? state.innerMin.value : model.value.min,
               which === 'max' ? state.innerMax.value : model.value.max
             )
@@ -39816,6 +39822,7 @@
   const positionClass = {};
   const emptyRE = /^\s*$/;
   const notifRefs = [];
+  const invalidTimeoutValues = [ void 0, null, true, false, '' ];
 
   const positionList = [
     'top-left', 'top-right',
@@ -39909,15 +39916,15 @@
       notif.position = 'bottom';
     }
 
-    if (notif.timeout === void 0) {
+    if (invalidTimeoutValues.includes(notif.timeout) === true) {
       notif.timeout = 5000;
     }
     else {
-      const t = parseInt(notif.timeout, 10);
+      const t = Number(notif.timeout); // we catch exponential notation too with Number() casting
       if (isNaN(t) || t < 0) {
         return logError('wrong timeout', config)
       }
-      notif.timeout = t;
+      notif.timeout = Number.isFinite(t) ? t : 0;
     }
 
     if (notif.timeout === 0) {
@@ -41041,7 +41048,7 @@
    */
 
   var index_umd = {
-    version: '2.14.1',
+    version: '2.14.3',
     install (app, opts) {
       installQuasar(app, {
         components,