quasar 2.1.0

package/src/components/slider/QSlider.sass

@@ -0,0 +1,225 @@
+.q-slider
+  position: relative
+  color: var(--q-primary)
+  outline: 0
+
+  &--h
+    width: 100%
+    height: 40px
+  &--v
+    width: 40px
+    height: 200px
+
+  &__track-container
+    background: rgba(0,0,0,.26)
+
+    &--h
+      top: 50%
+      margin-top: -1px
+      width: 100%
+      height: 2px
+    &--v
+      left: 50%
+      margin-left: -1px
+      height: 100%
+      width: 2px
+
+  &__track
+    background: currentColor
+
+    &--h
+      will-change: width, left
+      top: 0
+      bottom: 0
+    &--v
+      will-change: height, top
+      left: 0
+      right: 0
+
+  &__track-markers
+    color: #000
+
+    &--h
+      background-image: repeating-linear-gradient(to right, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
+    &--v
+      background-image: repeating-linear-gradient(to top, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
+
+    &:after
+      content: ''
+      position: absolute
+      right: 0
+      top: 0
+      bottom: 0
+      height: 2px
+      width: 2px
+      background: currentColor
+
+  &__thumb-container
+    width: 20px
+    height: 20px
+    outline: 0
+
+    &--h
+      top: 50%
+      margin-top: -10px
+      transform: translateX(-10px) #{"/* rtl:ignore */"}
+      will-change: left
+    &--v
+      left: 50%
+      margin-left: -10px
+      transform: translateY(-10px)
+      will-change: top
+
+  &__thumb
+    top: 0
+    left: 0
+    transform: scale(1)
+    transition: transform .18s ease-out, fill .18s ease-out, stroke .18s ease-out
+    stroke-width: 3.5
+    stroke: currentColor
+
+    path
+      stroke: currentColor
+      fill: currentColor
+
+  &__focus-ring
+    width: 20px
+    height: 20px
+    transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out
+    border-radius: 50%
+    opacity: 0
+    transition-delay: .14s
+
+  &__arrow
+    position: absolute
+    width: 0
+    height: 0
+    transform-origin: 50% 50%
+    transition: transform 100ms ease-out
+
+    &--h
+      top: 19px
+      left: 4px
+      border-top: 6px solid currentColor
+      border-left: 6px solid transparent
+      border-right: 6px solid transparent
+      transform: scale(0) translateY(0)
+    &--v
+      top: 4px
+      left: 15px
+      border-top: 6px solid transparent
+      border-bottom: 6px solid transparent
+      border-right: 6px solid currentColor
+      transform: scale(0) translateX(-20px)
+
+  &__pin
+    transition: transform 100ms ease-out
+    z-index: 1
+    white-space: nowrap
+
+    &--h
+      bottom: 0
+      right: 0
+      transform: scale(0) translateY(0)
+      will-change: left
+    &--v
+      top: 50%
+      left: 20px
+      height: 0
+      transform: scale(0) translateX(-20px)
+      will-change: top
+      transform-origin: left center
+
+    &-text-container
+      min-height: 25px
+      padding: 2px 8px
+      border-radius: $generic-border-radius
+      background: currentColor
+      position: relative
+      text-align: center
+
+      &--h
+        right: -50%
+      &--v
+        transform: translateY(-50%)
+
+    &-text
+      color: #fff
+      font-size: 12px
+
+  &--editable
+    cursor: grab
+
+  &--no-value
+    .q-slider__thumb, .q-slider__track
+      visibility: hidden
+
+  &--focus
+    .q-slider__thumb
+      transform: scale(1)
+
+  &--focus, body.desktop &.q-slider--editable:hover
+    .q-slider__focus-ring
+      background: currentColor
+      transform: scale3d(1.55, 1.55, 1)
+      opacity: .25
+    .q-slider__thumb, .q-slider__track
+      visibility: visible
+
+  &--inactive
+    .q-slider__thumb-container
+      &--h
+        transition: left .28s, right .28s
+      &--v
+        transition: top .28s, bottom .28s
+
+    .q-slider__track
+      &--h
+        transition: width .28s, left .28s, right .28s
+      &--v
+        transition: height .28s, top .28s, bottom .28s
+
+  &--active
+    cursor: grabbing
+
+    .q-slider__thumb
+      transform: scale(1.5)
+
+    .q-slider__focus-ring, &.q-slider--label .q-slider__thumb
+      transform: scale(0) !important
+
+  body.desktop &.q-slider--enabled:hover
+    .q-slider__pin,
+    .q-slider__arrow
+      &--h
+        transform: scale(1) translateY(-25px)
+      &--v
+        transform: scale(1) translateX(5px)
+
+  &--label
+    &.q-slider--active, .q-slider--focus, &.q-slider--label-always
+      .q-slider__pin,
+      .q-slider__arrow
+        &--h
+          transform: scale(1) translateY(-25px)
+        &--v
+          transform: scale(1) translateX(5px)
+
+  &--dark
+    .q-slider__track-container
+      background: rgba(#fff, .3)
+    .q-slider__track-markers
+      color: #fff
+
+  &--reversed
+    .q-slider__thumb-container
+      &--h
+        transform: translateX(10px) #{"/* rtl:ignore */"}
+      &--v
+        transform: translateY(10px)
+
+  &--dense
+    &--h
+      height: 20px
+    &--v
+      width: 20px

package/src/components/slider/index.js

@@ -0,0 +1,5 @@
+import QSlider from './QSlider.js'
+
+export {
+  QSlider
+}

package/src/components/slider/use-slider.js

@@ -0,0 +1,304 @@
+import { h, ref, computed, onBeforeUnmount, getCurrentInstance } from 'vue'
+
+import TouchPan from '../../directives/TouchPan.js'
+
+import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+
+import { between } from '../../utils/format.js'
+import { position } from '../../utils/event.js'
+
+// PGDOWN, LEFT, DOWN, PGUP, RIGHT, UP
+export const keyCodes = [ 34, 37, 40, 33, 39, 38 ]
+
+export function getRatio (evt, dragging, reverse, vertical) {
+  const
+    pos = position(evt),
+    val = vertical === true
+      ? between((pos.top - dragging.top) / dragging.height, 0, 1)
+      : between((pos.left - dragging.left) / dragging.width, 0, 1)
+
+  return reverse === true ? 1.0 - val : val
+}
+
+export function getModel (ratio, min, max, step, decimals) {
+  let model = min + ratio * (max - min)
+
+  if (step > 0) {
+    const modulo = (model - min) % step
+    model += (Math.abs(modulo) >= step / 2 ? (modulo < 0 ? -1 : 1) * step : 0) - modulo
+  }
+
+  if (decimals > 0) {
+    model = parseFloat(model.toFixed(decimals))
+  }
+
+  return between(model, min, max)
+}
+
+export const useSliderProps = {
+  ...useDarkProps,
+
+  min: {
+    type: Number,
+    default: 0
+  },
+  max: {
+    type: Number,
+    default: 100
+  },
+  step: {
+    type: Number,
+    default: 1,
+    validator: v => v >= 0
+  },
+
+  color: String,
+
+  labelColor: String,
+  labelTextColor: String,
+  dense: Boolean,
+
+  label: Boolean,
+  labelAlways: Boolean,
+  markers: Boolean,
+  snap: Boolean,
+
+  vertical: Boolean,
+  reverse: Boolean,
+
+  disable: Boolean,
+  readonly: Boolean,
+  tabindex: [ String, Number ],
+
+  thumbPath: {
+    type: String,
+    default: 'M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0'
+  }
+}
+
+export const useSliderEmits = [ 'pan', 'update:modelValue', 'change' ]
+
+export default function ({ updateValue, updatePosition, getDragging }) {
+  const { props, emit, proxy: { $q } } = getCurrentInstance()
+  const isDark = useDark(props, $q)
+
+  const active = ref(false)
+  const preventFocus = ref(false)
+  const focus = ref(false)
+  const dragging = ref(false)
+
+  const axis = computed(() => (props.vertical === true ? '--v' : '--h'))
+
+  const isReversed = computed(() => (
+    props.vertical === true
+      ? props.reverse === true
+      : props.reverse !== ($q.lang.rtl === true)
+  ))
+
+  const editable = computed(() => props.disable !== true && props.readonly !== true && props.min < props.max)
+
+  const classes = computed(() =>
+    `q-slider q-slider${ axis.value } q-slider--${ active.value === true ? '' : 'in' }active`
+    + (isReversed.value === true ? ' q-slider--reversed' : '')
+    + (props.color !== void 0 ? ` text-${ props.color }` : '')
+    + (props.disable === true ? ' disabled' : ' q-slider--enabled' + (editable.value === true ? ' q-slider--editable' : ''))
+    + (focus.value === 'both' ? ' q-slider--focus' : '')
+    + (props.label || props.labelAlways === true ? ' q-slider--label' : '')
+    + (props.labelAlways === true ? ' q-slider--label-always' : '')
+    + (isDark.value === true ? ' q-slider--dark' : '')
+    + (props.dense === true ? ' q-slider--dense q-slider--dense' + axis.value : '')
+  )
+
+  const decimals = computed(() => (String(props.step).trim('0').split('.')[ 1 ] || '').length)
+  const step = computed(() => (props.step === 0 ? 1 : props.step))
+  const minMaxDiff = computed(() => props.max - props.min)
+
+  const markerStyle = computed(() => {
+    if (minMaxDiff.value !== 0) {
+      const size = 100 * step.value / minMaxDiff.value
+
+      return {
+        backgroundSize: props.vertical === true
+          ? `2px ${ size }%`
+          : `${ size }% 2px`
+      }
+    }
+
+    return null
+  })
+
+  const tabindex = computed(() => (editable.value === true ? props.tabindex || 0 : -1))
+
+  const positionProp = computed(() => (
+    props.vertical === true
+      ? (isReversed.value === true ? 'bottom' : 'top')
+      : isReversed.value === true ? 'right' : 'left'
+  ))
+
+  const sizeProp = computed(() => (props.vertical === true ? 'height' : 'width'))
+
+  const orientation = computed(() => (props.vertical === true ? 'vertical' : 'horizontal'))
+
+  const attributes = computed(() => {
+    const acc = {
+      role: 'slider',
+      'aria-valuemin': props.min,
+      'aria-valuemax': props.max,
+      'aria-orientation': orientation.value,
+      'data-step': props.step
+    }
+
+    if (props.disable === true) {
+      acc[ 'aria-disabled' ] = 'true'
+    }
+    else if (props.readonly === true) {
+      acc[ 'aria-readonly' ] = 'true'
+    }
+
+    return acc
+  })
+
+  const panDirective = computed(() => {
+    // if editable.value === true
+    return [ [
+      TouchPan,
+      onPan,
+      void 0,
+      {
+        [ orientation.value ]: true,
+        prevent: true,
+        stop: true,
+        mouse: true,
+        mouseAllDir: true
+      }
+    ] ]
+  })
+
+  function getThumbSvg () {
+    return h('svg', {
+      class: 'q-slider__thumb absolute',
+      viewBox: '0 0 20 20',
+      width: '20',
+      height: '20',
+      'aria-hidden': 'true'
+    }, [
+      h('path', { d: props.thumbPath })
+    ])
+  }
+
+  function getPinStyle (percent, ratio) {
+    if (props.vertical === true) {
+      return {}
+    }
+
+    const offset = `${ Math.ceil(20 * Math.abs(0.5 - ratio)) }px`
+    return {
+      pin: {
+        transformOrigin: `${ $q.lang.rtl === true ? offset : `calc(100% - ${ offset })` } 50%`
+      },
+
+      pinTextContainer: {
+        [ $q.lang.rtl === true ? 'left' : 'right' ]: `${ percent * 100 }%`,
+        transform: `translateX(${ Math.ceil(($q.lang.rtl === true ? -1 : 1) * 20 * percent) }px)`
+      }
+    }
+  }
+
+  function onPan (event) {
+    if (event.isFinal) {
+      if (dragging.value !== void 0) {
+        updatePosition(event.evt)
+        // only if touch, because we also have mousedown/up:
+        event.touch === true && updateValue(true)
+        dragging.value = void 0
+        emit('pan', 'end')
+      }
+      active.value = false
+    }
+    else if (event.isFirst) {
+      dragging.value = getDragging(event.evt)
+      updatePosition(event.evt)
+      updateValue()
+      active.value = true
+      emit('pan', 'start')
+    }
+    else {
+      updatePosition(event.evt)
+      updateValue()
+    }
+  }
+
+  function onBlur () {
+    focus.value = false
+  }
+
+  function onActivate (evt) {
+    updatePosition(evt, getDragging(evt))
+    updateValue()
+
+    preventFocus.value = true
+    active.value = true
+
+    document.addEventListener('mouseup', onDeactivate, true)
+  }
+
+  function onDeactivate () {
+    preventFocus.value = false
+
+    if (dragging.value === void 0) {
+      active.value = false
+    }
+
+    updateValue(true)
+    onBlur()
+
+    document.removeEventListener('mouseup', onDeactivate, true)
+  }
+
+  function onMobileClick (evt) {
+    updatePosition(evt, getDragging(evt))
+    updateValue(true)
+  }
+
+  function onKeyup (evt) {
+    if (keyCodes.includes(evt.keyCode)) {
+      updateValue(true)
+    }
+  }
+
+  onBeforeUnmount(() => {
+    document.removeEventListener('mouseup', onDeactivate, true)
+  })
+
+  return {
+    state: {
+      active,
+      focus,
+      preventFocus,
+      dragging,
+
+      axis,
+      isReversed,
+      editable,
+      classes,
+      decimals,
+      step,
+      minMaxDiff,
+      markerStyle,
+      tabindex,
+      positionProp,
+      sizeProp,
+      attributes,
+      panDirective
+    },
+
+    methods: {
+      onActivate,
+      onMobileClick,
+      onBlur,
+      onKeyup,
+      getThumbSvg,
+      getPinStyle
+    }
+  }
+}