@v-c/slider 1.0.0

package/src/Tracks/Track.tsx

@@ -0,0 +1,89 @@
+import type { CSSProperties, PropType } from 'vue'
+import type { OnStartMove } from '../interface'
+import cls from 'classnames'
+import { defineComponent } from 'vue'
+import { useInjectSlider } from '../context'
+import { getOffset } from '../util'
+
+export interface TrackProps {
+  prefixCls: string
+  /** Replace with origin prefix concat className */
+  replaceCls?: string
+  start: number
+  end: number
+  index: number
+  onStartMove?: OnStartMove
+}
+
+const Track = defineComponent({
+  name: 'Track',
+  props: {
+    prefixCls: { type: String, required: true },
+    replaceCls: { type: String },
+    start: { type: Number, required: true },
+    end: { type: Number, required: true },
+    index: { type: Number, default: () => null },
+    onStartMove: { type: Function as PropType<OnStartMove> },
+  },
+  setup(props, { attrs }) {
+    const { direction, min, max, disabled, range, classNames } = useInjectSlider()
+
+    // ============================ Events ============================
+    const onInternalStartMove = (e: MouseEvent | TouchEvent) => {
+      if (!disabled && props.onStartMove) {
+        props.onStartMove(e, -1)
+      }
+    }
+
+    // ============================ Render ============================
+    const positionStyle: CSSProperties = {}
+
+    return () => {
+      const { prefixCls, index, onStartMove, replaceCls, start, end } = props
+
+      const offsetStart = getOffset(start, min.value, max.value)
+      const offsetEnd = getOffset(end, min.value, max.value)
+
+      const trackPrefixCls = `${prefixCls}-track`
+      const className
+        = replaceCls
+          || cls(
+            trackPrefixCls,
+            {
+              [`${trackPrefixCls}-${index + 1}`]: index !== null && range,
+              [`${prefixCls}-track-draggable`]: onStartMove,
+            },
+            classNames.track,
+          )
+      switch (direction.value) {
+        case 'rtl':
+          positionStyle.right = `${offsetStart * 100}%`
+          positionStyle.width = `${offsetEnd * 100 - offsetStart * 100}%`
+          break
+
+        case 'btt':
+          positionStyle.bottom = `${offsetStart * 100}%`
+          positionStyle.height = `${offsetEnd * 100 - offsetStart * 100}%`
+          break
+
+        case 'ttb':
+          positionStyle.top = `${offsetStart * 100}%`
+          positionStyle.height = `${offsetEnd * 100 - offsetStart * 100}%`
+          break
+
+        default:
+          positionStyle.left = `${offsetStart * 100}%`
+          positionStyle.width = `${offsetEnd * 100 - offsetStart * 100}%`
+      }
+      return (
+        <div
+          class={className}
+          style={{ ...positionStyle, ...attrs.style as CSSProperties }}
+          onMousedown={onStartMove ? onInternalStartMove : undefined}
+        />
+      )
+    }
+  },
+})
+
+export default Track

package/src/Tracks/index.tsx

