quasar 1.16.3 → 1.17.0

package/src/components/slider/QSlider.js

@@ -1,10 +1,8 @@
 import Vue from 'vue'
 
 import {
-  getRatio,
-  getModel,
-  SliderMixin,
-  keyCodes
+  keyCodes,
+  SliderMixin
 } from './slider-utils.js'
 
 import { between } from '../../utils/format.js'
@@ -26,90 +24,108 @@ export default Vue.extend({
   },
 
   data () {
+    const innerMin = this.__getInnerMin(this.innerMin)
+    const innerMax = this.__getInnerMax(this.innerMax)
     return {
-      model: this.value === null ? this.min : this.value,
+      model: this.value === null ? innerMin : between(this.value, innerMin, innerMax),
       curRatio: 0
     }
   },
 
-  watch: {
-    value (v) {
-      this.model = v === null
-        ? 0
-        : between(v, this.min, this.max)
-    },
-
-    min (v) {
-      this.model = between(this.model, v, this.max)
+  computed: {
+    modelRatio () {
+      return this.__convertModelToRatio(this.model)
     },
 
-    max (v) {
-      this.model = between(this.model, this.min, v)
-    }
-  },
-
-  computed: {
     ratio () {
       return this.active === true ? this.curRatio : this.modelRatio
     },
 
-    modelRatio () {
-      return this.minMaxDiff === 0 ? 0 : (this.model - this.min) / this.minMaxDiff
+    selectionBarStyle () {
+      const acc = {
+        [ this.positionProp ]: `${100 * this.innerMinRatio}%`,
+        [ this.sizeProp ]: `${100 * (this.ratio - this.innerMinRatio)}%`
+      }
+      if (this.selectionImg !== void 0) {
+        acc.backgroundImage = `url(${this.selectionImg}) !important`
+      }
+      return acc
     },
 
-    trackStyle () {
-      return {
-        [ this.positionProp ]: 0,
-        [ this.sizeProp ]: `${100 * this.ratio}%`
-      }
+    thumbLabel () {
+      return this.labelValue !== void 0
+        ? this.labelValue
+        : this.model
+    },
+
+    thumbClasses () {
+      const color = this.thumbColor || this.color
+      return `q-slider__thumb q-slider__thumb${this.axis} q-slider__thumb${this.axis}-${this.isReversed === true ? 'rtl' : 'ltr'} absolute non-selectable` +
+        (
+          this.preventFocus === false && this.focus === true
+            ? ' q-slider--focus'
+            : ''
+        ) +
+        (color !== void 0 ? ` text-${color}` : '')
     },
 
     thumbStyle () {
       return {
+        width: this.thumbSize,
+        height: this.thumbSize,
         [ this.positionProp ]: `${100 * this.ratio}%`
       }
     },
 
-    thumbClass () {
-      if (this.preventFocus === false && this.focus === true) {
-        return 'q-slider--focus'
-      }
+    thumbPinColor () {
+      return this.labelColor !== void 0
+        ? ` text-${this.labelColor}`
+        : ''
     },
 
-    pinClass () {
-      if (this.labelColor !== void 0) {
-        return `text-${this.labelColor}`
-      }
+    thumbTextContainerStyle () {
+      return this.__getTextContainerStyle(this.ratio)
     },
 
-    pinTextClass () {
-      return 'q-slider__pin-value-marker-text' +
+    thumbTextClass () {
+      return 'q-slider__text' +
         (this.labelTextColor !== void 0 ? ` text-${this.labelTextColor}` : '')
     },
 
-    events () {
-      if (this.editable === true) {
-        return this.$q.platform.is.mobile === true
-          ? { click: this.__mobileClick }
-          : {
-            mousedown: this.__activate,
-            focus: this.__focus,
-            blur: this.__blur,
-            keydown: this.__keydown,
-            keyup: this.__keyup
-          }
+    trackContainerEvents () {
+      if (this.editable !== true) {
+        return {}
       }
+
+      return this.$q.platform.is.mobile === true
+        ? { click: this.__onMobileClick }
+        : {
+          mousedown: this.__onActivate,
+          focus: this.__onFocus,
+          blur: this.__onBlur,
+          keydown: this.__onKeydown,
+          keyup: this.__onKeyup
+        }
     },
 
-    computedLabel () {
-      return this.labelValue !== void 0
-        ? this.labelValue
-        : this.model
+    trackContainerAttrs () {
+      return {
+        tabindex: this.$q.platform.is.mobile !== true
+          ? this.computedTabindex
+          : null
+      }
     },
 
-    pinStyle () {
-      const percent = (this.reverse === true ? -this.ratio : this.ratio - 1)
-      return this.__getPinStyle(percent, this.ratio)
+    modelUpdate () {
+      return `${this.value}|${this.computedInnerMin}|${this.computedInnerMax}`
+    }
+  },
+
+  watch: {
+    modelUpdate () {
+      this.model = this.value === null
+        ? this.computedInnerMin
+        : between(this.value, this.computedInnerMin, this.computedInnerMax)
     }
   },
 
@@ -126,28 +142,19 @@ export default Vue.extend({
     },
 
     __updatePosition (event, dragging = this.dragging) {
-      const ratio = getRatio(
-        event,
-        dragging,
-        this.isReversed,
-        this.vertical
-      )
+      const ratio = this.__getDraggingRatio(event, dragging)
 
-      this.model = getModel(ratio, this.min, this.max, this.step, this.decimals)
-      this.curRatio = this.snap !== true || this.step === 0
+      this.model = this.__convertRatioToModel(ratio)
+      this.curRatio = this.snap !== true || this.computedStep === 0
         ? ratio
-        : (
-          this.minMaxDiff === 0
-            ? 0
-            : (this.model - this.min) / this.minMaxDiff
-        )
+        : this.__convertModelToRatio(this.model)
     },
 
-    __focus () {
+    __onFocus () {
       this.focus = true
     },
 
-    __keydown (evt) {
+    __onKeydown (evt) {
       if (!keyCodes.includes(evt.keyCode)) {
         return
       }
@@ -156,12 +163,12 @@ export default Vue.extend({
 
       const
         step = ([34, 33].includes(evt.keyCode) ? 10 : 1) * this.computedStep,
-        offset = [34, 37, 40].includes(evt.keyCode) ? -step : step
+        offset = ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1) * (this.isReversed === true ? -1 : 1) * step
 
       this.model = between(
-        parseFloat((this.model + offset).toFixed(this.decimals)),
-        this.min,
-        this.max
+        parseFloat((this.model + offset).toFixed(this.computedDecimals)),
+        this.computedInnerMin,
+        this.computedInnerMax
       )
 
       this.__updateValue()
@@ -169,76 +176,26 @@ export default Vue.extend({
   },
 
   render (h) {
-    const child = [
-      this.__getThumbSvg(h),
-      h('div', { staticClass: 'q-slider__focus-ring' })
-    ]
-
-    if (this.label === true || this.labelAlways === true) {
-      child.push(
-        h('div', {
-          staticClass: `q-slider__pin q-slider__pin${this.axis} absolute`,
-          style: this.pinStyle.pin,
-          class: this.pinClass
-        }, [
-          h('div', {
-            staticClass: `q-slider__pin-text-container q-slider__pin-text-container${this.axis}`,
-            style: this.pinStyle.pinTextContainer
-          }, [
-            h('span', {
-              staticClass: 'q-slider__pin-text',
-              class: this.pinTextClass
-            }, [
-              this.computedLabel
-            ])
-          ])
-        ]),
-
-        h('div', {
-          staticClass: `q-slider__arrow q-slider__arrow${this.axis}`,
-          class: this.pinClass
+    const content = this.__getContent(h, node => {
+      node.push(
+        this.__getThumb(h, {
+          pinColor: this.thumbPinColor,
+          textContainerStyle: this.thumbTextContainerStyle,
+          textClass: this.thumbTextClass,
+          label: this.thumbLabel,
+          classes: this.thumbClasses,
+          style: this.thumbStyle,
+          nodeData: {}
         })
       )
-    }
-
-    if (this.name !== void 0 && this.disable !== true) {
-      this.__injectFormInput(child, 'push')
-    }
-
-    const track = [
-      h('div', {
-        staticClass: `q-slider__track q-slider__track${this.axis} absolute`,
-        style: this.trackStyle
-      })
-    ]
-
-    this.markers === true && track.push(
-      h('div', {
-        staticClass: `q-slider__track-markers q-slider__track-markers${this.axis} absolute-full fit`,
-        style: this.markerStyle
-      })
-    )
+    })
 
     return h('div', {
-      staticClass: this.value === null ? ' q-slider--no-value' : '',
+      class: this.classes + (this.value === null ? ' q-slider--no-value' : ''),
       attrs: {
-        ...this.attrs,
-        'aria-valuenow': this.value,
-        tabindex: this.computedTabindex
-      },
-      class: this.classes,
-      on: this.events,
-      directives: this.panDirectives
-    }, [
-      h('div', {
-        staticClass: `q-slider__track-container q-slider__track-container${this.axis} absolute`
-      }, track),
-
-      h('div', {
-        staticClass: `q-slider__thumb-container q-slider__thumb-container${this.axis} absolute non-selectable`,
-        class: this.thumbClass,
-        style: this.thumbStyle
-      }, child)
-    ])
+        ...this.attributes,
+        'aria-valuenow': this.value
+      }
+    }, content)
   }
 })

package/src/components/slider/QSlider.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "mixins/form" ],
+  "mixins": [ "components/slider/slider-utils" ],
 
   "meta": {
     "docsUrl": "https://v1.quasar.dev/vue-components/slider"
@@ -13,63 +13,6 @@
       "category": "model"
     },
 
-    "min": {
-      "type": "Number",
-      "desc": "Minimum value of the model",
-      "default": 0,
-      "examples": [ ":min=\"0\"" ],
-      "category": "model"
-    },
-
-    "max": {
-      "type": "Number",
-      "desc": "Maximum value of the model",
-      "default": 100,
-      "examples": [ ":max=\"100\"" ],
-      "category": "model"
-    },
-
-    "step": {
-      "type": "Number",
-      "desc": "Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity",
-      "default": 1,
-      "examples": [ ":step=\"1\"" ],
-      "category": "model"
-    },
-
-    "reverse": {
-      "type": "Boolean",
-      "desc": "Work in reverse (changes direction)",
-      "category": "behavior",
-      "addedIn": "v1.5.0"
-    },
-
-    "vertical": {
-      "type": "Boolean",
-      "desc": "Display in vertical direction",
-      "category": "behavior",
-      "addedIn": "v1.10.0"
-    },
-
-    "color": {
-      "extends": "color"
-    },
-
-    "label": {
-      "type": "Boolean",
-      "desc": "Popup a label when user clicks/taps on the slider thumb and moves it",
-      "category": "content"
-    },
-
-    "label-color": {
-      "extends": "color"
-    },
-
-    "label-text-color": {
-      "extends": "color",
-      "addedIn": "v1.1.0"
-    },
-
     "label-value": {
       "type": [ "String", "Number" ],
       "desc": "Override default label value",
@@ -77,76 +20,12 @@
         ":label-value=\"model + 'px'\""
       ],
       "category": "content"
-    },
-
-    "label-always": {
-      "type": "Boolean",
-      "desc": "Always display the label",
-      "category": "behavior|content"
-    },
-
-    "markers": {
-      "type": "Boolean",
-      "desc": "Display markers on the track, one for each possible value for the model",
-      "category": "content"
-    },
-
-    "snap": {
-      "type": "Boolean",
-      "desc": "Snap on valid values, rather than sliding freely; Suggestion: use with 'step' prop",
-      "category": "behavior"
-    },
-
-    "thumb-path": {
-      "type": "String",
-      "desc": "Set custom thumb svg path",
-      "default": "M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0",
-      "examples": [ "M5 5 h10 v10 h-10 v-10" ],
-      "category": "style",
-      "addedIn": "v1.5.10"
-    },
-
-    "dark": {
-      "extends": "dark"
-    },
-
-    "dense": {
-      "extends": "dense"
-    },
-
-    "disable": {
-      "extends": "disable"
-    },
-
-    "readonly": {
-      "extends": "readonly"
-    },
-
-    "tabindex": {
-      "extends": "tabindex"
     }
   },
 
   "events": {
     "input": {
       "extends": "input"
-    },
-
-    "change": {
-      "extends": "input",
-      "desc": "Emitted on lazy model value change (after user slides then releases the thumb)"
-    },
-
-    "pan": {
-      "desc": "Triggered when user starts panning on the component",
-      "params": {
-        "phase": {
-          "type": "String",
-          "desc": "Phase of panning",
-          "values": [ "start", "end" ]
-        }
-      },
-      "addedIn": "v1.14.0"
     }
   }
 }