@fangxinyan/lumina 0.6.1 → 0.6.2

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.
Files changed (246) hide show
  1. package/dist/Alert.cjs +3 -3
  2. package/dist/Alert.js +2 -2
  3. package/dist/AutoComplete.cjs +5 -4
  4. package/dist/AutoComplete.d.cts +1 -1
  5. package/dist/AutoComplete.d.ts +1 -1
  6. package/dist/AutoComplete.js +4 -3
  7. package/dist/Badge-DPGLV3D3.css +22 -0
  8. package/dist/Badge.cjs +10 -0
  9. package/dist/Badge.d.cts +18 -0
  10. package/dist/Badge.d.ts +18 -0
  11. package/dist/Badge.js +1 -0
  12. package/dist/Button.cjs +3 -7
  13. package/dist/Button.d.cts +5 -10
  14. package/dist/Button.d.ts +5 -10
  15. package/dist/Button.js +2 -2
  16. package/dist/Calendar.cjs +3 -3
  17. package/dist/Calendar.js +2 -2
  18. package/dist/{Card-RG7ECXL2.css → Card-6RMVIHWX.css} +7 -13
  19. package/dist/Card.cjs +2 -6
  20. package/dist/Card.d.cts +7 -11
  21. package/dist/Card.d.ts +7 -11
  22. package/dist/Card.js +1 -1
  23. package/dist/{Cascader-VSYEKQCG.css → Cascader-C2DFSMKJ.css} +64 -0
  24. package/dist/Cascader.cjs +5 -3
  25. package/dist/Cascader.d.cts +18 -2
  26. package/dist/Cascader.d.ts +18 -2
  27. package/dist/Cascader.js +4 -2
  28. package/dist/{Checkbox-SKJATVSN.css → Checkbox-U5EUDSYS.css} +5 -35
  29. package/dist/Checkbox.cjs +3 -7
  30. package/dist/Checkbox.d.cts +1 -18
  31. package/dist/Checkbox.d.ts +1 -18
  32. package/dist/Checkbox.js +2 -2
  33. package/dist/Collapse-66U5YJFY.css +53 -0
  34. package/dist/Collapse.cjs +11 -0
  35. package/dist/Collapse.d.cts +32 -0
  36. package/dist/Collapse.d.ts +32 -0
  37. package/dist/Collapse.js +2 -0
  38. package/dist/CommandPalette.cjs +5 -4
  39. package/dist/CommandPalette.js +4 -3
  40. package/dist/Drawer.cjs +3 -3
  41. package/dist/Drawer.js +2 -2
  42. package/dist/Empty-DC2LPORC.css +28 -0
  43. package/dist/Empty.cjs +2 -10
  44. package/dist/Empty.d.cts +1 -62
  45. package/dist/Empty.d.ts +1 -62
  46. package/dist/Empty.js +1 -1
  47. package/dist/Form.d.cts +1 -1
  48. package/dist/Form.d.ts +1 -1
  49. package/dist/Icon.cjs +179 -3
  50. package/dist/Icon.d.cts +96 -3
  51. package/dist/Icon.d.ts +96 -3
  52. package/dist/Icon.js +1 -1
  53. package/dist/Image.cjs +4 -4
  54. package/dist/Image.js +2 -2
  55. package/dist/{Input-33CAH4O6.css → Input-3G4ONWNU.css} +15 -42
  56. package/dist/Input.cjs +6 -5
  57. package/dist/Input.d.cts +19 -23
  58. package/dist/Input.d.ts +19 -23
  59. package/dist/Input.js +3 -2
  60. package/dist/InputNumber.cjs +5 -4
  61. package/dist/InputNumber.d.cts +1 -1
  62. package/dist/InputNumber.d.ts +1 -1
  63. package/dist/InputNumber.js +4 -3
  64. package/dist/Message-2MZ3LFPU.css +45 -0
  65. package/dist/Message.cjs +23 -0
  66. package/dist/Message.d.cts +54 -0
  67. package/dist/Message.d.ts +54 -0
  68. package/dist/Message.js +2 -0
  69. package/dist/{Modal-XSDMU4XJ.css → Modal-2QNDW4SO.css} +27 -0
  70. package/dist/Modal.cjs +4 -4
  71. package/dist/Modal.d.cts +28 -4
  72. package/dist/Modal.d.ts +28 -4
  73. package/dist/Modal.js +3 -3
  74. package/dist/Pagination.cjs +7 -5
  75. package/dist/Pagination.js +6 -4
  76. package/dist/Popover.cjs +2 -2
  77. package/dist/Popover.d.cts +11 -3
  78. package/dist/Popover.d.ts +11 -3
  79. package/dist/Popover.js +1 -1
  80. package/dist/Radio-GVFDPAZM.css +97 -0
  81. package/dist/Radio.cjs +14 -0
  82. package/dist/Radio.d.cts +36 -0
  83. package/dist/Radio.d.ts +36 -0
  84. package/dist/Radio.js +1 -0
  85. package/dist/{Select-J3CCVFJ7.css → Select-JVBQAZBG.css} +7 -23
  86. package/dist/Select.cjs +6 -4
  87. package/dist/Select.d.cts +25 -4
  88. package/dist/Select.d.ts +25 -4
  89. package/dist/Select.js +5 -3
  90. package/dist/Skeleton-CVWH2VWN.css +40 -0
  91. package/dist/Skeleton.cjs +10 -0
  92. package/dist/Skeleton.d.cts +30 -0
  93. package/dist/Skeleton.d.ts +30 -0
  94. package/dist/Skeleton.js +1 -0
  95. package/dist/Spin-3GJNMSIH.css +94 -0
  96. package/dist/Spin.cjs +10 -0
  97. package/dist/Spin.d.cts +20 -0
  98. package/dist/Spin.d.ts +20 -0
  99. package/dist/Spin.js +1 -0
  100. package/dist/{Table-2LPTOUIR.css → Table-ATJJQLKU.css} +0 -53
  101. package/dist/Table.cjs +9 -11
  102. package/dist/Table.d.cts +2 -21
  103. package/dist/Table.d.ts +2 -21
  104. package/dist/Table.js +8 -6
  105. package/dist/TablePro-3XVHYLSL.css +45 -0
  106. package/dist/TablePro.cjs +19 -0
  107. package/dist/TablePro.d.cts +21 -0
  108. package/dist/TablePro.d.ts +21 -0
  109. package/dist/TablePro.js +10 -0
  110. package/dist/{Tabs-RHK6XAFF.css → Tabs-BLSNI2T5.css} +0 -34
  111. package/dist/Tabs.cjs +2 -6
  112. package/dist/Tabs.d.cts +1 -16
  113. package/dist/Tabs.d.ts +1 -16
  114. package/dist/Tabs.js +1 -1
  115. package/dist/Tag-LB3OOJAO.css +29 -0
  116. package/dist/Tag.cjs +3 -7
  117. package/dist/Tag.d.cts +1 -11
  118. package/dist/Tag.d.ts +1 -11
  119. package/dist/Tag.js +2 -2
  120. package/dist/Textarea-YNET7IBH.css +54 -0
  121. package/dist/Textarea.cjs +15 -0
  122. package/dist/Textarea.d.cts +25 -0
  123. package/dist/Textarea.d.ts +25 -0
  124. package/dist/Textarea.js +2 -0
  125. package/dist/{Timeline-RHZAZKZ7.css → Timeline-3ZHOHPXT.css} +2 -2
  126. package/dist/Timeline.cjs +3 -3
  127. package/dist/Timeline.d.cts +1 -1
  128. package/dist/Timeline.d.ts +1 -1
  129. package/dist/Timeline.js +2 -2
  130. package/dist/Tooltip.cjs +2 -2
  131. package/dist/Tooltip.d.cts +17 -4
  132. package/dist/Tooltip.d.ts +17 -4
  133. package/dist/Tooltip.js +1 -1
  134. package/dist/Typography.cjs +7 -7
  135. package/dist/Typography.js +2 -2
  136. package/dist/{chunk-6Y5WRCPW.js → chunk-33NCTOEB.js} +1 -1
  137. package/dist/{chunk-Q2KG6SQK.cjs → chunk-35ZGBAA3.cjs} +3 -3
  138. package/dist/{chunk-Y3ZSG3SJ.cjs → chunk-3AS5B7MQ.cjs} +11 -30
  139. package/dist/{chunk-X2U7EKCS.cjs → chunk-3YJU3D5S.cjs} +28 -5
  140. package/dist/chunk-45VJGBGN.js +25 -0
  141. package/dist/{chunk-3D77MQHO.js → chunk-46VXFTEC.js} +3 -3
  142. package/dist/{chunk-OFGDUCT7.cjs → chunk-4WTU5P3O.cjs} +3 -3
  143. package/dist/{chunk-5A3RT4KD.js → chunk-5TKC6IEN.js} +4 -55
  144. package/dist/{chunk-62GU4OHH.cjs → chunk-5WAXZJG5.cjs} +12 -19
  145. package/dist/chunk-6ACKL3WH.cjs +138 -0
  146. package/dist/{chunk-32HBMXXV.cjs → chunk-6LZ54NPO.cjs} +70 -74
  147. package/dist/{chunk-UXH5PH3S.js → chunk-7NGMQIST.js} +2 -2
  148. package/dist/{chunk-R6BIF3FF.js → chunk-AWXCSX6J.js} +5 -23
  149. package/dist/chunk-AXZ7ELMA.js +41 -0
  150. package/dist/{chunk-G2XK57I7.cjs → chunk-B2KEZQ6S.cjs} +5 -5
  151. package/dist/chunk-CEJ7VBR6.js +283 -0
  152. package/dist/{chunk-WRDKOSSM.js → chunk-CHMCL7AV.js} +1 -1
  153. package/dist/{chunk-EBNRZRWY.cjs → chunk-CUXV6QNN.cjs} +5 -5
  154. package/dist/{chunk-ULOJ5UEY.js → chunk-CXWEOAVU.js} +1 -1
  155. package/dist/{chunk-TWGQZX2R.js → chunk-DQTSTJ6O.js} +3 -18
  156. package/dist/chunk-EIY7KEJ3.cjs +132 -0
  157. package/dist/{chunk-OI3CWXT3.js → chunk-EJBHR2P5.js} +3 -3
  158. package/dist/chunk-ELNT3CFO.js +64 -0
  159. package/dist/{chunk-TGHBKKSS.js → chunk-EQEJTN3V.js} +3 -43
  160. package/dist/chunk-F6RYCBQG.js +25 -0
  161. package/dist/{chunk-N57NXCNC.cjs → chunk-FBVVRTX2.cjs} +3 -44
  162. package/dist/chunk-FFZ6OMZI.js +110 -0
  163. package/dist/{chunk-73RQBWWW.js → chunk-FJNWUELL.js} +2 -2
  164. package/dist/chunk-GENABQYA.cjs +47 -0
  165. package/dist/chunk-GMN74OEY.cjs +63 -0
  166. package/dist/chunk-GNEZQMKH.js +218 -0
  167. package/dist/{chunk-Y47YTYQ3.cjs → chunk-HPFQXYKG.cjs} +159 -8
  168. package/dist/{chunk-4WRE4HQP.js → chunk-HWFM4MAT.js} +18 -6
  169. package/dist/{chunk-GY3BSHHS.cjs → chunk-HZSIUOCN.cjs} +2 -55
  170. package/dist/{chunk-YRZGXXWA.js → chunk-JD7A6VM3.js} +11 -17
  171. package/dist/chunk-K2KYM7LW.cjs +28 -0
  172. package/dist/{chunk-PWW64ZWO.cjs → chunk-KD4YYIIO.cjs} +1 -32
  173. package/dist/chunk-KGSADAOD.cjs +170 -0
  174. package/dist/{chunk-6ODY6MGL.cjs → chunk-MQV2XN4B.cjs} +5 -5
  175. package/dist/{chunk-OVZTG5CP.cjs → chunk-MT7UWY6T.cjs} +2 -2
  176. package/dist/chunk-MUXP7ASL.js +26 -0
  177. package/dist/{chunk-EEMWQX3C.cjs → chunk-NTS5L4NQ.cjs} +3 -3
  178. package/dist/{chunk-WBK6XIDJ.js → chunk-OBEKX4VR.js} +2 -32
  179. package/dist/chunk-OF3SGLZY.js +385 -0
  180. package/dist/chunk-ON4DEDMI.js +113 -0
  181. package/dist/chunk-OQBDU5I2.cjs +104 -0
  182. package/dist/{chunk-FIO65XYG.cjs → chunk-OYMJVU66.cjs} +48 -37
  183. package/dist/{chunk-5M26OVVY.js → chunk-PH3YECMF.js} +1 -1
  184. package/dist/chunk-Q5SZIU7Z.cjs +47 -0
  185. package/dist/chunk-QGHYQCF3.cjs +240 -0
  186. package/dist/chunk-QKQHZIF3.cjs +86 -0
  187. package/dist/{chunk-KYEY2LIB.cjs → chunk-SKMP2A5O.cjs} +3 -3
  188. package/dist/{chunk-IW5LW6XS.js → chunk-TEEFR2FD.js} +28 -5
  189. package/dist/{chunk-GOBWKQCX.cjs → chunk-TEG7NJHS.cjs} +3 -3
  190. package/dist/{chunk-2MNAZRWE.cjs → chunk-TJII7BQ2.cjs} +261 -2
  191. package/dist/{chunk-3TWNBJFI.cjs → chunk-TZJH5HBT.cjs} +6 -6
  192. package/dist/{chunk-D46EM4EN.js → chunk-UMDGS4BP.js} +1 -1
  193. package/dist/chunk-USQ43DJ5.js +147 -0
  194. package/dist/{chunk-G2K6ETP4.cjs → chunk-UUHFKIWP.cjs} +18 -6
  195. package/dist/chunk-WGZ2KJTZ.js +81 -0
  196. package/dist/{chunk-RPFMQZA5.js → chunk-WKKSAGYH.js} +39 -28
  197. package/dist/{chunk-54YLXXS2.js → chunk-XD3JGL5O.js} +2 -2
  198. package/dist/{chunk-DPNDHNKK.js → chunk-XTIN5545.js} +68 -72
  199. package/dist/{chunk-LZU33BX6.cjs → chunk-ZIP7F4UF.cjs} +4 -20
  200. package/dist/index.cjs +312 -122
  201. package/dist/index.d.cts +23 -17
  202. package/dist/index.d.ts +23 -17
  203. package/dist/index.js +34 -28
  204. package/dist/styles.css +313 -192
  205. package/docs/llms/badge.md +3 -3
  206. package/docs/llms/button.md +7 -38
  207. package/docs/llms/card.md +6 -12
  208. package/docs/llms/cascader.md +19 -0
  209. package/docs/llms/{accordion.md → collapse.md} +13 -11
  210. package/docs/llms/drawer.md +1 -1
  211. package/docs/llms/form.md +1 -1
  212. package/docs/llms/input.md +25 -16
  213. package/docs/llms/message.md +63 -0
  214. package/docs/llms/modal.md +30 -0
  215. package/docs/llms/popover.md +18 -1
  216. package/docs/llms/radio.md +37 -1
  217. package/docs/llms/select.md +20 -0
  218. package/docs/llms/spin.md +59 -0
  219. package/docs/llms/table.md +3 -3
  220. package/docs/llms/tooltip.md +16 -3
  221. package/docs/llms.md +5 -5
  222. package/package.json +17 -52
  223. package/dist/Accordion-REMDCQUD.css +0 -44
  224. package/dist/Accordion.cjs +0 -11
  225. package/dist/Accordion.d.cts +0 -33
  226. package/dist/Accordion.d.ts +0 -33
  227. package/dist/Accordion.js +0 -2
  228. package/dist/Empty-NQ72W3D7.css +0 -160
  229. package/dist/Tag-FGDY3W7E.css +0 -51
  230. package/dist/Toast-YSACW3EM.css +0 -45
  231. package/dist/Toast.cjs +0 -15
  232. package/dist/Toast.d.cts +0 -26
  233. package/dist/Toast.d.ts +0 -26
  234. package/dist/Toast.js +0 -2
  235. package/dist/chunk-3XTHKAEY.js +0 -39
  236. package/dist/chunk-DOMYUGJY.js +0 -132
  237. package/dist/chunk-HBWO3QKW.js +0 -74
  238. package/dist/chunk-JVS5ZALZ.js +0 -123
  239. package/dist/chunk-LIGHV4RC.cjs +0 -121
  240. package/dist/chunk-MCTIA6RZ.js +0 -99
  241. package/dist/chunk-NC4YUEXM.cjs +0 -145
  242. package/dist/chunk-NJ6B22YJ.js +0 -170
  243. package/dist/chunk-W64ARHLJ.cjs +0 -62
  244. package/dist/chunk-ZFW6OYAO.cjs +0 -100
  245. package/docs/llms/spinner.md +0 -58
  246. package/docs/llms/toast.md +0 -51
