@a2simcode/ui 0.0.317 → 0.0.319

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 (382) 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/components/menu/index.d.ts +15 -0
  6. package/dist/components/menu/src/hmenu/index.vue.d.ts +15 -0
  7. package/dist/components/menu/src/imenu/index.vue.d.ts +15 -0
  8. package/dist/components/menu/src/menu-item/index.vue.d.ts +15 -0
  9. package/dist/components/menu/src/menu.vue.d.ts +15 -0
  10. package/dist/components/menu/src/sub-menu/index.vue.d.ts +17 -1
  11. package/dist/components/menu/src/vmenu/index.vue.d.ts +15 -0
  12. package/dist/simcode-ui.es.js +2301 -2246
  13. package/dist/simcode-ui.umd.js +2 -2
  14. package/dist/stats.html +1 -1
  15. package/dist/ui.css +1 -1
  16. package/docs/components/autocomplete.md +89 -89
  17. package/docs/components/barcode.md +101 -101
  18. package/docs/components/button-select.md +24 -24
  19. package/docs/components/button.md +117 -117
  20. package/docs/components/buttons.md +119 -119
  21. package/docs/components/card-list.md +38 -38
  22. package/docs/components/cascader-select.md +114 -114
  23. package/docs/components/checkbox.md +114 -114
  24. package/docs/components/code-mirror.md +85 -85
  25. package/docs/components/collapse.md +26 -26
  26. package/docs/components/comp.md +106 -106
  27. package/docs/components/count-up.md +24 -24
  28. package/docs/components/count.md +24 -24
  29. package/docs/components/data-panel.md +24 -24
  30. package/docs/components/date.md +76 -76
  31. package/docs/components/dialog-full.md +112 -112
  32. package/docs/components/dialog.md +127 -127
  33. package/docs/components/divider.md +24 -24
  34. package/docs/components/drawer.md +127 -127
  35. package/docs/components/dynamic-layer.md +118 -118
  36. package/docs/components/echarts.md +72 -72
  37. package/docs/components/editor.md +24 -24
  38. package/docs/components/form.md +87 -87
  39. package/docs/components/guid.md +39 -39
  40. package/docs/components/hpanel.md +24 -24
  41. package/docs/components/icon.md +56 -56
  42. package/docs/components/input-button.md +24 -24
  43. package/docs/components/input-code.md +24 -24
  44. package/docs/components/input-color.md +114 -114
  45. package/docs/components/input-layer.md +56 -56
  46. package/docs/components/input-rows.md +370 -370
  47. package/docs/components/input-tag.md +50 -50
  48. package/docs/components/input.md +129 -129
  49. package/docs/components/layer-form.md +61 -61
  50. package/docs/components/layer.md +127 -127
  51. package/docs/components/layout.md +132 -132
  52. package/docs/components/map.md +24 -24
  53. package/docs/components/menu.md +121 -121
  54. package/docs/components/meta/button.ts +212 -212
  55. package/docs/components/meta/buttons.ts +81 -81
  56. package/docs/components/meta/card-list.ts +210 -210
  57. package/docs/components/meta/code-mirror.ts +108 -108
  58. package/docs/components/meta/comp.ts +235 -235
  59. package/docs/components/meta/date.ts +277 -277
  60. package/docs/components/meta/echarts.ts +64 -64
  61. package/docs/components/meta/form-item.ts +62 -62
  62. package/docs/components/meta/form.ts +181 -181
  63. package/docs/components/meta/input-button.ts +175 -175
  64. package/docs/components/meta/input-cards.ts +112 -112
  65. package/docs/components/meta/input-code.ts +161 -161
  66. package/docs/components/meta/input-color.ts +243 -243
  67. package/docs/components/meta/input-rows.ts +119 -119
  68. package/docs/components/meta/layer-form.ts +74 -74
  69. package/docs/components/meta/map.ts +68 -68
  70. package/docs/components/meta/menu.ts +6 -0
  71. package/docs/components/meta/panel.ts +152 -152
  72. package/docs/components/meta/radio.ts +55 -55
  73. package/docs/components/meta/select.ts +289 -289
  74. package/docs/components/meta/slider.ts +270 -270
  75. package/docs/components/meta/table-panel.ts +343 -343
  76. package/docs/components/meta/table.ts +495 -495
  77. package/docs/components/meta/tabs.ts +146 -146
  78. package/docs/components/meta/title.ts +91 -91
  79. package/docs/components/meta/tree-select.ts +220 -220
  80. package/docs/components/meta/tree.ts +225 -225
  81. package/docs/components/meta/vpanel.ts +19 -19
  82. package/docs/components/meta/workflow-viewer.ts +55 -55
  83. package/docs/components/number.md +124 -124
  84. package/docs/components/page.md +102 -102
  85. package/docs/components/panel.md +37 -37
  86. package/docs/components/radio.md +87 -87
  87. package/docs/components/rate.md +71 -71
  88. package/docs/components/select.md +149 -149
  89. package/docs/components/slider-captcha.md +41 -41
  90. package/docs/components/slider.md +101 -101
  91. package/docs/components/switch.md +90 -90
  92. package/docs/components/table-panel.md +342 -342
  93. package/docs/components/table.md +526 -526
  94. package/docs/components/tabs.md +26 -26
  95. package/docs/components/title.md +24 -24
  96. package/docs/components/tree.md +222 -222
  97. package/docs/components/upload.md +117 -117
  98. package/docs/components/workflow-viewer.md +21 -21
  99. package/docs/components/workflow.md +21 -21
  100. package/docs/examples/autocomplete/advanced.vue +35 -35
  101. package/docs/examples/autocomplete/basic.vue +32 -32
  102. package/docs/examples/autocomplete/clearable.vue +33 -33
  103. package/docs/examples/autocomplete/custom-template.vue +49 -49
  104. package/docs/examples/autocomplete/disabled.vue +33 -33
  105. package/docs/examples/autocomplete/icon.vue +37 -37
  106. package/docs/examples/barcode/all-types.vue +380 -380
  107. package/docs/examples/barcode/basic.vue +14 -14
  108. package/docs/examples/barcode/props-appearance.vue +243 -243
  109. package/docs/examples/barcode/props-geometry.vue +143 -143
  110. package/docs/examples/barcode/props-logic.vue +216 -216
  111. package/docs/examples/barcode/props-symbology.vue +199 -199
  112. package/docs/examples/barcode/props-text.vue +268 -268
  113. package/docs/examples/button/basic.vue +7 -7
  114. package/docs/examples/button/disabled.vue +42 -42
  115. package/docs/examples/button/loading.vue +6 -6
  116. package/docs/examples/button/shape.vue +7 -7
  117. package/docs/examples/button/size.vue +14 -14
  118. package/docs/examples/button/status.vue +34 -34
  119. package/docs/examples/button/type.vue +10 -10
  120. package/docs/examples/button-select/basic.vue +19 -19
  121. package/docs/examples/buttons/basic.vue +62 -62
  122. package/docs/examples/buttons/disabled.vue +36 -36
  123. package/docs/examples/buttons/dropdown.vue +63 -63
  124. package/docs/examples/buttons/group.vue +52 -52
  125. package/docs/examples/buttons/link.vue +47 -47
  126. package/docs/examples/buttons/popup.vue +39 -39
  127. package/docs/examples/buttons/size.vue +45 -45
  128. package/docs/examples/card-list/basic.vue +70 -70
  129. package/docs/examples/card-list/selection-pagination.vue +69 -69
  130. package/docs/examples/cascader-select/basic.vue +28 -28
  131. package/docs/examples/cascader-select/clearable.vue +34 -34
  132. package/docs/examples/cascader-select/disabled.vue +43 -43
  133. package/docs/examples/cascader-select/filterable.vue +37 -37
  134. package/docs/examples/cascader-select/methods.vue +84 -84
  135. package/docs/examples/cascader-select/multiple.vue +38 -38
  136. package/docs/examples/cascader-select/slot.vue +45 -45
  137. package/docs/examples/checkbox/basic.vue +18 -18
  138. package/docs/examples/checkbox/button.vue +19 -19
  139. package/docs/examples/checkbox/color.vue +25 -25
  140. package/docs/examples/checkbox/disabled.vue +17 -17
  141. package/docs/examples/checkbox/min-max.vue +20 -20
  142. package/docs/examples/checkbox/mixed.vue +56 -56
  143. package/docs/examples/checkbox/size.vue +28 -28
  144. package/docs/examples/code-mirror/basic.vue +11 -11
  145. package/docs/examples/code-mirror/events.vue +42 -42
  146. package/docs/examples/code-mirror/height.vue +25 -25
  147. package/docs/examples/code-mirror/mode.vue +33 -33
  148. package/docs/examples/code-mirror/readonly.vue +14 -14
  149. package/docs/examples/collapse/basic.vue +82 -82
  150. package/docs/examples/comp/basic.vue +7 -7
  151. package/docs/examples/comp/collapse.vue +38 -38
  152. package/docs/examples/comp/table-merge-rows.vue +77 -77
  153. package/docs/examples/comp/table-row-fixed-merge.vue +105 -105
  154. package/docs/examples/comp/tabs.vue +38 -38
  155. package/docs/examples/count/basic.vue +101 -101
  156. package/docs/examples/count-up/basic.vue +89 -89
  157. package/docs/examples/data-panel/basic.vue +110 -110
  158. package/docs/examples/date/basic.vue +73 -73
  159. package/docs/examples/date/default-value.vue +59 -59
  160. package/docs/examples/date/format.vue +75 -75
  161. package/docs/examples/date/range.vue +66 -66
  162. package/docs/examples/date/types.vue +79 -79
  163. package/docs/examples/decorated-title/basic.vue +31 -31
  164. package/docs/examples/dialog/basic.vue +36 -36
  165. package/docs/examples/dialog/custom-buttons.vue +44 -44
  166. package/docs/examples/dialog/fullscreen.vue +23 -23
  167. package/docs/examples/dialog/no-mask.vue +17 -17
  168. package/docs/examples/dialog/size.vue +44 -44
  169. package/docs/examples/dialog/steps.vue +57 -57
  170. package/docs/examples/dialog-full/basic.vue +29 -29
  171. package/docs/examples/dialog-full/custom-buttons.vue +45 -45
  172. package/docs/examples/dialog-full/no-buttons.vue +18 -18
  173. package/docs/examples/dialog-full/no-header.vue +27 -27
  174. package/docs/examples/dialog-full/steps.vue +71 -71
  175. package/docs/examples/divider/basic.vue +52 -52
  176. package/docs/examples/drawer/basic.vue +35 -35
  177. package/docs/examples/drawer/custom-buttons.vue +34 -34
  178. package/docs/examples/drawer/direction.vue +47 -47
  179. package/docs/examples/drawer/mask.vue +36 -36
  180. package/docs/examples/drawer/no-buttons.vue +20 -20
  181. package/docs/examples/drawer/size.vue +28 -28
  182. package/docs/examples/dynamic-layer/basic.vue +33 -33
  183. package/docs/examples/dynamic-layer/custom-buttons.vue +43 -43
  184. package/docs/examples/dynamic-layer/form.vue +73 -73
  185. package/docs/examples/dynamic-layer/steps.vue +52 -52
  186. package/docs/examples/dynamic-layer/types.vue +40 -40
  187. package/docs/examples/echarts/basic.vue +31 -31
  188. package/docs/examples/echarts/dynamic.vue +43 -43
  189. package/docs/examples/echarts/line.vue +46 -46
  190. package/docs/examples/echarts/pie.vue +44 -44
  191. package/docs/examples/editor/basic.vue +15 -15
  192. package/docs/examples/form/basic.vue +688 -688
  193. package/docs/examples/form/init.vue +76 -76
  194. package/docs/examples/form/master-detail.vue +203 -203
  195. package/docs/examples/form/rule-format.vue +179 -179
  196. package/docs/examples/form/view-table.vue +378 -378
  197. package/docs/examples/guid/basic.vue +10 -10
  198. package/docs/examples/guid/size.vue +13 -13
  199. package/docs/examples/hpanel/basic.vue +79 -79
  200. package/docs/examples/icon/basic.vue +9 -9
  201. package/docs/examples/icon/rotate-flip.vue +9 -9
  202. package/docs/examples/icon/size.vue +7 -7
  203. package/docs/examples/input/basic.vue +10 -10
  204. package/docs/examples/input/clearable.vue +12 -12
  205. package/docs/examples/input/disabled.vue +6 -6
  206. package/docs/examples/input/icon.vue +23 -23
  207. package/docs/examples/input/password.vue +18 -18
  208. package/docs/examples/input/size.vue +13 -13
  209. package/docs/examples/input/textarea.vue +25 -25
  210. package/docs/examples/input/word-limit.vue +28 -28
  211. package/docs/examples/input-button/basic.vue +33 -33
  212. package/docs/examples/input-cards/basic.vue +79 -79
  213. package/docs/examples/input-code/basic.vue +29 -29
  214. package/docs/examples/input-color/basic.vue +10 -10
  215. package/docs/examples/input-color/disabled.vue +13 -13
  216. package/docs/examples/input-color/format.vue +17 -17
  217. package/docs/examples/input-color/no-alpha.vue +13 -13
  218. package/docs/examples/input-color/only-button.vue +15 -15
  219. package/docs/examples/input-color/predefine.vue +31 -31
  220. package/docs/examples/input-color/size.vue +15 -15
  221. package/docs/examples/input-layer/basic.vue +85 -85
  222. package/docs/examples/input-layer/render-vnode-page.vue +160 -160
  223. package/docs/examples/input-layer/render-vnode.vue +127 -127
  224. package/docs/examples/input-rows/basic.vue +73 -73
  225. package/docs/examples/input-rows/drag.vue +48 -48
  226. package/docs/examples/input-rows/layer-form.vue +85 -85
  227. package/docs/examples/input-rows/nested.vue +91 -91
  228. package/docs/examples/input-tag/basic.vue +27 -27
  229. package/docs/examples/input-tag/colors.vue +23 -23
  230. package/docs/examples/input-tag/readonly.vue +17 -17
  231. package/docs/examples/layer/basic.vue +43 -43
  232. package/docs/examples/layer/custom-buttons.vue +61 -61
  233. package/docs/examples/layer/drawer.vue +37 -37
  234. package/docs/examples/layer/full.vue +38 -38
  235. package/docs/examples/layer/modal.vue +34 -34
  236. package/docs/examples/layer/steps.vue +46 -46
  237. package/docs/examples/layer-form/basic.vue +76 -76
  238. package/docs/examples/layer-form/config.vue +82 -82
  239. package/docs/examples/layer-form/size.vue +72 -72
  240. package/docs/examples/layout/basic.vue +36 -36
  241. package/docs/examples/layout/custom-size.vue +50 -50
  242. package/docs/examples/layout/disable-move.vue +37 -37
  243. package/docs/examples/layout/hide-mid-when-narrow.vue +96 -96
  244. package/docs/examples/layout/min-size.vue +73 -73
  245. package/docs/examples/layout/percent-size.vue +80 -80
  246. package/docs/examples/layout/simple.vue +22 -22
  247. package/docs/examples/layout/top-side.vue +34 -34
  248. package/docs/examples/map/basic.vue +22 -22
  249. package/docs/examples/menu/basic.vue +58 -58
  250. package/docs/examples/menu/collapsed.vue +49 -49
  251. package/docs/examples/menu/horizontal.vue +44 -44
  252. package/docs/examples/menu/selection-test.vue +104 -104
  253. package/docs/examples/menu/theme.vue +46 -46
  254. package/docs/examples/menu/vertical.vue +46 -46
  255. package/docs/examples/number/advanced.vue +143 -143
  256. package/docs/examples/number/basic.vue +63 -63
  257. package/docs/examples/number/disabled.vue +49 -49
  258. package/docs/examples/number/size.vue +42 -42
  259. package/docs/examples/number/slots.vue +123 -123
  260. package/docs/examples/number/step-strictly.vue +41 -41
  261. package/docs/examples/number/step.vue +47 -47
  262. package/docs/examples/page/basic.vue +41 -41
  263. package/docs/examples/page/code-table-model.vue +428 -428
  264. package/docs/examples/page/dept-user-management.vue +211 -211
  265. package/docs/examples/page/init.vue +87 -87
  266. package/docs/examples/page/log.vue +453 -453
  267. package/docs/examples/page/user-management.vue +313 -313
  268. package/docs/examples/panel/tool-buttons.vue +18 -18
  269. package/docs/examples/radio/basic.vue +17 -17
  270. package/docs/examples/radio/button.vue +17 -17
  271. package/docs/examples/radio/color.vue +18 -18
  272. package/docs/examples/radio/disabled.vue +17 -17
  273. package/docs/examples/radio/size.vue +29 -29
  274. package/docs/examples/rate/basic.vue +24 -24
  275. package/docs/examples/rate/half.vue +24 -24
  276. package/docs/examples/rate/readonly.vue +11 -11
  277. package/docs/examples/rate/text.vue +37 -37
  278. package/docs/examples/select/basic.vue +16 -16
  279. package/docs/examples/select/clearable.vue +22 -22
  280. package/docs/examples/select/color.vue +16 -16
  281. package/docs/examples/select/disabled.vue +31 -31
  282. package/docs/examples/select/filterable.vue +24 -24
  283. package/docs/examples/select/group.vue +23 -23
  284. package/docs/examples/select/icon.vue +16 -16
  285. package/docs/examples/select/multiple.vue +18 -18
  286. package/docs/examples/select/size.vue +39 -39
  287. package/docs/examples/slider/basic.vue +42 -42
  288. package/docs/examples/slider/disabled.vue +17 -17
  289. package/docs/examples/slider/marks.vue +30 -30
  290. package/docs/examples/slider/size.vue +37 -37
  291. package/docs/examples/slider/tooltip.vue +36 -36
  292. package/docs/examples/slider/vertical.vue +26 -26
  293. package/docs/examples/slider-captcha/basic.vue +44 -44
  294. package/docs/examples/slider-captcha/custom.vue +48 -48
  295. package/docs/examples/switch/basic.vue +16 -16
  296. package/docs/examples/switch/disabled.vue +13 -13
  297. package/docs/examples/switch/loading.vue +13 -13
  298. package/docs/examples/switch/size.vue +15 -15
  299. package/docs/examples/switch/text.vue +13 -13
  300. package/docs/examples/table/action-filter.vue +126 -126
  301. package/docs/examples/table/actions.vue +116 -116
  302. package/docs/examples/table/add-row.vue +98 -98
  303. package/docs/examples/table/basic.vue +168 -168
  304. package/docs/examples/table/checkbox-layout.vue +68 -68
  305. package/docs/examples/table/column-filter.vue +96 -96
  306. package/docs/examples/table/custom-layout.vue +115 -115
  307. package/docs/examples/table/custom-merge-cell.vue +206 -206
  308. package/docs/examples/table/dynamic-type.vue +74 -74
  309. package/docs/examples/table/editable.vue +290 -290
  310. package/docs/examples/table/field-selection.vue +87 -87
  311. package/docs/examples/table/frozen-column.vue +140 -140
  312. package/docs/examples/table/height-mode.vue +99 -99
  313. package/docs/examples/table/icon.vue +85 -85
  314. package/docs/examples/table/layer-form.vue +133 -133
  315. package/docs/examples/table/link.vue +66 -66
  316. package/docs/examples/table/merge-cell.vue +78 -78
  317. package/docs/examples/table/merge-header.vue +86 -86
  318. package/docs/examples/table/multiple-disabled.vue +112 -112
  319. package/docs/examples/table/multiple.vue +188 -188
  320. package/docs/examples/table/pagination.vue +151 -151
  321. package/docs/examples/table/row-drag.vue +67 -67
  322. package/docs/examples/table/row-fixed.vue +61 -61
  323. package/docs/examples/table/show-tag.vue +68 -68
  324. package/docs/examples/table/single-selection.vue +64 -64
  325. package/docs/examples/table/sub-table-lazy.vue +97 -97
  326. package/docs/examples/table/sub-table.vue +103 -103
  327. package/docs/examples/table/tag.vue +43 -43
  328. package/docs/examples/table/tree-column.vue +119 -119
  329. package/docs/examples/table/tree-data.vue +141 -141
  330. package/docs/examples/table/tree-default-expand-all.vue +60 -60
  331. package/docs/examples/table/tree-lazy.vue +80 -80
  332. package/docs/examples/table/tree-set-selection.vue +75 -75
  333. package/docs/examples/table-panel/basic.vue +229 -229
  334. package/docs/examples/table-panel/batch-operations.vue +286 -286
  335. package/docs/examples/table-panel/button-visibility.vue +88 -88
  336. package/docs/examples/table-panel/card.vue +101 -101
  337. package/docs/examples/table-panel/column-filter.vue +116 -116
  338. package/docs/examples/table-panel/filter.vue +219 -219
  339. package/docs/examples/table-panel/get-selection.vue +111 -111
  340. package/docs/examples/table-panel/mask.vue +151 -151
  341. package/docs/examples/table-panel/model-value.vue +87 -87
  342. package/docs/examples/table-panel/multiple-selection.vue +243 -243
  343. package/docs/examples/table-panel/pagination-select-state-key.vue +176 -176
  344. package/docs/examples/table-panel/pagination.vue +133 -133
  345. package/docs/examples/table-panel/remote-selection.vue +159 -159
  346. package/docs/examples/table-panel/search-list.vue +207 -207
  347. package/docs/examples/table-panel/sub-table-lazy.vue +118 -118
  348. package/docs/examples/table-panel/tree-parent-key.vue +67 -67
  349. package/docs/examples/tabs/basic.vue +98 -98
  350. package/docs/examples/time/base.vue +67 -67
  351. package/docs/examples/title/basic.vue +87 -87
  352. package/docs/examples/tree/accordion.vue +46 -46
  353. package/docs/examples/tree/basic.vue +50 -50
  354. package/docs/examples/tree/buttons.vue +53 -53
  355. package/docs/examples/tree/check-strictly.vue +53 -53
  356. package/docs/examples/tree/checkable.vue +52 -52
  357. package/docs/examples/tree/custom-keys.vue +39 -39
  358. package/docs/examples/tree/default-expanded.vue +52 -52
  359. package/docs/examples/tree/draggable.vue +29 -29
  360. package/docs/examples/tree/expand-on-click.vue +39 -39
  361. package/docs/examples/tree/flat-data.vue +20 -20
  362. package/docs/examples/tree/icon.vue +40 -40
  363. package/docs/examples/tree/load-data.vue +37 -37
  364. package/docs/examples/tree/methods.vue +74 -74
  365. package/docs/examples/tree/theme.vue +33 -33
  366. package/docs/examples/tree-select/basic.vue +47 -47
  367. package/docs/examples/tree-select/lazy.vue +42 -42
  368. package/docs/examples/upload/accept.vue +31 -31
  369. package/docs/examples/upload/basic.vue +12 -12
  370. package/docs/examples/upload/drag.vue +11 -11
  371. package/docs/examples/upload/image.vue +17 -17
  372. package/docs/examples/upload/limit.vue +20 -20
  373. package/docs/examples/upload/multiple.vue +17 -17
  374. package/docs/examples/upload/readonly.vue +17 -17
  375. package/docs/examples/utils/cipher.vue +160 -160
  376. package/docs/examples/utils/common.vue +153 -153
  377. package/docs/examples/utils/date.vue +56 -56
  378. package/docs/examples/utils/dom.vue +52 -52
  379. package/docs/examples/utils/is.vue +70 -70
  380. package/docs/examples/workflow/basic.vue +265 -265
  381. package/docs/examples/workflow-viewer/basic.vue +248 -248
  382. package/package.json +23 -23
