@v-c/slider 1.0.0

package/docs/sliderDemo.vue

@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import Slider from '@v-c/slider'
+import { ref } from 'vue'
+import TooltipSlider from './TooltipSlider'
+
+const style: CSSProperties = {
+  width: '600px',
+  margin: '50px',
+}
+
+function log(value: unknown) {
+  console.log(value) //eslint-disable-line
+}
+
+function percentFormatter(v: unknown) {
+  return `${v} %`
+}
+
+// NullableSlider组件
+const nullableSliderValue = ref(null)
+
+function onNullableSliderChange(newValue: any) {
+  log(newValue)
+  nullableSliderValue.value = newValue
+}
+
+function onNullableSliderAfterChange(newValue: unknown) {
+  console.log(newValue) //eslint-disable-line
+}
+
+function resetNullableSlider() {
+  console.log('reset value')
+  nullableSliderValue.value = null
+}
+
+// NullableRangeSlider组件
+const nullableRangeValue = ref(null)
+
+function setNullableRangeValue(newValue: any) {
+  nullableRangeValue.value = newValue
+}
+
+function resetNullableRange() {
+  nullableRangeValue.value = null
+}
+
+// CustomizedSlider组件
+const customizedValue = ref(50)
+
+function onCustomizedSliderChange(newValue: any) {
+  log(newValue)
+  customizedValue.value = newValue
+}
+
+function onCustomizedSliderAfterChange(newValue: unknown) {
+  console.log(newValue) //eslint-disable-line
+}
+
+// DynamicBounds组件
+const dynamicMin = ref(1)
+const dynamicMax = ref(100)
+const dynamicStep = ref(10)
+const dynamicValue = ref(1)
+
+function onDynamicSliderChange(newValue: any) {
+  log(newValue)
+  dynamicValue.value = newValue
+}
+
+function onDynamicMinChange(e: any) {
+  dynamicMin.value = +e.target.value || 0
+}
+
+function onDynamicMaxChange(e: any) {
+  dynamicMax.value = +e.target.value || 100
+}
+
+function onDynamicStepChange(e: any) {
+  dynamicStep.value = +e.target.value || 1
+}
+
+const labelStyle = { minWidth: '60px', display: 'inline-block' }
+const inputStyle = { marginBottom: '10px' }
+</script>
+
+<template>
+  <div>
+    <div :style="style">
+      <p>Basic Slider</p>
+      <Slider @change="log" />
+    </div>
+    <div :style="style">
+      <p>Basic Slider, `startPoint=50`</p>
+      <Slider :start-point="50" @change="log" />
+    </div>
+    <div :style="style">
+      <p>Slider reverse</p>
+      <Slider reverse :min="20" :max="60" @change="log" />
+    </div>
+    <div :style="style">
+      <p>Basic Slider，`step=20`</p>
+      <Slider :step="20" :default-value="50" @before-change="log" />
+    </div>
+    <div :style="style">
+      <p>Basic Slider，`step=20, dots`</p>
+      <Slider dots :step="20" :default-value="100" @change-complete="log" />
+    </div>
+    <div :style="style">
+      <p>
+        Basic Slider，`step=20, dots, dotStyle={"borderColor: 'orange'"}, activeDotStyle=
+        {"borderColor: 'yellow'"}`
+      </p>
+      <Slider
+        dots
+        :step="20"
+        :default-value="100"
+        :dot-style="{ borderColor: 'orange' }"
+        :active-dot-style="{ borderColor: 'yellow' }"
+        @change-complete="log"
+      />
+    </div>
+    <div :style="style">
+      <p>Slider with tooltip, with custom `tipFormatter`</p>
+      <TooltipSlider
+        :tip-formatter="percentFormatter"
+        :tip-props="{ overlayClassName: 'foo' }"
+        @change="log"
+      />
+    </div>
+    <div :style="style">
+      <p>
+        Slider with custom handle and track style.<strong>(old api, will be deprecated)</strong>
+      </p>
+      <Slider
+        :default-value="30"
+        :rail-style="{ backgroundColor: 'red', height: 10 }"
+        :track-style="{ backgroundColor: 'blue', height: 10 }"
+        :handle-style="{
+          borderColor: 'blue',
+          height: 28,
+          width: 28,
+          marginLeft: -14,
+          marginTop: -9,
+          backgroundColor: 'black',
+        }"
+      />
+    </div>
+    <div :style="style">
+      <p>
+        Slider with custom handle and track style.<strong>(The recommended new api)</strong>
+      </p>
+      <Slider
+        :default-value="30"
+        :track-style="{ backgroundColor: 'blue', height: 10 }"
+        :handle-style="{
+          borderColor: 'blue',
+          height: 28,
+          width: 28,
+          marginLeft: -14,
+          marginTop: -9,
+          backgroundColor: 'black',
+        }"
+        :rail-style="{ backgroundColor: 'red', height: 10 }"
+      />
+    </div>
+    <div :style="style">
+      <p>
+        Reversed Slider with custom handle and track style.
+        <strong>(The recommended new api)</strong>
+      </p>
+      <Slider
+        :default-value="30"
+        :track-style="{ backgroundColor: 'blue', height: 10 }"
+        reverse
+        :handle-style="{
+          borderColor: 'blue',
+          height: 28,
+          width: 28,
+          marginLeft: -14,
+          marginTop: -9,
+          backgroundColor: 'black',
+        }"
+        :rail-style="{ backgroundColor: 'red', height: 10 }"
+      />
+    </div>
+    <div :style="style">
+      <p>Basic Slider, disabled</p>
+      <Slider disabled @change="log" />
+    </div>
+    <div :style="style">
+      <p>Controlled Slider</p>
+      <Slider :value="50" />
+    </div>
+    <div :style="style">
+      <p>Customized Slider</p>
+      <Slider
+        :value="customizedValue"
+        @change="onCustomizedSliderChange"
+        @change-complete="onCustomizedSliderAfterChange"
+      />
+    </div>
+    <div :style="style">
+      <p>Slider with null value and reset button</p>
+      <div>
+        <Slider
+          :value="nullableSliderValue"
+          @change="onNullableSliderChange"
+          @change-complete="onNullableSliderAfterChange"
+        />
+        <button type="button" @click="resetNullableSlider">
+          Reset
+        </button>
+      </div>
+    </div>
+    <div :style="style">
+      <p>Range Slider with null value and reset button</p>
+      <div>
+        <Slider range :value="nullableRangeValue" @change="setNullableRangeValue" />
+        <button type="button" @click="resetNullableRange">
+          Reset
+        </button>
+      </div>
+    </div>
+    <div :style="style">
+      <p>Slider with dynamic `min` `max` `step`</p>
+      <div>
+        <label :style="labelStyle">Min: </label>
+        <input
+          type="number"
+          :value="dynamicMin"
+          :style="inputStyle"
+          @input="onDynamicMinChange"
+        >
+        <br>
+        <label :style="labelStyle">Max: </label>
+        <input
+          type="number"
+          :value="dynamicMax"
+          :style="inputStyle"
+          @input="onDynamicMaxChange"
+        >
+        <br>
+        <label :style="labelStyle">Step: </label>
+        <input
+          type="number"
+          :value="dynamicStep"
+          :style="inputStyle"
+          @input="onDynamicStepChange"
+        >
+        <br>
+        <br>
+        <label :style="labelStyle">Value: </label>
+        <span>{{ dynamicValue }}</span>
+        <br>
+        <br>
+        <Slider
+          :value="dynamicValue"
+          :min="dynamicMin"
+          :max="dynamicMax"
+          :step="dynamicStep"
+          @change="onDynamicSliderChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/docs/vertical.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import Slider from '@v-c/slider'
+
+const style: CSSProperties = {
+  float: 'left',
+  width: '160px',
+  height: '400px',
+  marginBottom: '160px',
+  marginLeft: '50px',
+}
+
+const parentStyle: CSSProperties = {
+  overflow: 'hidden',
+}
+
+const marks = {
+  '-10': '-10°C',
+  '0': '0°C',
+  '26': '26°C',
+  '37': '37°C',
+  '50': '50°C',
+  '100': {
+    style: {
+      color: 'red',
+    },
+    label: '100°C',
+  },
+}
+
+function log(value) {
+  console.log(value); //eslint-disable-line
+}
+</script>
+
+<template>
+  <div :style="parentStyle">
+    <div :style="style">
+      <p>Slider with marks, `step=null`</p>
+      <Slider vertical :min="-10" :marks="marks" :step="null" :default-value="20" @change="log" />
+    </div>
+    <div :style="style">
+      <p>Slider with marks, `step=null` and `startPoint=0`</p>
+      <Slider
+        vertical
+        :min="-10"
+        :start-point="0"
+        :marks="marks"
+        :step="null"
+        :default-value="20"
+        @change="log"
+      />
+    </div>
+    <div :style="style">
+      <p>Reverse Slider with marks, `step=null`</p>
+      <Slider
+        vertical
+        :min="-10"
+        :marks="marks"
+        :step="null"
+        :default-value="20"
+        reverse
+        @change="log"
+      />
+    </div>
+    <div :style="style">
+      <p>Slider with marks and steps</p>
+      <Slider vertical dots :min="-10" :marks="marks" :step="10" :default-value="20" @change="log" />
+    </div>
+    <div :style="style">
+      <p>Slider with marks, `included=false`</p>
+      <Slider vertical :min="-10" :marks="marks" :included="false" :default-value="20" />
+    </div>
+    <div :style="style">
+      <p>Slider with marks and steps, `included=false`</p>
+      <Slider vertical :min="-10" :marks="marks" :step="10" :included="false" :default-value="20" />
+    </div>
+    <div :style="style">
+      <p>Range with marks</p>
+      <Slider range vertical :min="-10" :marks="marks" :default-value="[20, 40]" @change="log" />
+    </div>
+    <div :style="style">
+      <p>Range with marks and steps</p>
+      <Slider
+        range
+        vertical
+        :min="-10"
+        :marks="marks"
+        :step="10"
+        :default-value="[20, 40]"
+        @change="log"
+      />
+    </div>
+    <div :style="style">
+      <p>Range with marks and draggableTrack</p>
+      <Slider
+        :range="{ draggableTrack: true }"
+        vertical
+        :min="-10"
+        :marks="marks"
+        :default-value="[20, 40]"
+        @change="log"
+      />
+    </div>
+    <div :style="style">
+      <p>Range with marks and draggableTrack(reverse)</p>
+      <Slider
+        :range="{ draggableTrack: true }"
+        vertical
+        reverse
+        :min="-10"
+        :marks="marks"
+        :default-value="[20, 40]"
+        @change="log"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@v-c/slider",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "main": "index.js",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "@v-c/util": "0.0.4"
+  },
+  "devDependencies": {
+    "@v-c/tooltip": "1.0.0"
+  },
+  "keywords": [
+    "slider"
+  ],
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest"
+  }
+}

package/src/Handles/Handle.tsx

@@ -0,0 +1,226 @@
+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 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: Function,
+    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) => {
+      console.log('emit-start')
+      if (!disabled) {
+        emit('startMove', e, props.valueIndex)
+      }
+    }
+
+    const onInternalFocus = (e: FocusEvent) => {
+      console.log('emit-focus')
+      emit('focus', e, props.valueIndex)
+    }
+
+    const onInternalMouseEnter = (e: MouseEvent) => {
+      console.log('emit-enter')
+      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,
+        }
+        console.log('render', renderProps)
+        const RenderNode = () => render(renderProps)
+        return <RenderNode />
+      }
+      return handleNode
+    }
+  },
+})