@a2simcode/ui 0.0.211 → 0.0.213

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