@fangxinyan/lumina 0.1.6 → 0.2.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/README.md +18 -7
- package/dist/{Accordion-GSBY5T5U.css → Accordion-3TQPKNN3.css} +8 -1
- package/dist/Accordion.cjs +2 -2
- package/dist/Accordion.d.cts +12 -0
- package/dist/Accordion.d.ts +12 -0
- package/dist/Accordion.js +1 -1
- package/dist/{Alert-LSKBYDRI.css → Alert-JJ7GB3UU.css} +11 -0
- package/dist/Alert.cjs +2 -2
- package/dist/Alert.d.cts +4 -0
- package/dist/Alert.d.ts +4 -0
- package/dist/Alert.js +1 -1
- package/dist/{Avatar-OXDSG5Q6.css → Avatar-R5A4AFKZ.css} +4 -0
- package/dist/Avatar.cjs +2 -2
- package/dist/Avatar.d.cts +2 -0
- package/dist/Avatar.d.ts +2 -0
- package/dist/Avatar.js +1 -1
- package/dist/{Button-5UI7QXGU.css → Button-SDQD25AG.css} +2 -0
- package/dist/Button.cjs +3 -3
- package/dist/Button.d.cts +2 -0
- package/dist/Button.d.ts +2 -0
- package/dist/Button.js +1 -1
- package/dist/Calendar.cjs +2 -2
- package/dist/Calendar.d.cts +8 -0
- package/dist/Calendar.d.ts +8 -0
- package/dist/Calendar.js +1 -1
- package/dist/{Card-2CHHFD4Y.css → Card-RG7ECXL2.css} +11 -0
- package/dist/Card.cjs +3 -3
- package/dist/Card.d.cts +2 -0
- package/dist/Card.d.ts +2 -0
- package/dist/Card.js +1 -1
- package/dist/{Divider-Z37INS5E.css → Divider-OEE4Q2KS.css} +31 -0
- package/dist/Divider.cjs +2 -2
- package/dist/Divider.d.cts +7 -0
- package/dist/Divider.d.ts +7 -0
- package/dist/Divider.js +1 -1
- package/dist/{Empty-VM23UNLQ.css → Empty-NQ72W3D7.css} +22 -0
- package/dist/Empty.cjs +4 -4
- package/dist/Empty.d.cts +42 -2
- package/dist/Empty.d.ts +42 -2
- package/dist/Empty.js +1 -1
- package/dist/Input-33CAH4O6.css +134 -0
- package/dist/Input.cjs +3 -3
- package/dist/Input.d.cts +17 -1
- package/dist/Input.d.ts +17 -1
- package/dist/Input.js +1 -1
- package/dist/Modal.cjs +3 -3
- package/dist/Modal.js +2 -2
- package/dist/{Pagination-6FFOI4NM.css → Pagination-YIRYJUXP.css} +33 -0
- package/dist/Pagination.cjs +5 -2
- package/dist/Pagination.d.cts +14 -0
- package/dist/Pagination.d.ts +14 -0
- package/dist/Pagination.js +4 -1
- package/dist/Select.cjs +3 -3
- package/dist/Select.js +2 -2
- package/dist/{Slider-RE4HZQKF.css → Slider-X4PVA65R.css} +51 -2
- package/dist/Slider.cjs +2 -2
- package/dist/Slider.d.cts +20 -5
- package/dist/Slider.d.ts +20 -5
- package/dist/Slider.js +1 -1
- package/dist/Switch-36KJNDXM.css +92 -0
- package/dist/Switch.cjs +2 -2
- package/dist/Switch.d.cts +4 -0
- package/dist/Switch.d.ts +4 -0
- package/dist/Switch.js +1 -1
- package/dist/Table-YKVM42SW.css +295 -0
- package/dist/Table.cjs +7 -3
- package/dist/Table.d.cts +103 -7
- package/dist/Table.d.ts +103 -7
- package/dist/Table.js +5 -1
- package/dist/{Tabs-A27TSZOP.css → Tabs-RHK6XAFF.css} +7 -0
- package/dist/Tabs.cjs +3 -3
- package/dist/Tabs.d.cts +2 -0
- package/dist/Tabs.d.ts +2 -0
- package/dist/Tabs.js +1 -1
- package/dist/{Tag-EYOY3UWG.css → Tag-FGDY3W7E.css} +2 -0
- package/dist/Tag.cjs +3 -3
- package/dist/Tag.d.cts +5 -0
- package/dist/Tag.d.ts +5 -0
- package/dist/Tag.js +1 -1
- package/dist/chunk-437LB2V4.js +111 -0
- package/dist/chunk-437LB2V4.js.map +1 -0
- package/dist/chunk-4MR4GVTD.js +73 -0
- package/dist/chunk-4MR4GVTD.js.map +1 -0
- package/dist/{chunk-OXYFB2ZI.js → chunk-4U4OY5RA.js} +11 -5
- package/dist/chunk-4U4OY5RA.js.map +1 -0
- package/dist/{chunk-5EYI27B6.js → chunk-77BVQNAQ.js} +5 -3
- package/dist/chunk-77BVQNAQ.js.map +1 -0
- package/dist/{chunk-3QWHDCHJ.js → chunk-AJZKESHB.js} +13 -4
- package/dist/chunk-AJZKESHB.js.map +1 -0
- package/dist/{chunk-NZPJ7BUB.cjs → chunk-AXMEZGEG.cjs} +13 -4
- package/dist/chunk-AXMEZGEG.cjs.map +1 -0
- package/dist/{chunk-HTP6UEVR.js → chunk-BBPNQ44M.js} +22 -6
- package/dist/chunk-BBPNQ44M.js.map +1 -0
- package/dist/{chunk-QQXIWOI3.cjs → chunk-CCBHZYE6.cjs} +5 -5
- package/dist/{chunk-QQXIWOI3.cjs.map → chunk-CCBHZYE6.cjs.map} +1 -1
- package/dist/chunk-E6R63QOL.js +476 -0
- package/dist/chunk-E6R63QOL.js.map +1 -0
- package/dist/{chunk-KGYLUZOU.cjs → chunk-EPFYIR63.cjs} +5 -5
- package/dist/{chunk-KGYLUZOU.cjs.map → chunk-EPFYIR63.cjs.map} +1 -1
- package/dist/chunk-F7HW2PYR.cjs +119 -0
- package/dist/chunk-F7HW2PYR.cjs.map +1 -0
- package/dist/chunk-GIVMKGZN.js +39 -0
- package/dist/chunk-GIVMKGZN.js.map +1 -0
- package/dist/{chunk-FMG3ZPGK.js → chunk-H6FCIJOP.js} +5 -3
- package/dist/chunk-H6FCIJOP.js.map +1 -0
- package/dist/{chunk-ALFDP5WX.cjs → chunk-IDM6JJLP.cjs} +22 -6
- package/dist/chunk-IDM6JJLP.cjs.map +1 -0
- package/dist/{chunk-I2ERCHFV.cjs → chunk-JKLQOB2F.cjs} +11 -5
- package/dist/chunk-JKLQOB2F.cjs.map +1 -0
- package/dist/{chunk-IGHLSNXT.cjs → chunk-K7PVJLW4.cjs} +51 -4
- package/dist/chunk-K7PVJLW4.cjs.map +1 -0
- package/dist/chunk-LDENBYRC.cjs +210 -0
- package/dist/chunk-LDENBYRC.cjs.map +1 -0
- package/dist/{chunk-OOBSH7EL.js → chunk-LSLYY5FN.js} +3 -3
- package/dist/{chunk-OOBSH7EL.js.map → chunk-LSLYY5FN.js.map} +1 -1
- package/dist/chunk-NSUD5B22.js +187 -0
- package/dist/chunk-NSUD5B22.js.map +1 -0
- package/dist/{chunk-AAMYURWQ.cjs → chunk-OPTTHURA.cjs} +5 -3
- package/dist/chunk-OPTTHURA.cjs.map +1 -0
- package/dist/{chunk-F3NHM4GX.js → chunk-OYGFMXAA.js} +13 -4
- package/dist/chunk-OYGFMXAA.js.map +1 -0
- package/dist/chunk-PBBHUUXU.cjs +133 -0
- package/dist/chunk-PBBHUUXU.cjs.map +1 -0
- package/dist/chunk-RDLPX7RK.cjs +95 -0
- package/dist/chunk-RDLPX7RK.cjs.map +1 -0
- package/dist/chunk-SBMOIE5C.cjs +499 -0
- package/dist/chunk-SBMOIE5C.cjs.map +1 -0
- package/dist/{chunk-XFRP2MBR.js → chunk-TYQ5CN2C.js} +51 -4
- package/dist/chunk-TYQ5CN2C.js.map +1 -0
- package/dist/{chunk-7CKHWCEA.cjs → chunk-TZSWDH5T.cjs} +5 -3
- package/dist/chunk-TZSWDH5T.cjs.map +1 -0
- package/dist/{chunk-VMHNKD3N.cjs → chunk-URF6RBW6.cjs} +13 -4
- package/dist/chunk-URF6RBW6.cjs.map +1 -0
- package/dist/{chunk-G3UWXSNQ.js → chunk-V34OPWKZ.js} +5 -4
- package/dist/chunk-V34OPWKZ.js.map +1 -0
- package/dist/{chunk-ITGCHU3Y.cjs → chunk-VICGQC6G.cjs} +5 -4
- package/dist/chunk-VICGQC6G.cjs.map +1 -0
- package/dist/chunk-YEOARJKR.cjs +40 -0
- package/dist/chunk-YEOARJKR.cjs.map +1 -0
- package/dist/chunk-Z5X5AMLA.cjs +41 -0
- package/dist/chunk-Z5X5AMLA.cjs.map +1 -0
- package/dist/chunk-Z7P6QGMT.js +115 -0
- package/dist/chunk-Z7P6QGMT.js.map +1 -0
- package/dist/{chunk-OYH6A7IQ.js → chunk-ZVCMXDTP.js} +3 -3
- package/dist/{chunk-OYH6A7IQ.js.map → chunk-ZVCMXDTP.js.map} +1 -1
- package/dist/chunk-ZWP4LSS3.js +38 -0
- package/dist/chunk-ZWP4LSS3.js.map +1 -0
- package/dist/index.cjs +43 -43
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -4
- package/dist/index.d.ts +4 -4
- package/dist/index.js +18 -18
- package/dist/index.js.map +1 -1
- package/dist/styles.css +455 -30
- package/docs/llms/accordion.md +66 -0
- package/docs/llms/alert.md +64 -0
- package/docs/llms/avatar.md +55 -0
- package/docs/llms/badge.md +41 -0
- package/docs/llms/button.md +122 -0
- package/docs/llms/calendar.md +44 -0
- package/docs/llms/card.md +68 -0
- package/docs/llms/cascader.md +33 -0
- package/docs/llms/checkbox.md +41 -0
- package/docs/llms/colorpicker.md +82 -0
- package/docs/llms/divider.md +69 -0
- package/docs/llms/drawer.md +70 -0
- package/docs/llms/empty.md +52 -0
- package/docs/llms/icon.md +34 -0
- package/docs/llms/image.md +39 -0
- package/docs/llms/input.md +127 -0
- package/docs/llms/intro.md +6 -0
- package/docs/llms/list.md +41 -0
- package/docs/llms/modal.md +89 -0
- package/docs/llms/pagination.md +82 -0
- package/docs/llms/popover.md +34 -0
- package/docs/llms/progress.md +58 -0
- package/docs/llms/radio.md +43 -0
- package/docs/llms/select.md +99 -0
- package/docs/llms/sidebar.md +43 -0
- package/docs/llms/skeleton.md +88 -0
- package/docs/llms/slider.md +72 -0
- package/docs/llms/spinner.md +58 -0
- package/docs/llms/switch.md +60 -0
- package/docs/llms/table.md +188 -0
- package/docs/llms/tablepro.md +56 -0
- package/docs/llms/tabs.md +50 -0
- package/docs/llms/tag.md +77 -0
- package/docs/llms/theme.md +165 -0
- package/docs/llms/titlebar.md +40 -0
- package/docs/llms/toast.md +51 -0
- package/docs/llms/tooltip.md +38 -0
- package/docs/llms/typography.md +103 -0
- package/docs/llms/windowcontrols.md +31 -0
- package/docs/llms.md +97 -0
- package/package.json +8 -2
- package/dist/Input-Z526ARZP.css +0 -66
- package/dist/Switch-NP7KKJOX.css +0 -44
- package/dist/Table-ZDPGWLH3.css +0 -139
- package/dist/chunk-2VA2HSL4.cjs +0 -121
- package/dist/chunk-2VA2HSL4.cjs.map +0 -1
- package/dist/chunk-2W2AJUZW.js +0 -118
- package/dist/chunk-2W2AJUZW.js.map +0 -1
- package/dist/chunk-3QWHDCHJ.js.map +0 -1
- package/dist/chunk-4AA22BOG.js +0 -63
- package/dist/chunk-4AA22BOG.js.map +0 -1
- package/dist/chunk-5EYI27B6.js.map +0 -1
- package/dist/chunk-77NP67ML.cjs +0 -70
- package/dist/chunk-77NP67ML.cjs.map +0 -1
- package/dist/chunk-7CKHWCEA.cjs.map +0 -1
- package/dist/chunk-7NM5BRUX.js +0 -91
- package/dist/chunk-7NM5BRUX.js.map +0 -1
- package/dist/chunk-7UJI437T.js +0 -49
- package/dist/chunk-7UJI437T.js.map +0 -1
- package/dist/chunk-AAMYURWQ.cjs.map +0 -1
- package/dist/chunk-ALFDP5WX.cjs.map +0 -1
- package/dist/chunk-F3NHM4GX.js.map +0 -1
- package/dist/chunk-FMG3ZPGK.js.map +0 -1
- package/dist/chunk-G3UWXSNQ.js.map +0 -1
- package/dist/chunk-HTP6UEVR.js.map +0 -1
- package/dist/chunk-I2ERCHFV.cjs.map +0 -1
- package/dist/chunk-IBZAGURN.cjs +0 -71
- package/dist/chunk-IBZAGURN.cjs.map +0 -1
- package/dist/chunk-IGHLSNXT.cjs.map +0 -1
- package/dist/chunk-ITGCHU3Y.cjs.map +0 -1
- package/dist/chunk-JNFCTYJT.cjs +0 -31
- package/dist/chunk-JNFCTYJT.cjs.map +0 -1
- package/dist/chunk-JWFVSBVX.cjs +0 -30
- package/dist/chunk-JWFVSBVX.cjs.map +0 -1
- package/dist/chunk-K67KIKX4.cjs +0 -67
- package/dist/chunk-K67KIKX4.cjs.map +0 -1
- package/dist/chunk-M6OTFXZA.js +0 -48
- package/dist/chunk-M6OTFXZA.js.map +0 -1
- package/dist/chunk-NWJW5KLN.js +0 -29
- package/dist/chunk-NWJW5KLN.js.map +0 -1
- package/dist/chunk-NZPJ7BUB.cjs.map +0 -1
- package/dist/chunk-OXYFB2ZI.js.map +0 -1
- package/dist/chunk-QT7SJITQ.cjs +0 -114
- package/dist/chunk-QT7SJITQ.cjs.map +0 -1
- package/dist/chunk-VMHNKD3N.cjs.map +0 -1
- package/dist/chunk-VXITDXLW.js +0 -28
- package/dist/chunk-VXITDXLW.js.map +0 -1
- package/dist/chunk-XFRP2MBR.js.map +0 -1
package/dist/Input-Z526ARZP.css
DELETED
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
/* ============ Input / Textarea ============ */
|
|
2
|
-
.input-wrap {
|
|
3
|
-
position: relative;
|
|
4
|
-
display: inline-flex;
|
|
5
|
-
align-items: center;
|
|
6
|
-
width: 100%;
|
|
7
|
-
}
|
|
8
|
-
.input-wrap .lead,
|
|
9
|
-
.input-wrap .trail {
|
|
10
|
-
position: absolute;
|
|
11
|
-
color: var(--fg-subtle);
|
|
12
|
-
pointer-events: none;
|
|
13
|
-
}
|
|
14
|
-
.input-wrap .lead { left: 14px; }
|
|
15
|
-
.input-wrap .trail { right: 14px; pointer-events: auto; cursor: pointer; }
|
|
16
|
-
.input-wrap .trail:hover { color: var(--fg); }
|
|
17
|
-
|
|
18
|
-
.input,
|
|
19
|
-
.input-wrap > input {
|
|
20
|
-
width: 100%;
|
|
21
|
-
height: var(--ctrl-h);
|
|
22
|
-
padding: 0 var(--ctrl-pad-x);
|
|
23
|
-
border: none;
|
|
24
|
-
border-radius: var(--r-md);
|
|
25
|
-
background: var(--bg);
|
|
26
|
-
box-shadow: var(--neu-in-sm);
|
|
27
|
-
color: var(--fg);
|
|
28
|
-
font-size: 13px;
|
|
29
|
-
font-family: inherit;
|
|
30
|
-
outline: none;
|
|
31
|
-
transition: box-shadow var(--dur) var(--ease);
|
|
32
|
-
}
|
|
33
|
-
.input-wrap:has(.lead) > input,
|
|
34
|
-
.input-wrap.with-leading > input { padding-left: 40px; }
|
|
35
|
-
.input-wrap:has(.trail) > input,
|
|
36
|
-
.input-wrap.with-trailing > input { padding-right: 40px; }
|
|
37
|
-
.input:focus,
|
|
38
|
-
.input-wrap > input:focus { box-shadow: var(--neu-in-sm), 0 0 0 2px var(--accent-glow); }
|
|
39
|
-
.input::placeholder,
|
|
40
|
-
.input-wrap > input::placeholder { color: var(--fg-subtle); }
|
|
41
|
-
.input[disabled],
|
|
42
|
-
.input-wrap.disabled > input { opacity: 0.6; cursor: not-allowed; }
|
|
43
|
-
.input-wrap.invalid > input,
|
|
44
|
-
.input.invalid { box-shadow: var(--neu-in-sm), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent); }
|
|
45
|
-
.input-wrap.sm > input { height: 32px; padding-left: 12px; padding-right: 12px; font-size: 12px; border-radius: var(--r-sm); }
|
|
46
|
-
.input-wrap.lg > input { height: 48px; padding-left: 18px; padding-right: 18px; font-size: 14px; border-radius: var(--r-lg); }
|
|
47
|
-
|
|
48
|
-
.textarea {
|
|
49
|
-
width: 100%;
|
|
50
|
-
min-height: 96px;
|
|
51
|
-
padding: 12px 14px;
|
|
52
|
-
border: none;
|
|
53
|
-
border-radius: var(--r-md);
|
|
54
|
-
background: var(--bg);
|
|
55
|
-
box-shadow: var(--neu-in-sm);
|
|
56
|
-
color: var(--fg);
|
|
57
|
-
font-size: 13px;
|
|
58
|
-
font-family: inherit;
|
|
59
|
-
line-height: 1.55;
|
|
60
|
-
resize: vertical;
|
|
61
|
-
outline: none;
|
|
62
|
-
transition: box-shadow var(--dur) var(--ease);
|
|
63
|
-
}
|
|
64
|
-
.textarea:focus { box-shadow: var(--neu-in-sm), 0 0 0 2px var(--accent-glow); }
|
|
65
|
-
.textarea.invalid { box-shadow: var(--neu-in-sm), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent); }
|
|
66
|
-
.textarea::placeholder { color: var(--fg-subtle); }
|
package/dist/Switch-NP7KKJOX.css
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
/* ============ Switch ============ */
|
|
2
|
-
.switch {
|
|
3
|
-
--w: 46px;
|
|
4
|
-
--h: 26px;
|
|
5
|
-
display: inline-flex;
|
|
6
|
-
align-items: center;
|
|
7
|
-
gap: 10px;
|
|
8
|
-
font-size: 13px;
|
|
9
|
-
color: var(--fg);
|
|
10
|
-
cursor: pointer;
|
|
11
|
-
user-select: none;
|
|
12
|
-
}
|
|
13
|
-
.switch.disabled { opacity: 0.5; cursor: not-allowed; }
|
|
14
|
-
.switch-track {
|
|
15
|
-
position: relative;
|
|
16
|
-
width: var(--w);
|
|
17
|
-
height: var(--h);
|
|
18
|
-
border: none;
|
|
19
|
-
padding: 0;
|
|
20
|
-
border-radius: 999px;
|
|
21
|
-
background: var(--bg);
|
|
22
|
-
box-shadow: var(--neu-in-sm);
|
|
23
|
-
cursor: inherit;
|
|
24
|
-
flex-shrink: 0;
|
|
25
|
-
transition: all var(--dur) var(--ease);
|
|
26
|
-
}
|
|
27
|
-
.switch.sm { --w: 36px; --h: 20px; }
|
|
28
|
-
.switch.lg { --w: 58px; --h: 32px; }
|
|
29
|
-
.switch-thumb {
|
|
30
|
-
position: absolute;
|
|
31
|
-
top: 3px;
|
|
32
|
-
left: 3px;
|
|
33
|
-
width: calc(var(--h) - 6px);
|
|
34
|
-
height: calc(var(--h) - 6px);
|
|
35
|
-
border-radius: 999px;
|
|
36
|
-
background: var(--bg-raised);
|
|
37
|
-
box-shadow: var(--neu-out-sm);
|
|
38
|
-
transition: all var(--dur) var(--ease);
|
|
39
|
-
}
|
|
40
|
-
.switch.on .switch-thumb {
|
|
41
|
-
transform: translateX(calc(var(--w) - var(--h)));
|
|
42
|
-
background: var(--accent);
|
|
43
|
-
box-shadow: 0 2px 8px var(--accent-glow), 0 0 0 1px color-mix(in oklch, var(--accent) 40%, transparent);
|
|
44
|
-
}
|
package/dist/Table-ZDPGWLH3.css
DELETED
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
/* ============ Table ============ */
|
|
2
|
-
.table-card {
|
|
3
|
-
border-radius: var(--r-lg);
|
|
4
|
-
background: var(--bg);
|
|
5
|
-
box-shadow: var(--neu-out-sm);
|
|
6
|
-
overflow: hidden;
|
|
7
|
-
}
|
|
8
|
-
.table-wrap {
|
|
9
|
-
border-radius: var(--r-lg);
|
|
10
|
-
background: var(--bg);
|
|
11
|
-
box-shadow: var(--neu-in-sm);
|
|
12
|
-
overflow: auto;
|
|
13
|
-
}
|
|
14
|
-
.table {
|
|
15
|
-
width: 100%;
|
|
16
|
-
border-collapse: separate;
|
|
17
|
-
border-spacing: 0;
|
|
18
|
-
font-size: 13px;
|
|
19
|
-
}
|
|
20
|
-
.table th {
|
|
21
|
-
text-align: left;
|
|
22
|
-
padding: 14px 18px;
|
|
23
|
-
background: var(--bg);
|
|
24
|
-
font-size: 11px;
|
|
25
|
-
font-weight: 700;
|
|
26
|
-
letter-spacing: 0.08em;
|
|
27
|
-
text-transform: uppercase;
|
|
28
|
-
color: var(--fg-subtle);
|
|
29
|
-
border-bottom: 1px solid var(--divider);
|
|
30
|
-
position: sticky; top: 0;
|
|
31
|
-
z-index: 1;
|
|
32
|
-
}
|
|
33
|
-
.table th.sortable { cursor: pointer; user-select: none; }
|
|
34
|
-
.table th.sortable:hover { color: var(--fg); }
|
|
35
|
-
.table th .sort-ind {
|
|
36
|
-
display: inline-flex;
|
|
37
|
-
width: 16px; height: 16px;
|
|
38
|
-
border-radius: 6px;
|
|
39
|
-
background: var(--bg);
|
|
40
|
-
box-shadow: var(--neu-flat);
|
|
41
|
-
align-items: center; justify-content: center;
|
|
42
|
-
margin-left: 6px;
|
|
43
|
-
color: var(--fg-subtle);
|
|
44
|
-
vertical-align: middle;
|
|
45
|
-
}
|
|
46
|
-
.table th.sorted .sort-ind { color: var(--accent); box-shadow: var(--neu-in-sm); }
|
|
47
|
-
.table td {
|
|
48
|
-
padding: 12px 18px;
|
|
49
|
-
border-bottom: 1px solid var(--divider);
|
|
50
|
-
vertical-align: middle;
|
|
51
|
-
}
|
|
52
|
-
.table.hoverable tbody tr:hover td { background: color-mix(in oklch, var(--accent-soft) 40%, transparent); }
|
|
53
|
-
.table tbody tr.clickable { cursor: pointer; }
|
|
54
|
-
.table tbody tr.selected td { background: color-mix(in oklch, var(--accent-soft) 80%, transparent); color: var(--accent-ink); }
|
|
55
|
-
.table tbody tr:last-child td { border-bottom: none; }
|
|
56
|
-
.table.striped tbody tr:nth-child(even) td {
|
|
57
|
-
background: color-mix(in oklch, var(--bg-sunken) 40%, transparent);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
/* Embossed: each row sits on the surface */
|
|
61
|
-
.table.embossed { border-spacing: 0; }
|
|
62
|
-
.table.embossed tbody td {
|
|
63
|
-
background: var(--bg);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
/* Card-row variant: each row is its own raised pill */
|
|
67
|
-
.table.cards {
|
|
68
|
-
border-collapse: separate;
|
|
69
|
-
border-spacing: 0 10px;
|
|
70
|
-
padding: 10px;
|
|
71
|
-
background: transparent;
|
|
72
|
-
box-shadow: none;
|
|
73
|
-
}
|
|
74
|
-
.table.cards thead th {
|
|
75
|
-
background: transparent;
|
|
76
|
-
border-bottom: none;
|
|
77
|
-
padding-top: 0;
|
|
78
|
-
padding-bottom: 6px;
|
|
79
|
-
}
|
|
80
|
-
.table.cards tbody td {
|
|
81
|
-
background: var(--bg);
|
|
82
|
-
border-bottom: none;
|
|
83
|
-
padding: 14px 18px;
|
|
84
|
-
}
|
|
85
|
-
.table.cards tbody td:first-child {
|
|
86
|
-
border-radius: var(--r-md) 0 0 var(--r-md);
|
|
87
|
-
box-shadow: -4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
|
|
88
|
-
}
|
|
89
|
-
.table.cards tbody td:last-child {
|
|
90
|
-
border-radius: 0 var(--r-md) var(--r-md) 0;
|
|
91
|
-
box-shadow: 4px 4px 8px var(--shadow-dark), 4px -4px 8px var(--shadow-light);
|
|
92
|
-
}
|
|
93
|
-
.table.cards tbody td:not(:first-child):not(:last-child) {
|
|
94
|
-
box-shadow: 0 4px 8px var(--shadow-dark), 0 -4px 8px var(--shadow-light);
|
|
95
|
-
}
|
|
96
|
-
.table.cards.hoverable tbody tr:hover td { background: var(--bg); transform: translateY(-1px); }
|
|
97
|
-
|
|
98
|
-
.table .row-check { width: 36px; }
|
|
99
|
-
.table-empty { padding: 60px 20px; text-align: center; color: var(--fg-muted); }
|
|
100
|
-
|
|
101
|
-
/* Pro: card-wrap with toolbar + table + footer */
|
|
102
|
-
.table-card {
|
|
103
|
-
border-radius: var(--r-lg);
|
|
104
|
-
background: var(--bg);
|
|
105
|
-
box-shadow: var(--neu-out-sm);
|
|
106
|
-
overflow: hidden;
|
|
107
|
-
}
|
|
108
|
-
.table-card .table-wrap { background: transparent; box-shadow: none; border-radius: 0; }
|
|
109
|
-
.table-card .table-wrap.joined { border-radius: 0; }
|
|
110
|
-
.table-toolbar {
|
|
111
|
-
display: flex;
|
|
112
|
-
align-items: center;
|
|
113
|
-
gap: var(--gap-3);
|
|
114
|
-
padding: 14px 16px;
|
|
115
|
-
border-bottom: 1px solid var(--divider);
|
|
116
|
-
}
|
|
117
|
-
.table-toolbar .table-title {
|
|
118
|
-
font-size: 14px;
|
|
119
|
-
font-weight: 600;
|
|
120
|
-
margin-right: 8px;
|
|
121
|
-
}
|
|
122
|
-
.table-toolbar-main {
|
|
123
|
-
flex: 1;
|
|
124
|
-
display: flex;
|
|
125
|
-
align-items: center;
|
|
126
|
-
gap: 10px;
|
|
127
|
-
min-width: 0;
|
|
128
|
-
}
|
|
129
|
-
.table-toolbar-actions {
|
|
130
|
-
display: flex;
|
|
131
|
-
align-items: center;
|
|
132
|
-
gap: 8px;
|
|
133
|
-
flex-shrink: 0;
|
|
134
|
-
}
|
|
135
|
-
.table-footer {
|
|
136
|
-
padding: 10px 16px;
|
|
137
|
-
border-top: 1px solid var(--divider);
|
|
138
|
-
background: color-mix(in oklch, var(--bg-sunken) 30%, transparent);
|
|
139
|
-
}
|
package/dist/chunk-2VA2HSL4.cjs
DELETED
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var chunkC5TGQ7CV_cjs = require('./chunk-C5TGQ7CV.cjs');
|
|
4
|
-
var chunkYVO7XO4W_cjs = require('./chunk-YVO7XO4W.cjs');
|
|
5
|
-
require('./tokens-HWQ7KWPG.css');
|
|
6
|
-
require('./shared-NJHRNLRH.css');
|
|
7
|
-
require('./Table-ZDPGWLH3.css');
|
|
8
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
9
|
-
|
|
10
|
-
function Table({
|
|
11
|
-
columns,
|
|
12
|
-
data,
|
|
13
|
-
rowKey,
|
|
14
|
-
variant,
|
|
15
|
-
hoverable = true,
|
|
16
|
-
striped,
|
|
17
|
-
sortKey,
|
|
18
|
-
sortDir = "asc",
|
|
19
|
-
onSort,
|
|
20
|
-
selectable,
|
|
21
|
-
selected = [],
|
|
22
|
-
onSelect,
|
|
23
|
-
onRowClick,
|
|
24
|
-
empty = "\u6682\u65E0\u6570\u636E",
|
|
25
|
-
className = ""
|
|
26
|
-
}) {
|
|
27
|
-
const keyOf = (row, i) => {
|
|
28
|
-
if (typeof rowKey === "function") return rowKey(row);
|
|
29
|
-
if (rowKey) return row[rowKey];
|
|
30
|
-
return i;
|
|
31
|
-
};
|
|
32
|
-
const v = variant ?? (striped ? "striped" : "default");
|
|
33
|
-
const allSelected = selectable && data.length > 0 && data.every((r, i) => selected.includes(keyOf(r, i)));
|
|
34
|
-
const toggleRow = (k) => {
|
|
35
|
-
if (!onSelect) return;
|
|
36
|
-
onSelect(selected.includes(k) ? selected.filter((x) => x !== k) : [...selected, k]);
|
|
37
|
-
};
|
|
38
|
-
const toggleAll = () => {
|
|
39
|
-
if (!onSelect) return;
|
|
40
|
-
onSelect(allSelected ? [] : data.map((r, i) => keyOf(r, i)));
|
|
41
|
-
};
|
|
42
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `table-wrap ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: `table ${v} ${hoverable ? "hoverable" : ""}`, children: [
|
|
43
|
-
/* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
|
|
44
|
-
selectable && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "row-check", style: { width: 36 }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkC5TGQ7CV_cjs.Checkbox, { checked: allSelected, onChange: toggleAll }) }),
|
|
45
|
-
columns.map((c) => {
|
|
46
|
-
const sorted = sortKey === c.key;
|
|
47
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
48
|
-
"th",
|
|
49
|
-
{
|
|
50
|
-
className: `${c.sortable ? "sortable" : ""} ${sorted ? "sorted" : ""}`,
|
|
51
|
-
style: { width: c.width, textAlign: c.align ?? "left" },
|
|
52
|
-
onClick: () => c.sortable && onSort?.(c.key),
|
|
53
|
-
children: [
|
|
54
|
-
c.title,
|
|
55
|
-
c.sortable && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sort-ind", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
56
|
-
chunkYVO7XO4W_cjs.Icon,
|
|
57
|
-
{
|
|
58
|
-
name: sorted ? sortDir === "asc" ? "chevUp" : "chevDown" : "chevDown",
|
|
59
|
-
size: 10
|
|
60
|
-
}
|
|
61
|
-
) })
|
|
62
|
-
]
|
|
63
|
-
},
|
|
64
|
-
c.key
|
|
65
|
-
);
|
|
66
|
-
})
|
|
67
|
-
] }) }),
|
|
68
|
-
/* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns.length + (selectable ? 1 : 0), className: "table-empty", children: empty }) }) : data.map((row, i) => {
|
|
69
|
-
const k = keyOf(row, i);
|
|
70
|
-
const isSel = selected.includes(k);
|
|
71
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
72
|
-
"tr",
|
|
73
|
-
{
|
|
74
|
-
className: `${onRowClick ? "clickable" : ""} ${isSel ? "selected" : ""}`,
|
|
75
|
-
onClick: onRowClick ? () => onRowClick(row, i) : void 0,
|
|
76
|
-
children: [
|
|
77
|
-
selectable && /* @__PURE__ */ jsxRuntime.jsx(
|
|
78
|
-
"td",
|
|
79
|
-
{
|
|
80
|
-
className: "row-check",
|
|
81
|
-
onClick: (e) => {
|
|
82
|
-
e.stopPropagation();
|
|
83
|
-
toggleRow(k);
|
|
84
|
-
},
|
|
85
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(chunkC5TGQ7CV_cjs.Checkbox, { checked: isSel, onChange: () => toggleRow(k) })
|
|
86
|
-
}
|
|
87
|
-
),
|
|
88
|
-
columns.map((c) => {
|
|
89
|
-
const val = c.dataIndex ? row[c.dataIndex] : void 0;
|
|
90
|
-
return /* @__PURE__ */ jsxRuntime.jsx("td", { style: { textAlign: c.align ?? "left" }, children: c.render ? c.render(val, row, i) : val }, c.key);
|
|
91
|
-
})
|
|
92
|
-
]
|
|
93
|
-
},
|
|
94
|
-
k
|
|
95
|
-
);
|
|
96
|
-
}) })
|
|
97
|
-
] }) });
|
|
98
|
-
}
|
|
99
|
-
function TablePro({
|
|
100
|
-
toolbar,
|
|
101
|
-
actions,
|
|
102
|
-
footer,
|
|
103
|
-
title,
|
|
104
|
-
className = "",
|
|
105
|
-
...tableProps
|
|
106
|
-
}) {
|
|
107
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `table-card ${className}`, children: [
|
|
108
|
-
(title || toolbar || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "table-toolbar", children: [
|
|
109
|
-
title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-title", children: title }),
|
|
110
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-toolbar-main", children: toolbar }),
|
|
111
|
-
actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-toolbar-actions", children: actions })
|
|
112
|
-
] }),
|
|
113
|
-
/* @__PURE__ */ jsxRuntime.jsx(Table, { ...tableProps, className: "joined" }),
|
|
114
|
-
footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-footer", children: footer })
|
|
115
|
-
] });
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
exports.Table = Table;
|
|
119
|
-
exports.TablePro = TablePro;
|
|
120
|
-
//# sourceMappingURL=chunk-2VA2HSL4.cjs.map
|
|
121
|
-
//# sourceMappingURL=chunk-2VA2HSL4.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Table/Table.tsx"],"names":["jsx","jsxs","Checkbox","Icon"],"mappings":"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","file":"chunk-2VA2HSL4.cjs","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Table.css\";\nimport * as React from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Checkbox } from \"../Checkbox\";\n\nexport interface TableColumn<Row = any> {\n key: string;\n title: React.ReactNode;\n /** Data key to read from row, or custom render. */\n dataIndex?: keyof Row;\n render?: (value: any, row: Row, index: number) => React.ReactNode;\n width?: number | string;\n align?: \"left\" | \"center\" | \"right\";\n sortable?: boolean;\n}\n\nexport type TableVariant = \"default\" | \"striped\" | \"embossed\" | \"cards\";\n\nexport interface TableProps<Row = any> {\n columns: TableColumn<Row>[];\n data: Row[];\n rowKey?: keyof Row | ((row: Row) => string | number);\n /** Visual variant. */\n variant?: TableVariant;\n /** Hoverable rows. */\n hoverable?: boolean;\n /** Striped rows (shortcut for variant=\"striped\"). */\n striped?: boolean;\n\n /** Sort state — controlled. */\n sortKey?: string;\n sortDir?: \"asc\" | \"desc\";\n onSort?: (key: string) => void;\n\n /** Row selection — controlled list of selected row keys. */\n selectable?: boolean;\n selected?: (string | number)[];\n onSelect?: (keys: (string | number)[]) => void;\n\n /** Called when user clicks a row. */\n onRowClick?: (row: Row, index: number) => void;\n /** Empty state. */\n empty?: React.ReactNode;\n className?: string;\n}\n\n/** `Table` — neumorphic data table with sorting, selection and visual variants. */\nexport function Table<Row extends Record<string, any> = any>({\n columns,\n data,\n rowKey,\n variant,\n hoverable = true,\n striped,\n sortKey,\n sortDir = \"asc\",\n onSort,\n selectable,\n selected = [],\n onSelect,\n onRowClick,\n empty = \"暂无数据\",\n className = \"\",\n}: TableProps<Row>) {\n const keyOf = (row: Row, i: number): string | number => {\n if (typeof rowKey === \"function\") return rowKey(row);\n if (rowKey) return row[rowKey] as any;\n return i;\n };\n\n const v: TableVariant = variant ?? (striped ? \"striped\" : \"default\");\n const allSelected =\n selectable && data.length > 0 && data.every((r, i) => selected.includes(keyOf(r, i)));\n\n const toggleRow = (k: string | number) => {\n if (!onSelect) return;\n onSelect(selected.includes(k) ? selected.filter((x) => x !== k) : [...selected, k]);\n };\n const toggleAll = () => {\n if (!onSelect) return;\n onSelect(allSelected ? [] : data.map((r, i) => keyOf(r, i)));\n };\n\n return (\n <div className={`table-wrap ${className}`}>\n <table className={`table ${v} ${hoverable ? \"hoverable\" : \"\"}`}>\n <thead>\n <tr>\n {selectable && (\n <th className=\"row-check\" style={{ width: 36 }}>\n <Checkbox checked={allSelected} onChange={toggleAll} />\n </th>\n )}\n {columns.map((c) => {\n const sorted = sortKey === c.key;\n return (\n <th\n key={c.key}\n className={`${c.sortable ? \"sortable\" : \"\"} ${sorted ? \"sorted\" : \"\"}`}\n style={{ width: c.width, textAlign: c.align ?? \"left\" }}\n onClick={() => c.sortable && onSort?.(c.key)}\n >\n {c.title}\n {c.sortable && (\n <span className=\"sort-ind\">\n <Icon\n name={sorted ? (sortDir === \"asc\" ? \"chevUp\" : \"chevDown\") : \"chevDown\"}\n size={10}\n />\n </span>\n )}\n </th>\n );\n })}\n </tr>\n </thead>\n <tbody>\n {data.length === 0 ? (\n <tr>\n <td colSpan={columns.length + (selectable ? 1 : 0)} className=\"table-empty\">\n {empty}\n </td>\n </tr>\n ) : (\n data.map((row, i) => {\n const k = keyOf(row, i);\n const isSel = selected.includes(k);\n return (\n <tr\n key={k}\n className={`${onRowClick ? \"clickable\" : \"\"} ${isSel ? \"selected\" : \"\"}`}\n onClick={onRowClick ? () => onRowClick(row, i) : undefined}\n >\n {selectable && (\n <td\n className=\"row-check\"\n onClick={(e) => {\n e.stopPropagation();\n toggleRow(k);\n }}\n >\n <Checkbox checked={isSel} onChange={() => toggleRow(k)} />\n </td>\n )}\n {columns.map((c) => {\n const val = c.dataIndex ? row[c.dataIndex] : undefined;\n return (\n <td key={c.key} style={{ textAlign: c.align ?? \"left\" }}>\n {c.render ? c.render(val, row, i) : (val as React.ReactNode)}\n </td>\n );\n })}\n </tr>\n );\n })\n )}\n </tbody>\n </table>\n </div>\n );\n}\n\nexport interface TableProProps<Row = any> extends TableProps<Row> {\n /** Toolbar slot — search input, filter, etc. */\n toolbar?: React.ReactNode;\n /** Right-aligned actions slot in toolbar. */\n actions?: React.ReactNode;\n /** Footer slot — usually <Pagination />. */\n footer?: React.ReactNode;\n /** Title shown above the toolbar. */\n title?: React.ReactNode;\n}\n\n/**\n * `TablePro` — full-featured table card with toolbar, sortable/selectable rows,\n * variants, and a footer slot for pagination.\n */\nexport function TablePro<Row extends Record<string, any> = any>({\n toolbar,\n actions,\n footer,\n title,\n className = \"\",\n ...tableProps\n}: TableProProps<Row>) {\n return (\n <div className={`table-card ${className}`}>\n {(title || toolbar || actions) && (\n <div className=\"table-toolbar\">\n {title && <div className=\"table-title\">{title}</div>}\n <div className=\"table-toolbar-main\">{toolbar}</div>\n {actions && <div className=\"table-toolbar-actions\">{actions}</div>}\n </div>\n )}\n <Table {...tableProps} className=\"joined\" />\n {footer && <div className=\"table-footer\">{footer}</div>}\n </div>\n );\n}\n"]}
|
package/dist/chunk-2W2AJUZW.js
DELETED
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
import { Checkbox } from './chunk-M6CGYGEO.js';
|
|
2
|
-
import { Icon } from './chunk-GEYMWUW6.js';
|
|
3
|
-
import './tokens-HWQ7KWPG.css';
|
|
4
|
-
import './shared-NJHRNLRH.css';
|
|
5
|
-
import './Table-ZDPGWLH3.css';
|
|
6
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
7
|
-
|
|
8
|
-
function Table({
|
|
9
|
-
columns,
|
|
10
|
-
data,
|
|
11
|
-
rowKey,
|
|
12
|
-
variant,
|
|
13
|
-
hoverable = true,
|
|
14
|
-
striped,
|
|
15
|
-
sortKey,
|
|
16
|
-
sortDir = "asc",
|
|
17
|
-
onSort,
|
|
18
|
-
selectable,
|
|
19
|
-
selected = [],
|
|
20
|
-
onSelect,
|
|
21
|
-
onRowClick,
|
|
22
|
-
empty = "\u6682\u65E0\u6570\u636E",
|
|
23
|
-
className = ""
|
|
24
|
-
}) {
|
|
25
|
-
const keyOf = (row, i) => {
|
|
26
|
-
if (typeof rowKey === "function") return rowKey(row);
|
|
27
|
-
if (rowKey) return row[rowKey];
|
|
28
|
-
return i;
|
|
29
|
-
};
|
|
30
|
-
const v = variant ?? (striped ? "striped" : "default");
|
|
31
|
-
const allSelected = selectable && data.length > 0 && data.every((r, i) => selected.includes(keyOf(r, i)));
|
|
32
|
-
const toggleRow = (k) => {
|
|
33
|
-
if (!onSelect) return;
|
|
34
|
-
onSelect(selected.includes(k) ? selected.filter((x) => x !== k) : [...selected, k]);
|
|
35
|
-
};
|
|
36
|
-
const toggleAll = () => {
|
|
37
|
-
if (!onSelect) return;
|
|
38
|
-
onSelect(allSelected ? [] : data.map((r, i) => keyOf(r, i)));
|
|
39
|
-
};
|
|
40
|
-
return /* @__PURE__ */ jsx("div", { className: `table-wrap ${className}`, children: /* @__PURE__ */ jsxs("table", { className: `table ${v} ${hoverable ? "hoverable" : ""}`, children: [
|
|
41
|
-
/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
|
|
42
|
-
selectable && /* @__PURE__ */ jsx("th", { className: "row-check", style: { width: 36 }, children: /* @__PURE__ */ jsx(Checkbox, { checked: allSelected, onChange: toggleAll }) }),
|
|
43
|
-
columns.map((c) => {
|
|
44
|
-
const sorted = sortKey === c.key;
|
|
45
|
-
return /* @__PURE__ */ jsxs(
|
|
46
|
-
"th",
|
|
47
|
-
{
|
|
48
|
-
className: `${c.sortable ? "sortable" : ""} ${sorted ? "sorted" : ""}`,
|
|
49
|
-
style: { width: c.width, textAlign: c.align ?? "left" },
|
|
50
|
-
onClick: () => c.sortable && onSort?.(c.key),
|
|
51
|
-
children: [
|
|
52
|
-
c.title,
|
|
53
|
-
c.sortable && /* @__PURE__ */ jsx("span", { className: "sort-ind", children: /* @__PURE__ */ jsx(
|
|
54
|
-
Icon,
|
|
55
|
-
{
|
|
56
|
-
name: sorted ? sortDir === "asc" ? "chevUp" : "chevDown" : "chevDown",
|
|
57
|
-
size: 10
|
|
58
|
-
}
|
|
59
|
-
) })
|
|
60
|
-
]
|
|
61
|
-
},
|
|
62
|
-
c.key
|
|
63
|
-
);
|
|
64
|
-
})
|
|
65
|
-
] }) }),
|
|
66
|
-
/* @__PURE__ */ jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length + (selectable ? 1 : 0), className: "table-empty", children: empty }) }) : data.map((row, i) => {
|
|
67
|
-
const k = keyOf(row, i);
|
|
68
|
-
const isSel = selected.includes(k);
|
|
69
|
-
return /* @__PURE__ */ jsxs(
|
|
70
|
-
"tr",
|
|
71
|
-
{
|
|
72
|
-
className: `${onRowClick ? "clickable" : ""} ${isSel ? "selected" : ""}`,
|
|
73
|
-
onClick: onRowClick ? () => onRowClick(row, i) : void 0,
|
|
74
|
-
children: [
|
|
75
|
-
selectable && /* @__PURE__ */ jsx(
|
|
76
|
-
"td",
|
|
77
|
-
{
|
|
78
|
-
className: "row-check",
|
|
79
|
-
onClick: (e) => {
|
|
80
|
-
e.stopPropagation();
|
|
81
|
-
toggleRow(k);
|
|
82
|
-
},
|
|
83
|
-
children: /* @__PURE__ */ jsx(Checkbox, { checked: isSel, onChange: () => toggleRow(k) })
|
|
84
|
-
}
|
|
85
|
-
),
|
|
86
|
-
columns.map((c) => {
|
|
87
|
-
const val = c.dataIndex ? row[c.dataIndex] : void 0;
|
|
88
|
-
return /* @__PURE__ */ jsx("td", { style: { textAlign: c.align ?? "left" }, children: c.render ? c.render(val, row, i) : val }, c.key);
|
|
89
|
-
})
|
|
90
|
-
]
|
|
91
|
-
},
|
|
92
|
-
k
|
|
93
|
-
);
|
|
94
|
-
}) })
|
|
95
|
-
] }) });
|
|
96
|
-
}
|
|
97
|
-
function TablePro({
|
|
98
|
-
toolbar,
|
|
99
|
-
actions,
|
|
100
|
-
footer,
|
|
101
|
-
title,
|
|
102
|
-
className = "",
|
|
103
|
-
...tableProps
|
|
104
|
-
}) {
|
|
105
|
-
return /* @__PURE__ */ jsxs("div", { className: `table-card ${className}`, children: [
|
|
106
|
-
(title || toolbar || actions) && /* @__PURE__ */ jsxs("div", { className: "table-toolbar", children: [
|
|
107
|
-
title && /* @__PURE__ */ jsx("div", { className: "table-title", children: title }),
|
|
108
|
-
/* @__PURE__ */ jsx("div", { className: "table-toolbar-main", children: toolbar }),
|
|
109
|
-
actions && /* @__PURE__ */ jsx("div", { className: "table-toolbar-actions", children: actions })
|
|
110
|
-
] }),
|
|
111
|
-
/* @__PURE__ */ jsx(Table, { ...tableProps, className: "joined" }),
|
|
112
|
-
footer && /* @__PURE__ */ jsx("div", { className: "table-footer", children: footer })
|
|
113
|
-
] });
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
export { Table, TablePro };
|
|
117
|
-
//# sourceMappingURL=chunk-2W2AJUZW.js.map
|
|
118
|
-
//# sourceMappingURL=chunk-2W2AJUZW.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Table/Table.tsx"],"names":[],"mappings":"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","file":"chunk-2W2AJUZW.js","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Table.css\";\nimport * as React from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Checkbox } from \"../Checkbox\";\n\nexport interface TableColumn<Row = any> {\n key: string;\n title: React.ReactNode;\n /** Data key to read from row, or custom render. */\n dataIndex?: keyof Row;\n render?: (value: any, row: Row, index: number) => React.ReactNode;\n width?: number | string;\n align?: \"left\" | \"center\" | \"right\";\n sortable?: boolean;\n}\n\nexport type TableVariant = \"default\" | \"striped\" | \"embossed\" | \"cards\";\n\nexport interface TableProps<Row = any> {\n columns: TableColumn<Row>[];\n data: Row[];\n rowKey?: keyof Row | ((row: Row) => string | number);\n /** Visual variant. */\n variant?: TableVariant;\n /** Hoverable rows. */\n hoverable?: boolean;\n /** Striped rows (shortcut for variant=\"striped\"). */\n striped?: boolean;\n\n /** Sort state — controlled. */\n sortKey?: string;\n sortDir?: \"asc\" | \"desc\";\n onSort?: (key: string) => void;\n\n /** Row selection — controlled list of selected row keys. */\n selectable?: boolean;\n selected?: (string | number)[];\n onSelect?: (keys: (string | number)[]) => void;\n\n /** Called when user clicks a row. */\n onRowClick?: (row: Row, index: number) => void;\n /** Empty state. */\n empty?: React.ReactNode;\n className?: string;\n}\n\n/** `Table` — neumorphic data table with sorting, selection and visual variants. */\nexport function Table<Row extends Record<string, any> = any>({\n columns,\n data,\n rowKey,\n variant,\n hoverable = true,\n striped,\n sortKey,\n sortDir = \"asc\",\n onSort,\n selectable,\n selected = [],\n onSelect,\n onRowClick,\n empty = \"暂无数据\",\n className = \"\",\n}: TableProps<Row>) {\n const keyOf = (row: Row, i: number): string | number => {\n if (typeof rowKey === \"function\") return rowKey(row);\n if (rowKey) return row[rowKey] as any;\n return i;\n };\n\n const v: TableVariant = variant ?? (striped ? \"striped\" : \"default\");\n const allSelected =\n selectable && data.length > 0 && data.every((r, i) => selected.includes(keyOf(r, i)));\n\n const toggleRow = (k: string | number) => {\n if (!onSelect) return;\n onSelect(selected.includes(k) ? selected.filter((x) => x !== k) : [...selected, k]);\n };\n const toggleAll = () => {\n if (!onSelect) return;\n onSelect(allSelected ? [] : data.map((r, i) => keyOf(r, i)));\n };\n\n return (\n <div className={`table-wrap ${className}`}>\n <table className={`table ${v} ${hoverable ? \"hoverable\" : \"\"}`}>\n <thead>\n <tr>\n {selectable && (\n <th className=\"row-check\" style={{ width: 36 }}>\n <Checkbox checked={allSelected} onChange={toggleAll} />\n </th>\n )}\n {columns.map((c) => {\n const sorted = sortKey === c.key;\n return (\n <th\n key={c.key}\n className={`${c.sortable ? \"sortable\" : \"\"} ${sorted ? \"sorted\" : \"\"}`}\n style={{ width: c.width, textAlign: c.align ?? \"left\" }}\n onClick={() => c.sortable && onSort?.(c.key)}\n >\n {c.title}\n {c.sortable && (\n <span className=\"sort-ind\">\n <Icon\n name={sorted ? (sortDir === \"asc\" ? \"chevUp\" : \"chevDown\") : \"chevDown\"}\n size={10}\n />\n </span>\n )}\n </th>\n );\n })}\n </tr>\n </thead>\n <tbody>\n {data.length === 0 ? (\n <tr>\n <td colSpan={columns.length + (selectable ? 1 : 0)} className=\"table-empty\">\n {empty}\n </td>\n </tr>\n ) : (\n data.map((row, i) => {\n const k = keyOf(row, i);\n const isSel = selected.includes(k);\n return (\n <tr\n key={k}\n className={`${onRowClick ? \"clickable\" : \"\"} ${isSel ? \"selected\" : \"\"}`}\n onClick={onRowClick ? () => onRowClick(row, i) : undefined}\n >\n {selectable && (\n <td\n className=\"row-check\"\n onClick={(e) => {\n e.stopPropagation();\n toggleRow(k);\n }}\n >\n <Checkbox checked={isSel} onChange={() => toggleRow(k)} />\n </td>\n )}\n {columns.map((c) => {\n const val = c.dataIndex ? row[c.dataIndex] : undefined;\n return (\n <td key={c.key} style={{ textAlign: c.align ?? \"left\" }}>\n {c.render ? c.render(val, row, i) : (val as React.ReactNode)}\n </td>\n );\n })}\n </tr>\n );\n })\n )}\n </tbody>\n </table>\n </div>\n );\n}\n\nexport interface TableProProps<Row = any> extends TableProps<Row> {\n /** Toolbar slot — search input, filter, etc. */\n toolbar?: React.ReactNode;\n /** Right-aligned actions slot in toolbar. */\n actions?: React.ReactNode;\n /** Footer slot — usually <Pagination />. */\n footer?: React.ReactNode;\n /** Title shown above the toolbar. */\n title?: React.ReactNode;\n}\n\n/**\n * `TablePro` — full-featured table card with toolbar, sortable/selectable rows,\n * variants, and a footer slot for pagination.\n */\nexport function TablePro<Row extends Record<string, any> = any>({\n toolbar,\n actions,\n footer,\n title,\n className = \"\",\n ...tableProps\n}: TableProProps<Row>) {\n return (\n <div className={`table-card ${className}`}>\n {(title || toolbar || actions) && (\n <div className=\"table-toolbar\">\n {title && <div className=\"table-title\">{title}</div>}\n <div className=\"table-toolbar-main\">{toolbar}</div>\n {actions && <div className=\"table-toolbar-actions\">{actions}</div>}\n </div>\n )}\n <Table {...tableProps} className=\"joined\" />\n {footer && <div className=\"table-footer\">{footer}</div>}\n </div>\n );\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Tag/Tag.tsx"],"names":[],"mappings":";;;;;;AAoBO,IAAM,MAA0B,CAAC;AAAA,EACtC,IAAA,GAAO,SAAA;AAAA,EACP,KAAA;AAAA,EACA,GAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,GAAA,GAAM,CAAC,KAAA,EAAO,IAAA,EAAM,KAAA,IAAS,OAAA,EAAS,SAAS,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAC/E,EAAA,uBACE,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,GAAA,EAAM,GAAG,IAAA,EACvB,QAAA,EAAA;AAAA,IAAA,GAAA,oBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,KAAA,EAAM,CAAA;AAAA,IAC7B,QAAA;AAAA,IACA,SAAA,oBACC,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,GAAA;AAAA,QACV,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAW,QAAA;AAAA,QACX,OAAA,EAAS,CAAC,CAAA,KAAM;AACd,UAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,UAAA,QAAA,IAAW;AAAA,QACb,CAAA;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,GAAA,EAAI,MAAM,EAAA,EAAI;AAAA;AAAA;AAC3B,GAAA,EAEJ,CAAA;AAEJ;AAYO,IAAM,QAA8B,CAAC;AAAA,EAC1C,KAAA;AAAA,EACA,GAAA;AAAA,EACA,IAAA,GAAO,QAAA;AAAA,EACP,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,IAAA,GAAO,GAAA,IAAQ,OAAO,KAAA,KAAU,YAAY,KAAA,GAAQ,CAAA;AAC1D,EAAA,4BACG,MAAA,EAAA,EAAK,SAAA,EAAW,cAAc,SAAS,CAAA,CAAA,EAAK,GAAG,IAAA,EAC7C,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,wBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,CAAA,MAAA,EAAS,IAAI,CAAA,CAAA,EAAI,GAAA,GAAM,KAAA,GAAQ,EAAE,IAC/C,QAAA,EAAA,CAAC,GAAA,KAAQ,KAAA,GAAS,EAAA,GAAK,QAAQ,KAAA,CAAA,EAClC;AAAA,GAAA,EAEJ,CAAA;AAEJ","file":"chunk-3QWHDCHJ.js","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Tag.css\";\nimport * as React from \"react\";\nimport { Icon } from \"../Icon\";\n\nexport type TagTone = \"neutral\" | \"accent\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n\nexport interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {\n tone?: TagTone;\n solid?: boolean;\n /** Render a leading colored dot. */\n dot?: boolean;\n /** Show a close button. */\n removable?: boolean;\n onRemove?: () => void;\n children?: React.ReactNode;\n}\n\n/** `Tag` — small label/pill. */\nexport const Tag: React.FC<TagProps> = ({\n tone = \"neutral\",\n solid,\n dot,\n removable,\n onRemove,\n className = \"\",\n children,\n ...rest\n}) => {\n const cls = [\"tag\", tone, solid && \"solid\", className].filter(Boolean).join(\" \");\n return (\n <span className={cls} {...rest}>\n {dot && <span className=\"dot\" />}\n {children}\n {removable && (\n <span\n className=\"x\"\n role=\"button\"\n aria-label=\"Remove\"\n onClick={(e) => {\n e.stopPropagation();\n onRemove?.();\n }}\n >\n <Icon name=\"x\" size={11} />\n </span>\n )}\n </span>\n );\n};\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n /** Numeric count — renders as \"99+\" if > 99. */\n count?: number;\n /** Show a tiny dot instead of a number. */\n dot?: boolean;\n tone?: TagTone;\n children?: React.ReactNode;\n}\n\n/** `Badge` — notification dot / count. Wrap around another element. */\nexport const Badge: React.FC<BadgeProps> = ({\n count,\n dot,\n tone = \"danger\",\n children,\n className = \"\",\n ...rest\n}) => {\n const show = dot || (typeof count === \"number\" && count > 0);\n return (\n <span className={`badge-wrap ${className}`} {...rest}>\n {children}\n {show && (\n <span className={`badge ${tone} ${dot ? \"dot\" : \"\"}`}>\n {!dot && (count! > 99 ? \"99+\" : count)}\n </span>\n )}\n </span>\n );\n};\n"]}
|
package/dist/chunk-4AA22BOG.js
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import './tokens-HWQ7KWPG.css';
|
|
2
|
-
import './shared-NJHRNLRH.css';
|
|
3
|
-
import './Empty-VM23UNLQ.css';
|
|
4
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
5
|
-
|
|
6
|
-
// src/components/Empty/Empty.tsx
|
|
7
|
-
var Empty = ({
|
|
8
|
-
title = "\u6682\u65E0\u5185\u5BB9",
|
|
9
|
-
description,
|
|
10
|
-
icon,
|
|
11
|
-
action,
|
|
12
|
-
size = "md",
|
|
13
|
-
variant = "default",
|
|
14
|
-
className = ""
|
|
15
|
-
}) => /* @__PURE__ */ jsxs("div", { className: `empty ${size} ${variant} ${className}`, children: [
|
|
16
|
-
icon && /* @__PURE__ */ jsx("div", { className: "empty-ico", children: icon }),
|
|
17
|
-
/* @__PURE__ */ jsx("div", { className: "empty-title", children: title }),
|
|
18
|
-
description && /* @__PURE__ */ jsx("div", { className: "empty-desc", children: description }),
|
|
19
|
-
action && /* @__PURE__ */ jsx("div", { className: "empty-action", children: action })
|
|
20
|
-
] });
|
|
21
|
-
var Spinner = ({
|
|
22
|
-
size = 20,
|
|
23
|
-
tone = "accent",
|
|
24
|
-
label,
|
|
25
|
-
variant = "ring",
|
|
26
|
-
className = ""
|
|
27
|
-
}) => {
|
|
28
|
-
const cls = `spinner ${variant} ${tone} ${className}`.trim();
|
|
29
|
-
const spinner = variant === "dots" ? /* @__PURE__ */ jsxs("span", { className: cls, style: { fontSize: size }, "aria-label": "Loading", children: [
|
|
30
|
-
/* @__PURE__ */ jsx("i", {}),
|
|
31
|
-
/* @__PURE__ */ jsx("i", {}),
|
|
32
|
-
/* @__PURE__ */ jsx("i", {})
|
|
33
|
-
] }) : /* @__PURE__ */ jsx(
|
|
34
|
-
"span",
|
|
35
|
-
{
|
|
36
|
-
className: cls,
|
|
37
|
-
style: { width: size, height: size },
|
|
38
|
-
"aria-label": "Loading"
|
|
39
|
-
}
|
|
40
|
-
);
|
|
41
|
-
if (!label) return spinner;
|
|
42
|
-
return /* @__PURE__ */ jsxs("span", { className: "spinner-wrap", children: [
|
|
43
|
-
spinner,
|
|
44
|
-
/* @__PURE__ */ jsx("span", { className: "spinner-label", children: label })
|
|
45
|
-
] });
|
|
46
|
-
};
|
|
47
|
-
var Skeleton = ({
|
|
48
|
-
width = "100%",
|
|
49
|
-
height = 16,
|
|
50
|
-
circle,
|
|
51
|
-
animation = "wave",
|
|
52
|
-
className = ""
|
|
53
|
-
}) => /* @__PURE__ */ jsx(
|
|
54
|
-
"span",
|
|
55
|
-
{
|
|
56
|
-
className: `skeleton ${animation} ${circle ? "circle" : ""} ${className}`.trim(),
|
|
57
|
-
style: { width, height, borderRadius: circle ? "50%" : void 0 }
|
|
58
|
-
}
|
|
59
|
-
);
|
|
60
|
-
|
|
61
|
-
export { Empty, Skeleton, Spinner };
|
|
62
|
-
//# sourceMappingURL=chunk-4AA22BOG.js.map
|
|
63
|
-
//# sourceMappingURL=chunk-4AA22BOG.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Empty/Empty.tsx"],"names":[],"mappings":";;;;;;AAiBO,IAAM,QAA8B,CAAC;AAAA,EAC1C,KAAA,GAAQ,0BAAA;AAAA,EACR,WAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,SAAA,GAAY;AACd,CAAA,qBACE,IAAA,CAAC,SAAI,SAAA,EAAW,CAAA,MAAA,EAAS,IAAI,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,EAClD,QAAA,EAAA;AAAA,EAAA,IAAA,oBAAQ,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,WAAA,EAAa,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,kBAC1C,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EAAe,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,EACnC,WAAA,oBAAe,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAc,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,EACxD,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAgB,QAAA,EAAA,MAAA,EAAO;AAAA,CAAA,EACnD;AAcK,IAAM,UAAkC,CAAC;AAAA,EAC9C,IAAA,GAAO,EAAA;AAAA,EACP,IAAA,GAAO,QAAA;AAAA,EACP,KAAA;AAAA,EACA,OAAA,GAAU,MAAA;AAAA,EACV,SAAA,GAAY;AACd,CAAA,KAAM;AACJ,EAAA,MAAM,GAAA,GAAM,WAAW,OAAO,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,EAAI,SAAS,GAAG,IAAA,EAAK;AAC3D,EAAA,MAAM,OAAA,GACJ,OAAA,KAAY,MAAA,mBACV,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,GAAA,EAAK,KAAA,EAAO,EAAE,QAAA,EAAU,IAAA,EAAK,EAAG,cAAW,SAAA,EAC1D,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,GAAA,EAAA,EAAE,CAAA;AAAA,wBAAG,GAAA,EAAA,EAAE,CAAA;AAAA,wBAAG,GAAA,EAAA,EAAE;AAAA,GAAA,EACf,CAAA,mBAEA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAA;AAAA,MACX,KAAA,EAAO,EAAE,KAAA,EAAO,IAAA,EAAM,QAAQ,IAAA,EAAK;AAAA,MACnC,YAAA,EAAW;AAAA;AAAA,GACb;AAEJ,EAAA,IAAI,CAAC,OAAO,OAAO,OAAA;AACnB,EAAA,uBACE,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,cAAA,EACb,QAAA,EAAA;AAAA,IAAA,OAAA;AAAA,oBACD,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,eAAA,EAAiB,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACzC,CAAA;AAEJ;AAYO,IAAM,WAAoC,CAAC;AAAA,EAChD,KAAA,GAAQ,MAAA;AAAA,EACR,MAAA,GAAS,EAAA;AAAA,EACT,MAAA;AAAA,EACA,SAAA,GAAY,MAAA;AAAA,EACZ,SAAA,GAAY;AACd,CAAA,qBACE,GAAA;AAAA,EAAC,MAAA;AAAA,EAAA;AAAA,IACC,SAAA,EAAW,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,EAAI,MAAA,GAAS,WAAW,EAAE,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,IAC/E,OAAO,EAAE,KAAA,EAAO,QAAQ,YAAA,EAAc,MAAA,GAAS,QAAQ,MAAA;AAAU;AACnE","file":"chunk-4AA22BOG.js","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Empty.css\";\nimport * as React from \"react\";\n\nexport interface EmptyProps {\n title?: React.ReactNode;\n description?: React.ReactNode;\n icon?: React.ReactNode;\n action?: React.ReactNode;\n size?: \"sm\" | \"md\" | \"lg\";\n /** `subtle` drops the recessed icon well — good for inline / embedded use. */\n variant?: \"default\" | \"subtle\";\n className?: string;\n}\n\n/** `Empty` — empty state placeholder. */\nexport const Empty: React.FC<EmptyProps> = ({\n title = \"暂无内容\",\n description,\n icon,\n action,\n size = \"md\",\n variant = \"default\",\n className = \"\",\n}) => (\n <div className={`empty ${size} ${variant} ${className}`}>\n {icon && <div className=\"empty-ico\">{icon}</div>}\n <div className=\"empty-title\">{title}</div>\n {description && <div className=\"empty-desc\">{description}</div>}\n {action && <div className=\"empty-action\">{action}</div>}\n </div>\n);\n\nexport interface SpinnerProps {\n size?: number;\n tone?: \"accent\" | \"success\" | \"warning\" | \"danger\" | \"current\";\n /** Text rendered next to the spinner. */\n label?: React.ReactNode;\n /** `ring` is the default border spinner; `dots` is a three-dot bounce. */\n variant?: \"ring\" | \"dots\";\n className?: string;\n}\n\n/** `Spinner` — loading indicator. */\nexport const Spinner: React.FC<SpinnerProps> = ({\n size = 20,\n tone = \"accent\",\n label,\n variant = \"ring\",\n className = \"\",\n}) => {\n const cls = `spinner ${variant} ${tone} ${className}`.trim();\n const spinner =\n variant === \"dots\" ? (\n <span className={cls} style={{ fontSize: size }} aria-label=\"Loading\">\n <i /><i /><i />\n </span>\n ) : (\n <span\n className={cls}\n style={{ width: size, height: size }}\n aria-label=\"Loading\"\n />\n );\n if (!label) return spinner;\n return (\n <span className=\"spinner-wrap\">\n {spinner}\n <span className=\"spinner-label\">{label}</span>\n </span>\n );\n};\n\nexport interface SkeletonProps {\n width?: number | string;\n height?: number | string;\n circle?: boolean;\n /** `wave` is a shimmer sweep; `pulse` fades opacity; `none` disables animation. */\n animation?: \"wave\" | \"pulse\" | \"none\";\n className?: string;\n}\n\n/** `Skeleton` — content placeholder during loading. */\nexport const Skeleton: React.FC<SkeletonProps> = ({\n width = \"100%\",\n height = 16,\n circle,\n animation = \"wave\",\n className = \"\",\n}) => (\n <span\n className={`skeleton ${animation} ${circle ? \"circle\" : \"\"} ${className}`.trim()}\n style={{ width, height, borderRadius: circle ? \"50%\" : undefined }}\n />\n);\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Button/Button.tsx"],"names":[],"mappings":";;;;;;;AAoCO,IAAM,MAAA,GAAe,KAAA,CAAA,UAAA;AAAA,EAC1B,CACE;AAAA,IACE,QAAA;AAAA,IACA,OAAA,GAAU,SAAA;AAAA,IACV,IAAA,GAAO,IAAA;AAAA,IACP,IAAA;AAAA,IACA,YAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA,GAAY,EAAA;AAAA,IACZ,IAAA,GAAO,QAAA;AAAA,IACP,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,GAAA,GAAM;AAAA,MACV,KAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAS,IAAA,IAAQ,IAAA;AAAA,MACjB,OAAA,IAAW,SAAA;AAAA,MACX,QAAA,IAAY,UAAA;AAAA,MACZ;AAAA,KACF,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,IAAA,uBACE,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA;AAAA,QACA,SAAA,EAAW,GAAA;AAAA,QACX,UAAU,QAAA,IAAY,OAAA;AAAA,QACrB,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,OAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAU,eAAW,IAAA,EAAC,CAAA,GACpC,IAAA,mBACF,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,IAAI,CAAA,GAC1B,IAAA;AAAA,UACH,QAAA;AAAA,UACA,gCAAgB,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAM,YAAA,EAAc,MAAM,EAAA,EAAI;AAAA;AAAA;AAAA,KACvD;AAAA,EAEJ;AACF;AACA,MAAA,CAAO,WAAA,GAAc,QAAA;AAYd,IAAM,UAAA,GAAmB,KAAA,CAAA,UAAA;AAAA,EAC9B,CAAC,EAAE,IAAA,EAAM,GAAA,EAAK,YAAY,EAAA,EAAI,GAAG,IAAA,EAAK,EAAG,GAAA,qBACvC,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,QAAQ,SAAS,CAAA,CAAA;AAAA,MAC5B,YAAA,EAAY,GAAA,IAAO,IAAA,CAAK,YAAY,CAAA,IAAK,IAAA;AAAA,MACzC,KAAA,EAAO,GAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAM,IAAA,EAAM,MAAM,EAAA,EAAI;AAAA;AAAA;AAGlC;AACA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"chunk-5EYI27B6.js","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Button.css\";\nimport * as React from \"react\";\nimport type { IconName } from \"../Icon\";\nimport { Icon } from \"../Icon\";\n\nexport type ButtonVariant = \"default\" | \"primary\" | \"ghost\" | \"danger\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"type\"> {\n /** Visual variant. `primary` uses the accent color; `ghost` is borderless; `danger` is red. */\n variant?: ButtonVariant;\n /** Control height preset. */\n size?: ButtonSize;\n /** Leading icon. */\n icon?: IconName;\n /** Trailing icon. */\n trailingIcon?: IconName;\n /** Show spinner + disable interaction. */\n loading?: boolean;\n /** Button type attribute. Defaults to \"button\" to avoid accidental form submits. */\n type?: \"button\" | \"submit\" | \"reset\";\n /** Extra class names. */\n className?: string;\n children?: React.ReactNode;\n}\n\n/**\n * `Button` — the primary action surface.\n *\n * @example\n * <Button variant=\"primary\" icon=\"plus\">新建</Button>\n * <Button variant=\"ghost\" loading>保存</Button>\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n variant = \"default\",\n size = \"md\",\n icon,\n trailingIcon,\n loading,\n disabled,\n className = \"\",\n type = \"button\",\n ...rest\n },\n ref\n ) => {\n const cls = [\n \"btn\",\n variant,\n size !== \"md\" && size,\n loading && \"loading\",\n disabled && \"disabled\",\n className,\n ]\n .filter(Boolean)\n .join(\" \");\n\n return (\n <button\n ref={ref}\n type={type}\n className={cls}\n disabled={disabled || loading}\n {...rest}\n >\n {loading ? (\n <span className=\"spinner\" aria-hidden />\n ) : icon ? (\n <Icon name={icon} size={15} />\n ) : null}\n {children}\n {trailingIcon && <Icon name={trailingIcon} size={15} />}\n </button>\n );\n }\n);\nButton.displayName = \"Button\";\n\nexport interface IconButtonProps\n extends Omit<ButtonProps, \"icon\" | \"children\"> {\n icon: IconName;\n tip?: string;\n \"aria-label\"?: string;\n}\n\n/**\n * `IconButton` — square button containing just an icon. Pair with a tooltip.\n */\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ icon, tip, className = \"\", ...rest }, ref) => (\n <Button\n ref={ref}\n className={`icon ${className}`}\n aria-label={tip || rest[\"aria-label\"] || icon}\n title={tip}\n {...rest}\n >\n <Icon name={icon} size={16} />\n </Button>\n )\n);\nIconButton.displayName = \"IconButton\";\n"]}
|