@v-c/slider 1.0.0

package/docs/debug.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { ref } from 'vue'
+import Slider from '../src'
+
+const disabled = ref(false)
+const range = ref(false)
+const reverse = ref(false)
+const vertical = ref(false)
+const data = ref()
+
+function handleSliderChange(nextValues) {
+  console.log('Change:', nextValues)
+  data.value = nextValues
+}
+
+function handleSliderChangeComplete(v) {
+  console.log('AfterChange:', v)
+}
+</script>
+
+<template>
+  <div>
+    <div>
+      <label>
+        <input v-model="disabled" type="checkbox">
+        Disabled
+      </label>
+      <label>
+        <input v-model="range" type="checkbox">
+        Range
+      </label>
+      <label>
+        <input v-model="reverse" type="checkbox">
+        Reverse
+      </label>
+      <label>
+        <input v-model="vertical" type="checkbox">
+        Vertical
+      </label>
+    </div>
+
+    <div style="height: 300px; width: 600px;">
+      <Slider
+        :disabled="disabled"
+        :value="data"
+        :step="0.01"
+        :default-value="0.81"
+        :min="0"
+        :max="1"
+        :vertical="vertical"
+        :reverse="reverse"
+        @change="handleSliderChange"
+        @change-complete="handleSliderChangeComplete"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>

package/docs/editable.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { UnstableContextProps } from '../src/context'
+import { ref } from 'vue'
+import Slider from '../src'
+
+const style = {
+  width: '400px',
+  margin: '50px',
+}
+
+const value = ref([0, 50, 80])
+
+function onDragStart(info: Parameters<UnstableContextProps['onDragStart']>[0]) {
+  const { rawValues } = info
+  console.log('Start:', rawValues)
+}
+
+function onDragChange(info: Parameters<UnstableContextProps['onDragChange']>[0]) {
+  const { rawValues } = info
+  console.log('Move:', rawValues)
+}
+
+function handleChange(nextValue: number[]) {
+  console.error('Change:', nextValue)
+  value.value = nextValue
+}
+
+function handleChangeComplete(nextValue: number[]) {
+  console.log('Complete', nextValue)
+}
+</script>
+
+<template>
+  <div>
+    <div :style="style">
+      <Slider
+        :range="{
+          editable: true,
+          minCount: 1,
+          maxCount: 4,
+        }"
+        :min="0"
+        :max="100"
+        :value="value"
+        :styles="{
+          rail: {
+            background: 'linear-gradient(to right, blue, red)',
+          },
+          track: {
+            background: 'orange',
+          },
+        }"
+        @change="handleChange"
+        @change-complete="handleChangeComplete"
+      />
+    </div>
+    <p>Here is a word that drag should not select it</p>
+  </div>
+</template>

package/docs/handle.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import Slider from '@v-c/slider'
+import TooltipSlider, { HandleRender } from './TooltipSlider.tsx'
+
+const wrapperStyle: CSSProperties = {
+  width: '400px',
+  margin: '50px',
+}
+</script>
+
+<template>
+  <div>
+    <div :style="wrapperStyle">
+      <p>Slider with custom handle</p>
+      <Slider :min="0" :max="20" :default-value="3" :handle-render="HandleRender" />
+    </div>
+    <div :style="wrapperStyle">
+      <p>Reversed Slider with custom handle</p>
+      <Slider :min="0" :max="20" reverse :default-value="3" :handle-render="HandleRender"/>
+    </div>
+    <div :style="wrapperStyle">
+      <p>Slider with fixed values</p>
+      <Slider :min="20" :default-value="20" :marks="{ 20: 20, 40: 40, 100: 100 }" :step="null" />
+    </div>
+    <div :style="wrapperStyle">
+      <p>Range with custom tooltip</p>
+      <TooltipSlider
+        range
+        :min="0"
+        :max="20"
+        :default-value="[3, 10]"
+        :tip-formatter="(value) => (`${value}!`)"
+      />
+    </div>
+    <div :style="wrapperStyle">
+      <p>Keyboard events disabled</p>
+      <Slider :default-value="3" :keyboard="false" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/docs/marks.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import Slider from '@v-c/slider'
+
+const style: CSSProperties = {
+  width: '400px',
+  margin: '50px',
+}
+
+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>
+    <div :style="style">
+      <p>Slider with marks, `step=null`</p>
+      <Slider
+        :min="-10"
+        :marks="marks"
+        :step="null"
+        :default-value="20"
+        @change="log"
+        @change-complete="(v) => console.log('AfterChange', v)"
+      />
+    </div>
+
+    <div :style="style">
+      <p>Range Slider with marks, `step=null`, pushable, draggableTrack</p>
+      <Slider
+        range
+        :min="-10"
+        :marks="marks"
+        :step="null"
+        :default-value="[-10, 0]"
+        :allow-cross="false"
+        pushable
+        @change="log"
+        @change-complete="(v) => console.log('AfterChange', v)"
+      />
+    </div>
+
+    <div :style="style">
+      <p>Slider with marks and steps</p>
+      <Slider dots :min="-10" :marks="marks" :step="10" :default-value="20" @change="log" />
+    </div>
+    <div :style="style">
+      <p>Reversed Slider with marks and steps</p>
+      <Slider dots reverse :min="-10" :marks="marks" :step="10" :default-value="20" @change="log" />
+    </div>
+
+    <div :style="style">
+      <p>Slider with marks, `included=false`</p>
+      <Slider :min="-10" :marks="marks" :included="false" :default-value="20" />
+    </div>
+    <div :style="style">
+      <p>Slider with marks and steps, `included=false`</p>
+      <Slider :min="-10" :marks="marks" :step="10" :included="false" :default-value="20" />
+    </div>
+
+    <div :style="style">
+      <p>Range with marks</p>
+      <Slider range :min="-10" :marks="marks" :default-value="[20, 25, 30, 40]" @change="log" />
+    </div>
+    <div :style="style">
+      <p>Range with marks and steps</p>
+      <Slider range :min="-10" :marks="marks" :step="10" :default-value="[20, 40]" @change="log" />
+    </div>
+  </div>
+</template>

