quasar 2.14.0 → 2.14.2

package/dist/quasar.sass

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

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.14.0
+ * Quasar Framework v2.14.2
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1653,7 +1653,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.14.0' };
+      const $q = { version: '2.14.2' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -3850,7 +3850,7 @@
         props.icon !== void 0 && inner.push(
           vue.h(QIcon, {
             name: props.icon,
-            left: props.stack === false && hasLabel.value === true,
+            left: props.stack !== true && hasLabel.value === true,
             role: 'img',
             'aria-hidden': 'true'
           })
@@ -3866,7 +3866,7 @@
           inner.push(
             vue.h(QIcon, {
               name: props.iconRight,
-              right: props.stack === false && hasLabel.value === true,
+              right: props.stack !== true && hasLabel.value === true,
               role: 'img',
               'aria-hidden': 'true'
             })
@@ -8200,11 +8200,16 @@
 
       const normalized = vue.computed(() => between(props.value, props.min, props.max));
 
-      const strokeDashOffset = vue.computed(() => circumference * (
-        1 - (normalized.value - props.min) / (props.max - props.min)
-      ));
-
+      const range = vue.computed(() => props.max - props.min);
       const strokeWidth = vue.computed(() => props.thickness / 2 * viewBox.value);
+      const strokeDashOffset = vue.computed(() => {
+        const dashRatio = (props.max - normalized.value) / range.value;
+        const dashGap = props.rounded === true && normalized.value < props.max && dashRatio < 0.25
+          ? strokeWidth.value / 2 * (1 - dashRatio / 0.25)
+          : 0;
+
+        return circumference * dashRatio + dashGap
+      });
 
       function getCircle ({ thickness, offset, color, cls, rounded }) {
         return vue.h('circle', {
@@ -8832,8 +8837,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);
@@ -8941,13 +8954,11 @@
       let model = min + ratio * (max - min);
 
       if (step > 0) {
-        const modulo = (model - min) % step;
+        const modulo = (model - innerMin.value) % step;
         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)
     }
@@ -8973,7 +8984,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(() => {
@@ -9333,8 +9344,8 @@
         tabindex,
         attributes,
 
-        step,
-        decimals,
+        roundValueFn,
+        keyStep,
         trackLen,
         innerMin,
         innerMinRatio,
@@ -9480,7 +9491,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)
@@ -9488,7 +9499,7 @@
           );
 
         model.value = between(
-          parseFloat((model.value + offset).toFixed(state.decimals.value)),
+          state.roundValueFn.value(model.value + offset),
           state.innerMin.value,
           state.innerMax.value
         );
@@ -9577,6 +9588,9 @@
 
       const { proxy } = vue.getCurrentInstance();
 
+      // expose public method
+      proxy.trigger = trigger;
+
       if (hasObserver === true) {
         let observer;
 
@@ -9650,9 +9664,6 @@
 
         vue.onBeforeUnmount(cleanup);
 
-        // expose public method
-        proxy.trigger = trigger;
-
         return () => {
           if (canRender.value === true) {
             return vue.h('object', {
@@ -11174,15 +11185,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
@@ -13892,7 +13899,7 @@
       const attributes = vue.computed(() => (
         props.disable === true
           ? { 'aria-disabled': 'true' }
-          : (props.readonly === true ? { 'aria-readonly': 'true' } : {})
+          : {}
       ));
 
       vue.watch(() => props.modelValue, v => {
@@ -13926,10 +13933,22 @@
       });
 
       function setToday () {
-        const date = today.value;
-        const month = daysMap.value[ getMonthHash(date) ];
+        const { year, month, day } = today.value;
+
+        const date = {
+          // contains more props than needed (hour, minute, second, millisecond)
+          // but those aren't used in the processing of this "date" variable
+          ...viewModel.value,
 
-        if (month === void 0 || month.includes(date.day) === false) {
+          // overwriting with today's date
+          year,
+          month,
+          day
+        };
+
+        const monthMap = daysMap.value[ getMonthHash(date) ];
+
+        if (monthMap === void 0 || monthMap.includes(date.day) === false) {
           addToModel(date);
         }
 
@@ -17528,7 +17547,7 @@
       const attributes = vue.computed(() => (
         props.disable === true
           ? { 'aria-disabled': 'true' }
-          : (props.readonly === true ? { 'aria-readonly': 'true' } : {})
+          : {}
       ));
 
       function onInput () {
@@ -18727,6 +18746,7 @@
     reactiveRules: Boolean,
     lazyRules: {
       type: [ Boolean, String ],
+      default: false, // statement unneeded but avoids future vue implementation changes
       validator: v => lazyRulesValues.includes(v)
     }
   };
@@ -18748,10 +18768,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
@@ -18764,15 +18788,29 @@
     ));
 
     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();
+      }
     });
 
     vue.watch(() => props.reactiveRules, val => {
       if (val === true) {
         if (unwatchRules === void 0) {
           unwatchRules = vue.watch(() => props.rules, () => {
-            validateIfNeeded(true);
-          });
+            if (
+              canDebounceValidate.value === true
+              && isDirtyModel.value === true
+              && props.lazyRules !== 'ondemand'
+            ) {
+              debouncedValidate();
+            }
+          }, { immediate: true });
         }
       }
       else if (unwatchRules !== void 0) {
@@ -18781,25 +18819,32 @@
       }
     }, { immediate: true });
 
+    vue.watch(() => props.lazyRules, val => {
+      if (
+        val === false
+        && canDebounceValidate.value === true
+        && isDirtyModel.value === true
+      ) {
+        debouncedValidate();
+      }
+    });
+
     vue.watch(focused, val => {
       if (val === true) {
         if (isDirtyModel.value === null) {
-          isDirtyModel.value = false;
+          isDirtyModel.value = props.lazyRules === true;
         }
       }
-      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 can also be 'ondemand',
+          // hence the following form:
+          props.lazyRules === false
+          || (props.lazyRules === true && isDirtyModel.value === true)
+        )
+      ) {
+        debouncedValidate();
       }
     });
 
@@ -18819,7 +18864,10 @@
      *   - Promise (pending async validation)
      */
     function validate (val = props.modelValue) {
-      if (hasActiveRules.value !== true) {
+      if (
+        props.disable === true
+        || hasRules.value === false
+      ) {
         return true
       }
 
@@ -18888,16 +18936,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(() => {
@@ -19165,9 +19203,6 @@
       if (props.disable === true) {
         acc[ 'aria-disabled' ] = 'true';
       }
-      else if (props.readonly === true) {
-        acc[ 'aria-readonly' ] = 'true';
-      }
 
       return acc
     });
@@ -25596,15 +25631,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';
@@ -25634,7 +25669,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)
@@ -25644,14 +25679,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) {
@@ -25663,7 +25698,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
             )
@@ -27516,11 +27551,12 @@
 
         return props.options.slice(from, to).map((opt, i) => {
           const disable = isOptionDisabled.value(opt) === true;
+          const active = isOptionSelected(opt) === true;
           const index = from + i;
 
           const itemProps = {
             clickable: true,
-            active: false,
+            active,
             activeClass: computedOptionsSelectedClass.value,
             manualFocus: true,
             focused: false,
@@ -27529,16 +27565,14 @@
             dense: props.optionsDense,
             dark: isOptionsDark.value,
             role: 'option',
+            'aria-selected': active === true ? 'true' : 'false',
             id: `${ state.targetUid.value }_${ index }`,
             onClick: () => { toggleOption(opt); }
           };
 
           if (disable !== true) {
-            isOptionSelected(opt) === true && (itemProps.active = true);
             optionIndex.value === index && (itemProps.focused = true);
 
-            itemProps[ 'aria-selected' ] = itemProps.active === true ? 'true' : 'false';
-
             if ($q.platform.is.desktop === true) {
               itemProps.onMousemove = () => { menu.value === true && setOptionIndex(index); };
             }
@@ -39800,6 +39834,7 @@
   const positionClass = {};
   const emptyRE = /^\s*$/;
   const notifRefs = [];
+  const invalidTimeoutValues = [ void 0, null, true, false, '' ];
 
   const positionList = [
     'top-left', 'top-right',
@@ -39893,15 +39928,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) {
@@ -41025,7 +41060,7 @@
    */
 
   var index_umd = {
-    version: '2.14.0',
+    version: '2.14.2',
     install (app, opts) {
       installQuasar(app, {
         components,