@@ -13,8 +13,8 @@ import { Badge } from "@fangxinyan/lumina";
13
13
  ### 数字徽标
14
14
 
15
15
  ```tsx
16
- <Badge count={3}><IconButton icon="bell" /></Badge>
17
- <Badge count={128} max={99}><IconButton icon="mail" /></Badge>
16
+ <Badge count={3}><Button icon="bell" /></Badge>
17
+ <Badge count={128} max={99}><Button icon="mail" /></Badge>
18
18
  ```
19
19
 
20
20
  ### 圆点
@@ -22,7 +22,7 @@ import { Badge } from "@fangxinyan/lumina";
22
22
  dot 模式不显示数字,只是状态指示。
23
23
 
24
24
  ```tsx
25
- <Badge dot><IconButton icon="user" /></Badge>
25
+ <Badge dot><Button icon="user" /></Badge>
26
26
  ```
27
27
 
28
28
  ## API
@@ -5,7 +5,7 @@
5
5
  ## 导入
6
6
 
7
7
  ```tsx
8
- import { Button, IconButton, Segmented } from "@fangxinyan/lumina";
8
+ import { Button } from "@fangxinyan/lumina";
9
9
  ```
10
10
 
11
11
  ## 示例
@@ -61,27 +61,12 @@ block 让按钮撑满容器宽度,常用于底部主操作或表单提交。
61
61
 
