@a2simcode/ui 0.0.137 → 0.0.138

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 (341) 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/form/index.d.ts +21 -0
  6. package/dist/components/form/src/form.vue.d.ts +18 -0
  7. package/dist/components/inject-provide.d.ts +2 -0
  8. package/dist/simcode-ui.es.js +4700 -4653
  9. package/dist/simcode-ui.umd.js +2 -2
  10. package/dist/stats.html +1 -1
  11. package/dist/ui.css +1 -1
  12. package/docs/components/autocomplete.md +89 -89
  13. package/docs/components/barcode.md +101 -101
  14. package/docs/components/button-select.md +24 -24
  15. package/docs/components/button.md +117 -117
  16. package/docs/components/buttons.md +119 -119
  17. package/docs/components/cascader-select.md +114 -114
  18. package/docs/components/checkbox.md +114 -114
  19. package/docs/components/code-mirror.md +85 -85
  20. package/docs/components/collapse.md +26 -26
  21. package/docs/components/comp.md +71 -71
  22. package/docs/components/count-up.md +24 -24
  23. package/docs/components/count.md +24 -24
  24. package/docs/components/data-panel.md +24 -24
  25. package/docs/components/date.md +76 -76
  26. package/docs/components/dialog-full.md +112 -112
  27. package/docs/components/dialog.md +127 -127
  28. package/docs/components/divider.md +24 -24
  29. package/docs/components/drawer.md +127 -127
  30. package/docs/components/dynamic-layer.md +118 -118
  31. package/docs/components/echarts.md +72 -72
  32. package/docs/components/editor.md +24 -24
  33. package/docs/components/form.md +57 -57
  34. package/docs/components/guid.md +39 -39
  35. package/docs/components/hpanel.md +24 -24
  36. package/docs/components/icon.md +56 -56
  37. package/docs/components/input-button.md +24 -24
  38. package/docs/components/input-code.md +24 -24
  39. package/docs/components/input-color.md +114 -114
  40. package/docs/components/input-layer.md +26 -26
  41. package/docs/components/input-rows.md +370 -370
  42. package/docs/components/input-tag.md +50 -50
  43. package/docs/components/input.md +129 -129
  44. package/docs/components/layer-form.md +61 -61
  45. package/docs/components/layer.md +127 -127
  46. package/docs/components/layout.md +132 -132
  47. package/docs/components/map.md +24 -24
  48. package/docs/components/menu.md +121 -121
  49. package/docs/components/meta/buttons.ts +76 -76
  50. package/docs/components/meta/comp.ts +236 -236
  51. package/docs/components/meta/date.ts +267 -267
  52. package/docs/components/meta/echarts.ts +64 -64
  53. package/docs/components/meta/form-item.ts +50 -50
  54. package/docs/components/meta/form.ts +165 -165
  55. package/docs/components/meta/input-cards.ts +112 -112
  56. package/docs/components/meta/input-color.ts +243 -243
  57. package/docs/components/meta/input-layer.ts +366 -366
  58. package/docs/components/meta/input-rows.ts +113 -113
  59. package/docs/components/meta/layer-form.ts +56 -56
  60. package/docs/components/meta/map.ts +68 -68
  61. package/docs/components/meta/panel.ts +152 -152
  62. package/docs/components/meta/slider.ts +270 -270
  63. package/docs/components/meta/table-panel.ts +232 -232
  64. package/docs/components/meta/table.ts +391 -391
  65. package/docs/components/meta/tabs.ts +146 -146
  66. package/docs/components/meta/title.ts +91 -91
  67. package/docs/components/meta/tree-select.ts +199 -199
  68. package/docs/components/meta/vpanel.ts +19 -19
  69. package/docs/components/meta/workflow-viewer.ts +55 -55
  70. package/docs/components/number.md +124 -124
  71. package/docs/components/page.md +102 -102
  72. package/docs/components/panel.md +37 -37
  73. package/docs/components/radio.md +87 -87
  74. package/docs/components/rate.md +71 -71
  75. package/docs/components/select.md +133 -133
  76. package/docs/components/slider-captcha.md +41 -41
  77. package/docs/components/slider.md +101 -101
  78. package/docs/components/switch.md +90 -90
  79. package/docs/components/table-panel.md +236 -236
  80. package/docs/components/table.md +391 -391
  81. package/docs/components/tabs.md +26 -26
  82. package/docs/components/title.md +24 -24
  83. package/docs/components/tree.md +207 -207
  84. package/docs/components/upload.md +117 -117
  85. package/docs/components/workflow-viewer.md +21 -21
  86. package/docs/components/workflow.md +21 -21
  87. package/docs/examples/autocomplete/advanced.vue +35 -35
  88. package/docs/examples/autocomplete/basic.vue +32 -32
  89. package/docs/examples/autocomplete/clearable.vue +33 -33
  90. package/docs/examples/autocomplete/custom-template.vue +49 -49
  91. package/docs/examples/autocomplete/disabled.vue +33 -33
  92. package/docs/examples/autocomplete/icon.vue +37 -37
  93. package/docs/examples/barcode/all-types.vue +380 -380
  94. package/docs/examples/barcode/basic.vue +14 -14
  95. package/docs/examples/barcode/props-appearance.vue +243 -243
  96. package/docs/examples/barcode/props-geometry.vue +143 -143
  97. package/docs/examples/barcode/props-logic.vue +216 -216
  98. package/docs/examples/barcode/props-symbology.vue +199 -199
  99. package/docs/examples/barcode/props-text.vue +268 -268
  100. package/docs/examples/button/basic.vue +7 -7
  101. package/docs/examples/button/danger-ghost.vue +17 -17
  102. package/docs/examples/button/disabled.vue +10 -10
  103. package/docs/examples/button/loading.vue +6 -6
  104. package/docs/examples/button/shape.vue +7 -7
  105. package/docs/examples/button/size.vue +14 -14
  106. package/docs/examples/button/type.vue +9 -9
  107. package/docs/examples/button-select/basic.vue +19 -19
  108. package/docs/examples/buttons/basic.vue +45 -45
  109. package/docs/examples/buttons/disabled.vue +36 -36
  110. package/docs/examples/buttons/dropdown.vue +63 -63
  111. package/docs/examples/buttons/group.vue +52 -52
  112. package/docs/examples/buttons/link.vue +47 -47
  113. package/docs/examples/buttons/popup.vue +39 -39
  114. package/docs/examples/buttons/size.vue +45 -45
  115. package/docs/examples/cascader-select/basic.vue +28 -28
  116. package/docs/examples/cascader-select/clearable.vue +34 -34
  117. package/docs/examples/cascader-select/disabled.vue +43 -43
  118. package/docs/examples/cascader-select/filterable.vue +37 -37
  119. package/docs/examples/cascader-select/methods.vue +84 -84
  120. package/docs/examples/cascader-select/multiple.vue +38 -38
  121. package/docs/examples/cascader-select/slot.vue +45 -45
  122. package/docs/examples/checkbox/basic.vue +18 -18
  123. package/docs/examples/checkbox/button.vue +19 -19
  124. package/docs/examples/checkbox/color.vue +25 -25
  125. package/docs/examples/checkbox/disabled.vue +17 -17
  126. package/docs/examples/checkbox/min-max.vue +20 -20
  127. package/docs/examples/checkbox/mixed.vue +56 -56
  128. package/docs/examples/checkbox/size.vue +28 -28
  129. package/docs/examples/code-mirror/basic.vue +11 -11
  130. package/docs/examples/code-mirror/events.vue +42 -42
  131. package/docs/examples/code-mirror/height.vue +25 -25
  132. package/docs/examples/code-mirror/mode.vue +33 -33
  133. package/docs/examples/code-mirror/readonly.vue +14 -14
  134. package/docs/examples/collapse/basic.vue +82 -82
  135. package/docs/examples/comp/basic.vue +7 -7
  136. package/docs/examples/comp/collapse.vue +38 -38
  137. package/docs/examples/comp/tabs.vue +38 -38
  138. package/docs/examples/count/basic.vue +101 -101
  139. package/docs/examples/count-up/basic.vue +89 -89
  140. package/docs/examples/data-panel/basic.vue +110 -110
  141. package/docs/examples/date/basic.vue +73 -73
  142. package/docs/examples/date/default-value.vue +59 -59
  143. package/docs/examples/date/format.vue +75 -75
  144. package/docs/examples/date/range.vue +66 -66
  145. package/docs/examples/date/types.vue +79 -79
  146. package/docs/examples/decorated-title/basic.vue +31 -31
  147. package/docs/examples/dialog/basic.vue +36 -36
  148. package/docs/examples/dialog/custom-buttons.vue +44 -44
  149. package/docs/examples/dialog/fullscreen.vue +23 -23
  150. package/docs/examples/dialog/no-mask.vue +17 -17
  151. package/docs/examples/dialog/size.vue +44 -44
  152. package/docs/examples/dialog/steps.vue +57 -57
  153. package/docs/examples/dialog-full/basic.vue +29 -29
  154. package/docs/examples/dialog-full/custom-buttons.vue +45 -45
  155. package/docs/examples/dialog-full/no-buttons.vue +18 -18
  156. package/docs/examples/dialog-full/no-header.vue +27 -27
  157. package/docs/examples/dialog-full/steps.vue +71 -71
  158. package/docs/examples/divider/basic.vue +52 -52
  159. package/docs/examples/drawer/basic.vue +35 -35
  160. package/docs/examples/drawer/custom-buttons.vue +34 -34
  161. package/docs/examples/drawer/direction.vue +47 -47
  162. package/docs/examples/drawer/mask.vue +36 -36
  163. package/docs/examples/drawer/no-buttons.vue +20 -20
  164. package/docs/examples/drawer/size.vue +28 -28
  165. package/docs/examples/dynamic-layer/basic.vue +33 -33
  166. package/docs/examples/dynamic-layer/custom-buttons.vue +43 -43
  167. package/docs/examples/dynamic-layer/form.vue +73 -73
  168. package/docs/examples/dynamic-layer/steps.vue +52 -52
  169. package/docs/examples/dynamic-layer/types.vue +40 -40
  170. package/docs/examples/echarts/basic.vue +31 -31
  171. package/docs/examples/echarts/dynamic.vue +43 -43
  172. package/docs/examples/echarts/line.vue +46 -46
  173. package/docs/examples/echarts/pie.vue +44 -44
  174. package/docs/examples/editor/basic.vue +15 -15
  175. package/docs/examples/form/basic.vue +539 -539
  176. package/docs/examples/form/init.vue +76 -76
  177. package/docs/examples/form/master-detail.vue +203 -203
  178. package/docs/examples/guid/basic.vue +10 -10
  179. package/docs/examples/guid/size.vue +13 -13
  180. package/docs/examples/hpanel/basic.vue +79 -79
  181. package/docs/examples/icon/basic.vue +9 -9
  182. package/docs/examples/icon/rotate-flip.vue +9 -9
  183. package/docs/examples/icon/size.vue +7 -7
  184. package/docs/examples/input/basic.vue +10 -10
  185. package/docs/examples/input/clearable.vue +12 -12
  186. package/docs/examples/input/disabled.vue +6 -6
  187. package/docs/examples/input/icon.vue +23 -23
  188. package/docs/examples/input/password.vue +18 -18
  189. package/docs/examples/input/size.vue +13 -13
  190. package/docs/examples/input/textarea.vue +25 -25
  191. package/docs/examples/input/word-limit.vue +28 -28
  192. package/docs/examples/input-button/basic.vue +33 -33
  193. package/docs/examples/input-code/basic.vue +29 -29
  194. package/docs/examples/input-color/basic.vue +10 -10
  195. package/docs/examples/input-color/disabled.vue +13 -13
  196. package/docs/examples/input-color/format.vue +17 -17
  197. package/docs/examples/input-color/no-alpha.vue +13 -13
  198. package/docs/examples/input-color/only-button.vue +15 -15
  199. package/docs/examples/input-color/predefine.vue +31 -31
  200. package/docs/examples/input-color/size.vue +15 -15
  201. package/docs/examples/input-layer/basic.vue +86 -86
  202. package/docs/examples/input-rows/basic.vue +73 -73
  203. package/docs/examples/input-rows/drag.vue +48 -48
  204. package/docs/examples/input-rows/layer-form.vue +85 -85
  205. package/docs/examples/input-rows/nested.vue +91 -91
  206. package/docs/examples/input-tag/basic.vue +27 -27
  207. package/docs/examples/input-tag/colors.vue +23 -23
  208. package/docs/examples/input-tag/readonly.vue +17 -17
  209. package/docs/examples/layer/basic.vue +43 -43
  210. package/docs/examples/layer/custom-buttons.vue +61 -61
  211. package/docs/examples/layer/drawer.vue +37 -37
  212. package/docs/examples/layer/full.vue +38 -38
  213. package/docs/examples/layer/modal.vue +34 -34
  214. package/docs/examples/layer/steps.vue +46 -46
  215. package/docs/examples/layer-form/basic.vue +76 -76
  216. package/docs/examples/layer-form/config.vue +82 -82
  217. package/docs/examples/layer-form/size.vue +72 -72
  218. package/docs/examples/layout/basic.vue +36 -36
  219. package/docs/examples/layout/custom-size.vue +50 -50
  220. package/docs/examples/layout/disable-move.vue +37 -37
  221. package/docs/examples/layout/hide-mid-when-narrow.vue +96 -96
  222. package/docs/examples/layout/min-size.vue +73 -73
  223. package/docs/examples/layout/percent-size.vue +80 -80
  224. package/docs/examples/layout/simple.vue +22 -22
  225. package/docs/examples/layout/top-side.vue +34 -34
  226. package/docs/examples/map/basic.vue +22 -22
  227. package/docs/examples/menu/basic.vue +58 -58
  228. package/docs/examples/menu/collapsed.vue +49 -49
  229. package/docs/examples/menu/horizontal.vue +44 -44
  230. package/docs/examples/menu/selection-test.vue +104 -104
  231. package/docs/examples/menu/theme.vue +46 -46
  232. package/docs/examples/menu/vertical.vue +46 -46
  233. package/docs/examples/number/advanced.vue +143 -143
  234. package/docs/examples/number/basic.vue +63 -63
  235. package/docs/examples/number/disabled.vue +49 -49
  236. package/docs/examples/number/size.vue +42 -42
  237. package/docs/examples/number/slots.vue +123 -123
  238. package/docs/examples/number/step-strictly.vue +41 -41
  239. package/docs/examples/number/step.vue +47 -47
  240. package/docs/examples/page/basic.vue +41 -41
  241. package/docs/examples/page/code-table-model.vue +428 -428
  242. package/docs/examples/page/dept-user-management.vue +211 -211
  243. package/docs/examples/page/init.vue +87 -87
  244. package/docs/examples/page/log.vue +453 -453
  245. package/docs/examples/page/user-management.vue +313 -313
  246. package/docs/examples/panel/tool-buttons.vue +18 -18
  247. package/docs/examples/radio/basic.vue +17 -17
  248. package/docs/examples/radio/button.vue +17 -17
  249. package/docs/examples/radio/color.vue +18 -18
  250. package/docs/examples/radio/disabled.vue +17 -17
  251. package/docs/examples/radio/size.vue +29 -29
  252. package/docs/examples/rate/basic.vue +24 -24
  253. package/docs/examples/rate/half.vue +24 -24
  254. package/docs/examples/rate/readonly.vue +11 -11
  255. package/docs/examples/rate/text.vue +37 -37
  256. package/docs/examples/select/basic.vue +16 -16
  257. package/docs/examples/select/clearable.vue +22 -22
  258. package/docs/examples/select/disabled.vue +31 -31
  259. package/docs/examples/select/filterable.vue +24 -24
  260. package/docs/examples/select/group.vue +23 -23
  261. package/docs/examples/select/icon.vue +16 -16
  262. package/docs/examples/select/multiple.vue +18 -18
  263. package/docs/examples/select/size.vue +39 -39
  264. package/docs/examples/slider/basic.vue +42 -42
  265. package/docs/examples/slider/disabled.vue +17 -17
  266. package/docs/examples/slider/marks.vue +30 -30
  267. package/docs/examples/slider/size.vue +37 -37
  268. package/docs/examples/slider/tooltip.vue +36 -36
  269. package/docs/examples/slider/vertical.vue +26 -26
  270. package/docs/examples/slider-captcha/basic.vue +44 -44
  271. package/docs/examples/slider-captcha/custom.vue +48 -48
  272. package/docs/examples/switch/basic.vue +16 -16
  273. package/docs/examples/switch/disabled.vue +13 -13
  274. package/docs/examples/switch/loading.vue +13 -13
  275. package/docs/examples/switch/size.vue +15 -15
  276. package/docs/examples/switch/text.vue +13 -13
  277. package/docs/examples/table/action-filter.vue +126 -126
  278. package/docs/examples/table/actions.vue +116 -116
  279. package/docs/examples/table/add-row.vue +103 -103
  280. package/docs/examples/table/basic.vue +168 -168
  281. package/docs/examples/table/checkbox-layout.vue +68 -68
  282. package/docs/examples/table/custom-layout.vue +115 -115
  283. package/docs/examples/table/dynamic-type.vue +73 -73
  284. package/docs/examples/table/editable.vue +262 -262
  285. package/docs/examples/table/field-selection.vue +87 -87
  286. package/docs/examples/table/frozen-column.vue +140 -140
  287. package/docs/examples/table/height-mode.vue +99 -99
  288. package/docs/examples/table/icon.vue +85 -85
  289. package/docs/examples/table/link.vue +66 -66
  290. package/docs/examples/table/multiple.vue +188 -188
  291. package/docs/examples/table/pagination.vue +151 -151
  292. package/docs/examples/table/single-selection.vue +64 -64
  293. package/docs/examples/table/sub-table-lazy.vue +97 -97
  294. package/docs/examples/table/sub-table.vue +103 -103
  295. package/docs/examples/table/tag.vue +43 -43
  296. package/docs/examples/table/tree-column.vue +119 -119
  297. package/docs/examples/table/tree-data.vue +141 -141
  298. package/docs/examples/table/tree-default-expand-all.vue +60 -60
  299. package/docs/examples/table/tree-lazy.vue +80 -80
  300. package/docs/examples/table/tree-set-selection.vue +75 -75
  301. package/docs/examples/table-panel/basic.vue +229 -229
  302. package/docs/examples/table-panel/batch-operations.vue +285 -285
  303. package/docs/examples/table-panel/button-visibility.vue +88 -88
  304. package/docs/examples/table-panel/filter.vue +219 -219
  305. package/docs/examples/table-panel/get-selection.vue +111 -111
  306. package/docs/examples/table-panel/multiple-selection.vue +243 -243
  307. package/docs/examples/table-panel/pagination.vue +133 -133
  308. package/docs/examples/table-panel/sub-table-lazy.vue +118 -118
  309. package/docs/examples/table-panel/tree-parent-key.vue +67 -67
  310. package/docs/examples/tabs/basic.vue +98 -98
  311. package/docs/examples/time/base.vue +67 -67
  312. package/docs/examples/title/basic.vue +87 -87
  313. package/docs/examples/tree/accordion.vue +46 -46
  314. package/docs/examples/tree/basic.vue +50 -50
  315. package/docs/examples/tree/buttons.vue +53 -53
  316. package/docs/examples/tree/checkable.vue +52 -52
  317. package/docs/examples/tree/custom-keys.vue +39 -39
  318. package/docs/examples/tree/default-expanded.vue +52 -52
  319. package/docs/examples/tree/draggable.vue +29 -29
  320. package/docs/examples/tree/expand-on-click.vue +39 -39
  321. package/docs/examples/tree/flat-data.vue +20 -20
  322. package/docs/examples/tree/icon.vue +40 -40
  323. package/docs/examples/tree/load-data.vue +37 -37
  324. package/docs/examples/tree/methods.vue +74 -74
  325. package/docs/examples/tree/theme.vue +33 -33
  326. package/docs/examples/tree-select/basic.vue +47 -47
  327. package/docs/examples/upload/accept.vue +31 -31
  328. package/docs/examples/upload/basic.vue +12 -12
  329. package/docs/examples/upload/drag.vue +11 -11
  330. package/docs/examples/upload/image.vue +17 -17
  331. package/docs/examples/upload/limit.vue +20 -20
  332. package/docs/examples/upload/multiple.vue +17 -17
  333. package/docs/examples/upload/readonly.vue +17 -17
  334. package/docs/examples/utils/cipher.vue +160 -160
  335. package/docs/examples/utils/common.vue +153 -153
  336. package/docs/examples/utils/date.vue +56 -56
  337. package/docs/examples/utils/dom.vue +52 -52
  338. package/docs/examples/utils/is.vue +70 -70
  339. package/docs/examples/workflow/basic.vue +265 -265
  340. package/docs/examples/workflow-viewer/basic.vue +248 -248
  341. package/package.json +23 -23
