@a2simcode/ui 0.0.236 → 0.0.237

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 (356) 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 +3782 -3776
  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/cascader-select.md +114 -114
  15. package/docs/components/checkbox.md +114 -114
  16. package/docs/components/code-mirror.md +85 -85
  17. package/docs/components/collapse.md +26 -26
  18. package/docs/components/comp.md +71 -71
  19. package/docs/components/count-up.md +24 -24
  20. package/docs/components/count.md +24 -24
  21. package/docs/components/data-panel.md +24 -24
  22. package/docs/components/date.md +76 -76
  23. package/docs/components/dialog-full.md +112 -112
  24. package/docs/components/dialog.md +127 -127
  25. package/docs/components/divider.md +24 -24
  26. package/docs/components/drawer.md +127 -127
  27. package/docs/components/dynamic-layer.md +118 -118
  28. package/docs/components/echarts.md +72 -72
  29. package/docs/components/editor.md +24 -24
  30. package/docs/components/form.md +87 -87
  31. package/docs/components/guid.md +39 -39
  32. package/docs/components/hpanel.md +24 -24
  33. package/docs/components/icon.md +56 -56
  34. package/docs/components/input-button.md +24 -24
  35. package/docs/components/input-code.md +24 -24
  36. package/docs/components/input-color.md +114 -114
  37. package/docs/components/input-layer.md +56 -56
  38. package/docs/components/input-rows.md +370 -370
  39. package/docs/components/input-tag.md +50 -50
  40. package/docs/components/input.md +129 -129
  41. package/docs/components/layer-form.md +61 -61
  42. package/docs/components/layer.md +127 -127
  43. package/docs/components/layout.md +132 -132
  44. package/docs/components/map.md +24 -24
  45. package/docs/components/menu.md +121 -121
  46. package/docs/components/meta/button.ts +212 -212
  47. package/docs/components/meta/buttons.ts +76 -76
  48. package/docs/components/meta/code-mirror.ts +108 -108
  49. package/docs/components/meta/comp.ts +236 -236
  50. package/docs/components/meta/date.ts +267 -267
  51. package/docs/components/meta/echarts.ts +64 -64
  52. package/docs/components/meta/form-item.ts +50 -50
  53. package/docs/components/meta/form.ts +181 -181
  54. package/docs/components/meta/input-button.ts +165 -165
  55. package/docs/components/meta/input-cards.ts +112 -112
  56. package/docs/components/meta/input-code.ts +151 -151
  57. package/docs/components/meta/input-color.ts +243 -243
  58. package/docs/components/meta/input-layer.ts +382 -382
  59. package/docs/components/meta/input-rows.ts +119 -119
  60. package/docs/components/meta/layer-form.ts +74 -74
  61. package/docs/components/meta/map.ts +68 -68
  62. package/docs/components/meta/panel.ts +152 -152
  63. package/docs/components/meta/radio.ts +55 -55
  64. package/docs/components/meta/select.ts +279 -279
  65. package/docs/components/meta/slider.ts +270 -270
  66. package/docs/components/meta/table-panel.ts +260 -260
  67. package/docs/components/meta/table.ts +403 -403
  68. package/docs/components/meta/tabs.ts +146 -146
  69. package/docs/components/meta/title.ts +91 -91
  70. package/docs/components/meta/tree-select.ts +199 -199
  71. package/docs/components/meta/tree.ts +219 -219
  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 +282 -282
  84. package/docs/components/table.md +435 -435
  85. package/docs/components/tabs.md +26 -26
  86. package/docs/components/title.md +24 -24
  87. package/docs/components/tree.md +207 -207
  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/cascader-select/basic.vue +28 -28
  120. package/docs/examples/cascader-select/clearable.vue +34 -34
  121. package/docs/examples/cascader-select/disabled.vue +43 -43
  122. package/docs/examples/cascader-select/filterable.vue +37 -37
  123. package/docs/examples/cascader-select/methods.vue +84 -84
  124. package/docs/examples/cascader-select/multiple.vue +38 -38
  125. package/docs/examples/cascader-select/slot.vue +45 -45
  126. package/docs/examples/checkbox/basic.vue +18 -18
  127. package/docs/examples/checkbox/button.vue +19 -19
  128. package/docs/examples/checkbox/color.vue +25 -25
  129. package/docs/examples/checkbox/disabled.vue +17 -17
  130. package/docs/examples/checkbox/min-max.vue +20 -20
  131. package/docs/examples/checkbox/mixed.vue +56 -56
  132. package/docs/examples/checkbox/size.vue +28 -28
  133. package/docs/examples/code-mirror/basic.vue +11 -11
  134. package/docs/examples/code-mirror/events.vue +42 -42
  135. package/docs/examples/code-mirror/height.vue +25 -25
  136. package/docs/examples/code-mirror/mode.vue +33 -33
  137. package/docs/examples/code-mirror/readonly.vue +14 -14
  138. package/docs/examples/collapse/basic.vue +82 -82
  139. package/docs/examples/comp/basic.vue +7 -7
  140. package/docs/examples/comp/collapse.vue +38 -38
  141. package/docs/examples/comp/tabs.vue +38 -38
  142. package/docs/examples/count/basic.vue +101 -101
  143. package/docs/examples/count-up/basic.vue +89 -89
  144. package/docs/examples/data-panel/basic.vue +110 -110
  145. package/docs/examples/date/basic.vue +73 -73
  146. package/docs/examples/date/default-value.vue +59 -59
  147. package/docs/examples/date/format.vue +75 -75
  148. package/docs/examples/date/range.vue +66 -66
  149. package/docs/examples/date/types.vue +79 -79
  150. package/docs/examples/decorated-title/basic.vue +31 -31
  151. package/docs/examples/dialog/basic.vue +36 -36
  152. package/docs/examples/dialog/custom-buttons.vue +44 -44
  153. package/docs/examples/dialog/fullscreen.vue +23 -23
  154. package/docs/examples/dialog/no-mask.vue +17 -17
  155. package/docs/examples/dialog/size.vue +44 -44
  156. package/docs/examples/dialog/steps.vue +57 -57
  157. package/docs/examples/dialog-full/basic.vue +29 -29
  158. package/docs/examples/dialog-full/custom-buttons.vue +45 -45
  159. package/docs/examples/dialog-full/no-buttons.vue +18 -18
  160. package/docs/examples/dialog-full/no-header.vue +27 -27
  161. package/docs/examples/dialog-full/steps.vue +71 -71
  162. package/docs/examples/divider/basic.vue +52 -52
  163. package/docs/examples/drawer/basic.vue +35 -35
  164. package/docs/examples/drawer/custom-buttons.vue +34 -34
  165. package/docs/examples/drawer/direction.vue +47 -47
  166. package/docs/examples/drawer/mask.vue +36 -36
  167. package/docs/examples/drawer/no-buttons.vue +20 -20
  168. package/docs/examples/drawer/size.vue +28 -28
  169. package/docs/examples/dynamic-layer/basic.vue +33 -33
  170. package/docs/examples/dynamic-layer/custom-buttons.vue +43 -43
  171. package/docs/examples/dynamic-layer/form.vue +73 -73
  172. package/docs/examples/dynamic-layer/steps.vue +52 -52
  173. package/docs/examples/dynamic-layer/types.vue +40 -40
  174. package/docs/examples/echarts/basic.vue +31 -31
  175. package/docs/examples/echarts/dynamic.vue +43 -43
  176. package/docs/examples/echarts/line.vue +46 -46
  177. package/docs/examples/echarts/pie.vue +44 -44
  178. package/docs/examples/editor/basic.vue +15 -15
  179. package/docs/examples/form/basic.vue +663 -663
  180. package/docs/examples/form/init.vue +76 -76
  181. package/docs/examples/form/master-detail.vue +203 -203
  182. package/docs/examples/form/rule-format.vue +179 -179
  183. package/docs/examples/form/view-table.vue +378 -378
  184. package/docs/examples/guid/basic.vue +10 -10
  185. package/docs/examples/guid/size.vue +13 -13
  186. package/docs/examples/hpanel/basic.vue +79 -79
  187. package/docs/examples/icon/basic.vue +9 -9
  188. package/docs/examples/icon/rotate-flip.vue +9 -9
  189. package/docs/examples/icon/size.vue +7 -7
  190. package/docs/examples/input/basic.vue +10 -10
  191. package/docs/examples/input/clearable.vue +12 -12
  192. package/docs/examples/input/disabled.vue +6 -6
  193. package/docs/examples/input/icon.vue +23 -23
  194. package/docs/examples/input/password.vue +18 -18
  195. package/docs/examples/input/size.vue +13 -13
  196. package/docs/examples/input/textarea.vue +25 -25
  197. package/docs/examples/input/word-limit.vue +28 -28
  198. package/docs/examples/input-button/basic.vue +33 -33
  199. package/docs/examples/input-cards/basic.vue +79 -79
  200. package/docs/examples/input-code/basic.vue +29 -29
  201. package/docs/examples/input-color/basic.vue +10 -10
  202. package/docs/examples/input-color/disabled.vue +13 -13
  203. package/docs/examples/input-color/format.vue +17 -17
  204. package/docs/examples/input-color/no-alpha.vue +13 -13
  205. package/docs/examples/input-color/only-button.vue +15 -15
  206. package/docs/examples/input-color/predefine.vue +31 -31
  207. package/docs/examples/input-color/size.vue +15 -15
  208. package/docs/examples/input-layer/basic.vue +85 -85
  209. package/docs/examples/input-layer/render-vnode-page.vue +160 -160
  210. package/docs/examples/input-layer/render-vnode.vue +127 -127
  211. package/docs/examples/input-rows/basic.vue +73 -73
  212. package/docs/examples/input-rows/drag.vue +48 -48
  213. package/docs/examples/input-rows/layer-form.vue +85 -85
  214. package/docs/examples/input-rows/nested.vue +91 -91
  215. package/docs/examples/input-tag/basic.vue +27 -27
  216. package/docs/examples/input-tag/colors.vue +23 -23
  217. package/docs/examples/input-tag/readonly.vue +17 -17
  218. package/docs/examples/layer/basic.vue +43 -43
  219. package/docs/examples/layer/custom-buttons.vue +61 -61
  220. package/docs/examples/layer/drawer.vue +37 -37
  221. package/docs/examples/layer/full.vue +38 -38
  222. package/docs/examples/layer/modal.vue +34 -34
  223. package/docs/examples/layer/steps.vue +46 -46
  224. package/docs/examples/layer-form/basic.vue +76 -76
  225. package/docs/examples/layer-form/config.vue +82 -82
  226. package/docs/examples/layer-form/size.vue +72 -72
  227. package/docs/examples/layout/basic.vue +36 -36
  228. package/docs/examples/layout/custom-size.vue +50 -50
  229. package/docs/examples/layout/disable-move.vue +37 -37
  230. package/docs/examples/layout/hide-mid-when-narrow.vue +96 -96
  231. package/docs/examples/layout/min-size.vue +73 -73
  232. package/docs/examples/layout/percent-size.vue +80 -80
  233. package/docs/examples/layout/simple.vue +22 -22
  234. package/docs/examples/layout/top-side.vue +34 -34
  235. package/docs/examples/map/basic.vue +22 -22
  236. package/docs/examples/menu/basic.vue +58 -58
  237. package/docs/examples/menu/collapsed.vue +49 -49
  238. package/docs/examples/menu/horizontal.vue +44 -44
  239. package/docs/examples/menu/selection-test.vue +104 -104
  240. package/docs/examples/menu/theme.vue +46 -46
  241. package/docs/examples/menu/vertical.vue +46 -46
  242. package/docs/examples/number/advanced.vue +143 -143
  243. package/docs/examples/number/basic.vue +63 -63
  244. package/docs/examples/number/disabled.vue +49 -49
  245. package/docs/examples/number/size.vue +42 -42
  246. package/docs/examples/number/slots.vue +123 -123
  247. package/docs/examples/number/step-strictly.vue +41 -41
  248. package/docs/examples/number/step.vue +47 -47
  249. package/docs/examples/page/basic.vue +41 -41
  250. package/docs/examples/page/code-table-model.vue +428 -428
  251. package/docs/examples/page/dept-user-management.vue +211 -211
  252. package/docs/examples/page/init.vue +87 -87
  253. package/docs/examples/page/log.vue +453 -453
  254. package/docs/examples/page/user-management.vue +313 -313
  255. package/docs/examples/panel/tool-buttons.vue +18 -18
  256. package/docs/examples/radio/basic.vue +17 -17
  257. package/docs/examples/radio/button.vue +17 -17
  258. package/docs/examples/radio/color.vue +18 -18
  259. package/docs/examples/radio/disabled.vue +17 -17
  260. package/docs/examples/radio/size.vue +29 -29
  261. package/docs/examples/rate/basic.vue +24 -24
  262. package/docs/examples/rate/half.vue +24 -24
  263. package/docs/examples/rate/readonly.vue +11 -11
  264. package/docs/examples/rate/text.vue +37 -37
  265. package/docs/examples/select/basic.vue +16 -16
  266. package/docs/examples/select/clearable.vue +22 -22
  267. package/docs/examples/select/disabled.vue +31 -31
  268. package/docs/examples/select/filterable.vue +24 -24
  269. package/docs/examples/select/group.vue +23 -23
  270. package/docs/examples/select/icon.vue +16 -16
  271. package/docs/examples/select/multiple.vue +18 -18
  272. package/docs/examples/select/size.vue +39 -39
  273. package/docs/examples/slider/basic.vue +42 -42
  274. package/docs/examples/slider/disabled.vue +17 -17
  275. package/docs/examples/slider/marks.vue +30 -30
  276. package/docs/examples/slider/size.vue +37 -37
  277. package/docs/examples/slider/tooltip.vue +36 -36
  278. package/docs/examples/slider/vertical.vue +26 -26
  279. package/docs/examples/slider-captcha/basic.vue +44 -44
  280. package/docs/examples/slider-captcha/custom.vue +48 -48
  281. package/docs/examples/switch/basic.vue +16 -16
  282. package/docs/examples/switch/disabled.vue +13 -13
  283. package/docs/examples/switch/loading.vue +13 -13
  284. package/docs/examples/switch/size.vue +15 -15
  285. package/docs/examples/switch/text.vue +13 -13
  286. package/docs/examples/table/action-filter.vue +126 -126
  287. package/docs/examples/table/actions.vue +116 -116
  288. package/docs/examples/table/add-row.vue +103 -103
  289. package/docs/examples/table/basic.vue +168 -168
  290. package/docs/examples/table/checkbox-layout.vue +68 -68
  291. package/docs/examples/table/custom-layout.vue +115 -115
  292. package/docs/examples/table/dynamic-type.vue +73 -73
  293. package/docs/examples/table/editable.vue +262 -262
  294. package/docs/examples/table/field-selection.vue +87 -87
  295. package/docs/examples/table/frozen-column.vue +140 -140
  296. package/docs/examples/table/height-mode.vue +99 -99
  297. package/docs/examples/table/icon.vue +85 -85
  298. package/docs/examples/table/layer-form.vue +133 -133
  299. package/docs/examples/table/link.vue +66 -66
  300. package/docs/examples/table/multiple-disabled.vue +112 -112
  301. package/docs/examples/table/multiple.vue +188 -188
  302. package/docs/examples/table/pagination.vue +151 -151
  303. package/docs/examples/table/row-drag.vue +67 -67
  304. package/docs/examples/table/single-selection.vue +64 -64
  305. package/docs/examples/table/sub-table-lazy.vue +97 -97
  306. package/docs/examples/table/sub-table.vue +103 -103
  307. package/docs/examples/table/tag.vue +43 -43
  308. package/docs/examples/table/tree-column.vue +119 -119
  309. package/docs/examples/table/tree-data.vue +141 -141
  310. package/docs/examples/table/tree-default-expand-all.vue +60 -60
  311. package/docs/examples/table/tree-lazy.vue +80 -80
  312. package/docs/examples/table/tree-set-selection.vue +75 -75
  313. package/docs/examples/table-panel/basic.vue +229 -229
  314. package/docs/examples/table-panel/batch-operations.vue +286 -286
  315. package/docs/examples/table-panel/button-visibility.vue +88 -88
  316. package/docs/examples/table-panel/filter.vue +219 -219
  317. package/docs/examples/table-panel/get-selection.vue +111 -111
  318. package/docs/examples/table-panel/mask.vue +151 -151
  319. package/docs/examples/table-panel/model-value.vue +87 -87
  320. package/docs/examples/table-panel/multiple-selection.vue +243 -243
  321. package/docs/examples/table-panel/pagination.vue +133 -133
  322. package/docs/examples/table-panel/search-list.vue +207 -207
  323. package/docs/examples/table-panel/sub-table-lazy.vue +118 -118
  324. package/docs/examples/table-panel/tree-parent-key.vue +67 -67
  325. package/docs/examples/tabs/basic.vue +98 -98
  326. package/docs/examples/time/base.vue +67 -67
  327. package/docs/examples/title/basic.vue +87 -87
  328. package/docs/examples/tree/accordion.vue +46 -46
  329. package/docs/examples/tree/basic.vue +50 -50
  330. package/docs/examples/tree/buttons.vue +53 -53
  331. package/docs/examples/tree/checkable.vue +52 -52
  332. package/docs/examples/tree/custom-keys.vue +39 -39
  333. package/docs/examples/tree/default-expanded.vue +52 -52
  334. package/docs/examples/tree/draggable.vue +29 -29
  335. package/docs/examples/tree/expand-on-click.vue +39 -39
  336. package/docs/examples/tree/flat-data.vue +20 -20
  337. package/docs/examples/tree/icon.vue +40 -40
  338. package/docs/examples/tree/load-data.vue +37 -37
  339. package/docs/examples/tree/methods.vue +74 -74
  340. package/docs/examples/tree/theme.vue +33 -33
  341. package/docs/examples/tree-select/basic.vue +47 -47
  342. package/docs/examples/upload/accept.vue +31 -31
  343. package/docs/examples/upload/basic.vue +12 -12
  344. package/docs/examples/upload/drag.vue +11 -11
  345. package/docs/examples/upload/image.vue +17 -17
  346. package/docs/examples/upload/limit.vue +20 -20
  347. package/docs/examples/upload/multiple.vue +17 -17
  348. package/docs/examples/upload/readonly.vue +17 -17
  349. package/docs/examples/utils/cipher.vue +160 -160
  350. package/docs/examples/utils/common.vue +153 -153
  351. package/docs/examples/utils/date.vue +56 -56
  352. package/docs/examples/utils/dom.vue +52 -52
  353. package/docs/examples/utils/is.vue +70 -70
  354. package/docs/examples/workflow/basic.vue +265 -265
  355. package/docs/examples/workflow-viewer/basic.vue +248 -248
  356. package/package.json +23 -23