62
62
  ### 纯图标按钮
63
63
 
64
- IconButton 是只含图标的方形按钮,常配合 tip 使用。
64
+ Button 在只有 icon 时自动呈现为方形按钮,常配合 tip 使用。
65
65
 
66
66
  ```tsx
67
- <IconButton icon="heart" tip="收藏" />
68
- <IconButton icon="bell" tip="通知" />
69
- <IconButton icon="settings" tip="设置" />
70
- ```
71
-
72
- ### 分段控制器
73
-
74
- 互斥多选项切换。
75
-
76
- ```tsx
77
- <Segmented
78
- options={[
79
- { value: "grid", label: "网格" },
80
- { value: "list", label: "列表" },
81
- { value: "card", label: "卡片" },
82
- ]}
83
- defaultValue="grid"
84
- />
67
+ <Button icon="heart" tip="收藏" />
68
+ <Button icon="bell" tip="通知" />
69
+ <Button icon="settings" tip="设置" />
85
70
  ```
86
71
 
87
72
  ## API
@@ -94,29 +79,13 @@ IconButton 是只含图标的方形按钮,常配合 tip 使用。
94
79
  | size | `"sm" | "md" | "lg"` | `"md"` | 按钮尺寸 |
95
80
  | icon | `IconName` | — | 前置图标 |