@@ -1,26 +1,26 @@
1
- # Collapse 折叠面板
2
-
3
- 通过折叠面板收纳内容区域。
4
-
5
- ## 基础用法
6
-
7
- 可以折叠/展开的内容区域。
8
-
9
- <Demo :source-code="collapseBasicCode">
10
- <template #source>
11
- <collapse-basic />
12
- </template>
13
- <template #description>
14
- 通过 `v-model` 绑定当前激活的面板,使用 `el-collapse-item` 定义面板内容。支持 `accordion` 属性开启手风琴模式。
15
- </template>
16
- </Demo>
17
-
18
- ## API
19
-
20
- <ApiTable :data="collapseApi" componentName="collapse" />
21
-
22
- <script setup>
23
- import CollapseBasic from '../examples/collapse/basic.vue'
24
- import collapseApi from './meta/collapse'
25
- import collapseBasicCode from '../examples/collapse/basic.vue?raw'
26
- </script>
1
+ # Collapse 折叠面板
2
+
3
+ 通过折叠面板收纳内容区域。
4
+
5
+ ## 基础用法
6
+
7
+ 可以折叠/展开的内容区域。
8
+
9
+ <Demo :source-code="collapseBasicCode">
10
+ <template #source>
11
+ <collapse-basic />
12
+ </template>
13
+ <template #description>
14
+ 通过 `v-model` 绑定当前激活的面板,使用 `el-collapse-item` 定义面板内容。支持 `accordion` 属性开启手风琴模式。
15
+ </template>
16
+ </Demo>
17
+
18
+ ## API
19
+
20
+ <ApiTable :data="collapseApi" componentName="collapse" />
21
+
22
+ <script setup>
23
+ import CollapseBasic from '../examples/collapse/basic.vue'
24
+ import collapseApi from './meta/collapse'
25
+ import collapseBasicCode from '../examples/collapse/basic.vue?raw'
26
+ </script>
@@ -1,106 +1,106 @@
1
- # Comp 动态组件
2
-
3
- `j-comp` 是一个通用的动态组件渲染器,它可以根据配置渲染不同类型的组件,并支持递归渲染子组件。
4
-
5
- ## 基础用法
6
-
7
- 通过 `type` 属性指定组件类型,`config` 属性传递组件配置。
8
-
9
- <Demo :source-code="basicCode">
10
- <template #source>
11
- <basic />
12
- </template>
13
- <template #description>
14
- 使用 `j-comp` 渲染一个简单的按钮组件。
15
- </template>
16
- </Demo>
17
-
18
- ## Tabs 示例
19
-
20
- 当 `type` 为 `j-tabs` 时:
21
-
22
- 1. 子组件会自动添加 `name` 属性(`_tab` + index)。
23
- 2. 组件会自动开启输入模式(`v-model` 生效)。
24
- 3. 默认值规则:
25
- - 优先使用 `config.defaultValue`。
26
- - 其次查找子组件中配置了 `active: true` 的项,使用其对应的 `_tab` + index。
27
- - 默认值为 `_tab0`。
28
-
29
- <Demo :source-code="tabsCode">
30
- <template #source>
31
- <tabs />
32
- </template>
33
- <template #description>
34
- 使用 `j-comp` 渲染 `j-tabs` 组件,子组件会自动获得 `name` 属性。
35
- </template>
36
- </Demo>
37
-
38
- ## Collapse 示例
39
-
40
- 当 `type` 为 `j-collapse` 时:
41
-
42
- 1. 子组件会自动添加 `name` 属性(`_collapse` + index)。
43
- 2. 组件会自动开启输入模式(`v-model` 生效)。
44
- 3. 默认值规则:
45
- - 优先使用 `config.defaultValue`。
46
- - 其次查找子组件中配置了 `active: true` 的项,使用其对应的 `_collapse` + index。
47
- - 默认值为 `[]`(非手风琴模式)或 `''`(手风琴模式)。
48
-
49
- <Demo :source-code="collapseCode">
50
- <template #source>
51
- <collapse />
52
- </template>
53
- <template #description>
54
- 使用 `j-comp` 渲染 `j-collapse` 组件,子组件会自动获得 `name` 属性。
55
- </template>
56
- </Demo>
57
-
58
- ## Table mergeRows 示例
59
-
60
- 当 `type` 为 `j-table` 时,`config.mergeRows` 支持按行号范围合并指定列的单元格:
61
-
62
- 1. `mergeRows` 格式为 `[{ col, row1, row2 }]`,`col` 对应列的 `id`,`row1`/`row2` 为 1-based 数据行号范围。
63
- 2. 匹配按列归一化后的 `id` 进行,嵌套子列同样生效。
64
- 3. 命中的列会自动生成 `mergeCell` 函数,范围内的行无条件合并。
65
- 4. 仅当未显式传入 `config.columns`(列由 `children` 推导)时生效。
66
-
67
- <Demo :source-code="tableMergeRowsCode">
68
- <template #source>
69
- <table-merge-rows />
70
- </template>
71
- <template #description>
72
- 使用 `j-comp` 渲染 `j-table`,通过 `mergeRows` 将“部门”列按行号范围合并。
73
- </template>
74
- </Demo>
75
-
76
- ## Table 固定行数与合并表头示例
77
-
78
- 当 `type` 为 `j-table` 时,可以通过 `config` 同时传入 `isRowFixed`、`rowNum`、`mergeRows` 和 `mergeHeader`:
79
-
80
- <Demo :source-code="tableRowFixedMergeCode">
81
- <template #source>
82
- <table-row-fixed-merge />
83
- </template>
84
- <template #description>
85
- 使用 `j-comp` 渲染 `j-table`,展示固定 7 行、指定列行合并和分组合并表头。
86
- </template>
87
- </Demo>
88
-
89
- ## API
90
-
91
- <ApiTable :data="compApi" componentName="comp" />
92
-
93
- <script setup>
94
- import Basic from '../examples/comp/basic.vue'
95
- import Tabs from '../examples/comp/tabs.vue'
96
- import Collapse from '../examples/comp/collapse.vue'
97
- import TableMergeRows from '../examples/comp/table-merge-rows.vue'
98
- import TableRowFixedMerge from '../examples/comp/table-row-fixed-merge.vue'
99
- import compApi from './meta/comp'
100
-
101
- import basicCode from '../examples/comp/basic.vue?raw'
102
- import tabsCode from '../examples/comp/tabs.vue?raw'
103
- import collapseCode from '../examples/comp/collapse.vue?raw'
104
- import tableMergeRowsCode from '../examples/comp/table-merge-rows.vue?raw'
105
- import tableRowFixedMergeCode from '../examples/comp/table-row-fixed-merge.vue?raw'
106
- </script>
1
+ # Comp 动态组件
2
+
3
+ `j-comp` 是一个通用的动态组件渲染器,它可以根据配置渲染不同类型的组件,并支持递归渲染子组件。
4
+
5
+ ## 基础用法
6
+
7
+ 通过 `type` 属性指定组件类型,`config` 属性传递组件配置。
8
+
9
+ <Demo :source-code="basicCode">
10
+ <template #source>
11
+ <basic />
12
+ </template>
13
+ <template #description>
14
+ 使用 `j-comp` 渲染一个简单的按钮组件。
15
+ </template>
16
+ </Demo>
17
+
18
+ ## Tabs 示例
19
+
20
+ 当 `type` 为 `j-tabs` 时:
21
+
22
+ 1. 子组件会自动添加 `name` 属性(`_tab` + index)。
23
+ 2. 组件会自动开启输入模式(`v-model` 生效)。
24
+ 3. 默认值规则:
25
+ - 优先使用 `config.defaultValue`。
26
+ - 其次查找子组件中配置了 `active: true` 的项,使用其对应的 `_tab` + index。
27
+ - 默认值为 `_tab0`。
28
+
29
+ <Demo :source-code="tabsCode">
30
+ <template #source>
31
+ <tabs />
32
+ </template>
33
+ <template #description>
34
+ 使用 `j-comp` 渲染 `j-tabs` 组件,子组件会自动获得 `name` 属性。
35
+ </template>
36
+ </Demo>
37
+
38
+ ## Collapse 示例
39
+
40
+ 当 `type` 为 `j-collapse` 时:
41
+
42
+ 1. 子组件会自动添加 `name` 属性(`_collapse` + index)。
43
+ 2. 组件会自动开启输入模式(`v-model` 生效)。
44
+ 3. 默认值规则:
45
+ - 优先使用 `config.defaultValue`。
46
+ - 其次查找子组件中配置了 `active: true` 的项,使用其对应的 `_collapse` + index。
47
+ - 默认值为 `[]`(非手风琴模式)或 `''`(手风琴模式)。
48
+
49
+ <Demo :source-code="collapseCode">
50
+ <template #source>
51
+ <collapse />
52
+ </template>
53
+ <template #description>
54
+ 使用 `j-comp` 渲染 `j-collapse` 组件,子组件会自动获得 `name` 属性。
55
+ </template>
56
+ </Demo>
57
+
58
+ ## Table mergeRows 示例
59
+
60
+ 当 `type` 为 `j-table` 时,`config.mergeRows` 支持按行号范围合并指定列的单元格:
61
+
62
+ 1. `mergeRows` 格式为 `[{ col, row1, row2 }]`,`col` 对应列的 `id`,`row1`/`row2` 为 1-based 数据行号范围。
63
+ 2. 匹配按列归一化后的 `id` 进行,嵌套子列同样生效。
64
+ 3. 命中的列会自动生成 `mergeCell` 函数,范围内的行无条件合并。
65
+ 4. 仅当未显式传入 `config.columns`(列由 `children` 推导)时生效。
66
+
67
+ <Demo :source-code="tableMergeRowsCode">
68
+ <template #source>
69
+ <table-merge-rows />
70
+ </template>
71
+ <template #description>
72
+ 使用 `j-comp` 渲染 `j-table`,通过 `mergeRows` 将“部门”列按行号范围合并。
73
+ </template>
74
+ </Demo>
75
+
76
+ ## Table 固定行数与合并表头示例
77
+
78
+ 当 `type` 为 `j-table` 时,可以通过 `config` 同时传入 `isRowFixed`、`rowNum`、`mergeRows` 和 `mergeHeader`:
79
+
80
+ <Demo :source-code="tableRowFixedMergeCode">
81
+ <template #source>
82
+ <table-row-fixed-merge />
83
+ </template>
84
+ <template #description>
85
+ 使用 `j-comp` 渲染 `j-table`,展示固定 7 行、指定列行合并和分组合并表头。
86
+ </template>
87
+ </Demo>
88
+
89
+ ## API
90
+
91
+ <ApiTable :data="compApi" componentName="comp" />
92
+
93
+ <script setup>
94
+ import Basic from '../examples/comp/basic.vue'
95
+ import Tabs from '../examples/comp/tabs.vue'
96
+ import Collapse from '../examples/comp/collapse.vue'
97
+ import TableMergeRows from '../examples/comp/table-merge-rows.vue'
98
+ import TableRowFixedMerge from '../examples/comp/table-row-fixed-merge.vue'
99
+ import compApi from './meta/comp'
100
+
101
+ import basicCode from '../examples/comp/basic.vue?raw'
102
+ import tabsCode from '../examples/comp/tabs.vue?raw'
103
+ import collapseCode from '../examples/comp/collapse.vue?raw'
104
+ import tableMergeRowsCode from '../examples/comp/table-merge-rows.vue?raw'
105
+ import tableRowFixedMergeCode from '../examples/comp/table-row-fixed-merge.vue?raw'
106
+ </script>
@@ -1,24 +1,24 @@
1
- # CountUp 数字滚动动画组件
2
-
3
- 使用数字滚动效果展示数值的变化,常用于数据统计展示和数值动画效果。
4
-
5
- ## 基础用法
6
-
7
- <Demo :source-code="countUpBasicCode">
8
- <template #source>
9
- <count-up-basic />
10
- </template>
11
- <template #description>
12
- 通过 `end-value` 传入要显示的最终值。支持自定义动画时长、小数位数、起始值等功能。
13
- </template>
14
- </Demo>
15
-
16
- ## API
17
-
18
- <ApiTable :data="countUpApi" componentName="count-up" />
19
-
20
- <script setup>
21
- import CountUpBasic from '../examples/count-up/basic.vue'
22
- import countUpApi from './meta/count-up'
23
- import countUpBasicCode from '../examples/count-up/basic.vue?raw'
24
- </script>
1
+ # CountUp 数字滚动动画组件
2
+
3
+ 使用数字滚动效果展示数值的变化,常用于数据统计展示和数值动画效果。
4
+
5
+ ## 基础用法
6
+
7
+ <Demo :source-code="countUpBasicCode">
8
+ <template #source>
9
+ <count-up-basic />
10
+ </template>
11
+ <template #description>
12
+ 通过 `end-value` 传入要显示的最终值。支持自定义动画时长、小数位数、起始值等功能。
13
+ </template>
14
+ </Demo>
15
+
16
+ ## API
17
+
18
+ <ApiTable :data="countUpApi" componentName="count-up" />
19
+
20
+ <script setup>
21
+ import CountUpBasic from '../examples/count-up/basic.vue'
22
+ import countUpApi from './meta/count-up'
23
+ import countUpBasicCode from '../examples/count-up/basic.vue?raw'
24
+ </script>
@@ -1,24 +1,24 @@
1
- # Count 计算组件
2
-
3
- 用于根据公式自动计算数值。
4
-
5
- ## 基础用法
6
-
7
- <Demo :source-code="countBasicCode">
8
- <template #source>
9
- <count-basic />
10
- </template>
11
- <template #description>
12
- 通过 `format-json` 传入计算公式。支持千分位分隔、大写转换、小数精度控制等功能。
13
- </template>
14
- </Demo>
15
-
16
- ## API
17
-
18
- <ApiTable :data="countApi" componentName="count" />
19
-
20
- <script setup>
21
- import CountBasic from '../examples/count/basic.vue'
22
- import countApi from './meta/count'
23
- import countBasicCode from '../examples/count/basic.vue?raw'
24
- </script>
1
+ # Count 计算组件
2
+
3
+ 用于根据公式自动计算数值。
4
+
5
+ ## 基础用法
6
+
7
+ <Demo :source-code="countBasicCode">
8
+ <template #source>
9
+ <count-basic />
10
+ </template>
11
+ <template #description>
12
+ 通过 `format-json` 传入计算公式。支持千分位分隔、大写转换、小数精度控制等功能。
13
+ </template>
14
+ </Demo>
15
+
16
+ ## API
17
+
18
+ <ApiTable :data="countApi" componentName="count" />
19
+
20
+ <script setup>
21
+ import CountBasic from '../examples/count/basic.vue'
22
+ import countApi from './meta/count'
23
+ import countBasicCode from '../examples/count/basic.vue?raw'
24
+ </script>
@@ -1,24 +1,24 @@
1
- # DataPanel 数据面板组件
2
-
3
- 用于展示和组织数据内容的面板容器组件,提供标题、插槽等功能支持。
4
-
5
- ## 基础用法
6
-
7
- <Demo :source-code="dataPanelBasicCode">
8
- <template #source>
9
- <data-panel-basic />
10
- </template>
11
- <template #description>
12
- 通过 `title` 属性设置面板标题。支持 `titleRight` 插槽在标题右侧添加额外内容。
13
- </template>
14
- </Demo>
15
-
16
- ## API
17
-
18
- <ApiTable :data="dataPanelApi" componentName="data-panel" />
19
-
20
- <script setup>
21
- import DataPanelBasic from '../examples/data-panel/basic.vue'
22
- import dataPanelApi from './meta/data-panel'
23
- import dataPanelBasicCode from '../examples/data-panel/basic.vue?raw'
24
- </script>
1
+ # DataPanel 数据面板组件
2
+
3
+ 用于展示和组织数据内容的面板容器组件,提供标题、插槽等功能支持。
4
+
5
+ ## 基础用法
6
+
7
+ <Demo :source-code="dataPanelBasicCode">
8
+ <template #source>
9
+ <data-panel-basic />
10
+ </template>
11
+ <template #description>
12
+ 通过 `title` 属性设置面板标题。支持 `titleRight` 插槽在标题右侧添加额外内容。
13
+ </template>
14
+ </Demo>
15
+
16
+ ## API
17
+
18
+ <ApiTable :data="dataPanelApi" componentName="data-panel" />
19
+
20
+ <script setup>
21
+ import DataPanelBasic from '../examples/data-panel/basic.vue'
22
+ import dataPanelApi from './meta/data-panel'
23
+ import dataPanelBasicCode from '../examples/data-panel/basic.vue?raw'
24
+ </script>
@@ -1,76 +1,76 @@
1
- # Date 日期选择器
2
-
3
- 用于选择或输入日期
4
-
5
- ## 基础用法
6
-
7
- <Demo :source-code="dateBasicCode">
8
- <template #source>
9
- <DateBasic />
10
- </template>
11
- <template #description>
12
- 基本单位由`selectType`属性指定。通过`shortcuts`配置快捷选项,禁用日期通过`disabledDate`设置,默认是`Date`对象。
13
- </template>
14
- </Demo>
15
-
16
- ## 其他选择器类型
17
-
18
- <Demo :source-code="dateTypesCode">
19
- <template #source>
20
- <DateTypes />
21
- </template>
22
- <template #description>
23
- 通过 `selectType` 属性可以设置不同的选择器类型,如 `year`, `month`, `week`, `dates`, `datetime`。
24
- </template>
25
- </Demo>
26
-
27
- ## 选择日期范围
28
-
29
- <Demo :source-code="dateRangeCode">
30
- <template #source>
31
- <DateRange />
32
- </template>
33
- <template #description>
34
- 通过 `selectType` 设置为 `daterange`, `datetimerange`, `monthrange` 即可选择日期范围。
35
- </template>
36
- </Demo>
37
-
38
- ## 日期格式
39
-
40
- <Demo :source-code="dateFormatCode">
41
- <template #source>
42
- <DateFormat />
43
- </template>
44
- <template #description>
45
- 使用 `format` 指定输入框的格式。使用 `value-format` 指定绑定值的格式。
46
- </template>
47
- </Demo>
48
-
49
- ## 默认显示日期
50
-
51
- <Demo :source-code="dateDefaultValueCode">
52
- <template #source>
53
- <DateDefaultValue />
54
- </template>
55
- <template #description>
56
- `defaultValue` 可选,选择器打开时默认显示的时间。`defaultTime` 范围选择时选中日期所使用的当日内具体时刻。
57
- </template>
58
- </Demo>
59
-
60
- ## API
61
-
62
- <ApiTable :data="dateApi" componentName="date" />
63
-
64
- <script setup>
65
- import DateBasic from '../examples/date/basic.vue'
66
- import DateTypes from '../examples/date/types.vue'
67
- import DateRange from '../examples/date/range.vue'
68
- import DateFormat from '../examples/date/format.vue'
69
- import DateDefaultValue from '../examples/date/default-value.vue'
70
- import dateApi from './meta/date'
71
- import dateBasicCode from '../examples/date/basic.vue?raw'
72
- import dateTypesCode from '../examples/date/types.vue?raw'
73
- import dateRangeCode from '../examples/date/range.vue?raw'
74
- import dateFormatCode from '../examples/date/format.vue?raw'
75
- import dateDefaultValueCode from '../examples/date/default-value.vue?raw'
76
- </script>
1
+ # Date 日期选择器
2
+
3
+ 用于选择或输入日期
4
+
5
+ ## 基础用法
6
+
7
+ <Demo :source-code="dateBasicCode">
8
+ <template #source>
9
+ <DateBasic />
10
+ </template>
11
+ <template #description>
12
+ 基本单位由`selectType`属性指定。通过`shortcuts`配置快捷选项,禁用日期通过`disabledDate`设置,默认是`Date`对象。
13
+ </template>
14
+ </Demo>
15
+
16
+ ## 其他选择器类型
17
+
18
+ <Demo :source-code="dateTypesCode">
19
+ <template #source>
20
+ <DateTypes />
21
+ </template>
22
+ <template #description>
23
+ 通过 `selectType` 属性可以设置不同的选择器类型,如 `year`, `month`, `week`, `dates`, `datetime`。
24
+ </template>
25
+ </Demo>
26
+
27
+ ## 选择日期范围
28
+
29
+ <Demo :source-code="dateRangeCode">
30
+ <template #source>
31
+ <DateRange />
32
+ </template>
33
+ <template #description>
34
+ 通过 `selectType` 设置为 `daterange`, `datetimerange`, `monthrange` 即可选择日期范围。
35
+ </template>
36
+ </Demo>
37
+
38
+ ## 日期格式
39
+
40
+ <Demo :source-code="dateFormatCode">
41
+ <template #source>
42
+ <DateFormat />
43
+ </template>
44
+ <template #description>
45
+ 使用 `format` 指定输入框的格式。使用 `value-format` 指定绑定值的格式。
46
+ </template>
47
+ </Demo>
48
+
49
+ ## 默认显示日期
50
+
51
+ <Demo :source-code="dateDefaultValueCode">
52
+ <template #source>
53
+ <DateDefaultValue />
54
+ </template>
55
+ <template #description>
56
+ `defaultValue` 可选,选择器打开时默认显示的时间。`defaultTime` 范围选择时选中日期所使用的当日内具体时刻。
57
+ </template>
58
+ </Demo>
59
+
60
+ ## API
61
+
62
+ <ApiTable :data="dateApi" componentName="date" />
63
+
64
+ <script setup>
65
+ import DateBasic from '../examples/date/basic.vue'
66
+ import DateTypes from '../examples/date/types.vue'
67
+ import DateRange from '../examples/date/range.vue'
68
+ import DateFormat from '../examples/date/format.vue'
69
+ import DateDefaultValue from '../examples/date/default-value.vue'
70
+ import dateApi from './meta/date'
71
+ import dateBasicCode from '../examples/date/basic.vue?raw'
72
+ import dateTypesCode from '../examples/date/types.vue?raw'
73
+ import dateRangeCode from '../examples/date/range.vue?raw'
74
+ import dateFormatCode from '../examples/date/format.vue?raw'
75
+ import dateDefaultValueCode from '../examples/date/default-value.vue?raw'
76
+ </script>