@v-c/slider 1.0.3 → 1.0.5

package/src/Handles/Handle.tsx

@@ -1,232 +0,0 @@
-import type { CSSProperties, PropType } from 'vue'
-import type { OnStartMove, SliderClassNames, SliderStyles } from '../interface'
-import KeyCode from '@v-c/util/dist/KeyCode'
-import cls from 'classnames'
-import { defineComponent, ref } from 'vue'
-import { useInjectSlider } from '../context'
-import { getDirectionStyle, getIndex } from '../util'
-
-export interface RenderProps {
-  index: number
-  prefixCls: string
-  value: number
-  dragging: boolean
-  draggingDelete: boolean
-  node: any
-}
-
-export default defineComponent({
-  name: 'Handle',
-  props: {
-    prefixCls: { type: String, required: true },
-    value: { type: Number, required: true },
-    valueIndex: { type: Number, required: true },
-    dragging: { type: Boolean, default: false },
-    draggingDelete: { type: Boolean, default: false },
-    onStartMove: { type: Function as PropType<OnStartMove>, required: true },
-    onDelete: { type: Function as PropType<(index: number) => void>, required: true },
-    onOffsetChange: { type: Function as PropType<(value: number | 'min' | 'max', valueIndex: number) => void>, required: true },
-    onFocus: { type: Function as PropType<(e: FocusEvent, index: number) => void>, required: true },
-    onMouseenter: { type: Function as PropType<(e: MouseEvent, index: number) => void>, required: true },
-    render: { type: Function as PropType<(v: RenderProps) => any> },
-    onChangeComplete: Function as PropType<() => void>,
-    mock: Boolean,
-    classNames: Object as PropType<SliderClassNames>,
-    styles: Object as PropType<SliderStyles>,
-  },
-  emits: ['focus', 'mouseenter', 'startMove', 'delete', 'offsetChange', 'changeComplete'],
-  setup(props, { attrs, emit, expose }) {
-    const {
-      min,
-      max,
-      direction,
-      disabled,
-      keyboard,
-      range,
-      tabIndex,
-      ariaLabelForHandle,
-      ariaLabelledByForHandle,
-      ariaRequired,
-      ariaValueTextFormatterForHandle,
-    } = useInjectSlider()
-
-    const divProps = ref({})
-    const handleClass = ref({})
-    const handleStyle = ref({})
-
-    // ============================ Events ============================
-    const onInternalStartMove = (e: MouseEvent | TouchEvent) => {
-      if (!disabled) {
-        emit('startMove', e, props.valueIndex)
-      }
-    }
-
-    const onInternalFocus = (e: FocusEvent) => {
-      emit('focus', e, props.valueIndex)
-    }
-
-    const onInternalMouseEnter = (e: MouseEvent) => {
-      emit('mouseenter', e, props.valueIndex)
-    }
-
-    // =========================== Keyboard ===========================
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (!disabled && keyboard) {
-        let offset: number | 'min' | 'max' | null = null
-
-        // Change the value
-        switch (e.which || e.keyCode) {
-          case KeyCode.LEFT:
-            offset = direction.value === 'ltr' || direction.value === 'btt' ? -1 : 1
-            break
-
-          case KeyCode.RIGHT:
-            offset = direction.value === 'ltr' || direction.value === 'btt' ? 1 : -1
-            break
-
-          // Up is plus
-          case KeyCode.UP:
-            offset = direction.value !== 'ttb' ? 1 : -1
-            break
-
-          // Down is minus
-          case KeyCode.DOWN:
-            offset = direction.value !== 'ttb' ? -1 : 1
-            break
-
-          case KeyCode.HOME:
-            offset = 'min'
-            break
-
-          case KeyCode.END:
-            offset = 'max'
-            break
-
-          case KeyCode.PAGE_UP:
-            offset = 2
-            break
-
-          case KeyCode.PAGE_DOWN:
-            offset = -2
-            break
-
-          case KeyCode.BACKSPACE:
-          case KeyCode.DELETE:
-            emit('delete', e, props.valueIndex)
-            break
-        }
-
-        if (offset !== null) {
-          e.preventDefault()
-          emit('offsetChange', offset, props.valueIndex)
-        }
-      }
-    }
-
-    const handleKeyUp = (e: KeyboardEvent) => {
-      switch (e.which || e.keyCode) {
-        case KeyCode.LEFT:
-        case KeyCode.RIGHT:
-        case KeyCode.UP:
-        case KeyCode.DOWN:
-        case KeyCode.HOME:
-        case KeyCode.END:
-        case KeyCode.PAGE_UP:
-        case KeyCode.PAGE_DOWN:
-          emit('changeComplete')
-          break
-      }
-    }
-    expose({
-      focus: () => props.valueIndex,
-    })
-
-    return () => {
-      const {
-        prefixCls,
-        value,
-        valueIndex,
-        onStartMove,
-        onDelete,
-        render,
-        dragging,
-        draggingDelete,
-        onOffsetChange,
-        onChangeComplete,
-        onFocus,
-        onMouseenter,
-        styles,
-        classNames,
-        ...restProps
-      } = props
-      // ============================ Offset ============================
-      const positionStyle = getDirectionStyle(direction.value, value, min.value, max.value)
-      // ============================ Render ============================
-
-      if (valueIndex !== null) {
-        divProps.value = {
-          'tabindex': disabled ? null : getIndex(tabIndex, valueIndex),
-          'role': 'slider',
-          'aria-valuemin': min.value,
-          'aria-valuemax': max.value,
-          'aria-valuenow': value,
-          'aria-disabled': disabled,
-          'aria-label': getIndex(ariaLabelForHandle, valueIndex),
-          'aria-labelledby': getIndex(ariaLabelledByForHandle, valueIndex),
-          'aria-required': getIndex(ariaRequired, valueIndex),
-          'aria-valuetext': getIndex(ariaValueTextFormatterForHandle, valueIndex)?.(value),
-          'aria-orientation': direction.value === 'ltr' || direction.value === 'rtl' ? 'horizontal' : 'vertical',
-          'onMousedown': onInternalStartMove,
-          'onTouchstart': onInternalStartMove,
-          'onFocus': onInternalFocus,
-          'onMouseenter': onInternalMouseEnter,
-          'onKeydown': onKeyDown,
-          'onKeyup': handleKeyUp,
-          ...restProps,
-        }
-      }
-      else {
-        divProps.value = {
-          ...restProps,
-        }
-      }
-      const handlePrefixCls = `${prefixCls}-handle`
-      handleClass.value = cls(
-        handlePrefixCls,
-        {
-          [`${handlePrefixCls}-${valueIndex + 1}`]: valueIndex !== null && range,
-          [`${handlePrefixCls}-dragging`]: dragging,
-          [`${handlePrefixCls}-dragging-delete`]: draggingDelete,
-        },
-        classNames?.handle,
-      )
-      handleStyle.value = {
-        ...positionStyle,
-        ...attrs.style as CSSProperties,
-        ...styles?.handle,
-      }
-      const handleNode = (
-        <div
-          class={handleClass.value}
-          style={handleStyle.value}
-          {...divProps.value}
-        />
-      )
-      // Customize
-      if (render) {
-        const renderProps = {
-          index: valueIndex,
-          prefixCls,
-          value,
-          dragging,
-          draggingDelete,
-          node: handleNode,
-        }
-
-        const RenderNode = () => render(renderProps)
-        return <RenderNode />
-      }
-      return handleNode
-    }
-  },
-})

