quasar 2.14.0 → 2.14.2

package/dist/types/index.d.ts

@@ -12810,10 +12810,13 @@ export interface QTimeProps {
    * @param hr Hour
    * @param min Minutes
    * @param sec Seconds
+   * @returns Is the user allowed to set the specified time?
    */
-  options?:
-    | ((hr: number, min: number | null, sec: number | null) => void)
-    | undefined;
+  options?: (
+    hr: number,
+    min: number | null,
+    sec: number | null
+  ) => boolean | null | undefined;
   /**
    * Optionally configure what hours is the user allowed to set; Overrides 'options' prop if that is also set
    */
@@ -14513,7 +14516,7 @@ export interface QNotifyCreateOptions {
    */
   attrs?: any;
   /**
-   * Amount of time to display (in milliseconds)
+   * Amount of time to display (in milliseconds). Set to 0 to never dismiss automatically.
    * Default value: 5000
    */
   timeout?: number;
@@ -15527,7 +15530,7 @@ declare module "./config.d.ts" {
        */
       attrs?: any;
       /**
-       * Amount of time to display (in milliseconds)
+       * Amount of time to display (in milliseconds). Set to 0 to never dismiss automatically.
        * Default value: 5000
        */
       timeout?: number;

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.14.0",
+  "version": "2.14.2",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/lang/ms.js

@@ -25,7 +25,7 @@ module.exports = {
   },
   date: {
     days: 'Ahad_Isnin_Selasa_Rabu_Khamis_Jummat_Sabtu'.split('_'),
-    daysShort: 'Ahad_Isnin_Selasa_Rabu_Khamis_Jummat_Sabtu'.split('_'),
+    daysShort: 'Aha_Isn_Sel_Rab_Kha_Jum_Sab'.split('_'),
     months: 'Januari_Februari_Mac_April_Mei_Jun_Julai_Ogos_Oktober_November_Disember'.split('_'),
     monthsShort: 'Jan_Feb_Mac_Apr_Mei_Jun_Jul_Ogos_Sep_Okt_Nov_Dis'.split('_'),
     firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...

package/lang/ms.mjs

@@ -20,7 +20,7 @@ export default {
   },
   date: {
     days: 'Ahad_Isnin_Selasa_Rabu_Khamis_Jummat_Sabtu'.split('_'),
-    daysShort: 'Ahad_Isnin_Selasa_Rabu_Khamis_Jummat_Sabtu'.split('_'),
+    daysShort: 'Aha_Isn_Sel_Rab_Kha_Jum_Sab'.split('_'),
     months: 'Januari_Februari_Mac_April_Mei_Jun_Julai_Ogos_Oktober_November_Disember'.split('_'),
     monthsShort: 'Jan_Feb_Mac_Apr_Mei_Jun_Jul_Ogos_Sep_Okt_Nov_Dis'.split('_'),
     firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.14.0",
+  "version": "2.14.2",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",

package/src/components/btn/QBtn.js

@@ -297,7 +297,7 @@ export default createComponent({
       props.icon !== void 0 && inner.push(
         h(QIcon, {
           name: props.icon,
-          left: props.stack === false && hasLabel.value === true,
+          left: props.stack !== true && hasLabel.value === true,
           role: 'img',
           'aria-hidden': 'true'
         })
@@ -313,7 +313,7 @@ export default createComponent({
         inner.push(
           h(QIcon, {
             name: props.iconRight,
-            right: props.stack === false && hasLabel.value === true,
+            right: props.stack !== true && hasLabel.value === true,
             role: 'img',
             'aria-hidden': 'true'
           })

package/src/components/circular-progress/QCircularProgress.js

@@ -60,11 +60,16 @@ export default createComponent({
 
     const normalized = computed(() => between(props.value, props.min, props.max))
 
-    const strokeDashOffset = computed(() => circumference * (
-      1 - (normalized.value - props.min) / (props.max - props.min)
-    ))
-
+    const range = computed(() => props.max - props.min)
     const strokeWidth = computed(() => props.thickness / 2 * viewBox.value)
+    const strokeDashOffset = 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 h('circle', {

package/src/components/color/QColor.js

@@ -176,15 +176,11 @@ export default 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

package/src/components/date/QDate.js

@@ -694,7 +694,7 @@ export default createComponent({
     const attributes = computed(() => (
       props.disable === true
         ? { 'aria-disabled': 'true' }
-        : (props.readonly === true ? { 'aria-readonly': 'true' } : {})
+        : {}
     ))
 
     watch(() => props.modelValue, v => {
@@ -728,10 +728,22 @@ export default createComponent({
     })
 
     function setToday () {
-      const date = today.value
-      const month = daysMap.value[ getMonthHash(date) ]
+      const { year, month, day } = today.value
 
-      if (month === void 0 || month.includes(date.day) === false) {
+      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,
+
+        // 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)
       }
 

package/src/components/editor/QEditor.js

@@ -323,7 +323,7 @@ export default createComponent({
     const attributes = computed(() => (
       props.disable === true
         ? { 'aria-disabled': 'true' }
-        : (props.readonly === true ? { 'aria-readonly': 'true' } : {})
+        : {}
     ))
 
     function onInput () {

package/src/components/range/QRange.js

@@ -288,15 +288,15 @@ export default 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'
@@ -326,7 +326,7 @@ export default 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)
@@ -336,14 +336,14 @@ export default 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) {
@@ -355,7 +355,7 @@ export default 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
           )

package/src/components/resize-observer/QResizeObserver.js

@@ -57,6 +57,9 @@ export default createComponent({
 
     const { proxy } = getCurrentInstance()
 
+    // expose public method
+    proxy.trigger = trigger
+
     if (hasObserver === true) {
       let observer
 
@@ -130,9 +133,6 @@ export default createComponent({
 
       onBeforeUnmount(cleanup)
 
-      // expose public method
-      proxy.trigger = trigger
-
       return () => {
         if (canRender.value === true) {
           return h('object', {

package/src/components/select/QSelect.js

@@ -319,11 +319,12 @@ export default createComponent({
 
       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,
@@ -332,16 +333,14 @@ export default createComponent({
           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) }
           }

package/src/components/slider/QSlider.js

@@ -133,7 +133,7 @@ export default 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)
@@ -141,7 +141,7 @@ export default createComponent({
         )
 
       model.value = between(
-        parseFloat((model.value + offset).toFixed(state.decimals.value)),
+        state.roundValueFn.value(model.value + offset),
         state.innerMin.value,
         state.innerMax.value
       )

package/src/components/slider/use-slider.js

@@ -129,8 +129,16 @@ export default function ({ 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)
@@ -238,13 +246,11 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
     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)
   }
@@ -270,7 +276,7 @@ export default function ({ 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(() => {
@@ -630,8 +636,8 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
       tabindex,
       attributes,
 
-      step,
-      decimals,
+      roundValueFn,
+      keyStep,
       trackLen,
       innerMin,
       innerMinRatio,

package/src/components/time/QTime.json

@@ -55,7 +55,10 @@
           "desc": "Seconds"
         }
       },
-      "returns": null,
+      "returns": {
+        "type": [ "Boolean", "null", "undefined" ],
+        "desc": "Is the user allowed to set the specified time?"
+      },
       "examples": [
         ":options=\"(hr, min, sec) => hr <= 6\""
       ],

package/src/composables/private/use-field.js

@@ -259,9 +259,6 @@ export default function (state) {
     if (props.disable === true) {
       acc[ 'aria-disabled' ] = 'true'
     }
-    else if (props.readonly === true) {
-      acc[ 'aria-readonly' ] = 'true'
-    }
 
     return acc
   })

package/src/composables/private/use-validate.js

@@ -21,6 +21,7 @@ export const useValidateProps = {
   reactiveRules: Boolean,
   lazyRules: {
     type: [ Boolean, String ],
+    default: false, // statement unneeded but avoids future vue implementation changes
     validator: v => lazyRulesValues.includes(v)
   }
 }
@@ -42,10 +43,14 @@ export default function (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
@@ -58,15 +63,29 @@ export default function (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()
+    }
   })
 
   watch(() => props.reactiveRules, val => {
     if (val === true) {
       if (unwatchRules === void 0) {
         unwatchRules = watch(() => props.rules, () => {
-          validateIfNeeded(true)
-        })
+          if (
+            canDebounceValidate.value === true
+            && isDirtyModel.value === true
+            && props.lazyRules !== 'ondemand'
+          ) {
+            debouncedValidate()
+          }
+        }, { immediate: true })
       }
     }
     else if (unwatchRules !== void 0) {
@@ -75,25 +94,32 @@ export default function (focused, innerLoading) {
     }
   }, { immediate: true })
 
+  watch(() => props.lazyRules, val => {
+    if (
+      val === false
+      && canDebounceValidate.value === true
+      && isDirtyModel.value === true
+    ) {
+      debouncedValidate()
+    }
+  })
+
   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()
     }
   })
 
@@ -113,7 +139,10 @@ export default function (focused, innerLoading) {
    *   - Promise (pending async validation)
    */
   function validate (val = props.modelValue) {
-    if (hasActiveRules.value !== true) {
+    if (
+      props.disable === true
+      || hasRules.value === false
+    ) {
       return true
     }
 
@@ -182,16 +211,6 @@ export default function (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(() => {

package/src/plugins/Notify.js

@@ -19,6 +19,7 @@ const notificationsList = {}
 const positionClass = {}
 const emptyRE = /^\s*$/
 const notifRefs = []
+const invalidTimeoutValues = [ void 0, null, true, false, '' ]
 
 const positionList = [
   'top-left', 'top-right',
@@ -112,15 +113,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) {

package/src/plugins/Notify.json

@@ -166,7 +166,7 @@
 
       "timeout": {
         "type": "Number",
-        "desc": "Amount of time to display (in milliseconds)",
+        "desc": "Amount of time to display (in milliseconds). Set to 0 to never dismiss automatically.",
         "default": 5000
       },
 
@@ -392,7 +392,7 @@
 
             "timeout": {
               "type": "Number",
-              "desc": "Amount of time to display (in milliseconds)",
+              "desc": "Amount of time to display (in milliseconds). Set to 0 to never dismiss automatically.",
               "default": 5000,
               "examples": [ 2500 ]
             },