@v-c/slider 1.0.3 → 1.0.5

package/dist/hooks/useRange.cjs

@@ -1 +1,21 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@v-c/util/dist/warning");function i(e){if(e===!0||!e)return[!!e,!1,!1,0];const{editable:t=!1,draggableTrack:r=!1,minCount:a,maxCount:n}=e;return process.env.NODE_ENV!=="production"&&u.warning(!t||!r,"`editable` can not work with `draggableTrack`."),[!0,t,!t&&r,a||0,n]}exports.default=i;
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let __v_c_util_dist_warning = require("@v-c/util/dist/warning");
+function useRange(range) {
+	if (range === true || !range) return [
+		!!range,
+		false,
+		false,
+		0
+	];
+	const { editable = false, draggableTrack = false, minCount, maxCount } = range;
+	if (process.env.NODE_ENV !== "production") (0, __v_c_util_dist_warning.warning)(!editable || !draggableTrack, "`editable` can not work with `draggableTrack`.");
+	return [
+		true,
+		editable,
+		!editable && draggableTrack,
+		minCount || 0,
+		maxCount
+	];
+}
+exports.default = useRange;

package/dist/hooks/useRange.js

@@ -1,10 +1,19 @@
-import { warning as o } from "@v-c/util/dist/warning";
-function u(e) {
-  if (e === !0 || !e)
-    return [!!e, !1, !1, 0];
-  const { editable: t = !1, draggableTrack: a = !1, minCount: r, maxCount: n } = e;
-  return process.env.NODE_ENV !== "production" && o(!t || !a, "`editable` can not work with `draggableTrack`."), [!0, t, !t && a, r || 0, n];
+import { warning as warning$1 } from "@v-c/util/dist/warning";
+function useRange(range) {
+	if (range === true || !range) return [
+		!!range,
+		false,
+		false,
+		0
+	];
+	const { editable = false, draggableTrack = false, minCount, maxCount } = range;
+	if (process.env.NODE_ENV !== "production") warning$1(!editable || !draggableTrack, "`editable` can not work with `draggableTrack`.");
+	return [
+		true,
+		editable,
+		!editable && draggableTrack,
+		minCount || 0,
+		maxCount
+	];
 }
-export {
-  u as default
-};
+export { useRange as default };

package/dist/index.cjs

@@ -1 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Slider.cjs");exports.default=e.default;
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_context = require("./context.cjs");
+const require_Slider = require("./Slider.cjs");
+var src_default = require_Slider.default;
+exports.UnstableProvider = require_context.UnstableProvider;
+exports.default = src_default;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 import { SliderProps, SliderRef, default as Slider } from './Slider';
+export { UnstableProvider } from './context';
 export type { SliderProps, SliderRef };
 export default Slider;

package/dist/index.js

@@ -1,4 +1,4 @@
-import e from "./Slider.js";
-export {
-  e as default
-};
+import { UnstableProvider } from "./context.js";
+import Slider_default from "./Slider.js";
+var src_default = Slider_default;
+export { UnstableProvider, src_default as default };

package/dist/interface.cjs

@@ -1 +0,0 @@
-"use strict";

package/dist/interface.js

@@ -1 +0,0 @@
-

package/dist/util.cjs

@@ -1 +1,32 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function o(e,r,a){return(e-r)/(a-r)}function f(e,r,a,s){const n=o(r,a,s),t={};switch(e){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 i(e,r){return Array.isArray(e)?e[r]:e}exports.getDirectionStyle=f;exports.getIndex=i;exports.getOffset=o;
+function getOffset(value, min, max) {
+	return (value - min) / (max - min);
+}
+function getDirectionStyle(direction, value, min, max) {
+	const offset = getOffset(value, min, max);
+	const positionStyle = {};
+	switch (direction) {
+		case "rtl":
+			positionStyle.right = `${offset * 100}%`;
+			positionStyle.transform = "translateX(50%)";
+			break;
+		case "btt":
+			positionStyle.bottom = `${offset * 100}%`;
+			positionStyle.transform = "translateY(50%)";
+			break;
+		case "ttb":
+			positionStyle.top = `${offset * 100}%`;
+			positionStyle.transform = "translateY(-50%)";
+			break;
+		default:
+			positionStyle.left = `${offset * 100}%`;
+			positionStyle.transform = "translateX(-50%)";
+			break;
+	}
+	return positionStyle;
+}
+function getIndex(value, index) {
+	return Array.isArray(value) ? value[index] : value;
+}
+exports.getDirectionStyle = getDirectionStyle;
+exports.getIndex = getIndex;
+exports.getOffset = getOffset;

package/dist/util.js

@@ -1,29 +1,30 @@
-function o(r, e, a) {
-  return (r - e) / (a - e);
+function getOffset(value, min, max) {
+	return (value - min) / (max - min);
 }
-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 getDirectionStyle(direction, value, min, max) {
+	const offset = getOffset(value, min, max);
+	const positionStyle = {};
+	switch (direction) {
+		case "rtl":
+			positionStyle.right = `${offset * 100}%`;
+			positionStyle.transform = "translateX(50%)";
+			break;
+		case "btt":
+			positionStyle.bottom = `${offset * 100}%`;
+			positionStyle.transform = "translateY(50%)";
+			break;
+		case "ttb":
+			positionStyle.top = `${offset * 100}%`;
+			positionStyle.transform = "translateY(-50%)";
+			break;
+		default:
+			positionStyle.left = `${offset * 100}%`;
+			positionStyle.transform = "translateX(-50%)";
+			break;
+	}
+	return positionStyle;
 }
-function c(r, e) {
-  return Array.isArray(r) ? r[e] : r;
+function getIndex(value, index) {
+	return Array.isArray(value) ? value[index] : value;
 }
-export {
-  f as getDirectionStyle,
-  c as getIndex,
-  o as getOffset
-};
+export { getDirectionStyle, getIndex, getOffset };

package/package.json

@@ -1,8 +1,16 @@
 {
   "name": "@v-c/slider",
   "type": "module",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "",
+  "author": "",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "slider"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -13,23 +21,23 @@
     "./package.json": "./package.json"
   },
   "main": "index.js",
+  "files": [
+    "dist",
+    "package.json"
+  ],
   "peerDependencies": {
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "classnames": "^2.5.1",
-    "@v-c/util": "0.0.4"
+    "@v-c/util": "^0.0.19"
   },
   "devDependencies": {
-    "@v-c/tooltip": "1.0.0"
+    "@v-c/tooltip": "^0.0.16"
   },
-  "keywords": [
-    "slider"
-  ],
-  "author": "",
-  "license": "MIT",
   "scripts": {
     "build": "vite build",
-    "test": "vitest"
+    "test": "vitest run",
+    "prepublish": "pnpm build",
+    "bump": "bumpp --release patch"
   }
 }

package/docs/TooltipSlider.tsx

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

@@ -1,63 +0,0 @@
-.@{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

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