@v-c/slider 1.0.3 → 1.0.5

package/docs/range.vue

@@ -1,224 +0,0 @@
-<script setup lang="ts">
-import type { CSSProperties } from 'vue'
-import Slider from '@v-c/slider'
-import { reactive, ref } from 'vue'
-
-const data1 = ref([0, 20])
-const data2 = ref([0, 20])
-const data3 = ref([20, 20])
-const data4 = ref([20, 40])
-const data5 = ref([0, 20])
-const data6 = ref([20, 40, 60, 80])
-const data7 = ref([20, 40, 60, 80])
-const data10 = ref([20, 50])
-const data11 = ref([20, 40, 60, 80])
-const data12 = ref([0, 40])
-const data13 = ref([0, 40])
-const data14 = ref([0, 20, 30, 40, 50])
-
-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 v-model:value="data1" range :allow-cross="false" @change="log" />
-    </div>
-    <div :style="style">
-      <p>Basic reverse Range`</p>
-      <Slider v-model:value="data2" range :allow-cross="false" reverse @change="log" />
-    </div>
-    <div :style="style">
-      <p>Basic Range，`step=20` </p>
-      <Slider v-model:value="data3" range :step="20" @before-change="log" />
-    </div>
-    <div :style="style">
-      <p>Basic Range，`step=20, dots` </p>
-      <Slider v-model:value="data4" range dots :step="20" @change-complete="log" />
-    </div>
-    <div :style="style">
-      <p>Basic Range，disabled</p>
-      <Slider v-model:value="data5" range :allow-cross="false" 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 v-model:value="data6" range :count="3" pushable />
-    </div>
-    <div :style="style">
-      <p>Multi Range with custom track and handle style and pushable</p>
-      <Slider
-        v-model:value="data7"
-        range
-        :count="3"
-        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
-          v-model:value="data10"
-          range
-          :min="dynamicBounds.min"
-          :max="dynamicBounds.max"
-          @change="onDynamicSliderChange"
-        />
-      </div>
-    </div>
-    <div :style="style">
-      <p>Range as child component</p>
-      <Slider
-        v-model:value="data11"
-        range
-        :allow-cross="false"
-        @change="handlePureRenderRangeChange"
-      />
-    </div>
-    <div :style="style">
-      <p>draggableTrack two points</p>
-      <Slider v-model:value="data12" :range="{ draggableTrack: true }" :allow-cross="false" @change="log" />
-    </div>
-    <div :style="style">
-      <p>draggableTrack two points(reverse)</p>
-      <Slider
-        v-model:value="data13"
-        :range="{ draggableTrack: true }"
-        :allow-cross="false"
-        reverse
-        @change="log"
-      />
-    </div>
-    <div :style="style">
-      <p>draggableTrack multiple points</p>
-      <Slider
-        v-model:value="data14"
-        :range="{ draggableTrack: true }"
-        :allow-cross="false"
-        @change="log"
-      />
-    </div>
-  </div>
-</template>

package/docs/slider.stories.vue

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

package/docs/sliderDemo.vue

@@ -1,283 +0,0 @@
-<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
-}
-
-// 新增的data refs用于替换default-value
-const data1 = ref(50)
-const data2 = ref(100)
-const data3 = ref(100)
-const data4 = ref(30)
-
-const data5 = ref(50)
-const data6 = ref(30)
-const data7 = ref(30)
-const data8 = ref(30)
-const data9 = ref(50)
-const data10 = ref(null)
-const data11 = ref(null)
-const data12 = ref(20)
-const data13 = ref(0)
-
-const labelStyle = { minWidth: '60px', display: 'inline-block' }
-const inputStyle = { marginBottom: '10px' }
-</script>
-
-<template>
-  <div>
-    <div :style="style">
-      <p>Basic Slider</p>
-      <Slider v-model:value="data5" @change="log" />
-    </div>
-    <div :style="style">
-      <p>Basic Slider, `startPoint=50`</p>
-      <Slider v-model:value="data9" :start-point="50" @change="log" />
-    </div>
-    <div :style="style">
-      <p>Slider reverse</p>
-      <Slider v-model:value="data13" reverse :min="20" :max="60" @change="log" />
-    </div>
-    <div :style="style">
-      <p>Basic Slider，`step=20`</p>
-      <Slider v-model:value="data1" :step="20" @before-change="log" />
-    </div>
-    <div :style="style">
-      <p>Basic Slider，`step=20, dots`</p>
-      <Slider v-model:value="data2" dots :step="20" @change-complete="log" />
-    </div>
-    <div :style="style">
-      <p>
-        Basic Slider，`step=20, dots, dotStyle={"borderColor: 'orange'"}, activeDotStyle= {"borderColor: 'yellow'"}`
-      </p>
-      />
-      <Slider
-        v-model:value="data3"
-        dots
-        :step="20"
-        :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
-        v-model:value="data4"
-        :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
-        v-model:value="data6"
-        :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
-        v-model:value="data4"
-        :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 v-model:value="data12" disabled @change="log" />
-    </div>
-    <div :style="style">
-      <p>Controlled Slider</p>
-      <Slider v-model:value="data5" />
-    </div>
-    <div :style="style">
-      <p>Customized Slider</p>
-      <Slider
-        v-model:value="customizedValue"
-        @change="onCustomizedSliderChange"
-        @change-complete="onCustomizedSliderAfterChange"
-      />
-    </div>
-    <div :style="style">
-      <p>Slider with null value and reset button</p>
-      <div>
-        <Slider
-          v-model: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 v-model:value="nullableRangeValue" range @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
-          v-model:value="dynamicValue"
-          :min="dynamicMin"
-          :max="dynamicMax"
-          :step="dynamicStep"
-          @change="onDynamicSliderChange"
-        />
-      </div>
-    </div>
-  </div>
-</template>

package/docs/vertical.vue

@@ -1,135 +0,0 @@
-<script setup lang="ts">
-import type { CSSProperties } from 'vue'
-import Slider from '@v-c/slider'
-import { ref } from 'vue'
-
-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',
-  },
-}
-
-// 创建响应式数据
-const data1 = ref(20)
-const data2 = ref(20)
-const data3 = ref(20)
-const data4 = ref(20)
-const data5 = ref(20)
-const data6 = ref(20)
-const data7 = ref([20, 40])
-const data8 = ref([20, 40])
-const data9 = ref([20, 40])
-const data10 = ref([20, 40])
-
-function log(value: unknown) {
-  console.log(value)
-}
-</script>
-
-<template>
-  <div :style="parentStyle">
-    <div :style="style">
-      <p>Slider with marks, `step=null`</p>
-      <Slider v-model:value="data1" vertical :min="-10" :marks="marks" :step="null" @change="log" />
-    </div>
-    <div :style="style">
-      <p>Slider with marks, `step=null` and `startPoint=0`</p>
-      <Slider
-        v-model:value="data2"
-        vertical
-        :min="-10"
-        :start-point="0"
-        :marks="marks"
-        :step="null"
-        @change="log"
-      />
-    </div>
-    <div :style="style">
-      <p>Reverse Slider with marks, `step=null`</p>
-      <Slider
-        v-model:value="data3"
-        vertical
-        :min="-10"
-        :marks="marks"
-        :step="null"
-        reverse
-        @change="log"
-      />
-    </div>
-    <div :style="style">
-      <p>Slider with marks and steps</p>
-      <Slider v-model:value="data4" vertical dots :min="-10" :marks="marks" :step="10" @change="log" />
-    </div>
-    <div :style="style">
-      <p>Slider with marks, `included=false`</p>
-      <Slider v-model:value="data5" vertical :min="-10" :marks="marks" :included="false" />
-    </div>
-    <div :style="style">
-      <p>Slider with marks and steps, `included=false`</p>
-      <Slider v-model:value="data6" vertical :min="-10" :marks="marks" :step="10" :included="false" />
-    </div>
-    <div :style="style">
-      <p>Range with marks</p>
-      <Slider v-model:value="data7" range vertical :min="-10" :marks="marks" @change="log" />
-    </div>
-    <div :style="style">
-      <p>Range with marks and steps</p>
-      <Slider
-        v-model:value="data8"
-        range
-        vertical
-        :min="-10"
-        :marks="marks"
-        :step="10"
-        @change="log"
-      />
-    </div>
-    <div :style="style">
-      <p>Range with marks and draggableTrack</p>
-      <Slider
-        v-model:value="data9"
-        :range="{ draggableTrack: true }"
-        vertical
-        :min="-10"
-        :marks="marks"
-        @change="log"
-      />
-    </div>
-    <div :style="style">
-      <p>Range with marks and draggableTrack(reverse)</p>
-      <Slider
-        v-model:value="data10"
-        :range="{ draggableTrack: true }"
-        vertical
-        reverse
-        :min="-10"
-        :marks="marks"
-        @change="log"
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>