@cregis/ui 0.1.0 → 0.1.1
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/es/cregis-ui.js +15 -519
- package/dist/types/index.d.ts +41 -189
- package/dist/umd/cregis-ui.umd.cjs +1 -1
- package/package.json +1 -1
package/dist/es/cregis-ui.js
CHANGED
|
@@ -1,532 +1,28 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
|
|
3
|
-
const ue = {
|
|
4
|
-
key: 0,
|
|
5
|
-
class: "cregis-button__icon-wrapper"
|
|
6
|
-
}, me = ["disabled"], be = ["disabled"], fe = ["disabled"], p = /* @__PURE__ */ k({
|
|
7
|
-
name: "Button",
|
|
8
|
-
inheritAttrs: !1,
|
|
9
|
-
__name: "Button",
|
|
10
|
-
props: {
|
|
11
|
-
type: { default: "primary" },
|
|
12
|
-
size: { default: "medium" },
|
|
13
|
-
plain: { type: Boolean },
|
|
14
|
-
text: { type: Boolean },
|
|
15
|
-
disabled: { type: Boolean },
|
|
16
|
-
loading: { type: Boolean },
|
|
17
|
-
block: { type: Boolean },
|
|
18
|
-
link: { type: Boolean },
|
|
19
|
-
icon: {},
|
|
20
|
-
iconType: { default: "rectangle" },
|
|
21
|
-
iconText: {},
|
|
22
|
-
affix: { type: Boolean }
|
|
23
|
-
},
|
|
24
|
-
setup(e) {
|
|
25
|
-
const t = e, i = y(() => t.size === "large" ? "20px" : t.size === "medium" ? "16px" : "12px"), d = y(() => t.size === "large" || t.size === "medium" ? "16px" : "12px"), n = y(() => {
|
|
26
|
-
if (t.plain || t.text)
|
|
27
|
-
switch (t.type) {
|
|
28
|
-
case "primary":
|
|
29
|
-
return "var(--material-vibrant-brand-primary)";
|
|
30
|
-
case "secondary":
|
|
31
|
-
return "var(--material-foreground-base-secondary)";
|
|
32
|
-
case "danger":
|
|
33
|
-
return "var(--material-vibrant-error-primary)";
|
|
34
|
-
case "foreground":
|
|
35
|
-
return "var(--material-foreground-base-primary)";
|
|
36
|
-
case "sameWhite":
|
|
37
|
-
return "var(--material-same-black)";
|
|
38
|
-
}
|
|
39
|
-
else
|
|
40
|
-
return t.type === "secondary" ? "var(--material-foreground-base-secondary)" : t.type === "foreground" ? "var(--text-face-primary)" : t.type === "sameWhite" ? "var(--text-same-black)" : "var(--material-same-white)";
|
|
41
|
-
});
|
|
42
|
-
return (a, o) => e.icon || a.$slots.icon ? (s(), r("div", ue, [
|
|
43
|
-
c("button", x(a.$attrs, {
|
|
44
|
-
class: ["cregis-button__icon", {
|
|
45
|
-
[`cregis-button__icon--${e.iconType}`]: e.iconType,
|
|
46
|
-
[`cregis-button__icon--${e.size}`]: e.size,
|
|
47
|
-
"is-disabled": e.disabled
|
|
48
|
-
}],
|
|
49
|
-
disabled: e.disabled || e.loading
|
|
50
|
-
}), [
|
|
51
|
-
e.icon ? (s(), L(Q(e.icon), {
|
|
52
|
-
key: 0,
|
|
53
|
-
size: i.value,
|
|
54
|
-
"stroke-width": 3
|
|
55
|
-
}, null, 8, ["size"])) : v(a.$slots, "icon", { key: 1 })
|
|
56
|
-
], 16, me),
|
|
57
|
-
e.iconText ? (s(), r("span", {
|
|
58
|
-
key: 0,
|
|
59
|
-
class: g(["cregis-button__icon-text", { "is-disabled": e.disabled }])
|
|
60
|
-
}, w(e.iconText), 3)) : h("", !0)
|
|
61
|
-
])) : e.link ? (s(), r("button", x({ key: 1 }, a.$attrs, {
|
|
62
|
-
class: ["cregis-button__link", {
|
|
63
|
-
[`cregis-button__link--${e.type}`]: e.type,
|
|
64
|
-
[`cregis-button__link--${e.size}`]: e.size,
|
|
65
|
-
"is-disabled": e.disabled
|
|
66
|
-
}],
|
|
67
|
-
disabled: e.disabled || e.loading
|
|
68
|
-
}), [
|
|
69
|
-
v(a.$slots, "default")
|
|
70
|
-
], 16, be)) : (s(), r("button", x({
|
|
71
|
-
key: 2,
|
|
72
|
-
ref: "buttonRef"
|
|
73
|
-
}, a.$attrs, {
|
|
74
|
-
class: ["cregis-button", {
|
|
75
|
-
[`cregis-button--${e.type}`]: e.type,
|
|
76
|
-
[`cregis-button--${e.size}`]: e.size,
|
|
77
|
-
"is-plain": e.plain,
|
|
78
|
-
"is-text": e.text,
|
|
79
|
-
"is-disabled": e.disabled,
|
|
80
|
-
"is-loading": e.loading,
|
|
81
|
-
"is-block": e.block,
|
|
82
|
-
"is-affix": e.affix
|
|
83
|
-
}],
|
|
84
|
-
disabled: e.disabled || e.loading
|
|
85
|
-
}), [
|
|
86
|
-
e.loading ? (s(), L(j(de), {
|
|
87
|
-
key: 0,
|
|
88
|
-
class: "loading",
|
|
89
|
-
size: d.value,
|
|
90
|
-
color: n.value,
|
|
91
|
-
"stroke-width": 3
|
|
92
|
-
}, null, 8, ["size", "color"])) : v(a.$slots, "default", { key: 1 })
|
|
93
|
-
], 16, fe));
|
|
94
|
-
}
|
|
95
|
-
}), ge = {
|
|
96
|
-
key: 0,
|
|
97
|
-
class: "cregis-input__prefix"
|
|
98
|
-
}, ye = ["type", "placeholder", "disabled"], he = {
|
|
99
|
-
key: 2,
|
|
100
|
-
class: "cregis-input__suffix"
|
|
101
|
-
}, ve = ["disabled", "placeholder", "rows"], ke = {
|
|
102
|
-
key: 0,
|
|
103
|
-
class: "cregis-textarea__buttons"
|
|
104
|
-
}, T = /* @__PURE__ */ k({
|
|
105
|
-
name: "Input",
|
|
106
|
-
inheritAttrs: !1,
|
|
107
|
-
__name: "Input",
|
|
108
|
-
props: {
|
|
109
|
-
type: { default: "text" },
|
|
110
|
-
modelValue: {},
|
|
111
|
-
size: { default: "medium" },
|
|
112
|
-
width: { default: "300px" },
|
|
113
|
-
placeholder: { default: "please input" },
|
|
114
|
-
disabled: { type: Boolean },
|
|
115
|
-
clearable: { type: Boolean },
|
|
116
|
-
inputStyle: {},
|
|
117
|
-
unit: {},
|
|
118
|
-
rows: { default: 3 }
|
|
119
|
-
},
|
|
120
|
-
emits: ["update:modelValue", "input", "change", "focus", "blur", "clear"],
|
|
121
|
-
setup(e, { expose: t, emit: i }) {
|
|
122
|
-
const d = e, n = i, a = z(d.modelValue);
|
|
123
|
-
E(
|
|
124
|
-
() => d.modelValue,
|
|
125
|
-
(l) => {
|
|
126
|
-
a.value = l;
|
|
127
|
-
}
|
|
128
|
-
);
|
|
129
|
-
const o = z(), u = z(0), f = z(!1);
|
|
130
|
-
let C = null;
|
|
131
|
-
const G = async () => {
|
|
132
|
-
await Y(), o.value?.focus();
|
|
133
|
-
}, A = async () => {
|
|
134
|
-
n("update:modelValue", a.value), n("input", a.value), await Y(), U();
|
|
135
|
-
}, F = () => {
|
|
136
|
-
n("change", a.value);
|
|
137
|
-
}, D = (l) => {
|
|
138
|
-
f.value = !0, n("focus", l);
|
|
139
|
-
}, P = (l) => {
|
|
140
|
-
f.value = !1, n("blur", l);
|
|
141
|
-
}, M = y(() => d.clearable && !d.disabled && !!a.value && f.value), W = () => {
|
|
142
|
-
a.value = "", n("update:modelValue", ""), n("clear"), n("input", ""), n("change", "");
|
|
143
|
-
}, U = () => {
|
|
144
|
-
C && cancelAnimationFrame(C), C = requestAnimationFrame(() => {
|
|
145
|
-
if (!o.value || o.value.tagName !== "INPUT") return;
|
|
146
|
-
const l = o.value, b = l.value, m = document.createElement("span");
|
|
147
|
-
m.style.position = "absolute", m.style.visibility = "hidden", m.style.whiteSpace = "pre", m.style.font = window.getComputedStyle(l).font, m.style.letterSpacing = window.getComputedStyle(l).letterSpacing, m.textContent = b || " ", document.body.appendChild(m), u.value = m.getBoundingClientRect().width, document.body.removeChild(m);
|
|
148
|
-
});
|
|
149
|
-
}, H = y(() => {
|
|
150
|
-
const l = {};
|
|
151
|
-
return u.value > 0 && (l.position = "absolute", l.left = `${u.value + 16}px`), l;
|
|
152
|
-
}), J = async () => {
|
|
153
|
-
try {
|
|
154
|
-
a.value = await navigator.clipboard.readText();
|
|
155
|
-
} catch (l) {
|
|
156
|
-
console.error("paste error:", l);
|
|
157
|
-
}
|
|
158
|
-
};
|
|
159
|
-
return t({
|
|
160
|
-
focus: G,
|
|
161
|
-
updateTextWidth: U
|
|
162
|
-
}), (l, b) => e.type !== "textarea" ? (s(), r("div", {
|
|
163
|
-
key: 0,
|
|
164
|
-
class: g(["cregis-input", {
|
|
165
|
-
[`cregis-input--${e.size}`]: e.size,
|
|
166
|
-
"is-disabled": e.disabled,
|
|
167
|
-
"is-prefix": l.$slots.prefix,
|
|
168
|
-
"is-suffix": l.$slots.suffix
|
|
169
|
-
}]),
|
|
170
|
-
style: $([{ width: e.width }, e.inputStyle])
|
|
171
|
-
}, [
|
|
172
|
-
c("div", {
|
|
173
|
-
class: g(["cregis-input__wrapper", { "is-focus": f.value }])
|
|
174
|
-
}, [
|
|
175
|
-
l.$slots.prefix ? (s(), r("span", ge, [
|
|
176
|
-
v(l.$slots, "prefix")
|
|
177
|
-
])) : h("", !0),
|
|
178
|
-
q(c("input", x({
|
|
179
|
-
class: "cregis-input__inner",
|
|
180
|
-
"onUpdate:modelValue": b[0] || (b[0] = (m) => a.value = m),
|
|
181
|
-
ref_key: "inputRef",
|
|
182
|
-
ref: o,
|
|
183
|
-
type: e.type,
|
|
184
|
-
placeholder: e.placeholder
|
|
185
|
-
}, l.$attrs, {
|
|
186
|
-
disabled: e.disabled,
|
|
187
|
-
onInput: A,
|
|
188
|
-
onChange: F,
|
|
189
|
-
onFocus: D,
|
|
190
|
-
onBlur: P
|
|
191
|
-
}), null, 16, ye), [
|
|
192
|
-
[X, a.value]
|
|
193
|
-
]),
|
|
194
|
-
e.unit && a.value ? (s(), r("span", {
|
|
195
|
-
key: 1,
|
|
196
|
-
style: $(H.value),
|
|
197
|
-
class: "cregis-input__unit"
|
|
198
|
-
}, w(e.unit), 5)) : h("", !0),
|
|
199
|
-
l.$slots.suffix || M.value ? (s(), r("span", he, [
|
|
200
|
-
v(l.$slots, "suffix"),
|
|
201
|
-
M.value ? (s(), L(p, {
|
|
202
|
-
key: 0,
|
|
203
|
-
class: "cregis-input__clear-button",
|
|
204
|
-
icon: j(ce),
|
|
205
|
-
"icon-type": "square",
|
|
206
|
-
onClick: W,
|
|
207
|
-
onMousedown: b[1] || (b[1] = _(() => {
|
|
208
|
-
}, ["prevent"]))
|
|
209
|
-
}, null, 8, ["icon"])) : h("", !0)
|
|
210
|
-
])) : h("", !0)
|
|
211
|
-
], 2)
|
|
212
|
-
], 6)) : (s(), r("div", {
|
|
213
|
-
key: 1,
|
|
214
|
-
class: g(["cregis-textarea", { "is-disabled": e.disabled }]),
|
|
215
|
-
style: $([{ width: e.width }, e.inputStyle])
|
|
216
|
-
}, [
|
|
217
|
-
q(c("textarea", x({ class: "cregis-textarea__wrapper" }, l.$attrs, {
|
|
218
|
-
ref_key: "inputRef",
|
|
219
|
-
ref: o,
|
|
220
|
-
disabled: e.disabled,
|
|
221
|
-
placeholder: e.placeholder,
|
|
222
|
-
rows: e.rows,
|
|
223
|
-
"onUpdate:modelValue": b[2] || (b[2] = (m) => a.value = m),
|
|
224
|
-
onInput: A,
|
|
225
|
-
onChange: F,
|
|
226
|
-
onFocus: D,
|
|
227
|
-
onBlur: P
|
|
228
|
-
}), null, 16, ve), [
|
|
229
|
-
[ee, a.value]
|
|
230
|
-
]),
|
|
231
|
-
e.disabled ? h("", !0) : (s(), r("div", ke, [
|
|
232
|
-
K(p, {
|
|
233
|
-
class: "cregis-textarea__button",
|
|
234
|
-
link: "",
|
|
235
|
-
size: "small",
|
|
236
|
-
onClick: J
|
|
237
|
-
}, {
|
|
238
|
-
default: O(() => [...b[3] || (b[3] = [
|
|
239
|
-
N(" Paste ", -1)
|
|
240
|
-
])]),
|
|
241
|
-
_: 1
|
|
242
|
-
}),
|
|
243
|
-
K(p, {
|
|
244
|
-
class: "cregis-textarea__button",
|
|
245
|
-
link: "",
|
|
246
|
-
size: "small",
|
|
247
|
-
disabled: !a.value,
|
|
248
|
-
onClick: W
|
|
249
|
-
}, {
|
|
250
|
-
default: O(() => [...b[4] || (b[4] = [
|
|
251
|
-
N(" Clear ", -1)
|
|
252
|
-
])]),
|
|
253
|
-
_: 1
|
|
254
|
-
}, 8, ["disabled"])
|
|
255
|
-
]))
|
|
256
|
-
], 6));
|
|
257
|
-
}
|
|
258
|
-
});
|
|
259
|
-
T.install = (e) => {
|
|
260
|
-
e.component(T.name, T);
|
|
261
|
-
};
|
|
262
|
-
p.install = (e) => {
|
|
263
|
-
e.component(p.name, p);
|
|
264
|
-
};
|
|
265
|
-
const pe = ["width", "height"], xe = {
|
|
266
|
-
stroke: "none",
|
|
267
|
-
"stroke-width": "1",
|
|
268
|
-
fill: "none",
|
|
269
|
-
"fill-rule": "evenodd"
|
|
270
|
-
}, $e = { transform: "translate(-394.000000, -457.000000)" }, we = { transform: "translate(394.000000, 457.000000)" }, Ce = ["width", "height"], ze = /* @__PURE__ */ k({
|
|
271
|
-
__name: "checked-basis",
|
|
272
|
-
props: {
|
|
273
|
-
size: { default: "16px" }
|
|
274
|
-
},
|
|
275
|
-
setup(e) {
|
|
276
|
-
return (t, i) => (s(), r("svg", {
|
|
277
|
-
width: e.size,
|
|
278
|
-
height: e.size,
|
|
279
|
-
viewBox: "0 0 16 16",
|
|
280
|
-
version: "1.1",
|
|
281
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
282
|
-
"xmlns:xlink": "http://www.w3.org/1999/xlink"
|
|
283
|
-
}, [
|
|
284
|
-
c("g", xe, [
|
|
285
|
-
c("g", $e, [
|
|
286
|
-
c("g", we, [
|
|
287
|
-
c("rect", {
|
|
288
|
-
x: "0",
|
|
289
|
-
y: "0",
|
|
290
|
-
width: e.size,
|
|
291
|
-
height: e.size
|
|
292
|
-
}, null, 8, Ce),
|
|
293
|
-
i[0] || (i[0] = c("path", {
|
|
294
|
-
d: "M6.67713976,13.5709642 C7.12567714,13.5709642 7.468039,13.3943662 7.70422535,13.0411701 L13.7562297,3.77789816 C13.8407367,3.65005417 13.9024919,3.52546046 13.9414951,3.40411701 C13.9804984,3.28277356 14,3.16468039 14,3.04983749 C14,2.74647887 13.8976165,2.49566631 13.6928494,2.29739978 C13.4880823,2.09913326 13.2307692,2 12.9209101,2 C12.7063922,2 12.5265439,2.04225352 12.3813651,2.12676056 C12.2361863,2.21126761 12.0975081,2.35536295 11.9653304,2.55904659 L6.65113759,10.9512459 L3.95016251,7.60346696 C3.71830986,7.32177681 3.43011918,7.18093174 3.08559047,7.18093174 C2.77139762,7.18093174 2.51191766,7.28169014 2.3071506,7.48320693 C2.10238353,7.68472373 2,7.93824485 2,8.24377031 C2,8.38028169 2.02329361,8.51083424 2.06988082,8.63542795 C2.11646804,8.76002167 2.19826652,8.88949079 2.31527627,9.02383532 L5.67280607,13.0899242 C5.94149512,13.4106176 6.27627302,13.5709642 6.67713976,13.5709642 Z",
|
|
295
|
-
fill: "currentColor",
|
|
296
|
-
"fill-rule": "nonzero"
|
|
297
|
-
}, null, -1))
|
|
298
|
-
])
|
|
299
|
-
])
|
|
300
|
-
])
|
|
301
|
-
], 8, pe));
|
|
302
|
-
}
|
|
303
|
-
}), Te = {
|
|
304
|
-
key: 0,
|
|
305
|
-
class: "cregis-checkbox--indeterminate"
|
|
306
|
-
}, B = /* @__PURE__ */ k({
|
|
307
|
-
name: "Checkbox",
|
|
308
|
-
__name: "Checkbox",
|
|
309
|
-
props: {
|
|
310
|
-
modelValue: { type: [Boolean, Number], default: !1 },
|
|
311
|
-
label: {},
|
|
312
|
-
disabled: { type: Boolean, default: !1 },
|
|
313
|
-
circle: { type: Boolean },
|
|
314
|
-
indeterminate: { type: Boolean }
|
|
315
|
-
},
|
|
316
|
-
emits: ["update:modelValue", "change"],
|
|
317
|
-
setup(e, { emit: t }) {
|
|
318
|
-
const i = e, d = t, n = y(() => i.modelValue), a = () => {
|
|
319
|
-
i.disabled || d("update:modelValue", !n.value);
|
|
320
|
-
};
|
|
321
|
-
return E(
|
|
322
|
-
() => n.value,
|
|
323
|
-
() => {
|
|
324
|
-
d("change", n.value);
|
|
325
|
-
}
|
|
326
|
-
), (o, u) => (s(), r("div", {
|
|
327
|
-
class: "cregis-checkbox__wrapper",
|
|
328
|
-
onClick: a
|
|
329
|
-
}, [
|
|
330
|
-
c("div", {
|
|
331
|
-
class: g(["cregis-checkbox", {
|
|
332
|
-
"is-disabled": e.disabled,
|
|
333
|
-
"is-checked": n.value,
|
|
334
|
-
"is-circle": e.circle,
|
|
335
|
-
"is-indeterminate": e.indeterminate
|
|
336
|
-
}])
|
|
337
|
-
}, [
|
|
338
|
-
e.indeterminate ? (s(), r("div", Te)) : (s(), L(ze, {
|
|
339
|
-
key: 1,
|
|
340
|
-
size: "10px"
|
|
341
|
-
}))
|
|
342
|
-
], 2),
|
|
343
|
-
o.$slots.default || e.label ? (s(), r("span", {
|
|
344
|
-
key: 0,
|
|
345
|
-
class: g(["cregis-checkbox__label", { "is-disabled": e.disabled }])
|
|
346
|
-
}, [
|
|
347
|
-
v(o.$slots, "default", {}, () => [
|
|
348
|
-
N(w(e.label), 1)
|
|
349
|
-
])
|
|
350
|
-
], 2)) : h("", !0)
|
|
351
|
-
]));
|
|
352
|
-
}
|
|
353
|
-
});
|
|
354
|
-
B.install = (e) => {
|
|
355
|
-
e.component(B.name, B);
|
|
356
|
-
};
|
|
357
|
-
const S = /* @__PURE__ */ k({
|
|
358
|
-
name: "Radio",
|
|
359
|
-
__name: "Radio",
|
|
360
|
-
props: {
|
|
361
|
-
modelValue: { type: [Boolean, String, Number] },
|
|
362
|
-
value: { type: [Boolean, String, Number] },
|
|
363
|
-
label: {},
|
|
364
|
-
disabled: { type: Boolean }
|
|
365
|
-
},
|
|
366
|
-
emits: ["update:modelValue", "change"],
|
|
367
|
-
setup(e, { emit: t }) {
|
|
368
|
-
const i = e, d = t, n = y(() => i.modelValue === i.value), a = () => {
|
|
369
|
-
i.disabled || (d("update:modelValue", i.value), d("change", i.value));
|
|
370
|
-
};
|
|
371
|
-
return (o, u) => (s(), r("div", {
|
|
372
|
-
class: "cregis-radio__wrapper",
|
|
373
|
-
onClick: a
|
|
374
|
-
}, [
|
|
375
|
-
c("div", {
|
|
376
|
-
class: g(["cregis-radio", {
|
|
377
|
-
"is-disabled": e.disabled,
|
|
378
|
-
"is-checked": n.value
|
|
379
|
-
}])
|
|
380
|
-
}, [...u[0] || (u[0] = [
|
|
381
|
-
c("div", { class: "cregis-radio__inner" }, null, -1)
|
|
382
|
-
])], 2),
|
|
383
|
-
o.$slots.default || e.label ? (s(), r("span", {
|
|
384
|
-
key: 0,
|
|
385
|
-
class: g(["cregis-radio__label", { "is-disabled": e.disabled }])
|
|
386
|
-
}, [
|
|
387
|
-
v(o.$slots, "default", {}, () => [
|
|
388
|
-
N(w(e.label), 1)
|
|
389
|
-
])
|
|
390
|
-
], 2)) : h("", !0)
|
|
391
|
-
]));
|
|
392
|
-
}
|
|
393
|
-
});
|
|
394
|
-
S.install = (e) => {
|
|
395
|
-
e.component(S.name, S);
|
|
396
|
-
};
|
|
397
|
-
const V = /* @__PURE__ */ k({
|
|
398
|
-
name: "Divider",
|
|
399
|
-
__name: "Divider",
|
|
400
|
-
props: {
|
|
401
|
-
direction: { default: "horizontal" },
|
|
402
|
-
borderStyle: { default: "solid" },
|
|
403
|
-
lineThickness: { default: "1px" },
|
|
404
|
-
color: { default: "var(--line-module)" },
|
|
405
|
-
margin: { default: "8px" },
|
|
406
|
-
length: {}
|
|
407
|
-
},
|
|
408
|
-
setup(e) {
|
|
409
|
-
const t = e, i = y(() => {
|
|
410
|
-
if (Array.isArray(t.margin)) {
|
|
411
|
-
const [n, a] = t.margin;
|
|
412
|
-
return t.direction === "horizontal" ? `${n} 0 ${a} 0` : `0 ${a} 0 ${n}`;
|
|
413
|
-
} else
|
|
414
|
-
return t.direction === "horizontal" ? `${t.margin} 0` : `0 ${t.margin}`;
|
|
415
|
-
}), d = y(() => t.direction === "horizontal" ? {
|
|
416
|
-
width: t.length || "100%",
|
|
417
|
-
borderTopWidth: t.lineThickness,
|
|
418
|
-
borderTopStyle: t.borderStyle,
|
|
419
|
-
borderTopColor: t.color,
|
|
420
|
-
margin: i.value
|
|
421
|
-
} : {
|
|
422
|
-
height: t.length || "1rem",
|
|
423
|
-
borderLeftWidth: t.lineThickness,
|
|
424
|
-
borderLeftStyle: t.borderStyle,
|
|
425
|
-
borderLeftColor: t.color,
|
|
426
|
-
margin: i.value
|
|
427
|
-
});
|
|
428
|
-
return (n, a) => (s(), r("div", {
|
|
429
|
-
class: g(["cregis-divider", {
|
|
430
|
-
[`cregis-divider--${e.direction}`]: e.direction
|
|
431
|
-
}]),
|
|
432
|
-
style: $(d.value)
|
|
433
|
-
}, null, 6));
|
|
434
|
-
}
|
|
435
|
-
});
|
|
436
|
-
V.install = (e) => {
|
|
437
|
-
e.component(V.name, V);
|
|
438
|
-
};
|
|
439
|
-
const Z = Symbol("TABS_KEY"), Be = ["onClick"], Se = { style: { display: "none" } }, R = /* @__PURE__ */ k({
|
|
440
|
-
name: "Tabs",
|
|
441
|
-
__name: "Tabs",
|
|
442
|
-
props: {
|
|
443
|
-
modelValue: {},
|
|
444
|
-
type: { default: "default" },
|
|
445
|
-
size: { default: "medium" }
|
|
446
|
-
},
|
|
447
|
-
emits: ["update:modelValue"],
|
|
448
|
-
setup(e) {
|
|
449
|
-
const t = e, i = te([]), d = (o) => {
|
|
450
|
-
i.some((u) => u.name === o.name) || i.push(o);
|
|
451
|
-
}, n = (o) => {
|
|
452
|
-
const u = i.findIndex((f) => f.name === o);
|
|
453
|
-
u !== -1 && i.splice(u, 1);
|
|
454
|
-
}, a = y(() => t.type === "card" ? t.size === "large" ? {
|
|
455
|
-
borderRadius: "13px"
|
|
456
|
-
} : t.size === "medium" ? {
|
|
457
|
-
borderRadius: "11px"
|
|
458
|
-
} : {
|
|
459
|
-
borderRadius: "9px"
|
|
460
|
-
} : {
|
|
461
|
-
borderRadius: 0
|
|
462
|
-
});
|
|
463
|
-
return ae(Z, {
|
|
464
|
-
activeName: ie(t, "modelValue"),
|
|
465
|
-
registerTab: d,
|
|
466
|
-
unregisterTab: n
|
|
467
|
-
}), (o, u) => (s(), r("div", {
|
|
468
|
-
class: g(["cregis-tabs", {
|
|
469
|
-
[`cregis-tabs--${e.type}`]: e.type,
|
|
470
|
-
[`cregis-tabs--${e.size}`]: e.size
|
|
471
|
-
}])
|
|
472
|
-
}, [
|
|
473
|
-
(s(!0), r(ne, null, le(i, (f) => (s(), r("div", {
|
|
474
|
-
key: f.name,
|
|
475
|
-
class: g(["cregis-tabs__item", { "is-active": e.modelValue === f.name }]),
|
|
476
|
-
style: $(a.value),
|
|
477
|
-
onClick: (C) => o.$emit("update:modelValue", f.name)
|
|
478
|
-
}, [
|
|
479
|
-
c("span", null, w(f.label), 1)
|
|
480
|
-
], 14, Be))), 128)),
|
|
481
|
-
c("div", Se, [
|
|
482
|
-
v(o.$slots, "default")
|
|
483
|
-
])
|
|
484
|
-
], 2));
|
|
485
|
-
}
|
|
486
|
-
}), I = /* @__PURE__ */ k({
|
|
1
|
+
import { defineComponent as o, inject as r, onMounted as b, watch as m, onUnmounted as s } from "vue";
|
|
2
|
+
const i = Symbol("TABS_KEY"), T = /* @__PURE__ */ o({
|
|
487
3
|
name: "TabPane",
|
|
488
4
|
__name: "TabPane",
|
|
489
5
|
props: {
|
|
490
6
|
label: {},
|
|
491
7
|
name: {}
|
|
492
8
|
},
|
|
493
|
-
setup(
|
|
494
|
-
const
|
|
495
|
-
if (!
|
|
496
|
-
return
|
|
497
|
-
|
|
498
|
-
}),
|
|
499
|
-
() =>
|
|
500
|
-
(
|
|
501
|
-
|
|
9
|
+
setup(a) {
|
|
10
|
+
const e = a, n = r(i);
|
|
11
|
+
if (!n) throw new Error("TabPane must be used within Tabs");
|
|
12
|
+
return b(() => {
|
|
13
|
+
n.registerTab({ label: e.label, name: e.name });
|
|
14
|
+
}), m(
|
|
15
|
+
() => e.label,
|
|
16
|
+
(t) => {
|
|
17
|
+
n.unregisterTab(e.name), n.registerTab({ label: t, name: e.name });
|
|
502
18
|
}
|
|
503
|
-
),
|
|
504
|
-
|
|
19
|
+
), s(() => {
|
|
20
|
+
n.unregisterTab(e.name);
|
|
505
21
|
}), () => {
|
|
506
22
|
};
|
|
507
23
|
}
|
|
508
24
|
});
|
|
509
|
-
R.install = (e) => {
|
|
510
|
-
e.component(R.name, R);
|
|
511
|
-
};
|
|
512
|
-
I.install = (e) => {
|
|
513
|
-
e.component(I.name, I);
|
|
514
|
-
};
|
|
515
|
-
const Ve = [T, p, B, S, V, R, I], Re = (e) => {
|
|
516
|
-
Ve.forEach((t) => {
|
|
517
|
-
e.component(t.name, t);
|
|
518
|
-
});
|
|
519
|
-
}, Ne = {
|
|
520
|
-
install: Re
|
|
521
|
-
};
|
|
522
25
|
export {
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
V as Divider,
|
|
526
|
-
T as Input,
|
|
527
|
-
S as Radio,
|
|
528
|
-
I as TabPane,
|
|
529
|
-
R as Tabs,
|
|
530
|
-
Ne as default,
|
|
531
|
-
Re as install
|
|
26
|
+
i as TABS_KEY,
|
|
27
|
+
T as TabPane
|
|
532
28
|
};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,169 +1,13 @@
|
|
|
1
|
-
import { App } from 'vue';
|
|
2
1
|
import { Component } from 'vue';
|
|
3
2
|
import { ComponentOptionsMixin } from 'vue';
|
|
4
3
|
import { ComponentProvideOptions } from 'vue';
|
|
5
4
|
import { CSSProperties } from 'vue';
|
|
6
5
|
import { DefineComponent } from 'vue';
|
|
6
|
+
import { InjectionKey } from 'vue';
|
|
7
7
|
import { PublicProps } from 'vue';
|
|
8
|
+
import { Ref } from 'vue';
|
|
8
9
|
|
|
9
|
-
declare
|
|
10
|
-
focus: () => Promise<void>;
|
|
11
|
-
updateTextWidth: () => void;
|
|
12
|
-
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
13
|
-
"update:modelValue": (value: string | number) => any;
|
|
14
|
-
input: (value: string | number) => any;
|
|
15
|
-
change: (value: string | number) => any;
|
|
16
|
-
focus: (value: FocusEvent) => any;
|
|
17
|
-
blur: (value: FocusEvent) => any;
|
|
18
|
-
clear: () => any;
|
|
19
|
-
}, string, PublicProps, Readonly<InputProps> & Readonly<{
|
|
20
|
-
"onUpdate:modelValue"?: (value: string | number) => any;
|
|
21
|
-
onInput?: (value: string | number) => any;
|
|
22
|
-
onChange?: (value: string | number) => any;
|
|
23
|
-
onFocus?: (value: FocusEvent) => any;
|
|
24
|
-
onBlur?: (value: FocusEvent) => any;
|
|
25
|
-
onClear?: () => any;
|
|
26
|
-
}>, {
|
|
27
|
-
type: "text" | "number" | "textarea";
|
|
28
|
-
size: "small" | "medium" | "large";
|
|
29
|
-
width: string;
|
|
30
|
-
placeholder: string;
|
|
31
|
-
rows: number;
|
|
32
|
-
}, {}, {}, {}, string, ComponentProvideOptions, false, {
|
|
33
|
-
inputRef: HTMLTextAreaElement;
|
|
34
|
-
}, any>;
|
|
35
|
-
|
|
36
|
-
declare const __VLS_component_2: DefineComponent<ButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
|
|
37
|
-
type: ButtonType;
|
|
38
|
-
size: ButtonSize;
|
|
39
|
-
iconType: IconButtonType;
|
|
40
|
-
}, {}, {}, {}, string, ComponentProvideOptions, true, {
|
|
41
|
-
buttonRef: HTMLButtonElement;
|
|
42
|
-
}, any>;
|
|
43
|
-
|
|
44
|
-
declare const __VLS_component_3: DefineComponent<CheckboxProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
45
|
-
"update:modelValue": (value: number | boolean) => any;
|
|
46
|
-
change: (value: number | boolean) => any;
|
|
47
|
-
}, string, PublicProps, Readonly<CheckboxProps> & Readonly<{
|
|
48
|
-
"onUpdate:modelValue"?: (value: number | boolean) => any;
|
|
49
|
-
onChange?: (value: number | boolean) => any;
|
|
50
|
-
}>, {
|
|
51
|
-
disabled: boolean;
|
|
52
|
-
modelValue: boolean | number;
|
|
53
|
-
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
54
|
-
|
|
55
|
-
declare const __VLS_component_4: DefineComponent<RadioProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
56
|
-
"update:modelValue": (value: RadioValue) => any;
|
|
57
|
-
change: (value: RadioValue) => any;
|
|
58
|
-
}, string, PublicProps, Readonly<RadioProps> & Readonly<{
|
|
59
|
-
"onUpdate:modelValue"?: (value: RadioValue) => any;
|
|
60
|
-
onChange?: (value: RadioValue) => any;
|
|
61
|
-
}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
62
|
-
|
|
63
|
-
declare const __VLS_component_5: DefineComponent<TabsProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
64
|
-
"update:modelValue": (name: string | number) => any;
|
|
65
|
-
}, string, PublicProps, Readonly<TabsProps> & Readonly<{
|
|
66
|
-
"onUpdate:modelValue"?: (name: string | number) => any;
|
|
67
|
-
}>, {
|
|
68
|
-
type: "default" | "card";
|
|
69
|
-
size: TabSize;
|
|
70
|
-
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
71
|
-
|
|
72
|
-
declare function __VLS_template(): {
|
|
73
|
-
attrs: Partial<{}>;
|
|
74
|
-
slots: {
|
|
75
|
-
prefix?(_: {}): any;
|
|
76
|
-
suffix?(_: {}): any;
|
|
77
|
-
};
|
|
78
|
-
refs: {
|
|
79
|
-
inputRef: HTMLTextAreaElement;
|
|
80
|
-
};
|
|
81
|
-
rootEl: any;
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
declare function __VLS_template_2(): {
|
|
85
|
-
attrs: Partial<{}>;
|
|
86
|
-
slots: {
|
|
87
|
-
icon?(_: {}): any;
|
|
88
|
-
default?(_: {}): any;
|
|
89
|
-
default?(_: {}): any;
|
|
90
|
-
};
|
|
91
|
-
refs: {
|
|
92
|
-
buttonRef: HTMLButtonElement;
|
|
93
|
-
};
|
|
94
|
-
rootEl: any;
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
declare function __VLS_template_3(): {
|
|
98
|
-
attrs: Partial<{}>;
|
|
99
|
-
slots: {
|
|
100
|
-
default?(_: {}): any;
|
|
101
|
-
};
|
|
102
|
-
refs: {};
|
|
103
|
-
rootEl: HTMLDivElement;
|
|
104
|
-
};
|
|
105
|
-
|
|
106
|
-
declare function __VLS_template_4(): {
|
|
107
|
-
attrs: Partial<{}>;
|
|
108
|
-
slots: {
|
|
109
|
-
default?(_: {}): any;
|
|
110
|
-
};
|
|
111
|
-
refs: {};
|
|
112
|
-
rootEl: HTMLDivElement;
|
|
113
|
-
};
|
|
114
|
-
|
|
115
|
-
declare function __VLS_template_5(): {
|
|
116
|
-
attrs: Partial<{}>;
|
|
117
|
-
slots: {
|
|
118
|
-
default?(_: {}): any;
|
|
119
|
-
};
|
|
120
|
-
refs: {};
|
|
121
|
-
rootEl: HTMLDivElement;
|
|
122
|
-
};
|
|
123
|
-
|
|
124
|
-
declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
125
|
-
|
|
126
|
-
declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
|
|
127
|
-
|
|
128
|
-
declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
|
|
129
|
-
|
|
130
|
-
declare type __VLS_TemplateResult_4 = ReturnType<typeof __VLS_template_4>;
|
|
131
|
-
|
|
132
|
-
declare type __VLS_TemplateResult_5 = ReturnType<typeof __VLS_template_5>;
|
|
133
|
-
|
|
134
|
-
declare type __VLS_WithTemplateSlots<T, S> = T & {
|
|
135
|
-
new (): {
|
|
136
|
-
$slots: S;
|
|
137
|
-
};
|
|
138
|
-
};
|
|
139
|
-
|
|
140
|
-
declare type __VLS_WithTemplateSlots_2<T, S> = T & {
|
|
141
|
-
new (): {
|
|
142
|
-
$slots: S;
|
|
143
|
-
};
|
|
144
|
-
};
|
|
145
|
-
|
|
146
|
-
declare type __VLS_WithTemplateSlots_3<T, S> = T & {
|
|
147
|
-
new (): {
|
|
148
|
-
$slots: S;
|
|
149
|
-
};
|
|
150
|
-
};
|
|
151
|
-
|
|
152
|
-
declare type __VLS_WithTemplateSlots_4<T, S> = T & {
|
|
153
|
-
new (): {
|
|
154
|
-
$slots: S;
|
|
155
|
-
};
|
|
156
|
-
};
|
|
157
|
-
|
|
158
|
-
declare type __VLS_WithTemplateSlots_5<T, S> = T & {
|
|
159
|
-
new (): {
|
|
160
|
-
$slots: S;
|
|
161
|
-
};
|
|
162
|
-
};
|
|
163
|
-
|
|
164
|
-
export declare const Button: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
|
|
165
|
-
|
|
166
|
-
declare interface ButtonProps {
|
|
10
|
+
export declare interface ButtonProps {
|
|
167
11
|
type?: ButtonType;
|
|
168
12
|
size?: ButtonSize;
|
|
169
13
|
plain?: boolean;
|
|
@@ -178,13 +22,16 @@ declare interface ButtonProps {
|
|
|
178
22
|
affix?: boolean;
|
|
179
23
|
}
|
|
180
24
|
|
|
181
|
-
declare type ButtonSize = 'extraSmall' | 'small' | 'medium' | 'large';
|
|
25
|
+
export declare type ButtonSize = 'extraSmall' | 'small' | 'medium' | 'large';
|
|
182
26
|
|
|
183
|
-
declare type ButtonType = 'primary' | 'secondary' | 'danger' | 'foreground' | 'sameWhite';
|
|
27
|
+
export declare type ButtonType = 'primary' | 'secondary' | 'danger' | 'foreground' | 'sameWhite';
|
|
184
28
|
|
|
185
|
-
export declare
|
|
29
|
+
export declare interface CheckboxEmits {
|
|
30
|
+
(e: 'update:modelValue', value: boolean | number): void;
|
|
31
|
+
(e: 'change', value: boolean | number): void;
|
|
32
|
+
}
|
|
186
33
|
|
|
187
|
-
declare interface CheckboxProps {
|
|
34
|
+
export declare interface CheckboxProps {
|
|
188
35
|
modelValue: boolean | number;
|
|
189
36
|
label?: string;
|
|
190
37
|
disabled?: boolean;
|
|
@@ -192,20 +39,7 @@ declare interface CheckboxProps {
|
|
|
192
39
|
indeterminate?: boolean;
|
|
193
40
|
}
|
|
194
41
|
|
|
195
|
-
declare
|
|
196
|
-
install: (app: App) => void;
|
|
197
|
-
};
|
|
198
|
-
export default _default;
|
|
199
|
-
|
|
200
|
-
export declare const Divider: DefineComponent<DividerProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DividerProps> & Readonly<{}>, {
|
|
201
|
-
color: string;
|
|
202
|
-
direction: "horizontal" | "vertical";
|
|
203
|
-
borderStyle: "solid" | "dashed" | "dotted";
|
|
204
|
-
lineThickness: string;
|
|
205
|
-
margin: string | [string, string];
|
|
206
|
-
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
|
|
207
|
-
|
|
208
|
-
declare interface DividerProps {
|
|
42
|
+
export declare interface DividerProps {
|
|
209
43
|
direction?: 'horizontal' | 'vertical';
|
|
210
44
|
borderStyle?: 'solid' | 'dashed' | 'dotted';
|
|
211
45
|
lineThickness?: string;
|
|
@@ -214,11 +48,18 @@ declare interface DividerProps {
|
|
|
214
48
|
length?: string;
|
|
215
49
|
}
|
|
216
50
|
|
|
217
|
-
declare type IconButtonType = 'rectangle' | 'square' | 'circle' | 'professional';
|
|
51
|
+
export declare type IconButtonType = 'rectangle' | 'square' | 'circle' | 'professional';
|
|
218
52
|
|
|
219
|
-
export declare
|
|
53
|
+
export declare interface InputEmits {
|
|
54
|
+
(e: 'update:modelValue', value: StringOrNumber): void;
|
|
55
|
+
(e: 'input', value: StringOrNumber): void;
|
|
56
|
+
(e: 'change', value: StringOrNumber): void;
|
|
57
|
+
(e: 'focus', value: FocusEvent): void;
|
|
58
|
+
(e: 'blur', value: FocusEvent): void;
|
|
59
|
+
(e: 'clear'): void;
|
|
60
|
+
}
|
|
220
61
|
|
|
221
|
-
declare interface InputProps {
|
|
62
|
+
export declare interface InputProps {
|
|
222
63
|
type?: 'text' | 'number' | 'textarea';
|
|
223
64
|
modelValue: StringOrNumber;
|
|
224
65
|
size?: 'small' | 'medium' | 'large';
|
|
@@ -231,33 +72,44 @@ declare interface InputProps {
|
|
|
231
72
|
rows?: number;
|
|
232
73
|
}
|
|
233
74
|
|
|
234
|
-
export declare
|
|
235
|
-
|
|
236
|
-
|
|
75
|
+
export declare interface RadioEmits {
|
|
76
|
+
(e: 'update:modelValue', value: RadioValue): void;
|
|
77
|
+
(e: 'change', value: RadioValue): void;
|
|
78
|
+
}
|
|
237
79
|
|
|
238
|
-
declare interface RadioProps {
|
|
80
|
+
export declare interface RadioProps {
|
|
239
81
|
modelValue: RadioValue;
|
|
240
82
|
value: RadioValue;
|
|
241
83
|
label?: string;
|
|
242
84
|
disabled?: boolean;
|
|
243
85
|
}
|
|
244
86
|
|
|
245
|
-
declare type RadioValue = boolean | string | number;
|
|
87
|
+
export declare type RadioValue = boolean | string | number;
|
|
246
88
|
|
|
247
89
|
declare type StringOrNumber = string | number;
|
|
248
90
|
|
|
249
91
|
export declare const TabPane: DefineComponent<TabPaneProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<TabPaneProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
250
92
|
|
|
251
|
-
declare interface TabPaneProps {
|
|
93
|
+
export declare interface TabPaneProps {
|
|
252
94
|
label: string;
|
|
253
95
|
name: string | number;
|
|
254
96
|
}
|
|
255
97
|
|
|
256
|
-
export declare const
|
|
98
|
+
export declare const TABS_KEY: InjectionKey<TabsContext>;
|
|
99
|
+
|
|
100
|
+
export declare interface TabsContext {
|
|
101
|
+
activeName: Ref<string | number>;
|
|
102
|
+
registerTab: (pane: TabPaneProps) => void;
|
|
103
|
+
unregisterTab: (name: string | number) => void;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
export declare interface TabsEmits {
|
|
107
|
+
(e: 'update:modelValue', name: string | number): void;
|
|
108
|
+
}
|
|
257
109
|
|
|
258
|
-
declare type TabSize = 'small' | 'medium' | 'large';
|
|
110
|
+
export declare type TabSize = 'small' | 'medium' | 'large';
|
|
259
111
|
|
|
260
|
-
declare interface TabsProps {
|
|
112
|
+
export declare interface TabsProps {
|
|
261
113
|
modelValue: string | number;
|
|
262
114
|
type?: 'default' | 'card';
|
|
263
115
|
size?: TabSize;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@cregis/icon")):typeof define=="function"&&define.amd?define(["exports","vue","@cregis/icon"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.CregisUI={},c.Vue,c.CregisIcon))})(this,(function(c,e,$){"use strict";const I={key:0,class:"cregis-button__icon-wrapper"},D=["disabled"],P=["disabled"],L=["disabled"],f=e.defineComponent({name:"Button",inheritAttrs:!1,__name:"Button",props:{type:{default:"primary"},size:{default:"medium"},plain:{type:Boolean},text:{type:Boolean},disabled:{type:Boolean},loading:{type:Boolean},block:{type:Boolean},link:{type:Boolean},icon:{},iconType:{default:"rectangle"},iconText:{},affix:{type:Boolean}},setup(t){const n=t,a=e.computed(()=>n.size==="large"?"20px":n.size==="medium"?"16px":"12px"),r=e.computed(()=>n.size==="large"||n.size==="medium"?"16px":"12px"),i=e.computed(()=>{if(n.plain||n.text)switch(n.type){case"primary":return"var(--material-vibrant-brand-primary)";case"secondary":return"var(--material-foreground-base-secondary)";case"danger":return"var(--material-vibrant-error-primary)";case"foreground":return"var(--material-foreground-base-primary)";case"sameWhite":return"var(--material-same-black)"}else return n.type==="secondary"?"var(--material-foreground-base-secondary)":n.type==="foreground"?"var(--text-face-primary)":n.type==="sameWhite"?"var(--text-same-black)":"var(--material-same-white)"});return(l,s)=>t.icon||l.$slots.icon?(e.openBlock(),e.createElementBlock("div",I,[e.createElementVNode("button",e.mergeProps(l.$attrs,{class:["cregis-button__icon",{[`cregis-button__icon--${t.iconType}`]:t.iconType,[`cregis-button__icon--${t.size}`]:t.size,"is-disabled":t.disabled}],disabled:t.disabled||t.loading}),[t.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.icon),{key:0,size:a.value,"stroke-width":3},null,8,["size"])):e.renderSlot(l.$slots,"icon",{key:1})],16,D),t.iconText?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["cregis-button__icon-text",{"is-disabled":t.disabled}])},e.toDisplayString(t.iconText),3)):e.createCommentVNode("",!0)])):t.link?(e.openBlock(),e.createElementBlock("button",e.mergeProps({key:1},l.$attrs,{class:["cregis-button__link",{[`cregis-button__link--${t.type}`]:t.type,[`cregis-button__link--${t.size}`]:t.size,"is-disabled":t.disabled}],disabled:t.disabled||t.loading}),[e.renderSlot(l.$slots,"default")],16,P)):(e.openBlock(),e.createElementBlock("button",e.mergeProps({key:2,ref:"buttonRef"},l.$attrs,{class:["cregis-button",{[`cregis-button--${t.type}`]:t.type,[`cregis-button--${t.size}`]:t.size,"is-plain":t.plain,"is-text":t.text,"is-disabled":t.disabled,"is-loading":t.loading,"is-block":t.block,"is-affix":t.affix}],disabled:t.disabled||t.loading}),[t.loading?(e.openBlock(),e.createBlock(e.unref($.EdsLoad),{key:0,class:"loading",size:r.value,color:i.value,"stroke-width":3},null,8,["size","color"])):e.renderSlot(l.$slots,"default",{key:1})],16,L))}}),A={key:0,class:"cregis-input__prefix"},F=["type","placeholder","disabled"],M={key:2,class:"cregis-input__suffix"},W=["disabled","placeholder","rows"],U={key:0,class:"cregis-textarea__buttons"},g=e.defineComponent({name:"Input",inheritAttrs:!1,__name:"Input",props:{type:{default:"text"},modelValue:{},size:{default:"medium"},width:{default:"300px"},placeholder:{default:"please input"},disabled:{type:Boolean},clearable:{type:Boolean},inputStyle:{},unit:{},rows:{default:3}},emits:["update:modelValue","input","change","focus","blur","clear"],setup(t,{expose:n,emit:a}){const r=t,i=a,l=e.ref(r.modelValue);e.watch(()=>r.modelValue,o=>{l.value=o});const s=e.ref(),d=e.ref(0),b=e.ref(!1);let B=null;const _=async()=>{await e.nextTick(),s.value?.focus()},z=async()=>{i("update:modelValue",l.value),i("input",l.value),await e.nextTick(),R()},V=()=>{i("change",l.value)},S=o=>{b.value=!0,i("focus",o)},T=o=>{b.value=!1,i("blur",o)},E=e.computed(()=>r.clearable&&!r.disabled&&!!l.value&&b.value),N=()=>{l.value="",i("update:modelValue",""),i("clear"),i("input",""),i("change","")},R=()=>{B&&cancelAnimationFrame(B),B=requestAnimationFrame(()=>{if(!s.value||s.value.tagName!=="INPUT")return;const o=s.value,u=o.value,m=document.createElement("span");m.style.position="absolute",m.style.visibility="hidden",m.style.whiteSpace="pre",m.style.font=window.getComputedStyle(o).font,m.style.letterSpacing=window.getComputedStyle(o).letterSpacing,m.textContent=u||" ",document.body.appendChild(m),d.value=m.getBoundingClientRect().width,document.body.removeChild(m)})},v=e.computed(()=>{const o={};return d.value>0&&(o.position="absolute",o.left=`${d.value+16}px`),o}),ee=async()=>{try{l.value=await navigator.clipboard.readText()}catch(o){console.error("paste error:",o)}};return n({focus:_,updateTextWidth:R}),(o,u)=>t.type!=="textarea"?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["cregis-input",{[`cregis-input--${t.size}`]:t.size,"is-disabled":t.disabled,"is-prefix":o.$slots.prefix,"is-suffix":o.$slots.suffix}]),style:e.normalizeStyle([{width:t.width},t.inputStyle])},[e.createElementVNode("div",{class:e.normalizeClass(["cregis-input__wrapper",{"is-focus":b.value}])},[o.$slots.prefix?(e.openBlock(),e.createElementBlock("span",A,[e.renderSlot(o.$slots,"prefix")])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",e.mergeProps({class:"cregis-input__inner","onUpdate:modelValue":u[0]||(u[0]=m=>l.value=m),ref_key:"inputRef",ref:s,type:t.type,placeholder:t.placeholder},o.$attrs,{disabled:t.disabled,onInput:z,onChange:V,onFocus:S,onBlur:T}),null,16,F),[[e.vModelDynamic,l.value]]),t.unit&&l.value?(e.openBlock(),e.createElementBlock("span",{key:1,style:e.normalizeStyle(v.value),class:"cregis-input__unit"},e.toDisplayString(t.unit),5)):e.createCommentVNode("",!0),o.$slots.suffix||E.value?(e.openBlock(),e.createElementBlock("span",M,[e.renderSlot(o.$slots,"suffix"),E.value?(e.openBlock(),e.createBlock(f,{key:0,class:"cregis-input__clear-button",icon:e.unref($.EdsCloseCircleFill),"icon-type":"square",onClick:N,onMousedown:u[1]||(u[1]=e.withModifiers(()=>{},["prevent"]))},null,8,["icon"])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],2)],6)):(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["cregis-textarea",{"is-disabled":t.disabled}]),style:e.normalizeStyle([{width:t.width},t.inputStyle])},[e.withDirectives(e.createElementVNode("textarea",e.mergeProps({class:"cregis-textarea__wrapper"},o.$attrs,{ref_key:"inputRef",ref:s,disabled:t.disabled,placeholder:t.placeholder,rows:t.rows,"onUpdate:modelValue":u[2]||(u[2]=m=>l.value=m),onInput:z,onChange:V,onFocus:S,onBlur:T}),null,16,W),[[e.vModelText,l.value]]),t.disabled?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",U,[e.createVNode(f,{class:"cregis-textarea__button",link:"",size:"small",onClick:ee},{default:e.withCtx(()=>[...u[3]||(u[3]=[e.createTextVNode(" Paste ",-1)])]),_:1}),e.createVNode(f,{class:"cregis-textarea__button",link:"",size:"small",disabled:!l.value,onClick:N},{default:e.withCtx(()=>[...u[4]||(u[4]=[e.createTextVNode(" Clear ",-1)])]),_:1},8,["disabled"])]))],6))}});g.install=t=>{t.component(g.name,g)},f.install=t=>{t.component(f.name,f)};const q=["width","height"],j={stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},O={transform:"translate(-394.000000, -457.000000)"},K={transform:"translate(394.000000, 457.000000)"},Y=["width","height"],Z=e.defineComponent({__name:"checked-basis",props:{size:{default:"16px"}},setup(t){return(n,a)=>(e.openBlock(),e.createElementBlock("svg",{width:t.size,height:t.size,viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[e.createElementVNode("g",j,[e.createElementVNode("g",O,[e.createElementVNode("g",K,[e.createElementVNode("rect",{x:"0",y:"0",width:t.size,height:t.size},null,8,Y),a[0]||(a[0]=e.createElementVNode("path",{d:"M6.67713976,13.5709642 C7.12567714,13.5709642 7.468039,13.3943662 7.70422535,13.0411701 L13.7562297,3.77789816 C13.8407367,3.65005417 13.9024919,3.52546046 13.9414951,3.40411701 C13.9804984,3.28277356 14,3.16468039 14,3.04983749 C14,2.74647887 13.8976165,2.49566631 13.6928494,2.29739978 C13.4880823,2.09913326 13.2307692,2 12.9209101,2 C12.7063922,2 12.5265439,2.04225352 12.3813651,2.12676056 C12.2361863,2.21126761 12.0975081,2.35536295 11.9653304,2.55904659 L6.65113759,10.9512459 L3.95016251,7.60346696 C3.71830986,7.32177681 3.43011918,7.18093174 3.08559047,7.18093174 C2.77139762,7.18093174 2.51191766,7.28169014 2.3071506,7.48320693 C2.10238353,7.68472373 2,7.93824485 2,8.24377031 C2,8.38028169 2.02329361,8.51083424 2.06988082,8.63542795 C2.11646804,8.76002167 2.19826652,8.88949079 2.31527627,9.02383532 L5.67280607,13.0899242 C5.94149512,13.4106176 6.27627302,13.5709642 6.67713976,13.5709642 Z",fill:"currentColor","fill-rule":"nonzero"},null,-1))])])])],8,q))}}),G={key:0,class:"cregis-checkbox--indeterminate"},y=e.defineComponent({name:"Checkbox",__name:"Checkbox",props:{modelValue:{type:[Boolean,Number],default:!1},label:{},disabled:{type:Boolean,default:!1},circle:{type:Boolean},indeterminate:{type:Boolean}},emits:["update:modelValue","change"],setup(t,{emit:n}){const a=t,r=n,i=e.computed(()=>a.modelValue),l=()=>{a.disabled||r("update:modelValue",!i.value)};return e.watch(()=>i.value,()=>{r("change",i.value)}),(s,d)=>(e.openBlock(),e.createElementBlock("div",{class:"cregis-checkbox__wrapper",onClick:l},[e.createElementVNode("div",{class:e.normalizeClass(["cregis-checkbox",{"is-disabled":t.disabled,"is-checked":i.value,"is-circle":t.circle,"is-indeterminate":t.indeterminate}])},[t.indeterminate?(e.openBlock(),e.createElementBlock("div",G)):(e.openBlock(),e.createBlock(Z,{key:1,size:"10px"}))],2),s.$slots.default||t.label?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["cregis-checkbox__label",{"is-disabled":t.disabled}])},[e.renderSlot(s.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],2)):e.createCommentVNode("",!0)]))}});y.install=t=>{t.component(y.name,y)};const h=e.defineComponent({name:"Radio",__name:"Radio",props:{modelValue:{type:[Boolean,String,Number]},value:{type:[Boolean,String,Number]},label:{},disabled:{type:Boolean}},emits:["update:modelValue","change"],setup(t,{emit:n}){const a=t,r=n,i=e.computed(()=>a.modelValue===a.value),l=()=>{a.disabled||(r("update:modelValue",a.value),r("change",a.value))};return(s,d)=>(e.openBlock(),e.createElementBlock("div",{class:"cregis-radio__wrapper",onClick:l},[e.createElementVNode("div",{class:e.normalizeClass(["cregis-radio",{"is-disabled":t.disabled,"is-checked":i.value}])},[...d[0]||(d[0]=[e.createElementVNode("div",{class:"cregis-radio__inner"},null,-1)])],2),s.$slots.default||t.label?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["cregis-radio__label",{"is-disabled":t.disabled}])},[e.renderSlot(s.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],2)):e.createCommentVNode("",!0)]))}});h.install=t=>{t.component(h.name,h)};const k=e.defineComponent({name:"Divider",__name:"Divider",props:{direction:{default:"horizontal"},borderStyle:{default:"solid"},lineThickness:{default:"1px"},color:{default:"var(--line-module)"},margin:{default:"8px"},length:{}},setup(t){const n=t,a=e.computed(()=>{if(Array.isArray(n.margin)){const[i,l]=n.margin;return n.direction==="horizontal"?`${i} 0 ${l} 0`:`0 ${l} 0 ${i}`}else return n.direction==="horizontal"?`${n.margin} 0`:`0 ${n.margin}`}),r=e.computed(()=>n.direction==="horizontal"?{width:n.length||"100%",borderTopWidth:n.lineThickness,borderTopStyle:n.borderStyle,borderTopColor:n.color,margin:a.value}:{height:n.length||"1rem",borderLeftWidth:n.lineThickness,borderLeftStyle:n.borderStyle,borderLeftColor:n.color,margin:a.value});return(i,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["cregis-divider",{[`cregis-divider--${t.direction}`]:t.direction}]),style:e.normalizeStyle(r.value)},null,6))}});k.install=t=>{t.component(k.name,k)};const x=Symbol("TABS_KEY"),H=["onClick"],J={style:{display:"none"}},p=e.defineComponent({name:"Tabs",__name:"Tabs",props:{modelValue:{},type:{default:"default"},size:{default:"medium"}},emits:["update:modelValue"],setup(t){const n=t,a=e.reactive([]),r=s=>{a.some(d=>d.name===s.name)||a.push(s)},i=s=>{const d=a.findIndex(b=>b.name===s);d!==-1&&a.splice(d,1)},l=e.computed(()=>n.type==="card"?n.size==="large"?{borderRadius:"13px"}:n.size==="medium"?{borderRadius:"11px"}:{borderRadius:"9px"}:{borderRadius:0});return e.provide(x,{activeName:e.toRef(n,"modelValue"),registerTab:r,unregisterTab:i}),(s,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["cregis-tabs",{[`cregis-tabs--${t.type}`]:t.type,[`cregis-tabs--${t.size}`]:t.size}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a,b=>(e.openBlock(),e.createElementBlock("div",{key:b.name,class:e.normalizeClass(["cregis-tabs__item",{"is-active":t.modelValue===b.name}]),style:e.normalizeStyle(l.value),onClick:B=>s.$emit("update:modelValue",b.name)},[e.createElementVNode("span",null,e.toDisplayString(b.label),1)],14,H))),128)),e.createElementVNode("div",J,[e.renderSlot(s.$slots,"default")])],2))}}),C=e.defineComponent({name:"TabPane",__name:"TabPane",props:{label:{},name:{}},setup(t){const n=t,a=e.inject(x);if(!a)throw new Error("TabPane must be used within Tabs");return e.onMounted(()=>{a.registerTab({label:n.label,name:n.name})}),e.watch(()=>n.label,r=>{a.unregisterTab(n.name),a.registerTab({label:r,name:n.name})}),e.onUnmounted(()=>{a.unregisterTab(n.name)}),()=>{}}});p.install=t=>{t.component(p.name,p)},C.install=t=>{t.component(C.name,C)};const Q=[g,f,y,h,k,p,C],w=t=>{Q.forEach(n=>{t.component(n.name,n)})},X={install:w};c.Button=f,c.Checkbox=y,c.Divider=k,c.Input=g,c.Radio=h,c.TabPane=C,c.Tabs=p,c.default=X,c.install=w,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
|
1
|
+
(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.CregisUI={},n.Vue))})(this,(function(n,e){"use strict";const o=Symbol("TABS_KEY"),i=e.defineComponent({name:"TabPane",__name:"TabPane",props:{label:{},name:{}},setup(s){const t=s,a=e.inject(o);if(!a)throw new Error("TabPane must be used within Tabs");return e.onMounted(()=>{a.registerTab({label:t.label,name:t.name})}),e.watch(()=>t.label,r=>{a.unregisterTab(t.name),a.registerTab({label:r,name:t.name})}),e.onUnmounted(()=>{a.unregisterTab(t.name)}),()=>{}}});n.TABS_KEY=o,n.TabPane=i,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));
|