abl-ui 0.5.61 → 0.5.62
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/lib/abl-ui.es.js +192 -180
- package/lib/abl-ui.umd.js +1 -1
- package/lib/style.css +1 -1
- package/package.json +1 -1
package/lib/abl-ui.es.js
CHANGED
|
@@ -1,169 +1,181 @@
|
|
|
1
|
-
import {
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { computed as S, ref as B, onMounted as $, nextTick as I, onUnmounted as D, openBlock as n, createElementBlock as a, createElementVNode as i, normalizeClass as v, normalizeStyle as p, Fragment as b, renderList as _, toDisplayString as E, createCommentVNode as m, renderSlot as k } from "vue";
|
|
2
|
+
const o = [];
|
|
3
|
+
for (let e = 0; e < 256; ++e)
|
|
4
|
+
o.push((e + 256).toString(16).slice(1));
|
|
5
|
+
function R(e, t = 0) {
|
|
6
|
+
return (o[e[t + 0]] + o[e[t + 1]] + o[e[t + 2]] + o[e[t + 3]] + "-" + o[e[t + 4]] + o[e[t + 5]] + "-" + o[e[t + 6]] + o[e[t + 7]] + "-" + o[e[t + 8]] + o[e[t + 9]] + "-" + o[e[t + 10]] + o[e[t + 11]] + o[e[t + 12]] + o[e[t + 13]] + o[e[t + 14]] + o[e[t + 15]]).toLowerCase();
|
|
7
|
+
}
|
|
8
|
+
let w;
|
|
9
|
+
const V = new Uint8Array(16);
|
|
10
|
+
function C() {
|
|
11
|
+
if (!w) {
|
|
12
|
+
if (typeof crypto > "u" || !crypto.getRandomValues)
|
|
13
|
+
throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
|
|
14
|
+
w = crypto.getRandomValues.bind(crypto);
|
|
15
|
+
}
|
|
16
|
+
return w(V);
|
|
17
|
+
}
|
|
18
|
+
const T = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), H = { randomUUID: T };
|
|
19
|
+
function N(e, t, l) {
|
|
20
|
+
var r;
|
|
21
|
+
if (H.randomUUID && !t && !e)
|
|
22
|
+
return H.randomUUID();
|
|
23
|
+
e = e || {};
|
|
24
|
+
const c = e.random ?? ((r = e.rng) == null ? void 0 : r.call(e)) ?? C();
|
|
25
|
+
if (c.length < 16)
|
|
26
|
+
throw new Error("Random bytes length must be >= 16");
|
|
27
|
+
if (c[6] = c[6] & 15 | 64, c[8] = c[8] & 63 | 128, t) {
|
|
28
|
+
if (l = l || 0, l < 0 || l + 16 > t.length)
|
|
29
|
+
throw new RangeError(`UUID byte range ${l}:${l + 15} is out of buffer bounds`);
|
|
30
|
+
for (let h = 0; h < 16; ++h)
|
|
31
|
+
t[l + h] = c[h];
|
|
32
|
+
return t;
|
|
33
|
+
}
|
|
34
|
+
return R(c);
|
|
35
|
+
}
|
|
36
|
+
const P = { class: "abl-table" }, A = ["id"], j = { class: "gridtable" }, z = { class: "table-thead" }, F = ["id"], M = { class: "gridtable" }, O = { key: 0 }, q = ["colspan"], G = /* @__PURE__ */ i("div", { class: "no-data-div" }, [
|
|
37
|
+
/* @__PURE__ */ i("div", { class: "empty-center" })
|
|
38
|
+
], -1), J = [
|
|
39
|
+
G
|
|
40
|
+
], K = {
|
|
8
41
|
__name: "index",
|
|
9
42
|
props: {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
width: {
|
|
15
|
-
type: String,
|
|
16
|
-
default: "30%"
|
|
17
|
-
},
|
|
18
|
-
height: {
|
|
19
|
-
type: String,
|
|
20
|
-
default: "40%"
|
|
21
|
-
},
|
|
22
|
-
direction: {
|
|
23
|
-
type: String,
|
|
24
|
-
default: "right"
|
|
25
|
-
},
|
|
26
|
-
customClass: {
|
|
27
|
-
type: String,
|
|
28
|
-
default: ""
|
|
29
|
-
},
|
|
30
|
-
beforeClose: {
|
|
31
|
-
type: Function,
|
|
32
|
-
default: () => {
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
maskClosable: {
|
|
36
|
-
type: Boolean,
|
|
37
|
-
default: !0
|
|
38
|
-
},
|
|
39
|
-
title: {
|
|
40
|
-
type: String,
|
|
41
|
-
default: ""
|
|
43
|
+
name: "abl-table",
|
|
44
|
+
data: {
|
|
45
|
+
type: Array,
|
|
46
|
+
default: []
|
|
42
47
|
},
|
|
43
|
-
|
|
44
|
-
type:
|
|
45
|
-
default:
|
|
48
|
+
columns: {
|
|
49
|
+
type: Array,
|
|
50
|
+
default: []
|
|
46
51
|
},
|
|
47
|
-
|
|
52
|
+
border: {
|
|
48
53
|
type: Boolean,
|
|
49
|
-
default: !
|
|
50
|
-
},
|
|
51
|
-
footerStyle: {
|
|
52
|
-
type: Object,
|
|
53
|
-
default: () => {
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
beforeClose: {
|
|
57
|
-
type: Function
|
|
54
|
+
default: !1
|
|
58
55
|
},
|
|
59
|
-
|
|
56
|
+
height: {
|
|
60
57
|
type: Number,
|
|
61
|
-
default:
|
|
58
|
+
default: null
|
|
62
59
|
},
|
|
63
|
-
|
|
60
|
+
stripe: {
|
|
64
61
|
type: Boolean,
|
|
65
62
|
default: !1
|
|
66
|
-
},
|
|
67
|
-
class: {
|
|
68
|
-
type: String,
|
|
69
|
-
default: ""
|
|
70
|
-
},
|
|
71
|
-
animate: {
|
|
72
|
-
type: Boolean,
|
|
73
|
-
default: !0
|
|
74
|
-
},
|
|
75
|
-
overlay: {
|
|
76
|
-
type: Boolean,
|
|
77
|
-
default: !0
|
|
78
63
|
}
|
|
79
64
|
},
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
65
|
+
setup(e, { emit: t }) {
|
|
66
|
+
const l = e, c = S(() => ({
|
|
67
|
+
maxHeight: l.height ? l.height + "px" : ""
|
|
68
|
+
})), r = B(), h = B(), f = B({
|
|
69
|
+
bodyHandler: null,
|
|
70
|
+
headHandler: null
|
|
71
|
+
});
|
|
72
|
+
$(async () => {
|
|
73
|
+
r.value = N(), await I();
|
|
74
|
+
const d = document.getElementById("tableBody" + r.value), y = document.getElementById("tableHead" + r.value);
|
|
75
|
+
if (!d)
|
|
76
|
+
return;
|
|
77
|
+
(d == null ? void 0 : d.scrollHeight) > (d == null ? void 0 : d.clientHeight) ? h.value = {
|
|
78
|
+
width: "calc(100% - 2px)",
|
|
79
|
+
paddingRight: "2px"
|
|
80
|
+
} : h.value = {};
|
|
81
|
+
let u = !1;
|
|
82
|
+
function g(x, L) {
|
|
83
|
+
u || (u = !0, L.scrollLeft = x == null ? void 0 : x.scrollLeft, u = !1);
|
|
84
|
+
}
|
|
85
|
+
f.value.bodyHandler = () => g(d, y), f.value.headHandler = () => g(y, d), d.addEventListener("scroll", f.value.bodyHandler, { passive: !0 }), y.addEventListener("scroll", f.value.headHandler, { passive: !0 });
|
|
86
|
+
}), D(() => {
|
|
87
|
+
const d = document.getElementById("tableBody" + r.value), y = document.getElementById("tableHead" + r.value);
|
|
88
|
+
d && d.removeEventListener("scroll", f.value.bodyHandler, { passive: !0 }), y && y.removeEventListener("scroll", f.value.headHandler, { passive: !0 });
|
|
89
|
+
});
|
|
90
|
+
const U = (d) => {
|
|
91
|
+
let y = document.getElementsByClassName("table-fixed-column--left");
|
|
92
|
+
d.target.scrollLeft > 0 ? [...y].forEach((s) => {
|
|
93
|
+
s.classList.add("box-shadow");
|
|
94
|
+
}) : [...y].forEach((s) => {
|
|
95
|
+
s.classList.remove("box-shadow");
|
|
96
|
+
});
|
|
104
97
|
};
|
|
105
|
-
return (
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
style: b(`z-index: ${e.zIndex}`)
|
|
116
|
-
}, null, 6)) : i("", !0)
|
|
117
|
-
]),
|
|
118
|
-
_: 1
|
|
119
|
-
}),
|
|
120
|
-
m(k, {
|
|
121
|
-
name: v.value,
|
|
122
|
-
appear: ""
|
|
123
|
-
}, {
|
|
124
|
-
default: w(() => [
|
|
125
|
-
t.modelValue ? (n(), s("div", {
|
|
126
|
-
key: 0,
|
|
127
|
-
class: r(["abl-drawer", t.customClass, `abl-drawer-${e.direction}`, t.round && "abl-drawer-round", e.class]),
|
|
128
|
-
style: b(`z-index: ${e.zIndex + 1}`)
|
|
98
|
+
return (d, y) => (n(), a("section", null, [
|
|
99
|
+
i("div", P, [
|
|
100
|
+
i("div", {
|
|
101
|
+
class: v(["table__inner-wrapper", e.border ? "has-table-border" : ""]),
|
|
102
|
+
id: "box"
|
|
103
|
+
}, [
|
|
104
|
+
i("div", {
|
|
105
|
+
class: "table__head",
|
|
106
|
+
id: r.value ? "tableHead" + r.value : "",
|
|
107
|
+
style: p(h.value)
|
|
129
108
|
}, [
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
]))
|
|
148
|
-
l("div", H, [
|
|
149
|
-
u(c.$slots, "default")
|
|
150
|
-
])
|
|
109
|
+
i("table", j, [
|
|
110
|
+
i("colgroup", null, [
|
|
111
|
+
(n(!0), a(b, null, _(l.columns, (s, u) => (n(), a("col", {
|
|
112
|
+
key: u,
|
|
113
|
+
style: p({ width: s.width || "50px" })
|
|
114
|
+
}, null, 4))), 128))
|
|
115
|
+
]),
|
|
116
|
+
i("thead", z, [
|
|
117
|
+
i("tr", null, [
|
|
118
|
+
(n(!0), a(b, null, _(l.columns, (s, u) => (n(), a("th", {
|
|
119
|
+
key: u,
|
|
120
|
+
class: v(s.fixed == "left" ? "table-fixed-column--left" : s.fixed == "right" ? "table-fixed-column--right" : "")
|
|
121
|
+
}, [
|
|
122
|
+
i("div", {
|
|
123
|
+
class: "cell",
|
|
124
|
+
style: p({ "text-align": s.align || "left" })
|
|
125
|
+
}, E(s.title), 5)
|
|
126
|
+
], 2))), 128))
|
|
151
127
|
])
|
|
152
128
|
])
|
|
153
|
-
]
|
|
154
|
-
],
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
129
|
+
])
|
|
130
|
+
], 12, A),
|
|
131
|
+
i("div", {
|
|
132
|
+
style: p(c.value),
|
|
133
|
+
class: "table__body",
|
|
134
|
+
id: r.value ? "tableBody" + r.value : "",
|
|
135
|
+
onScroll: U
|
|
136
|
+
}, [
|
|
137
|
+
i("table", M, [
|
|
138
|
+
i("colgroup", null, [
|
|
139
|
+
(n(!0), a(b, null, _(l.columns, (s, u) => (n(), a("col", {
|
|
140
|
+
key: u,
|
|
141
|
+
class: "",
|
|
142
|
+
style: p({ width: s.width || "50px" })
|
|
143
|
+
}, null, 4))), 128))
|
|
144
|
+
]),
|
|
145
|
+
l.data.length > 0 ? (n(), a("tbody", O, [
|
|
146
|
+
(n(!0), a(b, null, _(l.data, (s, u) => (n(), a("tr", {
|
|
147
|
+
key: u,
|
|
148
|
+
class: v([{ "tr-selected": s.selected, "tr-stripe": l.stripe && u % 2 == 0 }])
|
|
149
|
+
}, [
|
|
150
|
+
(n(!0), a(b, null, _(e.columns, (g, x) => (n(), a("td", {
|
|
151
|
+
key: x,
|
|
152
|
+
class: v(g.fixed == "left" ? "table-fixed-column--left" : g.fixed == "right" ? "table-fixed-column--right" : "")
|
|
153
|
+
}, [
|
|
154
|
+
i("div", {
|
|
155
|
+
class: "cell",
|
|
156
|
+
style: p({ "text-align": g.align || "left" })
|
|
157
|
+
}, E(s[g.prop]), 5)
|
|
158
|
+
], 2))), 128))
|
|
159
|
+
], 2))), 128))
|
|
160
|
+
])) : m("", !0)
|
|
161
|
+
])
|
|
162
|
+
], 44, F),
|
|
163
|
+
l.data.length == 0 ? (n(), a("div", {
|
|
164
|
+
key: 0,
|
|
165
|
+
class: "no-data-td",
|
|
166
|
+
colspan: l.columns.length
|
|
167
|
+
}, J, 8, q)) : m("", !0)
|
|
168
|
+
], 2)
|
|
169
|
+
])
|
|
158
170
|
]));
|
|
159
171
|
}
|
|
160
172
|
};
|
|
161
|
-
const
|
|
173
|
+
const Q = {
|
|
162
174
|
key: 0,
|
|
163
175
|
class: "iconfont-abl icon-abl-loading2 abl-icon-loading"
|
|
164
|
-
},
|
|
176
|
+
}, W = { class: "abl-button__text" }, X = {
|
|
165
177
|
name: "AblButton"
|
|
166
|
-
},
|
|
178
|
+
}, Y = /* @__PURE__ */ Object.assign(X, {
|
|
167
179
|
props: {
|
|
168
180
|
type: {
|
|
169
181
|
type: String,
|
|
@@ -202,49 +214,49 @@ const O = {
|
|
|
202
214
|
default: "loading..."
|
|
203
215
|
}
|
|
204
216
|
},
|
|
205
|
-
setup(
|
|
206
|
-
const
|
|
207
|
-
[`abl-button-${
|
|
208
|
-
"is-dashed":
|
|
209
|
-
"is-round":
|
|
210
|
-
"is-circle":
|
|
211
|
-
"is-disabled":
|
|
217
|
+
setup(e) {
|
|
218
|
+
const t = e, l = S(() => ({
|
|
219
|
+
[`abl-button-${t.type}`]: t.type,
|
|
220
|
+
"is-dashed": t.dashed,
|
|
221
|
+
"is-round": t.round,
|
|
222
|
+
"is-circle": t.circle,
|
|
223
|
+
"is-disabled": t.disabled
|
|
212
224
|
}));
|
|
213
|
-
return (
|
|
214
|
-
class:
|
|
225
|
+
return (c, r) => (n(), a("button", {
|
|
226
|
+
class: v(["abl-button", l.value])
|
|
215
227
|
}, [
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
], 64)) : (n(),
|
|
220
|
-
|
|
221
|
-
|
|
228
|
+
e.loading ? (n(), a(b, { key: 0 }, [
|
|
229
|
+
e.loading ? (n(), a("i", Q)) : m("", !0),
|
|
230
|
+
i("span", null, E(e.loadingText), 1)
|
|
231
|
+
], 64)) : (n(), a(b, { key: 1 }, [
|
|
232
|
+
e.iconPosition === "left" ? k(c.$slots, "icon", { key: 0 }, () => [
|
|
233
|
+
e.icon ? (n(), a("i", {
|
|
222
234
|
key: 0,
|
|
223
|
-
class:
|
|
224
|
-
}, null, 2)) :
|
|
225
|
-
]) :
|
|
226
|
-
|
|
227
|
-
|
|
235
|
+
class: v(["iconfont-abl slot-icon-left", e.icon])
|
|
236
|
+
}, null, 2)) : m("", !0)
|
|
237
|
+
]) : m("", !0),
|
|
238
|
+
i("span", W, [
|
|
239
|
+
k(c.$slots, "default")
|
|
228
240
|
]),
|
|
229
|
-
|
|
230
|
-
|
|
241
|
+
e.iconPosition === "right" ? k(c.$slots, "icon", { key: 1 }, () => [
|
|
242
|
+
e.icon ? (n(), a("i", {
|
|
231
243
|
key: 0,
|
|
232
|
-
class:
|
|
233
|
-
}, null, 2)) :
|
|
234
|
-
]) :
|
|
244
|
+
class: v(["iconfont-abl slot-icon-right", e.icon])
|
|
245
|
+
}, null, 2)) : m("", !0)
|
|
246
|
+
]) : m("", !0)
|
|
235
247
|
], 64))
|
|
236
248
|
], 2));
|
|
237
249
|
}
|
|
238
|
-
}),
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
],
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
}),
|
|
245
|
-
},
|
|
250
|
+
}), Z = [
|
|
251
|
+
Y,
|
|
252
|
+
K
|
|
253
|
+
], ee = function(e, t) {
|
|
254
|
+
Z.forEach((l) => {
|
|
255
|
+
e.component(l.name, l);
|
|
256
|
+
}), e.config.globalProperties.$lockCount = 0;
|
|
257
|
+
}, le = { install: ee };
|
|
246
258
|
export {
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
259
|
+
Y as ablButton,
|
|
260
|
+
K as ablTable,
|
|
261
|
+
le as default
|
|
250
262
|
};
|
package/lib/abl-ui.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m["abl-ui"]={},m.Vue))})(this,function(m,e){"use strict";const o=[];for(let t=0;t<256;++t)o.push((t+256).toString(16).slice(1));function k(t,l=0){return(o[t[l+0]]+o[t[l+1]]+o[t[l+2]]+o[t[l+3]]+"-"+o[t[l+4]]+o[t[l+5]]+"-"+o[t[l+6]]+o[t[l+7]]+"-"+o[t[l+8]]+o[t[l+9]]+"-"+o[t[l+10]]+o[t[l+11]]+o[t[l+12]]+o[t[l+13]]+o[t[l+14]]+o[t[l+15]]).toLowerCase()}let b;const E=new Uint8Array(16);function _(){if(!b){if(typeof crypto>"u"||!crypto.getRandomValues)throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");b=crypto.getRandomValues.bind(crypto)}return b(E)}const f={randomUUID:typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function x(t,l,n){var r;if(f.randomUUID&&!l&&!t)return f.randomUUID();t=t||{};const d=t.random??((r=t.rng)==null?void 0:r.call(t))??_();if(d.length<16)throw new Error("Random bytes length must be >= 16");if(d[6]=d[6]&15|64,d[8]=d[8]&63|128,l){if(n=n||0,n<0||n+16>l.length)throw new RangeError(`UUID byte range ${n}:${n+15} is out of buffer bounds`);for(let y=0;y<16;++y)l[n+y]=d[y];return l}return k(d)}const j="",V={class:"abl-table"},S=["id"],N={class:"gridtable"},C={class:"table-thead"},w=["id"],H={class:"gridtable"},U={key:0},L=["colspan"],z=[e.createElementVNode("div",{class:"no-data-div"},[e.createElementVNode("div",{class:"empty-center"})],-1)],u={__name:"index",props:{name:"abl-table",data:{type:Array,default:[]},columns:{type:Array,default:[]},border:{type:Boolean,default:!1},height:{type:Number,default:null},stripe:{type:Boolean,default:!1}},setup(t,{emit:l}){const n=t,d=e.computed(()=>({maxHeight:n.height?n.height+"px":""})),r=e.ref(),y=e.ref(),h=e.ref({bodyHandler:null,headHandler:null});e.onMounted(async()=>{r.value=x(),await e.nextTick();const a=document.getElementById("tableBody"+r.value),s=document.getElementById("tableHead"+r.value);if(!a)return;(a==null?void 0:a.scrollHeight)>(a==null?void 0:a.clientHeight)?y.value={width:"calc(100% - 2px)",paddingRight:"2px"}:y.value={};let i=!1;function g(p,R){i||(i=!0,R.scrollLeft=p==null?void 0:p.scrollLeft,i=!1)}h.value.bodyHandler=()=>g(a,s),h.value.headHandler=()=>g(s,a),a.addEventListener("scroll",h.value.bodyHandler,{passive:!0}),s.addEventListener("scroll",h.value.headHandler,{passive:!0})}),e.onUnmounted(()=>{const a=document.getElementById("tableBody"+r.value),s=document.getElementById("tableHead"+r.value);a&&a.removeEventListener("scroll",h.value.bodyHandler,{passive:!0}),s&&s.removeEventListener("scroll",h.value.headHandler,{passive:!0})});const T=a=>{let s=document.getElementsByClassName("table-fixed-column--left");a.target.scrollLeft>0?[...s].forEach(c=>{c.classList.add("box-shadow")}):[...s].forEach(c=>{c.classList.remove("box-shadow")})};return(a,s)=>(e.openBlock(),e.createElementBlock("section",null,[e.createElementVNode("div",V,[e.createElementVNode("div",{class:e.normalizeClass(["table__inner-wrapper",t.border?"has-table-border":""]),id:"box"},[e.createElementVNode("div",{class:"table__head",id:r.value?"tableHead"+r.value:"",style:e.normalizeStyle(y.value)},[e.createElementVNode("table",N,[e.createElementVNode("colgroup",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.columns,(c,i)=>(e.openBlock(),e.createElementBlock("col",{key:i,style:e.normalizeStyle({width:c.width||"50px"})},null,4))),128))]),e.createElementVNode("thead",C,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.columns,(c,i)=>(e.openBlock(),e.createElementBlock("th",{key:i,class:e.normalizeClass(c.fixed=="left"?"table-fixed-column--left":c.fixed=="right"?"table-fixed-column--right":"")},[e.createElementVNode("div",{class:"cell",style:e.normalizeStyle({"text-align":c.align||"left"})},e.toDisplayString(c.title),5)],2))),128))])])])],12,S),e.createElementVNode("div",{style:e.normalizeStyle(d.value),class:"table__body",id:r.value?"tableBody"+r.value:"",onScroll:T},[e.createElementVNode("table",H,[e.createElementVNode("colgroup",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.columns,(c,i)=>(e.openBlock(),e.createElementBlock("col",{key:i,class:"",style:e.normalizeStyle({width:c.width||"50px"})},null,4))),128))]),n.data.length>0?(e.openBlock(),e.createElementBlock("tbody",U,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.data,(c,i)=>(e.openBlock(),e.createElementBlock("tr",{key:i,class:e.normalizeClass([{"tr-selected":c.selected,"tr-stripe":n.stripe&&i%2==0}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,(g,p)=>(e.openBlock(),e.createElementBlock("td",{key:p,class:e.normalizeClass(g.fixed=="left"?"table-fixed-column--left":g.fixed=="right"?"table-fixed-column--right":"")},[e.createElementVNode("div",{class:"cell",style:e.normalizeStyle({"text-align":g.align||"left"})},e.toDisplayString(c[g.prop]),5)],2))),128))],2))),128))])):e.createCommentVNode("",!0)])],44,w),n.data.length==0?(e.openBlock(),e.createElementBlock("div",{key:0,class:"no-data-td",colspan:n.columns.length},z,8,L)):e.createCommentVNode("",!0)],2)])]))}},M="",I={key:0,class:"iconfont-abl icon-abl-loading2 abl-icon-loading"},$={class:"abl-button__text"},B=Object.assign({name:"AblButton"},{props:{type:{type:String,default:"default"},dashed:{type:Boolean,default:!1},circle:{type:Boolean,default:!1},round:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},icon:{type:String,default:""},iconPosition:{type:String,default:"left"},loading:{type:Boolean,default:!1},loadingText:{type:String,default:"loading..."}},setup(t){const l=t,n=e.computed(()=>({[`abl-button-${l.type}`]:l.type,"is-dashed":l.dashed,"is-round":l.round,"is-circle":l.circle,"is-disabled":l.disabled}));return(d,r)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["abl-button",n.value])},[t.loading?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.loading?(e.openBlock(),e.createElementBlock("i",I)):e.createCommentVNode("",!0),e.createElementVNode("span",null,e.toDisplayString(t.loadingText),1)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[t.iconPosition==="left"?e.renderSlot(d.$slots,"icon",{key:0},()=>[t.icon?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(["iconfont-abl slot-icon-left",t.icon])},null,2)):e.createCommentVNode("",!0)]):e.createCommentVNode("",!0),e.createElementVNode("span",$,[e.renderSlot(d.$slots,"default")]),t.iconPosition==="right"?e.renderSlot(d.$slots,"icon",{key:1},()=>[t.icon?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(["iconfont-abl slot-icon-right",t.icon])},null,2)):e.createCommentVNode("",!0)]):e.createCommentVNode("",!0)],64))],2))}}),D=[B,u],F={install:function(t,l){D.forEach(n=>{t.component(n.name,n)}),t.config.globalProperties.$lockCount=0}};m.ablButton=B,m.ablTable=u,m.default=F,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
@charset "UTF-8";.table__inner-wrapper{width:100%;position:relative;border:none;overflow:hidden}.table__body{overflow-x:auto;overflow-y:auto;width:100%}.table__head{overflow-x:auto;background-color:#f9f9f9;box-sizing:content-box}.table__head::-webkit-scrollbar{display:none}.table__body::-webkit-scrollbar{width:2px;height:4px}.table__body::-webkit-scrollbar-thumb{background-color:#f1f1f1;border-radius:4px}.table__body::-webkit-scrollbar-track{background-color:#fff}table.gridtable{font-size:13px;color:#333;border-width:1px;border-color:#ccc;border-collapse:collapse;width:100%;table-layout:fixed}table.gridtable .tr-selected{background-color:#faf4ec}table.gridtable .table-thead{color:#909399;position:sticky;top:0}table.gridtable .table-thead th{padding:16px 0;font-weight:500;border-bottom:1px solid #ebeef5;min-width:0;box-sizing:border-box;text-overflow:ellipsis}table.gridtable .table-thead th .cell{padding:0 12px;box-sizing:border-box;overflow:hidden;white-space:normal;overflow-wrap:break-word;line-height:1.2}table.gridtable td{padding:16px 0;color:#606266;border-bottom:1px solid #ebeef5;min-width:0;box-sizing:border-box;text-overflow:ellipsis}table.gridtable td .cell{padding:0 12px;box-sizing:border-box;overflow:hidden;white-space:normal;overflow-wrap:break-word;line-height:1.2}table.gridtable .table-fixed-column--left{position:sticky!important;left:0;background:inherit;background-color:#fff}table.gridtable th.table-fixed-column--left{background-color:#f9f9f9}table.gridtable .box-shadow{box-shadow:inset -10px 0 10px -10px #00000026}table.gridtable .tr-stripe{background-color:#faf4ec}table.gridtable .tr-stripe .table-fixed-column--left{background-color:#faf4ec!important}.table__body tr:hover,.table__body tr:hover .table-fixed-column--left{background-color:#faf4ec}.no-data-td{text-align:center;left:0;position:sticky}.no-data-td .no-data-div{width:100%;height:140px;padding-top:10px}.has-table-border{border:1px solid #ebeef5}.has-table-border td,.has-table-border th{border-bottom:1px solid #ebeef5;border-right:1px solid #ebeef5}.has-table-border tr:last-child td{border-bottom:none}.has-table-border td:last-child{border-right:none}.has-table-border th:last-child{border-bottom:none;border-right:none}.abl-button{box-sizing:border-box;font-size:14px;background-color:#fff;padding:0 15px;height:40px;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;border-radius:4px;transition:all .25s;color:#111;border:1px solid #d9d9d9;-webkit-user-select:none;user-select:none}.abl-button:focus{outline:none}.abl-button::-moz-focus-inner{border:0}.abl-button.is-circle{border-radius:100%;width:40px}.abl-button.is-round{border-radius:20px}.abl-button.abl-button-default:hover{color:#111;border-color:#111}.abl-button.abl-button-default:active{opacity:1}.abl-button.abl-button-default.is-dashed{border-style:dashed}.abl-button.abl-button-primary{background-color:#111;border-color:#111;color:#fff}.abl-button.abl-button-primary:hover{opacity:.9}.abl-button.abl-button-primary:active{opacity:1}.abl-button.abl-button-primary.is-disabled{cursor:not-allowed;opacity:.5}.abl-button.abl-button-primary.is-disabled:hover{opacity:.5}.abl-button.abl-button-primary.is-dashed{border-style:dashed;background-color:#fff!important;color:#111}.abl-button.abl-button-info{background-color:#909399;border-color:#909399;color:#fff}.abl-button.abl-button-info:hover{opacity:.9}.abl-button.abl-button-info:active{opacity:1}.abl-button.abl-button-info.is-disabled{cursor:not-allowed;opacity:.5}.abl-button.abl-button-info.is-disabled:hover{opacity:.5}.abl-button.abl-button-info.is-dashed{border-style:dashed;background-color:#fff!important;color:#909399}.abl-button.abl-button-success{background-color:#67c23a;border-color:#67c23a;color:#fff}.abl-button.abl-button-success:hover{opacity:.8}.abl-button.abl-button-success:active{opacity:1}.abl-button.abl-button-success.is-disabled{cursor:not-allowed;opacity:.5}.abl-button.abl-button-success.is-disabled:hover{opacity:.5}.abl-button.abl-button-success.is-dashed{border-style:dashed;background-color:#fff!important;color:#67c23a}.abl-button.abl-button-warning{background-color:#e6a23c;border-color:#e6a23c;color:#fff}.abl-button.abl-button-warning:hover{opacity:.8}.abl-button.abl-button-warning:active{opacity:1}.abl-button.abl-button-warning.is-disabled{cursor:not-allowed;opacity:.5}.abl-button.abl-button-warning.is-disabled:hover{opacity:.5}.abl-button.abl-button-warning.is-dashed{border-style:dashed;background-color:#fff!important;color:#e6a23c}.abl-button.abl-button-danger{background-color:#f56c6c;border-color:#f56c6c;color:#fff}.abl-button.abl-button-danger:hover{opacity:.8}.abl-button.abl-button-danger:active{opacity:1}.abl-button.abl-button-danger.is-disabled{cursor:not-allowed;opacity:.5}.abl-button.abl-button-danger.is-disabled:hover{opacity:.5}.abl-button.abl-button-danger.is-dashed{border-style:dashed;background-color:#fff!important;color:#f56c6c}.abl-button>.abl-icon-loading{margin-right:4px;animation:abl-spin 1s infinite linear}.abl-button>.slot-icon-left{margin-right:5px}.abl-button>.slot-icon-right{margin-left:5px}@keyframes abl-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
|