package/src/Handles/index.tsx

@@ -1,132 +0,0 @@
-import type { CSSProperties, PropType, SlotsType } from 'vue'
-import type { OnStartMove } from '../interface'
-import { defineComponent, ref } from 'vue'
-import { getIndex } from '../util'
-import Handle from './Handle'
-
-export interface RenderProps {
-	index: number
-	prefixCls: string
-	value: number
-	dragging: boolean
-	draggingDelete: boolean
-	node: any
-}
-export interface HandlesRef {
-  focus: (index: number) => void
-  hideHelp: VoidFunction
-}
-
-export default defineComponent({
-  name: 'Handles',
-  props: {
-    prefixCls: { type: String, required: true },
-    values: { type: Array, required: true },
-    handleStyle: { type: [Object, Array] as PropType<CSSProperties | CSSProperties[]> },
-    onStartMove: { type: Function as PropType<OnStartMove>, required: true },
-    onOffsetChange: { type: Function as PropType<(value: number | 'min' | 'max', valueIndex: number) => void>, required: true },
-    onFocus: { type: Function as PropType<(e: FocusEvent) => void> },
-    onBlur: { type: Function as PropType<(e: FocusEvent) => void> },
-    onDelete: { type: Function as PropType<(index: number) => void>, required: true },
-    handleRender: { type: Function as PropType<(props: RenderProps) => any> },
-    activeHandleRender: { type: Function as PropType<(props: RenderProps) => any> },
-    draggingIndex: { type: Number, default: -1 },
-    draggingDelete: { type: Boolean, default: false },
-    onChangeComplete: Function as PropType<() => void>,
-  },
-  emits: ['focus'],
-  slots: Object as SlotsType<{
-    activeHandleRender: any
-    handleRender: any
-  }>,
-  setup(props, { emit, expose }) {
-    const handlesRef = ref()
-
-    // =========================== Active ===========================
-    const activeVisible = ref(false)
-    const activeIndex = ref(-1)
-
-    const onActive = (index: number) => {
-      activeIndex.value = index
-      activeVisible.value = true
-    }
-
-    const onHandleFocus = (e: FocusEvent, index: number) => {
-      onActive(index)
-      emit('focus', e)
-    }
-
-    const onHandleMouseEnter = (_e: MouseEvent, index: number) => {
-      onActive(index)
-    }
-
-    expose({
-      focus: () => handlesRef.value?.focus(),
-      hideHelp: () => {
-        activeVisible.value = false
-      },
-    })
-
-    return () => {
-      const {
-        prefixCls,
-        onStartMove,
-        onOffsetChange,
-        values,
-        handleRender,
-        activeHandleRender,
-        draggingIndex,
-        draggingDelete,
-        onFocus,
-        handleStyle,
-        ...restProps
-      } = props
-
-      // =========================== Render ===========================
-      // Handle Props
-      const handleProps = {
-        prefixCls,
-        onStartMove,
-        onOffsetChange,
-        render: handleRender,
-        onFocus: onHandleFocus,
-        onMouseenter: onHandleMouseEnter,
-        ...restProps,
-      }
-      return (
-        <>
-          {values?.map((value: unknown, index: number) => {
-            const dragging = draggingIndex === index
-            return (
-              <Handle
-                ref={handlesRef.value}
-                dragging={dragging}
-                draggingDelete={dragging && draggingDelete}
-                style={getIndex(handleStyle, index)}
-                key={index}
-                value={value as number}
-                valueIndex={index}
-                {...handleProps}
-              />
-            )
-          })}
-
-          {/* Used for render tooltip, this is not a real handle */}
-          {activeHandleRender && activeVisible.value && (
-            <Handle
-              key="a11y"
-              {...handleProps}
-              value={values[activeIndex.value] as number}
-              valueIndex={1}
-              dragging={draggingIndex !== -1}
-              draggingDelete={draggingDelete}
-              render={activeHandleRender}
-              style={{ pointerEvents: 'none' }}
-              aria-hidden
-            />
-          )}
-        </>
-      )
-    }
-  },
-})