96
81
  | trailingIcon | `IconName` | — | 后置图标 |
82
+ | iconOnly | `boolean` | `自动` | 渲染为纯图标方形按钮 |
83
+ | tip | `string` | — | 原生悬浮提示,常用于纯图标按钮 |
97
84
  | loading | `boolean` | `false` | 加载态 |
98
85
  | block | `boolean` | `false` | 撑满父容器宽度 |
99
86
  | disabled | `boolean` | `false` | 禁用 |
100
87
  | onClick | `(e: MouseEvent) => void` | — | 点击回调 |
101
88
 
102
89
 
103
- **IconButton**
104
-
105
- | Prop | 类型 | 默认 | 说明 |
106
- | --- | --- | --- | --- |
107
- | icon \* | `IconName` | — | 图标名 |
108
- | tip | `string` | — | 悬浮提示 |
109
- | size / variant | `—` | — | 继承自 Button |
110
-
111
-
112
- **Segmented**
113
-
114
- | Prop | 类型 | 默认 | 说明 |
115
- | --- | --- | --- | --- |
116
- | options \* | `{ value, label, disabled? }[]` | — | 选项数组 |
117
- | value / defaultValue | `T` | — | 受控/初始选中值 |
118
- | onChange | `(value: T) => void` | — | 切换回调 |
119
-
120
-
121
90
  ---
122
91
  [← 回到索引](../llms.md)
package/docs/llms/card.md CHANGED
@@ -5,7 +5,7 @@
5
5
  ## 导入
6
6
 
7
7
  ```tsx
8
- import { Card, Panel } from "@fangxinyan/lumina";
8
+ import { Card } from "@fangxinyan/lumina";
9
9
  ```
10
10
 
11
11
  ## 示例
@@ -28,20 +28,20 @@ hoverable 在鼠标悬浮时轻微上移并加强阴影,适合可点击的卡片
28
28
  <Card hoverable>可点击卡片</Card>
29
29
  ```
30
30
 
31
- ### Panel
31
+ ### 带标题
32
32
 
33
33
  带标题、描述、操作区。
34
34
 
35
35
  ```tsx
36
- <Panel title="月度营收" description="2026 年 4 月" actions={...}>
36
+ <Card title="月度营收" description="2026 年 4 月" actions={...}>
37
37
  ¥ 12,480
38
- </Panel>
38
+ </Card>
39
39
  ```
40
40
 
41
- ### Panel 带操作
41
+ ### 标题区操作
42
42
 
43
43
  ```tsx
44
- <Panel title="..." actions={<Button size="sm" icon="plus">邀请</Button>}>...</Panel>
44
+ <Card title="..." actions={<Button size="sm" icon="plus">邀请</Button>}>...</Card>
45
45
  ```
46
46
 
47
47
  ## API
@@ -53,12 +53,6 @@ hoverable 在鼠标悬浮时轻微上移并加强阴影,适合可点击的卡片
53
53
  | variant | `"raised" | "flat" | "sunken"` | `"raised"` | 视觉变体 |
54
54
  | padding | `"none" | "sm" | "md" | "lg"` | `"md"` | 内边距 |
55
55
  | hoverable | `boolean` | `false` | 悬浮时抬起 |
56
-
57
-
58
- **Panel**
59
-
60
- | Prop | 类型 | 默认 | 说明 |
61
- | --- | --- | --- | --- |
62
56
  | title | `ReactNode` | — | 标题 |
63
57
  | description | `ReactNode` | — | 副标题 |
64
58
  | actions | `ReactNode` | — | 右上操作区 |
@@ -16,6 +16,21 @@ import { Cascader } from "@fangxinyan/lumina";
16
16
  <Cascader options={regions} value={addr} onChange={setAddr} />
17
17
  ```
18
18
 
