quasar 2.3.4 → 2.4.3

package/src/components/range/QRange.js

@@ -1,19 +1,14 @@
 import { h, ref, computed, watch, getCurrentInstance } from 'vue'
 
-import { useFormInject, useFormProps } from '../../composables/private/use-form.js'
-
 import useSlider, {
   useSliderProps,
   useSliderEmits,
-  getRatio,
-  getModel,
   keyCodes
 } from '../slider/use-slider.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { stopAndPrevent } from '../../utils/event.js'
 import { between } from '../../utils/format.js'
-import { hDir } from '../../utils/private/render.js'
 
 const dragType = {
   MIN: 0,
@@ -25,22 +20,14 @@ export default createComponent({
   name: 'QRange',
 
   props: {
-    ...useFormProps,
     ...useSliderProps,
 
     modelValue: {
       type: Object,
-      default: () => ({
-        min: null,
-        max: null
-      }),
-      validator (val) {
-        return 'min' in val && 'max' in val
-      }
+      default: () => ({ min: null, max: null }),
+      validator: v => 'min' in v && 'max' in v
     },
 
-    name: String,
-
     dragRange: Boolean,
     dragOnlyRange: Boolean,
 
@@ -50,7 +37,10 @@ export default createComponent({
     rightLabelTextColor: String,
 
     leftLabelValue: [ String, Number ],
-    rightLabelValue: [ String, Number ]
+    rightLabelValue: [ String, Number ],
+
+    leftThumbColor: String,
+    rightThumbColor: String
   },
 
   emits: useSliderEmits,
@@ -58,53 +48,59 @@ export default createComponent({
   setup (props, { emit }) {
     const { proxy: { $q } } = getCurrentInstance()
 
-    const formAttrs = computed(() => {
-      return {
+    const { state, methods } = useSlider({
+      updateValue, updatePosition, getDragging,
+      formAttrs: computed(() => ({
         type: 'hidden',
         name: props.name,
         value: `${ props.modelValue.min }|${ props.modelValue.max }`
-      }
+      }))
     })
 
-    const injectFormInput = useFormInject(formAttrs)
-
     const rootRef = ref(null)
-    const model = ref({
-      min: props.modelValue.min === null ? props.min : props.modelValue.min,
-      max: props.modelValue.max === null ? props.max : props.modelValue.max
-    })
-
-    const nextFocus = ref(null)
-
     const curMinRatio = ref(0)
     const curMaxRatio = ref(0)
+    const model = ref({ min: 0, max: 0 })
 
-    const { state, methods } = useSlider({
-      updateValue, updatePosition, getDragging
-    })
+    function normalizeModel () {
+      model.value.min = props.modelValue.min === null
+        ? state.innerMin.value
+        : between(props.modelValue.min, state.innerMin.value, state.innerMax.value)
 
-    const modelMinRatio = computed(() => (
-      state.minMaxDiff.value === 0 ? 0 : (model.value.min - props.min) / state.minMaxDiff.value
-    ))
+      model.value.max = props.modelValue.max === null
+        ? state.innerMax.value
+        : between(props.modelValue.max, state.innerMin.value, state.innerMax.value)
+    }
+
+    watch(
+      () => `${ props.modelValue.min }|${ props.modelValue.max }|${ state.innerMin.value }|${ state.innerMax.value }`,
+      normalizeModel
+    )
+
+    normalizeModel()
+
+    const modelMinRatio = computed(() => methods.convertModelToRatio(model.value.min))
+    const modelMaxRatio = computed(() => methods.convertModelToRatio(model.value.max))
 
     const ratioMin = computed(() => (
       state.active.value === true ? curMinRatio.value : modelMinRatio.value
     ))
-
-    const modelMaxRatio = computed(() => (
-      state.minMaxDiff.value === 0 ? 0 : (model.value.max - props.min) / state.minMaxDiff.value
-    ))
-
     const ratioMax = computed(() => (
       state.active.value === true ? curMaxRatio.value : modelMaxRatio.value
     ))
 
-    const trackStyle = computed(() => ({
-      [ state.positionProp.value ]: `${ 100 * ratioMin.value }%`,
-      [ state.sizeProp.value ]: `${ 100 * (ratioMax.value - ratioMin.value) }%`
-    }))
+    const selectionBarStyle = computed(() => {
+      const acc = {
+        [ state.positionProp.value ]: `${ 100 * ratioMin.value }%`,
+        [ state.sizeProp.value ]: `${ 100 * (ratioMax.value - ratioMin.value) }%`
+      }
+      if (props.selectionImg !== void 0) {
+        acc.backgroundImage = `url(${ props.selectionImg }) !important`
+      }
+      return acc
+    })
 
-    const events = computed(() => {
+    const trackContainerEvents = computed(() => {
       if (state.editable.value !== true) {
         return {}
       }
@@ -115,137 +111,74 @@ export default createComponent({
 
       const evt = { onMousedown: methods.onActivate }
 
-      props.dragOnlyRange === true && Object.assign(evt, {
-        onFocus: () => { onFocus('both') },
-        onBlur: methods.onBlur,
-        onKeydown,
-        onKeyup: methods.onKeyup
-      })
+      if (props.dragRange === true || props.dragOnlyRange === true) {
+        Object.assign(evt, {
+          onFocus: () => { state.focus.value = 'both' },
+          onBlur: methods.onBlur,
+          onKeydown,
+          onKeyup: methods.onKeyup
+        })
+      }
 
       return evt
     })
 
-    const minProps = {
-      domRef: ref(null),
-
-      events: computed(() => (
-        state.editable.value === true && $q.platform.is.mobile !== true && props.dragOnlyRange !== true
-          ? {
-              onFocus: () => { onFocus('min') },
-              onBlur: methods.onBlur,
-              onKeydown,
-              onKeyup: methods.onKeyup
-            }
-          : {}
-      )),
-
-      thumbStyle: computed(() => ({
-        [ state.positionProp.value ]: `${ 100 * ratioMin.value }%`,
-        'z-index': nextFocus.value === 'min' ? 2 : void 0
-      })),
-
-      thumbClass: computed(() => (
-        state.preventFocus.value === false && state.focus.value === 'min'
-          ? ' q-slider--focus'
-          : ''
-      )),
-
-      pinClass: computed(() => {
-        const color = props.leftLabelColor || props.labelColor
-        return color ? ` text-${ color }` : ''
-      }),
+    function getEvents (side) {
+      return $q.platform.is.mobile !== true && state.editable.value === true && props.dragOnlyRange !== true
+        ? {
+            onFocus: () => { state.focus.value = side },
+            onBlur: methods.onBlur,
+            onKeydown,
+            onKeyup: methods.onKeyup
+          }
+        : {}
+    }
 
-      pinTextClass: computed(() => {
-        const color = props.leftLabelTextColor || props.labelTextColor
-        return color ? ` text-${ color }` : ''
-      }),
+    const thumbTabindex = computed(() => (props.dragOnlyRange !== true ? state.tabindex.value : null))
+    const trackContainerTabindex = computed(() => (
+      $q.platform.is.mobile !== true && (props.dragRange || props.dragOnlyRange === true)
+        ? state.tabindex.value
+        : null
+    ))
 
-      pinStyle: computed(() => {
-        const percent = (props.reverse === true ? -ratioMin.value : ratioMin.value - 1)
-        return methods.getPinStyle(percent, ratioMin.value)
+    const minThumbRef = ref(null)
+    const minEvents = computed(() => getEvents('min'))
+    const getMinThumb = methods.getThumbRenderFn({
+      focusValue: 'min',
+      getNodeData: () => ({
+        ref: minThumbRef,
+        key: 'tmin',
+        ...minEvents.value,
+        tabindex: thumbTabindex.value
       }),
-
+      ratio: ratioMin,
       label: computed(() => (
         props.leftLabelValue !== void 0
           ? props.leftLabelValue
           : model.value.min
-      ))
-    }
-
-    const maxProps = {
-      domRef: ref(null),
-
-      events: computed(() => (
-        state.editable.value === true && $q.platform.is.mobile !== true && props.dragOnlyRange !== true
-          ? {
-              onFocus: () => { onFocus('max') },
-              onBlur: methods.onBlur,
-              onKeydown,
-              onKeyup: methods.onKeyup
-            }
-          : {}
-      )),
-
-      thumbStyle: computed(() => ({
-        [ state.positionProp.value ]: `${ 100 * ratioMax.value }%`
-      })),
-
-      thumbClass: computed(() => (
-        state.preventFocus.value === false && state.focus.value === 'max'
-          ? ' q-slider--focus'
-          : ''
       )),
+      thumbColor: computed(() => props.leftThumbColor || props.thumbColor || props.color),
+      labelColor: computed(() => props.leftLabelColor || props.labelColor),
+      labelTextColor: computed(() => props.leftLabelTextColor || props.labelTextColor)
+    })
 
-      pinClass: computed(() => {
-        const color = props.rightLabelColor || props.labelColor
-        return color ? ` text-${ color }` : ''
-      }),
-
-      pinTextClass: computed(() => {
-        const color = props.rightLabelTextColor || props.labelTextColor
-        return color ? ` text-${ color }` : ''
-      }),
-
-      pinStyle: computed(() => {
-        const percent = (props.reverse === true ? -ratioMax.value : ratioMax.value - 1)
-        return methods.getPinStyle(percent, ratioMax.value)
+    const maxEvents = computed(() => getEvents('max'))
+    const getMaxThumb = methods.getThumbRenderFn({
+      focusValue: 'max',
+      getNodeData: () => ({
+        ...maxEvents.value,
+        key: 'tmax',
+        tabindex: thumbTabindex.value
       }),
-
+      ratio: ratioMax,
       label: computed(() => (
         props.rightLabelValue !== void 0
           ? props.rightLabelValue
           : model.value.max
-      ))
-    }
-
-    watch(() => props.modelValue.min, val => {
-      model.value.min = val === null
-        ? props.min
-        : val
-    })
-
-    watch(() => props.modelValue.max, val => {
-      model.value.max = val === null
-        ? props.max
-        : val
-    })
-
-    watch(() => props.min, value => {
-      if (model.value.min < value) {
-        model.value.min = value
-      }
-      if (model.value.max < value) {
-        model.value.max = value
-      }
-    })
-
-    watch(() => props.max, value => {
-      if (model.value.min > value) {
-        model.value.min = value
-      }
-      if (model.value.max > value) {
-        model.value.max = value
-      }
+      )),
+      thumbColor: computed(() => props.rightThumbColor || props.thumbColor || props.color),
+      labelColor: computed(() => props.rightLabelColor || props.labelColor),
+      labelTextColor: computed(() => props.rightLabelTextColor || props.labelTextColor)
     })
 
     function updateValue (change) {
@@ -261,8 +194,8 @@ export default createComponent({
         sensitivity = props.dragOnlyRange === true
           ? 0
           : (props.vertical === true
-              ? minProps.domRef.value.offsetHeight / (2 * height)
-              : minProps.domRef.value.offsetWidth / (2 * width)
+              ? minThumbRef.value.offsetHeight / (2 * height)
+              : minThumbRef.value.offsetWidth / (2 * width)
             )
 
       const dragging = {
@@ -276,43 +209,38 @@ export default createComponent({
         ratioMax: modelMaxRatio.value
       }
 
-      const ratio = getRatio(event, dragging, state.isReversed.value, props.vertical)
-      let type
+      const ratio = methods.getDraggingRatio(event, dragging)
 
       if (props.dragOnlyRange !== true && ratio < dragging.ratioMin + sensitivity) {
-        type = dragType.MIN
+        dragging.type = dragType.MIN
       }
       else if (props.dragOnlyRange === true || ratio < dragging.ratioMax - sensitivity) {
         if (props.dragRange === true || props.dragOnlyRange === true) {
-          type = dragType.RANGE
+          dragging.type = dragType.RANGE
           Object.assign(dragging, {
             offsetRatio: ratio,
-            offsetModel: getModel(ratio, props.min, props.max, props.step, state.decimals.value),
+            offsetModel: methods.convertRatioToModel(ratio),
             rangeValue: dragging.valueMax - dragging.valueMin,
             rangeRatio: dragging.ratioMax - dragging.ratioMin
           })
         }
         else {
-          type = dragging.ratioMax - ratio < ratio - dragging.ratioMin
+          dragging.type = dragging.ratioMax - ratio < ratio - dragging.ratioMin
             ? dragType.MAX
             : dragType.MIN
         }
       }
       else {
-        type = dragType.MAX
+        dragging.type = dragType.MAX
       }
 
-      dragging.type = type
-      nextFocus.value = null
-
       return dragging
     }
 
     function updatePosition (event, dragging = state.dragging.value) {
-      const
-        ratio = getRatio(event, dragging, state.isReversed.value, props.vertical),
-        localModel = getModel(ratio, props.min, props.max, props.step, state.decimals.value)
       let pos
+      const ratio = methods.getDraggingRatio(event, dragging)
+      const localModel = methods.convertRatioToModel(ratio)
 
       switch (dragging.type) {
         case dragType.MIN:
@@ -323,7 +251,7 @@ export default createComponent({
               min: localModel,
               max: dragging.valueMax
             }
-            nextFocus.value = 'min'
+            state.focus.value = 'min'
           }
           else {
             pos = {
@@ -332,7 +260,7 @@ export default createComponent({
               min: dragging.valueMax,
               max: localModel
             }
-            nextFocus.value = 'max'
+            state.focus.value = 'max'
           }
           break
 
@@ -344,7 +272,7 @@ export default createComponent({
               min: dragging.valueMin,
               max: localModel
             }
-            nextFocus.value = 'max'
+            state.focus.value = 'max'
           }
           else {
             pos = {
@@ -353,7 +281,7 @@ export default createComponent({
               min: localModel,
               max: dragging.valueMin
             }
-            nextFocus.value = 'min'
+            state.focus.value = 'min'
           }
           break
 
@@ -370,34 +298,26 @@ export default createComponent({
             min: parseFloat(min.toFixed(state.decimals.value)),
             max: parseFloat((min + dragging.rangeValue).toFixed(state.decimals.value))
           }
-          break
-      }
 
-      model.value = {
-        min: pos.min,
-        max: pos.max
+          state.focus.value = 'both'
+          break
       }
 
       // If either of the values to be emitted are null, set them to the defaults the user has entered.
-      if (model.value.min === null || model.value.max === null) {
-        model.value.min = pos.min || props.min
-        model.value.max = pos.max || props.max
-      }
+      model.value = model.value.min === null || model.value.max === null
+        ? { min: pos.min || props.min, max: pos.max || props.max }
+        : { min: pos.min, max: pos.max }
 
       if (props.snap !== true || props.step === 0) {
         curMinRatio.value = pos.minR
         curMaxRatio.value = pos.maxR
       }
       else {
-        curMinRatio.value = state.minMaxDiff.value === 0 ? 0 : (model.value.min - props.min) / state.minMaxDiff.value
-        curMaxRatio.value = state.minMaxDiff.value === 0 ? 0 : (model.value.max - props.min) / state.minMaxDiff.value
+        curMinRatio.value = methods.convertModelToRatio(model.value.min)
+        curMaxRatio.value = methods.convertModelToRatio(model.value.max)
       }
     }
 
-    function onFocus (which) {
-      state.focus.value = which
-    }
-
     function onKeydown (evt) {
       if (!keyCodes.includes(evt.keyCode)) {
         return
@@ -406,18 +326,15 @@ export default createComponent({
       stopAndPrevent(evt)
 
       const
-        stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * props.step,
-        offset = [ 34, 37, 40 ].includes(evt.keyCode) ? -stepVal : stepVal
-
-      if (props.dragOnlyRange) {
-        const interval = props.dragOnlyRange
-          ? model.value.max - model.value.min
-          : 0
+        stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * state.step.value,
+        offset = ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1) * (state.isReversed.value === true ? -1 : 1) * stepVal
 
+      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)),
-          props.min,
-          props.max - interval
+          state.innerMin.value,
+          state.innerMax.value - interval
         )
 
         model.value = {
@@ -435,8 +352,8 @@ export default createComponent({
           ...model.value,
           [ which ]: between(
             parseFloat((model.value[ which ] + offset).toFixed(state.decimals.value)),
-            which === 'min' ? props.min : model.value.min,
-            which === 'max' ? props.max : model.value.max
+            which === 'min' ? state.innerMin.value : model.value.min,
+            which === 'max' ? state.innerMax.value : model.value.max
           )
         }
       }
@@ -444,72 +361,20 @@ export default createComponent({
       updateValue()
     }
 
-    function getThumb (sideProps) {
-      const child = [
-        methods.getThumbSvg(),
-        h('div', { class: 'q-slider__focus-ring' })
-      ]
-
-      if (props.label === true || props.labelAlways === true) {
-        child.push(
-          h('div', {
-            class: `q-slider__pin q-slider__pin${ state.axis.value } absolute` + sideProps.pinClass.value,
-            style: sideProps.pinStyle.value.pin
-          }, [
-            h('div', {
-              class: `q-slider__pin-text-container q-slider__pin-text-container${ state.axis.value }`,
-              style: sideProps.pinStyle.value.pinTextContainer
-            }, [
-              h('span', {
-                class: 'q-slider__pin-text' + sideProps.pinTextClass.value
-              }, sideProps.label.value)
-            ])
-          ]),
-
-          h('div', {
-            class: `q-slider__arrow q-slider__arrow${ state.axis.value }` + sideProps.pinClass.value
-          })
-        )
-      }
-
-      return h('div', {
-        ref: sideProps.domRef,
-        class: `q-slider__thumb-container q-slider__thumb-container${ state.axis.value } absolute non-selectable` + sideProps.thumbClass.value,
-        style: sideProps.thumbStyle.value,
-        ...sideProps.events.value,
-        tabindex: props.dragOnlyRange !== true ? state.tabindex.value : null
-      }, child)
-    }
-
     return () => {
-      const track = [
-        h('div', {
-          class: `q-slider__track q-slider__track${ state.axis.value } absolute`,
-          style: trackStyle.value
-        })
-      ]
-
-      props.markers !== false && track.push(
-        h('div', {
-          class: `q-slider__track-markers q-slider__track-markers${ state.axis.value } absolute-full fit`,
-          style: state.markerStyle.value
-        })
+      const content = methods.getContent(
+        selectionBarStyle,
+        trackContainerTabindex,
+        trackContainerEvents,
+        node => {
+          node.push(
+            getMinThumb(),
+            getMaxThumb()
+          )
+        }
       )
 
-      const child = [
-        h('div', {
-          class: `q-slider__track-container q-slider__track-container${ state.axis.value } absolute`
-        }, track),
-
-        getThumb(minProps),
-        getThumb(maxProps)
-      ]
-
-      if (props.name !== void 0 && props.disable !== true) {
-        injectFormInput(child, 'push')
-      }
-
-      const data = {
+      return h('div', {
         ref: rootRef,
         class: 'q-range ' + state.classes.value + (
           props.modelValue.min === null || props.modelValue.max === null
@@ -517,14 +382,8 @@ export default createComponent({
             : ''
         ),
         ...state.attributes.value,
-        'aria-valuenow': props.modelValue.min + '|' + props.modelValue.max,
-        tabindex: props.dragOnlyRange === true && $q.platform.is.mobile !== true
-          ? state.tabindex.value
-          : null,
-        ...events.value
-      }
-
-      return hDir('div', data, child, 'slide', state.editable.value, () => state.panDirective.value)
+        'aria-valuenow': props.modelValue.min + '|' + props.modelValue.max
+      }, content)
     }
   }
 })