@@ -0,0 +1,92 @@
+import type { CSSProperties, PropType } from 'vue'
+import type { OnStartMove } from '../interface'
+import cls from 'classnames'
+import { computed, defineComponent } from 'vue'
+import { useInjectSlider } from '../context'
+import { getIndex } from '../util'
+import Track from './Track'
+
+export interface TrackProps {
+  prefixCls: string
+  style?: CSSProperties | CSSProperties[]
+  values: number[]
+  onStartMove?: OnStartMove
+  startPoint?: number
+}
+
+const Tracks = defineComponent({
+  name: 'Tracks',
+  props: {
+    prefixCls: { type: String, required: true },
+    trackStyle: { type: [Object, Array] as PropType<CSSProperties | CSSProperties[]> },
+    values: { type: Array as PropType<number[]>, required: true },
+    onStartMove: { type: Function as PropType<OnStartMove> },
+    startPoint: { type: Number },
+  },
+  setup(props) {
+    const { included, range, min, styles, classNames } = useInjectSlider()
+
+    // =========================== List ===========================
+    const trackList = computed(() => {
+      if (!range) {
+        // null value do not have track
+        if (props.values.length === 0) {
+          return []
+        }
+
+        const startValue = props.startPoint ?? min.value
+        const endValue = props.values[0]
+
+        return [{ start: Math.min(startValue, endValue), end: Math.max(startValue, endValue) }]
+      }
+
+      // Multiple
+      const list: { start: number, end: number }[] = []
+
+      for (let i = 0; i < props.values.length - 1; i += 1) {
+        list.push({ start: props.values[i], end: props.values[i + 1] })
+      }
+
+      return list
+    })
+
+    return () => {
+      if (!included) {
+        return null
+      }
+
+      // ========================== Render ==========================
+      const tracksNode
+        = trackList.value?.length && (classNames.tracks || styles.tracks)
+          ? (
+              <Track
+                index={0}
+                prefixCls={props.prefixCls}
+                start={trackList.value[0].start}
+                end={trackList.value[trackList.value.length - 1].end}
+                replaceCls={cls(classNames.tracks, `${props.prefixCls}-tracks`)}
+                style={styles.tracks}
+              />
+            )
+          : null
+      return (
+        <>
+          {tracksNode}
+          {trackList.value.map(({ start, end }, index) => (
+            <Track
+              index={index}
+              prefixCls={props.prefixCls}
+              style={{ ...getIndex(props.trackStyle, index), ...styles?.track }}
+              start={start}
+              end={end}
+              key={index}
+              onStartMove={props.onStartMove}
+            />
+          ))}
+        </>
+      )
+    }
+  },
+})
+
+export default Tracks

package/src/context.ts

@@ -0,0 +1,65 @@
+import type { InjectionKey, ShallowRef } from 'vue'
+import type { AriaValueFormat, Direction, SliderClassNames, SliderStyles } from './interface'
+import { inject, provide } from 'vue'
+
+export interface SliderContextProps {
+  min: ShallowRef<number>
+  max: ShallowRef<number>
+  includedStart: number
+  includedEnd: number
+  direction: ShallowRef<Direction>
+  disabled?: boolean
+  keyboard?: boolean
+  included?: boolean
+  step: ShallowRef<number | null>
+  range?: boolean
+  tabIndex: number | number[]
+  ariaLabelForHandle?: string | string[]
+  ariaLabelledByForHandle?: string | string[]
+  ariaRequired?: boolean
+  ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[]
+  classNames: SliderClassNames
+  styles: SliderStyles
+}
+
+const SliderContextKey: InjectionKey<SliderContextProps> = Symbol('SliderContext')
+
+export const defaultSliderContextValue = {
+  min: 0,
+  max: 0,
+  direction: 'ltr',
+  step: 1,
+  includedStart: 0,
+  includedEnd: 0,
+  tabIndex: 0,
+  keyboard: true,
+  styles: {},
+  classNames: {},
+}
+
+export function useProviderSliderContext(ctx: SliderContextProps) {
+  provide(SliderContextKey, ctx)
+}
+export function useInjectSlider(): SliderContextProps {
+  return inject(SliderContextKey)!
+}
+
+export interface UnstableContextProps {
+  onDragStart?: (info: {
+    rawValues: number[]
+    draggingIndex: number
+    draggingValue: number
+  }) => void
+  onDragChange?: (info: {
+    rawValues: number[]
+    deleteIndex: number
+    draggingIndex: number
+    draggingValue: number
+  }) => void
+}
+
+/** @private NOT PROMISE AVAILABLE. DO NOT USE IN PRODUCTION. */
+export const UnstableContextKey: InjectionKey<UnstableContextProps> = Symbol('UnstableContext')
+
+// 默认值
+export const defaultUnstableContextValue: UnstableContextProps = {}

package/src/hooks/useDrag.ts

