quasar 2.3.1 → 2.4.0

package/src/components/slider/QSlider.js

@@ -1,26 +1,22 @@
 import { h, ref, computed, watch, getCurrentInstance } from 'vue'
 
-import { useFormInject, useFormProps, useFormAttrs } from '../../composables/private/use-form.js'
+import { useFormAttrs } from '../../composables/private/use-form.js'
 
 import useSlider, {
   useSliderProps,
   useSliderEmits,
-  getRatio,
-  getModel,
   keyCodes
 } from './use-slider.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { between } from '../../utils/format.js'
 import { stopAndPrevent } from '../../utils/event.js'
-import { hDir } from '../../utils/private/render.js'
 
 export default createComponent({
   name: 'QSlider',
 
   props: {
     ...useSliderProps,
-    ...useFormProps,
 
     modelValue: {
       required: true,
@@ -36,47 +32,42 @@ export default createComponent({
   setup (props, { emit }) {
     const { proxy: { $q } } = getCurrentInstance()
 
-    const formAttrs = useFormAttrs(props)
-    const injectFormInput = useFormInject(formAttrs)
+    const { state, methods } = useSlider({
+      updateValue, updatePosition, getDragging,
+      formAttrs: useFormAttrs(props)
+    })
 
     const rootRef = ref(null)
-    const model = ref(props.modelValue === null ? props.min : props.modelValue)
     const curRatio = ref(0)
 
-    const { state, methods } = useSlider({
-      updateValue, updatePosition, getDragging
-    })
+    const model = ref(props.modelValue === null ? state.innerMin.value : props.modelValue)
 
-    const modelRatio = computed(() => (
-      state.minMaxDiff.value === 0 ? 0 : (model.value - props.min) / state.minMaxDiff.value
-    ))
+    const modelRatio = computed(() => methods.convertModelToRatio(model.value))
     const ratio = computed(() => (state.active.value === true ? curRatio.value : modelRatio.value))
 
-    const trackStyle = computed(() => ({
-      [ state.positionProp.value ]: 0,
-      [ state.sizeProp.value ]: `${ 100 * ratio.value }%`
-    }))
-
-    const thumbStyle = computed(() => ({
-      [ state.positionProp.value ]: `${ 100 * ratio.value }%`
-    }))
-
-    const thumbClass = computed(() => (
-      state.preventFocus.value === false && state.focus.value === true
-        ? ' q-slider--focus'
-        : ''
-    ))
-
-    const pinClass = computed(() => (
-      props.labelColor !== void 0
-        ? `text-${ props.labelColor }`
-        : ''
-    ))
+    const selectionBarStyle = computed(() => {
+      const acc = {
+        [ state.positionProp.value ]: `${ 100 * state.innerMinRatio.value }%`,
+        [ state.sizeProp.value ]: `${ 100 * (ratio.value - state.innerMinRatio.value) }%`
+      }
+      if (props.selectionImg !== void 0) {
+        acc.backgroundImage = `url(${ props.selectionImg }) !important`
+      }
+      return acc
+    })
 
-    const pinTextClass = computed(() =>
-      'q-slider__pin-value-marker-text'
-      + (props.labelTextColor !== void 0 ? ` text-${ props.labelTextColor }` : '')
-    )
+    const getThumb = methods.getThumbRenderFn({
+      focusValue: true,
+      ratio,
+      label: computed(() => (
+        props.labelValue !== void 0
+          ? props.labelValue
+          : model.value
+      )),
+      thumbColor: computed(() => props.thumbColor || props.color),
+      labelColor: computed(() => props.labelColor),
+      labelTextColor: computed(() => props.labelTextColor)
+    })
 
     const events = computed(() => {
       if (state.editable.value !== true) {
@@ -94,25 +85,10 @@ export default createComponent({
           }
     })
 
-    const label = computed(() => (
-      props.labelValue !== void 0
-        ? props.labelValue
-        : model.value
-    ))
-
-    const pinStyle = computed(() => {
-      const percent = (props.reverse === true ? -ratio.value : ratio.value - 1)
-      return methods.getPinStyle(percent, ratio.value)
-    })
-
-    watch(() => props.modelValue, v => {
-      model.value = v === null
-        ? 0
-        : between(v, props.min, props.max)
-    })
-
-    watch(() => props.min + props.max, () => {
-      model.value = between(model.value, props.min, props.max)
+    watch(() => props.modelValue + state.innerMin.value + state.innerMax.value, () => {
+      model.value = props.modelValue === null
+        ? state.innerMin.value
+        : between(props.modelValue, state.innerMin.value, state.innerMax.value)
     })
 
     function updateValue (change) {
@@ -127,19 +103,13 @@ export default createComponent({
     }
 
     function updatePosition (event, dragging = state.dragging.value) {
-      const ratio = getRatio(
-        event,
-        dragging,
-        state.isReversed.value,
-        props.vertical
-      )
+      const ratio = methods.getDraggingRatio(event, dragging)
+
+      model.value = methods.convertRatioToModel(ratio)
 
-      model.value = getModel(ratio, props.min, props.max, props.step, state.decimals.value)
       curRatio.value = props.snap !== true || props.step === 0
         ? ratio
-        : (
-            state.minMaxDiff.value === 0 ? 0 : (model.value - props.min) / state.minMaxDiff.value
-          )
+        : methods.convertModelToRatio(model.value)
     }
 
     function onFocus () {
@@ -159,82 +129,26 @@ export default createComponent({
 
       model.value = between(
         parseFloat((model.value + offset).toFixed(state.decimals.value)),
-        props.min,
-        props.max
+        state.innerMin.value,
+        state.innerMax.value
       )
 
       updateValue()
     }
 
     return () => {
-      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 ` + pinClass.value,
-            style: pinStyle.value.pin
-          }, [
-            h('div', {
-              class: `q-slider__pin-text-container q-slider__pin-text-container${ state.axis.value }`,
-              style: pinStyle.value.pinTextContainer
-            }, [
-              h('span', {
-                class: 'q-slider__pin-text ' + pinTextClass.value
-              }, [
-                label.value
-              ])
-            ])
-          ]),
-
-          h('div', {
-            class: `q-slider__arrow q-slider__arrow${ state.axis.value } ${ pinClass.value }`
-          })
-        )
-      }
-
-      if (props.name !== void 0 && props.disable !== true) {
-        injectFormInput(child, 'push')
-      }
-
-      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(getThumb()) }
       )
 
-      const content = [
-        h('div', {
-          class: `q-slider__track-container q-slider__track-container${ state.axis.value } absolute`
-        }, track),
-
-        h('div', {
-          class: `q-slider__thumb-container q-slider__thumb-container${ state.axis.value } absolute non-selectable` + thumbClass.value,
-          style: thumbStyle.value
-        }, child)
-      ]
-
-      const data = {
+      return h('div', {
         ref: rootRef,
         class: state.classes.value + (props.modelValue === null ? ' q-slider--no-value' : ''),
         ...state.attributes.value,
-        'aria-valuenow': props.modelValue,
-        tabindex: state.tabindex.value,
-        ...events.value
-      }
-
-      return hDir('div', data, content, 'slide', state.editable.value, () => state.panDirective.value)
+        'aria-valuenow': props.modelValue
+      }, content)
     }
   }
 })

package/src/components/slider/QSlider.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-form" ],
+  "mixins": [ "components/slider/use-slider" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/slider"
@@ -13,60 +13,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"
-    },
-
-    "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"
-    },
-
     "label-value": {
       "type": [ "String", "Number" ],
       "desc": "Override default label value",
@@ -74,56 +20,6 @@
         ":label-value=\"model + 'px'\""
       ],
       "category": "content"
-    },
-
-    "label-always": {
-      "type": "Boolean",
-      "desc": "Always display the label",
-      "category": "behavior|content"
-    },
-
-    "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 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"
-    },
-
-    "dark": {
-      "extends": "dark"
-    },
-
-    "dense": {
-      "extends": "dense"
-    },
-
-    "disable": {
-      "extends": "disable"
-    },
-
-    "readonly": {
-      "extends": "readonly"
-    },
-
-    "tabindex": {
-      "extends": "tabindex"
     }
   },
 
@@ -135,22 +31,6 @@
           "type": [ "Number", "null" ]
         }
       }
-    },
-
-    "change": {
-      "extends": "update:model-value",
-      "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" ]
-        }
-      }
     }
   }
 }