quasar 2.5.1 → 2.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.5.1",
+  "version": "2.5.5",
   "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/api-file-example.json

@@ -63,7 +63,7 @@
       "desc": "Emitted on QChip click if 'clickable' property is set",
       "params": {
         "evt": {
-          "type": "Object",
+          "type": "Event",
           "desc": "JS event object"
         }
       }
@@ -83,7 +83,7 @@
     "hide": {
       "params": {
         "evt": {
-          "type": "Object",
+          "type": "Event",
           "required": false,
           "desc": "JS event object"
         }

package/src/api.extends.json

@@ -47,7 +47,7 @@
 
     "icon": {
       "type": "String",
-      "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix",
+      "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)",
       "examples": [
         "map",
         "ion-add",
@@ -139,6 +139,11 @@
       "default": true,
       "examples": [ false, "{ early: true, center: true, color: 'teal', keyCodes: [] }" ],
       "category": "style"
+    },
+
+    "evt": {
+      "type": "Event",
+      "desc": "JS event object"
     }
   },
 
@@ -165,10 +170,8 @@
       "desc": "Emitted after component has triggered show()",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "required": true
         }
       }
     },
@@ -177,10 +180,8 @@
       "desc": "Emitted when component triggers show() but before it finishes doing it",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "required": true
         }
       }
     },
@@ -193,10 +194,8 @@
       "desc": "Emitted after component has triggered hide()",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "required": true
         }
       }
     },
@@ -205,10 +204,8 @@
       "desc": "Emitted when component triggers hide() but before it finishes doing it",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "required": true
         }
       }
     },
@@ -221,10 +218,8 @@
       "desc": "Emitted when user clicks/taps on the component",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "required": true
         }
       }
     }
@@ -235,10 +230,8 @@
       "desc": "Triggers component to show",
       "params": {
         "evt": {
-          "type": "Object",
-          "required": false,
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "required": false
         }
       }
     },
@@ -247,10 +240,8 @@
       "desc": "Triggers component to hide",
       "params": {
         "evt": {
-          "type": "Object",
-          "required": false,
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "required": false
         }
       }
     },
@@ -258,10 +249,8 @@
     "toggle": {
       "params": {
         "evt": {
-          "type": "Object",
-          "required": false,
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "required": false
         }
       },
       "desc": "Triggers component to toggle between show/hide"

package/src/components/btn/QBtn.json

@@ -41,9 +41,7 @@
       "desc": "Emulate click on QBtn",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     }
@@ -54,9 +52,8 @@
       "desc": "Emitted when component is clicked (activated)",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object; If you want to cancel navigation set synchronously 'evt.navigate' to false",
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "desc": "JS event object; If you want to cancel navigation set synchronously 'evt.navigate' to false"
         },
         "navigateFn": {
           "type": "Function",

package/src/components/carousel/QCarousel.json

@@ -144,10 +144,8 @@
           "desc": "Default trigger when clicked/tapped on",
           "params": {
             "evt": {
-              "type": "Object",
-              "desc": "JS event object",
-              "required": true,
-              "__exemption": [ "examples" ]
+              "extends": "evt",
+              "required": true
             }
           },
           "returns": null

package/src/components/checkbox/use-checkbox.json

@@ -122,10 +122,8 @@
           "__exemption": [ "examples" ]
         },
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "required": true
         }
       }
     }

package/src/components/chip/QChip.json

@@ -115,9 +115,7 @@
       "desc": "Emitted on QChip click if 'clickable' property is set",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     },

package/src/components/date/QDate.js

@@ -12,6 +12,7 @@ import { hSlot } from '../../utils/private/render.js'
 import { formatDate, __splitDate, getDateDiff } from '../../utils/date.js'
 import { pad } from '../../utils/format.js'
 import { jalaaliMonthLength, toGregorian } from '../../utils/private/date-persian.js'
+import { isPlainObject } from '../../utils/private/is.js'
 
 const yearsInterval = 20
 const views = [ 'Calendar', 'Years', 'Months' ]