@@ -1,6 +1,6 @@
1
- <template>
2
- <div style="display: flex; gap: 8px; flex-wrap: wrap">
3
- <j-button loading type="primary" label="Loading" />
4
- <j-button :loading="{ delay: 500 }" type="primary" label="Delay 500ms" />
5
- </div>
6
- </template>
1
+ <template>
2
+ <div style="display: flex; gap: 8px; flex-wrap: wrap">
3
+ <j-button loading type="primary" label="Loading" />
4
+ <j-button :loading="{ delay: 500 }" type="primary" label="Delay 500ms" />
5
+ </div>
6
+ </template>
@@ -1,7 +1,7 @@
1
- <template>
2
- <div style="display: flex; gap: 8px; flex-wrap: wrap">
3
- <j-button type="primary" label="Default" />
4
- <j-button shape="round" type="primary" label="Round" />
5
- <j-button shape="circle" type="primary" icon="mdi:search" not-label />
6
- </div>
7
- </template>
1
+ <template>
2
+ <div style="display: flex; gap: 8px; flex-wrap: wrap">
3
+ <j-button type="primary" label="Default" />
4
+ <j-button shape="round" type="primary" label="Round" />
5
+ <j-button shape="circle" type="primary" icon="mdi:search" not-label />
6
+ </div>
7
+ </template>
@@ -1,14 +1,14 @@
1
- <template>
2
- <div style="display: flex; flex-direction: column; gap: 16px">
3
- <div style="display: flex; gap: 8px; align-items: center">
4
- <j-button size="large" type="primary" label="Large" />
5
- <j-button size="default" type="primary" label="Default" />
6
- <j-button size="small" type="primary" label="Small" />
7
- </div>
8
- <div style="display: flex; gap: 8px; align-items: center">
9
- <j-button size="large" label="Large" />
10
- <j-button size="default" label="Default" />
11
- <j-button size="small" label="Small" />
12
- </div>
13
- </div>
14
- </template>
1
+ <template>
2
+ <div style="display: flex; flex-direction: column; gap: 16px">
3
+ <div style="display: flex; gap: 8px; align-items: center">
4
+ <j-button size="large" type="primary" label="Large" />
5
+ <j-button size="default" type="primary" label="Default" />
6
+ <j-button size="small" type="primary" label="Small" />
7
+ </div>
8
+ <div style="display: flex; gap: 8px; align-items: center">
9
+ <j-button size="large" label="Large" />
10
+ <j-button size="default" label="Default" />
11
+ <j-button size="small" label="Small" />
12
+ </div>
13
+ </div>
14
+ </template>
@@ -1,34 +1,34 @@
1
- <template>
2
- <div style="display: flex; flex-direction: column; gap: 12px">
3
- <div style="display: flex; gap: 8px; flex-wrap: wrap">
4
- <j-button status="success" label="Success" />
5
- <j-button status="warning" label="Warning" />
6
- <j-button status="danger" label="Danger" />
7
- </div>
8
- <div style="display: flex; gap: 8px; flex-wrap: wrap">
9
- <j-button type="primary" status="success" label="Primary Success" />
10
- <j-button type="primary" status="warning" label="Primary Warning" />
11
- <j-button type="primary" status="danger" label="Primary Danger" />
12
- </div>
13
- <div style="display: flex; gap: 8px; flex-wrap: wrap">
14
- <j-button type="dashed" status="success" label="Dashed Success" />
15
- <j-button type="dashed" status="warning" label="Dashed Warning" />
16
- <j-button type="dashed" status="danger" label="Dashed Danger" />
17
- </div>
18
- <div style="display: flex; gap: 8px; flex-wrap: wrap">
19
- <j-button type="text" status="success" label="Text Success" />
20
- <j-button type="text" status="warning" label="Text Warning" />
21
- <j-button type="text" status="danger" label="Text Danger" />
22
- </div>
23
- <div style="display: flex; gap: 8px; flex-wrap: wrap">
24
- <j-button type="link" status="success" label="Link Success" />
25
- <j-button type="link" status="warning" label="Link Warning" />
26
- <j-button type="link" status="danger" label="Link Danger" />
27
- </div>
28
- <div style="display: flex; gap: 8px; flex-wrap: wrap">
29
- <j-button type="outline" status="success" label="Outline Success" />
30
- <j-button type="outline" status="warning" label="Outline Warning" />
31
- <j-button type="outline" status="danger" label="Outline Danger" />
32
- </div>
33
- </div>
34
- </template>
1
+ <template>
2
+ <div style="display: flex; flex-direction: column; gap: 12px">
3
+ <div style="display: flex; gap: 8px; flex-wrap: wrap">
4
+ <j-button status="success" label="Success" />
5
+ <j-button status="warning" label="Warning" />
6
+ <j-button status="danger" label="Danger" />
7
+ </div>
8
+ <div style="display: flex; gap: 8px; flex-wrap: wrap">
9
+ <j-button type="primary" status="success" label="Primary Success" />
10
+ <j-button type="primary" status="warning" label="Primary Warning" />
11
+ <j-button type="primary" status="danger" label="Primary Danger" />
12
+ </div>
13
+ <div style="display: flex; gap: 8px; flex-wrap: wrap">
14
+ <j-button type="dashed" status="success" label="Dashed Success" />
15
+ <j-button type="dashed" status="warning" label="Dashed Warning" />
16
+ <j-button type="dashed" status="danger" label="Dashed Danger" />
17
+ </div>
18
+ <div style="display: flex; gap: 8px; flex-wrap: wrap">
19
+ <j-button type="text" status="success" label="Text Success" />
20
+ <j-button type="text" status="warning" label="Text Warning" />
21
+ <j-button type="text" status="danger" label="Text Danger" />
22
+ </div>
23
+ <div style="display: flex; gap: 8px; flex-wrap: wrap">
24
+ <j-button type="link" status="success" label="Link Success" />
25
+ <j-button type="link" status="warning" label="Link Warning" />
26
+ <j-button type="link" status="danger" label="Link Danger" />
27
+ </div>
28
+ <div style="display: flex; gap: 8px; flex-wrap: wrap">
29
+ <j-button type="outline" status="success" label="Outline Success" />
30
+ <j-button type="outline" status="warning" label="Outline Warning" />
31
+ <j-button type="outline" status="danger" label="Outline Danger" />
32
+ </div>
33
+ </div>
34
+ </template>
@@ -1,10 +1,10 @@
1
- <template>
2
- <div style="display: flex; gap: 8px; flex-wrap: wrap">
3
- <j-button type="primary" label="Primary Button" />
4
- <j-button label="Default Button" />
5
- <j-button type="dashed" label="Dashed Button" />
6
- <j-button type="text" label="Text Button" />
7
- <j-button type="link" label="Link Button" />
8
- <j-button type="outline" label="Outline Button" />
9
- </div>
10
- </template>
1
+ <template>
2
+ <div style="display: flex; gap: 8px; flex-wrap: wrap">
3
+ <j-button type="primary" label="Primary Button" />
4
+ <j-button label="Default Button" />
5
+ <j-button type="dashed" label="Dashed Button" />
6
+ <j-button type="text" label="Text Button" />
7
+ <j-button type="link" label="Link Button" />
8
+ <j-button type="outline" label="Outline Button" />
9
+ </div>
10
+ </template>
@@ -1,19 +1,19 @@
1
- <template>
2
- <div>
3
- <j-button-select v-model="value" :options="options" />
4
- <div style="margin-top: 12px">选中: {{ value }}</div>
5
- </div>
6
- </template>
7
-
8
- <script setup lang="ts">
9
- import { ref } from 'vue'
10
-
11
- const value = ref('')
12
-
13
- const options = [
14
- { label: '新增', value: 'add', icon: 'material-symbols-light:add' },
15
- { label: '导出', value: 'export', icon: 'material-symbols-light:download' },
16
- { label: '导入', value: 'import', icon: 'material-symbols-light:upload' },
17
- { label: '刷新', value: 'refresh', icon: 'material-symbols-light:refresh' },
18
- ]
19
- </script>
1
+ <template>
2
+ <div>
3
+ <j-button-select v-model="value" :options="options" />
4
+ <div style="margin-top: 12px">选中: {{ value }}</div>
5
+ </div>
6
+ </template>
7
+
8
+ <script setup lang="ts">
9
+ import { ref } from 'vue'
10
+
11
+ const value = ref('')
12
+
13
+ const options = [
14
+ { label: '新增', value: 'add', icon: 'material-symbols-light:add' },
15
+ { label: '导出', value: 'export', icon: 'material-symbols-light:download' },
16
+ { label: '导入', value: 'import', icon: 'material-symbols-light:upload' },
17
+ { label: '刷新', value: 'refresh', icon: 'material-symbols-light:refresh' },
18
+ ]
19
+ </script>
@@ -1,62 +1,62 @@
1
- <template>
2
- <div>
3
- <j-buttons :list="buttonList" />
4
- </div>
5
- </template>
6
-
7
- <script setup lang="ts">
8
- import { ref } from 'vue'
9
- import { ElMessage } from 'element-plus'
10
-
11
- const buttonList = ref([
12
- {
13
- id: 'add',
14
- label: '新增',
15
- config: {
16
- type: 'primary',
17
- icon: 'material-symbols-light:add',
18
- },
19
- click: () => {
20
- ElMessage.success('点击了新增按钮')
21
- },
22
- },
23
- {
24
- id: 'edit',
25
- label: '编辑',
26
- config: {
27
- icon: 'material-symbols-light:edit-outline',
28
- },
29
- click: () => {
30
- ElMessage.info('点击了编辑按钮')
31
- },
32
- },
33
- {
34
- id: 'delete',
35
- label: '删除',
36
- config: {
37
- status: 'danger',
38
- icon: 'material-symbols-light:delete-outline',
39
- },
40
- click: () => {
41
- ElMessage.warning('点击了删除按钮')
42
- },
43
- },
44
- {
45
- id: 'upload',
46
- label: '上传',
47
- config: {
48
- action: 'upload',
49
- type: 'primary',
50
- icon: 'material-symbols-light:upload-file',
51
- uploadAccept: 'image/*',
52
- uploadCallback: (data: any) => {
53
- console.log(data)
54
- return true // 上传的网络请求返回 true 表示上传成功
55
- },
56
- uploadSuccess: () => {
57
- console.log('上传成功')
58
- },
59
- },
60
- },
61
- ])
62
- </script>
1
+ <template>
2
+ <div>
3
+ <j-buttons :list="buttonList" />
4
+ </div>
5
+ </template>
6
+
7
+ <script setup lang="ts">
8
+ import { ref } from 'vue'
9
+ import { ElMessage } from 'element-plus'
10
+
11
+ const buttonList = ref([
12
+ {
13
+ id: 'add',
14
+ label: '新增',
15
+ config: {
16
+ type: 'primary',
17
+ icon: 'material-symbols-light:add',
18
+ },
19
+ click: () => {
20
+ ElMessage.success('点击了新增按钮')
21
+ },
22
+ },
23
+ {
24
+ id: 'edit',
25
+ label: '编辑',
26
+ config: {
27
+ icon: 'material-symbols-light:edit-outline',
28
+ },
29
+ click: () => {
30
+ ElMessage.info('点击了编辑按钮')
31
+ },
32
+ },
33
+ {
34
+ id: 'delete',
35
+ label: '删除',
36
+ config: {
37
+ status: 'danger',
38
+ icon: 'material-symbols-light:delete-outline',
39
+ },
40
+ click: () => {
41
+ ElMessage.warning('点击了删除按钮')
42
+ },
43
+ },
44
+ {
45
+ id: 'upload',
46
+ label: '上传',
47
+ config: {
48
+ action: 'upload',
49
+ type: 'primary',
50
+ icon: 'material-symbols-light:upload-file',
51
+ uploadAccept: 'image/*',
52
+ uploadCallback: (data: any) => {
53
+ console.log(data)
54
+ return true // 上传的网络请求返回 true 表示上传成功
55
+ },
56
+ uploadSuccess: () => {
57
+ console.log('上传成功')
58
+ },
59
+ },
60
+ },
61
+ ])
62
+ </script>
@@ -1,36 +1,36 @@
1
- <template>
2
- <div>
3
- <j-buttons :list="buttonList" />
4
- </div>
5
- </template>
6
-
7
- <script setup lang="ts">
8
- import { ref } from 'vue'
9
-
10
- const buttonList = ref([
11
- {
12
- id: 'add',
13
- label: '新增',
14
- config: {
15
- type: 'primary',
16
- icon: 'material-symbols-light:add',
17
- },
18
- },
19
- {
20
- id: 'edit',
21
- label: '编辑(禁用)',
22
- config: {
23
- icon: 'material-symbols-light:edit-outline',
24
- disabled: true,
25
- },
26
- },
27
- {
28
- id: 'delete',
29
- label: '删除',
30
- config: {
31
- status: 'danger',
32
- icon: 'material-symbols-light:delete-outline',
33
- },
34
- },
35
- ])
36
- </script>
1
+ <template>
2
+ <div>
3
+ <j-buttons :list="buttonList" />
4
+ </div>
5
+ </template>
6
+
7
+ <script setup lang="ts">
8
+ import { ref } from 'vue'
9
+
10
+ const buttonList = ref([
11
+ {
12
+ id: 'add',
13
+ label: '新增',
14
+ config: {
15
+ type: 'primary',
16
+ icon: 'material-symbols-light:add',
17
+ },
18
+ },
19
+ {
20
+ id: 'edit',
21
+ label: '编辑(禁用)',
22
+ config: {
23
+ icon: 'material-symbols-light:edit-outline',
24
+ disabled: true,
25
+ },
26
+ },
27
+ {
28
+ id: 'delete',
29
+ label: '删除',
30
+ config: {
31
+ status: 'danger',
32
+ icon: 'material-symbols-light:delete-outline',
33
+ },
34
+ },
35
+ ])
36
+ </script>
@@ -1,63 +1,63 @@
1
- <template>
2
- <div>
3
- <j-buttons :list="buttonList" />
4
- </div>
5
- </template>
6
-
7
- <script setup lang="ts">
8
- import { ref } from 'vue'
9
- import { ElMessage } from 'element-plus'
10
-
11
- const buttonList = ref([
12
- {
13
- id: 'add',
14
- label: '新增',
15
- config: {
16
- type: 'primary',
17
- icon: 'material-symbols-light:add',
18
- },
19
- click: () => {
20
- ElMessage.success('点击了新增按钮')
21
- },
22
- },
23
- {
24
- id: 'more',
25
- label: '更多操作',
26
- config: {
27
- icon: 'material-symbols-light:more-horiz',
28
- },
29
- children: [
30
- {
31
- id: 'export',
32
- label: '导出123132',
33
- config: {
34
- icon: 'material-symbols-light:download',
35
- },
36
- click: () => {
37
- ElMessage.info('点击了导出')
38
- },
39
- },
40
- {
41
- id: 'import',
42
- label: '导入',
43
- config: {
44
- icon: 'material-symbols-light:upload',
45
- },
46
- click: () => {
47
- ElMessage.info('点击了导入')
48
- },
49
- },
50
- {
51
- id: 'refresh',
52
- label: '刷新',
53
- config: {
54
- icon: 'material-symbols-light:refresh',
55
- },
56
- click: () => {
57
- ElMessage.info('点击了刷新')
58
- },
59
- },
60
- ],
61
- },
62
- ])
63
- </script>
1
+ <template>
2
+ <div>
3
+ <j-buttons :list="buttonList" />
4
+ </div>
5
+ </template>
6
+
7
+ <script setup lang="ts">
8
+ import { ref } from 'vue'
9
+ import { ElMessage } from 'element-plus'
10
+
11
+ const buttonList = ref([
12
+ {
13
+ id: 'add',
14
+ label: '新增',
15
+ config: {
16
+ type: 'primary',
17
+ icon: 'material-symbols-light:add',
18
+ },
19
+ click: () => {
20
+ ElMessage.success('点击了新增按钮')
21
+ },
22
+ },
23
+ {
24
+ id: 'more',
25
+ label: '更多操作',
26
+ config: {
27
+ icon: 'material-symbols-light:more-horiz',
28
+ },
29
+ children: [
30
+ {
31
+ id: 'export',
32
+ label: '导出123132',
33
+ config: {
34
+ icon: 'material-symbols-light:download',
35
+ },
36
+ click: () => {
37
+ ElMessage.info('点击了导出')
38
+ },
39
+ },
40
+ {
41
+ id: 'import',
42
+ label: '导入',
43
+ config: {
44
+ icon: 'material-symbols-light:upload',
45
+ },
46
+ click: () => {
47
+ ElMessage.info('点击了导入')
48
+ },
49
+ },
50
+ {
51
+ id: 'refresh',
52
+ label: '刷新',
53
+ config: {
54
+ icon: 'material-symbols-light:refresh',
55
+ },
56
+ click: () => {
57
+ ElMessage.info('点击了刷新')
58
+ },
59
+ },
60
+ ],
61
+ },
62
+ ])
63
+ </script>
@@ -1,52 +1,52 @@
1
- <template>
2
- <div style="display: flex; flex-direction: column; gap: 16px">
3
- <j-buttons :list="buttonList" />
4
- <div style="color: #666; font-size: 14px">通过设置不同的 groupId,按钮会自动分组显示</div>
5
- </div>
6
- </template>
7
-
8
- <script setup lang="ts">
9
- import { ref } from 'vue'
10
- import { ElMessage } from 'element-plus'
11
-
12
- const buttonList = ref([
13
- {
14
- id: 'add',
15
- label: '新增',
16
- config: {
17
- type: 'primary',
18
- },
19
- groupId: 'group1',
20
- click: () => {
21
- ElMessage.success('分组1:新增')
22
- },
23
- },
24
- {
25
- id: 'edit',
26
- label: '编辑',
27
- groupId: 'group1',
28
- click: () => {
29
- ElMessage.info('分组1:编辑')
30
- },
31
- },
32
- {
33
- id: 'delete',
34
- label: '删除',
35
- config: {
36
- status: 'danger',
37
- },
38
- groupId: 'group2',
39
- click: () => {
40
- ElMessage.warning('分组2:删除')
41
- },
42
- },
43
- {
44
- id: 'export',
45
- label: '导出',
46
- groupId: 'group2',
47
- click: () => {
48
- ElMessage.info('分组2:导出')
49
- },
50
- },
51
- ])
52
- </script>
1
+ <template>
2
+ <div style="display: flex; flex-direction: column; gap: 16px">
3
+ <j-buttons :list="buttonList" />
4
+ <div style="color: #666; font-size: 14px">通过设置不同的 groupId,按钮会自动分组显示</div>
5
+ </div>
6
+ </template>
7
+
8
+ <script setup lang="ts">
9
+ import { ref } from 'vue'
10
+ import { ElMessage } from 'element-plus'
11
+
12
+ const buttonList = ref([
13
+ {
14
+ id: 'add',
15
+ label: '新增',
16
+ config: {
17
+ type: 'primary',
18
+ },
19
+ groupId: 'group1',
20
+ click: () => {
21
+ ElMessage.success('分组1:新增')
22
+ },
23
+ },
24
+ {
25
+ id: 'edit',
26
+ label: '编辑',
27
+ groupId: 'group1',
28
+ click: () => {
29
+ ElMessage.info('分组1:编辑')
30
+ },
31
+ },
32
+ {
33
+ id: 'delete',
34
+ label: '删除',
35
+ config: {
36
+ status: 'danger',
37
+ },
38
+ groupId: 'group2',
39
+ click: () => {
40
+ ElMessage.warning('分组2:删除')
41
+ },
42
+ },
43
+ {
44
+ id: 'export',
45
+ label: '导出',
46
+ groupId: 'group2',
47
+ click: () => {
48
+ ElMessage.info('分组2:导出')
49
+ },
50
+ },
51
+ ])
52
+ </script>