@v-c/slider 1.0.2 → 1.0.4

package/src/Tracks/Track.tsx

@@ -1,89 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,243 +0,0 @@
-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()
-    // 如果是点击 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