@@ -164,7 +165,7 @@ export default createComponent({
     const rangeModel = computed(() => {
       const fn = date => decodeString(date, innerMask.value, innerLocale.value)
       return normalizedModel.value
-        .filter(date => Object(date) === date && date.from !== void 0 && date.to !== void 0)
+        .filter(date => isPlainObject(date) === true && date.from !== void 0 && date.to !== void 0)
         .map(range => ({ from: fn(range.from), to: fn(range.to) }))
         .filter(range => range.from.dateHash !== null && range.to.dateHash !== null && range.from.dateHash < range.to.dateHash)
     })
@@ -1217,24 +1218,24 @@ export default createComponent({
             }, days.value.map(day => h('div', { class: day.classes }, [
               day.in === true
                 ? h(
-                    QBtn, {
-                      class: day.today === true ? 'q-date__today' : '',
-                      dense: true,
-                      flat: day.flat,
-                      unelevated: day.unelevated,
-                      color: day.color,
-                      textColor: day.textColor,
-                      label: day.i,
-                      tabindex: tabindex.value,
-                      ...getCache('day#' + day.i, {
-                        onClick: () => { onDayClick(day.i) },
-                        onMouseover: () => { onDayMouseover(day.i) }
-                      })
-                    },
-                    day.event !== false
-                      ? () => h('div', { class: 'q-date__event bg-' + day.event })
-                      : null
-                  )
+                  QBtn, {
+                    class: day.today === true ? 'q-date__today' : '',
+                    dense: true,
+                    flat: day.flat,
+                    unelevated: day.unelevated,
+                    color: day.color,
+                    textColor: day.textColor,
+                    label: day.i,
+                    tabindex: tabindex.value,
+                    ...getCache('day#' + day.i, {
+                      onClick: () => { onDayClick(day.i) },
+                      onMouseover: () => { onDayMouseover(day.i) }
+                    })
+                  },
+                  day.event !== false
+                    ? () => h('div', { class: 'q-date__event bg-' + day.event })
+                    : null
+                )
                 : h('div', '' + day.i)
             ]))))
           ])

package/src/components/date/use-datetime.js