19
+ ### 搜索与清除
20
+
21
+ showSearch 开启路径搜索,allowClear 提供一键清空,popupClassName 可标记浮层。
22
+
23
+ ```tsx
24
+ <Cascader
25
+ showSearch={{ limit: 8 }}
26
+ allowClear
27
+ popupClassName="my-cascader-popup"
28
+ options={regions}
29
+ value={addr}
30
+ onChange={setAddr}
31
+ />
32
+ ```
33
+
19
34
  ## API
20
35
 
21
36
  **Cascader**
@@ -27,6 +42,10 @@ import { Cascader } from "@fangxinyan/lumina";
27
42
  | onChange | `(path: string[]) => void` | — | 选择叶子时触发 |
28
43
  | placeholder | `string` | — | 占位文案 |
29
44
  | disabled | `boolean` | `false` | 禁用 |
45
+ | allowClear | `boolean` | `false` | 显示清除按钮 |
46
+ | showSearch | `boolean | { filter?, render?, limit? }` | — | 搜索路径,支持 boolean / 对象配置 |
47
+ | popupClassName / dropdownClassName | `string` | — | 浮层面板 className |
48
+ | changeOnSelect | `boolean` | `false` | 允许选中非叶子节点 |
30
49
 
31
50
 
32
51
  ---
@@ -1,11 +1,11 @@
1
- # Accordion 折叠面板
1
+ # Collapse 折叠面板
2
2
 
3
3
  > 纵向折叠面板。
4
4
 
5
5
  ## 导入
6
6
 
7
7
  ```tsx
8
- import { Accordion } from "@fangxinyan/lumina";
8
+ import { Collapse } from "@fangxinyan/lumina";
9
9
  ```
10
10
 
11
11
  ## 示例
@@ -13,7 +13,7 @@ import { Accordion } from "@fangxinyan/lumina";
13
13
  ### 基础
14
14
 
15
15
  ```tsx
16
- <Accordion items={[{ key, title, content }]} />
16
+ <Collapse items={[{ key, label, children }]} />
17
17
  ```
18
18
 
19
19
  ### 多项展开
@@ -21,7 +21,7 @@ import { Accordion } from "@fangxinyan/lumina";
21
21
  multiple 允许同时展开多个面板。
22
22
 
23
23
  ```tsx
24
- <Accordion multiple defaultActiveKeys={["1", "2"]} ... />
24
+ <Collapse defaultActiveKey={["1", "2"]} ... />
25
25
  ```
26
26
 
27
27
  ### 手风琴模式
@@ -29,7 +29,7 @@ multiple 允许同时展开多个面板。
29
29
  accordion={true} 同一时刻最多只展开一项;与 multiple 同时传入时 accordion 优先。
30
30
 
31
31
  ```tsx
32
- <Accordion accordion defaultActiveKeys={["1"]} ... />
32
+ <Collapse accordion defaultActiveKey="1" ... />
33
33
  ```
34
34
 
35
35
  ### 仅图标可点
@@ -37,7 +37,7 @@ accordion={true} 同一时刻最多只展开一项;与 multiple 同时传入时
37
37
  collapsible="icon" 将展开触发限制在右侧箭头图标上,标题区域不再响应。
38
38
 
39
39
  ```tsx
40
- <Accordion collapsible="icon" ... />
40
+ <Collapse collapsible="icon" ... />
41
41
  ```
42
42
 
43
43
  ### 禁用展开
@@ -45,20 +45,22 @@ collapsible="icon" 将展开触发限制在右侧箭头图标上,标题区域不
45
45
  collapsible="disabled" 会禁用所有项的展开交互。
46
46
 
47
47
  ```tsx
48
- <Accordion collapsible="disabled" defaultActiveKeys={["1"]} ... />
48
+ <Collapse collapsible="disabled" defaultActiveKey="1" ... />
49
49
  ```
50
50
 
51
51
  ## API
52
52
 
53
- **Accordion**
53
+ **Collapse**
54
54
 
55
55
  | Prop | 类型 | 默认 | 说明 |
56
56
  | --- | --- | --- | --- |
57
- | items \* | `AccordionItem[]` | — | 面板数据 |
58
- | multiple | `boolean` | `false` | 可同时展开多个 |
57
+ | items \* | `CollapseItem[]` | — | 面板数据 |
59
58
  | accordion | `boolean` | `false` | 手风琴模式(同一时刻最多一项) |
59
+ | multiple | `boolean` | `true` | 可同时展开多个 |
60
60
  | collapsible | `"header" | "icon" | "disabled"` | `"header"` | 展开触发区域 |
61
- | activeKeys / defaultActiveKeys | `string[]` | — | 受控/初始展开 |
61
+ | activeKey / defaultActiveKey | `string | string[]` | — | 受控/初始展开 |
62
+ | ghost | `boolean` | `false` | 无外框/阴影的轻量样式 |
63
+ | size | `"small" | "middle" | "large"` | `"middle"` | 尺寸 |
62
64
  | onChange | `(keys: string[]) => void` | — | 展开变更 |
63
65
 
64
66
 
@@ -23,7 +23,7 @@ extra 渲染到标题右边,常用来放刷新 / 更多 / 保存按钮。
23
23
  ```tsx
24
24
  <Drawer
25
25
  title="订单详情"
26
- extra={<><IconButton icon="edit" tip="编辑" /><Button variant="primary">保存</Button></>}
26
+ extra={<><Button icon="edit" tip="编辑" /><Button variant="primary">保存</Button></>}
27
27
  />
28
28
  ```
29
29
 
package/docs/llms/form.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Form 表单
2
2
 
3
- > 受控表单,字段绑定 + 校验,API 对齐 antd。
3
+ > 受控表单,字段绑定 + 校验。
4
4
 
5
5
  ## 示例
6
6
 
@@ -14,7 +14,12 @@ import { Input, Textarea } from "@fangxinyan/lumina";
14
14
 
