@v-c/slider 1.0.2 → 1.0.4

package/dist/Tracks/index.js

@@ -1,83 +1,67 @@
-import { defineComponent as f, computed as v, createVNode as u, Fragment as k } from "vue";
-import y from "classnames";
-import { useInjectSlider as x } from "../context.js";
-import { getIndex as g } from "../util.js";
-import i from "./Track.js";
-const N = /* @__PURE__ */ f({
-  name: "Tracks",
-  props: {
-    prefixCls: {
-      type: String,
-      required: !0
-    },
-    trackStyle: {
-      type: [Object, Array]
-    },
-    values: {
-      type: Array,
-      required: !0
-    },
-    onStartMove: {
-      type: Function
-    },
-    startPoint: {
-      type: Number
-    }
-  },
-  setup(t) {
-    const {
-      included: o,
-      range: m,
-      min: d,
-      styles: n,
-      classNames: c
-    } = x(), r = v(() => {
-      if (!m) {
-        if (t.values.length === 0)
-          return [];
-        const e = t.startPoint ?? d.value, l = t.values[0];
-        return [{
-          start: Math.min(e, l),
-          end: Math.max(e, l)
-        }];
-      }
-      const a = [];
-      for (let e = 0; e < t.values.length - 1; e += 1)
-        a.push({
-          start: t.values[e],
-          end: t.values[e + 1]
-        });
-      return a;
-    });
-    return () => {
-      if (!o)
-        return null;
-      const a = r.value?.length && (c.tracks || n.tracks) ? u(i, {
-        index: 0,
-        prefixCls: t.prefixCls,
-        start: r.value[0].start,
-        end: r.value[r.value.length - 1].end,
-        replaceCls: y(c.tracks, `${t.prefixCls}-tracks`),
-        style: n.tracks
-      }, null) : null;
-      return u(k, null, [a, r.value.map(({
-        start: e,
-        end: l
-      }, s) => u(i, {
-        index: s,
-        prefixCls: t.prefixCls,
-        style: {
-          ...g(t.trackStyle, s),
-          ...n?.track
-        },
-        start: e,
-        end: l,
-        key: s,
-        onStartMove: t.onStartMove
-      }, null))]);
-    };
-  }
+import { useInjectSlider } from "../context.js";
+import { getIndex } from "../util.js";
+import Track_default from "./Track.js";
+import { Fragment, computed, createVNode, defineComponent } from "vue";
+import { classNames } from "@v-c/util";
+var Tracks_default = /* @__PURE__ */ defineComponent({
+	name: "Tracks",
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		trackStyle: { type: [Object, Array] },
+		values: {
+			type: Array,
+			required: true
+		},
+		onStartMove: { type: Function },
+		startPoint: { type: Number }
+	},
+	setup(props) {
+		const sliderContext = useInjectSlider();
+		const trackList = computed(() => {
+			const range = sliderContext.value.range;
+			const min = sliderContext.value.min;
+			if (!range) {
+				if (props.values.length === 0) return [];
+				const startValue = props.startPoint ?? min;
+				const endValue = props.values[0];
+				return [{
+					start: Math.min(startValue, endValue),
+					end: Math.max(startValue, endValue)
+				}];
+			}
+			const list = [];
+			for (let i = 0; i < props.values.length - 1; i += 1) list.push({
+				start: props.values[i],
+				end: props.values[i + 1]
+			});
+			return list;
+		});
+		return () => {
+			if (!sliderContext.value.included) return null;
+			const { classNames: classNames$1, styles } = sliderContext.value;
+			return createVNode(Fragment, null, [trackList.value?.length && (classNames$1.tracks || styles.tracks) ? createVNode(Track_default, {
+				"index": 0,
+				"prefixCls": props.prefixCls,
+				"start": trackList.value[0].start,
+				"end": trackList.value[trackList.value.length - 1].end,
+				"replaceCls": classNames(classNames$1.tracks, `${props.prefixCls}-tracks`),
+				"style": styles.tracks
+			}, null) : null, trackList.value.map(({ start, end }, index) => createVNode(Track_default, {
+				"index": index,
+				"prefixCls": props.prefixCls,
+				"style": {
+					...getIndex(props.trackStyle, index),
+					...styles?.track
+				},
+				"start": start,
+				"end": end,
+				"key": index,
+				"onStartMove": props.onStartMove
+			}, null))]);
+		};
+	}
 });
-export {
-  N as default
-};
+export { Tracks_default as default };

package/dist/_virtual/rolldown_runtime.cjs

@@ -0,0 +1,21 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+exports.__toESM = __toESM;

package/dist/context.cjs

@@ -1 +1,39 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),t=Symbol("SliderContext"),l={min:0,max:0,direction:"ltr",step:1,includedStart:0,includedEnd:0,tabIndex:0,keyboard:!0,styles:{},classNames:{}};function o(n){e.provide(t,n)}function r(){return e.inject(t)}const d=Symbol("UnstableContext"),i={};exports.UnstableContextKey=d;exports.defaultSliderContextValue=l;exports.defaultUnstableContextValue=i;exports.useInjectSlider=r;exports.useProviderSliderContext=o;
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+var SliderContextKey = Symbol("SliderContext");
+const defaultSliderContextValue = {
+	min: 0,
+	max: 0,
+	direction: "ltr",
+	step: 1,
+	includedStart: 0,
+	includedEnd: 0,
+	tabIndex: 0,
+	keyboard: true,
+	styles: {},
+	classNames: {}
+};
+function useProviderSliderContext(ctx) {
+	(0, vue.provide)(SliderContextKey, ctx);
+}
+function useInjectSlider() {
+	return (0, vue.inject)(SliderContextKey, (0, vue.ref)({}));
+}
+const UnstableContextKey = Symbol("UnstableContext");
+const defaultUnstableContextValue = {};
+const UnstableProvider = (0, vue.defineComponent)((props, { slots }) => {
+	(0, vue.provide)(UnstableContextKey, props.value);
+	return () => {
+		return slots?.default?.();
+	};
+}, { props: ["value"] });
+function useUnstableContext() {
+	return (0, vue.inject)(UnstableContextKey, {});
+}
+exports.UnstableContextKey = UnstableContextKey;
+exports.UnstableProvider = UnstableProvider;
+exports.defaultSliderContextValue = defaultSliderContextValue;
+exports.defaultUnstableContextValue = defaultUnstableContextValue;
+exports.useInjectSlider = useInjectSlider;
+exports.useProviderSliderContext = useProviderSliderContext;
+exports.useUnstableContext = useUnstableContext;

