@v-c/slider 1.0.0

package/dist/util.js

@@ -0,0 +1,29 @@
+function o(r, e, a) {
+  return (r - e) / (a - e);
+}
+function f(r, e, a, s) {
+  const n = o(e, a, s), t = {};
+  switch (r) {
+    case "rtl":
+      t.right = `${n * 100}%`, t.transform = "translateX(50%)";
+      break;
+    case "btt":
+      t.bottom = `${n * 100}%`, t.transform = "translateY(50%)";
+      break;
+    case "ttb":
+      t.top = `${n * 100}%`, t.transform = "translateY(-50%)";
+      break;
+    default:
+      t.left = `${n * 100}%`, t.transform = "translateX(-50%)";
+      break;
+  }
+  return t;
+}
+function c(r, e) {
+  return Array.isArray(r) ? r[e] : r;
+}
+export {
+  f as getDirectionStyle,
+  c as getIndex,
+  o as getOffset
+};

package/docs/TooltipSlider.tsx

@@ -0,0 +1,94 @@
+import type { PropType, VNode } from 'vue'
+import type { SliderProps } from '../src'
+import Tooltip from '@v-c/tooltip'
+import raf from '@v-c/util/dist/raf'
+import { defineComponent, ref, watchEffect } from 'vue'
+import Slider from '../src'
+import './assets/bootstrap.less'
+
+export const HandleTooltip = defineComponent({
+  name: 'HandleTooltip',
+  props: {
+    value: { type: Number, required: true },
+    visible: { type: Boolean, required: true },
+    tipFormatter: { type: Function as PropType<(value: number) => string>, default: (val: number) => `${val} %` },
+  },
+  setup(props, { slots }) {
+    const tooltipRef = ref()
+    const rafRef = ref<number | null>(null)
+
+    function cancelKeepAlign() {
+      raf.cancel(rafRef.value!)
+    }
+
+    function keepAlign() {
+      rafRef.value = raf(() => {
+        tooltipRef.value?.forceAlign()
+      })
+    }
+
+    watchEffect((onCleanup) => {
+      if (props.visible) {
+        keepAlign()
+      }
+      else {
+        cancelKeepAlign()
+      }
+
+      onCleanup(cancelKeepAlign)
+    })
+    return () => (
+      <Tooltip
+        placement="top"
+        overlayInnerStyle={{ minHeight: 'auto' }}
+        ref={tooltipRef.value}
+        visible={props.visible}
+        v-slots={{
+          default: slots.default,
+          overlay: () => props.tipFormatter(props.value),
+        }}
+      />
+    )
+  },
+})
+
+interface HandleTooltipProps {
+  index: number
+  prefixCls: string
+  value: number
+  dragging: boolean
+  draggingDelete: boolean
+  node: HTMLElement
+}
+export function HandleRender(props: HandleTooltipProps) {
+  return (
+    <HandleTooltip value={props.value} visible={props.dragging}>
+      {props.node}
+    </HandleTooltip>
+  )
+}
+
+interface TooltipSliderProps extends SliderProps {
+  tipFormatter?: (value: number) => VNode
+  tipProps?: any
+}
+
+const TooltipSlider = defineComponent<TooltipSliderProps>({
+  name: 'TooltipSlider',
+  props: {
+    tipFormatter: Function as PropType<(value: number) => string>,
+    tipProps: Object,
+  },
+  setup(_, { attrs }) {
+    return () => {
+      return (
+        <Slider
+          {...attrs}
+          handleRender={HandleRender}
+        />
+      )
+    }
+  },
+})
+
+export default TooltipSlider

package/docs/assets/anim.less

@@ -0,0 +1,63 @@
+.@{tooltip-prefix-cls} {
+  .effect() {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+  }
+
+  &&-zoom-appear,
+  &&-zoom-enter {
+    opacity: 0;
+  }
+
+  &&-zoom-enter, &&-zoom-leave {
+    display: block;
+  }
+
+  &-zoom-enter, &-zoom-appear {
+    opacity: 0;
+    .effect();
+    animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+    animation-play-state: paused;
+  }
+
+  &-zoom-leave {
+    .effect();
+    animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
+    animation-play-state: paused;
+  }
+
+  &-zoom-enter&-zoom-enter-active, &-zoom-appear&-zoom-appear-active {
+    animation-name: rcToolTipZoomIn;
+    animation-play-state: running;
+  }
+
+  &-zoom-leave&-zoom-leave-active {
+    animation-name: rcToolTipZoomOut;
+    animation-play-state: running;
+  }
+
+  @keyframes rcToolTipZoomIn {
+    0% {
+      opacity: 0;
+      transform-origin: 50% 50%;
+      transform: scale(0, 0);
+    }
+    100% {
+      opacity: 1;
+      transform-origin: 50% 50%;
+      transform: scale(1, 1);
+    }
+  }
+  @keyframes rcToolTipZoomOut {
+    0% {
+      opacity: 1;
+      transform-origin: 50% 50%;
+      transform: scale(1, 1);
+    }
+    100% {
+      opacity: 0;
+      transform-origin: 50% 50%;
+      transform: scale(0, 0);
+    }
+  }
+}

