@v-c/slider 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/LICENSE +21 -0
  2. package/dist/Handles/Handle.cjs +1 -0
  3. package/dist/Handles/Handle.d.ts +107 -0
  4. package/dist/Handles/Handle.js +203 -0
  5. package/dist/Handles/index.cjs +1 -0
  6. package/dist/Handles/index.d.ts +98 -0
  7. package/dist/Handles/index.js +117 -0
  8. package/dist/Marks/Mark.cjs +1 -0
  9. package/dist/Marks/Mark.d.ts +9 -0
  10. package/dist/Marks/Mark.js +39 -0
  11. package/dist/Marks/index.cjs +1 -0
  12. package/dist/Marks/index.d.ts +15 -0
  13. package/dist/Marks/index.js +31 -0
  14. package/dist/Slider.cjs +1 -0
  15. package/dist/Slider.d.ts +253 -0
  16. package/dist/Slider.js +343 -0
  17. package/dist/Steps/Dot.cjs +1 -0
  18. package/dist/Steps/Dot.d.ts +9 -0
  19. package/dist/Steps/Dot.js +38 -0
  20. package/dist/Steps/index.cjs +1 -0
  21. package/dist/Steps/index.d.ts +11 -0
  22. package/dist/Steps/index.js +41 -0
  23. package/dist/Tracks/Track.cjs +1 -0
  24. package/dist/Tracks/Track.d.ts +61 -0
  25. package/dist/Tracks/Track.js +82 -0
  26. package/dist/Tracks/index.cjs +1 -0
  27. package/dist/Tracks/index.d.ts +47 -0
  28. package/dist/Tracks/index.js +83 -0
  29. package/dist/context.cjs +1 -0
  30. package/dist/context.d.ts +51 -0
  31. package/dist/context.js +27 -0
  32. package/dist/hooks/useDrag.cjs +1 -0
  33. package/dist/hooks/useDrag.d.ts +11 -0
  34. package/dist/hooks/useDrag.js +88 -0
  35. package/dist/hooks/useOffset.cjs +1 -0
  36. package/dist/hooks/useOffset.d.ts +10 -0
  37. package/dist/hooks/useOffset.js +98 -0
  38. package/dist/hooks/useRange.cjs +1 -0
  39. package/dist/hooks/useRange.d.ts +8 -0
  40. package/dist/hooks/useRange.js +10 -0
  41. package/dist/index.cjs +1 -0
  42. package/dist/index.d.ts +3 -0
  43. package/dist/index.js +4 -0
  44. package/dist/interface.cjs +1 -0
  45. package/dist/interface.d.ts +7 -0
  46. package/dist/interface.js +1 -0
  47. package/dist/util.cjs +1 -0
  48. package/dist/util.d.ts +6 -0
  49. package/dist/util.js +29 -0
  50. package/docs/TooltipSlider.tsx +94 -0
  51. package/docs/assets/anim.less +63 -0
  52. package/docs/assets/bootstrap.less +163 -0
  53. package/docs/assets/index.less +337 -0
  54. package/docs/debug.vue +60 -0
  55. package/docs/editable.vue +59 -0
  56. package/docs/handle.vue +45 -0
  57. package/docs/marks.vue +85 -0
  58. package/docs/multiple.vue +54 -0
  59. package/docs/range.vue +211 -0
  60. package/docs/slider.stories.vue +45 -0
  61. package/docs/sliderDemo.vue +267 -0
  62. package/docs/vertical.vue +122 -0
  63. package/package.json +35 -0
  64. package/src/Handles/Handle.tsx +226 -0
  65. package/src/Handles/index.tsx +124 -0
  66. package/src/Marks/Mark.tsx +40 -0
  67. package/src/Marks/index.tsx +40 -0
  68. package/src/Slider.tsx +582 -0
  69. package/src/Steps/Dot.tsx +40 -0
  70. package/src/Steps/index.tsx +54 -0
  71. package/src/Tracks/Track.tsx +89 -0
  72. package/src/Tracks/index.tsx +92 -0
  73. package/src/context.ts +65 -0
  74. package/src/hooks/useDrag.ts +244 -0
  75. package/src/hooks/useOffset.ts +264 -0
  76. package/src/hooks/useRange.ts +24 -0
  77. package/src/index.ts +8 -0
  78. package/src/interface.ts +17 -0
  79. package/src/util.ts +41 -0
  80. package/vite.config.ts +18 -0
  81. package/vitest.config.ts +11 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2023 antdv-community
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("vue"),e=require("@v-c/util/dist/KeyCode"),B=require("classnames"),L=require("../context.cjs"),s=require("../util.cjs"),U=o.defineComponent({name:"Handle",props:{prefixCls:{type:String,required:!0},value:{type:Number,required:!0},valueIndex:{type:Number,required:!0},dragging:{type:Boolean,default:!1},draggingDelete:{type:Boolean,default:!1},onStartMove:{type:Function,required:!0},onDelete:{type:Function,required:!0},onOffsetChange:{type:Function,required:!0},onFocus:{type:Function,required:!0},onMouseenter:{type:Function,required:!0},render:Function,onChangeComplete:Function,mock:Boolean,classNames:Object,styles:Object},emits:["focus","mouseenter","startMove","delete","offsetChange","changeComplete"],setup(r,{attrs:F,emit:u,expose:q}){const{min:v,max:g,direction:t,disabled:d,keyboard:E,range:P,tabIndex:k,ariaLabelForHandle:D,ariaLabelledByForHandle:M,ariaRequired:N,ariaValueTextFormatterForHandle:O}=L.useInjectSlider(),i=o.ref({}),f=o.ref({}),b=o.ref({}),y=a=>{console.log("emit-start"),d||u("startMove",a,r.valueIndex)},S=a=>{console.log("emit-focus"),u("focus",a,r.valueIndex)},H=a=>{console.log("emit-enter"),u("mouseenter",a,r.valueIndex)},w=a=>{if(!d&&E){let n=null;switch(a.which||a.keyCode){case e.LEFT:n=t.value==="ltr"||t.value==="btt"?-1:1;break;case e.RIGHT:n=t.value==="ltr"||t.value==="btt"?1:-1;break;case e.UP:n=t.value!=="ttb"?1:-1;break;case e.DOWN:n=t.value!=="ttb"?-1:1;break;case e.HOME:n="min";break;case e.END:n="max";break;case e.PAGE_UP:n=2;break;case e.PAGE_DOWN:n=-2;break;case e.BACKSPACE:case e.DELETE:u("delete",a,r.valueIndex);break}n!==null&&(a.preventDefault(),u("offsetChange",n,r.valueIndex))}},T=a=>{switch(a.which||a.keyCode){case e.LEFT:case e.RIGHT:case e.UP:case e.DOWN:case e.HOME:case e.END:case e.PAGE_UP:case e.PAGE_DOWN:u("changeComplete");break}};return q({focus:()=>r.valueIndex}),()=>{const{prefixCls:a,value:n,valueIndex:l,onStartMove:$,onDelete:j,render:x,dragging:h,draggingDelete:m,onOffsetChange:R,onChangeComplete:W,onFocus:V,onMouseenter:z,styles:A,classNames:G,...C}=r,K=s.getDirectionStyle(t.value,n,v.value,g.value);l!==null?i.value={tabindex:d?null:s.getIndex(k,l),role:"slider","aria-valuemin":v.value,"aria-valuemax":g.value,"aria-valuenow":n,"aria-disabled":d,"aria-label":s.getIndex(D,l),"aria-labelledby":s.getIndex(M,l),"aria-required":s.getIndex(N,l),"aria-valuetext":s.getIndex(O,l)?.(n),"aria-orientation":t.value==="ltr"||t.value==="rtl"?"horizontal":"vertical",onMousedown:y,onTouchstart:y,onFocus:S,onMouseenter:H,onKeydown:w,onKeyup:T,...C}:i.value={...C};const c=`${a}-handle`;f.value=B(c,{[`${c}-${l+1}`]:l!==null&&P,[`${c}-dragging`]:h,[`${c}-dragging-delete`]:m},G?.handle),b.value={...K,...F.style,...A?.handle};const I=o.createVNode("div",o.mergeProps({class:f.value,style:b.value},i.value),null);if(x){const p={index:l,prefixCls:a,value:n,dragging:h,draggingDelete:m,node:I};console.log("render",p);const _=()=>x(p);return o.createVNode(_,null,null)}return I}}});exports.default=U;
@@ -0,0 +1,107 @@
1
+ import { PropType } from 'vue';
2
+ import { OnStartMove, SliderClassNames, SliderStyles } from '../interface';
3
+ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
4
+ prefixCls: {
5
+ type: StringConstructor;
6
+ required: true;
7
+ };
8
+ value: {
9
+ type: NumberConstructor;
10
+ required: true;
11
+ };
12
+ valueIndex: {
13
+ type: NumberConstructor;
14
+ required: true;
15
+ };
16
+ dragging: {
17
+ type: BooleanConstructor;
18
+ default: boolean;
19
+ };
20
+ draggingDelete: {
21
+ type: BooleanConstructor;
22
+ default: boolean;
23
+ };
24
+ onStartMove: {
25
+ type: PropType<OnStartMove>;
26
+ required: true;
27
+ };
28
+ onDelete: {
29
+ type: PropType<(index: number) => void>;
30
+ required: true;
31
+ };
32
+ onOffsetChange: {
33
+ type: PropType<(value: number | "min" | "max", valueIndex: number) => void>;
34
+ required: true;
35
+ };
36
+ onFocus: {
37
+ type: PropType<(e: FocusEvent, index: number) => void>;
38
+ required: true;
39
+ };
40
+ onMouseenter: {
41
+ type: PropType<(e: MouseEvent, index: number) => void>;
42
+ required: true;
43
+ };
44
+ render: FunctionConstructor;
45
+ onChangeComplete: PropType<() => void>;
46
+ mock: BooleanConstructor;
47
+ classNames: PropType<SliderClassNames>;
48
+ styles: PropType<SliderStyles>;
49
+ }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("focus" | "mouseenter" | "startMove" | "delete" | "offsetChange" | "changeComplete")[], "focus" | "mouseenter" | "startMove" | "delete" | "offsetChange" | "changeComplete", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
50
+ prefixCls: {
51
+ type: StringConstructor;
52
+ required: true;
53
+ };
54
+ value: {
55
+ type: NumberConstructor;
56
+ required: true;
57
+ };
58
+ valueIndex: {
59
+ type: NumberConstructor;
60
+ required: true;
61
+ };
62
+ dragging: {
63
+ type: BooleanConstructor;
64
+ default: boolean;
65
+ };
66
+ draggingDelete: {
67
+ type: BooleanConstructor;
68
+ default: boolean;
69
+ };
70
+ onStartMove: {
71
+ type: PropType<OnStartMove>;
72
+ required: true;
73
+ };
74
+ onDelete: {
75
+ type: PropType<(index: number) => void>;
76
+ required: true;
77
+ };
78
+ onOffsetChange: {
79
+ type: PropType<(value: number | "min" | "max", valueIndex: number) => void>;
80
+ required: true;
81
+ };
82
+ onFocus: {
83
+ type: PropType<(e: FocusEvent, index: number) => void>;
84
+ required: true;
85
+ };
86
+ onMouseenter: {
87
+ type: PropType<(e: MouseEvent, index: number) => void>;
88
+ required: true;
89
+ };
90
+ render: FunctionConstructor;
91
+ onChangeComplete: PropType<() => void>;
92
+ mock: BooleanConstructor;
93
+ classNames: PropType<SliderClassNames>;
94
+ styles: PropType<SliderStyles>;
95
+ }>> & Readonly<{
96
+ onStartMove?: ((...args: any[]) => any) | undefined;
97
+ onDelete?: ((...args: any[]) => any) | undefined;
98
+ onOffsetChange?: ((...args: any[]) => any) | undefined;
99
+ onFocus?: ((...args: any[]) => any) | undefined;
100
+ onMouseenter?: ((...args: any[]) => any) | undefined;
101
+ onChangeComplete?: ((...args: any[]) => any) | undefined;
102
+ }>, {
103
+ mock: boolean;
104
+ dragging: boolean;
105
+ draggingDelete: boolean;
106
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
107
+ export default _default;
@@ -0,0 +1,203 @@
1
+ import { defineComponent as L, ref as c, createVNode as I, mergeProps as R } from "vue";
2
+ import e from "@v-c/util/dist/KeyCode";
3
+ import U from "classnames";
4
+ import { useInjectSlider as $ } from "../context.js";
5
+ import { getDirectionStyle as W, getIndex as u } from "../util.js";
6
+ const te = /* @__PURE__ */ L({
7
+ name: "Handle",
8
+ props: {
9
+ prefixCls: {
10
+ type: String,
11
+ required: !0
12
+ },
13
+ value: {
14
+ type: Number,
15
+ required: !0
16
+ },
17
+ valueIndex: {
18
+ type: Number,
19
+ required: !0
20
+ },
21
+ dragging: {
22
+ type: Boolean,
23
+ default: !1
24
+ },
25
+ draggingDelete: {
26
+ type: Boolean,
27
+ default: !1
28
+ },
29
+ onStartMove: {
30
+ type: Function,
31
+ required: !0
32
+ },
33
+ onDelete: {
34
+ type: Function,
35
+ required: !0
36
+ },
37
+ onOffsetChange: {
38
+ type: Function,
39
+ required: !0
40
+ },
41
+ onFocus: {
42
+ type: Function,
43
+ required: !0
44
+ },
45
+ onMouseenter: {
46
+ type: Function,
47
+ required: !0
48
+ },
49
+ render: Function,
50
+ onChangeComplete: Function,
51
+ mock: Boolean,
52
+ classNames: Object,
53
+ styles: Object
54
+ },
55
+ emits: ["focus", "mouseenter", "startMove", "delete", "offsetChange", "changeComplete"],
56
+ setup(o, {
57
+ attrs: E,
58
+ emit: r,
59
+ expose: k
60
+ }) {
61
+ const {
62
+ min: v,
63
+ max: f,
64
+ direction: t,
65
+ disabled: s,
66
+ keyboard: D,
67
+ range: N,
68
+ tabIndex: P,
69
+ ariaLabelForHandle: M,
70
+ ariaLabelledByForHandle: q,
71
+ ariaRequired: O,
72
+ ariaValueTextFormatterForHandle: H
73
+ } = $(), i = c({}), g = c({}), m = c({}), b = (a) => {
74
+ console.log("emit-start"), s || r("startMove", a, o.valueIndex);
75
+ }, S = (a) => {
76
+ console.log("emit-focus"), r("focus", a, o.valueIndex);
77
+ }, w = (a) => {
78
+ console.log("emit-enter"), r("mouseenter", a, o.valueIndex);
79
+ }, T = (a) => {
80
+ if (!s && D) {
81
+ let n = null;
82
+ switch (a.which || a.keyCode) {
83
+ case e.LEFT:
84
+ n = t.value === "ltr" || t.value === "btt" ? -1 : 1;
85
+ break;
86
+ case e.RIGHT:
87
+ n = t.value === "ltr" || t.value === "btt" ? 1 : -1;
88
+ break;
89
+ // Up is plus
90
+ case e.UP:
91
+ n = t.value !== "ttb" ? 1 : -1;
92
+ break;
93
+ // Down is minus
94
+ case e.DOWN:
95
+ n = t.value !== "ttb" ? -1 : 1;
96
+ break;
97
+ case e.HOME:
98
+ n = "min";
99
+ break;
100
+ case e.END:
101
+ n = "max";
102
+ break;
103
+ case e.PAGE_UP:
104
+ n = 2;
105
+ break;
106
+ case e.PAGE_DOWN:
107
+ n = -2;
108
+ break;
109
+ case e.BACKSPACE:
110
+ case e.DELETE:
111
+ r("delete", a, o.valueIndex);
112
+ break;
113
+ }
114
+ n !== null && (a.preventDefault(), r("offsetChange", n, o.valueIndex));
115
+ }
116
+ }, A = (a) => {
117
+ switch (a.which || a.keyCode) {
118
+ case e.LEFT:
119
+ case e.RIGHT:
120
+ case e.UP:
121
+ case e.DOWN:
122
+ case e.HOME:
123
+ case e.END:
124
+ case e.PAGE_UP:
125
+ case e.PAGE_DOWN:
126
+ r("changeComplete");
127
+ break;
128
+ }
129
+ };
130
+ return k({
131
+ focus: () => o.valueIndex
132
+ }), () => {
133
+ const {
134
+ prefixCls: a,
135
+ value: n,
136
+ valueIndex: l,
137
+ onStartMove: _,
138
+ onDelete: j,
139
+ render: y,
140
+ dragging: h,
141
+ draggingDelete: p,
142
+ onOffsetChange: V,
143
+ onChangeComplete: z,
144
+ onFocus: J,
145
+ onMouseenter: Q,
146
+ styles: G,
147
+ classNames: K,
148
+ ...x
149
+ } = o, B = W(t.value, n, v.value, f.value);
150
+ l !== null ? i.value = {
151
+ tabindex: s ? null : u(P, l),
152
+ role: "slider",
153
+ "aria-valuemin": v.value,
154
+ "aria-valuemax": f.value,
155
+ "aria-valuenow": n,
156
+ "aria-disabled": s,
157
+ "aria-label": u(M, l),
158
+ "aria-labelledby": u(q, l),
159
+ "aria-required": u(O, l),
160
+ "aria-valuetext": u(H, l)?.(n),
161
+ "aria-orientation": t.value === "ltr" || t.value === "rtl" ? "horizontal" : "vertical",
162
+ onMousedown: b,
163
+ onTouchstart: b,
164
+ onFocus: S,
165
+ onMouseenter: w,
166
+ onKeydown: T,
167
+ onKeyup: A,
168
+ ...x
169
+ } : i.value = {
170
+ ...x
171
+ };
172
+ const d = `${a}-handle`;
173
+ g.value = U(d, {
174
+ [`${d}-${l + 1}`]: l !== null && N,
175
+ [`${d}-dragging`]: h,
176
+ [`${d}-dragging-delete`]: p
177
+ }, K?.handle), m.value = {
178
+ ...B,
179
+ ...E.style,
180
+ ...G?.handle
181
+ };
182
+ const C = I("div", R({
183
+ class: g.value,
184
+ style: m.value
185
+ }, i.value), null);
186
+ if (y) {
187
+ const F = {
188
+ index: l,
189
+ prefixCls: a,
190
+ value: n,
191
+ dragging: h,
192
+ draggingDelete: p,
193
+ node: C
194
+ };
195
+ return console.log("render", F), I(() => y(F), null, null);
196
+ }
197
+ return C;
198
+ };
199
+ }
200
+ });
201
+ export {
202
+ te as default
203
+ };
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),I=require("../util.cjs"),p=require("./Handle.cjs"),M=e.defineComponent({name:"Handles",props:{prefixCls:{type:String,required:!0},values:{type:Array,required:!0},handleStyle:{type:[Object,Array]},onStartMove:{type:Function,required:!0},onOffsetChange:{type:Function,required:!0},onFocus:{type:Function},onBlur:{type:Function},onDelete:{type:Function,required:!0},handleRender:Function,activeHandleRender:Function,draggingIndex:{type:Number,default:-1},draggingDelete:{type:Boolean,default:!1},onChangeComplete:Function},emits:["focus"],slots:Object,setup(v,{emit:y,expose:F}){const u=e.ref(),o=e.ref(!1),a=e.ref(-1),l=n=>{a.value=n,o.value=!0},h=(n,t)=>{l(t),y("focus",n)},m=(n,t)=>{l(t)};return F({focus:()=>u.value?.focus(),hideHelp:()=>{o.value=!1}}),()=>{const{prefixCls:n,onStartMove:t,onOffsetChange:q,values:s,handleRender:H,activeHandleRender:d,draggingIndex:i,draggingDelete:c,onFocus:x,handleStyle:C,...S}=v,g={prefixCls:n,onStartMove:t,onOffsetChange:q,render:H,onFocus:h,onMouseenter:m,...S};return e.createVNode(e.Fragment,null,[s?.map((b,r)=>{const f=i===r;return e.createVNode(p.default,e.mergeProps({ref:u.value,dragging:f,draggingDelete:f&&c,style:I.getIndex(C,r),key:r,value:b,valueIndex:r},g),null)}),d&&o.value&&e.createVNode(p.default,e.mergeProps({key:"a11y"},g,{value:s[a.value],valueIndex:1,dragging:i!==-1,draggingDelete:c,render:d,style:{pointerEvents:"none"},"aria-hidden":!0}),null)])}}});exports.default=M;
@@ -0,0 +1,98 @@
1
+ import { CSSProperties, PropType, SlotsType } from 'vue';
2
+ import { OnStartMove } from '../interface';
3
+ export interface HandlesRef {
4
+ focus: (index: number) => void;
5
+ hideHelp: VoidFunction;
6
+ }
7
+ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
8
+ prefixCls: {
9
+ type: StringConstructor;
10
+ required: true;
11
+ };
12
+ values: {
13
+ type: ArrayConstructor;
14
+ required: true;
15
+ };
16
+ handleStyle: {
17
+ type: PropType<CSSProperties | CSSProperties[]>;
18
+ };
19
+ onStartMove: {
20
+ type: PropType<OnStartMove>;
21
+ required: true;
22
+ };
23
+ onOffsetChange: {
24
+ type: PropType<(value: number | "min" | "max", valueIndex: number) => void>;
25
+ required: true;
26
+ };
27
+ onFocus: {
28
+ type: PropType<(e: FocusEvent) => void>;
29
+ };
30
+ onBlur: {
31
+ type: PropType<(e: FocusEvent) => void>;
32
+ };
33
+ onDelete: {
34
+ type: PropType<(index: number) => void>;
35
+ required: true;
36
+ };
37
+ handleRender: FunctionConstructor;
38
+ activeHandleRender: FunctionConstructor;
39
+ draggingIndex: {
40
+ type: NumberConstructor;
41
+ default: number;
42
+ };
43
+ draggingDelete: {
44
+ type: BooleanConstructor;
45
+ default: boolean;
46
+ };
47
+ onChangeComplete: PropType<() => void>;
48
+ }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "focus"[], "focus", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
49
+ prefixCls: {
50
+ type: StringConstructor;
51
+ required: true;
52
+ };
53
+ values: {
54
+ type: ArrayConstructor;
55
+ required: true;
56
+ };
57
+ handleStyle: {
58
+ type: PropType<CSSProperties | CSSProperties[]>;
59
+ };
60
+ onStartMove: {
61
+ type: PropType<OnStartMove>;
62
+ required: true;
63
+ };
64
+ onOffsetChange: {
65
+ type: PropType<(value: number | "min" | "max", valueIndex: number) => void>;
66
+ required: true;
67
+ };
68
+ onFocus: {
69
+ type: PropType<(e: FocusEvent) => void>;
70
+ };
71
+ onBlur: {
72
+ type: PropType<(e: FocusEvent) => void>;
73
+ };
74
+ onDelete: {
75
+ type: PropType<(index: number) => void>;
76
+ required: true;
77
+ };
78
+ handleRender: FunctionConstructor;
79
+ activeHandleRender: FunctionConstructor;
80
+ draggingIndex: {
81
+ type: NumberConstructor;
82
+ default: number;
83
+ };
84
+ draggingDelete: {
85
+ type: BooleanConstructor;
86
+ default: boolean;
87
+ };
88
+ onChangeComplete: PropType<() => void>;
89
+ }>> & Readonly<{
90
+ onFocus?: ((...args: any[]) => any) | undefined;
91
+ }>, {
92
+ draggingDelete: boolean;
93
+ draggingIndex: number;
94
+ }, SlotsType<{
95
+ activeHandleRender: any;
96
+ handleRender: any;
97
+ }>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
98
+ export default _default;
@@ -0,0 +1,117 @@
1
+ import { defineComponent as S, ref as o, createVNode as a, Fragment as b, mergeProps as v } from "vue";
2
+ import { getIndex as M } from "../util.js";
3
+ import y from "./Handle.js";
4
+ const k = /* @__PURE__ */ S({
5
+ name: "Handles",
6
+ props: {
7
+ prefixCls: {
8
+ type: String,
9
+ required: !0
10
+ },
11
+ values: {
12
+ type: Array,
13
+ required: !0
14
+ },
15
+ handleStyle: {
16
+ type: [Object, Array]
17
+ },
18
+ onStartMove: {
19
+ type: Function,
20
+ required: !0
21
+ },
22
+ onOffsetChange: {
23
+ type: Function,
24
+ required: !0
25
+ },
26
+ onFocus: {
27
+ type: Function
28
+ },
29
+ onBlur: {
30
+ type: Function
31
+ },
32
+ onDelete: {
33
+ type: Function,
34
+ required: !0
35
+ },
36
+ handleRender: Function,
37
+ activeHandleRender: Function,
38
+ draggingIndex: {
39
+ type: Number,
40
+ default: -1
41
+ },
42
+ draggingDelete: {
43
+ type: Boolean,
44
+ default: !1
45
+ },
46
+ onChangeComplete: Function
47
+ },
48
+ emits: ["focus"],
49
+ slots: Object,
50
+ setup(m, {
51
+ emit: F,
52
+ expose: h
53
+ }) {
54
+ const l = o(), r = o(!1), u = o(-1), s = (e) => {
55
+ u.value = e, r.value = !0;
56
+ }, H = (e, n) => {
57
+ s(n), F("focus", e);
58
+ }, C = (e, n) => {
59
+ s(n);
60
+ };
61
+ return h({
62
+ focus: () => l.value?.focus(),
63
+ hideHelp: () => {
64
+ r.value = !1;
65
+ }
66
+ }), () => {
67
+ const {
68
+ prefixCls: e,
69
+ onStartMove: n,
70
+ onOffsetChange: x,
71
+ values: d,
72
+ handleRender: I,
73
+ activeHandleRender: i,
74
+ draggingIndex: c,
75
+ draggingDelete: g,
76
+ onFocus: O,
77
+ handleStyle: q,
78
+ ...D
79
+ } = m, p = {
80
+ prefixCls: e,
81
+ onStartMove: n,
82
+ onOffsetChange: x,
83
+ render: I,
84
+ onFocus: H,
85
+ onMouseenter: C,
86
+ ...D
87
+ };
88
+ return a(b, null, [d?.map((R, t) => {
89
+ const f = c === t;
90
+ return a(y, v({
91
+ ref: l.value,
92
+ dragging: f,
93
+ draggingDelete: f && g,
94
+ style: M(q, t),
95
+ key: t,
96
+ value: R,
97
+ valueIndex: t
98
+ }, p), null);
99
+ }), i && r.value && a(y, v({
100
+ key: "a11y"
101
+ }, p, {
102
+ value: d[u.value],
103
+ valueIndex: 1,
104
+ dragging: c !== -1,
105
+ draggingDelete: g,
106
+ render: i,
107
+ style: {
108
+ pointerEvents: "none"
109
+ },
110
+ "aria-hidden": !0
111
+ }), null)]);
112
+ };
113
+ }
114
+ });
115
+ export {
116
+ k as default
117
+ };
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("vue"),y=require("classnames"),f=require("../context.cjs"),g=require("../util.cjs"),q=(n,{attrs:o,slots:l,emit:c})=>{const{prefixCls:i,value:e}=n,{min:s,max:u,direction:r,includedStart:a,includedEnd:d,included:v}=f.useInjectSlider(),t=`${i}-text`,p=g.getDirectionStyle(r.value,e,s.value,u.value);return x.createVNode("span",{class:y(t,{[`${t}-active`]:v&&a<=e&&e<=d}),style:{...p,...o.style},onMousedown:S=>{S.stopPropagation()},onClick:()=>{c("click",e)}},[l.default?.()])};exports.default=q;
@@ -0,0 +1,9 @@
1
+ import { CSSProperties, FunctionalComponent } from 'vue';
2
+ export interface MarkProps {
3
+ prefixCls: string;
4
+ value: number;
5
+ style?: CSSProperties;
6
+ onClick?: Function;
7
+ }
8
+ declare const Mark: FunctionalComponent<MarkProps>;
9
+ export default Mark;
@@ -0,0 +1,39 @@
1
+ import { createVNode as v } from "vue";
2
+ import x from "classnames";
3
+ import { useInjectSlider as y } from "../context.js";
4
+ import { getDirectionStyle as S } from "../util.js";
5
+ const $ = (o, {
6
+ attrs: i,
7
+ slots: l,
8
+ emit: n
9
+ }) => {
10
+ const {
11
+ prefixCls: r,
12
+ value: t
13
+ } = o, {
14
+ min: c,
15
+ max: s,
16
+ direction: a,
17
+ includedStart: d,
18
+ includedEnd: u,
19
+ included: m
20
+ } = y(), e = `${r}-text`, p = S(a.value, t, c.value, s.value);
21
+ return v("span", {
22
+ class: x(e, {
23
+ [`${e}-active`]: m && d <= t && t <= u
24
+ }),
25
+ style: {
26
+ ...p,
27
+ ...i.style
28
+ },
29
+ onMousedown: (f) => {
30
+ f.stopPropagation();
31
+ },
32
+ onClick: () => {
33
+ n("click", t);
34
+ }
35
+ }, [l.default?.()]);
36
+ };
37
+ export {
38
+ $ as default
39
+ };
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("vue"),l=require("./Mark.cjs");function a(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!o.isVNode(e)}const f=(e,{emit:n})=>{const{prefixCls:s,marks:c=[]}=e,i=`${s}-mark`;return c.length?o.createVNode("div",{class:i},[c.map(({value:t,style:u,label:r})=>o.createVNode(l.default,{key:t,prefixCls:i,style:u,value:t,onClick:()=>n("click",t)},a(r)?r:{default:()=>[r]}))]):null};exports.default=f;
@@ -0,0 +1,15 @@
1
+ import { CSSProperties, FunctionalComponent } from 'vue';
2
+ export interface MarkObj {
3
+ style?: CSSProperties;
4
+ label?: any;
5
+ }
6
+ export interface InternalMarkObj extends MarkObj {
7
+ value: number;
8
+ }
9
+ export interface MarksProps {
10
+ prefixCls: string;
11
+ marks?: InternalMarkObj[];
12
+ onClick?: (value: number) => void;
13
+ }
14
+ declare const Marks: FunctionalComponent<MarksProps>;
15
+ export default Marks;
@@ -0,0 +1,31 @@
1
+ import { createVNode as i, isVNode as l } from "vue";
2
+ import a from "./Mark.js";
3
+ function p(t) {
4
+ return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !l(t);
5
+ }
6
+ const u = (t, {
7
+ emit: n
8
+ }) => {
9
+ const {
10
+ prefixCls: s,
11
+ marks: e = []
12
+ } = t, c = `${s}-mark`;
13
+ return e.length ? i("div", {
14
+ class: c
15
+ }, [e.map(({
16
+ value: r,
17
+ style: f,
18
+ label: o
19
+ }) => i(a, {
20
+ key: r,
21
+ prefixCls: c,
22
+ style: f,
23
+ value: r,
24
+ onClick: () => n("click", r)
25
+ }, p(o) ? o : {
26
+ default: () => [o]
27
+ }))]) : null;
28
+ };
29
+ export {
30
+ u as default
31
+ };
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),oe=require("@v-c/util/dist/isEqual"),P=require("@v-c/util/dist/warning"),J=require("classnames"),se=require("./context.cjs"),ce=require("./Handles/index.cjs"),ie=require("./hooks/useDrag.cjs"),de=require("./hooks/useOffset.cjs"),fe=require("./hooks/useRange.cjs"),ve=require("./Marks/index.cjs"),ge=require("./Steps/index.cjs"),be=require("./Tracks/index.cjs");function he(){return{prefixCls:{type:String,default:"vc-slider"},className:String,classNames:Object,styles:Object,id:String,disabled:{type:Boolean,default:!1},keyboard:{type:Boolean,default:!0},autoFocus:Boolean,min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},value:[Number,Array],defaultValue:[Number,Array],range:[Boolean,Object],count:Number,allowCross:{type:Boolean,default:!0},pushable:{type:[Boolean,Number],default:!1},reverse:Boolean,vertical:Boolean,included:{type:Boolean,default:!0},startPoint:Number,trackStyle:[Object,Array],handleStyle:[Object,Array],railStyle:Object,dotStyle:[Object,Function],activeDotStyle:[Object,Function],marks:Object,dots:Boolean,handleRender:Function,activeHandleRender:Function,track:{type:Boolean,default:!0},tabIndex:{type:[Number,Array],default:0},ariaLabelForHandle:[String,Array],ariaLabelledByForHandle:[String,Array],ariaRequired:Boolean,ariaValueTextFormatterForHandle:[Function,Array]}}const me=a.defineComponent({name:"Slider",props:{...he()},emits:["focus","blur","change","beforeChange","afterChange","changeComplete"],setup(t,{attrs:$,emit:f,expose:K}){const C=a.ref(),R=a.ref(),E=a.shallowRef("ltr");a.watch([()=>t.reverse,()=>t.vertical],([e,l])=>{l?E.value=e?"ttb":"btt":E.value=e?"rtl":"ltr"},{immediate:!0});const b=a.shallowRef(0),V=a.shallowRef(100),p=a.shallowRef(1),O=a.ref([]),x=a.ref(t.defaultValue||t.value),u=a.ref([]),o=a.ref(),k=a.ref();a.watchEffect(()=>{const{range:e,min:l,max:n,step:s,pushable:i,marks:h,allowCross:S,value:v,count:g}=t,[c,m,A,j,I]=fe.default(e);o.value={rangeEnabled:c,rangeEditable:m,rangeDraggableTrack:A,minCount:j,maxCount:I},b.value=isFinite(l)?l:0,V.value=isFinite(n)?n:100,p.value=s!==null&&s<=0?1:s;const M=a.computed(()=>typeof i=="boolean"?i?p.value:!1:i>=0?i:!1);O.value=Object.keys(h||{}).map(y=>{const d=h?.[y],r={value:Number(y)};return d&&typeof d=="object"&&!a.isVNode(d)&&("label"in d||"style"in d)?(r.style=d.style,r.label=d.label):r.label=d,r}).filter(({label:y})=>y||typeof y=="number").sort((y,d)=>y.value-d.value);const[H,B]=de.default(b.value,V.value,p.value,O.value,S,M.value);k.value={formatValue:H,offsetValues:B},v!==void 0&&(x.value=v);const re=a.computed(()=>{const y=x.value===null||x.value===void 0?[]:Array.isArray(x.value)?x.value:[x.value],[d=b.value]=y;let r=x.value===null?[]:[d];if(c){if(r=[...y],g||x.value===void 0){const F=g>=0?g+1:2;for(r=r.slice(0,F);r.length<F;)r.push(r[r.length-1]??b.value)}r.sort((F,T)=>F-T)}return r.forEach((F,T)=>{r[T]=H(F)}),r});u.value=re.value});const N=e=>o.value.rangeEnabled?e:e[0],q=e=>{const l=[...e].sort((n,s)=>n-s);oe(l,u.value,!0)||f("change",N(l)),x.value=l},L=e=>{e&&C.value?.hideHelp();const l=N(u.value);t.onAfterChange&&(f("afterChange",l),P(!1,"[vc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.")),f("changeComplete",l)},Q=e=>{if(t.disabled||!o.value.rangeEditable||u.value.length<=o.value.minCount)return;const l=[...u.value];l.splice(e,1),f("beforeChange",N(l)),q(l);const n=Math.max(0,e-1);C.value?.hideHelp(),C.value?.focus(n)},[_,U,W,z,X]=ie.default(R,E,u,b,V,k.value.formatValue,q,L,k.value.offsetValues,o.value.rangeEditable,o.value.minCount),Y=(e,l)=>{if(!t.disabled){const n=[...u.value];let s=0,i=0,h=V.value-b.value;u.value.forEach((g,c)=>{const m=Math.abs(e-g);m<=h&&(h=m,s=c),g<e&&(i=c)});let S=s;o.value.rangeEditable&&h!==0&&(!o.value.maxCount||u.value.length<o.value.maxCount)?(n.splice(i+1,0,e),S=i+1):n[s]=e,o.value.rangeEnabled&&!u.value.length&&t.count===void 0&&n.push(e);const v=N(n);f("beforeChange",v),q(n),l?(document.activeElement?.blur?.(),C.value?.focus(S),X(l,S,n)):(t.onAfterChange&&(f("afterChange",v),P(!1,"[vc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.")),f("changeComplete",v))}},Z=e=>{e.preventDefault();const{width:l,height:n,left:s,top:i,bottom:h,right:S}=R.value.getBoundingClientRect(),{clientX:v,clientY:g}=e;let c;switch(E.value){case"btt":c=(h-g)/n;break;case"ttb":c=(g-i)/n;break;case"rtl":c=(S-v)/l;break;default:c=(v-s)/l}const m=b.value+c*(V.value-b.value);console.log("click",m,k.value.formatValue(m)),Y(k.value.formatValue(m),e)},w=a.ref(null),ee=(e,l)=>{if(!t.disabled){const n=k.value.offsetValues(u.value,e,l);f("beforeChange",N(u.value)),q(n.values),w.value=n.value}};a.watchEffect(()=>{if(w.value!==null){const e=u.value.indexOf(w.value);e>=0&&C.value?.focus(e)}w.value=null});const ae=a.computed(()=>o.value.rangeDraggableTrack&&p.value===null?(process.env.NODE_ENV!=="production"&&P(!1,"`draggableTrack` is not supported when `step` is `null`."),!1):o.value.rangeDraggableTrack),G=(e,l)=>{console.log("onStartMove-valueIndex",l),X(e,l),f("beforeChange",N(u.value))},le=a.computed(()=>_.value!==-1);a.watchEffect(()=>{if(!le.value){const e=u.value.lastIndexOf(U.value);C.value?.focus(e)}});const D=a.computed(()=>[...z.value].sort((e,l)=>e-l)),[te,ne]=a.computed(()=>o.value.rangeEnabled?[D.value[0],D.value[D.value.length-1]]:[b.value,D.value[0]]).value;K({focus:()=>{C.value?.focus(0)},blur:()=>{const{activeElement:e}=document;R.value?.contains(e)&&e?.blur()}}),a.watchEffect(()=>{t.autoFocus&&C.value?.focus(0)});const ue=a.computed(()=>({min:b,max:V,direction:E,disabled:t.disabled,keyboard:t.keyboard,step:p,included:t.included,includedStart:te,includedEnd:ne,range:o.value.rangeEnabled,tabIndex:t.tabIndex,ariaLabelForHandle:t.ariaLabelForHandle,ariaLabelledByForHandle:t.ariaLabelledByForHandle,ariaRequired:t.ariaRequired,ariaValueTextFormatterForHandle:t.ariaValueTextFormatterForHandle,styles:t.styles||{},classNames:t.classNames||{}}));return se.useProviderSliderContext(ue.value),()=>{const{prefixCls:e="vc-slider",id:l,disabled:n=!1,vertical:s,startPoint:i,trackStyle:h,handleStyle:S,railStyle:v,dotStyle:g,activeDotStyle:c,dots:m,handleRender:A,activeHandleRender:j,track:I,classNames:M,styles:H}=t;return a.createVNode("div",{ref:R,class:J(e,[$.class],{[`${e}-disabled`]:n,[`${e}-vertical`]:s,[`${e}-horizontal`]:!s,[`${e}-with-marks`]:O.value.length}),style:$.style,onMousedown:Z,id:l},[a.createVNode("div",{class:J(`${e}-rail`,M?.rail),style:{...v,...H?.rail}},null),I&&a.createVNode(be.default,{prefixCls:e,trackStyle:h,values:u.value,startPoint:i,onStartMove:ae.value?G:void 0},null),a.createVNode(ge.default,{prefixCls:e,marks:O.value,dots:m,style:g,activeStyle:c},null),a.createVNode(ce.default,{ref:C,prefixCls:e,handleStyle:S,values:z.value,draggingIndex:_.value,draggingDelete:W.value,onStartMove:G,onOffsetChange:ee,onFocus:B=>f("focus",B),onBlur:B=>f("blur",B),handleRender:A,activeHandleRender:j,onChangeComplete:L,onDelete:o.value.rangeEditable?Q:()=>{}},null),a.createVNode(ve.default,{prefixCls:e,marks:O.value,onClick:Y},null)])}}});exports.default=me;