@a2simcode/ui 0.0.275 → 0.0.276

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 (369) hide show
  1. package/.cursor/skills/ui-component-helper/README.md +86 -86
  2. package/.cursor/skills/ui-component-helper/SKILL.md +115 -115
  3. package/LICENSE +53 -53
  4. package/README.md +156 -156
  5. package/dist/simcode-ui.es.js +486 -480
  6. package/dist/simcode-ui.umd.js +2 -2
  7. package/dist/stats.html +1 -1
  8. package/dist/ui.css +1 -1
  9. package/docs/components/autocomplete.md +89 -89
  10. package/docs/components/barcode.md +101 -101
  11. package/docs/components/button-select.md +24 -24
  12. package/docs/components/button.md +117 -117
  13. package/docs/components/buttons.md +119 -119
  14. package/docs/components/card-list.md +38 -38
  15. package/docs/components/cascader-select.md +114 -114
  16. package/docs/components/checkbox.md +114 -114
  17. package/docs/components/code-mirror.md +85 -85
  18. package/docs/components/collapse.md +26 -26
  19. package/docs/components/comp.md +106 -106
  20. package/docs/components/count-up.md +24 -24
  21. package/docs/components/count.md +24 -24
  22. package/docs/components/data-panel.md +24 -24
  23. package/docs/components/date.md +76 -76
  24. package/docs/components/dialog-full.md +112 -112
  25. package/docs/components/dialog.md +127 -127
  26. package/docs/components/divider.md +24 -24
  27. package/docs/components/drawer.md +127 -127
  28. package/docs/components/dynamic-layer.md +118 -118
  29. package/docs/components/echarts.md +72 -72
  30. package/docs/components/editor.md +24 -24
  31. package/docs/components/form.md +87 -87
  32. package/docs/components/guid.md +39 -39
  33. package/docs/components/hpanel.md +24 -24
  34. package/docs/components/icon.md +56 -56
  35. package/docs/components/input-button.md +24 -24
  36. package/docs/components/input-code.md +24 -24
  37. package/docs/components/input-color.md +114 -114
  38. package/docs/components/input-layer.md +56 -56
  39. package/docs/components/input-rows.md +370 -370
  40. package/docs/components/input-tag.md +50 -50
  41. package/docs/components/input.md +129 -129
  42. package/docs/components/layer-form.md +61 -61
  43. package/docs/components/layer.md +127 -127
  44. package/docs/components/layout.md +132 -132
  45. package/docs/components/map.md +24 -24
  46. package/docs/components/menu.md +121 -121
  47. package/docs/components/meta/button.ts +212 -212
  48. package/docs/components/meta/buttons.ts +76 -76
  49. package/docs/components/meta/card-list.ts +210 -210
  50. package/docs/components/meta/code-mirror.ts +108 -108
  51. package/docs/components/meta/comp.ts +236 -236
  52. package/docs/components/meta/date.ts +267 -267
  53. package/docs/components/meta/echarts.ts +64 -64
  54. package/docs/components/meta/form-item.ts +62 -62
  55. package/docs/components/meta/form.ts +181 -181
  56. package/docs/components/meta/input-button.ts +175 -175
  57. package/docs/components/meta/input-cards.ts +112 -112
  58. package/docs/components/meta/input-code.ts +161 -161
  59. package/docs/components/meta/input-color.ts +243 -243
  60. package/docs/components/meta/input-rows.ts +119 -119
  61. package/docs/components/meta/layer-form.ts +74 -74
  62. package/docs/components/meta/map.ts +68 -68
  63. package/docs/components/meta/panel.ts +152 -152
  64. package/docs/components/meta/radio.ts +55 -55
  65. package/docs/components/meta/select.ts +279 -279
  66. package/docs/components/meta/slider.ts +270 -270
  67. package/docs/components/meta/table-panel.ts +326 -326
  68. package/docs/components/meta/table.ts +489 -489
  69. package/docs/components/meta/tabs.ts +146 -146
  70. package/docs/components/meta/title.ts +91 -91
  71. package/docs/components/meta/tree.ts +225 -225
  72. package/docs/components/meta/vpanel.ts +19 -19
  73. package/docs/components/meta/workflow-viewer.ts +55 -55
  74. package/docs/components/number.md +124 -124
  75. package/docs/components/page.md +102 -102
  76. package/docs/components/panel.md +37 -37
  77. package/docs/components/radio.md +87 -87
  78. package/docs/components/rate.md +71 -71
  79. package/docs/components/select.md +133 -133
  80. package/docs/components/slider-captcha.md +41 -41
  81. package/docs/components/slider.md +101 -101
  82. package/docs/components/switch.md +90 -90
  83. package/docs/components/table-panel.md +312 -312
  84. package/docs/components/table.md +510 -510
  85. package/docs/components/tabs.md +26 -26
  86. package/docs/components/title.md +24 -24
  87. package/docs/components/tree.md +222 -222
  88. package/docs/components/upload.md +117 -117
  89. package/docs/components/workflow-viewer.md +21 -21
  90. package/docs/components/workflow.md +21 -21
  91. package/docs/examples/autocomplete/advanced.vue +35 -35
  92. package/docs/examples/autocomplete/basic.vue +32 -32
  93. package/docs/examples/autocomplete/clearable.vue +33 -33
  94. package/docs/examples/autocomplete/custom-template.vue +49 -49
  95. package/docs/examples/autocomplete/disabled.vue +33 -33
  96. package/docs/examples/autocomplete/icon.vue +37 -37
  97. package/docs/examples/barcode/all-types.vue +380 -380
  98. package/docs/examples/barcode/basic.vue +14 -14
  99. package/docs/examples/barcode/props-appearance.vue +243 -243
  100. package/docs/examples/barcode/props-geometry.vue +143 -143
  101. package/docs/examples/barcode/props-logic.vue +216 -216
  102. package/docs/examples/barcode/props-symbology.vue +199 -199
  103. package/docs/examples/barcode/props-text.vue +268 -268
  104. package/docs/examples/button/basic.vue +7 -7
  105. package/docs/examples/button/disabled.vue +42 -42
  106. package/docs/examples/button/loading.vue +6 -6
  107. package/docs/examples/button/shape.vue +7 -7
  108. package/docs/examples/button/size.vue +14 -14
  109. package/docs/examples/button/status.vue +34 -34
  110. package/docs/examples/button/type.vue +10 -10
  111. package/docs/examples/button-select/basic.vue +19 -19
  112. package/docs/examples/buttons/basic.vue +62 -62
  113. package/docs/examples/buttons/disabled.vue +36 -36
  114. package/docs/examples/buttons/dropdown.vue +63 -63
  115. package/docs/examples/buttons/group.vue +52 -52
  116. package/docs/examples/buttons/link.vue +47 -47
  117. package/docs/examples/buttons/popup.vue +39 -39
  118. package/docs/examples/buttons/size.vue +45 -45
  119. package/docs/examples/card-list/basic.vue +70 -70
  120. package/docs/examples/card-list/selection-pagination.vue +69 -69
  121. package/docs/examples/cascader-select/basic.vue +28 -28
  122. package/docs/examples/cascader-select/clearable.vue +34 -34
  123. package/docs/examples/cascader-select/disabled.vue +43 -43
  124. package/docs/examples/cascader-select/filterable.vue +37 -37
  125. package/docs/examples/cascader-select/methods.vue +84 -84
  126. package/docs/examples/cascader-select/multiple.vue +38 -38
  127. package/docs/examples/cascader-select/slot.vue +45 -45
  128. package/docs/examples/checkbox/basic.vue +18 -18
  129. package/docs/examples/checkbox/button.vue +19 -19
  130. package/docs/examples/checkbox/color.vue +25 -25
  131. package/docs/examples/checkbox/disabled.vue +17 -17
  132. package/docs/examples/checkbox/min-max.vue +20 -20
  133. package/docs/examples/checkbox/mixed.vue +56 -56
  134. package/docs/examples/checkbox/size.vue +28 -28
  135. package/docs/examples/code-mirror/basic.vue +11 -11
  136. package/docs/examples/code-mirror/events.vue +42 -42
  137. package/docs/examples/code-mirror/height.vue +25 -25
  138. package/docs/examples/code-mirror/mode.vue +33 -33
  139. package/docs/examples/code-mirror/readonly.vue +14 -14
  140. package/docs/examples/collapse/basic.vue +82 -82
  141. package/docs/examples/comp/basic.vue +7 -7
  142. package/docs/examples/comp/collapse.vue +38 -38
  143. package/docs/examples/comp/table-merge-rows.vue +77 -77
  144. package/docs/examples/comp/table-row-fixed-merge.vue +105 -105
  145. package/docs/examples/comp/tabs.vue +38 -38
  146. package/docs/examples/count/basic.vue +101 -101
  147. package/docs/examples/count-up/basic.vue +89 -89
  148. package/docs/examples/data-panel/basic.vue +110 -110
  149. package/docs/examples/date/basic.vue +73 -73
  150. package/docs/examples/date/default-value.vue +59 -59
  151. package/docs/examples/date/format.vue +75 -75
  152. package/docs/examples/date/range.vue +66 -66
  153. package/docs/examples/date/types.vue +79 -79
  154. package/docs/examples/decorated-title/basic.vue +31 -31
  155. package/docs/examples/dialog/basic.vue +36 -36
  156. package/docs/examples/dialog/custom-buttons.vue +44 -44
  157. package/docs/examples/dialog/fullscreen.vue +23 -23
  158. package/docs/examples/dialog/no-mask.vue +17 -17
  159. package/docs/examples/dialog/size.vue +44 -44
  160. package/docs/examples/dialog/steps.vue +57 -57
  161. package/docs/examples/dialog-full/basic.vue +29 -29
  162. package/docs/examples/dialog-full/custom-buttons.vue +45 -45
  163. package/docs/examples/dialog-full/no-buttons.vue +18 -18
  164. package/docs/examples/dialog-full/no-header.vue +27 -27
  165. package/docs/examples/dialog-full/steps.vue +71 -71
  166. package/docs/examples/divider/basic.vue +52 -52
  167. package/docs/examples/drawer/basic.vue +35 -35
  168. package/docs/examples/drawer/custom-buttons.vue +34 -34
  169. package/docs/examples/drawer/direction.vue +47 -47
  170. package/docs/examples/drawer/mask.vue +36 -36
  171. package/docs/examples/drawer/no-buttons.vue +20 -20
  172. package/docs/examples/drawer/size.vue +28 -28
  173. package/docs/examples/dynamic-layer/basic.vue +33 -33
  174. package/docs/examples/dynamic-layer/custom-buttons.vue +43 -43
  175. package/docs/examples/dynamic-layer/form.vue +73 -73
  176. package/docs/examples/dynamic-layer/steps.vue +52 -52
  177. package/docs/examples/dynamic-layer/types.vue +40 -40
  178. package/docs/examples/echarts/basic.vue +31 -31
  179. package/docs/examples/echarts/dynamic.vue +43 -43
  180. package/docs/examples/echarts/line.vue +46 -46
  181. package/docs/examples/echarts/pie.vue +44 -44
  182. package/docs/examples/editor/basic.vue +15 -15
  183. package/docs/examples/form/basic.vue +688 -688
  184. package/docs/examples/form/init.vue +76 -76
  185. package/docs/examples/form/master-detail.vue +203 -203
  186. package/docs/examples/form/rule-format.vue +179 -179
  187. package/docs/examples/form/view-table.vue +378 -378
  188. package/docs/examples/guid/basic.vue +10 -10
  189. package/docs/examples/guid/size.vue +13 -13
  190. package/docs/examples/hpanel/basic.vue +79 -79
  191. package/docs/examples/icon/basic.vue +9 -9
  192. package/docs/examples/icon/rotate-flip.vue +9 -9
  193. package/docs/examples/icon/size.vue +7 -7
  194. package/docs/examples/input/basic.vue +10 -10
  195. package/docs/examples/input/clearable.vue +12 -12
  196. package/docs/examples/input/disabled.vue +6 -6
  197. package/docs/examples/input/icon.vue +23 -23
  198. package/docs/examples/input/password.vue +18 -18
  199. package/docs/examples/input/size.vue +13 -13
  200. package/docs/examples/input/textarea.vue +25 -25
  201. package/docs/examples/input/word-limit.vue +28 -28
  202. package/docs/examples/input-button/basic.vue +33 -33
  203. package/docs/examples/input-cards/basic.vue +79 -79
  204. package/docs/examples/input-code/basic.vue +29 -29
  205. package/docs/examples/input-color/basic.vue +10 -10
  206. package/docs/examples/input-color/disabled.vue +13 -13
  207. package/docs/examples/input-color/format.vue +17 -17
  208. package/docs/examples/input-color/no-alpha.vue +13 -13
  209. package/docs/examples/input-color/only-button.vue +15 -15
  210. package/docs/examples/input-color/predefine.vue +31 -31
  211. package/docs/examples/input-color/size.vue +15 -15
  212. package/docs/examples/input-layer/basic.vue +85 -85
  213. package/docs/examples/input-layer/render-vnode-page.vue +160 -160
  214. package/docs/examples/input-layer/render-vnode.vue +127 -127
  215. package/docs/examples/input-rows/basic.vue +73 -73
  216. package/docs/examples/input-rows/drag.vue +48 -48
  217. package/docs/examples/input-rows/layer-form.vue +85 -85
  218. package/docs/examples/input-rows/nested.vue +91 -91
  219. package/docs/examples/input-tag/basic.vue +27 -27
  220. package/docs/examples/input-tag/colors.vue +23 -23
  221. package/docs/examples/input-tag/readonly.vue +17 -17
  222. package/docs/examples/layer/basic.vue +43 -43
  223. package/docs/examples/layer/custom-buttons.vue +61 -61
  224. package/docs/examples/layer/drawer.vue +37 -37
  225. package/docs/examples/layer/full.vue +38 -38
  226. package/docs/examples/layer/modal.vue +34 -34
  227. package/docs/examples/layer/steps.vue +46 -46
  228. package/docs/examples/layer-form/basic.vue +76 -76
  229. package/docs/examples/layer-form/config.vue +82 -82
  230. package/docs/examples/layer-form/size.vue +72 -72
  231. package/docs/examples/layout/basic.vue +36 -36
  232. package/docs/examples/layout/custom-size.vue +50 -50
  233. package/docs/examples/layout/disable-move.vue +37 -37
  234. package/docs/examples/layout/hide-mid-when-narrow.vue +96 -96
  235. package/docs/examples/layout/min-size.vue +73 -73
  236. package/docs/examples/layout/percent-size.vue +80 -80
  237. package/docs/examples/layout/simple.vue +22 -22
  238. package/docs/examples/layout/top-side.vue +34 -34
  239. package/docs/examples/map/basic.vue +22 -22
  240. package/docs/examples/menu/basic.vue +58 -58
  241. package/docs/examples/menu/collapsed.vue +49 -49
  242. package/docs/examples/menu/horizontal.vue +44 -44
  243. package/docs/examples/menu/selection-test.vue +104 -104
  244. package/docs/examples/menu/theme.vue +46 -46
  245. package/docs/examples/menu/vertical.vue +46 -46
  246. package/docs/examples/number/advanced.vue +143 -143
  247. package/docs/examples/number/basic.vue +63 -63
  248. package/docs/examples/number/disabled.vue +49 -49
  249. package/docs/examples/number/size.vue +42 -42
  250. package/docs/examples/number/slots.vue +123 -123
  251. package/docs/examples/number/step-strictly.vue +41 -41
  252. package/docs/examples/number/step.vue +47 -47
  253. package/docs/examples/page/basic.vue +41 -41
  254. package/docs/examples/page/code-table-model.vue +428 -428
  255. package/docs/examples/page/dept-user-management.vue +211 -211
  256. package/docs/examples/page/init.vue +87 -87
  257. package/docs/examples/page/log.vue +453 -453
  258. package/docs/examples/page/user-management.vue +313 -313
  259. package/docs/examples/panel/tool-buttons.vue +18 -18
  260. package/docs/examples/radio/basic.vue +17 -17
  261. package/docs/examples/radio/button.vue +17 -17
  262. package/docs/examples/radio/color.vue +18 -18
  263. package/docs/examples/radio/disabled.vue +17 -17
  264. package/docs/examples/radio/size.vue +29 -29
  265. package/docs/examples/rate/basic.vue +24 -24
  266. package/docs/examples/rate/half.vue +24 -24
  267. package/docs/examples/rate/readonly.vue +11 -11
  268. package/docs/examples/rate/text.vue +37 -37
  269. package/docs/examples/select/basic.vue +16 -16
  270. package/docs/examples/select/clearable.vue +22 -22
  271. package/docs/examples/select/disabled.vue +31 -31
  272. package/docs/examples/select/filterable.vue +24 -24
  273. package/docs/examples/select/group.vue +23 -23
  274. package/docs/examples/select/icon.vue +16 -16
  275. package/docs/examples/select/multiple.vue +18 -18
  276. package/docs/examples/select/size.vue +39 -39
  277. package/docs/examples/slider/basic.vue +42 -42
  278. package/docs/examples/slider/disabled.vue +17 -17
  279. package/docs/examples/slider/marks.vue +30 -30
  280. package/docs/examples/slider/size.vue +37 -37
  281. package/docs/examples/slider/tooltip.vue +36 -36
  282. package/docs/examples/slider/vertical.vue +26 -26
  283. package/docs/examples/slider-captcha/basic.vue +44 -44
  284. package/docs/examples/slider-captcha/custom.vue +48 -48
  285. package/docs/examples/switch/basic.vue +16 -16
  286. package/docs/examples/switch/disabled.vue +13 -13
  287. package/docs/examples/switch/loading.vue +13 -13
  288. package/docs/examples/switch/size.vue +15 -15
  289. package/docs/examples/switch/text.vue +13 -13
  290. package/docs/examples/table/action-filter.vue +126 -126
  291. package/docs/examples/table/actions.vue +116 -116
  292. package/docs/examples/table/add-row.vue +103 -103
  293. package/docs/examples/table/basic.vue +168 -168
  294. package/docs/examples/table/checkbox-layout.vue +68 -68
  295. package/docs/examples/table/column-filter.vue +96 -96
  296. package/docs/examples/table/custom-layout.vue +115 -115
  297. package/docs/examples/table/custom-merge-cell.vue +206 -206
  298. package/docs/examples/table/dynamic-type.vue +73 -73
  299. package/docs/examples/table/editable.vue +262 -262
  300. package/docs/examples/table/field-selection.vue +87 -87
  301. package/docs/examples/table/frozen-column.vue +140 -140
  302. package/docs/examples/table/height-mode.vue +99 -99
  303. package/docs/examples/table/icon.vue +85 -85
  304. package/docs/examples/table/layer-form.vue +133 -133
  305. package/docs/examples/table/link.vue +66 -66
  306. package/docs/examples/table/merge-cell.vue +78 -78
  307. package/docs/examples/table/merge-header.vue +86 -86
  308. package/docs/examples/table/multiple-disabled.vue +112 -112
  309. package/docs/examples/table/multiple.vue +188 -188
  310. package/docs/examples/table/pagination.vue +151 -151
  311. package/docs/examples/table/row-drag.vue +67 -67
  312. package/docs/examples/table/row-fixed.vue +61 -61
  313. package/docs/examples/table/single-selection.vue +64 -64
  314. package/docs/examples/table/sub-table-lazy.vue +97 -97
  315. package/docs/examples/table/sub-table.vue +103 -103
  316. package/docs/examples/table/tag.vue +43 -43
  317. package/docs/examples/table/tree-column.vue +119 -119
  318. package/docs/examples/table/tree-data.vue +141 -141
  319. package/docs/examples/table/tree-default-expand-all.vue +60 -60
  320. package/docs/examples/table/tree-lazy.vue +80 -80
  321. package/docs/examples/table/tree-set-selection.vue +75 -75
  322. package/docs/examples/table-panel/basic.vue +229 -229
  323. package/docs/examples/table-panel/batch-operations.vue +286 -286
  324. package/docs/examples/table-panel/button-visibility.vue +88 -88
  325. package/docs/examples/table-panel/card.vue +101 -101
  326. package/docs/examples/table-panel/column-filter.vue +116 -116
  327. package/docs/examples/table-panel/filter.vue +219 -219
  328. package/docs/examples/table-panel/get-selection.vue +111 -111
  329. package/docs/examples/table-panel/mask.vue +151 -151
  330. package/docs/examples/table-panel/model-value.vue +87 -87
  331. package/docs/examples/table-panel/multiple-selection.vue +243 -243
  332. package/docs/examples/table-panel/pagination.vue +133 -133
  333. package/docs/examples/table-panel/search-list.vue +207 -207
  334. package/docs/examples/table-panel/sub-table-lazy.vue +118 -118
  335. package/docs/examples/table-panel/tree-parent-key.vue +67 -67
  336. package/docs/examples/tabs/basic.vue +98 -98
  337. package/docs/examples/time/base.vue +67 -67
  338. package/docs/examples/title/basic.vue +87 -87
  339. package/docs/examples/tree/accordion.vue +46 -46
  340. package/docs/examples/tree/basic.vue +50 -50
  341. package/docs/examples/tree/buttons.vue +53 -53
  342. package/docs/examples/tree/check-strictly.vue +53 -53
  343. package/docs/examples/tree/checkable.vue +52 -52
  344. package/docs/examples/tree/custom-keys.vue +39 -39
  345. package/docs/examples/tree/default-expanded.vue +52 -52
  346. package/docs/examples/tree/draggable.vue +29 -29
  347. package/docs/examples/tree/expand-on-click.vue +39 -39
  348. package/docs/examples/tree/flat-data.vue +20 -20
  349. package/docs/examples/tree/icon.vue +40 -40
  350. package/docs/examples/tree/load-data.vue +37 -37
  351. package/docs/examples/tree/methods.vue +74 -74
  352. package/docs/examples/tree/theme.vue +33 -33
  353. package/docs/examples/tree-select/basic.vue +47 -47
  354. package/docs/examples/tree-select/lazy.vue +42 -42
  355. package/docs/examples/upload/accept.vue +31 -31
  356. package/docs/examples/upload/basic.vue +12 -12
  357. package/docs/examples/upload/drag.vue +11 -11
  358. package/docs/examples/upload/image.vue +17 -17
  359. package/docs/examples/upload/limit.vue +20 -20
  360. package/docs/examples/upload/multiple.vue +17 -17
  361. package/docs/examples/upload/readonly.vue +17 -17
  362. package/docs/examples/utils/cipher.vue +160 -160
  363. package/docs/examples/utils/common.vue +153 -153
  364. package/docs/examples/utils/date.vue +56 -56
  365. package/docs/examples/utils/dom.vue +52 -52
  366. package/docs/examples/utils/is.vue +70 -70
  367. package/docs/examples/workflow/basic.vue +265 -265
  368. package/docs/examples/workflow-viewer/basic.vue +248 -248
  369. package/package.json +23 -23