15
15
  ```tsx
16
16
  const [v, setV] = useState("");
17
- <Input placeholder="输入用户名" value={v} onChange={setV} leadingIcon="user" />
17
+ <Input
18
+ placeholder="输入用户名"
19
+ value={v}
20
+ onChange={(e) => setV(e.target.value)}
21
+ leadingIcon="user"
22
+ />
18
23
  ```
19
24
 
20
25
  ### 前后置图标
@@ -25,15 +30,15 @@ leadingIcon / trailingIcon。
25
30
  <Input placeholder="搜索..." leadingIcon="search" />
26
31
  ```
27
32
 
28
- ### 密码切换
33
+ ### Input.Password
29
34
 
30
- trailingIcon 可点击切换密码可见性。
35
+ 密码输入框,内置显隐切换。
31
36
 
32
37
  ```tsx
33
- <Input
34
- type={showPw ? "text" : "password"}
35
- trailingIcon={showPw ? "eyeOff" : "eye"}
36
- onTrailingIconClick={() => setShowPw(s => !s)}
38
+ <Input.Password
39
+ value={pw}
40
+ onChange={(e) => setPw(e.target.value)}
41
+ allowClear
37
42
  />
38
43
  ```
39
44
 
@@ -50,7 +55,7 @@ invalid 触发红色凹槽。
50
55
  allowClear 在值非空时显示 × 按钮,点击即清空。
51
56
 
52
57
  ```tsx
53
- <Input value={v} onChange={setV} allowClear placeholder="输入后右侧会出现 ×" />
58
+ <Input value={v} onValueChange={setV} allowClear placeholder="输入后右侧会出现 ×" />
54
59
  ```
55
60
 
56
61
  ### 前缀 / 后缀
@@ -69,22 +74,22 @@ showCount 显示当前字数,配合 maxLength 显示 N / max。
69
74
  ```tsx
70
75
  <Input
71
76
  value={v}
72
- onChange={setV}
77
+ onValueChange={setV}
73
78
  maxLength={20}
74
79
  showCount
75
80
  placeholder="最多输入 20 个字"
76
81
  />
77
82
  ```
78
83
 
79
- ### 多行文本
84
+ ### Input.TextArea 多行文本
80
85
 
81
- Textarea 与 Input 共享同款凹槽,也支持 allowClear / maxLength / showCount。
86
+ Input.TextArea 与 Textarea 使用同一套多行输入能力,也支持 allowClear / maxLength / showCount。
82
87
 
83
88
  ```tsx
84
- <Textarea
89
+ <Input.TextArea
85
90
  placeholder="..."
86
91
  value={msg}
87
- onChange={setMsg}
92
+ onChange={(e) => setMsg(e.target.value)}
88
93
  allowClear
89
94
  maxLength={300}
90
95
  showCount
@@ -98,7 +103,8 @@ Textarea 与 Input 共享同款凹槽,也支持 allowClear / maxLength / showCou
98
103
  | Prop | 类型 | 默认 | 说明 |
99
104
  | --- | --- | --- | --- |
100
105
  | value / defaultValue | `string` | — | 受控值 / 初值 |
101
- | onChange | `(value: string, e) => void` | — | 变更回调 |
106
+ | onChange | `(event) => void` | — | 变更回调,传入 React 原生事件 |
107
+ | onValueChange | `(value: string, event) => void` | — | 值回调便捷写法 |
102
108
  | placeholder | `string` | — | 占位文案 |
103
109
  | leadingIcon / trailingIcon | `IconName` | — | 前/后置图标 |
104
110
  | prefix | `ReactNode` | — | 左侧内嵌内容(在 leadingIcon 之后) |
@@ -106,17 +112,20 @@ Textarea 与 Input 共享同款凹槽,也支持 allowClear / maxLength / showCou
106
112
  | allowClear | `boolean` | `false` | 显示内置的清除按钮 |
107
113
  | maxLength | `number` | — | 最大字符数,透传至原生 input |
108
114
  | showCount | `boolean` | `false` | 在输入框下方显示字数统计 |
115
+ | Input.Password | `Component` | — | 密码输入框,内置显隐切换 |
116
+ | Input.TextArea | `typeof Textarea` | — | 多行文本别名 |
109
117
  | size | `"sm" | "md" | "lg"` | `"md"` | 尺寸 |
110
118
  | invalid | `boolean` | `false` | 错误态 |
111
119
  | disabled | `boolean` | `false` | 禁用 |
112
120
 
113
121
 
114
- **Textarea**
122
+ **Input.TextArea / Textarea**
115
123
 
116
124
  | Prop | 类型 | 默认 | 说明 |
117
125
  | --- | --- | --- | --- |
118
126
  | value / defaultValue | `string` | — | 受控值 / 初值 |
119
- | onChange | `(value: string, e) => void` | — | 变更回调 |
127
+ | onChange | `(event) => void` | — | 变更回调,传入 React 原生事件 |
128
+ | onValueChange | `(value: string, event) => void` | — | 值回调便捷写法 |
120
129
  | allowClear | `boolean` | `false` | 右上角显示清除按钮 |
121
130
  | maxLength | `number` | — | 最大字符数 |
122
131
  | showCount | `boolean` | `false` | 显示字数统计 |
