@a2simcode/ui 0.0.265 → 0.0.267

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 (368) 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/table/index.d.ts +5 -0
  6. package/dist/components/table/src/table.vue.d.ts +2 -0
  7. package/dist/simcode-ui.es.js +2293 -2283
  8. package/dist/simcode-ui.umd.js +2 -2
  9. package/dist/stats.html +1 -1
  10. package/dist/ui.css +1 -1
  11. package/docs/components/autocomplete.md +89 -89
  12. package/docs/components/barcode.md +101 -101
  13. package/docs/components/button-select.md +24 -24
  14. package/docs/components/button.md +117 -117
  15. package/docs/components/buttons.md +119 -119
  16. package/docs/components/card-list.md +38 -38
  17. package/docs/components/cascader-select.md +114 -114
  18. package/docs/components/checkbox.md +114 -114
  19. package/docs/components/code-mirror.md +85 -85
  20. package/docs/components/collapse.md +26 -26
  21. package/docs/components/comp.md +71 -71
  22. package/docs/components/count-up.md +24 -24
  23. package/docs/components/count.md +24 -24
  24. package/docs/components/data-panel.md +24 -24
  25. package/docs/components/date.md +76 -76
  26. package/docs/components/dialog-full.md +112 -112
  27. package/docs/components/dialog.md +127 -127
  28. package/docs/components/divider.md +24 -24
  29. package/docs/components/drawer.md +127 -127
  30. package/docs/components/dynamic-layer.md +118 -118
  31. package/docs/components/echarts.md +72 -72
  32. package/docs/components/editor.md +24 -24
  33. package/docs/components/form.md +87 -87
  34. package/docs/components/guid.md +39 -39
  35. package/docs/components/hpanel.md +24 -24
  36. package/docs/components/icon.md +56 -56
  37. package/docs/components/input-button.md +24 -24
  38. package/docs/components/input-code.md +24 -24
  39. package/docs/components/input-color.md +114 -114
  40. package/docs/components/input-layer.md +56 -56
  41. package/docs/components/input-rows.md +370 -370
  42. package/docs/components/input-tag.md +50 -50
  43. package/docs/components/input.md +129 -129
  44. package/docs/components/layer-form.md +61 -61
  45. package/docs/components/layer.md +127 -127
  46. package/docs/components/layout.md +132 -132
  47. package/docs/components/map.md +24 -24
  48. package/docs/components/menu.md +121 -121
  49. package/docs/components/meta/button.ts +212 -212
  50. package/docs/components/meta/buttons.ts +76 -76
  51. package/docs/components/meta/card-list.ts +210 -210
  52. package/docs/components/meta/code-mirror.ts +108 -108
  53. package/docs/components/meta/comp.ts +236 -236
  54. package/docs/components/meta/date.ts +267 -267
  55. package/docs/components/meta/echarts.ts +64 -64
  56. package/docs/components/meta/form-item.ts +62 -62
  57. package/docs/components/meta/form.ts +181 -181
  58. package/docs/components/meta/input-button.ts +175 -175
  59. package/docs/components/meta/input-cards.ts +112 -112
  60. package/docs/components/meta/input-code.ts +161 -161
  61. package/docs/components/meta/input-color.ts +243 -243
  62. package/docs/components/meta/input-rows.ts +119 -119
  63. package/docs/components/meta/layer-form.ts +74 -74
  64. package/docs/components/meta/map.ts +68 -68
  65. package/docs/components/meta/panel.ts +152 -152
  66. package/docs/components/meta/radio.ts +55 -55
  67. package/docs/components/meta/select.ts +279 -279
  68. package/docs/components/meta/slider.ts +270 -270
  69. package/docs/components/meta/table-panel.ts +326 -326
  70. package/docs/components/meta/table.ts +427 -427
  71. package/docs/components/meta/tabs.ts +146 -146
  72. package/docs/components/meta/title.ts +91 -91
  73. package/docs/components/meta/tree-select.ts +199 -199
  74. package/docs/components/meta/tree.ts +225 -225
  75. package/docs/components/meta/vpanel.ts +19 -19
  76. package/docs/components/meta/workflow-viewer.ts +55 -55
  77. package/docs/components/number.md +124 -124
  78. package/docs/components/page.md +102 -102
  79. package/docs/components/panel.md +37 -37
  80. package/docs/components/radio.md +87 -87
  81. package/docs/components/rate.md +71 -71
  82. package/docs/components/select.md +133 -133
  83. package/docs/components/slider-captcha.md +41 -41
  84. package/docs/components/slider.md +101 -101
  85. package/docs/components/switch.md +90 -90
  86. package/docs/components/table-panel.md +312 -312
  87. package/docs/components/table.md +495 -495
  88. package/docs/components/tabs.md +26 -26
  89. package/docs/components/title.md +24 -24
  90. package/docs/components/tree.md +222 -222
  91. package/docs/components/upload.md +117 -117
  92. package/docs/components/workflow-viewer.md +21 -21
  93. package/docs/components/workflow.md +21 -21
  94. package/docs/examples/autocomplete/advanced.vue +35 -35
  95. package/docs/examples/autocomplete/basic.vue +32 -32
  96. package/docs/examples/autocomplete/clearable.vue +33 -33
  97. package/docs/examples/autocomplete/custom-template.vue +49 -49
  98. package/docs/examples/autocomplete/disabled.vue +33 -33
  99. package/docs/examples/autocomplete/icon.vue +37 -37
  100. package/docs/examples/barcode/all-types.vue +380 -380
  101. package/docs/examples/barcode/basic.vue +14 -14
  102. package/docs/examples/barcode/props-appearance.vue +243 -243
  103. package/docs/examples/barcode/props-geometry.vue +143 -143
  104. package/docs/examples/barcode/props-logic.vue +216 -216
  105. package/docs/examples/barcode/props-symbology.vue +199 -199
  106. package/docs/examples/barcode/props-text.vue +268 -268
  107. package/docs/examples/button/basic.vue +7 -7
  108. package/docs/examples/button/disabled.vue +42 -42
  109. package/docs/examples/button/loading.vue +6 -6
  110. package/docs/examples/button/shape.vue +7 -7
  111. package/docs/examples/button/size.vue +14 -14
  112. package/docs/examples/button/status.vue +34 -34
  113. package/docs/examples/button/type.vue +10 -10
  114. package/docs/examples/button-select/basic.vue +19 -19
  115. package/docs/examples/buttons/basic.vue +62 -62
  116. package/docs/examples/buttons/disabled.vue +36 -36
  117. package/docs/examples/buttons/dropdown.vue +63 -63
  118. package/docs/examples/buttons/group.vue +52 -52
  119. package/docs/examples/buttons/link.vue +47 -47
  120. package/docs/examples/buttons/popup.vue +39 -39
  121. package/docs/examples/buttons/size.vue +45 -45
  122. package/docs/examples/card-list/basic.vue +70 -70
  123. package/docs/examples/card-list/selection-pagination.vue +69 -69
  124. package/docs/examples/cascader-select/basic.vue +28 -28
  125. package/docs/examples/cascader-select/clearable.vue +34 -34
  126. package/docs/examples/cascader-select/disabled.vue +43 -43
  127. package/docs/examples/cascader-select/filterable.vue +37 -37
  128. package/docs/examples/cascader-select/methods.vue +84 -84
  129. package/docs/examples/cascader-select/multiple.vue +38 -38
  130. package/docs/examples/cascader-select/slot.vue +45 -45
  131. package/docs/examples/checkbox/basic.vue +18 -18
  132. package/docs/examples/checkbox/button.vue +19 -19
  133. package/docs/examples/checkbox/color.vue +25 -25
  134. package/docs/examples/checkbox/disabled.vue +17 -17
  135. package/docs/examples/checkbox/min-max.vue +20 -20
  136. package/docs/examples/checkbox/mixed.vue +56 -56
  137. package/docs/examples/checkbox/size.vue +28 -28
  138. package/docs/examples/code-mirror/basic.vue +11 -11
  139. package/docs/examples/code-mirror/events.vue +42 -42
  140. package/docs/examples/code-mirror/height.vue +25 -25
  141. package/docs/examples/code-mirror/mode.vue +33 -33
  142. package/docs/examples/code-mirror/readonly.vue +14 -14
  143. package/docs/examples/collapse/basic.vue +82 -82
  144. package/docs/examples/comp/basic.vue +7 -7
  145. package/docs/examples/comp/collapse.vue +38 -38
  146. package/docs/examples/comp/tabs.vue +38 -38
  147. package/docs/examples/count/basic.vue +101 -101
  148. package/docs/examples/count-up/basic.vue +89 -89
  149. package/docs/examples/data-panel/basic.vue +110 -110
  150. package/docs/examples/date/basic.vue +73 -73
  151. package/docs/examples/date/default-value.vue +59 -59
  152. package/docs/examples/date/format.vue +75 -75
  153. package/docs/examples/date/range.vue +66 -66
  154. package/docs/examples/date/types.vue +79 -79
  155. package/docs/examples/decorated-title/basic.vue +31 -31
  156. package/docs/examples/dialog/basic.vue +36 -36
  157. package/docs/examples/dialog/custom-buttons.vue +44 -44
  158. package/docs/examples/dialog/fullscreen.vue +23 -23
  159. package/docs/examples/dialog/no-mask.vue +17 -17
  160. package/docs/examples/dialog/size.vue +44 -44
  161. package/docs/examples/dialog/steps.vue +57 -57
  162. package/docs/examples/dialog-full/basic.vue +29 -29
  163. package/docs/examples/dialog-full/custom-buttons.vue +45 -45
  164. package/docs/examples/dialog-full/no-buttons.vue +18 -18
  165. package/docs/examples/dialog-full/no-header.vue +27 -27
  166. package/docs/examples/dialog-full/steps.vue +71 -71
  167. package/docs/examples/divider/basic.vue +52 -52
  168. package/docs/examples/drawer/basic.vue +35 -35
  169. package/docs/examples/drawer/custom-buttons.vue +34 -34
  170. package/docs/examples/drawer/direction.vue +47 -47
  171. package/docs/examples/drawer/mask.vue +36 -36
  172. package/docs/examples/drawer/no-buttons.vue +20 -20
  173. package/docs/examples/drawer/size.vue +28 -28
  174. package/docs/examples/dynamic-layer/basic.vue +33 -33
  175. package/docs/examples/dynamic-layer/custom-buttons.vue +43 -43
  176. package/docs/examples/dynamic-layer/form.vue +73 -73
  177. package/docs/examples/dynamic-layer/steps.vue +52 -52
  178. package/docs/examples/dynamic-layer/types.vue +40 -40
  179. package/docs/examples/echarts/basic.vue +31 -31
  180. package/docs/examples/echarts/dynamic.vue +43 -43
  181. package/docs/examples/echarts/line.vue +46 -46
  182. package/docs/examples/echarts/pie.vue +44 -44
  183. package/docs/examples/editor/basic.vue +15 -15
  184. package/docs/examples/form/basic.vue +688 -688
  185. package/docs/examples/form/init.vue +76 -76
  186. package/docs/examples/form/master-detail.vue +203 -203
  187. package/docs/examples/form/rule-format.vue +179 -179
  188. package/docs/examples/form/view-table.vue +378 -378
  189. package/docs/examples/guid/basic.vue +10 -10
  190. package/docs/examples/guid/size.vue +13 -13
  191. package/docs/examples/hpanel/basic.vue +79 -79
  192. package/docs/examples/icon/basic.vue +9 -9
  193. package/docs/examples/icon/rotate-flip.vue +9 -9
  194. package/docs/examples/icon/size.vue +7 -7
  195. package/docs/examples/input/basic.vue +10 -10
  196. package/docs/examples/input/clearable.vue +12 -12
  197. package/docs/examples/input/disabled.vue +6 -6
  198. package/docs/examples/input/icon.vue +23 -23
  199. package/docs/examples/input/password.vue +18 -18
  200. package/docs/examples/input/size.vue +13 -13
  201. package/docs/examples/input/textarea.vue +25 -25
  202. package/docs/examples/input/word-limit.vue +28 -28
  203. package/docs/examples/input-button/basic.vue +33 -33
  204. package/docs/examples/input-cards/basic.vue +79 -79
  205. package/docs/examples/input-code/basic.vue +29 -29
  206. package/docs/examples/input-color/basic.vue +10 -10
  207. package/docs/examples/input-color/disabled.vue +13 -13
  208. package/docs/examples/input-color/format.vue +17 -17
  209. package/docs/examples/input-color/no-alpha.vue +13 -13
  210. package/docs/examples/input-color/only-button.vue +15 -15
  211. package/docs/examples/input-color/predefine.vue +31 -31
  212. package/docs/examples/input-color/size.vue +15 -15
  213. package/docs/examples/input-layer/basic.vue +85 -85
  214. package/docs/examples/input-layer/render-vnode-page.vue +160 -160
  215. package/docs/examples/input-layer/render-vnode.vue +127 -127
  216. package/docs/examples/input-rows/basic.vue +73 -73
  217. package/docs/examples/input-rows/drag.vue +48 -48
  218. package/docs/examples/input-rows/layer-form.vue +85 -85
  219. package/docs/examples/input-rows/nested.vue +91 -91
  220. package/docs/examples/input-tag/basic.vue +27 -27
  221. package/docs/examples/input-tag/colors.vue +23 -23
  222. package/docs/examples/input-tag/readonly.vue +17 -17
  223. package/docs/examples/layer/basic.vue +43 -43
  224. package/docs/examples/layer/custom-buttons.vue +61 -61
  225. package/docs/examples/layer/drawer.vue +37 -37
  226. package/docs/examples/layer/full.vue +38 -38
  227. package/docs/examples/layer/modal.vue +34 -34
  228. package/docs/examples/layer/steps.vue +46 -46
  229. package/docs/examples/layer-form/basic.vue +76 -76
  230. package/docs/examples/layer-form/config.vue +82 -82
  231. package/docs/examples/layer-form/size.vue +72 -72
  232. package/docs/examples/layout/basic.vue +36 -36
  233. package/docs/examples/layout/custom-size.vue +50 -50
  234. package/docs/examples/layout/disable-move.vue +37 -37
  235. package/docs/examples/layout/hide-mid-when-narrow.vue +96 -96
  236. package/docs/examples/layout/min-size.vue +73 -73
  237. package/docs/examples/layout/percent-size.vue +80 -80
  238. package/docs/examples/layout/simple.vue +22 -22
  239. package/docs/examples/layout/top-side.vue +34 -34
  240. package/docs/examples/map/basic.vue +22 -22
  241. package/docs/examples/menu/basic.vue +58 -58
  242. package/docs/examples/menu/collapsed.vue +49 -49
  243. package/docs/examples/menu/horizontal.vue +44 -44
  244. package/docs/examples/menu/selection-test.vue +104 -104
  245. package/docs/examples/menu/theme.vue +46 -46
  246. package/docs/examples/menu/vertical.vue +46 -46
  247. package/docs/examples/number/advanced.vue +143 -143
  248. package/docs/examples/number/basic.vue +63 -63
  249. package/docs/examples/number/disabled.vue +49 -49
  250. package/docs/examples/number/size.vue +42 -42
  251. package/docs/examples/number/slots.vue +123 -123
  252. package/docs/examples/number/step-strictly.vue +41 -41
  253. package/docs/examples/number/step.vue +47 -47
  254. package/docs/examples/page/basic.vue +41 -41
  255. package/docs/examples/page/code-table-model.vue +428 -428
  256. package/docs/examples/page/dept-user-management.vue +211 -211
  257. package/docs/examples/page/init.vue +87 -87
  258. package/docs/examples/page/log.vue +453 -453
  259. package/docs/examples/page/user-management.vue +313 -313
  260. package/docs/examples/panel/tool-buttons.vue +18 -18
  261. package/docs/examples/radio/basic.vue +17 -17
  262. package/docs/examples/radio/button.vue +17 -17
  263. package/docs/examples/radio/color.vue +18 -18
  264. package/docs/examples/radio/disabled.vue +17 -17
  265. package/docs/examples/radio/size.vue +29 -29
  266. package/docs/examples/rate/basic.vue +24 -24
  267. package/docs/examples/rate/half.vue +24 -24
  268. package/docs/examples/rate/readonly.vue +11 -11
  269. package/docs/examples/rate/text.vue +37 -37
  270. package/docs/examples/select/basic.vue +16 -16
  271. package/docs/examples/select/clearable.vue +22 -22
  272. package/docs/examples/select/disabled.vue +31 -31
  273. package/docs/examples/select/filterable.vue +24 -24
  274. package/docs/examples/select/group.vue +23 -23
  275. package/docs/examples/select/icon.vue +16 -16
  276. package/docs/examples/select/multiple.vue +18 -18
  277. package/docs/examples/select/size.vue +39 -39
  278. package/docs/examples/slider/basic.vue +42 -42
  279. package/docs/examples/slider/disabled.vue +17 -17
  280. package/docs/examples/slider/marks.vue +30 -30
  281. package/docs/examples/slider/size.vue +37 -37
  282. package/docs/examples/slider/tooltip.vue +36 -36
  283. package/docs/examples/slider/vertical.vue +26 -26
  284. package/docs/examples/slider-captcha/basic.vue +44 -44
  285. package/docs/examples/slider-captcha/custom.vue +48 -48
  286. package/docs/examples/switch/basic.vue +16 -16
  287. package/docs/examples/switch/disabled.vue +13 -13
  288. package/docs/examples/switch/loading.vue +13 -13
  289. package/docs/examples/switch/size.vue +15 -15
  290. package/docs/examples/switch/text.vue +13 -13
  291. package/docs/examples/table/action-filter.vue +126 -126
  292. package/docs/examples/table/actions.vue +116 -116
  293. package/docs/examples/table/add-row.vue +103 -103
  294. package/docs/examples/table/basic.vue +168 -168
  295. package/docs/examples/table/checkbox-layout.vue +68 -68
  296. package/docs/examples/table/column-filter.vue +96 -96
  297. package/docs/examples/table/custom-layout.vue +115 -115
  298. package/docs/examples/table/custom-merge-cell.vue +206 -206
  299. package/docs/examples/table/dynamic-type.vue +73 -73
  300. package/docs/examples/table/editable.vue +262 -262
  301. package/docs/examples/table/field-selection.vue +87 -87
  302. package/docs/examples/table/frozen-column.vue +140 -140
  303. package/docs/examples/table/height-mode.vue +99 -99
  304. package/docs/examples/table/icon.vue +85 -85
  305. package/docs/examples/table/layer-form.vue +133 -133
  306. package/docs/examples/table/link.vue +66 -66
  307. package/docs/examples/table/merge-cell.vue +78 -78
  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/upload/accept.vue +31 -31
  355. package/docs/examples/upload/basic.vue +12 -12
  356. package/docs/examples/upload/drag.vue +11 -11
  357. package/docs/examples/upload/image.vue +17 -17
  358. package/docs/examples/upload/limit.vue +20 -20
  359. package/docs/examples/upload/multiple.vue +17 -17
  360. package/docs/examples/upload/readonly.vue +17 -17
  361. package/docs/examples/utils/cipher.vue +160 -160
  362. package/docs/examples/utils/common.vue +153 -153
  363. package/docs/examples/utils/date.vue +56 -56
  364. package/docs/examples/utils/dom.vue +52 -52
  365. package/docs/examples/utils/is.vue +70 -70
  366. package/docs/examples/workflow/basic.vue +265 -265
  367. package/docs/examples/workflow-viewer/basic.vue +248 -248
  368. 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,71 +1,71 @@
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
- ## API
59
-
60
- <ApiTable :data="compApi" componentName="comp" />
61
-
62
- <script setup>
63
- import Basic from '../examples/comp/basic.vue'
64
- import Tabs from '../examples/comp/tabs.vue'
65
- import Collapse from '../examples/comp/collapse.vue'
66
- import compApi from './meta/comp'
67
-
68
- import basicCode from '../examples/comp/basic.vue?raw'
69
- import tabsCode from '../examples/comp/tabs.vue?raw'
70
- import collapseCode from '../examples/comp/collapse.vue?raw'
71
- </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
+ ## API
59
+
60
+ <ApiTable :data="compApi" componentName="comp" />
61
+
62
+ <script setup>
63
+ import Basic from '../examples/comp/basic.vue'
64
+ import Tabs from '../examples/comp/tabs.vue'
65
+ import Collapse from '../examples/comp/collapse.vue'
66
+ import compApi from './meta/comp'
67
+
68
+ import basicCode from '../examples/comp/basic.vue?raw'
69
+ import tabsCode from '../examples/comp/tabs.vue?raw'
70
+ import collapseCode from '../examples/comp/collapse.vue?raw'
71
+ </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>