@king-one/antdv 1.0.78 → 1.0.79
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/CHANGELOG.md +6 -0
- package/dist/es/components/scroll-bar/src/scroll-bar.mjs +137 -131
- package/dist/es/components/scroll-bar/src/types.mjs +10 -2
- package/dist/lib/components/scroll-bar/src/scroll-bar.js +1 -1
- package/dist/lib/components/scroll-bar/src/types.js +1 -1
- package/dist/theme-chalk/icon.css +1 -1
- package/dist/theme-chalk/index.css +1 -1
- package/dist/theme-chalk/scroll-bar.css +1 -1
- package/dist/types/components/scroll-bar/index.d.ts +34 -16
- package/dist/types/components/scroll-bar/src/scroll-bar.d.ts +34 -16
- package/dist/types/components/scroll-bar/src/types.d.ts +15 -7
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,196 +1,196 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as ie, createVNode as R, mergeProps as ue, onMounted as fe, ref as a, computed as c } from "vue";
|
|
2
2
|
import { useResizeObserver as q } from "@vueuse/core";
|
|
3
3
|
import { off as W, on as Y } from "evtd";
|
|
4
|
-
import { defaultNamespace as
|
|
4
|
+
import { defaultNamespace as f } from "../../../hooks/use-namespace/index.mjs";
|
|
5
5
|
import { scrollbarProps as de } from "./types.mjs";
|
|
6
|
-
const
|
|
6
|
+
const ge = /* @__PURE__ */ ie({
|
|
7
7
|
name: "KScrollbar",
|
|
8
8
|
props: de,
|
|
9
9
|
inheritAttrs: !1,
|
|
10
10
|
setup(l) {
|
|
11
11
|
fe(() => {
|
|
12
|
-
l.container ||
|
|
12
|
+
l.container || v();
|
|
13
13
|
});
|
|
14
|
-
const
|
|
14
|
+
const S = a(null), i = a(null), p = a(null), b = a(null), h = a(null), m = a(null), u = a(null), d = a(null), z = a(null), T = a(null), F = c(() => {
|
|
15
15
|
var e;
|
|
16
|
-
return ((e = l.content) == null ? void 0 : e.call(l)) ||
|
|
16
|
+
return ((e = l.content) == null ? void 0 : e.call(l)) || S.value;
|
|
17
17
|
}), w = c(() => {
|
|
18
18
|
var e;
|
|
19
|
-
return ((e = l.container) == null ? void 0 : e.call(l)) ||
|
|
20
|
-
}),
|
|
21
|
-
q(
|
|
22
|
-
|
|
23
|
-
}), q(
|
|
24
|
-
|
|
19
|
+
return ((e = l.container) == null ? void 0 : e.call(l)) || i.value;
|
|
20
|
+
}), C = a(0), $ = a(0);
|
|
21
|
+
q(S, () => {
|
|
22
|
+
v();
|
|
23
|
+
}), q(i, () => {
|
|
24
|
+
v();
|
|
25
25
|
});
|
|
26
26
|
const G = c(() => {
|
|
27
27
|
const {
|
|
28
28
|
value: e
|
|
29
|
-
} =
|
|
30
|
-
value:
|
|
31
|
-
} =
|
|
32
|
-
return e !== null &&
|
|
29
|
+
} = u, {
|
|
30
|
+
value: t
|
|
31
|
+
} = h;
|
|
32
|
+
return e !== null && t !== null && t > e;
|
|
33
33
|
}), B = a(!1), J = c(() => {
|
|
34
34
|
const {
|
|
35
35
|
trigger: e
|
|
36
36
|
} = l;
|
|
37
37
|
return e !== "none" && (e === "always" || B.value);
|
|
38
|
-
}),
|
|
38
|
+
}), D = c(() => {
|
|
39
39
|
const {
|
|
40
40
|
value: e
|
|
41
|
-
} =
|
|
42
|
-
value: n
|
|
43
|
-
} = d, {
|
|
41
|
+
} = u, {
|
|
44
42
|
value: t
|
|
45
|
-
} =
|
|
46
|
-
|
|
47
|
-
|
|
43
|
+
} = h, {
|
|
44
|
+
value: n
|
|
45
|
+
} = z;
|
|
46
|
+
return e === null || t === null || n === null ? 0 : Math.min(e, n * e / t + 5 * 1.5);
|
|
47
|
+
}), Q = c(() => `${D.value}px`), Z = c(() => {
|
|
48
48
|
const {
|
|
49
49
|
value: e
|
|
50
|
-
} =
|
|
51
|
-
value: n
|
|
52
|
-
} = D, {
|
|
50
|
+
} = u, {
|
|
53
51
|
value: t
|
|
54
|
-
} =
|
|
52
|
+
} = C, {
|
|
53
|
+
value: n
|
|
54
|
+
} = h, {
|
|
55
55
|
value: r
|
|
56
|
-
} =
|
|
57
|
-
if (e === null ||
|
|
56
|
+
} = z;
|
|
57
|
+
if (e === null || n === null || r === null)
|
|
58
58
|
return 0;
|
|
59
59
|
{
|
|
60
|
-
const o =
|
|
61
|
-
return o ?
|
|
60
|
+
const o = n - e;
|
|
61
|
+
return o ? t / o * (r - D.value) : 0;
|
|
62
62
|
}
|
|
63
63
|
}), ee = c(() => `${Z.value}px`);
|
|
64
|
-
let y = !1, N = 0,
|
|
65
|
-
const
|
|
64
|
+
let y = !1, N = 0, O = 0, L, X;
|
|
65
|
+
const U = (e) => {
|
|
66
66
|
if (!y) return;
|
|
67
67
|
X !== void 0 && window.clearTimeout(X), L !== void 0 && window.clearTimeout(L);
|
|
68
68
|
const {
|
|
69
|
-
value: n
|
|
70
|
-
} = s, {
|
|
71
69
|
value: t
|
|
72
|
-
} =
|
|
70
|
+
} = u, {
|
|
71
|
+
value: n
|
|
72
|
+
} = h, {
|
|
73
73
|
value: r
|
|
74
|
-
} =
|
|
75
|
-
if (
|
|
76
|
-
const
|
|
77
|
-
let
|
|
78
|
-
|
|
74
|
+
} = D;
|
|
75
|
+
if (t === null || n === null) return;
|
|
76
|
+
const g = (e.clientY - O) * (n - t) / (t - r), E = n - t;
|
|
77
|
+
let s = N + g;
|
|
78
|
+
s = Math.min(E, s), s = Math.max(s, 0);
|
|
79
79
|
const {
|
|
80
|
-
value:
|
|
80
|
+
value: M
|
|
81
81
|
} = w;
|
|
82
|
-
|
|
83
|
-
},
|
|
84
|
-
e.preventDefault(), e.stopPropagation(), W("mousemove", window,
|
|
85
|
-
},
|
|
86
|
-
e.preventDefault(), e.stopPropagation(), Y("mousemove", window,
|
|
82
|
+
M && (M.scrollTop = s);
|
|
83
|
+
}, _ = (e) => {
|
|
84
|
+
e.preventDefault(), e.stopPropagation(), W("mousemove", window, U, !0), W("mouseup", window, _, !0), y = !1, B.value = !1, v();
|
|
85
|
+
}, te = (e) => {
|
|
86
|
+
e.preventDefault(), e.stopPropagation(), Y("mousemove", window, U, !0), Y("mouseup", window, _, !0), N = C.value, O = e.clientY, y = !0, B.value = !0;
|
|
87
87
|
};
|
|
88
|
-
function
|
|
88
|
+
function ne(e) {
|
|
89
89
|
const {
|
|
90
|
-
onScroll:
|
|
90
|
+
onScroll: t
|
|
91
91
|
} = l;
|
|
92
|
-
|
|
92
|
+
t && t(e), j();
|
|
93
93
|
}
|
|
94
|
-
const
|
|
94
|
+
const V = c(() => {
|
|
95
95
|
const {
|
|
96
96
|
value: e
|
|
97
|
-
} =
|
|
98
|
-
value:
|
|
99
|
-
} =
|
|
100
|
-
return e !== null &&
|
|
97
|
+
} = d, {
|
|
98
|
+
value: t
|
|
99
|
+
} = m;
|
|
100
|
+
return e !== null && t !== null && t > e;
|
|
101
101
|
}), x = a(!1), le = c(() => {
|
|
102
102
|
const {
|
|
103
103
|
trigger: e
|
|
104
104
|
} = l;
|
|
105
105
|
return e !== "none" && (e === "always" || x.value);
|
|
106
|
-
}),
|
|
106
|
+
}), H = c(() => {
|
|
107
107
|
const {
|
|
108
108
|
value: e
|
|
109
|
+
} = d, {
|
|
110
|
+
value: t
|
|
109
111
|
} = m, {
|
|
110
112
|
value: n
|
|
111
|
-
} =
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
return e === null || n === null || t === null ? 0 : t * e / n + 5 * 1.5;
|
|
115
|
-
}), oe = c(() => `${C.value}px`), re = c(() => {
|
|
113
|
+
} = T;
|
|
114
|
+
return e === null || t === null || n === null ? 0 : n * e / t + 5 * 1.5;
|
|
115
|
+
}), oe = c(() => `${H.value}px`), re = c(() => {
|
|
116
116
|
const {
|
|
117
117
|
value: e
|
|
118
|
-
} =
|
|
119
|
-
value: n
|
|
120
|
-
} = H, {
|
|
118
|
+
} = d, {
|
|
121
119
|
value: t
|
|
122
|
-
} =
|
|
120
|
+
} = $, {
|
|
121
|
+
value: n
|
|
122
|
+
} = m, {
|
|
123
123
|
value: r
|
|
124
|
-
} =
|
|
125
|
-
if (e === null ||
|
|
124
|
+
} = T;
|
|
125
|
+
if (e === null || n === null || r === null)
|
|
126
126
|
return 0;
|
|
127
127
|
{
|
|
128
|
-
const o =
|
|
129
|
-
return o ?
|
|
128
|
+
const o = n - e;
|
|
129
|
+
return o ? t / o * (r - H.value) : 0;
|
|
130
130
|
}
|
|
131
131
|
}), ae = c(() => `${re.value}px`);
|
|
132
|
-
let P = !1,
|
|
133
|
-
const
|
|
132
|
+
let P = !1, k = 0, I = 0;
|
|
133
|
+
const A = (e) => {
|
|
134
134
|
if (!P) return;
|
|
135
135
|
X !== void 0 && window.clearTimeout(X), L !== void 0 && window.clearTimeout(L);
|
|
136
136
|
const {
|
|
137
|
+
value: t
|
|
138
|
+
} = d, {
|
|
137
139
|
value: n
|
|
138
140
|
} = m, {
|
|
139
|
-
value: t
|
|
140
|
-
} = f, {
|
|
141
141
|
value: r
|
|
142
|
-
} =
|
|
143
|
-
if (
|
|
144
|
-
const
|
|
145
|
-
let
|
|
146
|
-
|
|
142
|
+
} = H;
|
|
143
|
+
if (t === null || n === null) return;
|
|
144
|
+
const g = (e.clientX - I) * (n - t) / (t - r), E = n - t;
|
|
145
|
+
let s = k + g;
|
|
146
|
+
s = Math.min(E, s), s = Math.max(s, 0);
|
|
147
147
|
const {
|
|
148
|
-
value:
|
|
148
|
+
value: M
|
|
149
149
|
} = w;
|
|
150
|
-
|
|
151
|
-
},
|
|
152
|
-
e.preventDefault(), e.stopPropagation(), W("mousemove", window,
|
|
150
|
+
M && (M.scrollLeft = s);
|
|
151
|
+
}, K = (e) => {
|
|
152
|
+
e.preventDefault(), e.stopPropagation(), W("mousemove", window, A, !0), W("mouseup", window, K, !0), x.value = !1, P = !1, v();
|
|
153
153
|
};
|
|
154
154
|
function ce(e) {
|
|
155
|
-
e.preventDefault(), e.stopPropagation(), P = !0, x.value = !0, Y("mousemove", window,
|
|
155
|
+
e.preventDefault(), e.stopPropagation(), P = !0, x.value = !0, Y("mousemove", window, A, !0), Y("mouseup", window, K, !0), k = $.value, I = e.clientX;
|
|
156
156
|
}
|
|
157
|
-
function
|
|
157
|
+
function j() {
|
|
158
158
|
const {
|
|
159
159
|
value: e
|
|
160
160
|
} = w;
|
|
161
|
-
e && (
|
|
161
|
+
e && (C.value = e.scrollTop, $.value = e.scrollLeft);
|
|
162
162
|
}
|
|
163
|
-
const
|
|
163
|
+
const se = () => {
|
|
164
164
|
const {
|
|
165
165
|
value: e
|
|
166
166
|
} = F;
|
|
167
167
|
if (e) {
|
|
168
168
|
const o = e.getBoundingClientRect();
|
|
169
|
-
|
|
169
|
+
h.value = o.height, m.value = o.width;
|
|
170
170
|
}
|
|
171
171
|
const {
|
|
172
|
-
value:
|
|
172
|
+
value: t
|
|
173
173
|
} = w;
|
|
174
|
-
if (
|
|
175
|
-
const o =
|
|
176
|
-
|
|
174
|
+
if (t) {
|
|
175
|
+
const o = t.getBoundingClientRect();
|
|
176
|
+
u.value = o.height, d.value = o.width;
|
|
177
177
|
}
|
|
178
178
|
const {
|
|
179
|
-
value:
|
|
179
|
+
value: n
|
|
180
180
|
} = p;
|
|
181
|
-
|
|
181
|
+
n && (z.value = n.offsetHeight);
|
|
182
182
|
const {
|
|
183
183
|
value: r
|
|
184
|
-
} =
|
|
185
|
-
r && (
|
|
184
|
+
} = b;
|
|
185
|
+
r && (T.value = r.offsetWidth);
|
|
186
186
|
};
|
|
187
|
-
function
|
|
188
|
-
|
|
187
|
+
function v() {
|
|
188
|
+
se(), j();
|
|
189
189
|
}
|
|
190
190
|
return {
|
|
191
191
|
showYBarRef: J,
|
|
192
192
|
showXBarRef: le,
|
|
193
|
-
sync:
|
|
193
|
+
sync: v,
|
|
194
194
|
handleMouseEnter: () => {
|
|
195
195
|
B.value = !0, x.value = !0;
|
|
196
196
|
},
|
|
@@ -199,28 +199,28 @@ const Me = /* @__PURE__ */ se({
|
|
|
199
199
|
},
|
|
200
200
|
handleXScrollWheel: (e) => {
|
|
201
201
|
const {
|
|
202
|
-
value:
|
|
202
|
+
value: t
|
|
203
203
|
} = w;
|
|
204
|
-
if (
|
|
205
|
-
const
|
|
206
|
-
|
|
204
|
+
if (t && e.deltaY && V.value && l.xScrollable) {
|
|
205
|
+
const n = t.scrollLeft, r = t.scrollWidth - t.clientWidth, o = e.deltaY * 0.6, g = Math.max(0, Math.min(n + o, r));
|
|
206
|
+
t.scrollLeft = g, v(), e.stopPropagation(), e.preventDefault();
|
|
207
207
|
}
|
|
208
208
|
},
|
|
209
209
|
// handleContentResize,
|
|
210
210
|
// handleContainerResize,
|
|
211
|
-
contentRef:
|
|
211
|
+
contentRef: S,
|
|
212
212
|
yRailRef: p,
|
|
213
|
-
xRailRef:
|
|
214
|
-
containerRef:
|
|
215
|
-
contentHeightRef:
|
|
216
|
-
containerHeightRef:
|
|
213
|
+
xRailRef: b,
|
|
214
|
+
containerRef: i,
|
|
215
|
+
contentHeightRef: h,
|
|
216
|
+
containerHeightRef: u,
|
|
217
217
|
needYBarRef: G,
|
|
218
|
-
needXBarRef:
|
|
218
|
+
needXBarRef: V,
|
|
219
219
|
yBarSizePxRef: Q,
|
|
220
|
-
handleYScrollMouseDown:
|
|
220
|
+
handleYScrollMouseDown: te,
|
|
221
221
|
handleXScrollMouseDown: ce,
|
|
222
222
|
yBarTopPxRef: ee,
|
|
223
|
-
handleScroll:
|
|
223
|
+
handleScroll: ne,
|
|
224
224
|
xBarSizePxRef: oe,
|
|
225
225
|
xBarLeftPxRef: ae
|
|
226
226
|
};
|
|
@@ -228,47 +228,53 @@ const Me = /* @__PURE__ */ se({
|
|
|
228
228
|
render() {
|
|
229
229
|
const {
|
|
230
230
|
$slots: l,
|
|
231
|
-
xScrollable:
|
|
232
|
-
|
|
233
|
-
|
|
231
|
+
xScrollable: S,
|
|
232
|
+
$props: i
|
|
233
|
+
} = this, p = () => R("div", {
|
|
234
|
+
class: `${f}-scrollbar-rail ${f}-scrollbar-rail--horizontal`,
|
|
234
235
|
ref: "xRailRef"
|
|
235
|
-
}, [this.needXBarRef && this.showXBarRef &&
|
|
236
|
-
class: `${
|
|
236
|
+
}, [this.needXBarRef && this.showXBarRef && R("div", {
|
|
237
|
+
class: `${f}-scrollbar-rail__scrollbar--horizontal`,
|
|
237
238
|
style: {
|
|
238
239
|
width: this.xBarSizePxRef,
|
|
239
|
-
left: this.xBarLeftPxRef
|
|
240
|
+
left: this.xBarLeftPxRef,
|
|
241
|
+
backgroundColor: i.scrollbarColor
|
|
240
242
|
},
|
|
241
243
|
onMousedown: this.handleXScrollMouseDown
|
|
242
|
-
}, null, 46, ["onMousedown"])], 2),
|
|
243
|
-
class: `${
|
|
244
|
+
}, null, 46, ["onMousedown"])], 2), b = () => R("div", {
|
|
245
|
+
class: `${f}-scrollbar-rail ${f}-scrollbar-rail--vertical`,
|
|
246
|
+
style: {
|
|
247
|
+
right: typeof i.scrollbarOffset == "number" ? `${i.scrollbarOffset}px` : i.scrollbarOffset
|
|
248
|
+
},
|
|
244
249
|
ref: "yRailRef"
|
|
245
|
-
}, [this.needYBarRef && this.showYBarRef &&
|
|
246
|
-
class: `${
|
|
250
|
+
}, [this.needYBarRef && this.showYBarRef && R("div", {
|
|
251
|
+
class: `${f}-scrollbar-rail__scrollbar--vertical`,
|
|
247
252
|
style: {
|
|
248
253
|
height: this.yBarSizePxRef,
|
|
249
|
-
top: this.yBarTopPxRef
|
|
254
|
+
top: this.yBarTopPxRef,
|
|
255
|
+
backgroundColor: i.scrollbarColor
|
|
250
256
|
},
|
|
251
257
|
onMousedown: this.handleYScrollMouseDown
|
|
252
|
-
}, null, 46, ["onMousedown"])],
|
|
258
|
+
}, null, 46, ["onMousedown"])], 6);
|
|
253
259
|
return (() => {
|
|
254
|
-
var
|
|
255
|
-
return
|
|
256
|
-
class: `${
|
|
260
|
+
var u, d;
|
|
261
|
+
return R("div", ue({
|
|
262
|
+
class: `${f}-scrollbar`
|
|
257
263
|
}, this.$attrs, {
|
|
258
264
|
onMouseenter: this.handleMouseEnter,
|
|
259
265
|
onMouseleave: this.handleMouseLeave
|
|
260
|
-
}), [this.container ? (
|
|
261
|
-
class: `${
|
|
266
|
+
}), [this.container ? (u = l.default) == null ? void 0 : u.call(l) : R("div", {
|
|
267
|
+
class: `${f}-scrollbar-container`,
|
|
262
268
|
onScroll: this.handleScroll,
|
|
263
269
|
ref: "containerRef",
|
|
264
270
|
onWheel: this.handleXScrollWheel
|
|
265
|
-
}, [
|
|
271
|
+
}, [R("div", {
|
|
266
272
|
ref: "contentRef",
|
|
267
|
-
class: `${
|
|
268
|
-
}, [(
|
|
273
|
+
class: `${f}-scrollbar-content`
|
|
274
|
+
}, [(d = l.default) == null ? void 0 : d.call(l)], 2)], 42, ["onScroll", "onWheel"]), b(), S && p()], 16, ["onMouseenter", "onMouseleave"]);
|
|
269
275
|
})();
|
|
270
276
|
}
|
|
271
277
|
});
|
|
272
278
|
export {
|
|
273
|
-
|
|
279
|
+
ge as default
|
|
274
280
|
};
|
|
@@ -1,13 +1,21 @@
|
|
|
1
|
-
const
|
|
1
|
+
const r = {
|
|
2
2
|
container: Function,
|
|
3
3
|
content: Function,
|
|
4
4
|
onScroll: Function,
|
|
5
5
|
xScrollable: Boolean,
|
|
6
|
+
scrollbarColor: {
|
|
7
|
+
type: String,
|
|
8
|
+
default: "rgba(0, 0, 0, 0.1)"
|
|
9
|
+
},
|
|
10
|
+
scrollbarOffset: {
|
|
11
|
+
type: [String, Number],
|
|
12
|
+
default: 2
|
|
13
|
+
},
|
|
6
14
|
trigger: {
|
|
7
15
|
type: String,
|
|
8
16
|
default: "hover"
|
|
9
17
|
}
|
|
10
18
|
};
|
|
11
19
|
export {
|
|
12
|
-
|
|
20
|
+
r as scrollbarProps
|
|
13
21
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),I=require("@vueuse/core"),d=require("evtd"),i=require("../../../hooks/use-namespace/index.js"),ae=require("./types.js"),ce=t.defineComponent({name:"KScrollbar",props:ae.scrollbarProps,inheritAttrs:!1,setup(o){t.onMounted(()=>{o.container||v()});const R=t.ref(null),u=t.ref(null),M=t.ref(null),x=t.ref(null),h=t.ref(null),m=t.ref(null),s=t.ref(null),f=t.ref(null),X=t.ref(null),z=t.ref(null),j=t.computed(()=>{var e;return((e=o.content)==null?void 0:e.call(o))||R.value}),S=t.computed(()=>{var e;return((e=o.container)==null?void 0:e.call(o))||u.value}),N=t.ref(0),T=t.ref(0);I.useResizeObserver(R,()=>{v()}),I.useResizeObserver(u,()=>{v()});const A=t.computed(()=>{const{value:e}=s,{value:n}=h;return e!==null&&n!==null&&n>e}),p=t.ref(!1),K=t.computed(()=>{const{trigger:e}=o;return e!=="none"&&(e==="always"||p.value)}),W=t.computed(()=>{const{value:e}=s,{value:n}=h,{value:l}=X;return e===null||n===null||l===null?0:Math.min(e,l*e/n+5*1.5)}),F=t.computed(()=>`${W.value}px`),G=t.computed(()=>{const{value:e}=s,{value:n}=N,{value:l}=h,{value:a}=X;if(e===null||l===null||a===null)return 0;{const r=l-e;return r?n/r*(a-W.value):0}}),J=t.computed(()=>`${G.value}px`);let b=!1,$=0,D=0,y,L;const H=e=>{if(!b)return;L!==void 0&&window.clearTimeout(L),y!==void 0&&window.clearTimeout(y);const{value:n}=s,{value:l}=h,{value:a}=W;if(n===null||l===null)return;const B=(e.clientY-D)*(l-n)/(n-a),C=l-n;let c=$+B;c=Math.min(C,c),c=Math.max(c,0);const{value:g}=S;g&&(g.scrollTop=c)},V=e=>{e.preventDefault(),e.stopPropagation(),d.off("mousemove",window,H,!0),d.off("mouseup",window,V,!0),b=!1,p.value=!1,v()},Q=e=>{e.preventDefault(),e.stopPropagation(),d.on("mousemove",window,H,!0),d.on("mouseup",window,V,!0),$=N.value,D=e.clientY,b=!0,p.value=!0};function Z(e){const{onScroll:n}=o;n&&n(e),k()}const O=t.computed(()=>{const{value:e}=f,{value:n}=m;return e!==null&&n!==null&&n>e}),w=t.ref(!1),ee=t.computed(()=>{const{trigger:e}=o;return e!=="none"&&(e==="always"||w.value)}),Y=t.computed(()=>{const{value:e}=f,{value:n}=m,{value:l}=z;return e===null||n===null||l===null?0:l*e/n+5*1.5}),te=t.computed(()=>`${Y.value}px`),ne=t.computed(()=>{const{value:e}=f,{value:n}=T,{value:l}=m,{value:a}=z;if(e===null||l===null||a===null)return 0;{const r=l-e;return r?n/r*(a-Y.value):0}}),le=t.computed(()=>`${ne.value}px`);let P=!1,_=0,q=0;const E=e=>{if(!P)return;L!==void 0&&window.clearTimeout(L),y!==void 0&&window.clearTimeout(y);const{value:n}=f,{value:l}=m,{value:a}=Y;if(n===null||l===null)return;const B=(e.clientX-q)*(l-n)/(n-a),C=l-n;let c=_+B;c=Math.min(C,c),c=Math.max(c,0);const{value:g}=S;g&&(g.scrollLeft=c)},U=e=>{e.preventDefault(),e.stopPropagation(),d.off("mousemove",window,E,!0),d.off("mouseup",window,U,!0),w.value=!1,P=!1,v()};function oe(e){e.preventDefault(),e.stopPropagation(),P=!0,w.value=!0,d.on("mousemove",window,E,!0),d.on("mouseup",window,U,!0),_=T.value,q=e.clientX}function k(){const{value:e}=S;e&&(N.value=e.scrollTop,T.value=e.scrollLeft)}const re=()=>{const{value:e}=j;if(e){const r=e.getBoundingClientRect();h.value=r.height,m.value=r.width}const{value:n}=S;if(n){const r=n.getBoundingClientRect();s.value=r.height,f.value=r.width}const{value:l}=M;l&&(X.value=l.offsetHeight);const{value:a}=x;a&&(z.value=a.offsetWidth)};function v(){re(),k()}return{showYBarRef:K,showXBarRef:ee,sync:v,handleMouseEnter:()=>{p.value=!0,w.value=!0},handleMouseLeave:()=>{b||(p.value=!1),P||(w.value=!1)},handleXScrollWheel:e=>{const{value:n}=S;if(n&&e.deltaY&&O.value&&o.xScrollable){const l=n.scrollLeft,a=n.scrollWidth-n.clientWidth,r=e.deltaY*.6,B=Math.max(0,Math.min(l+r,a));n.scrollLeft=B,v(),e.stopPropagation(),e.preventDefault()}},contentRef:R,yRailRef:M,xRailRef:x,containerRef:u,contentHeightRef:h,containerHeightRef:s,needYBarRef:A,needXBarRef:O,yBarSizePxRef:F,handleYScrollMouseDown:Q,handleXScrollMouseDown:oe,yBarTopPxRef:J,handleScroll:Z,xBarSizePxRef:te,xBarLeftPxRef:le}},render(){const{$slots:o,xScrollable:R,$props:u}=this,M=()=>t.createVNode("div",{class:`${i.defaultNamespace}-scrollbar-rail ${i.defaultNamespace}-scrollbar-rail--horizontal`,ref:"xRailRef"},[this.needXBarRef&&this.showXBarRef&&t.createVNode("div",{class:`${i.defaultNamespace}-scrollbar-rail__scrollbar--horizontal`,style:{width:this.xBarSizePxRef,left:this.xBarLeftPxRef,backgroundColor:u.scrollbarColor},onMousedown:this.handleXScrollMouseDown},null,46,["onMousedown"])],2),x=()=>t.createVNode("div",{class:`${i.defaultNamespace}-scrollbar-rail ${i.defaultNamespace}-scrollbar-rail--vertical`,style:{right:typeof u.scrollbarOffset=="number"?`${u.scrollbarOffset}px`:u.scrollbarOffset},ref:"yRailRef"},[this.needYBarRef&&this.showYBarRef&&t.createVNode("div",{class:`${i.defaultNamespace}-scrollbar-rail__scrollbar--vertical`,style:{height:this.yBarSizePxRef,top:this.yBarTopPxRef,backgroundColor:u.scrollbarColor},onMousedown:this.handleYScrollMouseDown},null,46,["onMousedown"])],6);return(()=>{var s,f;return t.createVNode("div",t.mergeProps({class:`${i.defaultNamespace}-scrollbar`},this.$attrs,{onMouseenter:this.handleMouseEnter,onMouseleave:this.handleMouseLeave}),[this.container?(s=o.default)==null?void 0:s.call(o):t.createVNode("div",{class:`${i.defaultNamespace}-scrollbar-container`,onScroll:this.handleScroll,ref:"containerRef",onWheel:this.handleXScrollWheel},[t.createVNode("div",{ref:"contentRef",class:`${i.defaultNamespace}-scrollbar-content`},[(f=o.default)==null?void 0:f.call(o)],2)],42,["onScroll","onWheel"]),x(),R&&M()],16,["onMouseenter","onMouseleave"])})()}});exports.default=ce;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r={container:Function,content:Function,onScroll:Function,xScrollable:Boolean,scrollbarColor:{type:String,default:"rgba(0, 0, 0, 0.1)"},scrollbarOffset:{type:[String,Number],default:2},trigger:{type:String,default:"hover"}};exports.scrollbarProps=r;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@font-face{font-family:iconfont;src:url(fonts/iconfont.woff2?t=
|
|
1
|
+
@font-face{font-family:iconfont;src:url(fonts/iconfont.woff2?t=57569) format("woff2"),url(fonts/iconfont.woff?t=2209) format("woff"),url(fonts/iconfont.ttf?t=10870) format("truetype")}.king-icon{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-king-title-icon:before{content:"\e680"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--king-color-white:#ffffff;--king-color-primary:#409eff;--king-color-success:#67c23a;--king-color-warning:#e6a23c;--king-color-danger:#f56c6c;--king-color-error:#f56c6c;--king-color-info:#909399;--king-transition-duration:0.3s}.king-button--primary{--king-button-text-color:var(--king-color-primary)}.king-button--success{--king-button-text-color:var(--king-color-success)}.king-button--warning{--king-button-text-color:var(--king-color-warning)}.king-button--danger{--king-button-text-color:var(--king-color-danger)}.king-button--error{--king-button-text-color:var(--king-color-error)}.king-button--info{--king-button-text-color:var(--king-color-info)}.king-button{color:var(--king-button-text-color)}.king-scrollbar{overflow:hidden;position:relative;z-index:auto;height:100%;width:100%}.king-scrollbar .king-scrollbar-container{width:100%;overflow:scroll;height:100%;min-height:inherit;max-height:inherit;scrollbar-width:none}.king-scrollbar .king-scrollbar-content{width:-moz-fit-content;width:fit-content}.king-scrollbar .king-scrollbar-rail{position:absolute}.king-scrollbar .king-scrollbar-rail--vertical{right:0;width:5px;top:2px;bottom:2px;right:4px}.king-scrollbar .king-scrollbar-rail--horizontal{bottom:2px;height:5px;left:2px;right:2px}.king-scrollbar .king-scrollbar-rail__scrollbar--vertical{
|
|
1
|
+
:root{--king-color-white:#ffffff;--king-color-primary:#409eff;--king-color-success:#67c23a;--king-color-warning:#e6a23c;--king-color-danger:#f56c6c;--king-color-error:#f56c6c;--king-color-info:#909399;--king-transition-duration:0.3s}.king-button--primary{--king-button-text-color:var(--king-color-primary)}.king-button--success{--king-button-text-color:var(--king-color-success)}.king-button--warning{--king-button-text-color:var(--king-color-warning)}.king-button--danger{--king-button-text-color:var(--king-color-danger)}.king-button--error{--king-button-text-color:var(--king-color-error)}.king-button--info{--king-button-text-color:var(--king-color-info)}.king-button{color:var(--king-button-text-color)}.king-scrollbar{overflow:hidden;position:relative;z-index:auto;height:100%;width:100%}.king-scrollbar .king-scrollbar-container{width:100%;overflow:scroll;height:100%;min-height:inherit;max-height:inherit;scrollbar-width:none}.king-scrollbar .king-scrollbar-content{width:-moz-fit-content;width:fit-content}.king-scrollbar .king-scrollbar-rail{position:absolute}.king-scrollbar .king-scrollbar-rail--vertical{right:0;width:5px;top:2px;bottom:2px;right:4px}.king-scrollbar .king-scrollbar-rail--horizontal{bottom:2px;height:5px;left:2px;right:2px}.king-scrollbar .king-scrollbar-rail__scrollbar--vertical{position:absolute;border-radius:5px;width:100%;cursor:pointer}.king-scrollbar .king-scrollbar-rail__scrollbar--horizontal{position:absolute;border-radius:5px;height:100%;cursor:pointer}.v-vl-items{width:-moz-fit-content;width:fit-content}.king-scale-virtual-list{width:100%;height:100%}.king-scale-virtual-list .king-scale-virtual-list-container{margin:0 auto;position:relative}.king-scale-virtual-list .king-scale-vittual-wrapper{width:-moz-fit-content;width:fit-content;margin:0 auto;position:absolute;left:50%}.king-pro-title{border-bottom:1px solid #ccc;font-weight:500;display:flex;align-items:center}.king-pro-title .icon{margin-right:10px}.king-pro-title--unborder{border:none}.king-pro-modal .ant-modal-content{padding:0}.king-pro-modal .ant-modal-header{height:56px;padding-left:32px;padding-right:24px;display:flex;justify-content:space-between;align-items:center;background:#f1f7ff;border-bottom:1px solid #e6e8ea}.king-pro-modal .ant-modal-body{padding:10px 20px;max-height:65vh;overflow:auto}.king-pro-modal .ant-modal-footer{height:56px;display:flex;padding:0 16px;justify-content:flex-end;align-items:center;border-top:1px solid #e6e8ea}.king-pro-modal .ant-modal-title{flex:1}.king-pro-modal .pro-modal-title{cursor:move;width:100%}.king-pro-area-select{width:100%}@font-face{font-family:iconfont;src:url(fonts/iconfont.woff2?t=70180) format("woff2"),url(fonts/iconfont.woff?t=97848) format("woff"),url(fonts/iconfont.ttf?t=4629) format("truetype")}.king-icon{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-king-title-icon:before{content:"\e680"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.king-scrollbar{overflow:hidden;position:relative;z-index:auto;height:100%;width:100%}.king-scrollbar .king-scrollbar-container{width:100%;overflow:scroll;height:100%;min-height:inherit;max-height:inherit;scrollbar-width:none}.king-scrollbar .king-scrollbar-content{width:-moz-fit-content;width:fit-content}.king-scrollbar .king-scrollbar-rail{position:absolute}.king-scrollbar .king-scrollbar-rail--vertical{right:0;width:5px;top:2px;bottom:2px;right:4px}.king-scrollbar .king-scrollbar-rail--horizontal{bottom:2px;height:5px;left:2px;right:2px}.king-scrollbar .king-scrollbar-rail__scrollbar--vertical{
|
|
1
|
+
.king-scrollbar{overflow:hidden;position:relative;z-index:auto;height:100%;width:100%}.king-scrollbar .king-scrollbar-container{width:100%;overflow:scroll;height:100%;min-height:inherit;max-height:inherit;scrollbar-width:none}.king-scrollbar .king-scrollbar-content{width:-moz-fit-content;width:fit-content}.king-scrollbar .king-scrollbar-rail{position:absolute}.king-scrollbar .king-scrollbar-rail--vertical{right:0;width:5px;top:2px;bottom:2px;right:4px}.king-scrollbar .king-scrollbar-rail--horizontal{bottom:2px;height:5px;left:2px;right:2px}.king-scrollbar .king-scrollbar-rail__scrollbar--vertical{position:absolute;border-radius:5px;width:100%;cursor:pointer}.king-scrollbar .king-scrollbar-rail__scrollbar--horizontal{position:absolute;border-radius:5px;height:100%;cursor:pointer}.v-vl-items{width:-moz-fit-content;width:fit-content}
|
|
@@ -2,13 +2,21 @@ import { SFCWithInstall } from '../utils/install';
|
|
|
2
2
|
import { DefineComponent, ExtractPropTypes, PropType, ComputedRef, Ref, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
3
3
|
export * from './src/types';
|
|
4
4
|
export declare const KScrollBar: SFCWithInstall<DefineComponent<ExtractPropTypes<{
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
container: PropType<() => HTMLElement | null | undefined>;
|
|
6
|
+
content: PropType<() => HTMLElement | null | undefined>;
|
|
7
|
+
onScroll: PropType<(e: Event) => void>;
|
|
8
|
+
xScrollable: BooleanConstructor;
|
|
9
|
+
scrollbarColor: {
|
|
10
|
+
type: StringConstructor;
|
|
11
|
+
default: string;
|
|
12
|
+
};
|
|
13
|
+
scrollbarOffset: {
|
|
14
|
+
type: (StringConstructor | NumberConstructor)[];
|
|
15
|
+
default: number;
|
|
16
|
+
};
|
|
17
|
+
trigger: {
|
|
18
|
+
type: PropType<"none" | "hover" | "always">;
|
|
19
|
+
default: string;
|
|
12
20
|
};
|
|
13
21
|
}>, {
|
|
14
22
|
showYBarRef: ComputedRef<boolean>;
|
|
@@ -33,16 +41,26 @@ export declare const KScrollBar: SFCWithInstall<DefineComponent<ExtractPropTypes
|
|
|
33
41
|
xBarSizePxRef: ComputedRef<string>;
|
|
34
42
|
xBarLeftPxRef: ComputedRef<string>;
|
|
35
43
|
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
44
|
+
container: PropType<() => HTMLElement | null | undefined>;
|
|
45
|
+
content: PropType<() => HTMLElement | null | undefined>;
|
|
46
|
+
onScroll: PropType<(e: Event) => void>;
|
|
47
|
+
xScrollable: BooleanConstructor;
|
|
48
|
+
scrollbarColor: {
|
|
49
|
+
type: StringConstructor;
|
|
50
|
+
default: string;
|
|
51
|
+
};
|
|
52
|
+
scrollbarOffset: {
|
|
53
|
+
type: (StringConstructor | NumberConstructor)[];
|
|
54
|
+
default: number;
|
|
55
|
+
};
|
|
56
|
+
trigger: {
|
|
57
|
+
type: PropType<"none" | "hover" | "always">;
|
|
58
|
+
default: string;
|
|
43
59
|
};
|
|
44
60
|
}>> & Readonly<{}>, {
|
|
45
|
-
|
|
46
|
-
|
|
61
|
+
trigger: "none" | "hover" | "always";
|
|
62
|
+
xScrollable: boolean;
|
|
63
|
+
scrollbarColor: string;
|
|
64
|
+
scrollbarOffset: string | number;
|
|
47
65
|
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>>;
|
|
48
66
|
export default KScrollBar;
|
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
import { DefineComponent, ExtractPropTypes, PropType, ComputedRef, Ref, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
2
2
|
declare const _default: DefineComponent<ExtractPropTypes<{
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
3
|
+
container: PropType<() => HTMLElement | null | undefined>;
|
|
4
|
+
content: PropType<() => HTMLElement | null | undefined>;
|
|
5
|
+
onScroll: PropType<(e: Event) => void>;
|
|
6
|
+
xScrollable: BooleanConstructor;
|
|
7
|
+
scrollbarColor: {
|
|
8
|
+
type: StringConstructor;
|
|
9
|
+
default: string;
|
|
10
|
+
};
|
|
11
|
+
scrollbarOffset: {
|
|
12
|
+
type: (StringConstructor | NumberConstructor)[];
|
|
13
|
+
default: number;
|
|
14
|
+
};
|
|
15
|
+
trigger: {
|
|
16
|
+
type: PropType<"none" | "hover" | "always">;
|
|
17
|
+
default: string;
|
|
10
18
|
};
|
|
11
19
|
}>, {
|
|
12
20
|
showYBarRef: ComputedRef<boolean>;
|
|
@@ -31,16 +39,26 @@ declare const _default: DefineComponent<ExtractPropTypes<{
|
|
|
31
39
|
xBarSizePxRef: ComputedRef<string>;
|
|
32
40
|
xBarLeftPxRef: ComputedRef<string>;
|
|
33
41
|
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
42
|
+
container: PropType<() => HTMLElement | null | undefined>;
|
|
43
|
+
content: PropType<() => HTMLElement | null | undefined>;
|
|
44
|
+
onScroll: PropType<(e: Event) => void>;
|
|
45
|
+
xScrollable: BooleanConstructor;
|
|
46
|
+
scrollbarColor: {
|
|
47
|
+
type: StringConstructor;
|
|
48
|
+
default: string;
|
|
49
|
+
};
|
|
50
|
+
scrollbarOffset: {
|
|
51
|
+
type: (StringConstructor | NumberConstructor)[];
|
|
52
|
+
default: number;
|
|
53
|
+
};
|
|
54
|
+
trigger: {
|
|
55
|
+
type: PropType<"none" | "hover" | "always">;
|
|
56
|
+
default: string;
|
|
41
57
|
};
|
|
42
58
|
}>> & Readonly<{}>, {
|
|
43
|
-
|
|
44
|
-
|
|
59
|
+
trigger: "none" | "hover" | "always";
|
|
60
|
+
xScrollable: boolean;
|
|
61
|
+
scrollbarColor: string;
|
|
62
|
+
scrollbarOffset: string | number;
|
|
45
63
|
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
46
64
|
export default _default;
|
|
@@ -1,11 +1,19 @@
|
|
|
1
1
|
import { PropType } from 'vue';
|
|
2
2
|
export declare const scrollbarProps: {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
3
|
+
container: PropType<() => HTMLElement | null | undefined>;
|
|
4
|
+
content: PropType<() => HTMLElement | null | undefined>;
|
|
5
|
+
onScroll: PropType<(e: Event) => void>;
|
|
6
|
+
xScrollable: BooleanConstructor;
|
|
7
|
+
scrollbarColor: {
|
|
8
|
+
type: StringConstructor;
|
|
9
|
+
default: string;
|
|
10
|
+
};
|
|
11
|
+
scrollbarOffset: {
|
|
12
|
+
type: (StringConstructor | NumberConstructor)[];
|
|
13
|
+
default: number;
|
|
14
|
+
};
|
|
15
|
+
trigger: {
|
|
16
|
+
type: PropType<"none" | "hover" | "always">;
|
|
17
|
+
default: string;
|
|
10
18
|
};
|
|
11
19
|
};
|