@@ -1,117 +1,117 @@
1
- # Button 按钮
2
-
3
- 常用的操作按钮。
4
-
5
- ## 按钮类型
6
-
7
- 使用 `type` 属性来定义按钮的样式。
8
-
9
- <Demo :source-code="buttonTypeCode">
10
- <template #source>
11
- <button-type />
12
- </template>
13
- <template #description>
14
- 按钮有六种类型:主要按钮、次要按钮(默认)、虚框按钮、文字按钮、链接按钮和线框按钮。
15
- </template>
16
- </Demo>
17
-
18
- ## 图标按钮
19
-
20
- 使用 `icon` 属性或者 `icon` 插槽来设置按钮图标。
21
-
22
- <Demo :source-code="buttonBasicCode">
23
- <template #source>
24
- <button-basic />
25
- </template>
26
- <template #description>
27
- 可以通过 `icon` 属性设置图标,或者通过 `#icon` 插槽自定义图标内容。
28
- </template>
29
- </Demo>
30
-
31
- ## 加载状态
32
-
33
- 使用 `loading` 属性来设置旋转的加载图标。
34
-
35
- <Demo :source-code="buttonLoadingCode">
36
- <template #source>
37
- <button-loading />
38
- </template>
39
- <template #description>
40
- 设置 `loading` 属性为 `true` 即可。也可以设置 `{ delay: number }` 来延迟显示加载状态。
41
- </template>
42
- </Demo>
43
-
44
- ## 按钮形状
45
-
46
- 使用 `shape` 属性定义按钮形状。
47
-
48
- <Demo :source-code="buttonShapeCode">
49
- <template #source>
50
- <button-shape />
51
- </template>
52
- <template #description>
53
- 支持 `default`、`circle`、`round` 三种形状。
54
- </template>
55
- </Demo>
56
-
57
- ## 不同尺寸
58
-
59
- Button 组件提供三种尺寸。
60
-
61
- <Demo :source-code="buttonSizeCode">
62
- <template #source>
63
- <button-size />
64
- </template>
65
- <template #description>
66
- 使用 `size` 属性配置尺寸,可选值为 `large`、`default` 和 `small`。
67
- </template>
68
- </Demo>
69
-
70
- ## 禁用状态
71
-
72
- 使用 `disabled` 属性来定义按钮是否被禁用。
73
-
74
- <Demo :source-code="buttonDisabledCode">
75
- <template #source>
76
- <button-disabled />
77
- </template>
78
- <template #description>
79
- 你可以使用 `disabled` 属性来定义按钮是否可用。
80
- </template>
81
- </Demo>
82
-
83
- ## 按钮状态
84
-
85
- 使用 `status` 属性来设置按钮的状态,支持 `normal`(默认)、`success`、`warning`、`danger` 四种状态。
86
-
87
- <Demo :source-code="buttonStatusCode">
88
- <template #source>
89
- <button-status />
90
- </template>
91
- <template #description>
92
- `status` 属性可以与任意 `type` 组合使用,不同组合呈现不同的视觉效果。`success` 表示成功、`warning` 表示警告、`danger` 表示危险操作。
93
- </template>
94
- </Demo>
95
-
96
- ## API
97
-
98
- <ApiTable :data="buttonApi" componentName="button" />
99
-
100
- <script setup>
101
- import ButtonType from '../examples/button/type.vue'
102
- import ButtonBasic from '../examples/button/basic.vue'
103
- import ButtonLoading from '../examples/button/loading.vue'
104
- import ButtonShape from '../examples/button/shape.vue'
105
- import ButtonSize from '../examples/button/size.vue'
106
- import ButtonDisabled from '../examples/button/disabled.vue'
107
- import ButtonStatus from '../examples/button/status.vue'
108
- import buttonApi from './meta/button'
109
-
110
- import buttonTypeCode from '../examples/button/type.vue?raw'
111
- import buttonBasicCode from '../examples/button/basic.vue?raw'
112
- import buttonLoadingCode from '../examples/button/loading.vue?raw'
113
- import buttonShapeCode from '../examples/button/shape.vue?raw'
114
- import buttonSizeCode from '../examples/button/size.vue?raw'
115
- import buttonDisabledCode from '../examples/button/disabled.vue?raw'
116
- import buttonStatusCode from '../examples/button/status.vue?raw'
117
- </script>
1
+ # Button 按钮
2
+
3
+ 常用的操作按钮。
4
+
5
+ ## 按钮类型
6
+
7
+ 使用 `type` 属性来定义按钮的样式。
8
+
9
+ <Demo :source-code="buttonTypeCode">
10
+ <template #source>
11
+ <button-type />
12
+ </template>
13
+ <template #description>
14
+ 按钮有六种类型:主要按钮、次要按钮(默认)、虚框按钮、文字按钮、链接按钮和线框按钮。
15
+ </template>
16
+ </Demo>
17
+
18
+ ## 图标按钮
19
+
20
+ 使用 `icon` 属性或者 `icon` 插槽来设置按钮图标。
21
+
22
+ <Demo :source-code="buttonBasicCode">
23
+ <template #source>
24
+ <button-basic />
25
+ </template>
26
+ <template #description>
27
+ 可以通过 `icon` 属性设置图标,或者通过 `#icon` 插槽自定义图标内容。
28
+ </template>
29
+ </Demo>
30
+
31
+ ## 加载状态
32
+
33
+ 使用 `loading` 属性来设置旋转的加载图标。
34
+
35
+ <Demo :source-code="buttonLoadingCode">
36
+ <template #source>
37
+ <button-loading />
38
+ </template>
39
+ <template #description>
40
+ 设置 `loading` 属性为 `true` 即可。也可以设置 `{ delay: number }` 来延迟显示加载状态。
41
+ </template>
42
+ </Demo>
43
+
44
+ ## 按钮形状
45
+
46
+ 使用 `shape` 属性定义按钮形状。
47
+
48
+ <Demo :source-code="buttonShapeCode">
49
+ <template #source>
50
+ <button-shape />
51
+ </template>
52
+ <template #description>
53
+ 支持 `default`、`circle`、`round` 三种形状。
54
+ </template>
55
+ </Demo>
56
+
57
+ ## 不同尺寸
58
+
59
+ Button 组件提供三种尺寸。
60
+
61
+ <Demo :source-code="buttonSizeCode">
62
+ <template #source>
63
+ <button-size />
64
+ </template>
65
+ <template #description>
66
+ 使用 `size` 属性配置尺寸,可选值为 `large`、`default` 和 `small`。
67
+ </template>
68
+ </Demo>
69
+
70
+ ## 禁用状态
71
+
72
+ 使用 `disabled` 属性来定义按钮是否被禁用。
73
+
74
+ <Demo :source-code="buttonDisabledCode">
75
+ <template #source>
76
+ <button-disabled />
77
+ </template>
78
+ <template #description>
79
+ 你可以使用 `disabled` 属性来定义按钮是否可用。
80
+ </template>
81
+ </Demo>
82
+
83
+ ## 按钮状态
84
+
85
+ 使用 `status` 属性来设置按钮的状态,支持 `normal`(默认)、`success`、`warning`、`danger` 四种状态。
86
+
87
+ <Demo :source-code="buttonStatusCode">
88
+ <template #source>
89
+ <button-status />
90
+ </template>
91
+ <template #description>
92
+ `status` 属性可以与任意 `type` 组合使用,不同组合呈现不同的视觉效果。`success` 表示成功、`warning` 表示警告、`danger` 表示危险操作。
93
+ </template>
94
+ </Demo>
95
+
96
+ ## API
97
+
98
+ <ApiTable :data="buttonApi" componentName="button" />
99
+
100
+ <script setup>
101
+ import ButtonType from '../examples/button/type.vue'
102
+ import ButtonBasic from '../examples/button/basic.vue'
103
+ import ButtonLoading from '../examples/button/loading.vue'
104
+ import ButtonShape from '../examples/button/shape.vue'
105
+ import ButtonSize from '../examples/button/size.vue'
106
+ import ButtonDisabled from '../examples/button/disabled.vue'
107
+ import ButtonStatus from '../examples/button/status.vue'
108
+ import buttonApi from './meta/button'
109
+
110
+ import buttonTypeCode from '../examples/button/type.vue?raw'
111
+ import buttonBasicCode from '../examples/button/basic.vue?raw'
112
+ import buttonLoadingCode from '../examples/button/loading.vue?raw'
113
+ import buttonShapeCode from '../examples/button/shape.vue?raw'
114
+ import buttonSizeCode from '../examples/button/size.vue?raw'
115
+ import buttonDisabledCode from '../examples/button/disabled.vue?raw'
116
+ import buttonStatusCode from '../examples/button/status.vue?raw'
117
+ </script>
@@ -1,119 +1,119 @@
1
- # Buttons 按钮组
2
-
3
- 用于批量管理和展示按钮,支持分组、下拉菜单等功能。
4
-
5
- ## 基础用法
6
-
7
- 通过 `list` 属性传入按钮配置数组。
8
-
9
- <Demo :source-code="buttonsBasicCode">
10
- <template #source>
11
- <buttons-basic />
12
- </template>
13
- <template #description>
14
- 每个按钮项需要包含唯一的 `id` 标识,可配置 `label`、`click` 等属性,`type`、`icon` 等属性需配置在 `config` 对象中。
15
- </template>
16
- </Demo>
17
-
18
- ## 按钮分组
19
-
20
- 通过设置 `groupId` 可以将按钮自动分组展示。
21
-
22
- <Demo :source-code="buttonsGroupCode">
23
- <template #source>
24
- <buttons-group />
25
- </template>
26
- <template #description>
27
- 相同 `groupId` 的按钮会紧凑显示在一起,不同组之间会有间距。
28
- </template>
29
- </Demo>
30
-
31
- ## 下拉菜单
32
-
33
- 通过 `children` 属性可以创建带下拉菜单的按钮。
34
-
35
- <Demo :source-code="buttonsDropdownCode">
36
- <template #source>
37
- <buttons-dropdown />
38
- </template>
39
- <template #description>
40
- 配置 `children` 数组后,子按钮会以下拉形式展示,适合放置次要操作。
41
- </template>
42
- </Demo>
43
-
44
- ## 不同尺寸
45
-
46
- 通过 `size` 属性设置按钮组内所有按钮的尺寸。
47
-
48
- <Demo :source-code="buttonsSizeCode">
49
- <template #source>
50
- <buttons-size />
51
- </template>
52
- <template #description>
53
- 支持 `large`、`default`、`small` 三种尺寸。
54
- </template>
55
- </Demo>
56
-
57
- ## 链接形式
58
-
59
- 通过 `isLink` 属性可以将所有按钮以链接形式展示。
60
-
61
- <Demo :source-code="buttonsLinkCode">
62
- <template #source>
63
- <buttons-link />
64
- </template>
65
- <template #description>
66
- 设置 `isLink` 为 `true` 后,所有按钮都会以链接形式展示。
67
- </template>
68
- </Demo>
69
-
70
- ## 禁用状态
71
-
72
- 通过按钮项的 `disabled` 属性可以禁用单个按钮。
73
-
74
- <Demo :source-code="buttonsDisabledCode">
75
- <template #source>
76
- <buttons-disabled />
77
- </template>
78
- <template #description>
79
- 禁用的按钮不会触发点击事件。
80
- </template>
81
- </Demo>
82
-
83
- ## 点击打开弹窗
84
-
85
- 演示通过按钮点击事件打开弹窗。
86
-
87
- <Demo :source-code="buttonsPopupCode">
88
- <template #source>
89
- <buttons-popup />
90
- </template>
91
- <template #description>
92
- 在 `click` 事件回调中解构获取 `openLayer` 方法,通过它动态打开弹窗。
93
- </template>
94
- </Demo>
95
-
96
- ## API
97
-
98
- ### Buttons 属性
99
-
100
- <ApiTable :data="buttonsApi" componentName="buttons" />
101
-
102
- <script setup>
103
- import ButtonsBasic from '../examples/buttons/basic.vue'
104
- import ButtonsGroup from '../examples/buttons/group.vue'
105
- import ButtonsDropdown from '../examples/buttons/dropdown.vue'
106
- import ButtonsSize from '../examples/buttons/size.vue'
107
- import ButtonsLink from '../examples/buttons/link.vue'
108
- import ButtonsDisabled from '../examples/buttons/disabled.vue'
109
- import ButtonsPopup from '../examples/buttons/popup.vue'
110
- import buttonsApi from './meta/buttons'
111
-
112
- import buttonsBasicCode from '../examples/buttons/basic.vue?raw'
113
- import buttonsGroupCode from '../examples/buttons/group.vue?raw'
114
- import buttonsDropdownCode from '../examples/buttons/dropdown.vue?raw'
115
- import buttonsSizeCode from '../examples/buttons/size.vue?raw'
116
- import buttonsLinkCode from '../examples/buttons/link.vue?raw'
117
- import buttonsDisabledCode from '../examples/buttons/disabled.vue?raw'
118
- import buttonsPopupCode from '../examples/buttons/popup.vue?raw'
119
- </script>
1
+ # Buttons 按钮组
2
+
3
+ 用于批量管理和展示按钮,支持分组、下拉菜单等功能。
4
+
5
+ ## 基础用法
6
+
7
+ 通过 `list` 属性传入按钮配置数组。
8
+
9
+ <Demo :source-code="buttonsBasicCode">
10
+ <template #source>
11
+ <buttons-basic />
12
+ </template>
13
+ <template #description>
14
+ 每个按钮项需要包含唯一的 `id` 标识,可配置 `label`、`click` 等属性,`type`、`icon` 等属性需配置在 `config` 对象中。
15
+ </template>
16
+ </Demo>
17
+
18
+ ## 按钮分组
19
+
20
+ 通过设置 `groupId` 可以将按钮自动分组展示。
21
+
22
+ <Demo :source-code="buttonsGroupCode">
23
+ <template #source>
24
+ <buttons-group />
25
+ </template>
26
+ <template #description>
27
+ 相同 `groupId` 的按钮会紧凑显示在一起,不同组之间会有间距。
28
+ </template>
29
+ </Demo>
30
+
31
+ ## 下拉菜单
32
+
33
+ 通过 `children` 属性可以创建带下拉菜单的按钮。
34
+
35
+ <Demo :source-code="buttonsDropdownCode">
36
+ <template #source>
37
+ <buttons-dropdown />
38
+ </template>
39
+ <template #description>
40
+ 配置 `children` 数组后,子按钮会以下拉形式展示,适合放置次要操作。
41
+ </template>
42
+ </Demo>
43
+
44
+ ## 不同尺寸
45
+
46
+ 通过 `size` 属性设置按钮组内所有按钮的尺寸。
47
+
48
+ <Demo :source-code="buttonsSizeCode">
49
+ <template #source>
50
+ <buttons-size />
51
+ </template>
52
+ <template #description>
53
+ 支持 `large`、`default`、`small` 三种尺寸。
54
+ </template>
55
+ </Demo>
56
+
57
+ ## 链接形式
58
+
59
+ 通过 `isLink` 属性可以将所有按钮以链接形式展示。
60
+
61
+ <Demo :source-code="buttonsLinkCode">
62
+ <template #source>
63
+ <buttons-link />
64
+ </template>
65
+ <template #description>
66
+ 设置 `isLink` 为 `true` 后,所有按钮都会以链接形式展示。
67
+ </template>
68
+ </Demo>
69
+
70
+ ## 禁用状态
71
+
72
+ 通过按钮项的 `disabled` 属性可以禁用单个按钮。
73
+
74
+ <Demo :source-code="buttonsDisabledCode">
75
+ <template #source>
76
+ <buttons-disabled />
77
+ </template>
78
+ <template #description>
79
+ 禁用的按钮不会触发点击事件。
80
+ </template>
81
+ </Demo>
82
+
83
+ ## 点击打开弹窗
84
+
85
+ 演示通过按钮点击事件打开弹窗。
86
+
87
+ <Demo :source-code="buttonsPopupCode">
88
+ <template #source>
89
+ <buttons-popup />
90
+ </template>
91
+ <template #description>
92
+ 在 `click` 事件回调中解构获取 `openLayer` 方法,通过它动态打开弹窗。
93
+ </template>
94
+ </Demo>
95
+
96
+ ## API
97
+
98
+ ### Buttons 属性
99
+
100
+ <ApiTable :data="buttonsApi" componentName="buttons" />
101
+
102
+ <script setup>
103
+ import ButtonsBasic from '../examples/buttons/basic.vue'
104
+ import ButtonsGroup from '../examples/buttons/group.vue'
105
+ import ButtonsDropdown from '../examples/buttons/dropdown.vue'
106
+ import ButtonsSize from '../examples/buttons/size.vue'
107
+ import ButtonsLink from '../examples/buttons/link.vue'
108
+ import ButtonsDisabled from '../examples/buttons/disabled.vue'
109
+ import ButtonsPopup from '../examples/buttons/popup.vue'
110
+ import buttonsApi from './meta/buttons'
111
+
112
+ import buttonsBasicCode from '../examples/buttons/basic.vue?raw'
113
+ import buttonsGroupCode from '../examples/buttons/group.vue?raw'
114
+ import buttonsDropdownCode from '../examples/buttons/dropdown.vue?raw'
115
+ import buttonsSizeCode from '../examples/buttons/size.vue?raw'
116
+ import buttonsLinkCode from '../examples/buttons/link.vue?raw'
117
+ import buttonsDisabledCode from '../examples/buttons/disabled.vue?raw'
118
+ import buttonsPopupCode from '../examples/buttons/popup.vue?raw'
119
+ </script>
@@ -1,38 +1,38 @@
1
- # CardList 卡片列表
2
-
3
- 用于将数据以卡片形式展示,内置图片预览、操作按钮、单选/多选与分页能力。
4
-
5
- ## 基础使用
6
-
7
- <Demo :source-code="basicCode">
8
- <template #source>
9
- <card-list-basic />
10
- </template>
11
- <template #description>
12
- 通过 `dataSource` 传入数据,通过 `loadSrc` 获取图片地址,通过 `buttons` 配置卡片操作按钮。
13
- </template>
14
- </Demo>
15
-
16
- ## 选择与分页
17
-
18
- <Demo :source-code="selectionPaginationCode">
19
- <template #source>
20
- <card-list-selection-pagination />
21
- </template>
22
- <template #description>
23
- 开启 `isRadio` 或 `isMultiSelect` 后可以进行选择,组件对外暴露 `getSelections/clearSelection` 方法;开启 `isPage` 后使用分页并监听 `loadPageData` 加载数据。
24
- </template>
25
- </Demo>
26
-
27
- ## API
28
-
29
- <ApiTable :data="cardListApi" componentName="card-list" />
30
-
31
- <script setup>
32
- import CardListBasic from '../examples/card-list/basic.vue'
33
- import CardListSelectionPagination from '../examples/card-list/selection-pagination.vue'
34
- import cardListApi from './meta/card-list'
35
-
36
- import basicCode from '../examples/card-list/basic.vue?raw'
37
- import selectionPaginationCode from '../examples/card-list/selection-pagination.vue?raw'
38
- </script>
1
+ # CardList 卡片列表
2
+
3
+ 用于将数据以卡片形式展示,内置图片预览、操作按钮、单选/多选与分页能力。
4
+
5
+ ## 基础使用
6
+
7
+ <Demo :source-code="basicCode">
8
+ <template #source>
9
+ <card-list-basic />
10
+ </template>
11
+ <template #description>
12
+ 通过 `dataSource` 传入数据,通过 `loadSrc` 获取图片地址,通过 `buttons` 配置卡片操作按钮。
13
+ </template>
14
+ </Demo>
15
+
16
+ ## 选择与分页
17
+
18
+ <Demo :source-code="selectionPaginationCode">
19
+ <template #source>
20
+ <card-list-selection-pagination />
21
+ </template>
22
+ <template #description>
23
+ 开启 `isRadio` 或 `isMultiSelect` 后可以进行选择,组件对外暴露 `getSelections/clearSelection` 方法;开启 `isPage` 后使用分页并监听 `loadPageData` 加载数据。
24
+ </template>
25
+ </Demo>
26
+
27
+ ## API
28
+
29
+ <ApiTable :data="cardListApi" componentName="card-list" />
30
+
31
+ <script setup>
32
+ import CardListBasic from '../examples/card-list/basic.vue'
33
+ import CardListSelectionPagination from '../examples/card-list/selection-pagination.vue'
34
+ import cardListApi from './meta/card-list'
35
+
36
+ import basicCode from '../examples/card-list/basic.vue?raw'
37
+ import selectionPaginationCode from '../examples/card-list/selection-pagination.vue?raw'
38
+ </script>