@lazycatcloud/lzc-toolkit 0.0.30 → 0.0.32
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/index.es.js +132 -129
- package/dist/index.umd.js +1 -1
- package/dist/style.css +1 -1
- package/dist/types/scroll-bar/ScrollBar.vue.d.ts +6 -0
- package/dist/types/scroll-bar/use/scrollBar.d.ts +2 -0
- package/dist/types/useVirtualList/VirtualList.vue.d.ts +84 -3
- package/dist/types/useVirtualList/index.d.ts +14 -16
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { unref as w, getCurrentScope as Ie, onScopeDispose as Te, getCurrentInstance as Re, onMounted as Z, nextTick as ue, ref as
|
|
1
|
+
import { unref as w, getCurrentScope as Ie, onScopeDispose as Te, getCurrentInstance as Re, onMounted as Z, nextTick as ue, ref as m, watch as P, shallowRef as Ce, computed as h, onUnmounted as ce, inject as H, provide as E, defineComponent as j, openBlock as T, createBlock as de, Transition as ve, withCtx as fe, createElementBlock as B, createElementVNode as R, withModifiers as Be, normalizeClass as Pe, renderSlot as ee, createCommentVNode as $e, render as Ae, h as Y, normalizeStyle as te, useSlots as Le, withDirectives as Fe, vShow as De, pushScopeId as Me, popScopeId as Ve, toRef as ke, mergeProps as Ke, normalizeProps as le, guardReactiveProps as ne, Fragment as je, renderList as ze } from "vue";
|
|
2
2
|
var oe;
|
|
3
3
|
const $ = typeof window < "u";
|
|
4
4
|
$ && ((oe = window?.navigator) == null ? void 0 : oe.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
|
|
@@ -13,14 +13,14 @@ function Ne(e, t) {
|
|
|
13
13
|
}
|
|
14
14
|
function Qe(e, t = {}) {
|
|
15
15
|
let l, n;
|
|
16
|
-
return (
|
|
16
|
+
return (a) => {
|
|
17
17
|
const o = G(e), d = G(t.maxWait);
|
|
18
18
|
if (l && clearTimeout(l), o <= 0 || d !== void 0 && d <= 0)
|
|
19
|
-
return n && (clearTimeout(n), n = null),
|
|
19
|
+
return n && (clearTimeout(n), n = null), a();
|
|
20
20
|
d && !n && (n = setTimeout(() => {
|
|
21
|
-
l && clearTimeout(l), n = null,
|
|
21
|
+
l && clearTimeout(l), n = null, a();
|
|
22
22
|
}, d)), l = setTimeout(() => {
|
|
23
|
-
n && clearTimeout(n), n = null,
|
|
23
|
+
n && clearTimeout(n), n = null, a();
|
|
24
24
|
}, o);
|
|
25
25
|
};
|
|
26
26
|
}
|
|
@@ -46,7 +46,7 @@ $ && window.document;
|
|
|
46
46
|
$ && window.navigator;
|
|
47
47
|
$ && window.location;
|
|
48
48
|
function Ge(e, t = !1) {
|
|
49
|
-
const l =
|
|
49
|
+
const l = m(), n = () => l.value = Boolean(e());
|
|
50
50
|
return n(), qe(n, t), l;
|
|
51
51
|
}
|
|
52
52
|
const J = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, X = "__vueuse_ssr_handlers__";
|
|
@@ -62,12 +62,12 @@ var re = Object.getOwnPropertySymbols, Je = Object.prototype.hasOwnProperty, Xe
|
|
|
62
62
|
return l;
|
|
63
63
|
};
|
|
64
64
|
function et(e, t, l = {}) {
|
|
65
|
-
const n = l, { window: r = Ye } = n,
|
|
65
|
+
const n = l, { window: r = Ye } = n, a = Ze(n, ["window"]);
|
|
66
66
|
let o;
|
|
67
67
|
const d = Ge(() => r && "ResizeObserver" in r), g = () => {
|
|
68
68
|
o && (o.disconnect(), o = void 0);
|
|
69
69
|
}, f = P(() => he(e), (p) => {
|
|
70
|
-
g(), d.value && r && p && (o = new ResizeObserver(t), o.observe(p,
|
|
70
|
+
g(), d.value && r && p && (o = new ResizeObserver(t), o.observe(p, a));
|
|
71
71
|
}, { immediate: !0, flush: "post" }), v = () => {
|
|
72
72
|
g(), f();
|
|
73
73
|
};
|
|
@@ -77,30 +77,30 @@ function et(e, t, l = {}) {
|
|
|
77
77
|
};
|
|
78
78
|
}
|
|
79
79
|
function tt(e, t = { width: 0, height: 0 }, l = {}) {
|
|
80
|
-
const { box: n = "content-box" } = l, r =
|
|
80
|
+
const { box: n = "content-box" } = l, r = m(t.width), a = m(t.height);
|
|
81
81
|
return et(e, ([o]) => {
|
|
82
82
|
const d = n === "border-box" ? o.borderBoxSize : n === "content-box" ? o.contentBoxSize : o.devicePixelContentBoxSize;
|
|
83
|
-
d ? (r.value = d.reduce((g, { inlineSize: f }) => g + f, 0),
|
|
83
|
+
d ? (r.value = d.reduce((g, { inlineSize: f }) => g + f, 0), a.value = d.reduce((g, { blockSize: f }) => g + f, 0)) : (r.value = o.contentRect.width, a.value = o.contentRect.height);
|
|
84
84
|
}, l), P(() => he(e), (o) => {
|
|
85
|
-
r.value = o ? t.width : 0,
|
|
85
|
+
r.value = o ? t.width : 0, a.value = o ? t.height : 0;
|
|
86
86
|
}), {
|
|
87
87
|
width: r,
|
|
88
|
-
height:
|
|
88
|
+
height: a
|
|
89
89
|
};
|
|
90
90
|
}
|
|
91
|
-
var
|
|
91
|
+
var se;
|
|
92
92
|
(function(e) {
|
|
93
93
|
e.UP = "UP", e.RIGHT = "RIGHT", e.DOWN = "DOWN", e.LEFT = "LEFT", e.NONE = "NONE";
|
|
94
|
-
})(
|
|
95
|
-
var lt = Object.defineProperty,
|
|
94
|
+
})(se || (se = {}));
|
|
95
|
+
var lt = Object.defineProperty, ae = Object.getOwnPropertySymbols, nt = Object.prototype.hasOwnProperty, ot = Object.prototype.propertyIsEnumerable, ie = (e, t, l) => t in e ? lt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, rt = (e, t) => {
|
|
96
96
|
for (var l in t || (t = {}))
|
|
97
97
|
nt.call(t, l) && ie(e, l, t[l]);
|
|
98
|
-
if (
|
|
99
|
-
for (var l of
|
|
98
|
+
if (ae)
|
|
99
|
+
for (var l of ae(t))
|
|
100
100
|
ot.call(t, l) && ie(e, l, t[l]);
|
|
101
101
|
return e;
|
|
102
102
|
};
|
|
103
|
-
const
|
|
103
|
+
const st = {
|
|
104
104
|
easeInSine: [0.12, 0, 0.39, 0],
|
|
105
105
|
easeOutSine: [0.61, 1, 0.88, 1],
|
|
106
106
|
easeInOutSine: [0.37, 0, 0.63, 1],
|
|
@@ -128,88 +128,79 @@ const at = {
|
|
|
128
128
|
};
|
|
129
129
|
rt({
|
|
130
130
|
linear: We
|
|
131
|
-
},
|
|
132
|
-
function
|
|
133
|
-
const { scrollEndHook: l, itemHeight: n, overscan: r = 5 } = t,
|
|
131
|
+
}, st);
|
|
132
|
+
function at(e, t) {
|
|
133
|
+
const { scrollEndHook: l, itemHeight: n, overscan: r = 5 } = t, a = m(null), o = tt(a), d = m(!0), g = pe(N, 100);
|
|
134
134
|
let f;
|
|
135
|
-
const v = Ce(e), p =
|
|
135
|
+
const v = Ce(e), p = m(0), i = m({ start: 0, end: 10 });
|
|
136
136
|
let u = 0;
|
|
137
|
-
const
|
|
138
|
-
let { sum:
|
|
139
|
-
return v.value.map((S,
|
|
140
|
-
}), z = h(() =>
|
|
141
|
-
let
|
|
142
|
-
return
|
|
137
|
+
const x = m([]), b = h(() => {
|
|
138
|
+
let { sum: s, height: c } = { sum: 0, height: 0 };
|
|
139
|
+
return v.value.map((S, _) => (typeof n == "number" ? c = n : c = n(_), s += c, { height: c, sum: s }));
|
|
140
|
+
}), z = h(() => V(i.value.start)), I = h(() => typeof n == "number" ? b.value.length * n : b.value[b.value.length - 1]?.sum || 0), A = h(() => {
|
|
141
|
+
let s = x.value.length - r, c = Math.max(s - u, 0);
|
|
142
|
+
return x.value.slice(c, s);
|
|
143
143
|
});
|
|
144
144
|
Z(() => {
|
|
145
145
|
}), ce(() => cancelAnimationFrame(f)), P(
|
|
146
146
|
[o.width, o.height, v],
|
|
147
|
-
([
|
|
148
|
-
(
|
|
147
|
+
([s, c]) => {
|
|
148
|
+
(s || c) && F();
|
|
149
149
|
},
|
|
150
150
|
{ deep: !0 }
|
|
151
151
|
), P(p, () => {
|
|
152
|
-
|
|
152
|
+
L(), g();
|
|
153
153
|
});
|
|
154
|
-
function
|
|
154
|
+
function L() {
|
|
155
155
|
d.value = !1;
|
|
156
156
|
}
|
|
157
|
-
function
|
|
157
|
+
function N() {
|
|
158
158
|
d.value = !0, l?.();
|
|
159
159
|
}
|
|
160
|
-
function
|
|
160
|
+
function F() {
|
|
161
161
|
cancelAnimationFrame(f), f = requestAnimationFrame(D);
|
|
162
162
|
}
|
|
163
163
|
function D() {
|
|
164
|
-
if (
|
|
165
|
-
p.value =
|
|
166
|
-
let
|
|
167
|
-
|
|
164
|
+
if (a.value) {
|
|
165
|
+
p.value = a.value.scrollTop, u = C();
|
|
166
|
+
let s = M(p.value), c = s + u + r;
|
|
167
|
+
s = s - r, s = s < 0 ? 0 : s, c = c > v.value.length ? v.value.length : c, i.value = { start: s, end: c }, x.value = v.value.slice(s, c).map((S, _) => ({
|
|
168
168
|
data: S,
|
|
169
|
-
index:
|
|
169
|
+
index: _ + s
|
|
170
170
|
}));
|
|
171
171
|
}
|
|
172
172
|
}
|
|
173
|
-
function
|
|
174
|
-
let c =
|
|
175
|
-
for (
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
break;
|
|
179
|
-
}
|
|
180
|
-
m === 15 && (S = m);
|
|
173
|
+
function M(s) {
|
|
174
|
+
let c = 0, S = b.value.length - 1, _ = -1;
|
|
175
|
+
for (; c <= S; ) {
|
|
176
|
+
const y = Math.floor((c + S) / 2);
|
|
177
|
+
b.value[y].sum >= s ? (_ = y, S = y - 1) : c = y + 1;
|
|
181
178
|
}
|
|
182
|
-
|
|
183
|
-
for (let m = S; m < b.value.length; m++)
|
|
184
|
-
if (b.value[m].sum >= a) {
|
|
185
|
-
y = m;
|
|
186
|
-
break;
|
|
187
|
-
}
|
|
188
|
-
return Math.max(0, y);
|
|
179
|
+
return Math.max(0, _);
|
|
189
180
|
}
|
|
190
181
|
function C() {
|
|
191
|
-
let
|
|
192
|
-
for (let
|
|
182
|
+
let s = 0, c = 0, S = Q();
|
|
183
|
+
for (let _ = S; _ < b.value.length && (s++, c += b.value[_].height, !(c >= o.height.value)); _++)
|
|
193
184
|
;
|
|
194
|
-
return
|
|
185
|
+
return s;
|
|
195
186
|
}
|
|
196
|
-
function
|
|
187
|
+
function V(s) {
|
|
197
188
|
if (typeof n == "number")
|
|
198
|
-
return
|
|
199
|
-
let c = b.value[
|
|
189
|
+
return s * n;
|
|
190
|
+
let c = b.value[s];
|
|
200
191
|
return c ? c.sum - c.height : 0;
|
|
201
192
|
}
|
|
202
|
-
function
|
|
203
|
-
return b.value[
|
|
193
|
+
function k(s) {
|
|
194
|
+
return b.value[s] || { sum: 0, height: 0 };
|
|
204
195
|
}
|
|
205
196
|
function Q() {
|
|
206
|
-
let
|
|
207
|
-
return
|
|
197
|
+
let s = i.value.start;
|
|
198
|
+
return s >= r && (s += r), s;
|
|
208
199
|
}
|
|
209
|
-
function W(
|
|
210
|
-
if (
|
|
211
|
-
const c =
|
|
212
|
-
|
|
200
|
+
function W(s) {
|
|
201
|
+
if (a.value) {
|
|
202
|
+
const c = k(s);
|
|
203
|
+
a.value.scrollTop = c.sum - c.height, D();
|
|
213
204
|
}
|
|
214
205
|
}
|
|
215
206
|
const U = h(() => ({
|
|
@@ -227,18 +218,19 @@ function st(e, t) {
|
|
|
227
218
|
overflowY: "auto"
|
|
228
219
|
};
|
|
229
220
|
return {
|
|
230
|
-
list:
|
|
221
|
+
list: x,
|
|
231
222
|
visiableList: A,
|
|
232
|
-
getItemHeightData:
|
|
223
|
+
getItemHeightData: k,
|
|
224
|
+
getoffsetTopIndex: M,
|
|
233
225
|
totalHeight: I,
|
|
234
226
|
clientHeight: o.height,
|
|
235
227
|
scrollTo: W,
|
|
236
228
|
scrollTop: p,
|
|
237
229
|
isScrollEnd: d,
|
|
238
230
|
containerProps: {
|
|
239
|
-
ref:
|
|
231
|
+
ref: a,
|
|
240
232
|
onScroll: () => {
|
|
241
|
-
|
|
233
|
+
F();
|
|
242
234
|
},
|
|
243
235
|
style: q
|
|
244
236
|
},
|
|
@@ -246,7 +238,7 @@ function st(e, t) {
|
|
|
246
238
|
innerProps: K
|
|
247
239
|
};
|
|
248
240
|
}
|
|
249
|
-
const ge = Symbol(), me = Symbol(), be = Symbol(), _e = Symbol(), ye = Symbol(), we = Symbol(), Se = Symbol(), Oe = Symbol(),
|
|
241
|
+
const ge = Symbol(), me = Symbol(), be = Symbol(), _e = Symbol(), ye = Symbol(), we = Symbol(), Se = Symbol(), Oe = Symbol(), Ee = Symbol();
|
|
250
242
|
function _t() {
|
|
251
243
|
const { voidFn: e, boolFn: t, boolRef: l, arrayRef: n } = {
|
|
252
244
|
voidFn: (u) => {
|
|
@@ -254,10 +246,10 @@ function _t() {
|
|
|
254
246
|
boolFn: (u) => !1,
|
|
255
247
|
boolRef: h(() => !1),
|
|
256
248
|
arrayRef: h(() => [])
|
|
257
|
-
}, r =
|
|
249
|
+
}, r = H(_e, n), a = H(be, t), o = H(Oe, l), d = H(me, e), g = H(ge, e), f = H(ye, e), v = H(we, e), p = H(Se, e), i = H(Ee, e);
|
|
258
250
|
return {
|
|
259
251
|
selected: r,
|
|
260
|
-
isSelected:
|
|
252
|
+
isSelected: a,
|
|
261
253
|
isAllSelected: o,
|
|
262
254
|
toggle: d,
|
|
263
255
|
toggleAll: g,
|
|
@@ -268,8 +260,8 @@ function _t() {
|
|
|
268
260
|
};
|
|
269
261
|
}
|
|
270
262
|
function yt(e, t) {
|
|
271
|
-
const l =
|
|
272
|
-
function
|
|
263
|
+
const l = m({}), n = h(() => e.value.filter((i) => l.value[i[t]])), r = h(() => n.value.length != 0 && Object.keys(l.value).length == e.value.length);
|
|
264
|
+
function a() {
|
|
273
265
|
e.value.forEach((i) => {
|
|
274
266
|
l.value[i[t]] = !0;
|
|
275
267
|
});
|
|
@@ -296,12 +288,12 @@ function yt(e, t) {
|
|
|
296
288
|
});
|
|
297
289
|
}
|
|
298
290
|
function p() {
|
|
299
|
-
r.value ? o() :
|
|
291
|
+
r.value ? o() : a();
|
|
300
292
|
}
|
|
301
|
-
return
|
|
293
|
+
return E(ge, p), E(me, v), E(be, f), E(_e, n), E(ye, d), E(we, a), E(Se, g), E(Oe, r), E(Ee, o), {
|
|
302
294
|
selected: n,
|
|
303
295
|
select: d,
|
|
304
|
-
selectAll:
|
|
296
|
+
selectAll: a,
|
|
305
297
|
unselect: g,
|
|
306
298
|
unselectAll: o,
|
|
307
299
|
toggle: v,
|
|
@@ -322,7 +314,7 @@ const it = Symbol(), ut = /* @__PURE__ */ j({
|
|
|
322
314
|
const l = e, n = () => {
|
|
323
315
|
l.closeOnClickOverlay && t("update:visiable", !1);
|
|
324
316
|
};
|
|
325
|
-
return
|
|
317
|
+
return E(it, () => t("update:visiable", !1)), (r, a) => (T(), de(ve, { name: "modal" }, {
|
|
326
318
|
default: fe(() => [
|
|
327
319
|
e.visiable ? (T(), B("div", {
|
|
328
320
|
key: 0,
|
|
@@ -330,7 +322,7 @@ const it = Symbol(), ut = /* @__PURE__ */ j({
|
|
|
330
322
|
class: "modal absolute inset-0 bottom-0 z-50 flex bg-stone-900 bg-opacity-50"
|
|
331
323
|
}, [
|
|
332
324
|
R("div", {
|
|
333
|
-
onClick:
|
|
325
|
+
onClick: a[0] || (a[0] = Be(() => {
|
|
334
326
|
}, ["stop"])),
|
|
335
327
|
class: Pe(["dialog m-auto flex flex-col", e.dialogClass])
|
|
336
328
|
}, [
|
|
@@ -344,7 +336,7 @@ const it = Symbol(), ut = /* @__PURE__ */ j({
|
|
|
344
336
|
});
|
|
345
337
|
function wt(e) {
|
|
346
338
|
function t(l, n) {
|
|
347
|
-
const r = document.createElement("div"),
|
|
339
|
+
const r = document.createElement("div"), a = {
|
|
348
340
|
setup() {
|
|
349
341
|
return () => Y(
|
|
350
342
|
ut,
|
|
@@ -361,7 +353,7 @@ function wt(e) {
|
|
|
361
353
|
);
|
|
362
354
|
}
|
|
363
355
|
};
|
|
364
|
-
return document.body.appendChild(r), Ae(Y(
|
|
356
|
+
return document.body.appendChild(r), Ae(Y(a), r), {
|
|
365
357
|
close: () => r?.remove()
|
|
366
358
|
};
|
|
367
359
|
}
|
|
@@ -384,7 +376,7 @@ const ct = ["xlink:href", "fill", "color"], St = /* @__PURE__ */ j({
|
|
|
384
376
|
height: `${t.height}px`,
|
|
385
377
|
aspectRatio: t.width && t.height ? void 0 : "1/1"
|
|
386
378
|
}));
|
|
387
|
-
return (r,
|
|
379
|
+
return (r, a) => (T(), B("svg", {
|
|
388
380
|
"aria-hidden": "",
|
|
389
381
|
style: te(w(n))
|
|
390
382
|
}, [
|
|
@@ -402,40 +394,40 @@ function dt(e) {
|
|
|
402
394
|
sliderEl: l,
|
|
403
395
|
autoHeight: n,
|
|
404
396
|
performance: r = {},
|
|
405
|
-
maxHeightRatio:
|
|
406
|
-
} = e, o =
|
|
397
|
+
maxHeightRatio: a = 0.9
|
|
398
|
+
} = e, o = m(!0), d = pe(V, 100);
|
|
407
399
|
let g, f = "";
|
|
408
|
-
const v =
|
|
400
|
+
const v = m(0), p = m(0), i = m(0), u = m({
|
|
409
401
|
top: 0,
|
|
410
402
|
scrollTop: 0,
|
|
411
403
|
scrollHeight: 0,
|
|
412
404
|
clientHeight: 0
|
|
413
|
-
}),
|
|
405
|
+
}), x = m({
|
|
414
406
|
clientHeight: 0
|
|
415
|
-
}), b = h(() => !!p.value), z = h(() => u.value.scrollHeight > u.value.clientHeight), I = h(() => u.value.clientHeight -
|
|
407
|
+
}), b = h(() => !!p.value), z = h(() => u.value.scrollHeight > u.value.clientHeight), I = h(() => u.value.clientHeight - x.value.clientHeight), A = h(() => u.value.scrollHeight - u.value.clientHeight), L = h(() => Math.max(
|
|
416
408
|
u.value.clientHeight / u.value.scrollHeight,
|
|
417
409
|
0.05
|
|
418
|
-
)),
|
|
410
|
+
)), N = h(() => L.value > a ? 0 : L.value * u.value.clientHeight), F = h(() => ({
|
|
419
411
|
willChange: "transform",
|
|
420
412
|
transform: `translate3d(0,${i.value}px,0)`,
|
|
421
|
-
height: n ? `${
|
|
413
|
+
height: n ? `${N.value}px` : void 0
|
|
422
414
|
}));
|
|
423
|
-
function D(
|
|
424
|
-
C(), p.value =
|
|
415
|
+
function D(y) {
|
|
416
|
+
C(), p.value = y.clientY - l.value.getBoundingClientRect().top || 1, f = getComputedStyle(t.value).scrollBehavior, f === "smooth" && (t.value.style.scrollBehavior = "unset");
|
|
425
417
|
}
|
|
426
|
-
function
|
|
418
|
+
function M() {
|
|
427
419
|
t.value.style.scrollBehavior = f, p.value = 0, d();
|
|
428
420
|
}
|
|
429
421
|
function C() {
|
|
430
422
|
o.value = !1;
|
|
431
423
|
}
|
|
432
|
-
function
|
|
424
|
+
function V() {
|
|
433
425
|
b.value || (o.value = !0);
|
|
434
426
|
}
|
|
435
|
-
function
|
|
427
|
+
function k(y) {
|
|
436
428
|
if (!b.value)
|
|
437
429
|
return;
|
|
438
|
-
let O =
|
|
430
|
+
let O = y.clientY - u.value.top - p.value;
|
|
439
431
|
O < 0 ? i.value = 0 : O >= I.value ? i.value = I.value : i.value = O, t.value.scrollTo({
|
|
440
432
|
top: i.value / I.value * A.value
|
|
441
433
|
});
|
|
@@ -449,21 +441,21 @@ function dt(e) {
|
|
|
449
441
|
function U() {
|
|
450
442
|
t.value && (v.value = r.scrollTop?.value ?? t.value.scrollTop, i.value = v.value / A.value * I.value);
|
|
451
443
|
}
|
|
452
|
-
function K(
|
|
444
|
+
function K(y) {
|
|
453
445
|
let O = "addEventListener";
|
|
454
|
-
|
|
446
|
+
y === "add" ? O = "addEventListener" : O = "removeEventListener", l.value?.[O]("pointerdown", D, {
|
|
455
447
|
passive: !0
|
|
456
|
-
}), window[O]("pointermove",
|
|
448
|
+
}), window[O]("pointermove", k, { passive: !0 }), window[O]("pointerup", M, { passive: !0 });
|
|
457
449
|
}
|
|
458
|
-
const q = new MutationObserver((
|
|
459
|
-
|
|
450
|
+
const q = new MutationObserver((y) => {
|
|
451
|
+
y.map((He) => He.oldValue).join().includes("height") && s();
|
|
460
452
|
});
|
|
461
|
-
function
|
|
453
|
+
function s() {
|
|
462
454
|
u.value.top = t.value?.getBoundingClientRect().top ?? 0, u.value.scrollHeight = t.value?.scrollHeight ?? 0, u.value.clientHeight = t.value?.clientHeight ?? 0;
|
|
463
455
|
}
|
|
464
456
|
function c() {
|
|
465
457
|
C(), setTimeout(() => {
|
|
466
|
-
|
|
458
|
+
x.value.clientHeight = l.value?.clientHeight ?? 0, V();
|
|
467
459
|
}, 150);
|
|
468
460
|
}
|
|
469
461
|
function S() {
|
|
@@ -475,7 +467,7 @@ function dt(e) {
|
|
|
475
467
|
0
|
|
476
468
|
), t.value?.classList.add("hide-scrollbar");
|
|
477
469
|
}
|
|
478
|
-
function
|
|
470
|
+
function _() {
|
|
479
471
|
t.value && l.value ? (S(), t.value.addEventListener("scroll", Q, {
|
|
480
472
|
passive: !0
|
|
481
473
|
}), K("add"), q.observe(t.value, {
|
|
@@ -483,7 +475,7 @@ function dt(e) {
|
|
|
483
475
|
attributeOldValue: !0,
|
|
484
476
|
attributeFilter: ["style"]
|
|
485
477
|
}), setTimeout(() => {
|
|
486
|
-
|
|
478
|
+
s();
|
|
487
479
|
}, 100), c()) : console.error("useScrollBar:", "\u521D\u59CB\u5316\u5931\u8D25!", { containerEl: t, sliderEl: l });
|
|
488
480
|
}
|
|
489
481
|
return P(v, () => {
|
|
@@ -491,13 +483,15 @@ function dt(e) {
|
|
|
491
483
|
}), {
|
|
492
484
|
isScrollEnd: o,
|
|
493
485
|
isDragSlider: b,
|
|
486
|
+
offsetTop: i,
|
|
487
|
+
scrollTop: v,
|
|
494
488
|
scrollable: z,
|
|
495
|
-
sliderPos:
|
|
496
|
-
init:
|
|
489
|
+
sliderPos: F,
|
|
490
|
+
init: _,
|
|
497
491
|
modifySliderEventListener: K
|
|
498
492
|
};
|
|
499
493
|
}
|
|
500
|
-
const vt = (e) => (
|
|
494
|
+
const vt = (e) => (Me("data-v-edec7292"), e = e(), Ve(), e), ft = /* @__PURE__ */ vt(() => /* @__PURE__ */ R("div", { class: "default-slider" }, null, -1)), pt = /* @__PURE__ */ j({
|
|
501
495
|
__name: "ScrollBar",
|
|
502
496
|
props: {
|
|
503
497
|
containerEl: null,
|
|
@@ -506,43 +500,52 @@ const vt = (e) => (ke("data-v-e4f66100"), e = e(), Ve(), e), ft = /* @__PURE__ *
|
|
|
506
500
|
performance: null
|
|
507
501
|
},
|
|
508
502
|
setup(e, { expose: t }) {
|
|
509
|
-
const l = e, n = !!
|
|
510
|
-
containerEl:
|
|
503
|
+
const l = e, n = !!Le().default, r = m(null), a = h(() => l.containerEl), o = dt({
|
|
504
|
+
containerEl: a,
|
|
511
505
|
sliderEl: r,
|
|
512
506
|
autoHeight: n ? l.autoHeight : !0,
|
|
513
507
|
performance: l.performance
|
|
514
|
-
}), { scrollable: d, isScrollEnd: g, sliderPos: f } = o, v = l.autoHide ? h(() => !g.value) : h(() => d.value);
|
|
515
|
-
|
|
508
|
+
}), { scrollable: d, isScrollEnd: g, sliderPos: f } = o, v = m(!1), p = l.autoHide ? h(() => v.value || !g.value) : h(() => d.value);
|
|
509
|
+
Z(() => {
|
|
516
510
|
ue(() => {
|
|
517
511
|
o.init();
|
|
518
512
|
});
|
|
519
513
|
}), ce(() => {
|
|
520
514
|
o.modifySliderEventListener("remove");
|
|
521
|
-
})
|
|
515
|
+
});
|
|
516
|
+
function i() {
|
|
517
|
+
v.value = !0;
|
|
518
|
+
}
|
|
519
|
+
function u() {
|
|
520
|
+
v.value = !1;
|
|
521
|
+
}
|
|
522
|
+
return t({ uScrollBarReturn: o }), (x, b) => (T(), de(ve, null, {
|
|
522
523
|
default: fe(() => [
|
|
523
|
-
|
|
524
|
+
Fe(R("div", {
|
|
524
525
|
ref_key: "sliderRef",
|
|
525
526
|
ref: r,
|
|
526
527
|
class: "slider-wrapper",
|
|
528
|
+
onMouseenter: i,
|
|
529
|
+
onMouseleave: u,
|
|
527
530
|
style: te(w(f))
|
|
528
531
|
}, [
|
|
529
|
-
ee(
|
|
532
|
+
ee(x.$slots, "default", {}, () => [
|
|
530
533
|
ft
|
|
531
534
|
], !0)
|
|
532
|
-
],
|
|
533
|
-
[De, w(
|
|
535
|
+
], 36), [
|
|
536
|
+
[De, w(p)]
|
|
534
537
|
])
|
|
535
538
|
]),
|
|
536
539
|
_: 3
|
|
537
540
|
}));
|
|
538
541
|
}
|
|
539
542
|
});
|
|
540
|
-
const
|
|
543
|
+
const xe = (e, t) => {
|
|
541
544
|
const l = e.__vccOpts || e;
|
|
542
545
|
for (const [n, r] of t)
|
|
543
546
|
l[n] = r;
|
|
544
547
|
return l;
|
|
545
|
-
}, Ot = /* @__PURE__ */
|
|
548
|
+
}, Ot = /* @__PURE__ */ xe(pt, [["__scopeId", "data-v-edec7292"]]), ht = { class: "virtualListWrapper" }, gt = {
|
|
546
549
|
inheritAttrs: !1
|
|
547
550
|
}, mt = /* @__PURE__ */ j({
|
|
548
551
|
...gt,
|
|
@@ -554,24 +557,24 @@ const Ee = (e, t) => {
|
|
|
554
557
|
},
|
|
555
558
|
emits: ["scrollEnd"],
|
|
556
559
|
setup(e, { expose: t, emit: l }) {
|
|
557
|
-
const n = e, r =
|
|
560
|
+
const n = e, r = at(ke(n, "data"), {
|
|
558
561
|
itemHeight: (v) => n.itemHeight(n.data[v]),
|
|
559
562
|
overscan: n.overscan,
|
|
560
563
|
scrollEndHook: () => {
|
|
561
564
|
l("scrollEnd");
|
|
562
565
|
}
|
|
563
|
-
}), { list:
|
|
566
|
+
}), { list: a, containerProps: o, wrapperProps: d, innerProps: g, getItemHeightData: f } = r;
|
|
564
567
|
return t({
|
|
565
568
|
vListReturn: r
|
|
566
569
|
}), (v, p) => (T(), B("div", ht, [
|
|
567
|
-
R("div",
|
|
570
|
+
R("div", Ke({
|
|
568
571
|
onScrollPassive: p[0] || (p[0] = (...i) => w(o).onScroll && w(o).onScroll(...i)),
|
|
569
572
|
ref: w(o).ref,
|
|
570
573
|
class: "virtualList"
|
|
571
574
|
}, v.$attrs), [
|
|
572
575
|
R("div", le(ne(w(d))), [
|
|
573
576
|
R("div", le(ne(w(g))), [
|
|
574
|
-
(T(!0), B(
|
|
577
|
+
(T(!0), B(je, null, ze(w(a), ({ index: i, data: u }) => (T(), B("div", {
|
|
575
578
|
key: i,
|
|
576
579
|
style: te({
|
|
577
580
|
height: `${w(f)(i).height}px`,
|
|
@@ -589,11 +592,11 @@ const Ee = (e, t) => {
|
|
|
589
592
|
]));
|
|
590
593
|
}
|
|
591
594
|
});
|
|
592
|
-
const
|
|
595
|
+
const Et = /* @__PURE__ */ xe(mt, [["__scopeId", "data-v-4ba97cce"]]);
|
|
593
596
|
export {
|
|
594
597
|
Ot as ScrollBar,
|
|
595
598
|
St as SvgIcon,
|
|
596
|
-
|
|
599
|
+
Et as VirtualList,
|
|
597
600
|
_e as allSelectedKey,
|
|
598
601
|
it as closeDialogKey,
|
|
599
602
|
wt as dialogController,
|
|
@@ -603,9 +606,9 @@ export {
|
|
|
603
606
|
ye as selectKey,
|
|
604
607
|
ge as toggleAllKey,
|
|
605
608
|
me as toggleKey,
|
|
606
|
-
|
|
609
|
+
Ee as unselectAllKey,
|
|
607
610
|
Se as unselectKey,
|
|
608
611
|
yt as useSelectable,
|
|
609
612
|
_t as useSelectableInjectors,
|
|
610
|
-
|
|
613
|
+
at as useVirtualList
|
|
611
614
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(h,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(h=typeof globalThis<"u"?globalThis:h||self,e(h.ui={},h.Vue))})(this,function(h,e){"use strict";var Z;const B=typeof window<"u";B&&((Z=window?.navigator)==null?void 0:Z.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function A(t){return typeof t=="function"?t():e.unref(t)}function ce(t,l){function n(...o){t(()=>l.apply(this,o),{fn:l,thisArg:this,args:o})}return n}function ue(t,l={}){let n,o;return s=>{const r=A(t),f=A(l.maxWait);if(n&&clearTimeout(n),r<=0||f!==void 0&&f<=0)return o&&(clearTimeout(o),o=null),s();f&&!o&&(o=setTimeout(()=>{n&&clearTimeout(n),o=null,s()},f)),n=setTimeout(()=>{o&&clearTimeout(o),o=null,s()},r)}}function de(t){return t}function fe(t){return e.getCurrentScope()?(e.onScopeDispose(t),!0):!1}function ee(t,l=200,n={}){return ce(ue(l,n),t)}function pe(t,l=!0){e.getCurrentInstance()?e.onMounted(t):l?t():e.nextTick(t)}function te(t){var l;const n=A(t);return(l=n?.$el)!=null?l:n}const he=B?window:void 0;B&&window.document,B&&window.navigator,B&&window.location;function me(t,l=!1){const n=e.ref(),o=()=>n.value=Boolean(t());return o(),pe(o,l),n}const $=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},L="__vueuse_ssr_handlers__";$[L]=$[L]||{},$[L];var le=Object.getOwnPropertySymbols,ge=Object.prototype.hasOwnProperty,ve=Object.prototype.propertyIsEnumerable,ye=(t,l)=>{var n={};for(var o in t)ge.call(t,o)&&l.indexOf(o)<0&&(n[o]=t[o]);if(t!=null&&le)for(var o of le(t))l.indexOf(o)<0&&ve.call(t,o)&&(n[o]=t[o]);return n};function be(t,l,n={}){const o=n,{window:i=he}=o,s=ye(o,["window"]);let r;const f=me(()=>i&&"ResizeObserver"in i),v=()=>{r&&(r.disconnect(),r=void 0)},m=e.watch(()=>te(t),g=>{v(),f.value&&i&&g&&(r=new ResizeObserver(l),r.observe(g,s))},{immediate:!0,flush:"post"}),p=()=>{v(),m()};return fe(p),{isSupported:f,stop:p}}function _e(t,l={width:0,height:0},n={}){const{box:o="content-box"}=n,i=e.ref(l.width),s=e.ref(l.height);return be(t,([r])=>{const f=o==="border-box"?r.borderBoxSize:o==="content-box"?r.contentBoxSize:r.devicePixelContentBoxSize;f?(i.value=f.reduce((v,{inlineSize:m})=>v+m,0),s.value=f.reduce((v,{blockSize:m})=>v+m,0)):(i.value=r.contentRect.width,s.value=r.contentRect.height)},n),e.watch(()=>te(t),r=>{i.value=r?l.width:0,s.value=r?l.height:0}),{width:i,height:s}}var ne;(function(t){t.UP="UP",t.RIGHT="RIGHT",t.DOWN="DOWN",t.LEFT="LEFT",t.NONE="NONE"})(ne||(ne={}));var Se=Object.defineProperty,oe=Object.getOwnPropertySymbols,we=Object.prototype.hasOwnProperty,Oe=Object.prototype.propertyIsEnumerable,re=(t,l,n)=>l in t?Se(t,l,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[l]=n,Ee=(t,l)=>{for(var n in l||(l={}))we.call(l,n)&&re(t,n,l[n]);if(oe)for(var n of oe(l))Oe.call(l,n)&&re(t,n,l[n]);return t};Ee({linear:de},{easeInSine:[.12,0,.39,0],easeOutSine:[.61,1,.88,1],easeInOutSine:[.37,0,.63,1],easeInQuad:[.11,0,.5,0],easeOutQuad:[.5,1,.89,1],easeInOutQuad:[.45,0,.55,1],easeInCubic:[.32,0,.67,0],easeOutCubic:[.33,1,.68,1],easeInOutCubic:[.65,0,.35,1],easeInQuart:[.5,0,.75,0],easeOutQuart:[.25,1,.5,1],easeInOutQuart:[.76,0,.24,1],easeInQuint:[.64,0,.78,0],easeOutQuint:[.22,1,.36,1],easeInOutQuint:[.83,0,.17,1],easeInExpo:[.7,0,.84,0],easeOutExpo:[.16,1,.3,1],easeInOutExpo:[.87,0,.13,1],easeInCirc:[.55,0,1,.45],easeOutCirc:[0,.55,.45,1],easeInOutCirc:[.85,0,.15,1],easeInBack:[.36,0,.66,-.56],easeOutBack:[.34,1.56,.64,1],easeInOutBack:[.68,-.6,.32,1.6]});function ie(t,l){const{scrollEndHook:n,itemHeight:o,overscan:i=5}=l,s=e.ref(),r=_e(s),f=e.ref(!0),v=ee(W,100);let m;const p=e.shallowRef(t),g=e.ref(0),c=e.ref({start:0,end:10});let u=0;const O=e.ref([]),b=e.computed(()=>{let{sum:a,height:d}={sum:0,height:0};return p.value.map((S,_)=>(typeof o=="number"?d=o:d=o(_),a+=d,{height:d,sum:a}))}),U=e.computed(()=>R(c.value.start)),E=e.computed(()=>typeof o=="number"?b.value.length*o:b.value[b.value.length-1]?.sum||0),H=e.computed(()=>{let a=O.value.length-i,d=Math.max(a-u,0);return O.value.slice(d,a)});e.onMounted(()=>{}),e.onUnmounted(()=>cancelAnimationFrame(m)),e.watch([r.width,r.height,p],([a,d])=>{(a||d)&&C()},{deep:!0}),e.watch(g,()=>{T(),v()});function T(){f.value=!1}function W(){f.value=!0,n?.()}function C(){cancelAnimationFrame(m),m=requestAnimationFrame(P)}function P(){if(s.value){g.value=s.value.scrollTop,u=I();let a=q(g.value),d=a+u+i;a=a-i,a=a<0?0:a,d=d>p.value.length?p.value.length:d,c.value={start:a,end:d},O.value=p.value.slice(a,d).map((S,_)=>({data:S,index:_+a}))}}function q(a){let d=Math.floor(b.value.length/16),S=-1,_=-1;for(let y=0;y<16;y++){if(b.value[d*y].sum>=a){S=Math.max(0,y-1);break}y===15&&(S=y)}S*=d;for(let y=S;y<b.value.length;y++)if(b.value[y].sum>=a){_=y;break}return Math.max(0,_)}function I(){let a=0,d=0,S=Y();for(let _=S;_<b.value.length&&(a++,d+=b.value[_].height,!(d>=r.height.value));_++);return a}function R(a){if(typeof o=="number")return a*o;let d=b.value[a];return d?d.sum-d.height:0}function x(a){return b.value[a]||{sum:0,height:0}}function Y(){let a=c.value.start;return a>=i&&(a+=i),a}function G(a){if(s.value){const d=x(a);s.value.scrollTop=d.sum-d.height,P()}}const J=e.computed(()=>({style:{width:"100%",height:`${E.value}px`,pointerEvents:f.value?void 0:"none"}})),k=e.computed(()=>({style:{transform:`translate3d(0, ${U.value}px, 0)`,"will-change":"transform"}})),X={overflowY:"auto"};return{list:O,visiableList:H,getItemHeightData:x,totalHeight:E,clientHeight:r.height,scrollTo:G,scrollTop:g,isScrollEnd:f,containerProps:{ref:s,onScroll:()=>{C()},style:X},wrapperProps:J,innerProps:k}}const j=Symbol(),K=Symbol(),V=Symbol(),F=Symbol(),D=Symbol(),N=Symbol(),M=Symbol(),z=Symbol(),Q=Symbol();function Be(){const{voidFn:t,boolFn:l,boolRef:n,arrayRef:o}={voidFn:u=>{},boolFn:u=>!1,boolRef:e.computed(()=>!1),arrayRef:e.computed(()=>[])},i=e.inject(F,o),s=e.inject(V,l),r=e.inject(z,n),f=e.inject(K,t),v=e.inject(j,t),m=e.inject(D,t),p=e.inject(N,t),g=e.inject(M,t),c=e.inject(Q,t);return{selected:i,isSelected:s,isAllSelected:r,toggle:f,toggleAll:v,select:m,selectAll:p,unselect:g,unselectAll:c}}function Ie(t,l){const n=e.ref({}),o=e.computed(()=>t.value.filter(c=>n.value[c[l]])),i=e.computed(()=>o.value.length!=0&&Object.keys(n.value).length==t.value.length);function s(){t.value.forEach(c=>{n.value[c[l]]=!0})}function r(){n.value={}}function f(c){c.forEach(u=>{n.value[u[l]]||(n.value[u[l]]=!0)})}function v(c){c.forEach(u=>{n.value[u[l]]&&delete n.value[u[l]]})}function m(c){return!!n.value[c[l]]}function p(c){c.forEach(u=>{m(u)?delete n.value[u[l]]:n.value[u[l]]=!0})}function g(){i.value?r():s()}return e.provide(j,g),e.provide(K,p),e.provide(V,m),e.provide(F,o),e.provide(D,f),e.provide(N,s),e.provide(M,v),e.provide(z,i),e.provide(Q,r),{selected:o,select:f,selectAll:s,unselect:v,unselectAll:r,toggle:p,toggleAll:g,isSelected:m,isAllSelected:i}}const ae=Symbol(),He=e.defineComponent({__name:"Dialog",props:{visiable:{type:Boolean,default:!1},closeOnClickOverlay:{type:Boolean,default:!0},dialogClass:{default:""}},emits:["update:visiable"],setup(t,{emit:l}){const n=t,o=()=>{n.closeOnClickOverlay&&l("update:visiable",!1)};return e.provide(ae,()=>l("update:visiable",!1)),(i,s)=>(e.openBlock(),e.createBlock(e.Transition,{name:"modal"},{default:e.withCtx(()=>[t.visiable?(e.openBlock(),e.createElementBlock("div",{key:0,onClick:o,class:"modal absolute inset-0 bottom-0 z-50 flex bg-stone-900 bg-opacity-50"},[e.createElementVNode("div",{onClick:s[0]||(s[0]=e.withModifiers(()=>{},["stop"])),class:e.normalizeClass(["dialog m-auto flex flex-col",t.dialogClass])},[e.renderSlot(i.$slots,"default")],2)])):e.createCommentVNode("",!0)]),_:3}))}});function Te(t){function l(n,o){const i=document.createElement("div"),s={setup(){return()=>e.h(He,{visiable:!0,"onUpdate:visiable":()=>{i?.remove()},...t},{default:()=>e.h(n,o)})}};return document.body.appendChild(i),e.render(e.h(s),i),{close:()=>i?.remove()}}return{create:l}}const Ce=["xlink:href","fill","color"],Pe=e.defineComponent({__name:"SvgIcon",props:{name:null,prefix:{default:"icon"},color:{default:"#FFF"},width:null,height:null},setup(t){const l=t,n=e.computed(()=>`#${l.prefix}-${l.name}`),o=e.computed(()=>({width:`${l.width}px`,height:`${l.height}px`,aspectRatio:l.width&&l.height?void 0:"1/1"}));return(i,s)=>(e.openBlock(),e.createElementBlock("svg",{"aria-hidden":"",style:e.normalizeStyle(e.unref(o))},[e.createElementVNode("use",{"xlink:href":e.unref(n),fill:t.color,color:t.color},null,8,Ce)],4))}});function Re(t){const{containerEl:l,sliderEl:n,autoHeight:o,performance:i={},maxHeightRatio:s=.9}=t,r=e.ref(!0),f=ee(R,100);let v,m="";const p=e.ref(0),g=e.ref(0),c=e.ref(0),u=e.ref({top:0,scrollTop:0,scrollHeight:0,clientHeight:0}),O=e.ref({clientHeight:0}),b=e.computed(()=>!!g.value),U=e.computed(()=>u.value.scrollHeight>u.value.clientHeight),E=e.computed(()=>u.value.clientHeight-O.value.clientHeight),H=e.computed(()=>u.value.scrollHeight-u.value.clientHeight),T=e.computed(()=>Math.max(u.value.clientHeight/u.value.scrollHeight,.05)),W=e.computed(()=>T.value>s?0:T.value*u.value.clientHeight),C=e.computed(()=>({willChange:"transform",transform:`translate3d(0,${c.value}px,0)`,height:o?`${W.value}px`:void 0}));function P(y){I(),g.value=y.clientY-n.value.getBoundingClientRect().top||1,m=getComputedStyle(l.value).scrollBehavior,m==="smooth"&&(l.value.style.scrollBehavior="unset")}function q(){l.value.style.scrollBehavior=m,g.value=0,f()}function I(){r.value=!1}function R(){b.value||(r.value=!0)}function x(y){if(!b.value)return;let w=y.clientY-u.value.top-g.value;w<0?c.value=0:w>=E.value?c.value=E.value:c.value=w,l.value.scrollTo({top:c.value/E.value*H.value})}function Y(){b.value||G()}function G(){cancelAnimationFrame(v),v=requestAnimationFrame(J)}function J(){l.value&&(p.value=i.scrollTop?.value??l.value.scrollTop,c.value=p.value/H.value*E.value)}function k(y){let w="addEventListener";y==="add"?w="addEventListener":w="removeEventListener",n.value?.[w]("pointerdown",P,{passive:!0}),window[w]("pointermove",x,{passive:!0}),window[w]("pointerup",q,{passive:!0})}const X=new MutationObserver(y=>{y.map(Ve=>Ve.oldValue).join().includes("height")&&a()});function a(){u.value.top=l.value?.getBoundingClientRect().top??0,u.value.scrollHeight=l.value?.scrollHeight??0,u.value.clientHeight=l.value?.clientHeight??0}function d(){I(),setTimeout(()=>{O.value.clientHeight=n.value?.clientHeight??0,R()},150)}function S(){document.styleSheets[0].insertRule(".hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }",0),document.styleSheets[0].insertRule(".hide-scrollbar::-webkit-scrollbar{ display: none }",0),l.value?.classList.add("hide-scrollbar")}function _(){l.value&&n.value?(S(),l.value.addEventListener("scroll",Y,{passive:!0}),k("add"),X.observe(l.value,{subtree:!0,attributeOldValue:!0,attributeFilter:["style"]}),setTimeout(()=>{a()},100),d()):console.error("useScrollBar:","\u521D\u59CB\u5316\u5931\u8D25!",{containerEl:l,sliderEl:n})}return e.watch(p,()=>{I(),f()}),{isScrollEnd:r,isDragSlider:b,scrollable:U,sliderPos:C,init:_,modifySliderEventListener:k}}const xe=(t=>(e.pushScopeId("data-v-e4f66100"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("div",{class:"default-slider"},null,-1)),ke=e.defineComponent({__name:"ScrollBar",props:{containerEl:null,autoHide:{type:Boolean},autoHeight:{type:Boolean},performance:null},setup(t,{expose:l}){const n=t,o=!!e.useSlots().default,i=e.ref(null),s=e.computed(()=>n.containerEl),r=Re({containerEl:s,sliderEl:i,autoHeight:o?n.autoHeight:!0,performance:n.performance}),{scrollable:f,isScrollEnd:v,sliderPos:m}=r,p=n.autoHide?e.computed(()=>!v.value):e.computed(()=>f.value);return e.onMounted(()=>{e.nextTick(()=>{r.init()})}),e.onUnmounted(()=>{r.modifySliderEventListener("remove")}),l({uScrollBarReturn:r}),(g,c)=>(e.openBlock(),e.createBlock(e.Transition,null,{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"sliderRef",ref:i,class:"slider-wrapper",style:e.normalizeStyle(e.unref(m))},[e.renderSlot(g.$slots,"default",{},()=>[xe],!0)],4),[[e.vShow,e.unref(p)]])]),_:3}))}}),Ne="",se=(t,l)=>{const n=t.__vccOpts||t;for(const[o,i]of l)n[o]=i;return n},Ae=se(ke,[["__scopeId","data-v-e4f66100"]]),$e={class:"virtualListWrapper"},Le={inheritAttrs:!1},je=e.defineComponent({...Le,__name:"VirtualList",props:{data:null,itemHeight:null,overscan:{default:10}},emits:["scrollEnd"],setup(t,{expose:l,emit:n}){const o=t,i=ie(e.toRef(o,"data"),{itemHeight:p=>o.itemHeight(o.data[p]),overscan:o.overscan,scrollEndHook:()=>{n("scrollEnd")}}),{list:s,containerProps:r,wrapperProps:f,innerProps:v,getItemHeightData:m}=i;return l({vListReturn:i}),(p,g)=>(e.openBlock(),e.createElementBlock("div",$e,[e.createElementVNode("div",e.mergeProps({onScrollPassive:g[0]||(g[0]=(...c)=>e.unref(r).onScroll&&e.unref(r).onScroll(...c)),ref:e.unref(r).ref,class:"virtualList"},p.$attrs),[e.createElementVNode("div",e.normalizeProps(e.guardReactiveProps(e.unref(f))),[e.createElementVNode("div",e.normalizeProps(e.guardReactiveProps(e.unref(v))),[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s),({index:c,data:u})=>(e.openBlock(),e.createElementBlock("div",{key:c,style:e.normalizeStyle({height:`${e.unref(m)(c).height}px`,display:"flex"})},[e.renderSlot(p.$slots,"default",{data:u,index:c},void 0,!0)],4))),128))],16)],16)],16)]))}}),Me="",Ke=se(je,[["__scopeId","data-v-4ba97cce"]]);h.ScrollBar=Ae,h.SvgIcon=Pe,h.VirtualList=Ke,h.allSelectedKey=F,h.closeDialogKey=ae,h.dialogController=Te,h.isAllSelectedKey=z,h.isSelectedKey=V,h.selectAllKey=N,h.selectKey=D,h.toggleAllKey=j,h.toggleKey=K,h.unselectAllKey=Q,h.unselectKey=M,h.useSelectable=Ie,h.useSelectableInjectors=Be,h.useVirtualList=ie,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
1
|
+
(function(h,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(h=typeof globalThis<"u"?globalThis:h||self,e(h.ui={},h.Vue))})(this,function(h,e){"use strict";var Z;const B=typeof window<"u";B&&((Z=window?.navigator)==null?void 0:Z.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function L(t){return typeof t=="function"?t():e.unref(t)}function ce(t,l){function n(...o){t(()=>l.apply(this,o),{fn:l,thisArg:this,args:o})}return n}function ue(t,l={}){let n,o;return s=>{const r=L(t),f=L(l.maxWait);if(n&&clearTimeout(n),r<=0||f!==void 0&&f<=0)return o&&(clearTimeout(o),o=null),s();f&&!o&&(o=setTimeout(()=>{n&&clearTimeout(n),o=null,s()},f)),n=setTimeout(()=>{o&&clearTimeout(o),o=null,s()},r)}}function de(t){return t}function fe(t){return e.getCurrentScope()?(e.onScopeDispose(t),!0):!1}function ee(t,l=200,n={}){return ce(ue(l,n),t)}function pe(t,l=!0){e.getCurrentInstance()?e.onMounted(t):l?t():e.nextTick(t)}function te(t){var l;const n=L(t);return(l=n?.$el)!=null?l:n}const he=B?window:void 0;B&&window.document,B&&window.navigator,B&&window.location;function me(t,l=!1){const n=e.ref(),o=()=>n.value=Boolean(t());return o(),pe(o,l),n}const $=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},j="__vueuse_ssr_handlers__";$[j]=$[j]||{},$[j];var le=Object.getOwnPropertySymbols,ge=Object.prototype.hasOwnProperty,ve=Object.prototype.propertyIsEnumerable,ye=(t,l)=>{var n={};for(var o in t)ge.call(t,o)&&l.indexOf(o)<0&&(n[o]=t[o]);if(t!=null&&le)for(var o of le(t))l.indexOf(o)<0&&ve.call(t,o)&&(n[o]=t[o]);return n};function be(t,l,n={}){const o=n,{window:i=he}=o,s=ye(o,["window"]);let r;const f=me(()=>i&&"ResizeObserver"in i),v=()=>{r&&(r.disconnect(),r=void 0)},m=e.watch(()=>te(t),g=>{v(),f.value&&i&&g&&(r=new ResizeObserver(l),r.observe(g,s))},{immediate:!0,flush:"post"}),p=()=>{v(),m()};return fe(p),{isSupported:f,stop:p}}function _e(t,l={width:0,height:0},n={}){const{box:o="content-box"}=n,i=e.ref(l.width),s=e.ref(l.height);return be(t,([r])=>{const f=o==="border-box"?r.borderBoxSize:o==="content-box"?r.contentBoxSize:r.devicePixelContentBoxSize;f?(i.value=f.reduce((v,{inlineSize:m})=>v+m,0),s.value=f.reduce((v,{blockSize:m})=>v+m,0)):(i.value=r.contentRect.width,s.value=r.contentRect.height)},n),e.watch(()=>te(t),r=>{i.value=r?l.width:0,s.value=r?l.height:0}),{width:i,height:s}}var ne;(function(t){t.UP="UP",t.RIGHT="RIGHT",t.DOWN="DOWN",t.LEFT="LEFT",t.NONE="NONE"})(ne||(ne={}));var Se=Object.defineProperty,oe=Object.getOwnPropertySymbols,we=Object.prototype.hasOwnProperty,Oe=Object.prototype.propertyIsEnumerable,re=(t,l,n)=>l in t?Se(t,l,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[l]=n,Ee=(t,l)=>{for(var n in l||(l={}))we.call(l,n)&&re(t,n,l[n]);if(oe)for(var n of oe(l))Oe.call(l,n)&&re(t,n,l[n]);return t};Ee({linear:de},{easeInSine:[.12,0,.39,0],easeOutSine:[.61,1,.88,1],easeInOutSine:[.37,0,.63,1],easeInQuad:[.11,0,.5,0],easeOutQuad:[.5,1,.89,1],easeInOutQuad:[.45,0,.55,1],easeInCubic:[.32,0,.67,0],easeOutCubic:[.33,1,.68,1],easeInOutCubic:[.65,0,.35,1],easeInQuart:[.5,0,.75,0],easeOutQuart:[.25,1,.5,1],easeInOutQuart:[.76,0,.24,1],easeInQuint:[.64,0,.78,0],easeOutQuint:[.22,1,.36,1],easeInOutQuint:[.83,0,.17,1],easeInExpo:[.7,0,.84,0],easeOutExpo:[.16,1,.3,1],easeInOutExpo:[.87,0,.13,1],easeInCirc:[.55,0,1,.45],easeOutCirc:[0,.55,.45,1],easeInOutCirc:[.85,0,.15,1],easeInBack:[.36,0,.66,-.56],easeOutBack:[.34,1.56,.64,1],easeInOutBack:[.68,-.6,.32,1.6]});function ie(t,l){const{scrollEndHook:n,itemHeight:o,overscan:i=5}=l,s=e.ref(null),r=_e(s),f=e.ref(!0),v=ee(q,100);let m;const p=e.shallowRef(t),g=e.ref(0),c=e.ref({start:0,end:10});let u=0;const O=e.ref([]),y=e.computed(()=>{let{sum:a,height:d}={sum:0,height:0};return p.value.map((S,b)=>(typeof o=="number"?d=o:d=o(b),a+=d,{height:d,sum:a}))}),W=e.computed(()=>x(c.value.start)),E=e.computed(()=>typeof o=="number"?y.value.length*o:y.value[y.value.length-1]?.sum||0),I=e.computed(()=>{let a=O.value.length-i,d=Math.max(a-u,0);return O.value.slice(d,a)});e.onMounted(()=>{}),e.onUnmounted(()=>cancelAnimationFrame(m)),e.watch([r.width,r.height,p],([a,d])=>{(a||d)&&C()},{deep:!0}),e.watch(g,()=>{T(),v()});function T(){f.value=!1}function q(){f.value=!0,n?.()}function C(){cancelAnimationFrame(m),m=requestAnimationFrame(P)}function P(){if(s.value){g.value=s.value.scrollTop,u=H();let a=R(g.value),d=a+u+i;a=a-i,a=a<0?0:a,d=d>p.value.length?p.value.length:d,c.value={start:a,end:d},O.value=p.value.slice(a,d).map((S,b)=>({data:S,index:b+a}))}}function R(a){let d=0,S=y.value.length-1,b=-1;for(;d<=S;){const _=Math.floor((d+S)/2);y.value[_].sum>=a?(b=_,S=_-1):d=_+1}return Math.max(0,b)}function H(){let a=0,d=0,S=Y();for(let b=S;b<y.value.length&&(a++,d+=y.value[b].height,!(d>=r.height.value));b++);return a}function x(a){if(typeof o=="number")return a*o;let d=y.value[a];return d?d.sum-d.height:0}function A(a){return y.value[a]||{sum:0,height:0}}function Y(){let a=c.value.start;return a>=i&&(a+=i),a}function G(a){if(s.value){const d=A(a);s.value.scrollTop=d.sum-d.height,P()}}const J=e.computed(()=>({style:{width:"100%",height:`${E.value}px`,pointerEvents:f.value?void 0:"none"}})),k=e.computed(()=>({style:{transform:`translate3d(0, ${W.value}px, 0)`,"will-change":"transform"}})),X={overflowY:"auto"};return{list:O,visiableList:I,getItemHeightData:A,getoffsetTopIndex:R,totalHeight:E,clientHeight:r.height,scrollTo:G,scrollTop:g,isScrollEnd:f,containerProps:{ref:s,onScroll:()=>{C()},style:X},wrapperProps:J,innerProps:k}}const K=Symbol(),V=Symbol(),F=Symbol(),D=Symbol(),M=Symbol(),N=Symbol(),z=Symbol(),Q=Symbol(),U=Symbol();function Be(){const{voidFn:t,boolFn:l,boolRef:n,arrayRef:o}={voidFn:u=>{},boolFn:u=>!1,boolRef:e.computed(()=>!1),arrayRef:e.computed(()=>[])},i=e.inject(D,o),s=e.inject(F,l),r=e.inject(Q,n),f=e.inject(V,t),v=e.inject(K,t),m=e.inject(M,t),p=e.inject(N,t),g=e.inject(z,t),c=e.inject(U,t);return{selected:i,isSelected:s,isAllSelected:r,toggle:f,toggleAll:v,select:m,selectAll:p,unselect:g,unselectAll:c}}function He(t,l){const n=e.ref({}),o=e.computed(()=>t.value.filter(c=>n.value[c[l]])),i=e.computed(()=>o.value.length!=0&&Object.keys(n.value).length==t.value.length);function s(){t.value.forEach(c=>{n.value[c[l]]=!0})}function r(){n.value={}}function f(c){c.forEach(u=>{n.value[u[l]]||(n.value[u[l]]=!0)})}function v(c){c.forEach(u=>{n.value[u[l]]&&delete n.value[u[l]]})}function m(c){return!!n.value[c[l]]}function p(c){c.forEach(u=>{m(u)?delete n.value[u[l]]:n.value[u[l]]=!0})}function g(){i.value?r():s()}return e.provide(K,g),e.provide(V,p),e.provide(F,m),e.provide(D,o),e.provide(M,f),e.provide(N,s),e.provide(z,v),e.provide(Q,i),e.provide(U,r),{selected:o,select:f,selectAll:s,unselect:v,unselectAll:r,toggle:p,toggleAll:g,isSelected:m,isAllSelected:i}}const ae=Symbol(),Ie=e.defineComponent({__name:"Dialog",props:{visiable:{type:Boolean,default:!1},closeOnClickOverlay:{type:Boolean,default:!0},dialogClass:{default:""}},emits:["update:visiable"],setup(t,{emit:l}){const n=t,o=()=>{n.closeOnClickOverlay&&l("update:visiable",!1)};return e.provide(ae,()=>l("update:visiable",!1)),(i,s)=>(e.openBlock(),e.createBlock(e.Transition,{name:"modal"},{default:e.withCtx(()=>[t.visiable?(e.openBlock(),e.createElementBlock("div",{key:0,onClick:o,class:"modal absolute inset-0 bottom-0 z-50 flex bg-stone-900 bg-opacity-50"},[e.createElementVNode("div",{onClick:s[0]||(s[0]=e.withModifiers(()=>{},["stop"])),class:e.normalizeClass(["dialog m-auto flex flex-col",t.dialogClass])},[e.renderSlot(i.$slots,"default")],2)])):e.createCommentVNode("",!0)]),_:3}))}});function Te(t){function l(n,o){const i=document.createElement("div"),s={setup(){return()=>e.h(Ie,{visiable:!0,"onUpdate:visiable":()=>{i?.remove()},...t},{default:()=>e.h(n,o)})}};return document.body.appendChild(i),e.render(e.h(s),i),{close:()=>i?.remove()}}return{create:l}}const Ce=["xlink:href","fill","color"],Pe=e.defineComponent({__name:"SvgIcon",props:{name:null,prefix:{default:"icon"},color:{default:"#FFF"},width:null,height:null},setup(t){const l=t,n=e.computed(()=>`#${l.prefix}-${l.name}`),o=e.computed(()=>({width:`${l.width}px`,height:`${l.height}px`,aspectRatio:l.width&&l.height?void 0:"1/1"}));return(i,s)=>(e.openBlock(),e.createElementBlock("svg",{"aria-hidden":"",style:e.normalizeStyle(e.unref(o))},[e.createElementVNode("use",{"xlink:href":e.unref(n),fill:t.color,color:t.color},null,8,Ce)],4))}});function Re(t){const{containerEl:l,sliderEl:n,autoHeight:o,performance:i={},maxHeightRatio:s=.9}=t,r=e.ref(!0),f=ee(x,100);let v,m="";const p=e.ref(0),g=e.ref(0),c=e.ref(0),u=e.ref({top:0,scrollTop:0,scrollHeight:0,clientHeight:0}),O=e.ref({clientHeight:0}),y=e.computed(()=>!!g.value),W=e.computed(()=>u.value.scrollHeight>u.value.clientHeight),E=e.computed(()=>u.value.clientHeight-O.value.clientHeight),I=e.computed(()=>u.value.scrollHeight-u.value.clientHeight),T=e.computed(()=>Math.max(u.value.clientHeight/u.value.scrollHeight,.05)),q=e.computed(()=>T.value>s?0:T.value*u.value.clientHeight),C=e.computed(()=>({willChange:"transform",transform:`translate3d(0,${c.value}px,0)`,height:o?`${q.value}px`:void 0}));function P(_){H(),g.value=_.clientY-n.value.getBoundingClientRect().top||1,m=getComputedStyle(l.value).scrollBehavior,m==="smooth"&&(l.value.style.scrollBehavior="unset")}function R(){l.value.style.scrollBehavior=m,g.value=0,f()}function H(){r.value=!1}function x(){y.value||(r.value=!0)}function A(_){if(!y.value)return;let w=_.clientY-u.value.top-g.value;w<0?c.value=0:w>=E.value?c.value=E.value:c.value=w,l.value.scrollTo({top:c.value/E.value*I.value})}function Y(){y.value||G()}function G(){cancelAnimationFrame(v),v=requestAnimationFrame(J)}function J(){l.value&&(p.value=i.scrollTop?.value??l.value.scrollTop,c.value=p.value/I.value*E.value)}function k(_){let w="addEventListener";_==="add"?w="addEventListener":w="removeEventListener",n.value?.[w]("pointerdown",P,{passive:!0}),window[w]("pointermove",A,{passive:!0}),window[w]("pointerup",R,{passive:!0})}const X=new MutationObserver(_=>{_.map(Ve=>Ve.oldValue).join().includes("height")&&a()});function a(){u.value.top=l.value?.getBoundingClientRect().top??0,u.value.scrollHeight=l.value?.scrollHeight??0,u.value.clientHeight=l.value?.clientHeight??0}function d(){H(),setTimeout(()=>{O.value.clientHeight=n.value?.clientHeight??0,x()},150)}function S(){document.styleSheets[0].insertRule(".hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }",0),document.styleSheets[0].insertRule(".hide-scrollbar::-webkit-scrollbar{ display: none }",0),l.value?.classList.add("hide-scrollbar")}function b(){l.value&&n.value?(S(),l.value.addEventListener("scroll",Y,{passive:!0}),k("add"),X.observe(l.value,{subtree:!0,attributeOldValue:!0,attributeFilter:["style"]}),setTimeout(()=>{a()},100),d()):console.error("useScrollBar:","\u521D\u59CB\u5316\u5931\u8D25!",{containerEl:l,sliderEl:n})}return e.watch(p,()=>{H(),f()}),{isScrollEnd:r,isDragSlider:y,offsetTop:c,scrollTop:p,scrollable:W,sliderPos:C,init:b,modifySliderEventListener:k}}const xe=(t=>(e.pushScopeId("data-v-edec7292"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("div",{class:"default-slider"},null,-1)),Ae=e.defineComponent({__name:"ScrollBar",props:{containerEl:null,autoHide:{type:Boolean},autoHeight:{type:Boolean},performance:null},setup(t,{expose:l}){const n=t,o=!!e.useSlots().default,i=e.ref(null),s=e.computed(()=>n.containerEl),r=Re({containerEl:s,sliderEl:i,autoHeight:o?n.autoHeight:!0,performance:n.performance}),{scrollable:f,isScrollEnd:v,sliderPos:m}=r,p=e.ref(!1),g=n.autoHide?e.computed(()=>p.value||!v.value):e.computed(()=>f.value);e.onMounted(()=>{e.nextTick(()=>{r.init()})}),e.onUnmounted(()=>{r.modifySliderEventListener("remove")});function c(){p.value=!0}function u(){p.value=!1}return l({uScrollBarReturn:r}),(O,y)=>(e.openBlock(),e.createBlock(e.Transition,null,{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"sliderRef",ref:i,class:"slider-wrapper",onMouseenter:c,onMouseleave:u,style:e.normalizeStyle(e.unref(m))},[e.renderSlot(O.$slots,"default",{},()=>[xe],!0)],36),[[e.vShow,e.unref(g)]])]),_:3}))}}),Me="",se=(t,l)=>{const n=t.__vccOpts||t;for(const[o,i]of l)n[o]=i;return n},ke=se(Ae,[["__scopeId","data-v-edec7292"]]),Le={class:"virtualListWrapper"},$e={inheritAttrs:!1},je=e.defineComponent({...$e,__name:"VirtualList",props:{data:null,itemHeight:null,overscan:{default:10}},emits:["scrollEnd"],setup(t,{expose:l,emit:n}){const o=t,i=ie(e.toRef(o,"data"),{itemHeight:p=>o.itemHeight(o.data[p]),overscan:o.overscan,scrollEndHook:()=>{n("scrollEnd")}}),{list:s,containerProps:r,wrapperProps:f,innerProps:v,getItemHeightData:m}=i;return l({vListReturn:i}),(p,g)=>(e.openBlock(),e.createElementBlock("div",Le,[e.createElementVNode("div",e.mergeProps({onScrollPassive:g[0]||(g[0]=(...c)=>e.unref(r).onScroll&&e.unref(r).onScroll(...c)),ref:e.unref(r).ref,class:"virtualList"},p.$attrs),[e.createElementVNode("div",e.normalizeProps(e.guardReactiveProps(e.unref(f))),[e.createElementVNode("div",e.normalizeProps(e.guardReactiveProps(e.unref(v))),[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s),({index:c,data:u})=>(e.openBlock(),e.createElementBlock("div",{key:c,style:e.normalizeStyle({height:`${e.unref(m)(c).height}px`,display:"flex"})},[e.renderSlot(p.$slots,"default",{data:u,index:c},void 0,!0)],4))),128))],16)],16)],16)]))}}),Ne="",Ke=se(je,[["__scopeId","data-v-4ba97cce"]]);h.ScrollBar=ke,h.SvgIcon=Pe,h.VirtualList=Ke,h.allSelectedKey=D,h.closeDialogKey=ae,h.dialogController=Te,h.isAllSelectedKey=Q,h.isSelectedKey=F,h.selectAllKey=N,h.selectKey=M,h.toggleAllKey=K,h.toggleKey=V,h.unselectAllKey=U,h.unselectKey=z,h.useSelectable=He,h.useSelectableInjectors=Be,h.useVirtualList=ie,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.v-leave-active[data-v-
|
|
1
|
+
.v-leave-active[data-v-edec7292]{transition:all .15s ease-out;transition-delay:.9s}.v-leave-to[data-v-edec7292]{opacity:0}.slider-wrapper[data-v-edec7292]{z-index:100;position:absolute;right:0;touch-action:none}.default-slider[data-v-edec7292]{width:6px;height:100%;background-color:#0003;border-radius:3px;margin-right:3px}.virtualList[data-v-4ba97cce]{width:100%;height:100%;position:absolute;overflow-y:auto;scroll-behavior:smooth;user-select:none}.virtualListWrapper[data-v-4ba97cce]{width:100%;height:100%;position:relative}
|
|
@@ -29,6 +29,8 @@ declare const _default: {
|
|
|
29
29
|
uScrollBarReturn: {
|
|
30
30
|
isScrollEnd: Ref<boolean>;
|
|
31
31
|
isDragSlider: import("vue").ComputedRef<boolean>;
|
|
32
|
+
offsetTop: Ref<number>;
|
|
33
|
+
scrollTop: Ref<number>;
|
|
32
34
|
scrollable: import("vue").ComputedRef<boolean>;
|
|
33
35
|
sliderPos: import("vue").ComputedRef<import("vue").CSSProperties>;
|
|
34
36
|
init: () => void;
|
|
@@ -58,6 +60,8 @@ declare const _default: {
|
|
|
58
60
|
uScrollBarReturn: {
|
|
59
61
|
isScrollEnd: Ref<boolean>;
|
|
60
62
|
isDragSlider: import("vue").ComputedRef<boolean>;
|
|
63
|
+
offsetTop: Ref<number>;
|
|
64
|
+
scrollTop: Ref<number>;
|
|
61
65
|
scrollable: import("vue").ComputedRef<boolean>;
|
|
62
66
|
sliderPos: import("vue").ComputedRef<import("vue").CSSProperties>;
|
|
63
67
|
init: () => void;
|
|
@@ -71,6 +75,8 @@ declare const _default: {
|
|
|
71
75
|
uScrollBarReturn: {
|
|
72
76
|
isScrollEnd: Ref<boolean>;
|
|
73
77
|
isDragSlider: import("vue").ComputedRef<boolean>;
|
|
78
|
+
offsetTop: Ref<number>;
|
|
79
|
+
scrollTop: Ref<number>;
|
|
74
80
|
scrollable: import("vue").ComputedRef<boolean>;
|
|
75
81
|
sliderPos: import("vue").ComputedRef<import("vue").CSSProperties>;
|
|
76
82
|
init: () => void;
|
|
@@ -3,6 +3,8 @@ import type { ScrollBarOptions } from "./type";
|
|
|
3
3
|
export declare function useScrollBar(options: ScrollBarOptions): {
|
|
4
4
|
isScrollEnd: import("vue").Ref<boolean>;
|
|
5
5
|
isDragSlider: import("vue").ComputedRef<boolean>;
|
|
6
|
+
offsetTop: import("vue").Ref<number>;
|
|
7
|
+
scrollTop: import("vue").Ref<number>;
|
|
6
8
|
scrollable: import("vue").ComputedRef<boolean>;
|
|
7
9
|
sliderPos: import("vue").ComputedRef<CSSProperties>;
|
|
8
10
|
init: () => void;
|
|
@@ -35,7 +35,34 @@ declare const _default: {
|
|
|
35
35
|
}>>> & {
|
|
36
36
|
onScrollEnd?: (() => any) | undefined;
|
|
37
37
|
}, {
|
|
38
|
-
vListReturn:
|
|
38
|
+
vListReturn: {
|
|
39
|
+
list: import("vue").Ref<import("./index").UseVirtualListItem<any>[]>;
|
|
40
|
+
visiableList: import("vue").ComputedRef<import("./index").UseVirtualListItem<any>[]>;
|
|
41
|
+
getItemHeightData: (index: number) => {
|
|
42
|
+
height: number;
|
|
43
|
+
sum: number;
|
|
44
|
+
};
|
|
45
|
+
getoffsetTopIndex: (scrollTop: number) => number;
|
|
46
|
+
totalHeight: import("vue").ComputedRef<number>;
|
|
47
|
+
clientHeight: import("vue").Ref<number>;
|
|
48
|
+
scrollTo: (index: number) => void;
|
|
49
|
+
scrollTop: import("vue").Ref<number>;
|
|
50
|
+
isScrollEnd: import("vue").Ref<boolean>;
|
|
51
|
+
containerProps: {
|
|
52
|
+
ref: import("vue").Ref<HTMLElement | null>;
|
|
53
|
+
onScroll: () => void;
|
|
54
|
+
style: import("vue").CSSProperties;
|
|
55
|
+
};
|
|
56
|
+
wrapperProps: import("vue").ComputedRef<{
|
|
57
|
+
style: import("vue").CSSProperties;
|
|
58
|
+
}>;
|
|
59
|
+
innerProps: import("vue").ComputedRef<{
|
|
60
|
+
style: {
|
|
61
|
+
transform: string;
|
|
62
|
+
"will-change": string;
|
|
63
|
+
};
|
|
64
|
+
}>;
|
|
65
|
+
};
|
|
39
66
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
40
67
|
scrollEnd: () => void;
|
|
41
68
|
}, string, {
|
|
@@ -69,7 +96,34 @@ declare const _default: {
|
|
|
69
96
|
}>>> & {
|
|
70
97
|
onScrollEnd?: (() => any) | undefined;
|
|
71
98
|
} & import("vue").ShallowUnwrapRef<{
|
|
72
|
-
vListReturn:
|
|
99
|
+
vListReturn: {
|
|
100
|
+
list: import("vue").Ref<import("./index").UseVirtualListItem<any>[]>;
|
|
101
|
+
visiableList: import("vue").ComputedRef<import("./index").UseVirtualListItem<any>[]>;
|
|
102
|
+
getItemHeightData: (index: number) => {
|
|
103
|
+
height: number;
|
|
104
|
+
sum: number;
|
|
105
|
+
};
|
|
106
|
+
getoffsetTopIndex: (scrollTop: number) => number;
|
|
107
|
+
totalHeight: import("vue").ComputedRef<number>;
|
|
108
|
+
clientHeight: import("vue").Ref<number>;
|
|
109
|
+
scrollTo: (index: number) => void;
|
|
110
|
+
scrollTop: import("vue").Ref<number>;
|
|
111
|
+
isScrollEnd: import("vue").Ref<boolean>;
|
|
112
|
+
containerProps: {
|
|
113
|
+
ref: import("vue").Ref<HTMLElement | null>;
|
|
114
|
+
onScroll: () => void;
|
|
115
|
+
style: import("vue").CSSProperties;
|
|
116
|
+
};
|
|
117
|
+
wrapperProps: import("vue").ComputedRef<{
|
|
118
|
+
style: import("vue").CSSProperties;
|
|
119
|
+
}>;
|
|
120
|
+
innerProps: import("vue").ComputedRef<{
|
|
121
|
+
style: {
|
|
122
|
+
transform: string;
|
|
123
|
+
"will-change": string;
|
|
124
|
+
};
|
|
125
|
+
}>;
|
|
126
|
+
};
|
|
73
127
|
}> & {} & import("vue").ComponentCustomProperties;
|
|
74
128
|
__isFragment?: undefined;
|
|
75
129
|
__isTeleport?: undefined;
|
|
@@ -83,7 +137,34 @@ declare const _default: {
|
|
|
83
137
|
}>>> & {
|
|
84
138
|
onScrollEnd?: (() => any) | undefined;
|
|
85
139
|
}, {
|
|
86
|
-
vListReturn:
|
|
140
|
+
vListReturn: {
|
|
141
|
+
list: import("vue").Ref<import("./index").UseVirtualListItem<any>[]>;
|
|
142
|
+
visiableList: import("vue").ComputedRef<import("./index").UseVirtualListItem<any>[]>;
|
|
143
|
+
getItemHeightData: (index: number) => {
|
|
144
|
+
height: number;
|
|
145
|
+
sum: number;
|
|
146
|
+
};
|
|
147
|
+
getoffsetTopIndex: (scrollTop: number) => number;
|
|
148
|
+
totalHeight: import("vue").ComputedRef<number>;
|
|
149
|
+
clientHeight: import("vue").Ref<number>;
|
|
150
|
+
scrollTo: (index: number) => void;
|
|
151
|
+
scrollTop: import("vue").Ref<number>;
|
|
152
|
+
isScrollEnd: import("vue").Ref<boolean>;
|
|
153
|
+
containerProps: {
|
|
154
|
+
ref: import("vue").Ref<HTMLElement | null>;
|
|
155
|
+
onScroll: () => void;
|
|
156
|
+
style: import("vue").CSSProperties;
|
|
157
|
+
};
|
|
158
|
+
wrapperProps: import("vue").ComputedRef<{
|
|
159
|
+
style: import("vue").CSSProperties;
|
|
160
|
+
}>;
|
|
161
|
+
innerProps: import("vue").ComputedRef<{
|
|
162
|
+
style: {
|
|
163
|
+
transform: string;
|
|
164
|
+
"will-change": string;
|
|
165
|
+
};
|
|
166
|
+
}>;
|
|
167
|
+
};
|
|
87
168
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
88
169
|
scrollEnd: () => void;
|
|
89
170
|
}, string, {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { CSSProperties, type Ref } from "vue";
|
|
2
2
|
export interface UseVirtualListOptions {
|
|
3
3
|
/**
|
|
4
4
|
* item height, accept a pixel value or a function that returns the height
|
|
@@ -18,34 +18,32 @@ export interface UseVirtualListItem<T> {
|
|
|
18
18
|
data: T;
|
|
19
19
|
index: number;
|
|
20
20
|
}
|
|
21
|
-
export
|
|
21
|
+
export declare function useVirtualList<T = any>(list: Ref<T[]>, options: UseVirtualListOptions): {
|
|
22
22
|
list: Ref<UseVirtualListItem<T>[]>;
|
|
23
|
-
visiableList: ComputedRef<UseVirtualListItem<T>[]>;
|
|
23
|
+
visiableList: import("vue").ComputedRef<UseVirtualListItem<T>[]>;
|
|
24
24
|
getItemHeightData: (index: number) => {
|
|
25
|
-
sum: number;
|
|
26
25
|
height: number;
|
|
26
|
+
sum: number;
|
|
27
27
|
};
|
|
28
|
-
|
|
29
|
-
totalHeight:
|
|
28
|
+
getoffsetTopIndex: (scrollTop: number) => number;
|
|
29
|
+
totalHeight: import("vue").ComputedRef<number>;
|
|
30
30
|
clientHeight: Ref<number>;
|
|
31
|
+
scrollTo: (index: number) => void;
|
|
31
32
|
scrollTop: Ref<number>;
|
|
32
33
|
isScrollEnd: Ref<boolean>;
|
|
33
34
|
containerProps: {
|
|
34
35
|
ref: Ref<HTMLElement | null>;
|
|
35
|
-
onScroll: (
|
|
36
|
-
style:
|
|
36
|
+
onScroll: () => void;
|
|
37
|
+
style: CSSProperties;
|
|
37
38
|
};
|
|
38
|
-
wrapperProps: ComputedRef<{
|
|
39
|
-
style:
|
|
40
|
-
width: string;
|
|
41
|
-
height: string;
|
|
42
|
-
};
|
|
39
|
+
wrapperProps: import("vue").ComputedRef<{
|
|
40
|
+
style: CSSProperties;
|
|
43
41
|
}>;
|
|
44
|
-
innerProps: ComputedRef<{
|
|
42
|
+
innerProps: import("vue").ComputedRef<{
|
|
45
43
|
style: {
|
|
46
44
|
transform: string;
|
|
47
45
|
"will-change": string;
|
|
48
46
|
};
|
|
49
47
|
}>;
|
|
50
|
-
}
|
|
51
|
-
export declare
|
|
48
|
+
};
|
|
49
|
+
export declare type UseVirtualListReturn<T> = ReturnType<typeof useVirtualList<T>>;
|