@@ -0,0 +1,63 @@
1
+ # Message 全局消息
2
+
3
+ > 全局轻量提示,支持函数调用与对象配置。
4
+
5
+ ## 导入
6
+
7
+ ```tsx
8
+ import { message, MessageContainer } from "@fangxinyan/lumina";
9
+ ```
10
+
11
+ ## 示例
12
+
13
+ ### 四种语义
14
+
15
+ ```tsx
16
+ message.info("已保存到草稿");
17
+ message.success("操作完成");
18
+ message.warning("请注意");
19
+ message.error("发生错误");
20
+ ```
21
+
22
+ ### 带标题
23
+
24
+ ```tsx
25
+ message.success("已上传 5 个文件", "上传完成");
26
+ ```
27
+
28
+ ### 对象调用
29
+
30
+ 支持 content / duration / key / destroy,适合需要更新或手动关闭的提示。
31
+
32
+ ```tsx
33
+ message.open({ key: "sync", type: "info", content: "同步中...", duration: 0 });
34
+ setTimeout(() => {
35
+ message.success({ key: "sync", content: "同步完成", duration: 1800 });
36
+ }, 900);
37
+ message.destroy("sync");
38
+ ```
39
+
40
+ ## API
41
+
42
+ **message.***
43
+
44
+ | Prop | 类型 | 默认 | 说明 |
45
+ | --- | --- | --- | --- |
46
+ | info(message, title?) | `(msg, title?) => id` | — | 信息提示 |
47
+ | success(message, title?) | `(msg, title?) => id` | — | 成功 |
48
+ | warning(message, title?) / warn(message, title?) | `(msg, title?) => id` | — | 警告 |
49
+ | error(message, title?) | `(msg, title?) => id` | — | 错误 |
50
+ | open({ type, content, title?, duration?, key? }) | `(config) => id` | — | 对象配置 API |
51
+ | dismiss(id) | `(id: number) => void` | — | 关闭一条 |
52
+ | destroy(key?) / clear() | `(key?) => void` | — | 关闭指定 key 或清空全部 |
53
+
54
+
55
+ **MessageContainer**
56
+
57
+ | Prop | 类型 | 默认 | 说明 |
58
+ | --- | --- | --- | --- |
59
+ | placement | `"top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center"` | `"top-right"` | 位置 |
60
+
61
+
62
+ ---
63
+ [← 回到索引](../llms.md)
@@ -16,6 +16,24 @@ import { Modal } from "@fangxinyan/lumina";
16
16
  <Modal open={m} onClose={...} title="标题">...</Modal>
17
17
  ```
18
18
 
19
+ ### 静态确认框
20
+
21
+ 通过 Modal.confirm / warning / error / success / info 直接创建一次性对话框。
22
+
23
+ ```tsx
24
+ Modal.confirm({
25
+ title: "覆盖当前配置?",
26
+ content: "保存后会立即生效。",
27
+ okText: "覆盖",
28
+ onOk: async () => {
29
+ await save();
30
+ message.success("已覆盖");
31
+ },
32
+ });
33
+
34
+ Modal.warning({ title: "容量不足", content: "请先清理缓存。" });
35
+ ```
36
+
19
37
  ### 确认操作 (footer 自定义)
20
38
 
21
39
  用 footer 自定义底部按钮。传 null 可以去掉 footer。
@@ -85,5 +103,17 @@ closable={false} 隐藏右上角 ×,closeIcon 可自定义。
85
103
  | zIndex | `number` | — | 覆盖遮罩 z-index |
86
104
 
87
105
 
106
+ **Modal 静态 API**
107
+
108
+ | Prop | 类型 | 默认 | 说明 |
109
+ | --- | --- | --- | --- |
110
+ | Modal.confirm(config) | `(config) => { destroy, update }` | — | 确认框,默认显示取消/确定 |
111
+ | Modal.info / success / warning / error(config) | `(config) => { destroy, update }` | — | 单按钮提示框 |
112
+ | Modal.destroyAll() | `() => void` | — | 关闭全部静态弹窗 |
113
+ | config.content | `ReactNode` | — | 正文内容 |
114
+ | config.okCancel | `boolean` | — | 是否显示取消按钮 |
115
+ | config.onOk | `() => void | Promise<void>` | — | 确定回调,返回 Promise 时自动显示 loading |
116
+
117
+
88
118
  ---
89
119
  [← 回到索引](../llms.md)
@@ -71,6 +71,21 @@ import { Popover } from "@fangxinyan/lumina";
71
71
  </div>
72
72
  ```
73
73
 
74
+ ### 细分位置与浮层 class
75
+
76
+ placement 支持 bottomLeft 等细分方向,overlayClassName 可标记浮层节点。
77
+
78
+ ```tsx
79
+ <Popover
80
+ placement="bottomLeft"
81
+ overlayClassName="settings-popover"
82
+ title="快捷设置"
83
+ content={<div>显示在触发器左下方。</div>}
84
+ >
85
+ <Button icon="settings">设置</Button>
86
+ </Popover>
87
+ ```
88
+
74
89
  ### 箭头
75
90
 
76
91
  arrow 属性添加指向触发元素的小箭头
@@ -152,7 +167,7 @@ trigger="hover" 鼠标悬停触发
152
167
  | --- | --- | --- | --- |
153
168
  | content \* | `ReactNode` | — | 浮层内容 |
154
169
  | title | `ReactNode` | — | 标题 |
155
- | placement | `"top" | "bottom" | "left" | "right"` | `"bottom"` | 弹出位置 |
170
+ | placement | `"top" | "bottom" | "left" | "right" | ...` | `"bottom"` | 弹出位置,支持 bottomLeft 等细分方向 |
156
171
  | trigger | `"click" | "hover"` | `"click"` | 触发方式 |
157
172
  | arrow | `boolean` | `false` | 显示箭头 |
158
173
  | closable | `boolean` | `false` | 显示关闭按钮 |
@@ -160,6 +175,8 @@ trigger="hover" 鼠标悬停触发
160
175
  | open | `boolean` | — | 受控显示状态 |
161
176
  | defaultOpen | `boolean` | `false` | 非受控初始状态 |
162
177
  | onOpenChange | `(open: boolean) => void` | — | 显示状态变化回调 |
178
+ | visible / onVisibleChange | `boolean / (visible) => void` | — | 受控显示状态别名 |
179
+ | overlayClassName / popupClassName | `string` | — | 浮层 className |
163
180
 
164
181
 
165
182
  ---
@@ -5,7 +5,7 @@
5
5
  ## 导入
6
6
 
7
7
  ```tsx
8
- import { RadioGroup } from "@fangxinyan/lumina";
8
+ import { Radio, RadioGroup } from "@fangxinyan/lumina";
9
9
  ```
10
10
 
11
11
  ## 示例
