@v-c/slider 1.0.3 → 1.0.4

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 (76) hide show
  1. package/dist/Handles/Handle.cjs +195 -1
  2. package/dist/Handles/Handle.d.ts +4 -4
  3. package/dist/Handles/Handle.js +191 -204
  4. package/dist/Handles/index.cjs +108 -1
  5. package/dist/Handles/index.d.ts +1 -1
  6. package/dist/Handles/index.js +105 -120
  7. package/dist/Marks/Mark.cjs +51 -1
  8. package/dist/Marks/Mark.d.ts +2 -2
  9. package/dist/Marks/Mark.js +48 -39
  10. package/dist/Marks/index.cjs +39 -1
  11. package/dist/Marks/index.d.ts +2 -2
  12. package/dist/Marks/index.js +36 -32
  13. package/dist/Slider.cjs +569 -1
  14. package/dist/Slider.d.ts +53 -267
  15. package/dist/Slider.js +563 -352
  16. package/dist/Steps/Dot.cjs +52 -1
  17. package/dist/Steps/Dot.d.ts +2 -2
  18. package/dist/Steps/Dot.js +49 -38
  19. package/dist/Steps/index.cjs +64 -1
  20. package/dist/Steps/index.d.ts +2 -2
  21. package/dist/Steps/index.js +61 -41
  22. package/dist/Tracks/Track.cjs +74 -1
  23. package/dist/Tracks/Track.js +70 -81
  24. package/dist/Tracks/index.cjs +70 -1
  25. package/dist/Tracks/index.js +66 -82
  26. package/dist/_virtual/rolldown_runtime.cjs +21 -0
  27. package/dist/context.cjs +39 -1
  28. package/dist/context.d.ts +13 -7
  29. package/dist/context.js +29 -24
  30. package/dist/hooks/useDrag.cjs +160 -1
  31. package/dist/hooks/useDrag.d.ts +2 -2
  32. package/dist/hooks/useDrag.js +155 -86
  33. package/dist/hooks/useOffset.cjs +124 -1
  34. package/dist/hooks/useOffset.d.ts +2 -1
  35. package/dist/hooks/useOffset.js +122 -110
  36. package/dist/hooks/useRange.cjs +21 -1
  37. package/dist/hooks/useRange.js +18 -9
  38. package/dist/index.cjs +6 -1
  39. package/dist/index.d.ts +1 -0
  40. package/dist/index.js +4 -4
  41. package/dist/interface.cjs +0 -1
  42. package/dist/interface.js +0 -1
  43. package/dist/util.cjs +32 -1
  44. package/dist/util.js +27 -26
  45. package/package.json +18 -10
  46. package/docs/TooltipSlider.tsx +0 -94
  47. package/docs/assets/anim.less +0 -63
  48. package/docs/assets/bootstrap.less +0 -163
  49. package/docs/assets/index.less +0 -337
  50. package/docs/debug.vue +0 -59
  51. package/docs/editable.vue +0 -58
  52. package/docs/handle.vue +0 -51
  53. package/docs/marks.vue +0 -104
  54. package/docs/multiple.vue +0 -50
  55. package/docs/range.vue +0 -224
  56. package/docs/slider.stories.vue +0 -45
  57. package/docs/sliderDemo.vue +0 -283
  58. package/docs/vertical.vue +0 -135
  59. package/src/Handles/Handle.tsx +0 -232
  60. package/src/Handles/index.tsx +0 -132
  61. package/src/Marks/Mark.tsx +0 -40
  62. package/src/Marks/index.tsx +0 -40
  63. package/src/Slider.tsx +0 -602
  64. package/src/Steps/Dot.tsx +0 -40
  65. package/src/Steps/index.tsx +0 -54
  66. package/src/Tracks/Track.tsx +0 -89
  67. package/src/Tracks/index.tsx +0 -92
  68. package/src/context.ts +0 -65
  69. package/src/hooks/useDrag.ts +0 -243
  70. package/src/hooks/useOffset.ts +0 -272
  71. package/src/hooks/useRange.ts +0 -24
  72. package/src/index.ts +0 -8
  73. package/src/interface.ts +0 -17
  74. package/src/util.ts +0 -41
  75. package/vite.config.ts +0 -18
  76. package/vitest.config.ts +0 -11