package/docs/multiple.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { CSSProperties, VNode } from 'vue'
+import Slider from '@v-c/slider'
+import { h, ref } from 'vue'
+
+const style: CSSProperties = {
+  width: '400px',
+  margin: '50px',
+}
+
+// const NodeWrapper = ({ children }: { children: React.ReactElement }) => {
+//   return <div>{React.cloneElement(children, {}, <div>TOOLTIP</div>)}</div>;
+// };
+
+function NodeWrapper(props: any): VNode {
+  return h('div', {}, [
+    h('slot', {}, { default: () => props.node }),
+    h('div', {}, 'TOOLTIP'),
+  ])
+}
+function activeHandleRender(props: any) {
+  return h(NodeWrapper, { ...props })
+}
+const state = ref([0, 50, 80])
+</script>
+
+<template>
+  <div>
+    <div :style="style">
+      <Slider
+        range
+        :min="0"
+        :max="100"
+        :value="state"
+        :styles="{
+          tracks: {
+            background: `linear-gradient(to right, blue, red)`,
+          },
+          track: {
+            background: 'transparent',
+          },
+        }"
+        :active-handle-render="activeHandleRender"
+        @change="(nextValue) => {
+          console.log('>>>', nextValue)
+        }"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/docs/range.vue

@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import Slider from '@v-c/slider'
+import { reactive, ref } from 'vue'
+
+const style: CSSProperties = {
+  width: '400px',
+  margin: '50px',
+}
+
+function log(value: unknown) {
+  console.log(value)
+}
+
+// CustomizedRange组件
+const customizedRange = reactive({
+  lowerBound: 20,
+  upperBound: 40,
+  value: [20, 40],
+})
+
+function onLowerBoundChange(e: any) {
+  customizedRange.lowerBound = +e.target.value
+}
+
+function onUpperBoundChange(e: any) {
+  customizedRange.upperBound = +e.target.value
+}
+
+function onSliderChange(value: any) {
+  log(value)
+  customizedRange.value = value
+}
+
+function handleApply() {
+  const { lowerBound, upperBound } = customizedRange
+  customizedRange.value = [lowerBound, upperBound]
+}
+
+// DynamicBounds组件
+const dynamicBounds = reactive({
+  min: 0,
+  max: 100,
+})
+
+function onDynamicSliderChange(value: unknown) {
+  log(value)
+}
+
+function onMinChange(e: any) {
+  dynamicBounds.min = +e.target.value || 0
+}
+
+function onMaxChange(e: any) {
+  dynamicBounds.max = +e.target.value || 100
+}
+
+// ControlledRange组件
+const controlledRangeValue = ref([20, 40, 60, 80])
+
+function handleControlledRangeChange(value: any) {
+  controlledRangeValue.value = value
+}
+
+// ControlledRangeDisableAcross组件
+const controlledRangeDisableAcrossValue = ref([20, 40, 60, 80])
+
+function handleControlledRangeDisableAcrossChange(value: any) {
+  controlledRangeDisableAcrossValue.value = value
+}
+
+// PureRenderRange组件
+const pureRenderRangeFoo = ref(false)
+
+function handlePureRenderRangeChange(value: any) {
+  console.log(value)
+  pureRenderRangeFoo.value = !pureRenderRangeFoo.value
+}
+</script>
+
+<template>
+  <div>
+    <div :style="style">
+      <p>Basic Range，`allowCross=false`</p>
+      <Slider range :allow-cross="false" :default-value="[0, 20]" @change="log" />
+    </div>
+    <div :style="style">
+      <p>Basic reverse Range`</p>
+      <Slider range :allow-cross="false" :default-value="[0, 20]" reverse @change="log" />
+    </div>
+    <div :style="style">
+      <p>Basic Range，`step=20` </p>
+      <Slider range :step="20" :default-value="[20, 20]" @before-change="log" />
+    </div>
+    <div :style="style">
+      <p>Basic Range，`step=20, dots` </p>
+      <Slider range dots :step="20" :default-value="[20, 40]" @change-complete="log" />
+    </div>
+    <div :style="style">
+      <p>Basic Range，disabled</p>
+      <Slider range :allow-cross="false" :default-value="[0, 20]" disabled @change="log" />
+    </div>
+    <div :style="style">
+      <p>Controlled Range</p>
+      <Slider range :value="controlledRangeValue" @change="handleControlledRangeChange" />
+    </div>
+    <div :style="style">
+      <p>Controlled Range, not allow across</p>
+      <Slider
+        range
+        :value="controlledRangeDisableAcrossValue"
+        :allow-cross="false"
+        @change="handleControlledRangeDisableAcrossChange"
+      />
+    </div>
+    <div :style="style">
+      <p>Controlled Range, not allow across, pushable=5</p>
+      <Slider
+        range
+        :value="controlledRangeDisableAcrossValue"
+        :allow-cross="false"
+        :pushable="5"
+        @change="handleControlledRangeDisableAcrossChange"
+      />
+    </div>
+    <div :style="style">
+      <p>Multi Range, count=3 and pushable=true</p>
+      <Slider range :count="3" :default-value="[20, 40, 60, 80]" pushable />
+    </div>
+    <div :style="style">
+      <p>Multi Range with custom track and handle style and pushable</p>
+      <Slider
+        range
+        :count="3"
+        :default-value="[20, 40, 60, 80]"
+        pushable
+        :track-style="[{ backgroundColor: 'red' }, { backgroundColor: 'green' }]"
+        :handle-style="[{ backgroundColor: 'yellow' }, { backgroundColor: 'gray' }]"
+        :rail-style="{ backgroundColor: 'black' }"
+      />
+    </div>
+    <div :style="style">
+      <p>Customized Range</p>
+      <div>
+        <label>LowerBound: </label>
+        <input type="number" :value="customizedRange.lowerBound" @change="onLowerBoundChange">
+        <br>
+        <label>UpperBound: </label>
+        <input type="number" :value="customizedRange.upperBound" @change="onUpperBoundChange">
+        <br>
+        <button type="button" @click="handleApply">
+          Apply
+        </button>
+        <br>
+        <br>
+        <Slider range :allow-cross="false" :value="customizedRange.value" @change="onSliderChange" />
+      </div>
+    </div>
+    <div :style="style">
+      <p>Range with dynamic `max` `min`</p>
+      <div>
+        <label>Min: </label>
+        <input type="number" :value="dynamicBounds.min" @change="onMinChange">
+        <br>
+        <label>Max: </label>
+        <input type="number" :value="dynamicBounds.max" @change="onMaxChange">
+        <br>
+        <br>
+        <Slider
+          range
+          :default-value="[20, 50]"
+          :min="dynamicBounds.min"
+          :max="dynamicBounds.max"
+          @change="onDynamicSliderChange"
+        />
+      </div>
+    </div>
+    <div :style="style">
+      <p>Range as child component</p>
+      <Slider
+        range
+        :default-value="[20, 40, 60, 80]"
+        :allow-cross="false"
+        @change="handlePureRenderRangeChange"
+      />
+    </div>
+    <div :style="style">
+      <p>draggableTrack two points</p>
+      <Slider :range="{ draggableTrack: true }" :allow-cross="false" :default-value="[0, 40]" @change="log" />
+    </div>
+    <div :style="style">
+      <p>draggableTrack two points(reverse)</p>
+      <Slider
+        :range="{ draggableTrack: true }"
+        :allow-cross="false"
+        reverse
+        :default-value="[0, 40]"
+        @change="log"
+      />
+    </div>
+    <div :style="style">
+      <p>draggableTrack multiple points</p>
+      <Slider
+        :range="{ draggableTrack: true }"
+        :allow-cross="false"
+        :default-value="[0, 20, 30, 40, 50]"
+        @change="log"
+      />
+    </div>
+  </div>
+</template>

package/docs/slider.stories.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import Debug from './debug.vue'
+import Editable from './editable.vue'
+import Handle from './handle.vue'
+import Marks from './marks.vue'
+import Multiple from './multiple.vue'
+import Range from './range.vue'
+import SliderDemo from './sliderDemo.vue'
+import Vertical from './vertical.vue'
+
+import '../docs/assets/index.less'
+</script>
+
+<template>
+  <Story title="Slider">
+    <Variant title="debug">
+      <Debug />
+    </Variant>
+    <Variant title="Editable">
+      <Editable />
+    </Variant>
+    <Variant title="Handle">
+      <Handle />
+    </Variant>
+    <Variant title="Marks">
+      <Marks />
+    </Variant>
+    <Variant title="Multiple">
+      <Multiple />
+    </Variant>
+    <Variant title="Range">
+      <Range />
+    </Variant>
+    <Variant title="Slider">
+      <SliderDemo />
+    </Variant>
+    <Variant title="Vertical">
+      <Vertical />
+    </Variant>
+  </Story>
+</template>
+
+<style scoped>
+
+</style>