@a2simcode/ui 0.0.236 → 0.0.237

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