@@ -1 +1,195 @@
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:{type:Function},onChangeComplete:Function,mock:Boolean,classNames:Object,styles:Object},emits:["focus","mouseenter","startMove","delete","offsetChange","changeComplete"],setup(l,{attrs:p,emit:u,expose:F}){const{min:v,max:g,direction:t,disabled:d,keyboard:q,range:E,tabIndex:P,ariaLabelForHandle:k,ariaLabelledByForHandle:D,ariaRequired:M,ariaValueTextFormatterForHandle:N}=L.useInjectSlider(),c=o.ref({}),f=o.ref({}),b=o.ref({}),y=a=>{d||u("startMove",a,l.valueIndex)},O=a=>{u("focus",a,l.valueIndex)},S=a=>{u("mouseenter",a,l.valueIndex)},H=a=>{if(!d&&q){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,l.valueIndex);break}n!==null&&(a.preventDefault(),u("offsetChange",n,l.valueIndex))}},w=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 F({focus:()=>l.valueIndex}),()=>{const{prefixCls:a,value:n,valueIndex:r,onStartMove:$,onDelete:j,render:x,dragging:h,draggingDelete:C,onOffsetChange:R,onChangeComplete:W,onFocus:V,onMouseenter:z,styles:T,classNames:A,...I}=l,G=s.getDirectionStyle(t.value,n,v.value,g.value);r!==null?c.value={tabindex:d?null:s.getIndex(P,r),role:"slider","aria-valuemin":v.value,"aria-valuemax":g.value,"aria-valuenow":n,"aria-disabled":d,"aria-label":s.getIndex(k,r),"aria-labelledby":s.getIndex(D,r),"aria-required":s.getIndex(M,r),"aria-valuetext":s.getIndex(N,r)?.(n),"aria-orientation":t.value==="ltr"||t.value==="rtl"?"horizontal":"vertical",onMousedown:y,onTouchstart:y,onFocus:O,onMouseenter:S,onKeydown:H,onKeyup:w,...I}:c.value={...I};const i=`${a}-handle`;f.value=B(i,{[`${i}-${r+1}`]:r!==null&&E,[`${i}-dragging`]:h,[`${i}-dragging-delete`]:C},A?.handle),b.value={...G,...p.style,...T?.handle};const m=o.createVNode("div",o.mergeProps({class:f.value,style:b.value},c.value),null);if(x){const K={index:r,prefixCls:a,value:n,dragging:h,draggingDelete:C,node:m},_=()=>x(K);return o.createVNode(_,null,null)}return m}}});exports.default=U;
1
+ Object.defineProperty(exports, "__esModule", { value: true });
2
+ const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
3
+ const require_context = require("../context.cjs");
4
+ const require_util = require("../util.cjs");
5
+ let vue = require("vue");
6
+ let __v_c_util = require("@v-c/util");
7
+ let __v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
8
+ __v_c_util_dist_KeyCode = require_rolldown_runtime.__toESM(__v_c_util_dist_KeyCode);
9
+ var Handle_default = /* @__PURE__ */ (0, vue.defineComponent)({
10
+ name: "Handle",
11
+ props: {
12
+ prefixCls: {
13
+ type: String,
14
+ required: true
15
+ },
16
+ value: {
17
+ type: Number,
18
+ required: true
19
+ },
20
+ valueIndex: {
21
+ type: Number,
22
+ required: true
23
+ },
24
+ dragging: {
25
+ type: Boolean,
26
+ default: false
27
+ },
28
+ draggingDelete: {
29
+ type: Boolean,
30
+ default: false
31
+ },
32
+ onStartMove: {
33
+ type: Function,
34
+ required: true
35
+ },
36
+ onDelete: {
37
+ type: Function,
38
+ required: true
39
+ },
40
+ onOffsetChange: {
41
+ type: Function,
42
+ required: true
43
+ },
44
+ onFocus: {
45
+ type: Function,
46
+ required: true
47
+ },
48
+ onMouseenter: {
49
+ type: Function,
50
+ required: true
51
+ },
52
+ render: { type: Function },
53
+ onChangeComplete: Function,
54
+ mock: Boolean,
55
+ classNames: Object,
56
+ styles: Object
57
+ },
58
+ emits: [
59
+ "focus",
60
+ "mouseenter",
61
+ "startMove",
62
+ "delete",
63
+ "offsetChange",
64
+ "changeComplete"
65
+ ],
66
+ setup(props, { attrs, emit, expose }) {
67
+ const sliderContext = require_context.useInjectSlider();
68
+ const divProps = (0, vue.ref)({});
69
+ const handleClass = (0, vue.ref)({});
70
+ const handleStyle = (0, vue.ref)({});
71
+ const handleNodeRef = (0, vue.ref)();
72
+ const onInternalStartMove = (e) => {
73
+ if (!sliderContext.value.disabled) emit("startMove", e, props.valueIndex);
74
+ };
75
+ const onInternalFocus = (e) => {
76
+ emit("focus", e, props.valueIndex);
77
+ };
78
+ const onInternalMouseEnter = (e) => {
79
+ emit("mouseenter", e, props.valueIndex);
80
+ };
81
+ const onKeyDown = (e) => {
82
+ const { keyboard, direction, disabled } = sliderContext.value;
83
+ if (!disabled && keyboard) {
84
+ let offset = null;
85
+ switch (e.which || e.keyCode) {
86
+ case __v_c_util_dist_KeyCode.default.LEFT:
87
+ offset = direction === "ltr" || direction === "btt" ? -1 : 1;
88
+ break;
89
+ case __v_c_util_dist_KeyCode.default.RIGHT:
90
+ offset = direction === "ltr" || direction === "btt" ? 1 : -1;
91
+ break;
92
+ case __v_c_util_dist_KeyCode.default.UP:
93
+ offset = direction !== "ttb" ? 1 : -1;
94
+ break;
95
+ case __v_c_util_dist_KeyCode.default.DOWN:
96
+ offset = direction !== "ttb" ? -1 : 1;
97
+ break;
98
+ case __v_c_util_dist_KeyCode.default.HOME:
99
+ offset = "min";
100
+ break;
101
+ case __v_c_util_dist_KeyCode.default.END:
102
+ offset = "max";
103
+ break;
104
+ case __v_c_util_dist_KeyCode.default.PAGE_UP:
105
+ offset = 2;
106
+ break;
107
+ case __v_c_util_dist_KeyCode.default.PAGE_DOWN:
108
+ offset = -2;
109
+ break;
110
+ case __v_c_util_dist_KeyCode.default.BACKSPACE:
111
+ case __v_c_util_dist_KeyCode.default.DELETE:
112
+ emit("delete", e, props.valueIndex);
113
+ break;
114
+ }
115
+ if (offset !== null) {
116
+ e.preventDefault();
117
+ emit("offsetChange", offset, props.valueIndex);
118
+ }
119
+ }
120
+ };
121
+ const handleKeyUp = (e) => {
122
+ switch (e.which || e.keyCode) {
123
+ case __v_c_util_dist_KeyCode.default.LEFT:
124
+ case __v_c_util_dist_KeyCode.default.RIGHT:
125
+ case __v_c_util_dist_KeyCode.default.UP:
126
+ case __v_c_util_dist_KeyCode.default.DOWN:
127
+ case __v_c_util_dist_KeyCode.default.HOME:
128
+ case __v_c_util_dist_KeyCode.default.END:
129
+ case __v_c_util_dist_KeyCode.default.PAGE_UP:
130
+ case __v_c_util_dist_KeyCode.default.PAGE_DOWN:
131
+ emit("changeComplete");
132
+ break;
133
+ }
134
+ };
135
+ expose({ focus: () => {
136
+ handleNodeRef.value?.focus();
137
+ } });
138
+ return () => {
139
+ const { prefixCls, value, valueIndex, onStartMove, onDelete, render, dragging, draggingDelete, onOffsetChange, onChangeComplete, onFocus, onMouseenter, styles, classNames,...restProps } = props;
140
+ const { min, max, direction, disabled, range, tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, ariaRequired, ariaValueTextFormatterForHandle } = sliderContext.value;
141
+ const positionStyle = require_util.getDirectionStyle(direction, value, min, max);
142
+ if (valueIndex !== null) divProps.value = {
143
+ "tabindex": disabled ? null : require_util.getIndex(tabIndex, valueIndex),
144
+ "role": "slider",
145
+ "aria-valuemin": min,
146
+ "aria-valuemax": max,
147
+ "aria-valuenow": value,
148
+ "aria-disabled": disabled,
149
+ "aria-label": require_util.getIndex(ariaLabelForHandle, valueIndex),
150
+ "aria-labelledby": require_util.getIndex(ariaLabelledByForHandle, valueIndex),
151
+ "aria-required": require_util.getIndex(ariaRequired, valueIndex),
152
+ "aria-valuetext": require_util.getIndex(ariaValueTextFormatterForHandle, valueIndex)?.(value),
153
+ "aria-orientation": direction === "ltr" || direction === "rtl" ? "horizontal" : "vertical",
154
+ "onMousedown": onInternalStartMove,
155
+ "onTouchstart": onInternalStartMove,
156
+ "onFocus": onInternalFocus,
157
+ "onMouseenter": onInternalMouseEnter,
158
+ "onKeydown": onKeyDown,
159
+ "onKeyup": handleKeyUp,
160
+ ...restProps
161
+ };
162
+ else divProps.value = { ...restProps };
163
+ const handlePrefixCls = `${prefixCls}-handle`;
164
+ handleClass.value = (0, __v_c_util.classNames)(handlePrefixCls, {
165
+ [`${handlePrefixCls}-${valueIndex + 1}`]: valueIndex !== null && range,
166
+ [`${handlePrefixCls}-dragging`]: dragging,
167
+ [`${handlePrefixCls}-dragging-delete`]: draggingDelete
168
+ }, classNames?.handle);
169
+ handleStyle.value = {
170
+ ...positionStyle,
171
+ ...attrs.style,
172
+ ...styles?.handle
173
+ };
174
+ const handleNode = (0, vue.createVNode)("div", (0, vue.mergeProps)({
175
+ "ref": handleNodeRef,
176
+ "class": handleClass.value,
177
+ "style": handleStyle.value
178
+ }, divProps.value), null);
179
+ if (render) {
180
+ const renderProps = {
181
+ index: valueIndex,
182
+ prefixCls,
183
+ value,
184
+ dragging,
185
+ draggingDelete,
186
+ node: handleNode
187
+ };
188
+ const RenderNode = () => render(renderProps);
189
+ return (0, vue.createVNode)(RenderNode, null, null);
190
+ }
191
+ return handleNode;
192
+ };
193
+ }
194
+ });
195
+ exports.default = Handle_default;
@@ -1,7 +1,7 @@
1
1
  import { PropType } from 'vue';