package/src/Marks/Mark.tsx

@@ -1,40 +0,0 @@
-import type { CSSProperties, FunctionalComponent } from 'vue'
-import classNames from 'classnames'
-import { useInjectSlider } from '../context'
-import { getDirectionStyle } from '../util'
-
-export interface MarkProps {
-  prefixCls: string
-  value: number
-  style?: CSSProperties
-  onClick?: Function
-}
-
-const Mark: FunctionalComponent<MarkProps> = (props, { attrs, slots, emit }) => {
-  const { prefixCls, value } = props
-  const { min, max, direction, includedStart, includedEnd, included } = useInjectSlider()
-
-  const textCls = `${prefixCls}-text`
-
-  // ============================ Offset ============================
-  const positionStyle = getDirectionStyle(direction.value, value, min.value, max.value)
-
-  return (
-    <span
-      class={classNames(textCls, {
-        [`${textCls}-active`]: included && includedStart <= value && value <= includedEnd,
-      })}
-      style={{ ...positionStyle, ...attrs.style as CSSProperties }}
-      onMousedown={(e: MouseEvent) => {
-        e.stopPropagation()
-      }}
-      onClick={() => {
-        emit('click', value)
-      }}
-    >
-      {slots.default?.()}
-    </span>
-  )
-}
-
-export default Mark

package/src/Marks/index.tsx

@@ -1,40 +0,0 @@
-import type { CSSProperties, FunctionalComponent } from 'vue'
-import Mark from './Mark'
-
-export interface MarkObj {
-  style?: CSSProperties
-  label?: any
-}
-
-export interface InternalMarkObj extends MarkObj {
-  value: number
-}
-
-export interface MarksProps {
-  prefixCls: string
-  marks?: InternalMarkObj[]
-  onClick?: (value: number) => void
-}
-
-const Marks: FunctionalComponent<MarksProps> = (props, { emit, slots }) => {
-  const { prefixCls, marks = [] } = props
-
-  const markPrefixCls = `${prefixCls}-mark`
-
-  // Not render mark if empty
-  if (!marks.length) {
-    return null
-  }
-
-  return (
-    <div class={markPrefixCls}>
-      {marks.map(({ value, style, label }) => (
-        <Mark key={value} prefixCls={markPrefixCls} style={style} value={value} onClick={() => emit('click', value)}>
-          {slots.mark?.({ point: value, label }) || label}
-        </Mark>
-      ))}
-    </div>
-  )
-}
-
-export default Marks