@@ -1,118 +1,118 @@
1
- # DynamicLayer 动态层
2
-
3
- 动态加载组件的弹层,基于 Layer 组件封装,支持动态渲染任意组件并提供统一的弹层交互。
4
-
5
- ## 基础用法
6
-
7
- 通过 `open` 方法打开弹层,动态加载指定组件。
8
-
9
- <Demo :source-code="dynamicLayerBasicCode">
10
- <template #source>
11
- <dynamic-layer-basic />
12
- </template>
13
- <template #description>
14
- 使用 `ref` 调用 `open` 方法打开弹层,通过 `name` 属性指定要加载的组件。
15
- </template>
16
- </Demo>
17
-
18
- ## 表单场景
19
-
20
- 适用于动态表单的场景,组件内可以定义 `open` 和 `ok` 方法与弹层交互。
21
-
22
- <Demo :source-code="dynamicLayerFormCode">
23
- <template #source>
24
- <dynamic-layer-form />
25
- </template>
26
- <template #description>
27
- 动态组件可以通过 `expose` 暴露 `open` 和 `ok` 方法。`open` 方法接收传入的参数,`ok` 方法在点击确定时调用,返回 `true` 时弹层关闭。
28
- </template>
29
- </Demo>
30
-
31
- ## 不同类型
32
-
33
- 支持 modal、drawer、full 三种弹层类型。
34
-
35
- <Demo :source-code="dynamicLayerTypesCode">
36
- <template #source>
37
- <dynamic-layer-types />
38
- </template>
39
- <template #description>
40
- 通过 `type` 参数指定弹层类型,支持弹窗(modal)、抽屉(drawer)、全屏(full)三种形式。
41
- </template>
42
- </Demo>
43
-
44
- ## 自定义按钮
45
-
46
- 组件内可以通过 `getConfig` 方法返回自定义按钮配置。
47
-
48
- <Demo :source-code="dynamicLayerCustomButtonsCode">
49
- <template #source>
50
- <dynamic-layer-custom-buttons />
51
- </template>
52
- <template #description>
53
- 动态组件通过 `getConfig` 方法返回 `buttons` 数组,可以添加自定义按钮。设置 `hasSaveBtn` 为 `false` 可隐藏默认保存按钮。
54
- </template>
55
- </Demo>
56
-
57
- ## 步骤弹窗
58
-
59
- 支持步骤条模式的弹层。
60
-
61
- <Demo :source-code="dynamicLayerStepsCode">
62
- <template #source>
63
- <dynamic-layer-steps />
64
- </template>
65
- <template #description>
66
- 动态组件通过 `getConfig` 返回 `isStep` 和 `steps` 配置步骤条,通过 `validateSteps` 方法进行步骤校验。
67
- </template>
68
- </Demo>
69
-
70
- ## API
71
-
72
- ### 方法
73
-
74
- | 方法名 | 说明 | 参数 |
75
- | ------ | -------- | -------------------------------- |
76
- | open | 打开弹层 | `(data: LayerParamType) => void` |
77
-
78
- ### LayerParamType 参数
79
-
80
- <ApiTable :data="dynamicLayerApi" componentName="dynamic-layer" />
81
-
82
- ### 动态组件约定
83
-
84
- 动态加载的组件可以通过 `expose` 暴露以下方法与弹层交互:
85
-
86
- | 方法名 | 说明 | 参数 | 返回值 |
87
- | ------------- | ------------------ | ------------------------------------------------ | --------------------------------------------------------- |
88
- | open | 弹层打开时调用 | `(param: any, layerRef: any, afterOk: Function)` | `Promise<{ buttons?: any[] }>` |
89
- | ok | 点击确定按钮时调用 | - | `Promise<boolean \| any>` |
90
- | closed | 弹层关闭后调用 | - | `void` |
91
- | beforeClose | 弹层关闭前调用 | - | `boolean \| Promise<boolean>` |
92
- | getConfig | 获取弹层配置 | - | `{ isStep?: boolean, steps?: string[], buttons?: any[] }` |
93
- | validateSteps | 步骤校验 | `(stepActive: number)` | `Promise<boolean>` |
94
-
95
- ### 回调函数
96
-
97
- 可以通过 `open` 方法的参数传入以下回调函数:
98
-
99
- | 回调名 | 说明 | 参数 |
100
- | ----------- | ---------- | --------------------- |
101
- | afterOk | 确定后回调 | `(data: any) => void` |
102
- | afterClose | 关闭后回调 | `() => void` |
103
- | afterCancel | 取消后回调 | `() => void` |
104
-
105
- <script setup>
106
- import DynamicLayerBasic from '../examples/dynamic-layer/basic.vue'
107
- import DynamicLayerForm from '../examples/dynamic-layer/form.vue'
108
- import DynamicLayerTypes from '../examples/dynamic-layer/types.vue'
109
- import DynamicLayerCustomButtons from '../examples/dynamic-layer/custom-buttons.vue'
110
- import DynamicLayerSteps from '../examples/dynamic-layer/steps.vue'
111
- import dynamicLayerApi from './meta/dynamic-layer'
112
-
113
- import dynamicLayerBasicCode from '../examples/dynamic-layer/basic.vue?raw'
114
- import dynamicLayerFormCode from '../examples/dynamic-layer/form.vue?raw'
115
- import dynamicLayerTypesCode from '../examples/dynamic-layer/types.vue?raw'
116
- import dynamicLayerCustomButtonsCode from '../examples/dynamic-layer/custom-buttons.vue?raw'
117
- import dynamicLayerStepsCode from '../examples/dynamic-layer/steps.vue?raw'
118
- </script>
1
+ # DynamicLayer 动态层
2
+
3
+ 动态加载组件的弹层,基于 Layer 组件封装,支持动态渲染任意组件并提供统一的弹层交互。
4
+
5
+ ## 基础用法
6
+
7
+ 通过 `open` 方法打开弹层,动态加载指定组件。
8
+
9
+ <Demo :source-code="dynamicLayerBasicCode">
10
+ <template #source>
11
+ <dynamic-layer-basic />
12
+ </template>
13
+ <template #description>
14
+ 使用 `ref` 调用 `open` 方法打开弹层,通过 `name` 属性指定要加载的组件。
15
+ </template>
16
+ </Demo>
17
+
18
+ ## 表单场景
19
+
20
+ 适用于动态表单的场景,组件内可以定义 `open` 和 `ok` 方法与弹层交互。
21
+
22
+ <Demo :source-code="dynamicLayerFormCode">
23
+ <template #source>
24
+ <dynamic-layer-form />
25
+ </template>
26
+ <template #description>
27
+ 动态组件可以通过 `expose` 暴露 `open` 和 `ok` 方法。`open` 方法接收传入的参数,`ok` 方法在点击确定时调用,返回 `true` 时弹层关闭。
28
+ </template>
29
+ </Demo>
30
+
31
+ ## 不同类型
32
+
33
+ 支持 modal、drawer、full 三种弹层类型。
34
+
35
+ <Demo :source-code="dynamicLayerTypesCode">
36
+ <template #source>
37
+ <dynamic-layer-types />
38
+ </template>
39
+ <template #description>
40
+ 通过 `type` 参数指定弹层类型,支持弹窗(modal)、抽屉(drawer)、全屏(full)三种形式。
41
+ </template>
42
+ </Demo>
43
+
44
+ ## 自定义按钮
45
+
46
+ 组件内可以通过 `getConfig` 方法返回自定义按钮配置。
47
+
48
+ <Demo :source-code="dynamicLayerCustomButtonsCode">
49
+ <template #source>
50
+ <dynamic-layer-custom-buttons />
51
+ </template>
52
+ <template #description>
53
+ 动态组件通过 `getConfig` 方法返回 `buttons` 数组,可以添加自定义按钮。设置 `hasSaveBtn` 为 `false` 可隐藏默认保存按钮。
54
+ </template>
55
+ </Demo>
56
+
57
+ ## 步骤弹窗
58
+
59
+ 支持步骤条模式的弹层。
60
+
61
+ <Demo :source-code="dynamicLayerStepsCode">
62
+ <template #source>
63
+ <dynamic-layer-steps />
64
+ </template>
65
+ <template #description>
66
+ 动态组件通过 `getConfig` 返回 `isStep` 和 `steps` 配置步骤条,通过 `validateSteps` 方法进行步骤校验。
67
+ </template>
68
+ </Demo>
69
+
70
+ ## API
71
+
72
+ ### 方法
73
+
74
+ | 方法名 | 说明 | 参数 |
75
+ | ------ | -------- | -------------------------------- |
76
+ | open | 打开弹层 | `(data: LayerParamType) => void` |
77
+
78
+ ### LayerParamType 参数
79
+
80
+ <ApiTable :data="dynamicLayerApi" componentName="dynamic-layer" />
81
+
82
+ ### 动态组件约定
83
+
84
+ 动态加载的组件可以通过 `expose` 暴露以下方法与弹层交互:
85
+
86
+ | 方法名 | 说明 | 参数 | 返回值 |
87
+ | ------------- | ------------------ | ------------------------------------------------ | --------------------------------------------------------- |
88
+ | open | 弹层打开时调用 | `(param: any, layerRef: any, afterOk: Function)` | `Promise<{ buttons?: any[] }>` |
89
+ | ok | 点击确定按钮时调用 | - | `Promise<boolean \| any>` |
90
+ | closed | 弹层关闭后调用 | - | `void` |
91
+ | beforeClose | 弹层关闭前调用 | - | `boolean \| Promise<boolean>` |
92
+ | getConfig | 获取弹层配置 | - | `{ isStep?: boolean, steps?: string[], buttons?: any[] }` |
93
+ | validateSteps | 步骤校验 | `(stepActive: number)` | `Promise<boolean>` |
94
+
95
+ ### 回调函数
96
+
97
+ 可以通过 `open` 方法的参数传入以下回调函数:
98
+
99
+ | 回调名 | 说明 | 参数 |
100
+ | ----------- | ---------- | --------------------- |
101
+ | afterOk | 确定后回调 | `(data: any) => void` |
102
+ | afterClose | 关闭后回调 | `() => void` |
103
+ | afterCancel | 取消后回调 | `() => void` |
104
+
105
+ <script setup>
106
+ import DynamicLayerBasic from '../examples/dynamic-layer/basic.vue'
107
+ import DynamicLayerForm from '../examples/dynamic-layer/form.vue'
108
+ import DynamicLayerTypes from '../examples/dynamic-layer/types.vue'
109
+ import DynamicLayerCustomButtons from '../examples/dynamic-layer/custom-buttons.vue'
110
+ import DynamicLayerSteps from '../examples/dynamic-layer/steps.vue'
111
+ import dynamicLayerApi from './meta/dynamic-layer'
112
+
113
+ import dynamicLayerBasicCode from '../examples/dynamic-layer/basic.vue?raw'
114
+ import dynamicLayerFormCode from '../examples/dynamic-layer/form.vue?raw'
115
+ import dynamicLayerTypesCode from '../examples/dynamic-layer/types.vue?raw'
116
+ import dynamicLayerCustomButtonsCode from '../examples/dynamic-layer/custom-buttons.vue?raw'
117
+ import dynamicLayerStepsCode from '../examples/dynamic-layer/steps.vue?raw'
118
+ </script>
@@ -1,72 +1,72 @@
1
- # Echarts 图表
2
-
3
- 基于 ECharts 的 Vue 3 图表组件封装。
4
-
5
- ## 基础用法
6
-
7
- 通过 `option` 属性传入 ECharts 配置。
8
-
9
- <Demo :source-code="echartsBasicCode">
10
- <template #source>
11
- <echarts-basic />
12
- </template>
13
- <template #description>
14
- 最基础的柱状图示例,通过点击事件可以获取图表数据。
15
- </template>
16
- </Demo>
17
-
18
- ## 折线图
19
-
20
- 使用折线图展示趋势数据。
21
-
22
- <Demo :source-code="echartsLineCode">
23
- <template #source>
24
- <echarts-line />
25
- </template>
26
- <template #description>
27
- 多系列折线图,适合展示趋势对比。
28
- </template>
29
- </Demo>
30
-
31
- ## 饼图
32
-
33
- 使用饼图展示占比数据。
34
-
35
- <Demo :source-code="echartsPieCode">
36
- <template #source>
37
- <echarts-pie />
38
- </template>
39
- <template #description>
40
- 饼图适合展示各部分在整体中的占比。
41
- </template>
42
- </Demo>
43
-
44
- ## 动态数据
45
-
46
- 图表数据可以动态更新。
47
-
48
- <Demo :source-code="echartsDynamicCode">
49
- <template #source>
50
- <echarts-dynamic />
51
- </template>
52
- <template #description>
53
- 通过修改 `option` 数据,图表会自动更新。
54
- </template>
55
- </Demo>
56
-
57
- ## API
58
-
59
- <ApiTable :data="echartsApi" componentName="echarts" />
60
-
61
- <script setup>
62
- import EchartsBasic from '../examples/echarts/basic.vue'
63
- import EchartsLine from '../examples/echarts/line.vue'
64
- import EchartsPie from '../examples/echarts/pie.vue'
65
- import EchartsDynamic from '../examples/echarts/dynamic.vue'
66
- import echartsApi from './meta/echarts'
67
-
68
- import echartsBasicCode from '../examples/echarts/basic.vue?raw'
69
- import echartsLineCode from '../examples/echarts/line.vue?raw'
70
- import echartsPieCode from '../examples/echarts/pie.vue?raw'
71
- import echartsDynamicCode from '../examples/echarts/dynamic.vue?raw'
72
- </script>
1
+ # Echarts 图表
2
+
3
+ 基于 ECharts 的 Vue 3 图表组件封装。
4
+
5
+ ## 基础用法
6
+
7
+ 通过 `option` 属性传入 ECharts 配置。
8
+
9
+ <Demo :source-code="echartsBasicCode">
10
+ <template #source>
11
+ <echarts-basic />
12
+ </template>
13
+ <template #description>
14
+ 最基础的柱状图示例,通过点击事件可以获取图表数据。
15
+ </template>
16
+ </Demo>
17
+
18
+ ## 折线图
19
+
20
+ 使用折线图展示趋势数据。
21
+
22
+ <Demo :source-code="echartsLineCode">
23
+ <template #source>
24
+ <echarts-line />
25
+ </template>
26
+ <template #description>
27
+ 多系列折线图,适合展示趋势对比。
28
+ </template>
29
+ </Demo>
30
+
31
+ ## 饼图
32
+
33
+ 使用饼图展示占比数据。
34
+
35
+ <Demo :source-code="echartsPieCode">
36
+ <template #source>
37
+ <echarts-pie />
38
+ </template>
39
+ <template #description>
40
+ 饼图适合展示各部分在整体中的占比。
41
+ </template>
42
+ </Demo>
43
+
44
+ ## 动态数据
45
+
46
+ 图表数据可以动态更新。
47
+
48
+ <Demo :source-code="echartsDynamicCode">
49
+ <template #source>
50
+ <echarts-dynamic />
51
+ </template>
52
+ <template #description>
53
+ 通过修改 `option` 数据,图表会自动更新。
54
+ </template>
55
+ </Demo>
56
+
57
+ ## API
58
+
59
+ <ApiTable :data="echartsApi" componentName="echarts" />
60
+
61
+ <script setup>
62
+ import EchartsBasic from '../examples/echarts/basic.vue'
63
+ import EchartsLine from '../examples/echarts/line.vue'
64
+ import EchartsPie from '../examples/echarts/pie.vue'
65
+ import EchartsDynamic from '../examples/echarts/dynamic.vue'
66
+ import echartsApi from './meta/echarts'
67
+
68
+ import echartsBasicCode from '../examples/echarts/basic.vue?raw'
69
+ import echartsLineCode from '../examples/echarts/line.vue?raw'
70
+ import echartsPieCode from '../examples/echarts/pie.vue?raw'
71
+ import echartsDynamicCode from '../examples/echarts/dynamic.vue?raw'
72
+ </script>
@@ -1,24 +1,24 @@
1
- # Editor 富文本编辑器
2
-
3
- 基于 wangeditor 的富文本编辑器组件。
4
-
5
- ## 基础用法
6
-
7
- <Demo :source-code="editorBasicCode">
8
- <template #source>
9
- <editor-basic />
10
- </template>
11
- <template #description>
12
- 基础用法,支持 `v-model:value` 双向绑定。
13
- </template>
14
- </Demo>
15
-
16
- ## API
17
-
18
- <ApiTable :data="editorApi" componentName="editor" />
19
-
20
- <script setup>
21
- import EditorBasic from '../examples/editor/basic.vue'
22
- import editorApi from './meta/editor'
23
- import editorBasicCode from '../examples/editor/basic.vue?raw'
24
- </script>
1
+ # Editor 富文本编辑器
2
+
3
+ 基于 wangeditor 的富文本编辑器组件。
4
+
5
+ ## 基础用法
6
+
7
+ <Demo :source-code="editorBasicCode">
8
+ <template #source>
9
+ <editor-basic />
10
+ </template>
11
+ <template #description>
12
+ 基础用法,支持 `v-model:value` 双向绑定。
13
+ </template>
14
+ </Demo>
15
+
16
+ ## API
17
+
18
+ <ApiTable :data="editorApi" componentName="editor" />
19
+
20
+ <script setup>
21
+ import EditorBasic from '../examples/editor/basic.vue'
22
+ import editorApi from './meta/editor'
23
+ import editorBasicCode from '../examples/editor/basic.vue?raw'
24
+ </script>
@@ -1,57 +1,57 @@
1
- # Form 表单
2
-
3
- `j-form` 是一个强大的动态表单组件,支持通过 Schema 配置来生成表单,提供了完整的表单验证、数据管理和事件处理能力。
4
-
5
- ## 基础用法
6
-
7
- 通过 `schema` 属性定义表单结构,`config` 属性配置表单样式。
8
-
9
- <Demo :source-code="basicCode">
10
- <template #source>
11
- <basic />
12
- </template>
13
- <template #description>
14
- 使用 `j-form` 快速创建一个包含多个输入项的表单。通过 `validate` 方法进行表单验证,通过 `getFormData` 方法获取表单数据;也可以通过 `init` 方法在运行时重新加载 Schema(可选传入初始数据)。
15
- </template>
16
- </Demo>
17
-
18
- ## Init 方法
19
-
20
- 通过模板引用调用 `init(schema, data)`,可以在运行时重新初始化表单 Schema,并可选传入初始数据。
21
-
22
- <Demo :source-code="initCode">
23
- <template #source>
24
- <init />
25
- </template>
26
- <template #description>
27
- 点击按钮切换不同的 Schema,并通过第二个参数传入初始数据。
28
- </template>
29
- </Demo>
30
-
31
- ## 主从表(主表 + 子表)
32
-
33
- 通过 `j-layout` 划分区域,并在 `children` 中利用 `j-table` 搭配其子级输入组件,可以实现复杂的主从表(表单 + 子表格)布局。
34
-
35
- <Demo :source-code="masterDetailCode">
36
- <template #source>
37
- <master-detail />
38
- </template>
39
- <template #description>
40
- 结合 `j-layout` 布局组件实现主从表单。在子表中配置 `editConfig: { isAddBtn: true, isRemoveBtn: true }` 并提供 `addRow` 函数来管理行数据;通过 `slot: 'top'` 指定字段归属为主表区域。
41
- </template>
42
- </Demo>
43
-
44
- ## API
45
-
46
- <ApiTable :data="formApi" componentName="form" />
47
-
48
- <script setup>
49
- import Basic from '../examples/form/basic.vue'
50
- import Init from '../examples/form/init.vue'
51
- import MasterDetail from '../examples/form/master-detail.vue'
52
- import formApi from './meta/form'
53
-
54
- import basicCode from '../examples/form/basic.vue?raw'
55
- import initCode from '../examples/form/init.vue?raw'
56
- import masterDetailCode from '../examples/form/master-detail.vue?raw'
57
- </script>
1
+ # Form 表单
2
+
3
+ `j-form` 是一个强大的动态表单组件,支持通过 Schema 配置来生成表单,提供了完整的表单验证、数据管理和事件处理能力。
4
+
5
+ ## 基础用法
6
+
7
+ 通过 `schema` 属性定义表单结构,`config` 属性配置表单样式。
8
+
9
+ <Demo :source-code="basicCode">
10
+ <template #source>
11
+ <basic />
12
+ </template>
13
+ <template #description>
14
+ 使用 `j-form` 快速创建一个包含多个输入项的表单。通过 `validate` 方法进行表单验证,通过 `getFormData` 方法获取表单数据;也可以通过 `init` 方法在运行时重新加载 Schema(可选传入初始数据)。
15
+ </template>
16
+ </Demo>
17
+
18
+ ## Init 方法
19
+
20
+ 通过模板引用调用 `init(schema, data)`,可以在运行时重新初始化表单 Schema,并可选传入初始数据。
21
+
22
+ <Demo :source-code="initCode">
23
+ <template #source>
24
+ <init />
25
+ </template>
26
+ <template #description>
27
+ 点击按钮切换不同的 Schema,并通过第二个参数传入初始数据。
28
+ </template>
29
+ </Demo>
30
+
31
+ ## 主从表(主表 + 子表)
32
+
33
+ 通过 `j-layout` 划分区域,并在 `children` 中利用 `j-table` 搭配其子级输入组件,可以实现复杂的主从表(表单 + 子表格)布局。
34
+
35
+ <Demo :source-code="masterDetailCode">
36
+ <template #source>
37
+ <master-detail />
38
+ </template>
39
+ <template #description>
40
+ 结合 `j-layout` 布局组件实现主从表单。在子表中配置 `editConfig: { isAddBtn: true, isRemoveBtn: true }` 并提供 `addRow` 函数来管理行数据;通过 `slot: 'top'` 指定字段归属为主表区域。
41
+ </template>
42
+ </Demo>
43
+
44
+ ## API
45
+
46
+ <ApiTable :data="formApi" componentName="form" />
47
+
48
+ <script setup>
49
+ import Basic from '../examples/form/basic.vue'
50
+ import Init from '../examples/form/init.vue'
51
+ import MasterDetail from '../examples/form/master-detail.vue'
52
+ import formApi from './meta/form'
53
+
54
+ import basicCode from '../examples/form/basic.vue?raw'
55
+ import initCode from '../examples/form/init.vue?raw'
56
+ import masterDetailCode from '../examples/form/master-detail.vue?raw'
57
+ </script>
@@ -1,39 +1,39 @@
1
- # GUID 全局唯一标识符
2
-
3
- 用于生成和展示全局唯一标识符(GUID/UUID)。当不指定值时,组件会自动生成一个UUID,这在创建新记录或需要唯一标识时非常有用。
4
-
5
- ## 基础用法
6
-
7
- <Demo :source-code="guidBasicCode">
8
- <template #source>
9
- <guid-basic />
10
- </template>
11
- <template #description>
12
- 自动生成UUID,如果需要指定特定的GUID值,可以通过 v-model 绑定。
13
- </template>
14
- </Demo>
15
-
16
- ## 不同尺寸
17
-
18
- Guid 组件提供三种尺寸。
19
-
20
- <Demo :source-code="guidSizeCode">
21
- <template #source>
22
- <guid-size />
23
- </template>
24
- <template #description>
25
- 使用 size 属性改变组件大小。除了默认大小外,还有另外两个选项:large, small。
26
- </template>
27
- </Demo>
28
-
29
- ## API
30
-
31
- <ApiTable :data="guidApi" componentName="guid" />
32
-
33
- <script setup>
34
- import GuidBasic from '../examples/guid/basic.vue'
35
- import GuidSize from '../examples/guid/size.vue'
36
- import guidApi from './meta/guid'
37
- import guidBasicCode from '../examples/guid/basic.vue?raw'
38
- import guidSizeCode from '../examples/guid/size.vue?raw'
39
- </script>
1
+ # GUID 全局唯一标识符
2
+
3
+ 用于生成和展示全局唯一标识符(GUID/UUID)。当不指定值时,组件会自动生成一个UUID,这在创建新记录或需要唯一标识时非常有用。
4
+
5
+ ## 基础用法
6
+
7
+ <Demo :source-code="guidBasicCode">
8
+ <template #source>
9
+ <guid-basic />
10
+ </template>
11
+ <template #description>
12
+ 自动生成UUID,如果需要指定特定的GUID值,可以通过 v-model 绑定。
13
+ </template>
14
+ </Demo>
15
+
16
+ ## 不同尺寸
17
+
18
+ Guid 组件提供三种尺寸。
19
+
20
+ <Demo :source-code="guidSizeCode">
21
+ <template #source>
22
+ <guid-size />
23
+ </template>
24
+ <template #description>
25
+ 使用 size 属性改变组件大小。除了默认大小外,还有另外两个选项:large, small。
26
+ </template>
27
+ </Demo>
28
+
29
+ ## API
30
+
31
+ <ApiTable :data="guidApi" componentName="guid" />
32
+
33
+ <script setup>
34
+ import GuidBasic from '../examples/guid/basic.vue'
35
+ import GuidSize from '../examples/guid/size.vue'
36
+ import guidApi from './meta/guid'
37
+ import guidBasicCode from '../examples/guid/basic.vue?raw'
38
+ import guidSizeCode from '../examples/guid/size.vue?raw'
39
+ </script>