2
2
  import { OnStartMove, SliderClassNames, SliderStyles } from '../interface';
3
3
  export interface RenderProps {
4
- index: number;
4
+ index: number | null;
5
5
  prefixCls: string;
6
6
  value: number;
7
7
  dragging: boolean;
@@ -18,7 +18,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
18
18
  required: true;
19
19
  };
20
20
  valueIndex: {
21
- type: NumberConstructor;
21
+ type: PropType<number | null>;
22
22
  required: true;
23
23
  };
24
24
  dragging: {
@@ -56,7 +56,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
56
56
  mock: BooleanConstructor;
57
57
  classNames: PropType<SliderClassNames>;
58
58
  styles: PropType<SliderStyles>;
59
- }>, () => 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<{
59
+ }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("delete" | "focus" | "mouseenter" | "startMove" | "offsetChange" | "changeComplete")[], "delete" | "focus" | "mouseenter" | "startMove" | "offsetChange" | "changeComplete", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
60
60
  prefixCls: {
61
61
  type: StringConstructor;
62
62
  required: true;
@@ -66,7 +66,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
66
66
  required: true;
67
67
  };
68
68
  valueIndex: {
69
- type: NumberConstructor;
69
+ type: PropType<number | null>;
70
70
  required: true;
71
71
  };