package/dist/context.d.ts

@@ -1,15 +1,15 @@
-import { InjectionKey, ShallowRef } from 'vue';
+import { InjectionKey, Ref } from 'vue';
 import { AriaValueFormat, Direction, SliderClassNames, SliderStyles } from './interface';
 export interface SliderContextProps {
-    min: ShallowRef<number>;
-    max: ShallowRef<number>;
+    min: number;
+    max: number;
     includedStart: number;
     includedEnd: number;
-    direction: ShallowRef<Direction>;
+    direction: Direction;
     disabled?: boolean;
     keyboard?: boolean;
     included?: boolean;
-    step: ShallowRef<number | null>;
+    step: number | null;
     range?: boolean;
     tabIndex: number | number[];
     ariaLabelForHandle?: string | string[];
@@ -31,8 +31,8 @@ export declare const defaultSliderContextValue: {
     styles: {};
     classNames: {};
 };
-export declare function useProviderSliderContext(ctx: SliderContextProps): void;
-export declare function useInjectSlider(): SliderContextProps;
+export declare function useProviderSliderContext(ctx: Ref<SliderContextProps>): void;
+export declare function useInjectSlider(): Ref<SliderContextProps>;
 export interface UnstableContextProps {
     onDragStart?: (info: {
         rawValues: number[];
@@ -49,3 +49,9 @@ export interface UnstableContextProps {
 /** @private NOT PROMISE AVAILABLE. DO NOT USE IN PRODUCTION. */
 export declare const UnstableContextKey: InjectionKey<UnstableContextProps>;
 export declare const defaultUnstableContextValue: UnstableContextProps;
+export declare const UnstableProvider: import('vue').DefineSetupFnComponent<{
+    value: any;
+}, {}, {}, {
+    value: any;
+} & {}, import('vue').PublicProps>;
+export declare function useUnstableContext(): UnstableContextProps;

package/dist/context.js

@@ -1,27 +1,32 @@
-import { provide as n, inject as o } from "vue";
-const e = Symbol("SliderContext"), r = {
-  min: 0,
-  max: 0,
-  direction: "ltr",
-  step: 1,
-  includedStart: 0,
-  includedEnd: 0,
-  tabIndex: 0,
-  keyboard: !0,
-  styles: {},
-  classNames: {}
+import { defineComponent, inject, provide, ref } from "vue";
+var SliderContextKey = Symbol("SliderContext");
+const defaultSliderContextValue = {
+	min: 0,
+	max: 0,
+	direction: "ltr",
+	step: 1,
+	includedStart: 0,
+	includedEnd: 0,
+	tabIndex: 0,
+	keyboard: true,
+	styles: {},
+	classNames: {}
 };
-function d(t) {
-  n(e, t);
+function useProviderSliderContext(ctx) {
+	provide(SliderContextKey, ctx);
 }
-function i() {
-  return o(e);
+function useInjectSlider() {
+	return inject(SliderContextKey, ref({}));
 }
-const s = Symbol("UnstableContext"), a = {};
-export {
-  s as UnstableContextKey,
-  r as defaultSliderContextValue,
-  a as defaultUnstableContextValue,
-  i as useInjectSlider,
-  d as useProviderSliderContext
-};
+const UnstableContextKey = Symbol("UnstableContext");
+const defaultUnstableContextValue = {};
+const UnstableProvider = defineComponent((props, { slots }) => {
+	provide(UnstableContextKey, props.value);
+	return () => {
+		return slots?.default?.();
+	};
+}, { props: ["value"] });
+function useUnstableContext() {
+	return inject(UnstableContextKey, {});
+}
+export { UnstableContextKey, UnstableProvider, defaultSliderContextValue, defaultUnstableContextValue, useInjectSlider, useProviderSliderContext, useUnstableContext };

package/dist/hooks/useDrag.cjs

@@ -1 +1,160 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const Q=require("@v-c/util/dist/hooks/useEvent"),l=require("vue"),q=require("../context.cjs"),W=130;function P(h){const M="targetTouches"in h?h.targetTouches[0]:h;return{pageX:M.pageX,pageY:M.pageY}}function Z(h,M,f,T,X,y,B,K,x,O,z){const Y=l.ref(null),c=l.ref(-1),C=l.ref(!1),i=l.ref(f.value),g=l.ref(f.value),p=l.ref(null),E=l.ref(null),v=l.ref(null),A=l.inject(q.UnstableContextKey,q.defaultUnstableContextValue),{onDragStart:R,onDragChange:U}=A;c.value===-1&&(i.value=f.value),l.onUnmounted(()=>{document.removeEventListener("mousemove",p.value),document.removeEventListener("mouseup",E.value),v.value&&(v.value.removeEventListener("touchmove",p.value),v.value.removeEventListener("touchend",E.value))});const j=(t,u,n)=>{u!==void 0&&(Y.value=u),i.value=t;let a=t;n&&(a=t.filter((s,e)=>e!==c.value)),B(a),U&&U({rawValues:t,deleteIndex:n?c.value:-1,draggingIndex:c.value,draggingValue:u})},F=Q((t,u,n)=>{if(t===-1){const a=g.value[0],s=g.value[g.value.length-1],e=T.value-a,r=X.value-s;let o=u*(X.value-T.value);o=Math.max(o,e),o=Math.min(o,r),o=y(a+o)-a;const d=g.value.map(m=>m+o);j(d)}else{const a=(X.value-T.value)*u,s=[...i.value];s[t]=g.value[t];const e=x(s,a,t,"dist");j(e.values,e.value,n)}}),G=(t,u,n)=>{t.stopPropagation();const a=n||f.value,s=a[u];c.value=u,Y.value=s,g.value=a,i.value=a,C.value=!1;const{pageX:e,pageY:r}=P(t);let o=!1;R&&R({rawValues:a,draggingIndex:u,draggingValue:s});const b=m=>{m.preventDefault();const{pageX:J,pageY:N}=P(m),D=J-e,S=N-r,{width:_,height:k}=h.value.getBoundingClientRect();let V,L;switch(M.value){case"btt":V=-S/k,L=D;break;case"ttb":V=S/k,L=D;break;case"rtl":V=-D/_,L=S;break;default:V=D/_,L=S}o=O?Math.abs(L)>W&&z<i.value.length:!1,C.value=o,F(u,V,o)},d=m=>{m.preventDefault(),document.removeEventListener("mouseup",d),document.removeEventListener("mousemove",b),v.value&&(v.value.removeEventListener("touchmove",p.value),v.value.removeEventListener("touchend",E.value)),p.value=null,E.value=null,v.value=null,K(o),c.value=-1,C.value=!1};document.addEventListener("mouseup",d),document.addEventListener("mousemove",b),t.currentTarget.addEventListener("touchend",d),t.currentTarget.addEventListener("touchmove",b),p.value=b,E.value=d,v.value=t.currentTarget},H=l.computed(()=>{const t=[...f.value].sort((e,r)=>e-r),u=[...i.value].sort((e,r)=>e-r),n={};u.forEach(e=>{n[e]=(n[e]||0)+1}),t.forEach(e=>{n[e]=(n[e]||0)-1});const a=O?1:0;return Object.values(n).reduce((e,r)=>e+Math.abs(r),0)<=a?i.value:f.value});return[c,Y,C,H,G]}exports.default=Z;
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_context = require("../context.cjs");
+let vue = require("vue");
+let __v_c_util_dist_hooks_useEvent = require("@v-c/util/dist/hooks/useEvent");
+__v_c_util_dist_hooks_useEvent = require_rolldown_runtime.__toESM(__v_c_util_dist_hooks_useEvent);
+var REMOVE_DIST = 130;
+function getPosition(e) {
+	const obj = "targetTouches" in e ? e.targetTouches[0] : e;
+	return {
+		pageX: obj.pageX,
+		pageY: obj.pageY
+	};
+}
+function useDrag(containerRef, direction, rawValues, min, max, formatValue, triggerChange, finishChange, offsetValues, editable, minCount) {
+	const draggingValue = (0, vue.ref)(null);
+	const draggingIndex = (0, vue.ref)(-1);
+	const draggingDelete = (0, vue.ref)(false);
+	const cacheValues = (0, vue.ref)(rawValues.value);
+	const originValues = (0, vue.ref)(rawValues.value);
+	const mouseMoveEventRef = (0, vue.ref)(null);
+	const mouseUpEventRef = (0, vue.ref)(null);
+	const touchEventTargetRef = (0, vue.ref)(null);
+	const { onDragStart, onDragChange } = (0, vue.inject)(require_context.UnstableContextKey, require_context.defaultUnstableContextValue);
+	(0, vue.watch)(rawValues, (val) => {
+		if (draggingIndex.value === -1) {
+			cacheValues.value = [...val];
+			originValues.value = [...val];
+		}
+	}, { immediate: true });
+	(0, vue.onUnmounted)(() => {
+		document.removeEventListener("mousemove", mouseMoveEventRef.value);
+		document.removeEventListener("mouseup", mouseUpEventRef.value);
+		if (touchEventTargetRef.value) {
+			touchEventTargetRef.value.removeEventListener("touchmove", mouseMoveEventRef.value);
+			touchEventTargetRef.value.removeEventListener("touchend", mouseUpEventRef.value);
+		}
+	});
+	const flushValues = (nextValues, nextValue, deleteMark) => {
+		if (nextValue !== void 0) draggingValue.value = nextValue;
+		cacheValues.value = nextValues;
+		let changeValues = nextValues;
+		if (deleteMark) changeValues = nextValues.filter((_, i) => i !== draggingIndex.value);
+		triggerChange(changeValues);
+		if (onDragChange) onDragChange({
+			rawValues: nextValues,
+			deleteIndex: deleteMark ? draggingIndex.value : -1,
+			draggingIndex: draggingIndex.value,
+			draggingValue: nextValue
+		});
+	};
+	const updateCacheValue = (0, __v_c_util_dist_hooks_useEvent.default)((valueIndex, offsetPercent, deleteMark) => {
+		if (valueIndex === -1) {
+			const startValue = originValues.value[0];
+			const endValue = originValues.value[originValues.value.length - 1];
+			const maxStartOffset = min.value - startValue;
+			const maxEndOffset = max.value - endValue;
+			let offset = offsetPercent * (max.value - min.value);
+			offset = Math.max(offset, maxStartOffset);
+			offset = Math.min(offset, maxEndOffset);
+			offset = formatValue.value(startValue + offset) - startValue;
+			flushValues(originValues.value.map((val) => val + offset));
+		} else {
+			const offsetDist = (max.value - min.value) * offsetPercent;
+			const cloneValues = [...cacheValues.value];
+			cloneValues[valueIndex] = originValues.value[valueIndex];
+			const next = offsetValues.value(cloneValues, offsetDist, valueIndex, "dist");
+			flushValues(next.values, next.value, deleteMark);
+		}
+	});
+	const onStartMove = (e, valueIndex, startValues) => {
+		e.stopPropagation();
+		const initialValues = startValues || rawValues.value;
+		const originValue = initialValues[valueIndex];
+		draggingIndex.value = valueIndex;
+		draggingValue.value = originValue;
+		originValues.value = initialValues;
+		cacheValues.value = initialValues;
+		draggingDelete.value = false;
+		const { pageX: startX, pageY: startY } = getPosition(e);
+		let deleteMark = false;
+		if (onDragStart) onDragStart({
+			rawValues: initialValues,
+			draggingIndex: valueIndex,
+			draggingValue: originValue
+		});
+		const onMouseMove = (event) => {
+			event.preventDefault();
+			const { pageX: moveX, pageY: moveY } = getPosition(event);
+			const offsetX = moveX - startX;
+			const offsetY = moveY - startY;
+			const { width, height } = containerRef.value.getBoundingClientRect();
+			let offSetPercent;
+			let removeDist;
+			switch (direction.value) {
+				case "btt":
+					offSetPercent = -offsetY / height;
+					removeDist = offsetX;
+					break;
+				case "ttb":
+					offSetPercent = offsetY / height;
+					removeDist = offsetX;
+					break;
+				case "rtl":
+					offSetPercent = -offsetX / width;
+					removeDist = offsetY;
+					break;
+				default:
+					offSetPercent = offsetX / width;
+					removeDist = offsetY;
+			}
+			deleteMark = editable.value ? Math.abs(removeDist) > REMOVE_DIST && minCount.value < cacheValues.value.length : false;
+			draggingDelete.value = deleteMark;
+			updateCacheValue(valueIndex, offSetPercent, deleteMark);
+		};
+		const onMouseUp = (event) => {
+			event.preventDefault();
+			document.removeEventListener("mouseup", onMouseUp);
+			document.removeEventListener("mousemove", onMouseMove);
+			if (touchEventTargetRef.value) {
+				touchEventTargetRef.value.removeEventListener("touchmove", mouseMoveEventRef.value);
+				touchEventTargetRef.value.removeEventListener("touchend", mouseUpEventRef.value);
+			}
+			mouseMoveEventRef.value = null;
+			mouseUpEventRef.value = null;
+			touchEventTargetRef.value = null;
+			finishChange(deleteMark);
+			draggingIndex.value = -1;
+			draggingDelete.value = false;
+		};
+		document.addEventListener("mouseup", onMouseUp);
+		document.addEventListener("mousemove", onMouseMove);
+		e.currentTarget.addEventListener("touchend", onMouseUp);
+		e.currentTarget.addEventListener("touchmove", onMouseMove);
+		mouseMoveEventRef.value = onMouseMove;
+		mouseUpEventRef.value = onMouseUp;
+		touchEventTargetRef.value = e.currentTarget;
+	};
+	return [
+		draggingIndex,
+		draggingValue,
+		draggingDelete,
+		(0, vue.computed)(() => {
+			const sourceValues = [...rawValues.value].sort((a, b) => a - b);
+			const targetValues = [...cacheValues.value].sort((a, b) => a - b);
+			const counts = {};
+			targetValues.forEach((val) => {
+				counts[val] = (counts[val] || 0) + 1;
+			});
+			sourceValues.forEach((val) => {
+				counts[val] = (counts[val] || 0) - 1;
+			});
+			const maxDiffCount = editable.value ? 1 : 0;
+			return Object.values(counts).reduce((prev, next) => prev + Math.abs(next), 0) <= maxDiffCount ? cacheValues.value : rawValues.value;
+		}),
+		onStartMove
+	];
+}
+var useDrag_default = useDrag;
+exports.default = useDrag_default;

package/dist/hooks/useDrag.d.ts

@@ -1,7 +1,7 @@
-import { Ref, ShallowRef } from 'vue';
+import { ComputedRef, Ref, ShallowRef } from 'vue';
 import { Direction, OnStartMove } from '../interface';
 import { OffsetValues } from './useOffset';
-declare function useDrag(containerRef: Ref<HTMLDivElement>, direction: ShallowRef<Direction>, rawValues: Ref<number[]>, min: ShallowRef<number>, max: ShallowRef<number>, formatValue: (value: number) => number, triggerChange: (values: number[]) => void, finishChange: (draggingDelete: boolean) => void, offsetValues: OffsetValues, editable: boolean, minCount: number): [
+declare function useDrag(containerRef: Ref<HTMLDivElement>, direction: ShallowRef<Direction> | ComputedRef<Direction>, rawValues: Ref<number[]>, min: ShallowRef<number> | ComputedRef<number>, max: ShallowRef<number> | ComputedRef<number>, formatValue: Ref<(value: number) => number> | ComputedRef<(value: number) => number>, triggerChange: (values: number[]) => void, finishChange: (draggingDelete: boolean) => void, offsetValues: Ref<OffsetValues> | ComputedRef<OffsetValues>, editable: ShallowRef<boolean> | ComputedRef<boolean>, minCount: ShallowRef<number> | ComputedRef<number>): [
     draggingIndex: Ref<number>,
     draggingValue: Ref<number>,
     draggingDelete: Ref<boolean>,