quasar 1.18.3 → 1.18.4

package/dist/types/index.d.ts

@@ -4315,6 +4315,14 @@ export interface QKnob extends Vue {
      * The maximum value that the model (the knob value) should go to
      */
     max? : number
+    /**
+     * 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
+     */
+    innerMin? : number
+    /**
+     * 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
+     */
+    innerMax? : number
     /**
      * A number representing steps in the value of the model, while adjusting the knob
      */

package/dist/vetur/quasar-attributes.json

@@ -2755,6 +2755,14 @@
     "type": "number",
     "description": "The maximum value that the model (the knob value) should go to"
   },
+  "q-knob/inner-min": {
+    "type": "number",
+    "description": "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"
+  },
+  "q-knob/inner-max": {
+    "type": "number",
+    "description": "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"
+  },
   "q-knob/step": {
     "type": "number",
     "description": "A number representing steps in the value of the model, while adjusting the knob"

package/dist/vetur/quasar-tags.json

@@ -910,6 +910,8 @@
       "value",
       "min",
       "max",
+      "inner-min",
+      "inner-max",
       "step",
       "instant-feedback",
       "color",

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

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "1.18.3",
+  "version": "1.18.4",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -9107,6 +9107,24 @@
               "description": "The maximum value that the model (the knob value) should go to\n\nExamples:\n100\n50",
               "doc-url": "https://v1.quasar.dev/vue-components/knob"
             },
+            {
+              "name": "inner-min",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "description": "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\n\nExamples:\n:inner-min=\"0\"",
+              "doc-url": "https://v1.quasar.dev/vue-components/knob"
+            },
+            {
+              "name": "inner-max",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "description": "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\n\nExamples:\n:inner-max=\"100\"",
+              "doc-url": "https://v1.quasar.dev/vue-components/knob"
+            },
             {
               "name": "step",
               "value": {
@@ -11557,7 +11575,7 @@
                 "kind": "expression",
                 "type": "number"
               },
-              "description": "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\n\nExamples:\n:max-value=\"100\"",
+              "description": "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\n\nExamples:\n:inner-max=\"100\"",
               "doc-url": "https://v1.quasar.dev/vue-components/range"
             },
             {
@@ -14139,7 +14157,7 @@
                 "kind": "expression",
                 "type": "number"
               },
-              "description": "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\n\nExamples:\n:max-value=\"100\"",
+              "description": "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\n\nExamples:\n:inner-max=\"100\"",
               "doc-url": "https://v1.quasar.dev/vue-components/slider"
             },
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "1.18.3",
+  "version": "1.18.4",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "module": "src/index.esm.js",
   "typings": "dist/types/index.d.ts",

package/src/components/knob/QKnob.js

@@ -25,6 +25,9 @@ export default Vue.extend({
   },
 
   props: {
+    innerMin: Number,
+    innerMax: Number,
+
     step: {
       type: Number,
       default: 1,
@@ -41,31 +44,22 @@ export default Vue.extend({
   },
 
   data () {
+    const innerMin = this.__getInnerMin(this.innerMin)
+    const innerMax = this.__getInnerMax(this.innerMax)
+
     return {
-      model: this.value,
+      model: this.value === null ? innerMin : between(this.value, innerMin, innerMax),
       dragging: false
     }
   },
 
   watch: {
-    value (value) {
-      if (value < this.min) {
-        this.model = this.min
-      }
-      else if (value > this.max) {
-        this.model = this.max
-      }
-      else {
-        if (value !== this.model) {
-          this.model = value
-        }
-        return
-      }
+    modelUpdate () {
+      this.model = this.value === null
+        ? this.computedInnerMin
+        : between(this.value, this.computedInnerMin, this.computedInnerMax)
 
-      if (this.model !== this.value) {
-        this.$emit('input', this.model)
-        this.$emit('change', this.model)
-      }
+      this.__updateValue(true)
     }
   },
 
@@ -78,6 +72,18 @@ export default Vue.extend({
       )
     },
 
+    computedInnerMin () {
+      return this.__getInnerMin(this.innerMin)
+    },
+
+    computedInnerMax () {
+      return this.__getInnerMax(this.innerMax)
+    },
+
+    modelUpdate () {
+      return `${this.value}|${this.computedInnerMin}|${this.computedInnerMax}`
+    },
+
     editable () {
       return this.disable === false && this.readonly === false
     },
@@ -109,8 +115,8 @@ export default Vue.extend({
     attrs () {
       const attrs = {
         role: 'slider',
-        'aria-valuemin': this.min,
-        'aria-valuemax': this.max,
+        'aria-valuemin': this.computedInnerMin,
+        'aria-valuemax': this.computedInnerMax,
         'aria-valuenow': this.value
       }
 
@@ -126,6 +132,18 @@ export default Vue.extend({
   },
 
   methods: {
+    __getInnerMin (val) {
+      return isNaN(val) === true || this.innerMin < this.min
+        ? this.min
+        : this.innerMin
+    },
+
+    __getInnerMax (val) {
+      return isNaN(val) === true || val > this.max
+        ? this.max
+        : this.innerMax
+    },
+
     __updateCenterPosition () {
       const { top, left, width, height } = this.$el.getBoundingClientRect()
       this.centerPosition = {
@@ -167,8 +185,8 @@ export default Vue.extend({
 
       this.model = between(
         parseFloat((this.model + offset).toFixed(this.decimals)),
-        this.min,
-        this.max
+        this.computedInnerMin,
+        this.computedInnerMax
       )
 
       this.__updateValue()
@@ -225,7 +243,7 @@ export default Vue.extend({
         model = parseFloat(model.toFixed(this.decimals))
       }
 
-      model = between(model, this.min, this.max)
+      model = between(model, this.computedInnerMin, this.computedInnerMax)
 
       this.$emit('drag-value', model)
 

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": "v1.18.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": "v1.18.4"
+    },
+
     "step": {
       "type": "Number",
       "default": "1",

package/src/components/select/QSelect.js

@@ -302,7 +302,7 @@ export default Vue.extend({
         }
 
         if (this.$q.platform.is.desktop === true) {
-          itemEvents.mousemove = () => { this.setOptionIndex(index) }
+          itemEvents.mousemove = () => { this.menu === true && this.setOptionIndex(index) }
         }
 
         const option = {

package/src/components/slider/slider-utils.json

@@ -29,7 +29,7 @@
     "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": [ ":max-value=\"100\"" ],
+      "examples": [ ":inner-max=\"100\"" ],
       "category": "model",
       "addedIn": "v1.17"
     },

package/src/mixins/mask.js

@@ -301,7 +301,7 @@ export default {
         ? this.__unmask(masked)
         : masked
 
-      this.value !== val && this.__emitValue(val, true)
+      String(this.value) !== val && this.__emitValue(val, true)
     },
 
     __moveCursorForPaste (inp, start, end) {