quasar 2.14.1 → 2.14.3

package/dist/quasar.esm.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.
  */
@@ -796,36 +796,13 @@ const Plugin$9 = defineReactivePlugin({
     }
   },
 
-  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);
     }
   }
 });
@@ -1651,7 +1628,7 @@ function prepareApp (app, uiOpts, pluginOpts) {
 }
 
 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) {
@@ -1915,13 +1892,23 @@ var QAjaxBar = createComponent({
 
       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;
       }
@@ -2280,13 +2267,13 @@ var QIcon = createComponent({
       }
 
       if (type.value.img === true) {
-        return h('span', data, hMergeSlot(slots.default, [
+        return h(props.tag, data, hMergeSlot(slots.default, [
           h('img', { src: type.value.src })
         ]))
       }
 
       if (type.value.svg === true) {
-        return h('span', data, hMergeSlot(slots.default, [
+        return h(props.tag, data, hMergeSlot(slots.default, [
           h('svg', {
             viewBox: type.value.viewBox || '0 0 24 24'
           }, type.value.nodes)
@@ -2294,7 +2281,7 @@ var QIcon = createComponent({
       }
 
       if (type.value.svguse === true) {
-        return h('span', data, hMergeSlot(slots.default, [
+        return h(props.tag, data, hMergeSlot(slots.default, [
           h('svg', {
             viewBox: type.value.viewBox
           }, [
@@ -5862,6 +5849,35 @@ function uid$3 () {
     + 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 = ref(initialId);
+
+    if (requiredId === true && initialId === void 0) {
+      onMounted(() => {
+        id.value = `f_${ uid$3() }`; // getId(void 0, true)
+      });
+    }
+
+    return id
+  }
+
+  return ref(
+    getId(initialId, requiredId)
+  )
+}
+
 const btnPropsList = Object.keys(useBtnProps);
 
 const passBtnProps = props => btnPropsList.reduce(
@@ -5919,13 +5935,13 @@ var QBtnDropdown = createComponent({
 
     const showing = ref(props.modelValue);
     const menuRef = ref(null);
-    const targetUid = uid$3();
+    const targetUid = useId();
 
     const ariaAttrs = 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)
       };
 
@@ -6019,7 +6035,7 @@ var QBtnDropdown = createComponent({
       props.disableDropdown !== true && Arrow.push(
         h(QMenu, {
           ref: menuRef,
-          id: targetUid,
+          id: targetUid.value,
           class: props.contentClass,
           style: props.contentStyle,
           cover: props.cover,
@@ -8835,8 +8851,16 @@ function useSlider ({ updateValue, updatePosition, getDragging, formAttrs }) {
     && innerMin.value < innerMax.value
   ));
 
-  const decimals = computed(() => (String(props.step).trim().split('.')[ 1 ] || '').length);
-  const step = computed(() => (props.step === 0 ? 1 : props.step));
+  const roundValueFn = 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 = computed(() => (props.step === 0 ? 1 : props.step));
   const tabindex = computed(() => (editable.value === true ? props.tabindex || 0 : -1));
 
   const trackLen = computed(() => props.max - props.min);
@@ -8948,9 +8972,7 @@ function useSlider ({ updateValue, updatePosition, getDragging, formAttrs }) {
       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)
   }
@@ -8976,7 +8998,7 @@ function useSlider ({ updateValue, updatePosition, getDragging, formAttrs }) {
   }
 
   const markerStep = computed(() => (
-    isNumber(props.markers) === true ? props.markers : step.value)
+    isNumber(props.markers) === true ? props.markers : keyStep.value)
   );
 
   const markerTicks = computed(() => {
@@ -9336,8 +9358,8 @@ function useSlider ({ updateValue, updatePosition, getDragging, formAttrs }) {
       tabindex,
       attributes,
 
-      step,
-      decimals,
+      roundValueFn,
+      keyStep,
       trackLen,
       innerMin,
       innerMinRatio,
@@ -9483,7 +9505,7 @@ var QSlider = createComponent({
       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)
@@ -9491,7 +9513,7 @@ var QSlider = createComponent({
         );
 
       model.value = between(
-        parseFloat((model.value + offset).toFixed(state.decimals.value)),
+        state.roundValueFn.value(model.value + offset),
         state.innerMin.value,
         state.innerMax.value
       );
@@ -9580,6 +9602,9 @@ var QResizeObserver = createComponent({
 
     const { proxy } = getCurrentInstance();
 
+    // expose public method
+    proxy.trigger = trigger;
+
     if (hasObserver === true) {
       let observer;
 
@@ -9653,9 +9678,6 @@ var QResizeObserver = createComponent({
 
       onBeforeUnmount(cleanup);
 
-      // expose public method
-      proxy.trigger = trigger;
-
       return () => {
         if (canRender.value === true) {
           return h('object', {
@@ -10500,7 +10522,7 @@ function useTab (props, slots, emit, routeData) {
               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 });
@@ -11177,15 +11199,11 @@ var QColor = createComponent({
       + (isDark.value === true ? ' q-color-picker--dark q-dark' : '')
     );
 
-    const attributes = computed(() => {
-      if (props.disable === true) {
-        return { 'aria-disabled': 'true' }
-      }
-      if (props.readonly === true) {
-        return { 'aria-readonly': 'true' }
-      }
-      return {}
-    });
+    const attributes = computed(() => (
+      props.disable === true
+        ? { 'aria-disabled': 'true' }
+        : {}
+    ));
 
     const spectrumDirective = computed(() => {
       // if editable.value === true
@@ -13895,7 +13913,7 @@ var QDate = createComponent({
     const attributes = computed(() => (
       props.disable === true
         ? { 'aria-disabled': 'true' }
-        : (props.readonly === true ? { 'aria-readonly': 'true' } : {})
+        : {}
     ));
 
     watch(() => props.modelValue, v => {
@@ -17543,7 +17561,7 @@ var QEditor = createComponent({
     const attributes = computed(() => (
       props.disable === true
         ? { 'aria-disabled': 'true' }
-        : (props.readonly === true ? { 'aria-readonly': 'true' } : {})
+        : {}
     ));
 
     function onInput () {
@@ -18070,7 +18088,7 @@ var QExpansionItem = createComponent({
     );
 
     const blurTargetRef = ref(null);
-    const targetUid = uid$3();
+    const targetUid = useId();
 
     const { show, hide, toggle } = useModelToggle({ showing });
 
@@ -18138,7 +18156,7 @@ var QExpansionItem = createComponent({
       return {
         role: 'button',
         'aria-expanded': showing.value === true ? 'true' : 'false',
-        'aria-controls': targetUid,
+        'aria-controls': targetUid.value,
         'aria-label': toggleAriaLabel
       }
     });
@@ -18315,7 +18333,7 @@ var QExpansionItem = createComponent({
           key: 'e-content',
           class: 'q-expansion-item__content relative-position',
           style: contentStyle.value,
-          id: targetUid
+          id: targetUid.value
         }, hSlot(slots.default)),
         [ [
           vShow,
@@ -18490,7 +18508,7 @@ var QFab = createComponent({
   setup (props, { slots }) {
     const triggerRef = ref(null);
     const showing = ref(props.modelValue === true);
-    const targetUid = uid$3();
+    const targetUid = useId();
 
     const { proxy: { $q } } = getCurrentInstance();
     const { formClass, labelProps } = useFab(props, showing);
@@ -18518,7 +18536,7 @@ var QFab = createComponent({
 
     const actionAttrs = computed(() => {
       const attrs = {
-        id: targetUid,
+        id: targetUid.value,
         role: 'menu'
       };
 
@@ -18590,7 +18608,7 @@ var QFab = createComponent({
         fab: true,
         'aria-expanded': showing.value === true ? 'true' : 'false',
         'aria-haspopup': 'true',
-        'aria-controls': targetUid,
+        'aria-controls': targetUid.value,
         onClick: toggle
       }, getTriggerContent),
 
@@ -18742,6 +18760,7 @@ const useValidateProps = {
   reactiveRules: Boolean,
   lazyRules: {
     type: [ Boolean, String ],
+    default: false, // statement unneeded but avoids future vue implementation changes
     validator: v => lazyRulesValues.includes(v)
   }
 };
@@ -18751,7 +18770,7 @@ function useValidate (focused, innerLoading) {
 
   const innerError = ref(false);
   const innerErrorMessage = ref(null);
-  const isDirtyModel = ref(null);
+  const isDirtyModel = ref(false);
 
   useFormChild({ validate, resetValidation });
 
@@ -18763,10 +18782,14 @@ function useValidate (focused, innerLoading) {
     && props.rules.length !== 0
   );
 
-  const hasActiveRules = computed(() =>
+  const canDebounceValidate = 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 = computed(() =>
     props.error === true || innerError.value === true
@@ -18779,15 +18802,31 @@ function useValidate (focused, innerLoading) {
   ));
 
   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();
+    }
+  }
+
   watch(() => props.reactiveRules, val => {
     if (val === true) {
       if (unwatchRules === void 0) {
-        unwatchRules = watch(() => props.rules, () => {
-          validateIfNeeded(true);
-        });
+        unwatchRules = watch(() => props.rules, onRulesChange, { immediate: true, deep: true });
       }
     }
     else if (unwatchRules !== void 0) {
@@ -18796,32 +18835,24 @@ function useValidate (focused, innerLoading) {
     }
   }, { immediate: true });
 
+  watch(() => props.lazyRules, onRulesChange);
+
   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();
@@ -18834,7 +18865,10 @@ function useValidate (focused, innerLoading) {
    *   - Promise (pending async validation)
    */
   function validate (val = props.modelValue) {
-    if (hasActiveRules.value !== true) {
+    if (
+      props.disable === true
+      || hasRules.value === false
+    ) {
       return true
     }
 
@@ -18903,16 +18937,6 @@ function useValidate (focused, innerLoading) {
     )
   }
 
-  function validateIfNeeded (changedRules) {
-    if (
-      hasActiveRules.value === true
-      && props.lazyRules !== 'ondemand'
-      && (isDirtyModel.value === true || (props.lazyRules !== true && changedRules !== true))
-    ) {
-      debouncedValidate();
-    }
-  }
-
   const debouncedValidate = debounce(validate, 0);
 
   onBeforeUnmount(() => {
@@ -18935,12 +18959,6 @@ function useValidate (focused, innerLoading) {
   }
 }
 
-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
@@ -19001,6 +19019,7 @@ function useFieldState ({ requiredForAttr = true, tagProp } = {}) {
   const { props, attrs, proxy, vnode } = getCurrentInstance();
 
   const isDark = useDark(props, proxy.$q);
+  const targetUid = useId(props.for, requiredForAttr);
 
   return {
     requiredForAttr,
@@ -19019,9 +19038,7 @@ function useFieldState ({ requiredForAttr = true, tagProp } = {}) {
     hasPopupOpen: false,
 
     splitAttrs: useSplitAttrs(attrs, vnode),
-    targetUid: ref(
-      getTargetUid(props.for, requiredForAttr)
-    ),
+    targetUid,
 
     rootRef: ref(null),
     targetRef: ref(null),
@@ -19173,16 +19190,15 @@ function useField (state) {
   }));
 
   const attributes = 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
   });
@@ -19190,7 +19206,7 @@ function useField (state) {
   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 () {
@@ -19266,7 +19282,7 @@ function useField (state) {
       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
@@ -19277,11 +19293,9 @@ function useField (state) {
     emit('clear', props.modelValue);
 
     nextTick(() => {
+      const isDirty = isDirtyModel.value;
       resetValidation();
-
-      if ($q.platform.is.mobile !== true) {
-        isDirtyModel.value = false;
-      }
+      isDirtyModel.value = isDirty;
     });
   }
 
@@ -19474,16 +19488,8 @@ function useField (state) {
     shouldActivate === true && props.autofocus === true && proxy.focus();
   });
 
-  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 && onMounted(() => {
+    proxy.focus();
   });
 
   onBeforeUnmount(() => {
@@ -21267,7 +21273,7 @@ var QInfiniteScroll = createComponent({
     const vm = getCurrentInstance();
     Object.assign(vm.proxy, {
       poll: () => { poll !== void 0 && poll(); },
-      trigger, stop, reset, resume, setIndex
+      trigger, stop, reset, resume, setIndex, updateScrollTarget
     });
 
     return () => {
@@ -25616,15 +25622,15 @@ var QRange = createComponent({
         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';
@@ -25654,7 +25660,7 @@ var QRange = createComponent({
       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)
@@ -25664,14 +25670,14 @@ var QRange = createComponent({
       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) {
@@ -25683,7 +25689,7 @@ var QRange = createComponent({
         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
           )
@@ -39685,6 +39691,7 @@ const notificationsList = {};
 const positionClass = {};
 const emptyRE = /^\s*$/;
 const notifRefs = [];
+const invalidTimeoutValues = [ void 0, null, true, false, '' ];
 
 const positionList = [
   'top-left', 'top-right',
@@ -39778,15 +39785,15 @@ function addNotification (config, $q, originalApi) {
     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) {
@@ -40854,7 +40861,7 @@ function runSequentialPromises (
  */
 
 const Quasar = {
-  version: '2.14.1',
+  version: '2.14.3',
   install: installQuasar,
   lang: Plugin$8,
   iconSet: Plugin$7