@@ -0,0 +1,244 @@
+import type { Ref, ShallowRef } from 'vue'
+import type { Direction, OnStartMove } from '../interface'
+import type { OffsetValues } from './useOffset'
+import useEvent from '@v-c/util/dist/hooks/useEvent'
+import { computed, inject, onUnmounted, ref } from 'vue'
+import { defaultUnstableContextValue, UnstableContextKey } from '../context'
+
+/** Drag to delete offset. It's a user experience number for dragging out */
+const REMOVE_DIST = 130
+
+function getPosition(e: MouseEvent | TouchEvent) {
+  const obj = 'targetTouches' in e ? e.targetTouches[0] : e
+
+  return { pageX: obj.pageX, pageY: obj.pageY }
+}
+
+function useDrag(
+  containerRef: Ref<HTMLDivElement>,
+  direction: ShallowRef<Direction>,
+  rawValues: Ref<number[]>,
+  min: ShallowRef<number>,
+  max: ShallowRef<number>,
+  formatValue: (value: number) => number,
+  triggerChange: (values: number[]) => void,
+  finishChange: (draggingDelete: boolean) => void,
+  offsetValues: OffsetValues,
+  editable: boolean,
+  minCount: number,
+): [
+    draggingIndex: Ref<number>,
+    draggingValue: Ref<number>,
+    draggingDelete: Ref<boolean>,
+    returnValues: Ref<number[]>,
+    onStartMove: OnStartMove,
+  ] {
+  const draggingValue = ref<number | null>(null)
+  const draggingIndex = ref<number>(-1)
+  const draggingDelete = ref<boolean>(false)
+  const cacheValues = ref<number[]>(rawValues.value)
+  const originValues = ref<number[]>(rawValues.value)
+
+  const mouseMoveEventRef = ref<((event: MouseEvent | TouchEvent) => void) | null>(null)
+  const mouseUpEventRef = ref<((event: MouseEvent | TouchEvent) => void) | null>(null)
+  const touchEventTargetRef = ref<EventTarget | null>(null)
+
+  const unstableContext = inject(UnstableContextKey, defaultUnstableContextValue)
+  const { onDragStart, onDragChange } = unstableContext
+
+  if (draggingIndex.value === -1) {
+    cacheValues.value = rawValues.value
+  }
+
+  // Clean up event
+  onUnmounted(() => {
+    document.removeEventListener('mousemove', mouseMoveEventRef.value)
+    document.removeEventListener('mouseup', mouseUpEventRef.value)
+    if (touchEventTargetRef.value) {
+      touchEventTargetRef.value.removeEventListener('touchmove', mouseMoveEventRef.value)
+      touchEventTargetRef.value.removeEventListener('touchend', mouseUpEventRef.value)
+    }
+  })
+
+  const flushValues = (nextValues: number[], nextValue?: number, deleteMark?: boolean) => {
+    // Perf: Only update state when value changed
+    if (nextValue !== undefined) {
+      draggingValue.value = nextValue
+    }
+    cacheValues.value = nextValues
+
+    let changeValues = nextValues
+    if (deleteMark) {
+      changeValues = nextValues.filter((_, i) => i !== draggingIndex.value)
+    }
+    triggerChange(changeValues)
+
+    if (onDragChange) {
+      onDragChange({
+        rawValues: nextValues,
+        deleteIndex: deleteMark ? draggingIndex.value : -1,
+        draggingIndex: draggingIndex.value,
+        draggingValue: nextValue!,
+      })
+    }
+  }
+
+  const updateCacheValue = useEvent(
+    (valueIndex: number, offsetPercent: number, deleteMark: boolean) => {
+      if (valueIndex === -1) {
+        // >>>> Dragging on the track
+        const startValue = originValues.value[0]
+        const endValue = originValues.value[originValues.value.length - 1]
+        const maxStartOffset = min.value - startValue
+        const maxEndOffset = max.value - endValue
+
+        // Get valid offset
+        let offset = offsetPercent * (max.value - min.value)
+        offset = Math.max(offset, maxStartOffset)
+        offset = Math.min(offset, maxEndOffset)
+
+        // Use first value to revert back of valid offset (like steps marks)
+        const formatStartValue = formatValue(startValue + offset)
+        offset = formatStartValue - startValue
+        const cloneCacheValues = originValues.value.map<number>(val => val + offset)
+        flushValues(cloneCacheValues)
+      }
+      else {
+        // >>>> Dragging on the handle
+        const offsetDist = (max.value - min.value) * offsetPercent
+
+        // Always start with the valueIndex origin value
+        const cloneValues = [...cacheValues.value]
+        cloneValues[valueIndex] = originValues.value[valueIndex]
+
+        const next = offsetValues(cloneValues, offsetDist, valueIndex, 'dist')
+
+        flushValues(next.values, next.value, deleteMark)
+      }
+    },
+  )
+
+  const onStartMove: OnStartMove = (e, valueIndex, startValues?: number[]) => {
+    e.stopPropagation()
+    console.log('onStartMove', valueIndex)
+    // 如果是点击 track 触发的，需要传入变化后的初始值，而不能直接用 rawValues
+    const initialValues = startValues || rawValues.value
+    const originValue = initialValues[valueIndex]
+
+    draggingIndex.value = valueIndex
+    draggingValue.value = originValue
+    originValues.value = initialValues
+    cacheValues.value = initialValues
+    draggingDelete.value = false
+
+    const { pageX: startX, pageY: startY } = getPosition(e)
+
+    // We declare it here since closure can't get outer latest value
+    let deleteMark = false
+
+    // Internal trigger event
+    if (onDragStart) {
+      onDragStart({
+        rawValues: initialValues,
+        draggingIndex: valueIndex,
+        draggingValue: originValue,
+      })
+    }
+
+    // Moving
+    const onMouseMove = (event: MouseEvent | TouchEvent) => {
+      event.preventDefault()
+      const { pageX: moveX, pageY: moveY } = getPosition(event)
+      const offsetX = moveX - startX
+      const offsetY = moveY - startY
+
+      const { width, height } = containerRef.value.getBoundingClientRect()
+
+      let offSetPercent: number
+      let removeDist: number
+
+      switch (direction.value) {
+        case 'btt':
+          offSetPercent = -offsetY / height
+          removeDist = offsetX
+          break
+
+        case 'ttb':
+          offSetPercent = offsetY / height
+          removeDist = offsetX
+          break
+
+        case 'rtl':
+          offSetPercent = -offsetX / width
+          removeDist = offsetY
+          break
+
+        default:
+          offSetPercent = offsetX / width
+          removeDist = offsetY
+      }
+
+      // Check if need mark remove
+      deleteMark = editable
+        ? Math.abs(removeDist) > REMOVE_DIST && minCount < cacheValues.value.length
+        : false
+      draggingDelete.value = deleteMark
+
+      updateCacheValue(valueIndex, offSetPercent, deleteMark)
+    }
+
+    // End
+    const onMouseUp = (event: MouseEvent | TouchEvent) => {
+      event.preventDefault()
+
+      document.removeEventListener('mouseup', onMouseUp)
+      document.removeEventListener('mousemove', onMouseMove)
+      if (touchEventTargetRef.value) {
+        touchEventTargetRef.value.removeEventListener('touchmove', mouseMoveEventRef.value)
+        touchEventTargetRef.value.removeEventListener('touchend', mouseUpEventRef.value)
+      }
+      mouseMoveEventRef.value = null
+      mouseUpEventRef.value = null
+      touchEventTargetRef.value = null
+
+      finishChange(deleteMark)
+
+      draggingIndex.value = -1
+      draggingDelete.value = false
+    }
+
+    document.addEventListener('mouseup', onMouseUp)
+    document.addEventListener('mousemove', onMouseMove)
+    e.currentTarget.addEventListener('touchend', onMouseUp)
+    e.currentTarget.addEventListener('touchmove', onMouseMove)
+    mouseMoveEventRef.value = onMouseMove
+    mouseUpEventRef.value = onMouseUp
+    touchEventTargetRef.value = e.currentTarget
+  }
+
+  // Only return cache value when it mapping with rawValues
+  const returnValues = computed(() => {
+    const sourceValues = [...rawValues.value].sort((a, b) => a - b)
+    const targetValues = [...cacheValues.value].sort((a, b) => a - b)
+
+    const counts: Record<number, number> = {}
+    targetValues.forEach((val) => {
+      counts[val] = (counts[val] || 0) + 1
+    })
+    sourceValues.forEach((val) => {
+      counts[val] = (counts[val] || 0) - 1
+    })
+
+    const maxDiffCount = editable ? 1 : 0
+    const diffCount: number = Object.values(counts).reduce(
+      (prev, next) => prev + Math.abs(next),
+      0,
+    )
+
+    return diffCount <= maxDiffCount ? cacheValues.value : rawValues.value
+  })
+
+  return [draggingIndex, draggingValue, draggingDelete, returnValues, onStartMove]
+}
+
+export default useDrag