quasar 2.3.4 → 2.4.0

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,7 +20,6 @@ export default createComponent({
   name: 'QRange',
 
   props: {
-    ...useFormProps,
     ...useSliderProps,
 
     modelValue: {
@@ -39,8 +33,6 @@ export default createComponent({
       }
     },
 
-    name: String,
-
     dragRange: Boolean,
     dragOnlyRange: Boolean,
 
@@ -50,7 +42,10 @@ export default createComponent({
     rightLabelTextColor: String,
 
     leftLabelValue: [ String, Number ],
-    rightLabelValue: [ String, Number ]
+    rightLabelValue: [ String, Number ],
+
+    leftThumbColor: String,
+    rightThumbColor: String
   },
 
   emits: useSliderEmits,
@@ -58,51 +53,46 @@ 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 { state, methods } = useSlider({
-      updateValue, updatePosition, getDragging
+    const model = ref({
+      min: props.modelValue.min === null ? state.innerMin.value : props.modelValue.min,
+      max: props.modelValue.max === null ? state.innerMax.value : props.modelValue.max
     })
 
-    const modelMinRatio = computed(() => (
-      state.minMaxDiff.value === 0 ? 0 : (model.value.min - props.min) / state.minMaxDiff.value
-    ))
+    const nextFocus = ref(null)
+
+    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(() => {
       if (state.editable.value !== true) {
@@ -125,128 +115,76 @@ export default createComponent({
       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 }` : ''
-      }),
-
-      pinTextClass: computed(() => {
-        const color = props.leftLabelTextColor || props.labelTextColor
-        return color ? ` text-${ color }` : ''
-      }),
-
-      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(() => (
+      state.editable.value === true && $q.platform.is.mobile !== true && props.dragOnlyRange !== true
+        ? {
+            onFocus: () => { onFocus('min') },
+            onBlur: methods.onBlur,
+            onKeydown,
+            onKeyup: methods.onKeyup
+          }
+        : {}
+    ))
+    const getMinThumb = methods.getThumbRenderFn({
+      focusValue: 'min',
+      nextFocus,
+      getNodeData: () => ({
+        ref: minThumbRef,
+        ...minEvents.value,
+        tabindex: props.dragOnlyRange !== true ? state.tabindex.value : null
       }),
-
+      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(() => (
+      state.editable.value === true && $q.platform.is.mobile !== true && props.dragOnlyRange !== true
+        ? {
+            onFocus: () => { onFocus('max') },
+            onBlur: methods.onBlur,
+            onKeydown,
+            onKeyup: methods.onKeyup
+          }
+        : {}
+    ))
+    const getMaxThumb = methods.getThumbRenderFn({
+      focusValue: 'max',
+      nextFocus,
+      getNodeData: () => ({
+        ...maxEvents.value,
+        tabindex: props.dragOnlyRange !== true ? state.tabindex.value : null
       }),
-
+      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
+      )),
+      thumbColor: computed(() => props.rightThumbColor || props.thumbColor || props.color),
+      labelColor: computed(() => props.rightLabelColor || props.labelColor),
+      labelTextColor: computed(() => props.rightLabelTextColor || props.labelTextColor)
     })
 
-    watch(() => props.modelValue.max, val => {
-      model.value.max = val === null
-        ? props.max
-        : val
-    })
+    watch(
+      () => props.modelValue.min + props.modelValue.max + state.innerMin.value + state.innerMax.value,
+      () => {
+        model.value.min = props.modelValue.min === null
+          ? state.innerMin.value
+          : between(props.modelValue.min, state.innerMin.value, state.innerMax.value)
 
-    watch(() => props.min, value => {
-      if (model.value.min < value) {
-        model.value.min = value
-      }
-      if (model.value.max < value) {
-        model.value.max = value
+        model.value.max = props.modelValue.max === null
+          ? state.innerMax.value
+          : between(props.modelValue.max, state.innerMin.value, state.innerMax.value)
       }
-    })
-
-    watch(() => props.max, value => {
-      if (model.value.min > value) {
-        model.value.min = value
-      }
-      if (model.value.max > value) {
-        model.value.max = value
-      }
-    })
+    )
 
     function updateValue (change) {
       if (model.value.min !== props.modelValue.min || model.value.max !== props.modelValue.max) {
@@ -261,8 +199,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,8 +214,8 @@ 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
@@ -287,7 +225,7 @@ export default createComponent({
           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
           })
@@ -309,10 +247,9 @@ export default createComponent({
     }
 
     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:
@@ -389,8 +326,8 @@ export default createComponent({
         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 = state.trackLen.value === 0 ? 0 : (model.value.min - props.min) / state.trackLen.value
+        curMaxRatio.value = state.trackLen.value === 0 ? 0 : (model.value.max - props.min) / state.trackLen.value
       }
     }
 
@@ -416,8 +353,8 @@ export default createComponent({
 
         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 +372,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 +381,19 @@ 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,
+        events,
+        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
@@ -520,11 +404,8 @@ export default createComponent({
         '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)
+          : null
+      }, content)
     }
   }
 })

package/src/components/range/QRange.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-form" ],
+  "mixins": [ "components/slider/use-slider" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/range"
@@ -25,42 +25,6 @@
       "examples": [ "v-model=\"positionModel\"" ]
     },
 
-    "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"
-    },
-
-    "vertical": {
-      "type": "Boolean",
-      "desc": "Display in vertical direction",
-      "category": "behavior"
-    },
-
     "drag-range": {
       "type": "Boolean",
       "desc": "User can drag range instead of just the two thumbs",
@@ -73,28 +37,6 @@
       "category": "content"
     },
 
-    "color": {
-      "extends": "color"
-    },
-
-    "label": {
-      "type": "Boolean",
-      "desc": "Popup labels (for left and right thumbs) when user clicks/taps on the slider thumb and moves it",
-      "category": "labels"
-    },
-
-    "label-color": {
-      "extends": "color",
-      "desc": "Color name for labels background from the Quasar Color Palette; Applies to both labels, unless specific label color props are used",
-      "category": "labels"
-    },
-
-    "label-text-color": {
-      "extends": "color",
-      "desc": "Color name for labels text from the Quasar Color Palette; Applies to both labels, unless specific label text color props are used",
-      "category": "labels"
-    },
-
     "left-label-color": {
       "extends": "color",
       "desc": "Color name for left label background from the Quasar Color Palette",
@@ -137,76 +79,24 @@
       "category": "labels"
     },
 
-    "label-always": {
-      "type": "Boolean",
-      "desc": "Always display the labels",
-      "category": "labels"
-    },
-
-    "markers": {
-      "type": [ "Boolean", "Number" ],
-      "desc": "Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)",
-      "category": "content",
-      "examples": [
-        "markers",
-        ":markers=\"5\""
-      ]
-    },
-
-    "snap": {
-      "type": "Boolean",
-      "desc": "Snap thumbs on valid values, rather than sliding freely; Suggestion: use with 'step' prop",
-      "category": "content"
-    },
-
-    "thumb-path": {
-      "type": "String",
-      "desc": "Set custom thumbs 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"
-    },
-
-    "dark": {
-      "extends": "dark"
-    },
-
-    "dense": {
-      "extends": "dense"
-    },
-
-    "disable": {
-      "extends": "disable"
-    },
-
-    "readonly": {
-      "extends": "readonly"
+    "left-thumb-color": {
+      "extends": "color",
+      "desc": "Color name (from the Quasar Color Palette) for left thumb",
+      "category": "labels",
+      "addedIn": "v2.4"
     },
 
-    "tabindex": {
-      "extends": "tabindex"
+    "right-thumb-color": {
+      "extends": "color",
+      "desc": "Color name (from the Quasar Color Palette) for right thumb",
+      "category": "labels",
+      "addedIn": "v2.4"
     }
   },
 
   "events": {
     "update:model-value": {
       "extends": "update:model-value"
-    },
-
-    "change": {
-      "extends": "update:model-value",
-      "desc": "Emitted on lazy model value change (after user slides then releases thumb)"
-    },
-
-    "pan": {
-      "desc": "Triggered when user starts panning on the component",
-      "params": {
-        "phase": {
-          "type": "String",
-          "desc": "Phase of panning",
-          "values": [ "start", "end" ]
-        }
-      }
     }
   }
 }

package/src/components/scroll-area/QScrollArea.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, withDirectives, getCurrentInstance } from 'vue'
+import { h, ref, computed, withDirectives, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
@@ -375,6 +375,8 @@ export default createComponent({
       }
     })
 
+    onBeforeUnmount(emitScroll.cancel)
+
     return () => {
       return h('div', {
         class: classes.value,