@a2simcode/ui 0.0.238 → 0.0.240

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