72
72
  dragging: {
@@ -1,205 +1,192 @@
1
- import { defineComponent as L, ref as c, createVNode as F, 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: {
50
- type: Function
51
- },
52
- onChangeComplete: Function,
53
- mock: Boolean,
54
- classNames: Object,
55
- styles: Object
56
- },
57
- emits: ["focus", "mouseenter", "startMove", "delete", "offsetChange", "changeComplete"],
58
- setup(l, {
59
- attrs: I,
60
- emit: o,
61
- expose: E
62
- }) {
63
- const {
64
- min: v,
65
- max: f,
66
- direction: t,
67
- disabled: s,
68
- keyboard: k,
69
- range: D,
70
- tabIndex: N,
71
- ariaLabelForHandle: P,
72
- ariaLabelledByForHandle: M,
73
- ariaRequired: q,
74
- ariaValueTextFormatterForHandle: O
75
- } = $(), i = c({}), g = c({}), b = c({}), y = (a) => {
76
- s || o("startMove", a, l.valueIndex);
77
- }, H = (a) => {
78
- o("focus", a, l.valueIndex);
79
- }, S = (a) => {
80
- o("mouseenter", a, l.valueIndex);
81
- }, w = (a) => {
82
- if (!s && k) {
83
- let n = null;
84
- switch (a.which || a.keyCode) {
85
- case e.LEFT:
86
- n = t.value === "ltr" || t.value === "btt" ? -1 : 1;
87
- break;
88
- case e.RIGHT:
89
- n = t.value === "ltr" || t.value === "btt" ? 1 : -1;
90
- break;
91
- // Up is plus
92
- case e.UP:
93
- n = t.value !== "ttb" ? 1 : -1;
94
- break;
95
- // Down is minus
96
- case e.DOWN:
97
- n = t.value !== "ttb" ? -1 : 1;
98
- break;
99
- case e.HOME:
100
- n = "min";
101
- break;
102
- case e.END:
103
- n = "max";
104
- break;
105
- case e.PAGE_UP:
106
- n = 2;
107
- break;
108
- case e.PAGE_DOWN:
109
- n = -2;
110
- break;
111
- case e.BACKSPACE:
112
- case e.DELETE:
113
- o("delete", a, l.valueIndex);
114
- break;
115
- }
116
- n !== null && (a.preventDefault(), o("offsetChange", n, l.valueIndex));
117
- }
118
- }, T = (a) => {
119
- switch (a.which || a.keyCode) {
120
- case e.LEFT:
121
- case e.RIGHT:
122
- case e.UP:
123
- case e.DOWN:
124
- case e.HOME:
125
- case e.END:
126
- case e.PAGE_UP:
127
- case e.PAGE_DOWN:
128
- o("changeComplete");
129
- break;
130
- }
131
- };
132
- return E({
133
- focus: () => l.valueIndex
134
- }), () => {
135
- const {
136
- prefixCls: a,
137
- value: n,
138
- valueIndex: r,
139
- onStartMove: _,
140
- onDelete: j,
141
- render: m,
142
- dragging: h,
143
- draggingDelete: p,
144
- onOffsetChange: V,
145
- onChangeComplete: z,
146
- onFocus: J,
147
- onMouseenter: Q,
148
- styles: A,
149
- classNames: G,
150
- ...x
151
- } = l, K = W(t.value, n, v.value, f.value);
152
- r !== null ? i.value = {
153
- tabindex: s ? null : u(N, r),
154
- role: "slider",
155
- "aria-valuemin": v.value,
156
- "aria-valuemax": f.value,
157
- "aria-valuenow": n,
158
- "aria-disabled": s,
159
- "aria-label": u(P, r),
160
- "aria-labelledby": u(M, r),
161
- "aria-required": u(q, r),
162
- "aria-valuetext": u(O, r)?.(n),
163
- "aria-orientation": t.value === "ltr" || t.value === "rtl" ? "horizontal" : "vertical",
164
- onMousedown: y,
165
- onTouchstart: y,
166
- onFocus: H,
167
- onMouseenter: S,
168
- onKeydown: w,
169
- onKeyup: T,
170
- ...x
171
- } : i.value = {
172
- ...x
173
- };
174
- const d = `${a}-handle`;
175
- g.value = U(d, {
176
- [`${d}-${r + 1}`]: r !== null && D,
177
- [`${d}-dragging`]: h,
178
- [`${d}-dragging-delete`]: p
179
- }, G?.handle), b.value = {
180
- ...K,
181
- ...I.style,
182
- ...A?.handle
183
- };
184
- const C = F("div", R({
185
- class: g.value,
186
- style: b.value
187
- }, i.value), null);
188
- if (m) {
189
- const B = {
190
- index: r,
191
- prefixCls: a,
192
- value: n,
193
- dragging: h,
194
- draggingDelete: p,
195
- node: C
196
- };
197
- return F(() => m(B), null, null);
198
- }
199
- return C;
200
- };
201
- }
1
+ import { useInjectSlider } from "../context.js";
2
+ import { getDirectionStyle, getIndex } from "../util.js";
3
+ import { createVNode, defineComponent, mergeProps, ref } from "vue";
4
+ import { classNames } from "@v-c/util";
5
+ import KeyCode from "@v-c/util/dist/KeyCode";
6
+ var Handle_default = /* @__PURE__ */ defineComponent({
7
+ name: "Handle",
8
+ props: {
9
+ prefixCls: {
10
+ type: String,
11
+ required: true
12
+ },
13
+ value: {
14
+ type: Number,
15
+ required: true
16
+ },
17
+ valueIndex: {
18
+ type: Number,
19
+ required: true
20
+ },
21
+ dragging: {
22
+ type: Boolean,
23
+ default: false
24
+ },
25
+ draggingDelete: {
26
+ type: Boolean,
27
+ default: false
28
+ },
29
+ onStartMove: {
30
+ type: Function,
31
+ required: true
32
+ },
33
+ onDelete: {
34
+ type: Function,
35
+ required: true
36
+ },
37
+ onOffsetChange: {
38
+ type: Function,
39
+ required: true
40
+ },
41
+ onFocus: {
42
+ type: Function,
43
+ required: true
44
+ },
45
+ onMouseenter: {
46
+ type: Function,
47
+ required: true
48
+ },
49
+ render: { type: Function },
50
+ onChangeComplete: Function,
51
+ mock: Boolean,
52
+ classNames: Object,
53
+ styles: Object
54
+ },
55
+ emits: [
56
+ "focus",
57
+ "mouseenter",
58
+ "startMove",
59
+ "delete",
60
+ "offsetChange",
61
+ "changeComplete"
62
+ ],
63
+ setup(props, { attrs, emit, expose }) {
64
+ const sliderContext = useInjectSlider();
65
+ const divProps = ref({});
66
+ const handleClass = ref({});
67
+ const handleStyle = ref({});
68
+ const handleNodeRef = ref();
69
+ const onInternalStartMove = (e) => {
70
+ if (!sliderContext.value.disabled) emit("startMove", e, props.valueIndex);
71
+ };
72
+ const onInternalFocus = (e) => {
73
+ emit("focus", e, props.valueIndex);
74
+ };
75
+ const onInternalMouseEnter = (e) => {
76
+ emit("mouseenter", e, props.valueIndex);
77
+ };
78
+ const onKeyDown = (e) => {
79
+ const { keyboard, direction, disabled } = sliderContext.value;
80
+ if (!disabled && keyboard) {
81
+ let offset = null;
82
+ switch (e.which || e.keyCode) {
83
+ case KeyCode.LEFT:
84
+ offset = direction === "ltr" || direction === "btt" ? -1 : 1;
85
+ break;
86
+ case KeyCode.RIGHT:
87
+ offset = direction === "ltr" || direction === "btt" ? 1 : -1;
88
+ break;
89
+ case KeyCode.UP:
90
+ offset = direction !== "ttb" ? 1 : -1;
91
+ break;
92
+ case KeyCode.DOWN:
93
+ offset = direction !== "ttb" ? -1 : 1;
94
+ break;
95
+ case KeyCode.HOME:
96
+ offset = "min";
97
+ break;
98
+ case KeyCode.END:
99
+ offset = "max";
100
+ break;
101
+ case KeyCode.PAGE_UP:
102
+ offset = 2;
103
+ break;
104
+ case KeyCode.PAGE_DOWN:
105
+ offset = -2;
106
+ break;
107
+ case KeyCode.BACKSPACE:
108
+ case KeyCode.DELETE:
109
+ emit("delete", e, props.valueIndex);
110
+ break;
111
+ }
112
+ if (offset !== null) {
113
+ e.preventDefault();
114
+ emit("offsetChange", offset, props.valueIndex);
115
+ }
116
+ }
117
+ };
118
+ const handleKeyUp = (e) => {
119
+ switch (e.which || e.keyCode) {
120
+ case KeyCode.LEFT:
121
+ case KeyCode.RIGHT:
122
+ case KeyCode.UP:
123
+ case KeyCode.DOWN:
124
+ case KeyCode.HOME:
125
+ case KeyCode.END:
126
+ case KeyCode.PAGE_UP:
127
+ case KeyCode.PAGE_DOWN:
128
+ emit("changeComplete");
129
+ break;
130
+ }
131
+ };
132
+ expose({ focus: () => {
133
+ handleNodeRef.value?.focus();
134
+ } });
135
+ return () => {
136
+ const { prefixCls, value, valueIndex, onStartMove, onDelete, render, dragging, draggingDelete, onOffsetChange, onChangeComplete, onFocus, onMouseenter, styles, classNames: classNames$1,...restProps } = props;
137
+ const { min, max, direction, disabled, range, tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, ariaRequired, ariaValueTextFormatterForHandle } = sliderContext.value;
138
+ const positionStyle = getDirectionStyle(direction, value, min, max);
139
+ if (valueIndex !== null) divProps.value = {
140
+ "tabindex": disabled ? null : getIndex(tabIndex, valueIndex),
141
+ "role": "slider",
142
+ "aria-valuemin": min,
143
+ "aria-valuemax": max,
144
+ "aria-valuenow": value,
145
+ "aria-disabled": disabled,
146
+ "aria-label": getIndex(ariaLabelForHandle, valueIndex),
147
+ "aria-labelledby": getIndex(ariaLabelledByForHandle, valueIndex),
148
+ "aria-required": getIndex(ariaRequired, valueIndex),
149
+ "aria-valuetext": getIndex(ariaValueTextFormatterForHandle, valueIndex)?.(value),
150
+ "aria-orientation": direction === "ltr" || direction === "rtl" ? "horizontal" : "vertical",
151
+ "onMousedown": onInternalStartMove,
152
+ "onTouchstart": onInternalStartMove,
153
+ "onFocus": onInternalFocus,
154
+ "onMouseenter": onInternalMouseEnter,
155
+ "onKeydown": onKeyDown,
156
+ "onKeyup": handleKeyUp,
157
+ ...restProps
158
+ };
159
+ else divProps.value = { ...restProps };
160
+ const handlePrefixCls = `${prefixCls}-handle`;
161
+ handleClass.value = classNames(handlePrefixCls, {
162
+ [`${handlePrefixCls}-${valueIndex + 1}`]: valueIndex !== null && range,
163
+ [`${handlePrefixCls}-dragging`]: dragging,
164
+ [`${handlePrefixCls}-dragging-delete`]: draggingDelete
165
+ }, classNames$1?.handle);
166
+ handleStyle.value = {
167
+ ...positionStyle,
168
+ ...attrs.style,
169
+ ...styles?.handle
170
+ };
171
+ const handleNode = createVNode("div", mergeProps({
172
+ "ref": handleNodeRef,
173
+ "class": handleClass.value,
174
+ "style": handleStyle.value
175
+ }, divProps.value), null);
176
+ if (render) {
177
+ const renderProps = {
178
+ index: valueIndex,
179
+ prefixCls,
180
+ value,
181
+ dragging,
182
+ draggingDelete,
183
+ node: handleNode
184
+ };
185
+ const RenderNode = () => render(renderProps);
186
+ return createVNode(RenderNode, null, null);
187
+ }
188
+ return handleNode;
189
+ };
190
+ }
202
191
  });
203
- export {
204
- te as default
205
- };
192
+ export { Handle_default as default };