quasar 2.5.3 → 2.6.0

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 { isObject } 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
+            isObject(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
+      isObject(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
+      isObject(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 }),
+      ...(isObject(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 }),
+      ...(isObject(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/editor/QEditor.js

@@ -180,17 +180,17 @@ export default createComponent({
       const userDef = props.definitions || {}
       const def = props.definitions || props.fonts
         ? extend(
-            true,
-            {},
-            buttonDef.value,
-            userDef,
-            getFonts(
-              defaultFont,
-              $q.lang.editor.defaultFont,
-              $q.iconSet.editor.font,
-              props.fonts
-            )
+          true,
+          {},
+          buttonDef.value,
+          userDef,
+          getFonts(
+            defaultFont,
+            $q.lang.editor.defaultFont,
+            $q.iconSet.editor.font,
+            props.fonts
           )
+        )
         : buttonDef.value
 
       return props.toolbar.map(

package/src/components/editor/editor-utils.js

@@ -34,8 +34,8 @@ function getBtn (eVm, btn, clickHandler, active = false) {
   if (btn.tip && eVm.$q.platform.is.desktop) {
     const Key = btn.key
       ? h('div', [
-          h('small', `(CTRL + ${ String.fromCharCode(btn.key) })`)
-        ])
+        h('small', `(CTRL + ${ String.fromCharCode(btn.key) })`)
+      ])
       : null
     child.push(
       h(QTooltip, { delay: 1000 }, () => [

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/file/QFile.js

@@ -58,6 +58,7 @@ export default createComponent({
     const {
       pickFiles,
       onDragover,
+      onDragleave,
       processFiles,
       getDndNode
     } = useFile({ editable: state.editable, dnd, getFileInput, addFilesToQueue })
@@ -263,7 +264,7 @@ export default createComponent({
         }
 
         if (state.editable.value === true) {
-          Object.assign(data, { onDragover, onKeydown, onKeyup })
+          Object.assign(data, { onDragover, onDragleave, onKeydown, onKeyup })
         }
 
         return h('div', data, [ getInput() ].concat(getSelection()))

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

@@ -36,6 +36,7 @@ const imgRE = /^img:/
 const svgUseRE = /^svguse:/
 const ionRE = /^ion-/
 const faLaRE = /^[lf]a[srlbdk]? /
+const fa6RE = /^fa-(brand|regular|solid)/
 
 export default createComponent({
   name: 'QIcon',
@@ -69,7 +70,7 @@ export default createComponent({
       let cls
       let icon = props.name
 
-      if (!icon) {
+      if (icon === 'none' || !icon) {
         return { none: true }
       }
 
@@ -78,6 +79,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 {
@@ -126,7 +130,7 @@ export default createComponent({
       if (matches !== null) {
         cls = libMap[ matches[ 1 ] ](icon)
       }
-      else if (faLaRE.test(icon) === true) {
+      else if (faLaRE.test(icon) === true || fa6RE.test(icon) === true) {
         cls = icon
       }
       else if (ionRE.test(icon) === true) {

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/infinite-scroll/QInfiniteScroll.js

@@ -120,7 +120,9 @@ export default createComponent({
         isWorking.value = false
         isFetching.value = false
         localScrollTarget.removeEventListener('scroll', poll, passive)
-        poll !== void 0 && poll.cancel()
+        if (poll !== void 0 && poll.cancel !== void 0) {
+          poll.cancel()
+        }
       }
     }
 

package/src/components/inner-loading/QInnerLoading.js

@@ -39,7 +39,7 @@ export default createComponent({
 
     const labelClass = computed(() =>
       'q-inner-loading__label'
-      + (props.labelClass !== void 0 ? ` ${ props.labelClass}` : '')
+      + (props.labelClass !== void 0 ? ` ${ props.labelClass }` : '')
     )
 
     function getInner () {
@@ -65,12 +65,12 @@ export default createComponent({
     function getContent () {
       return props.showing === true
         ? h(
-            'div',
-            { class: classes.value, style: transitionStyle.value },
-            slots.default !== void 0
-              ? slots.default()
-              : getInner()
-          )
+          'div',
+          { class: classes.value, style: transitionStyle.value },
+          slots.default !== void 0
+            ? slots.default()
+            : getInner()
+        )
         : null
     }
 

package/src/components/input/QInput.js

@@ -138,7 +138,10 @@ export default createComponent({
       if (hasMask.value === true) {
         if (stopValueWatcher === true) {
           stopValueWatcher = false
-          return
+
+          if (String(v) === emitCachedValue) {
+            return
+          }
         }
 
         updateMaskValue(v)

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()
@@ -193,11 +203,14 @@ export default createComponent({
         angle = centerPosition.left < pos.left ? angle + 90 : 270 - angle
       }
 
-      if (props.angle) {
+      if ($q.lang.rtl === true) {
+        angle = normalizeToInterval(-angle - props.angle, 0, 360)
+      }
+      else if (props.angle) {
         angle = normalizeToInterval(angle - props.angle, 0, 360)
       }
 
-      if ($q.lang.rtl === true) {
+      if (props.reverse === true) {
         angle = 360 - angle
       }
 
@@ -212,7 +225,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 +253,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 +271,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",
@@ -35,6 +51,12 @@
       "category": "model"
     },
 
+    "reverse": {
+      "type": "Boolean",
+      "desc": "Reverses the direction of progress",
+      "category": "behavior"
+    },
+
     "instant-feedback": {
       "type": "Boolean",
       "desc": "No animation when model changes",

package/src/components/linear-progress/QLinearProgress.sass

@@ -6,6 +6,7 @@
   font-size: 4px
   height: 1em
   color: var(--q-primary)
+  transform: scale3d(1, 1, 1)
 
   &__model, &__track
     transform-origin: 0 0

package/src/components/menu/QMenu.js

@@ -349,19 +349,19 @@ export default createComponent({
         () => (
           showing.value === true
             ? h('div', {
-                ...attrs,
-                ref: innerRef,
-                tabindex: -1,
-                class: [
-                  'q-menu q-position-engine scroll' + menuClass.value,
-                  attrs.class
-                ],
-                style: [
-                  attrs.style,
-                  transitionStyle.value
-                ],
-                ...onEvents.value
-              }, hSlot(slots.default))
+              ...attrs,
+              ref: innerRef,
+              tabindex: -1,
+              class: [
+                'q-menu q-position-engine scroll' + menuClass.value,
+                attrs.class
+              ],
+              style: [
+                attrs.style,
+                transitionStyle.value
+              ],
+              ...onEvents.value
+            }, hSlot(slots.default))
             : null
         )
       )

package/src/components/page-scroller/QPageScroller.js

@@ -98,10 +98,10 @@ export default createComponent({
     function getContent () {
       return showing.value === true
         ? h('div', {
-            ref: rootRef,
-            class: 'q-page-scroller',
-            onClick
-          }, getStickyContent(slots))
+          ref: rootRef,
+          class: 'q-page-scroller',
+          onClick
+        }, getStickyContent(slots))
         : null
     }
 

package/src/components/pull-to-refresh/QPullToRefresh.js

@@ -76,7 +76,7 @@ export default createComponent({
       }
 
       if (event.isFirst === true) {
-        if (getVerticalScrollPosition(localScrollTarget) !== 0 || event.direction !== "down") {
+        if (getVerticalScrollPosition(localScrollTarget) !== 0 || event.direction !== 'down') {
           if (pulling.value === true) {
             pulling.value = false
             state.value = 'pull'
@@ -189,10 +189,10 @@ export default createComponent({
           }, [
             state.value !== 'refreshing'
               ? h(QIcon, {
-                  name: props.icon || $q.iconSet.pullToRefresh.icon,
-                  color: props.color,
-                  size: '32px'
-                })
+                name: props.icon || $q.iconSet.pullToRefresh.icon,
+                color: props.color,
+                size: '32px'
+              })
               : h(QSpinner, {
                 size: '24px',
                 color: props.color

package/src/components/radio/QRadio.json

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