package/docs/assets/bootstrap.less

@@ -0,0 +1,163 @@
+@import './anim.less';
+
+@tooltip-prefix-cls: vc-tooltip;
+
+//
+// Tooltips
+// --------------------------------------------------
+@font-size-base         : 12px;
+@line-height-base       : 1.5;
+@border-radius-base     : 6px;
+@overlay-shadow              : 0 0 4px rgba(0, 0, 0, 0.17);
+//** Tooltip text color
+@tooltip-color: #fff;
+//** Tooltip background color
+@tooltip-bg: #373737;
+@tooltip-opacity: 0.9;
+
+//** Tooltip arrow width
+@tooltip-arrow-width: 5px;
+//** Tooltip distance with trigger
+@tooltip-distance: @tooltip-arrow-width + 4;
+//** Tooltip arrow color
+@tooltip-arrow-color: @tooltip-bg;
+
+// Base class
+.@{tooltip-prefix-cls} {
+  position: absolute;
+  z-index: 1070;
+  display: block;
+  visibility: visible;
+  // remove left/top by yiminghe
+  // left: -9999px;
+  // top: -9999px;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  opacity: @tooltip-opacity;
+
+  &-hidden {
+    display: none;
+  }
+
+  //&-placement-top, &-placement-topLeft, &-placement-topRight {
+  //  padding: @tooltip-arrow-width 0 @tooltip-distance 0;
+  //}
+  //&-placement-right, &-placement-rightTop, &-placement-rightBottom {
+  //  padding: 0 @tooltip-arrow-width 0 @tooltip-distance;
+  //}
+  //&-placement-bottom, &-placement-bottomLeft, &-placement-bottomRight {
+  //  padding: @tooltip-distance 0 @tooltip-arrow-width 0;
+  //}
+  //&-placement-left, &-placement-leftTop, &-placement-leftBottom {
+  //  padding: 0 @tooltip-distance 0 @tooltip-arrow-width;
+  //}
+}
+
+// Wrapper for the tooltip content
+.@{tooltip-prefix-cls}-inner {
+  padding: 8px 10px;
+  color: @tooltip-color;
+  text-align: left;
+  text-decoration: none;
+  background-color: @tooltip-bg;
+  border-radius: @border-radius-base;
+  box-shadow: @overlay-shadow;
+  min-height: 34px;
+}
+
+// Arrows
+.@{tooltip-prefix-cls}-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.@{tooltip-prefix-cls} {
+  &-placement-top &-arrow,
+  &-placement-topLeft &-arrow,
+  &-placement-topRight &-arrow {
+    bottom: @tooltip-distance - @tooltip-arrow-width;
+    margin-left: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-top-color: @tooltip-arrow-color;
+  }
+
+  &-placement-top &-arrow {
+    left: 50%;
+  }
+
+  &-placement-topLeft &-arrow {
+    left: 15%;
+  }
+
+  &-placement-topRight &-arrow {
+    right: 15%;
+  }
+
+  &-placement-right &-arrow,
+  &-placement-rightTop &-arrow,
+  &-placement-rightBottom &-arrow {
+    left: @tooltip-distance - @tooltip-arrow-width;
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-right-color: @tooltip-arrow-color;
+  }
+
+  &-placement-right &-arrow {
+    top: 50%;
+  }
+
+  &-placement-rightTop &-arrow {
+    top: 15%;
+    margin-top: 0;
+  }
+
+  &-placement-rightBottom &-arrow {
+    bottom: 15%;
+  }
+
+  &-placement-left &-arrow,
+  &-placement-leftTop &-arrow,
+  &-placement-leftBottom &-arrow {
+    right: @tooltip-distance - @tooltip-arrow-width;
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-left-color: @tooltip-arrow-color;
+  }
+
+  &-placement-left &-arrow {
+    top: 50%;
+  }
+
+  &-placement-leftTop &-arrow {
+    top: 15%;
+    margin-top: 0;
+  }
+
+  &-placement-leftBottom &-arrow {
+    bottom: 15%;
+  }
+
+  &-placement-bottom &-arrow,
+  &-placement-bottomLeft &-arrow,
+  &-placement-bottomRight &-arrow {
+    top: @tooltip-distance - @tooltip-arrow-width;
+    margin-left: -@tooltip-arrow-width;
+    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-bottom-color: @tooltip-arrow-color;
+  }
+
+  &-placement-bottom &-arrow {
+    left: 50%;
+  }
+
+  &-placement-bottomLeft &-arrow {
+    left: 15%;
+  }
+
+  &-placement-bottomRight &-arrow {
+    right: 15%;
+  }
+}

package/docs/assets/index.less

@@ -0,0 +1,337 @@
+
+@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;
+  }
+}