@v-c/slider 1.0.2 → 1.0.4

package/docs/assets/index.less

@@ -1,337 +0,0 @@
-
-@prefixClass: vc-slider;
-
-@disabledColor: #ccc;
-@border-radius-base: 6px;
-@primary-color: #2db7f5;
-@tooltip-color: #fff;
-@tooltip-bg: tint(#666, 4%);
-@tooltip-arrow-width: 4px;
-@tooltip-distance: @tooltip-arrow-width+4;
-@tooltip-arrow-color: @tooltip-bg;
-@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
-@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-
-.borderBox() {
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
-
-  * {
-    box-sizing: border-box;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
-  }
-}
-
-.@{prefixClass} {
-  position: relative;
-  width: 100%;
-  height: 14px;
-  padding: 5px 0;
-  border-radius: @border-radius-base;
-  touch-action: none;
-  .borderBox();
-
-  &-rail {
-    position: absolute;
-    width: 100%;
-    height: 4px;
-    background-color: #e9e9e9;
-    border-radius: @border-radius-base;
-  }
-
-  &-track,
-  &-tracks {
-    position: absolute;
-    height: 4px;
-    background-color: tint(@primary-color, 60%);
-    border-radius: @border-radius-base;
-  }
-
-  &-track-draggable {
-    z-index: 1;
-    box-sizing: content-box;
-    background-clip: content-box;
-    border-top: 5px solid rgba(0, 0, 0, 0);
-    border-bottom: 5px solid rgba(0, 0, 0, 0);
-    transform: translateY(-5px);
-  }
-
-  &-handle {
-    position: absolute;
-    z-index: 1;
-    width: 14px;
-    height: 14px;
-    margin-top: -5px;
-    background-color: #fff;
-    border: solid 2px tint(@primary-color, 50%);
-    border-radius: 50%;
-    cursor: pointer;
-    cursor: -webkit-grab;
-    cursor: grab;
-    opacity: 0.8;
-    user-select: none;
-    touch-action: pan-x;
-
-    &-dragging&-dragging&-dragging {
-      border-color: tint(@primary-color, 20%);
-      box-shadow: 0 0 0 5px tint(@primary-color, 50%);
-
-      &-delete {
-        opacity: 0;
-      }
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: none;
-    }
-
-    &:focus-visible {
-      border-color: @primary-color;
-      box-shadow: 0 0 0 3px tint(@primary-color, 50%);
-    }
-
-    &-click-focused:focus {
-      border-color: tint(@primary-color, 50%);
-      box-shadow: unset;
-    }
-
-    &:hover {
-      border-color: tint(@primary-color, 20%);
-    }
-
-    &:active {
-      border-color: tint(@primary-color, 20%);
-      box-shadow: 0 0 5px tint(@primary-color, 20%);
-      cursor: -webkit-grabbing;
-      cursor: grabbing;
-    }
-  }
-
-  &-mark {
-    position: absolute;
-    top: 18px;
-    left: 0;
-    width: 100%;
-    font-size: 12px;
-  }
-
-  &-mark-text {
-    position: absolute;
-    display: inline-block;
-    color: #999;
-    text-align: center;
-    vertical-align: middle;
-    cursor: pointer;
-
-    &-active {
-      color: #666;
-    }
-  }
-
-  &-step {
-    position: absolute;
-    width: 100%;
-    height: 4px;
-    background: transparent;
-  }
-
-  &-dot {
-    position: absolute;
-    bottom: -2px;
-    width: 8px;
-    height: 8px;
-    vertical-align: middle;
-    background-color: #fff;
-    border: 2px solid #e9e9e9;
-    border-radius: 50%;
-    cursor: pointer;
-    &-active {
-      border-color: tint(@primary-color, 50%);
-    }
-    &-reverse {
-      margin-right: -4px;
-    }
-  }
-
-  &-disabled {
-    background-color: #e9e9e9;
-
-    .@{prefixClass}-track {
-      background-color: @disabledColor;
-    }
-
-    .@{prefixClass}-handle,
-    .@{prefixClass}-dot {
-      background-color: #fff;
-      border-color: @disabledColor;
-      box-shadow: none;
-      cursor: not-allowed;
-    }
-
-    .@{prefixClass}-mark-text,
-    .@{prefixClass}-dot {
-      cursor: not-allowed !important;
-    }
-  }
-}
-
-.@{prefixClass}-vertical {
-  width: 14px;
-  height: 100%;
-  padding: 0 5px;
-
-  .@{prefixClass} {
-    &-rail {
-      width: 4px;
-      height: 100%;
-    }
-
-    &-track {
-      bottom: 0;
-      left: 5px;
-      width: 4px;
-    }
-
-    &-track-draggable {
-      border-top: 0;
-      border-right: 5px solid rgba(0, 0, 0, 0);
-      border-bottom: 0;
-      border-left: 5px solid rgba(0, 0, 0, 0);
-      transform: translateX(-5px);
-    }
-
-    &-handle {
-      position: absolute;
-      z-index: 1;
-      margin-top: 0;
-      margin-left: -5px;
-      touch-action: pan-y;
-    }
-
-    &-mark {
-      top: 0;
-      left: 18px;
-      height: 100%;
-    }
-
-    &-step {
-      width: 4px;
-      height: 100%;
-    }
-
-    &-dot {
-      margin-left: -2px;
-    }
-  }
-}
-
-.motion-common() {
-  display: block !important;
-  animation-duration: 0.3s;
-  animation-fill-mode: both;
-}
-
-.make-motion(@className, @keyframeName) {
-  .@{className}-enter,
-  .@{className}-appear {
-    .motion-common();
-    animation-play-state: paused;
-  }
-  .@{className}-leave {
-    .motion-common();
-    animation-play-state: paused;
-  }
-  .@{className}-enter.@{className}-enter-active,
-  .@{className}-appear.@{className}-appear-active {
-    animation-name: ~'@{keyframeName}In';
-    animation-play-state: running;
-  }
-  .@{className}-leave.@{className}-leave-active {
-    animation-name: ~'@{keyframeName}Out';
-    animation-play-state: running;
-  }
-}
-.zoom-motion(@className, @keyframeName) {
-  .make-motion(@className, @keyframeName);
-  .@{className}-enter,
-  .@{className}-appear {
-    transform: scale(0, 0); // need this by yiminghe
-    animation-timing-function: @ease-out-quint;
-  }
-  .@{className}-leave {
-    animation-timing-function: @ease-in-quint;
-  }
-}
-.zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);
-
-@keyframes rcSliderTooltipZoomDownIn {
-  0% {
-    transform: scale(0, 0);
-    transform-origin: 50% 100%;
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1, 1);
-    transform-origin: 50% 100%;
-  }
-}
-
-@keyframes rcSliderTooltipZoomDownOut {
-  0% {
-    transform: scale(1, 1);
-    transform-origin: 50% 100%;
-  }
-  100% {
-    transform: scale(0, 0);
-    transform-origin: 50% 100%;
-    opacity: 0;
-  }
-}
-
-.@{prefixClass}-tooltip {
-  position: absolute;
-  top: -9999px;
-  left: -9999px;
-  visibility: visible;
-
-  .borderBox();
-
-  &-hidden {
-    display: none;
-  }
-
-  &-placement-top {
-    padding: @tooltip-arrow-width 0 @tooltip-distance 0;
-  }
-
-  &-inner {
-    min-width: 24px;
-    height: 24px;
-    padding: 6px 2px;
-    color: @tooltip-color;
-    font-size: 12px;
-    line-height: 1;
-    text-align: center;
-    text-decoration: none;
-    background-color: @tooltip-bg;
-    border-radius: @border-radius-base;
-    box-shadow: 0 0 4px #d9d9d9;
-  }
-
-  &-arrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-  }
-
-  &-placement-top &-arrow {
-    bottom: @tooltip-distance - @tooltip-arrow-width;
-    left: 50%;
-    margin-left: -@tooltip-arrow-width;
-    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
-    border-top-color: @tooltip-arrow-color;
-  }
-}

package/docs/debug.vue

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

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

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

@@ -1,94 +0,0 @@
-<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)"
-      >
-        <template #mark="{ point, label }">
-          <template v-if="point === 100">
-            <strong>{{ label }}</strong>
-          </template>
-          <template v-else>
-            {{ label }}
-          </template>
-        </template>
-      </Slider>
-    </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

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