@@ -19,6 +19,14 @@ import { RadioGroup } from "@fangxinyan/lumina";
19
19
  ]} />
20
20
  ```
21
21
 
22
+ ### 单个 Radio
23
+
24
+ 单项控件可用于自定义组合场景;表单里通常优先使用 RadioGroup。
25
+
26
+ ```tsx
27
+ <Radio label="接收更新" defaultChecked />
28
+ ```
29
+
22
30
  ### 水平排列
23
31
 
24
32
  direction='horizontal'。
@@ -27,8 +35,34 @@ direction='horizontal'。
27
35
  <RadioGroup direction="horizontal" ... />
28
36
  ```
29
37
 
38
+ ### 分段外观
39
+
40
+ variant="segmented" 用同一组选项表达更紧凑的互斥切换。
41
+
42
+ ```tsx
43
+ <RadioGroup
44
+ variant="segmented"
45
+ defaultValue="grid"
46
+ options={[
47
+ { value: "grid", label: "网格" },
48
+ { value: "list", label: "列表" },
49
+ { value: "card", label: "卡片" },
50
+ ]}
51
+ />
52
+ ```
53
+
30
54
  ## API
31
55
 
56
+ **Radio**
57
+
58
+ | Prop | 类型 | 默认 | 说明 |
59
+ | --- | --- | --- | --- |
60
+ | checked / defaultChecked | `boolean` | — | 受控/初始选中 |
61
+ | onChange | `(checked: boolean) => void` | — | 变更 |
62
+ | label | `ReactNode` | — | 标签 |
63
+ | disabled | `boolean` | — | 禁用 |
64
+
65
+
32
66
  **RadioGroup**
33
67
 
34
68
  | Prop | 类型 | 默认 | 说明 |
@@ -37,6 +71,8 @@ direction='horizontal'。
37
71
  | value / defaultValue | `T` | — | 受控/初始 |
38
72
  | onChange | `(value: T) => void` | — | 变更 |
39
73
  | direction | `"vertical" | "horizontal"` | `"vertical"` | 方向 |
74
+ | variant | `"default" | "segmented"` | `"default"` | 外观 |
75
+ | size | `"sm" | "md" | "lg"` | `"md"` | 分段外观尺寸 |
40
76
 
41
77
 
42
78
  ---
@@ -37,6 +37,22 @@ searchable + clearable + 选项 icon/description。
37
37
  />
38
38
  ```
39
39
 
40
+ ### 常用 prop 别名
41
+
42
+ allowClear / showSearch / popupClassName / optionFilterProp 可直接使用。
43
+
44
+ ```tsx
45
+ <Select
46
+ allowClear
47
+ showSearch
48
+ popupClassName="my-select-popup"
49
+ optionFilterProp="label"
50
+ value={value}
51
+ onChange={setValue}
52
+ options={options}
53
+ />
54
+ ```
55
+
40
56
  ### 分组
41
57
 
42
58
  options 接受 { label, options } 表示分组。
@@ -75,8 +91,12 @@ loading 时显示 spinner,emptyContent 自定义空态。
75
91
  | multiple | `boolean` | `false` | 多选 |
76
92
  | maxTagCount | `number` | — | 多选时显示的标签数(超出折叠 +N) |
77
93
  | searchable | `boolean` | `false` | 可搜索 |
94
+ | showSearch | `boolean` | `false` | searchable 的等价别名 |
78
95
  | filterOption | `(input, option) => boolean` | — | 自定义过滤 |
96
+ | optionFilterProp | `"label" | "value" | "text" | string` | — | 默认过滤使用的 option 字段 |
79
97
  | clearable | `boolean` | `false` | 可清除 |
98
+ | allowClear | `boolean | { clearIcon? }` | `false` | clearable 的等价别名 |
99
+ | menuClassName / popupClassName | `string` | — | 浮层菜单 className |
80
100
  | loading | `boolean` | `false` | 加载态 |
81
101
  | emptyContent | `ReactNode` | — | 空态文案 |
82
102
  | size | `"sm" | "md" | "lg"` | `"md"` | 尺寸 |
@@ -0,0 +1,59 @@
1
+ # Spin 加载
2
+
3
+ > 表示任务正在进行,提示用户等待。
4
+
5
+ ## 导入
6
+
7
+ ```tsx
8
+ import { Spin } from "@fangxinyan/lumina";
9
+ ```
10
+
11
+ ## 示例
12
+
13
+ ### 基础
14
+
15
+ ```tsx
16
+ <Spin />
17
+ <Spin size="large" />
18
+ <Spin size={40} />
19
+ ```
20
+
21
+ ### 色调
22
+
23
+ ```tsx
24
+ <Spin tone="accent" />
25
+ <Spin tone="success" />
26
+ <Spin tone="warning" />
27
+ <Spin tone="danger" />
28
+ ```
29
+
30
+ ### Dots 变体
31
+
32
+ ```tsx
33
+ <Spin variant="dots" />
34
+ <Spin variant="dots" size={24} />
35
+ <Spin variant="dots" size={32} />
36
+ ```
37
+
38
+ ### 带文案
39
+
40
+ ```tsx
41
+ <Spin tip="加载中…" />
42
+ <Spin variant="dots" tone="accent" tip="正在同步" />
43
+ ```
44
+
45
+ ## API
46
+
47
+ **Spin**
48
+
49
+ | Prop | 类型 | 默认 | 说明 |
50
+ | --- | --- | --- | --- |
51
+ | size | `"small" | "default" | "large" | number` | `"default"` | 尺寸 |
52
+ | tone | `"accent" | "success" | "warning" | "danger" | "current"` | `"accent"` | 色调 |
53
+ | variant | `"ring" | "dots"` | `"ring"` | 样式 |
54
+ | tip / label | `ReactNode` | — | 文案 |
55
+ | spinning | `boolean` | `true` | 是否显示加载指示器 |
56
+
57
+
58
+ ---
59
+ [← 回到索引](../llms.md)