@v-c/slider 1.0.1 → 1.0.3
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.
- package/dist/Handles/Handle.cjs +1 -1
- package/dist/Handles/Handle.d.ts +14 -2
- package/dist/Handles/Handle.js +55 -53
- package/dist/Handles/index.cjs +1 -1
- package/dist/Handles/index.d.ts +20 -4
- package/dist/Handles/index.js +6 -2
- package/dist/Marks/index.cjs +1 -1
- package/dist/Marks/index.js +23 -22
- package/dist/Slider.cjs +1 -1
- package/dist/Slider.d.ts +28 -15
- package/dist/Slider.js +113 -111
- package/dist/Tracks/Track.cjs +1 -1
- package/dist/Tracks/Track.js +2 -2
- package/dist/hooks/useDrag.cjs +1 -1
- package/dist/hooks/useDrag.js +39 -39
- package/dist/hooks/useOffset.cjs +1 -1
- package/dist/hooks/useOffset.d.ts +1 -1
- package/dist/hooks/useOffset.js +76 -63
- package/docs/debug.vue +1 -2
- package/docs/editable.vue +3 -4
- package/docs/handle.vue +11 -5
- package/docs/marks.vue +30 -11
- package/docs/multiple.vue +1 -5
- package/docs/range.vue +25 -12
- package/docs/sliderDemo.vue +33 -17
- package/docs/vertical.vue +25 -12
- package/package.json +1 -1
- package/src/Handles/Handle.tsx +11 -5
- package/src/Handles/index.tsx +10 -2
- package/src/Marks/index.tsx +2 -2
- package/src/Slider.tsx +602 -592
- package/src/Tracks/Track.tsx +2 -2
- package/src/hooks/useDrag.ts +0 -1
- package/src/hooks/useOffset.ts +48 -40
package/dist/Slider.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import
|
|
1
|
+
import { defineComponent as ve, ref as F, shallowRef as w, watch as fe, watchEffect as M, computed as S, isVNode as ge, createVNode as N } from "vue";
|
|
2
|
+
import be from "@v-c/util/dist/isEqual";
|
|
3
3
|
import X from "@v-c/util/dist/warning";
|
|
4
4
|
import W from "classnames";
|
|
5
|
-
import { useProviderSliderContext as
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
function
|
|
5
|
+
import { useProviderSliderContext as me } from "./context.js";
|
|
6
|
+
import he from "./Handles/index.js";
|
|
7
|
+
import ye from "./hooks/useDrag.js";
|
|
8
|
+
import Ce from "./hooks/useOffset.js";
|
|
9
|
+
import xe from "./hooks/useRange.js";
|
|
10
|
+
import Fe from "./Marks/index.js";
|
|
11
|
+
import Se from "./Steps/index.js";
|
|
12
|
+
import ke from "./Tracks/index.js";
|
|
13
|
+
function pe() {
|
|
14
14
|
return {
|
|
15
15
|
prefixCls: {
|
|
16
16
|
type: String,
|
|
@@ -38,10 +38,10 @@ function ke() {
|
|
|
38
38
|
default: 100
|
|
39
39
|
},
|
|
40
40
|
step: {
|
|
41
|
-
type: Number,
|
|
41
|
+
type: [Number, null],
|
|
42
42
|
default: 1
|
|
43
43
|
},
|
|
44
|
-
value: [Number, Array],
|
|
44
|
+
value: [Number, Array, null],
|
|
45
45
|
defaultValue: [Number, Array],
|
|
46
46
|
range: [Boolean, Object],
|
|
47
47
|
count: Number,
|
|
@@ -91,25 +91,27 @@ function ke() {
|
|
|
91
91
|
onChangeComplete: Function
|
|
92
92
|
};
|
|
93
93
|
}
|
|
94
|
-
const
|
|
94
|
+
const we = /* @__PURE__ */ ve({
|
|
95
95
|
name: "Slider",
|
|
96
96
|
props: {
|
|
97
|
-
...
|
|
97
|
+
...pe()
|
|
98
98
|
},
|
|
99
99
|
emits: ["focus", "blur", "change", "beforeChange", "afterChange", "changeComplete"],
|
|
100
|
+
slots: Object,
|
|
100
101
|
setup(l, {
|
|
101
102
|
attrs: Y,
|
|
102
103
|
emit: d,
|
|
103
|
-
expose: Z
|
|
104
|
+
expose: Z,
|
|
105
|
+
slots: ee
|
|
104
106
|
}) {
|
|
105
|
-
const
|
|
106
|
-
|
|
107
|
-
a ?
|
|
107
|
+
const h = F(), A = F(), B = w("ltr");
|
|
108
|
+
fe([() => l.reverse, () => l.vertical], ([e, a]) => {
|
|
109
|
+
a ? B.value = e ? "ttb" : "btt" : B.value = e ? "rtl" : "ltr";
|
|
108
110
|
}, {
|
|
109
111
|
immediate: !0
|
|
110
112
|
});
|
|
111
|
-
const g =
|
|
112
|
-
|
|
113
|
+
const g = w(0), k = w(100), E = w(1), O = F([]), y = F(l.defaultValue || l.value), n = F([]), r = F(), D = F();
|
|
114
|
+
M(() => {
|
|
113
115
|
const {
|
|
114
116
|
range: e,
|
|
115
117
|
min: a,
|
|
@@ -117,76 +119,76 @@ const Me = /* @__PURE__ */ de({
|
|
|
117
119
|
step: o,
|
|
118
120
|
pushable: i,
|
|
119
121
|
marks: b,
|
|
120
|
-
allowCross:
|
|
122
|
+
allowCross: C,
|
|
121
123
|
value: v,
|
|
122
124
|
count: f
|
|
123
|
-
} = l, [s,
|
|
125
|
+
} = l, [s, x, L, P, $] = xe(e);
|
|
124
126
|
r.value = {
|
|
125
127
|
rangeEnabled: s,
|
|
126
|
-
rangeEditable:
|
|
128
|
+
rangeEditable: x,
|
|
127
129
|
rangeDraggableTrack: L,
|
|
128
130
|
minCount: P,
|
|
129
131
|
maxCount: $
|
|
130
|
-
}, g.value = isFinite(a) ? a : 0, k.value = isFinite(t) ? t : 100,
|
|
131
|
-
const q = S(() => typeof i == "boolean" ? i ?
|
|
132
|
-
|
|
133
|
-
const c = b?.[
|
|
134
|
-
value: Number(
|
|
132
|
+
}, g.value = isFinite(a) ? a : 0, k.value = isFinite(t) ? t : 100, E.value = o !== null && o <= 0 ? 1 : o;
|
|
133
|
+
const q = S(() => typeof i == "boolean" ? i ? E.value : !1 : i >= 0 ? i : !1);
|
|
134
|
+
O.value = Object.keys(b || {}).map((m) => {
|
|
135
|
+
const c = b?.[m], u = {
|
|
136
|
+
value: Number(m)
|
|
135
137
|
};
|
|
136
|
-
return c && typeof c == "object" && !
|
|
138
|
+
return c && typeof c == "object" && !ge(c) && ("label" in c || "style" in c) ? (u.style = c.style, u.label = c.label) : u.label = c, u;
|
|
137
139
|
}).filter(({
|
|
138
|
-
label:
|
|
139
|
-
}) =>
|
|
140
|
-
const [
|
|
141
|
-
|
|
142
|
-
formatValue:
|
|
140
|
+
label: m
|
|
141
|
+
}) => m || typeof m == "number").sort((m, c) => m.value - c.value);
|
|
142
|
+
const [T, H] = Ce(g.value, k.value, E.value, O.value, C, q.value);
|
|
143
|
+
D.value = {
|
|
144
|
+
formatValue: T,
|
|
143
145
|
offsetValues: H
|
|
144
|
-
}, v !== void 0 && (
|
|
145
|
-
const
|
|
146
|
-
const
|
|
147
|
-
let u =
|
|
146
|
+
}, v !== void 0 && (y.value = v);
|
|
147
|
+
const de = S(() => {
|
|
148
|
+
const m = y.value === null || y.value === void 0 ? [] : Array.isArray(y.value) ? y.value : [y.value], [c = g.value] = m;
|
|
149
|
+
let u = y.value === null ? [] : [c];
|
|
148
150
|
if (s) {
|
|
149
|
-
if (u = [...
|
|
150
|
-
const
|
|
151
|
-
for (u = u.slice(0,
|
|
151
|
+
if (u = [...m], f || y.value === void 0) {
|
|
152
|
+
const V = f >= 0 ? f + 1 : 2;
|
|
153
|
+
for (u = u.slice(0, V); u.length < V; )
|
|
152
154
|
u.push(u[u.length - 1] ?? g.value);
|
|
153
155
|
}
|
|
154
|
-
u.sort((
|
|
156
|
+
u.sort((V, z) => V - z);
|
|
155
157
|
}
|
|
156
|
-
return u.forEach((
|
|
157
|
-
u[z] =
|
|
158
|
+
return u.forEach((V, z) => {
|
|
159
|
+
u[z] = T(V);
|
|
158
160
|
}), u;
|
|
159
161
|
});
|
|
160
|
-
n.value =
|
|
162
|
+
n.value = de.value;
|
|
161
163
|
});
|
|
162
|
-
const
|
|
164
|
+
const p = (e) => r.value.rangeEnabled ? e : e[0], R = (e) => {
|
|
163
165
|
const a = [...e].sort((t, o) => t - o);
|
|
164
|
-
|
|
166
|
+
be(a, n.value, !0) || d("change", p(a)), y.value = a;
|
|
165
167
|
}, _ = (e) => {
|
|
166
|
-
e &&
|
|
167
|
-
const a =
|
|
168
|
+
e && h.value?.hideHelp();
|
|
169
|
+
const a = p(n.value);
|
|
168
170
|
l.onAfterChange && (d("afterChange", a), X(!1, "[vc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.")), d("changeComplete", a);
|
|
169
|
-
},
|
|
171
|
+
}, ae = (e) => {
|
|
170
172
|
if (l.disabled || !r.value.rangeEditable || n.value.length <= r.value.minCount)
|
|
171
173
|
return;
|
|
172
174
|
const a = [...n.value];
|
|
173
|
-
a.splice(e, 1), d("beforeChange",
|
|
175
|
+
a.splice(e, 1), d("beforeChange", p(a)), R(a);
|
|
174
176
|
const t = Math.max(0, e - 1);
|
|
175
|
-
|
|
176
|
-
}, [G,
|
|
177
|
+
h.value?.hideHelp(), h.value?.focus(t);
|
|
178
|
+
}, [G, le, te, J, K] = ye(A, B, n, g, k, D.value.formatValue, R, _, D.value.offsetValues, r.value.rangeEditable, r.value.minCount), Q = (e, a) => {
|
|
177
179
|
if (!l.disabled) {
|
|
178
180
|
const t = [...n.value];
|
|
179
181
|
let o = 0, i = 0, b = k.value - g.value;
|
|
180
182
|
n.value.forEach((f, s) => {
|
|
181
|
-
const
|
|
182
|
-
|
|
183
|
+
const x = Math.abs(e - f);
|
|
184
|
+
x <= b && (b = x, o = s), f < e && (i = s);
|
|
183
185
|
});
|
|
184
|
-
let
|
|
185
|
-
r.value.rangeEditable && b !== 0 && (!r.value.maxCount || n.value.length < r.value.maxCount) ? (t.splice(i + 1, 0, e),
|
|
186
|
-
const v =
|
|
187
|
-
d("beforeChange", v), R(t), a ? (document.activeElement?.blur?.(),
|
|
186
|
+
let C = o;
|
|
187
|
+
r.value.rangeEditable && b !== 0 && (!r.value.maxCount || n.value.length < r.value.maxCount) ? (t.splice(i + 1, 0, e), C = i + 1) : t[o] = e, r.value.rangeEnabled && !n.value.length && l.count === void 0 && t.push(e);
|
|
188
|
+
const v = p(t);
|
|
189
|
+
d("beforeChange", v), R(t), a ? (document.activeElement?.blur?.(), h.value?.focus(C), K(a, C, t)) : (l.onAfterChange && (d("afterChange", v), X(!1, "[vc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.")), d("changeComplete", v));
|
|
188
190
|
}
|
|
189
|
-
},
|
|
191
|
+
}, ne = (e) => {
|
|
190
192
|
e.preventDefault();
|
|
191
193
|
const {
|
|
192
194
|
width: a,
|
|
@@ -194,13 +196,13 @@ const Me = /* @__PURE__ */ de({
|
|
|
194
196
|
left: o,
|
|
195
197
|
top: i,
|
|
196
198
|
bottom: b,
|
|
197
|
-
right:
|
|
199
|
+
right: C
|
|
198
200
|
} = A.value.getBoundingClientRect(), {
|
|
199
201
|
clientX: v,
|
|
200
202
|
clientY: f
|
|
201
203
|
} = e;
|
|
202
204
|
let s;
|
|
203
|
-
switch (
|
|
205
|
+
switch (B.value) {
|
|
204
206
|
case "btt":
|
|
205
207
|
s = (b - f) / t;
|
|
206
208
|
break;
|
|
@@ -208,39 +210,39 @@ const Me = /* @__PURE__ */ de({
|
|
|
208
210
|
s = (f - i) / t;
|
|
209
211
|
break;
|
|
210
212
|
case "rtl":
|
|
211
|
-
s = (
|
|
213
|
+
s = (C - v) / a;
|
|
212
214
|
break;
|
|
213
215
|
default:
|
|
214
216
|
s = (v - o) / a;
|
|
215
217
|
}
|
|
216
|
-
const
|
|
217
|
-
|
|
218
|
-
}, j = F(null),
|
|
218
|
+
const x = g.value + s * (k.value - g.value);
|
|
219
|
+
Q(D.value.formatValue(x), e);
|
|
220
|
+
}, j = F(null), ue = (e, a) => {
|
|
219
221
|
if (!l.disabled) {
|
|
220
|
-
const t =
|
|
221
|
-
d("beforeChange",
|
|
222
|
+
const t = D.value.offsetValues(n.value, e, a);
|
|
223
|
+
d("beforeChange", p(n.value)), R(t.values), j.value = t.value;
|
|
222
224
|
}
|
|
223
225
|
};
|
|
224
|
-
|
|
226
|
+
M(() => {
|
|
225
227
|
if (j.value !== null) {
|
|
226
228
|
const e = n.value.indexOf(j.value);
|
|
227
|
-
e >= 0 &&
|
|
229
|
+
e >= 0 && h.value?.focus(e);
|
|
228
230
|
}
|
|
229
231
|
j.value = null;
|
|
230
232
|
});
|
|
231
|
-
const
|
|
232
|
-
|
|
233
|
-
},
|
|
234
|
-
|
|
235
|
-
if (!
|
|
236
|
-
const e = n.value.lastIndexOf(
|
|
237
|
-
|
|
233
|
+
const re = S(() => r.value.rangeDraggableTrack && E.value === null ? (process.env.NODE_ENV !== "production" && X(!1, "`draggableTrack` is not supported when `step` is `null`."), !1) : r.value.rangeDraggableTrack), U = (e, a) => {
|
|
234
|
+
K(e, a), d("beforeChange", p(n.value));
|
|
235
|
+
}, oe = S(() => G.value !== -1);
|
|
236
|
+
M(() => {
|
|
237
|
+
if (!oe.value) {
|
|
238
|
+
const e = n.value.lastIndexOf(le.value);
|
|
239
|
+
h.value?.focus(e);
|
|
238
240
|
}
|
|
239
241
|
});
|
|
240
|
-
const I = S(() => [...J.value].sort((e, a) => e - a)), [
|
|
242
|
+
const I = S(() => [...J.value].sort((e, a) => e - a)), [se, ie] = S(() => r.value.rangeEnabled ? [I.value[0], I.value[I.value.length - 1]] : [g.value, I.value[0]]).value;
|
|
241
243
|
Z({
|
|
242
244
|
focus: () => {
|
|
243
|
-
|
|
245
|
+
h.value?.focus(0);
|
|
244
246
|
},
|
|
245
247
|
blur: () => {
|
|
246
248
|
const {
|
|
@@ -248,19 +250,19 @@ const Me = /* @__PURE__ */ de({
|
|
|
248
250
|
} = document;
|
|
249
251
|
A.value?.contains(e) && e?.blur();
|
|
250
252
|
}
|
|
251
|
-
}),
|
|
252
|
-
l.autoFocus &&
|
|
253
|
+
}), M(() => {
|
|
254
|
+
l.autoFocus && h.value?.focus(0);
|
|
253
255
|
});
|
|
254
|
-
const
|
|
256
|
+
const ce = S(() => ({
|
|
255
257
|
min: g,
|
|
256
258
|
max: k,
|
|
257
|
-
direction:
|
|
259
|
+
direction: B,
|
|
258
260
|
disabled: l.disabled,
|
|
259
261
|
keyboard: l.keyboard,
|
|
260
|
-
step:
|
|
262
|
+
step: E,
|
|
261
263
|
included: l.included,
|
|
262
|
-
includedStart:
|
|
263
|
-
includedEnd:
|
|
264
|
+
includedStart: se,
|
|
265
|
+
includedEnd: ie,
|
|
264
266
|
range: r.value.rangeEnabled,
|
|
265
267
|
tabIndex: l.tabIndex,
|
|
266
268
|
ariaLabelForHandle: l.ariaLabelForHandle,
|
|
@@ -270,7 +272,7 @@ const Me = /* @__PURE__ */ de({
|
|
|
270
272
|
styles: l.styles || {},
|
|
271
273
|
classNames: l.classNames || {}
|
|
272
274
|
}));
|
|
273
|
-
return
|
|
275
|
+
return me(ce.value), () => {
|
|
274
276
|
const {
|
|
275
277
|
prefixCls: e = "vc-slider",
|
|
276
278
|
id: a,
|
|
@@ -280,72 +282,72 @@ const Me = /* @__PURE__ */ de({
|
|
|
280
282
|
// Style
|
|
281
283
|
startPoint: i,
|
|
282
284
|
trackStyle: b,
|
|
283
|
-
handleStyle:
|
|
285
|
+
handleStyle: C,
|
|
284
286
|
railStyle: v,
|
|
285
287
|
dotStyle: f,
|
|
286
288
|
activeDotStyle: s,
|
|
287
289
|
// Decorations
|
|
288
|
-
dots:
|
|
290
|
+
dots: x,
|
|
289
291
|
handleRender: L,
|
|
290
292
|
activeHandleRender: P,
|
|
291
293
|
// Components
|
|
292
294
|
track: $,
|
|
293
295
|
classNames: q,
|
|
294
|
-
styles:
|
|
296
|
+
styles: T
|
|
295
297
|
} = l;
|
|
296
|
-
return
|
|
298
|
+
return N("div", {
|
|
297
299
|
ref: A,
|
|
298
300
|
class: W(e, [Y.class], {
|
|
299
301
|
[`${e}-disabled`]: t,
|
|
300
302
|
[`${e}-vertical`]: o,
|
|
301
303
|
[`${e}-horizontal`]: !o,
|
|
302
|
-
[`${e}-with-marks`]:
|
|
304
|
+
[`${e}-with-marks`]: O.value.length
|
|
303
305
|
}),
|
|
304
306
|
style: Y.style,
|
|
305
|
-
onMousedown:
|
|
307
|
+
onMousedown: ne,
|
|
306
308
|
id: a
|
|
307
|
-
}, [
|
|
309
|
+
}, [N("div", {
|
|
308
310
|
class: W(`${e}-rail`, q?.rail),
|
|
309
311
|
style: {
|
|
310
312
|
...v,
|
|
311
|
-
...
|
|
313
|
+
...T?.rail
|
|
312
314
|
}
|
|
313
|
-
}, null), $ &&
|
|
315
|
+
}, null), $ && N(ke, {
|
|
314
316
|
prefixCls: e,
|
|
315
317
|
trackStyle: b,
|
|
316
318
|
values: n.value,
|
|
317
319
|
startPoint: i,
|
|
318
|
-
onStartMove:
|
|
319
|
-
}, null),
|
|
320
|
+
onStartMove: re.value ? U : void 0
|
|
321
|
+
}, null), N(Se, {
|
|
320
322
|
prefixCls: e,
|
|
321
|
-
marks:
|
|
322
|
-
dots:
|
|
323
|
+
marks: O.value,
|
|
324
|
+
dots: x,
|
|
323
325
|
style: f,
|
|
324
326
|
activeStyle: s
|
|
325
|
-
}, null),
|
|
326
|
-
ref:
|
|
327
|
+
}, null), N(he, {
|
|
328
|
+
ref: h,
|
|
327
329
|
prefixCls: e,
|
|
328
|
-
handleStyle:
|
|
330
|
+
handleStyle: C,
|
|
329
331
|
values: J.value,
|
|
330
332
|
draggingIndex: G.value,
|
|
331
|
-
draggingDelete:
|
|
333
|
+
draggingDelete: te.value,
|
|
332
334
|
onStartMove: U,
|
|
333
|
-
onOffsetChange:
|
|
335
|
+
onOffsetChange: ue,
|
|
334
336
|
onFocus: (H) => d("focus", H),
|
|
335
337
|
onBlur: (H) => d("blur", H),
|
|
336
338
|
handleRender: L,
|
|
337
339
|
activeHandleRender: P,
|
|
338
340
|
onChangeComplete: _,
|
|
339
|
-
onDelete: r.value.rangeEditable ?
|
|
341
|
+
onDelete: r.value.rangeEditable ? ae : () => {
|
|
340
342
|
}
|
|
341
|
-
}, null),
|
|
343
|
+
}, null), N(Fe, {
|
|
342
344
|
prefixCls: e,
|
|
343
|
-
marks:
|
|
345
|
+
marks: O.value,
|
|
344
346
|
onClick: Q
|
|
345
|
-
},
|
|
347
|
+
}, ee)]);
|
|
346
348
|
};
|
|
347
349
|
}
|
|
348
350
|
});
|
|
349
351
|
export {
|
|
350
|
-
|
|
352
|
+
we as default
|
|
351
353
|
};
|
package/dist/Tracks/Track.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("vue"),h=require("classnames"),M=require("../context.cjs"),d=require("../util.cjs"),q=c.defineComponent({name:"Track",props:{prefixCls:{type:String,required:!0},replaceCls:{type:String},start:{type:Number,required:!0},end:{type:Number,required:!0},index:{type:Number,default:()=>null},onStartMove:{type:Function}},setup(a,{attrs:f}){const{direction:v,min:s,max:o,disabled:b,range:p,classNames:g}=M.useInjectSlider(),S=r=>{!b&&a.onStartMove&&a.onStartMove(r,-1)}
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("vue"),h=require("classnames"),M=require("../context.cjs"),d=require("../util.cjs"),q=c.defineComponent({name:"Track",props:{prefixCls:{type:String,required:!0},replaceCls:{type:String},start:{type:Number,required:!0},end:{type:Number,required:!0},index:{type:Number,default:()=>null},onStartMove:{type:Function}},setup(a,{attrs:f}){const{direction:v,min:s,max:o,disabled:b,range:p,classNames:g}=M.useInjectSlider(),S=r=>{!b&&a.onStartMove&&a.onStartMove(r,-1)};return()=>{const{prefixCls:r,index:l,onStartMove:u,replaceCls:$,start:m,end:y}=a,t=d.getOffset(m,s.value,o.value),n=d.getOffset(y,s.value,o.value),i=`${r}-track`,k=$||h(i,{[`${i}-${l+1}`]:l!==null&&p,[`${r}-track-draggable`]:u},g.track),e={};switch(v.value){case"rtl":e.right=`${t*100}%`,e.width=`${n*100-t*100}%`;break;case"btt":e.bottom=`${t*100}%`,e.height=`${n*100-t*100}%`;break;case"ttb":e.top=`${t*100}%`,e.height=`${n*100-t*100}%`;break;default:e.left=`${t*100}%`,e.width=`${n*100-t*100}%`}return c.createVNode("div",{class:k,style:{...e,...f.style},onMousedown:u?S:void 0},null)}}});exports.default=q;
|
package/dist/Tracks/Track.js
CHANGED
|
@@ -40,7 +40,7 @@ const I = /* @__PURE__ */ y({
|
|
|
40
40
|
classNames: $
|
|
41
41
|
} = C(), b = (r) => {
|
|
42
42
|
!m && n.onStartMove && n.onStartMove(r, -1);
|
|
43
|
-
}
|
|
43
|
+
};
|
|
44
44
|
return () => {
|
|
45
45
|
const {
|
|
46
46
|
prefixCls: r,
|
|
@@ -52,7 +52,7 @@ const I = /* @__PURE__ */ y({
|
|
|
52
52
|
} = n, t = u(S, o.value, s.value), a = u(g, o.value, s.value), c = `${r}-track`, k = v || x(c, {
|
|
53
53
|
[`${c}-${l + 1}`]: l !== null && p,
|
|
54
54
|
[`${r}-track-draggable`]: i
|
|
55
|
-
}, $.track);
|
|
55
|
+
}, $.track), e = {};
|
|
56
56
|
switch (f.value) {
|
|
57
57
|
case "rtl":
|
|
58
58
|
e.right = `${t * 100}%`, e.width = `${a * 100 - t * 100}%`;
|
package/dist/hooks/useDrag.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"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;
|
package/dist/hooks/useDrag.js
CHANGED
|
@@ -1,88 +1,88 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { ref as r, inject as
|
|
3
|
-
import { UnstableContextKey as
|
|
1
|
+
import N from "@v-c/util/dist/hooks/useEvent";
|
|
2
|
+
import { ref as r, inject as Q, onUnmounted as W, computed as Z } from "vue";
|
|
3
|
+
import { UnstableContextKey as $, defaultUnstableContextValue as w } from "../context.js";
|
|
4
4
|
const I = 130;
|
|
5
5
|
function _(h) {
|
|
6
|
-
const
|
|
7
|
-
return { pageX:
|
|
6
|
+
const C = "targetTouches" in h ? h.targetTouches[0] : h;
|
|
7
|
+
return { pageX: C.pageX, pageY: C.pageY };
|
|
8
8
|
}
|
|
9
|
-
function
|
|
10
|
-
const Y = r(null), c = r(-1),
|
|
11
|
-
c.value === -1 && (i.value = f.value),
|
|
9
|
+
function ne(h, C, f, T, X, y, B, K, q, R, x) {
|
|
10
|
+
const Y = r(null), c = r(-1), D = r(!1), i = r(f.value), g = r(f.value), p = r(null), E = r(null), v = r(null), z = Q($, w), { onDragStart: U, onDragChange: O } = z;
|
|
11
|
+
c.value === -1 && (i.value = f.value), W(() => {
|
|
12
12
|
document.removeEventListener("mousemove", p.value), document.removeEventListener("mouseup", E.value), v.value && (v.value.removeEventListener("touchmove", p.value), v.value.removeEventListener("touchend", E.value));
|
|
13
13
|
});
|
|
14
|
-
const j = (t,
|
|
15
|
-
|
|
14
|
+
const j = (t, n, o) => {
|
|
15
|
+
n !== void 0 && (Y.value = n), i.value = t;
|
|
16
16
|
let a = t;
|
|
17
|
-
|
|
17
|
+
o && (a = t.filter((l, e) => e !== c.value)), B(a), O && O({
|
|
18
18
|
rawValues: t,
|
|
19
|
-
deleteIndex:
|
|
19
|
+
deleteIndex: o ? c.value : -1,
|
|
20
20
|
draggingIndex: c.value,
|
|
21
|
-
draggingValue:
|
|
21
|
+
draggingValue: n
|
|
22
22
|
});
|
|
23
|
-
},
|
|
24
|
-
(t,
|
|
23
|
+
}, A = N(
|
|
24
|
+
(t, n, o) => {
|
|
25
25
|
if (t === -1) {
|
|
26
26
|
const a = g.value[0], l = g.value[g.value.length - 1], e = T.value - a, s = X.value - l;
|
|
27
|
-
let u =
|
|
27
|
+
let u = n * (X.value - T.value);
|
|
28
28
|
u = Math.max(u, e), u = Math.min(u, s), u = y(a + u) - a;
|
|
29
29
|
const m = g.value.map((d) => d + u);
|
|
30
30
|
j(m);
|
|
31
31
|
} else {
|
|
32
|
-
const a = (X.value - T.value) *
|
|
32
|
+
const a = (X.value - T.value) * n, l = [...i.value];
|
|
33
33
|
l[t] = g.value[t];
|
|
34
34
|
const e = q(l, a, t, "dist");
|
|
35
|
-
j(e.values, e.value,
|
|
35
|
+
j(e.values, e.value, o);
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
|
-
),
|
|
39
|
-
t.stopPropagation()
|
|
40
|
-
const a =
|
|
41
|
-
c.value =
|
|
38
|
+
), F = (t, n, o) => {
|
|
39
|
+
t.stopPropagation();
|
|
40
|
+
const a = o || f.value, l = a[n];
|
|
41
|
+
c.value = n, Y.value = l, g.value = a, i.value = a, D.value = !1;
|
|
42
42
|
const { pageX: e, pageY: s } = _(t);
|
|
43
43
|
let u = !1;
|
|
44
44
|
U && U({
|
|
45
45
|
rawValues: a,
|
|
46
|
-
draggingIndex:
|
|
46
|
+
draggingIndex: n,
|
|
47
47
|
draggingValue: l
|
|
48
48
|
});
|
|
49
49
|
const V = (d) => {
|
|
50
50
|
d.preventDefault();
|
|
51
|
-
const { pageX:
|
|
51
|
+
const { pageX: H, pageY: J } = _(d), M = H - e, S = J - s, { width: k, height: P } = h.value.getBoundingClientRect();
|
|
52
52
|
let L, b;
|
|
53
|
-
switch (
|
|
53
|
+
switch (C.value) {
|
|
54
54
|
case "btt":
|
|
55
|
-
L = -S / P, b =
|
|
55
|
+
L = -S / P, b = M;
|
|
56
56
|
break;
|
|
57
57
|
case "ttb":
|
|
58
|
-
L = S / P, b =
|
|
58
|
+
L = S / P, b = M;
|
|
59
59
|
break;
|
|
60
60
|
case "rtl":
|
|
61
|
-
L = -
|
|
61
|
+
L = -M / k, b = S;
|
|
62
62
|
break;
|
|
63
63
|
default:
|
|
64
|
-
L =
|
|
64
|
+
L = M / k, b = S;
|
|
65
65
|
}
|
|
66
|
-
u = R ? Math.abs(b) > I &&
|
|
66
|
+
u = R ? Math.abs(b) > I && x < i.value.length : !1, D.value = u, A(n, L, u);
|
|
67
67
|
}, m = (d) => {
|
|
68
|
-
d.preventDefault(), document.removeEventListener("mouseup", m), document.removeEventListener("mousemove", V), v.value && (v.value.removeEventListener("touchmove", p.value), v.value.removeEventListener("touchend", E.value)), p.value = null, E.value = null, v.value = null, K(u), c.value = -1,
|
|
68
|
+
d.preventDefault(), document.removeEventListener("mouseup", m), document.removeEventListener("mousemove", V), v.value && (v.value.removeEventListener("touchmove", p.value), v.value.removeEventListener("touchend", E.value)), p.value = null, E.value = null, v.value = null, K(u), c.value = -1, D.value = !1;
|
|
69
69
|
};
|
|
70
70
|
document.addEventListener("mouseup", m), document.addEventListener("mousemove", V), t.currentTarget.addEventListener("touchend", m), t.currentTarget.addEventListener("touchmove", V), p.value = V, E.value = m, v.value = t.currentTarget;
|
|
71
|
-
},
|
|
72
|
-
const t = [...f.value].sort((e, s) => e - s),
|
|
73
|
-
|
|
74
|
-
|
|
71
|
+
}, G = Z(() => {
|
|
72
|
+
const t = [...f.value].sort((e, s) => e - s), n = [...i.value].sort((e, s) => e - s), o = {};
|
|
73
|
+
n.forEach((e) => {
|
|
74
|
+
o[e] = (o[e] || 0) + 1;
|
|
75
75
|
}), t.forEach((e) => {
|
|
76
|
-
|
|
76
|
+
o[e] = (o[e] || 0) - 1;
|
|
77
77
|
});
|
|
78
78
|
const a = R ? 1 : 0;
|
|
79
|
-
return Object.values(
|
|
79
|
+
return Object.values(o).reduce(
|
|
80
80
|
(e, s) => e + Math.abs(s),
|
|
81
81
|
0
|
|
82
82
|
) <= a ? i.value : f.value;
|
|
83
83
|
});
|
|
84
|
-
return [c, Y,
|
|
84
|
+
return [c, Y, D, G, F];
|
|
85
85
|
}
|
|
86
86
|
export {
|
|
87
|
-
|
|
87
|
+
ne as default
|
|
88
88
|
};
|
package/dist/hooks/useOffset.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const P=require("vue");function _(c,a,h,b,O,V){const D=P.computed(()=>r=>Math.max(c,Math.min(a,r))).value,g=r=>{if(h!==null){const i=c+Math.round((D(r)-c)/h)*h,l=u=>(String(u).split(".")[1]||"").length,s=Math.max(l(h),l(a),l(c)),t=Number(i.toFixed(s));return c<=t&&t<=a?t:null}return null},w=r=>{const i=D(r),l=b.map(u=>u&&u.value);if(h!==null){const u=g(r);u!==null&&l.push(u)}l.push(c,a);let s=l[0],t=a-c;return l.forEach(u=>{const f=Math.abs(i-u);f<=t&&(s=u,t=f)}),s},S=(r,i,l,s="unit")=>{if(typeof i=="number"){let t;const u=r[l],f=u+i;let e=[];b.forEach(n=>{e.push(n.value)}),e.push(c,a);const o=g(u);o!==null&&e.push(o);const y=i>0?1:-1;if(s==="unit"){const n=g(u+y*h);n!==null&&e.push(n)}else{const n=g(f);n!==null&&e.push(n)}e=e.filter(n=>n!==null).filter(n=>i<0?n<=u:n>=u),s==="unit"&&(e=e.filter(n=>n!==u));const E=s==="unit"?u:f;t=e[0];let N=Math.abs(t-E);if(e.forEach(n=>{const m=Math.abs(n-E);m<N&&(t=n,N=m)}),t===void 0)return i<0?c:a;if(s==="dist")return t;if(Math.abs(i)>1){const n=[...r];return n[l]=t,S(n,i-y,l,s)}return t}else{if(i==="min")return c;if(i==="max")return a}},p=(r,i,l,s="unit")=>{const t=r[l],u=S(r,i,l,s);return{value:u,changed:u!==t}},M=r=>V===null&&r===0||typeof V=="number"&&r<V;return[w,(r,i,l,s="unit")=>{const t=r.map(w),u=t[l],f=S(t,i,l,s);if(t[l]=f,O){if(typeof V=="number"||V===null){for(let e=l+1;e<t.length;e+=1){let o=!0;for(;M(t[e]-t[e-1])&&o;)({value:t[e],changed:o}=p(t,1,e))}for(let e=l;e>0;e-=1){let o=!0;for(;M(t[e]-t[e-1])&&o;)({value:t[e-1],changed:o}=p(t,-1,e-1))}for(let e=t.length-1;e>0;e-=1){let o=!0;for(;M(t[e]-t[e-1])&&o;)({value:t[e-1],changed:o}=p(t,-1,e-1))}for(let e=0;e<t.length-1;e+=1){let o=!0;for(;M(t[e+1]-t[e])&&o;)({value:t[e+1],changed:o}=p(t,1,e+1))}}}else{const e=V||0;l>0&&t[l-1]!==u&&(t[l]=Math.max(t[l],t[l-1]+e)),l<t.length-1&&t[l+1]!==u&&(t[l]=Math.min(t[l],t[l+1]-e))}return{value:t[l],values:t}}]}exports.default=_;
|
|
@@ -6,5 +6,5 @@ export type OffsetValues = (values: number[], offset: number | 'min' | 'max', va
|
|
|
6
6
|
value: number;
|
|
7
7
|
values: number[];
|
|
8
8
|
};
|
|
9
|
-
export default function useOffset(min: number, max: number, step: number, markList: InternalMarkObj[], allowCross: boolean, pushable: false | number): [FormatValue, OffsetValues];
|
|
9
|
+
export default function useOffset(min: number, max: number, step: number | null, markList: InternalMarkObj[], allowCross: boolean, pushable: false | number | null): [FormatValue, OffsetValues];
|
|
10
10
|
export {};
|