@@ -57,7 +57,9 @@ export default function (props, $q) {
   })
 
   function getLocale () {
-    return props.locale || $q.lang.date
+    return props.locale !== void 0
+      ? { ...$q.lang.date, ...props.locale }
+      : $q.lang.date
   }
 
   function getCurrentDate (dateOnly) {

package/src/components/dialog-plugin/DialogPlugin.js

@@ -17,6 +17,7 @@ import { createComponent } from '../../utils/private/create.js'
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
 import { isKeyCode } from '../../utils/private/key-composition.js'
+import { isPlainObject } from '../../utils/private/is.js'
 
 export default createComponent({
   name: 'DialogPlugin',
@@ -80,7 +81,7 @@ export default createComponent({
       props.progress === false
         ? null
         : (
-            Object(props.progress) === props.progress
+            isPlainObject(props.progress) === true
               ? {
                   component: props.progress.spinner || QSpinner,
                   props: { color: props.progress.color || vmColor.value }
@@ -109,7 +110,7 @@ export default createComponent({
     })
 
     const okLabel = computed(() => (
-      Object(props.ok) === props.ok
+      isPlainObject(props.ok) === true
         ? $q.lang.label.ok
         : (
             props.ok === true
@@ -119,7 +120,7 @@ export default createComponent({
     ))
 
     const cancelLabel = computed(() => (
-      Object(props.cancel) === props.cancel
+      isPlainObject(props.cancel) === true
         ? $q.lang.label.cancel
         : (
             props.cancel === true
@@ -145,7 +146,7 @@ export default createComponent({
       label: okLabel.value,
       ripple: false,
       disable: okDisabled.value,
-      ...(Object(props.ok) === props.ok ? props.ok : { flat: true }),
+      ...(isPlainObject(props.ok) === true ? props.ok : { flat: true }),
       'data-autofocus': (props.focus === 'ok' && hasForm.value !== true) || void 0,
       onClick: onOk
     }))
@@ -154,7 +155,7 @@ export default createComponent({
       color: vmColor.value,
       label: cancelLabel.value,
       ripple: false,
-      ...(Object(props.cancel) === props.cancel ? props.cancel : { flat: true }),
+      ...(isPlainObject(props.cancel) === true ? props.cancel : { flat: true }),
       'data-autofocus': (props.focus === 'cancel' && hasForm.value !== true) || void 0,
       onClick: onCancel
     }))
@@ -201,9 +202,9 @@ export default createComponent({
     function getSection (classes, text) {
       return props.html === true
         ? h(QCardSection, {
-            class: classes,
-            innerHTML: text
-          })
+          class: classes,
+          innerHTML: text
+        })
         : h(QCardSection, { class: classes }, () => text)
     }
 

package/src/components/fab/QFabAction.json

@@ -59,9 +59,7 @@
       "desc": "Emulate click on QFabAction",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     }

package/src/components/field/QField.json

@@ -81,9 +81,7 @@
       "desc": "Emitted when component gets focused",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     },
@@ -92,9 +90,7 @@
       "desc": "Emitted when component loses focus",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     }

package/src/components/form/QForm.json

@@ -37,7 +37,14 @@
 
   "events": {
     "submit": {
-      "desc": "Emitted when all validations have passed when tethered to a submit button"
+      "desc": "Emitted when all validations have passed when tethered to a submit button",
+      "params": {
+        "evt": {
+          "type": [ "Event", "SubmitEvent" ],
+          "desc": "Form submission event object",
+          "__exemption": [ "examples" ]
+        }
+      }
     },
 
     "reset": {
@@ -89,9 +96,7 @@
       "desc": "Manually trigger form validation and submit",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     },
@@ -100,9 +105,7 @@
       "desc": "Manually trigger form reset",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     },

package/src/components/icon/QIcon.js

@@ -69,7 +69,7 @@ export default createComponent({
       let cls
       let icon = props.name
 
-      if (!icon) {
+      if (icon === 'none' || !icon) {
         return { none: true }
       }
 
@@ -78,6 +78,9 @@ export default createComponent({
         if (res !== void 0) {
           if (res.icon !== void 0) {
             icon = res.icon
+            if (icon === 'none' || !icon) {
+              return { none: true }
+            }
           }
           else {
             return {

package/src/components/icon/QIcon.json

@@ -14,9 +14,7 @@
     },
 
     "name": {
-      "type": "String",
-      "desc": "Name of the icon, following Quasar convention",
-      "examples": [ "map", "ion-add" ],
+      "extends": "icon",
       "category": "model"
     },
 

package/src/components/input/QInput.json

@@ -89,9 +89,7 @@
       "desc": "Emitted when component gets focused",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     },
@@ -100,9 +98,7 @@
       "desc": "Emitted when component loses focus",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     }

package/src/components/input/use-mask.js

@@ -1,4 +1,4 @@
-import { ref, computed, watch, nextTick } from 'vue'
+import { ref, watch, nextTick } from 'vue'
 
 import { shouldIgnoreKey } from '../../utils/private/key-composition.js'
 
@@ -297,7 +297,7 @@ export default function (props, emit, emitValue, inputRef) {
       ? unmaskValue(masked)
       : masked
 
-    props.modelValue !== val && emitValue(val, true)
+    String(props.modelValue) !== val && emitValue(val, true)
   }
 
   function moveCursorForPaste (inp, start, end) {

package/src/components/knob/QKnob.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, onMounted, withDirectives, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, getCurrentInstance } from 'vue'
 
 import QCircularProgress from '../circular-progress/QCircularProgress.js'
 import TouchPan from '../../directives/TouchPan.js'
@@ -6,6 +6,7 @@ import TouchPan from '../../directives/TouchPan.js'
 import { createComponent } from '../../utils/private/create.js'
 import { position, stopAndPrevent } from '../../utils/event.js'
 import { between, normalizeToInterval } from '../../utils/format.js'
+import { hDir } from '../../utils/private/render.js'
 
 import { useFormProps, useFormAttrs } from '../../composables/private/use-form.js'
 import { useCircularCommonProps } from '../circular-progress/use-circular-progress.js'
@@ -26,6 +27,9 @@ export default createComponent({
       required: true
     },
 
+    innerMin: Number,
+    innerMax: Number,
+
     step: {
       type: Number,
       default: 1,
@@ -50,27 +54,33 @@ export default createComponent({
     const model = ref(props.modelValue)
     const dragging = ref(false)
 
-    let centerPosition, $el
+    const innerMin = computed(() => (
+      isNaN(props.innerMin) === true || props.innerMin < props.min
+        ? props.min
+        : props.innerMin
+    ))
+    const innerMax = computed(() => (
+      isNaN(props.innerMax) === true || props.innerMax > props.max
+        ? props.max
+        : props.innerMax
+    ))
 
-    watch(() => props.modelValue, val => {
-      if (val < props.min) {
-        model.value = props.min
-      }
-      else if (val > props.max) {
-        model.value = props.max
-      }
-      else {
-        if (val !== model.value) {
-          model.value = val
-        }
-        return
-      }
+    let centerPosition
 
-      if (model.value !== props.modelValue) {
-        emit('update:modelValue', model.value)
-        emit('change', model.value)
-      }
-    })
+    function normalizeModel () {
+      model.value = props.modelValue === null
+        ? innerMin.value
+        : between(props.modelValue, innerMin.value, innerMax.value)
+
+      updateValue(true)
+    }
+
+    watch(
+      () => `${ props.modelValue }|${ innerMin.value }|${ innerMax.value }`,
+      normalizeModel
+    )
+
+    normalizeModel()
 
     const editable = computed(() => props.disable === false && props.readonly === false)
 
@@ -138,7 +148,7 @@ export default createComponent({
     })
 
     function updateCenterPosition () {
-      const { top, left, width, height } = $el.getBoundingClientRect()
+      const { top, left, width, height } = proxy.$el.getBoundingClientRect()
       centerPosition = {
         top: top + height / 2,
         left: left + width / 2
@@ -168,8 +178,8 @@ export default createComponent({
 
       model.value = between(
         parseFloat((model.value + offset).toFixed(decimals.value)),
-        props.min,
-        props.max
+        innerMin.value,
+        innerMax.value
       )
 
       updateValue()
@@ -212,7 +222,7 @@ export default createComponent({
         newModel = parseFloat(newModel.toFixed(decimals.value))
       }
 
-      newModel = between(newModel, props.min, props.max)
+      newModel = between(newModel, innerMin.value, innerMax.value)
 
       emit('drag-value', newModel)
 
@@ -240,16 +250,12 @@ export default createComponent({
       return h('input', formAttrs.value)
     }
 
-    onMounted(() => {
-      $el = proxy.$el
-    })
-
     return () => {
       const data = {
         class: classes.value,
         role: 'slider',
-        'aria-valuemin': props.min,
-        'aria-valuemax': props.max,
+        'aria-valuemin': innerMin.value,
+        'aria-valuemax': innerMax.value,
         'aria-valuenow': props.modelValue,
         ...attrs.value,
         ...circularProps.value,
@@ -262,18 +268,18 @@ export default createComponent({
         default: slots.default
       }
 
-      if (editable.value === true) {
-        if (props.name !== void 0) {
-          child.internal = getNameInput
-        }
-
-        return withDirectives(
-          h(QCircularProgress, data, child),
-          directives.value
-        )
+      if (editable.value === true && props.name !== void 0) {
+        child.internal = getNameInput
       }
 
-      return h(QCircularProgress, data, child)
+      return hDir(
+        QCircularProgress,
+        data,
+        child,
+        'knob',
+        editable.value,
+        () => directives.value
+      )
     }
   }
 })

package/src/components/knob/QKnob.json

@@ -27,6 +27,22 @@
       "category": "model"
     },
 
+    "inner-min": {
+      "type": "Number",
+      "desc": "Inner minimum value of the model; Use in case you need the model value to be inside of the track's min-max values; Needs to be higher or equal to 'min' prop; Defaults to 'min' prop",
+      "examples": [ ":inner-min=\"0\"" ],
+      "category": "model",
+      "addedIn": "v2.5.4"
+    },
+
+    "inner-max": {
+      "type": "Number",
+      "desc": "Inner maximum value of the model; Use in case you need the model value to be inside of the track's min-max values; Needs to be lower or equal to 'max' prop; Defaults to 'max' prop",
+      "examples": [ ":inner-max=\"100\"" ],
+      "category": "model",
+      "addedIn": "v2.5.4"
+    },
+
     "step": {
       "type": "Number",
       "default": "1",