@a2simcode/ui 0.0.265 → 0.0.266

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 (366) 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 +1089 -1084
  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/card-list.md +38 -38
  15. package/docs/components/cascader-select.md +114 -114
  16. package/docs/components/checkbox.md +114 -114
  17. package/docs/components/code-mirror.md +85 -85
  18. package/docs/components/collapse.md +26 -26
  19. package/docs/components/comp.md +71 -71
  20. package/docs/components/count-up.md +24 -24
  21. package/docs/components/count.md +24 -24
  22. package/docs/components/data-panel.md +24 -24
  23. package/docs/components/date.md +76 -76
  24. package/docs/components/dialog-full.md +112 -112
  25. package/docs/components/dialog.md +127 -127
  26. package/docs/components/divider.md +24 -24
  27. package/docs/components/drawer.md +127 -127
  28. package/docs/components/dynamic-layer.md +118 -118
  29. package/docs/components/echarts.md +72 -72
  30. package/docs/components/editor.md +24 -24
  31. package/docs/components/form.md +87 -87
  32. package/docs/components/guid.md +39 -39
  33. package/docs/components/hpanel.md +24 -24
  34. package/docs/components/icon.md +56 -56
  35. package/docs/components/input-button.md +24 -24
  36. package/docs/components/input-code.md +24 -24
  37. package/docs/components/input-color.md +114 -114
  38. package/docs/components/input-layer.md +56 -56
  39. package/docs/components/input-rows.md +370 -370
  40. package/docs/components/input-tag.md +50 -50
  41. package/docs/components/input.md +129 -129
  42. package/docs/components/layer-form.md +61 -61
  43. package/docs/components/layer.md +127 -127
  44. package/docs/components/layout.md +132 -132
  45. package/docs/components/map.md +24 -24
  46. package/docs/components/menu.md +121 -121
  47. package/docs/components/meta/button.ts +212 -212
  48. package/docs/components/meta/buttons.ts +76 -76
  49. package/docs/components/meta/card-list.ts +210 -210
  50. package/docs/components/meta/code-mirror.ts +108 -108
  51. package/docs/components/meta/comp.ts +236 -236
  52. package/docs/components/meta/date.ts +267 -267
  53. package/docs/components/meta/echarts.ts +64 -64
  54. package/docs/components/meta/form-item.ts +62 -62
  55. package/docs/components/meta/form.ts +181 -181
  56. package/docs/components/meta/input-button.ts +175 -175
  57. package/docs/components/meta/input-cards.ts +112 -112
  58. package/docs/components/meta/input-code.ts +161 -161
  59. package/docs/components/meta/input-color.ts +243 -243
  60. package/docs/components/meta/input-rows.ts +119 -119
  61. package/docs/components/meta/layer-form.ts +74 -74
  62. package/docs/components/meta/map.ts +68 -68
  63. package/docs/components/meta/panel.ts +152 -152
  64. package/docs/components/meta/radio.ts +55 -55
  65. package/docs/components/meta/select.ts +279 -279
  66. package/docs/components/meta/slider.ts +270 -270
  67. package/docs/components/meta/table-panel.ts +326 -326
  68. package/docs/components/meta/table.ts +427 -427
  69. package/docs/components/meta/tabs.ts +146 -146
  70. package/docs/components/meta/title.ts +91 -91
  71. package/docs/components/meta/tree-select.ts +199 -199
  72. package/docs/components/meta/tree.ts +225 -225
  73. package/docs/components/meta/vpanel.ts +19 -19
  74. package/docs/components/meta/workflow-viewer.ts +55 -55
  75. package/docs/components/number.md +124 -124
  76. package/docs/components/page.md +102 -102
  77. package/docs/components/panel.md +37 -37
  78. package/docs/components/radio.md +87 -87
  79. package/docs/components/rate.md +71 -71
  80. package/docs/components/select.md +133 -133
  81. package/docs/components/slider-captcha.md +41 -41
  82. package/docs/components/slider.md +101 -101
  83. package/docs/components/switch.md +90 -90
  84. package/docs/components/table-panel.md +312 -312
  85. package/docs/components/table.md +495 -495
  86. package/docs/components/tabs.md +26 -26
  87. package/docs/components/title.md +24 -24
  88. package/docs/components/tree.md +222 -222
  89. package/docs/components/upload.md +117 -117
  90. package/docs/components/workflow-viewer.md +21 -21
  91. package/docs/components/workflow.md +21 -21
  92. package/docs/examples/autocomplete/advanced.vue +35 -35
  93. package/docs/examples/autocomplete/basic.vue +32 -32
  94. package/docs/examples/autocomplete/clearable.vue +33 -33
  95. package/docs/examples/autocomplete/custom-template.vue +49 -49
  96. package/docs/examples/autocomplete/disabled.vue +33 -33
  97. package/docs/examples/autocomplete/icon.vue +37 -37
  98. package/docs/examples/barcode/all-types.vue +380 -380
  99. package/docs/examples/barcode/basic.vue +14 -14
  100. package/docs/examples/barcode/props-appearance.vue +243 -243
  101. package/docs/examples/barcode/props-geometry.vue +143 -143
  102. package/docs/examples/barcode/props-logic.vue +216 -216
  103. package/docs/examples/barcode/props-symbology.vue +199 -199
  104. package/docs/examples/barcode/props-text.vue +268 -268
  105. package/docs/examples/button/basic.vue +7 -7
  106. package/docs/examples/button/disabled.vue +42 -42
  107. package/docs/examples/button/loading.vue +6 -6
  108. package/docs/examples/button/shape.vue +7 -7
  109. package/docs/examples/button/size.vue +14 -14
  110. package/docs/examples/button/status.vue +34 -34
  111. package/docs/examples/button/type.vue +10 -10
  112. package/docs/examples/button-select/basic.vue +19 -19
  113. package/docs/examples/buttons/basic.vue +62 -62
  114. package/docs/examples/buttons/disabled.vue +36 -36
  115. package/docs/examples/buttons/dropdown.vue +63 -63
  116. package/docs/examples/buttons/group.vue +52 -52
  117. package/docs/examples/buttons/link.vue +47 -47
  118. package/docs/examples/buttons/popup.vue +39 -39
  119. package/docs/examples/buttons/size.vue +45 -45
  120. package/docs/examples/card-list/basic.vue +70 -70
  121. package/docs/examples/card-list/selection-pagination.vue +69 -69
  122. package/docs/examples/cascader-select/basic.vue +28 -28
  123. package/docs/examples/cascader-select/clearable.vue +34 -34
  124. package/docs/examples/cascader-select/disabled.vue +43 -43
  125. package/docs/examples/cascader-select/filterable.vue +37 -37
  126. package/docs/examples/cascader-select/methods.vue +84 -84
  127. package/docs/examples/cascader-select/multiple.vue +38 -38
  128. package/docs/examples/cascader-select/slot.vue +45 -45
  129. package/docs/examples/checkbox/basic.vue +18 -18
  130. package/docs/examples/checkbox/button.vue +19 -19
  131. package/docs/examples/checkbox/color.vue +25 -25
  132. package/docs/examples/checkbox/disabled.vue +17 -17
  133. package/docs/examples/checkbox/min-max.vue +20 -20
  134. package/docs/examples/checkbox/mixed.vue +56 -56
  135. package/docs/examples/checkbox/size.vue +28 -28
  136. package/docs/examples/code-mirror/basic.vue +11 -11
  137. package/docs/examples/code-mirror/events.vue +42 -42
  138. package/docs/examples/code-mirror/height.vue +25 -25
  139. package/docs/examples/code-mirror/mode.vue +33 -33
  140. package/docs/examples/code-mirror/readonly.vue +14 -14
  141. package/docs/examples/collapse/basic.vue +82 -82
  142. package/docs/examples/comp/basic.vue +7 -7
  143. package/docs/examples/comp/collapse.vue +38 -38
  144. package/docs/examples/comp/tabs.vue +38 -38
  145. package/docs/examples/count/basic.vue +101 -101
  146. package/docs/examples/count-up/basic.vue +89 -89
  147. package/docs/examples/data-panel/basic.vue +110 -110
  148. package/docs/examples/date/basic.vue +73 -73
  149. package/docs/examples/date/default-value.vue +59 -59
  150. package/docs/examples/date/format.vue +75 -75
  151. package/docs/examples/date/range.vue +66 -66
  152. package/docs/examples/date/types.vue +79 -79
  153. package/docs/examples/decorated-title/basic.vue +31 -31
  154. package/docs/examples/dialog/basic.vue +36 -36
  155. package/docs/examples/dialog/custom-buttons.vue +44 -44
  156. package/docs/examples/dialog/fullscreen.vue +23 -23
  157. package/docs/examples/dialog/no-mask.vue +17 -17
  158. package/docs/examples/dialog/size.vue +44 -44
  159. package/docs/examples/dialog/steps.vue +57 -57
  160. package/docs/examples/dialog-full/basic.vue +29 -29
  161. package/docs/examples/dialog-full/custom-buttons.vue +45 -45
  162. package/docs/examples/dialog-full/no-buttons.vue +18 -18
  163. package/docs/examples/dialog-full/no-header.vue +27 -27
  164. package/docs/examples/dialog-full/steps.vue +71 -71
  165. package/docs/examples/divider/basic.vue +52 -52
  166. package/docs/examples/drawer/basic.vue +35 -35
  167. package/docs/examples/drawer/custom-buttons.vue +34 -34
  168. package/docs/examples/drawer/direction.vue +47 -47
  169. package/docs/examples/drawer/mask.vue +36 -36
  170. package/docs/examples/drawer/no-buttons.vue +20 -20
  171. package/docs/examples/drawer/size.vue +28 -28
  172. package/docs/examples/dynamic-layer/basic.vue +33 -33
  173. package/docs/examples/dynamic-layer/custom-buttons.vue +43 -43
  174. package/docs/examples/dynamic-layer/form.vue +73 -73
  175. package/docs/examples/dynamic-layer/steps.vue +52 -52
  176. package/docs/examples/dynamic-layer/types.vue +40 -40
  177. package/docs/examples/echarts/basic.vue +31 -31
  178. package/docs/examples/echarts/dynamic.vue +43 -43
  179. package/docs/examples/echarts/line.vue +46 -46
  180. package/docs/examples/echarts/pie.vue +44 -44
  181. package/docs/examples/editor/basic.vue +15 -15
  182. package/docs/examples/form/basic.vue +688 -688
  183. package/docs/examples/form/init.vue +76 -76
  184. package/docs/examples/form/master-detail.vue +203 -203
  185. package/docs/examples/form/rule-format.vue +179 -179
  186. package/docs/examples/form/view-table.vue +378 -378
  187. package/docs/examples/guid/basic.vue +10 -10
  188. package/docs/examples/guid/size.vue +13 -13
  189. package/docs/examples/hpanel/basic.vue +79 -79
  190. package/docs/examples/icon/basic.vue +9 -9
  191. package/docs/examples/icon/rotate-flip.vue +9 -9
  192. package/docs/examples/icon/size.vue +7 -7
  193. package/docs/examples/input/basic.vue +10 -10
  194. package/docs/examples/input/clearable.vue +12 -12
  195. package/docs/examples/input/disabled.vue +6 -6
  196. package/docs/examples/input/icon.vue +23 -23
  197. package/docs/examples/input/password.vue +18 -18
  198. package/docs/examples/input/size.vue +13 -13
  199. package/docs/examples/input/textarea.vue +25 -25
  200. package/docs/examples/input/word-limit.vue +28 -28
  201. package/docs/examples/input-button/basic.vue +33 -33
  202. package/docs/examples/input-cards/basic.vue +79 -79
  203. package/docs/examples/input-code/basic.vue +29 -29
  204. package/docs/examples/input-color/basic.vue +10 -10
  205. package/docs/examples/input-color/disabled.vue +13 -13
  206. package/docs/examples/input-color/format.vue +17 -17
  207. package/docs/examples/input-color/no-alpha.vue +13 -13
  208. package/docs/examples/input-color/only-button.vue +15 -15
  209. package/docs/examples/input-color/predefine.vue +31 -31
  210. package/docs/examples/input-color/size.vue +15 -15
  211. package/docs/examples/input-layer/basic.vue +85 -85
  212. package/docs/examples/input-layer/render-vnode-page.vue +160 -160
  213. package/docs/examples/input-layer/render-vnode.vue +127 -127
  214. package/docs/examples/input-rows/basic.vue +73 -73
  215. package/docs/examples/input-rows/drag.vue +48 -48
  216. package/docs/examples/input-rows/layer-form.vue +85 -85
  217. package/docs/examples/input-rows/nested.vue +91 -91
  218. package/docs/examples/input-tag/basic.vue +27 -27
  219. package/docs/examples/input-tag/colors.vue +23 -23
  220. package/docs/examples/input-tag/readonly.vue +17 -17
  221. package/docs/examples/layer/basic.vue +43 -43
  222. package/docs/examples/layer/custom-buttons.vue +61 -61
  223. package/docs/examples/layer/drawer.vue +37 -37
  224. package/docs/examples/layer/full.vue +38 -38
  225. package/docs/examples/layer/modal.vue +34 -34
  226. package/docs/examples/layer/steps.vue +46 -46
  227. package/docs/examples/layer-form/basic.vue +76 -76
  228. package/docs/examples/layer-form/config.vue +82 -82
  229. package/docs/examples/layer-form/size.vue +72 -72
  230. package/docs/examples/layout/basic.vue +36 -36
  231. package/docs/examples/layout/custom-size.vue +50 -50
  232. package/docs/examples/layout/disable-move.vue +37 -37
  233. package/docs/examples/layout/hide-mid-when-narrow.vue +96 -96
  234. package/docs/examples/layout/min-size.vue +73 -73
  235. package/docs/examples/layout/percent-size.vue +80 -80
  236. package/docs/examples/layout/simple.vue +22 -22
  237. package/docs/examples/layout/top-side.vue +34 -34
  238. package/docs/examples/map/basic.vue +22 -22
  239. package/docs/examples/menu/basic.vue +58 -58
  240. package/docs/examples/menu/collapsed.vue +49 -49
  241. package/docs/examples/menu/horizontal.vue +44 -44
  242. package/docs/examples/menu/selection-test.vue +104 -104
  243. package/docs/examples/menu/theme.vue +46 -46
  244. package/docs/examples/menu/vertical.vue +46 -46
  245. package/docs/examples/number/advanced.vue +143 -143
  246. package/docs/examples/number/basic.vue +63 -63
  247. package/docs/examples/number/disabled.vue +49 -49
  248. package/docs/examples/number/size.vue +42 -42
  249. package/docs/examples/number/slots.vue +123 -123
  250. package/docs/examples/number/step-strictly.vue +41 -41
  251. package/docs/examples/number/step.vue +47 -47
  252. package/docs/examples/page/basic.vue +41 -41
  253. package/docs/examples/page/code-table-model.vue +428 -428
  254. package/docs/examples/page/dept-user-management.vue +211 -211
  255. package/docs/examples/page/init.vue +87 -87
  256. package/docs/examples/page/log.vue +453 -453
  257. package/docs/examples/page/user-management.vue +313 -313
  258. package/docs/examples/panel/tool-buttons.vue +18 -18
  259. package/docs/examples/radio/basic.vue +17 -17
  260. package/docs/examples/radio/button.vue +17 -17
  261. package/docs/examples/radio/color.vue +18 -18
  262. package/docs/examples/radio/disabled.vue +17 -17
  263. package/docs/examples/radio/size.vue +29 -29
  264. package/docs/examples/rate/basic.vue +24 -24
  265. package/docs/examples/rate/half.vue +24 -24
  266. package/docs/examples/rate/readonly.vue +11 -11
  267. package/docs/examples/rate/text.vue +37 -37
  268. package/docs/examples/select/basic.vue +16 -16
  269. package/docs/examples/select/clearable.vue +22 -22
  270. package/docs/examples/select/disabled.vue +31 -31
  271. package/docs/examples/select/filterable.vue +24 -24
  272. package/docs/examples/select/group.vue +23 -23
  273. package/docs/examples/select/icon.vue +16 -16
  274. package/docs/examples/select/multiple.vue +18 -18
  275. package/docs/examples/select/size.vue +39 -39
  276. package/docs/examples/slider/basic.vue +42 -42
  277. package/docs/examples/slider/disabled.vue +17 -17
  278. package/docs/examples/slider/marks.vue +30 -30
  279. package/docs/examples/slider/size.vue +37 -37
  280. package/docs/examples/slider/tooltip.vue +36 -36
  281. package/docs/examples/slider/vertical.vue +26 -26
  282. package/docs/examples/slider-captcha/basic.vue +44 -44
  283. package/docs/examples/slider-captcha/custom.vue +48 -48
  284. package/docs/examples/switch/basic.vue +16 -16
  285. package/docs/examples/switch/disabled.vue +13 -13
  286. package/docs/examples/switch/loading.vue +13 -13
  287. package/docs/examples/switch/size.vue +15 -15
  288. package/docs/examples/switch/text.vue +13 -13
  289. package/docs/examples/table/action-filter.vue +126 -126
  290. package/docs/examples/table/actions.vue +116 -116
  291. package/docs/examples/table/add-row.vue +103 -103
  292. package/docs/examples/table/basic.vue +168 -168
  293. package/docs/examples/table/checkbox-layout.vue +68 -68
  294. package/docs/examples/table/column-filter.vue +96 -96
  295. package/docs/examples/table/custom-layout.vue +115 -115
  296. package/docs/examples/table/custom-merge-cell.vue +206 -206
  297. package/docs/examples/table/dynamic-type.vue +73 -73
  298. package/docs/examples/table/editable.vue +262 -262
  299. package/docs/examples/table/field-selection.vue +87 -87
  300. package/docs/examples/table/frozen-column.vue +140 -140
  301. package/docs/examples/table/height-mode.vue +99 -99
  302. package/docs/examples/table/icon.vue +85 -85
  303. package/docs/examples/table/layer-form.vue +133 -133
  304. package/docs/examples/table/link.vue +66 -66
  305. package/docs/examples/table/merge-cell.vue +78 -78
  306. package/docs/examples/table/multiple-disabled.vue +112 -112
  307. package/docs/examples/table/multiple.vue +188 -188
  308. package/docs/examples/table/pagination.vue +151 -151
  309. package/docs/examples/table/row-drag.vue +67 -67
  310. package/docs/examples/table/row-fixed.vue +61 -61
  311. package/docs/examples/table/single-selection.vue +64 -64
  312. package/docs/examples/table/sub-table-lazy.vue +97 -97
  313. package/docs/examples/table/sub-table.vue +103 -103
  314. package/docs/examples/table/tag.vue +43 -43
  315. package/docs/examples/table/tree-column.vue +119 -119
  316. package/docs/examples/table/tree-data.vue +141 -141
  317. package/docs/examples/table/tree-default-expand-all.vue +60 -60
  318. package/docs/examples/table/tree-lazy.vue +80 -80
  319. package/docs/examples/table/tree-set-selection.vue +75 -75
  320. package/docs/examples/table-panel/basic.vue +229 -229
  321. package/docs/examples/table-panel/batch-operations.vue +286 -286
  322. package/docs/examples/table-panel/button-visibility.vue +88 -88
  323. package/docs/examples/table-panel/card.vue +101 -101
  324. package/docs/examples/table-panel/column-filter.vue +116 -116
  325. package/docs/examples/table-panel/filter.vue +219 -219
  326. package/docs/examples/table-panel/get-selection.vue +111 -111
  327. package/docs/examples/table-panel/mask.vue +151 -151
  328. package/docs/examples/table-panel/model-value.vue +87 -87
  329. package/docs/examples/table-panel/multiple-selection.vue +243 -243
  330. package/docs/examples/table-panel/pagination.vue +133 -133
  331. package/docs/examples/table-panel/search-list.vue +207 -207
  332. package/docs/examples/table-panel/sub-table-lazy.vue +118 -118
  333. package/docs/examples/table-panel/tree-parent-key.vue +67 -67
  334. package/docs/examples/tabs/basic.vue +98 -98
  335. package/docs/examples/time/base.vue +67 -67
  336. package/docs/examples/title/basic.vue +87 -87
  337. package/docs/examples/tree/accordion.vue +46 -46
  338. package/docs/examples/tree/basic.vue +50 -50
  339. package/docs/examples/tree/buttons.vue +53 -53
  340. package/docs/examples/tree/check-strictly.vue +53 -53
  341. package/docs/examples/tree/checkable.vue +52 -52
  342. package/docs/examples/tree/custom-keys.vue +39 -39
  343. package/docs/examples/tree/default-expanded.vue +52 -52
  344. package/docs/examples/tree/draggable.vue +29 -29
  345. package/docs/examples/tree/expand-on-click.vue +39 -39
  346. package/docs/examples/tree/flat-data.vue +20 -20
  347. package/docs/examples/tree/icon.vue +40 -40
  348. package/docs/examples/tree/load-data.vue +37 -37
  349. package/docs/examples/tree/methods.vue +74 -74
  350. package/docs/examples/tree/theme.vue +33 -33
  351. package/docs/examples/tree-select/basic.vue +47 -47
  352. package/docs/examples/upload/accept.vue +31 -31
  353. package/docs/examples/upload/basic.vue +12 -12
  354. package/docs/examples/upload/drag.vue +11 -11
  355. package/docs/examples/upload/image.vue +17 -17
  356. package/docs/examples/upload/limit.vue +20 -20
  357. package/docs/examples/upload/multiple.vue +17 -17
  358. package/docs/examples/upload/readonly.vue +17 -17
  359. package/docs/examples/utils/cipher.vue +160 -160
  360. package/docs/examples/utils/common.vue +153 -153
  361. package/docs/examples/utils/date.vue +56 -56
  362. package/docs/examples/utils/dom.vue +52 -52
  363. package/docs/examples/utils/is.vue +70 -70
  364. package/docs/examples/workflow/basic.vue +265 -265
  365. package/docs/examples/workflow-viewer/basic.vue +248 -248
  366. package/package.json +23 -23
@@ -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,87 +1,87 @@
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
- ## 表单 + 子表(规则格式)
45
-
46
- 通过 `j-table` 在表单中嵌入可编辑的子表格,适用于编码规则、格式配置等场景。
47
-
48
- <Demo :source-code="ruleFormatCode">
49
- <template #source>
50
- <rule-format />
51
- </template>
52
- <template #description>
53
- 示例包含基础字段校验(必填/唯一性)以及 `j-table` 子表的可增删编辑能力。
54
- </template>
55
- </Demo>
56
-
57
- ## 视图列表配置
58
-
59
- 参考设计器中的配置结构(折叠面板 + 弹窗表单 + 可编辑表格),并提供一份模拟数据用于展示。
60
-
61
- <Demo :source-code="viewTableCode">
62
- <template #source>
63
- <view-table />
64
- </template>
65
- <template #description>
66
- 折叠面板中包含“数据选项 / 列表设置 / 更多属性 / 状态属性”。其中“列表设置”通过 `j-layer-form` 打开弹窗,在弹窗内用 `j-table` 编辑字段列表;字段的更多配置通过表格列类型 `j-layerform` 打开二级弹层。
67
- </template>
68
- </Demo>
69
-
70
- ## API
71
-
72
- <ApiTable :data="formApi" componentName="form" />
73
-
74
- <script setup>
75
- import Basic from '../examples/form/basic.vue'
76
- import Init from '../examples/form/init.vue'
77
- import MasterDetail from '../examples/form/master-detail.vue'
78
- import RuleFormat from '../examples/form/rule-format.vue'
79
- import ViewTable from '../examples/form/view-table.vue'
80
- import formApi from './meta/form'
81
-
82
- import basicCode from '../examples/form/basic.vue?raw'
83
- import initCode from '../examples/form/init.vue?raw'
84
- import masterDetailCode from '../examples/form/master-detail.vue?raw'
85
- import ruleFormatCode from '../examples/form/rule-format.vue?raw'
86
- import viewTableCode from '../examples/form/view-table.vue?raw'
87
- </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
+ ## 表单 + 子表(规则格式)
45
+
46
+ 通过 `j-table` 在表单中嵌入可编辑的子表格,适用于编码规则、格式配置等场景。
47
+
48
+ <Demo :source-code="ruleFormatCode">
49
+ <template #source>
50
+ <rule-format />
51
+ </template>
52
+ <template #description>
53
+ 示例包含基础字段校验(必填/唯一性)以及 `j-table` 子表的可增删编辑能力。
54
+ </template>
55
+ </Demo>
56
+
57
+ ## 视图列表配置
58
+
59
+ 参考设计器中的配置结构(折叠面板 + 弹窗表单 + 可编辑表格),并提供一份模拟数据用于展示。
60
+
61
+ <Demo :source-code="viewTableCode">
62
+ <template #source>
63
+ <view-table />
64
+ </template>
65
+ <template #description>
66
+ 折叠面板中包含“数据选项 / 列表设置 / 更多属性 / 状态属性”。其中“列表设置”通过 `j-layer-form` 打开弹窗,在弹窗内用 `j-table` 编辑字段列表;字段的更多配置通过表格列类型 `j-layerform` 打开二级弹层。
67
+ </template>
68
+ </Demo>
69
+
70
+ ## API
71
+
72
+ <ApiTable :data="formApi" componentName="form" />
73
+
74
+ <script setup>
75
+ import Basic from '../examples/form/basic.vue'
76
+ import Init from '../examples/form/init.vue'
77
+ import MasterDetail from '../examples/form/master-detail.vue'
78
+ import RuleFormat from '../examples/form/rule-format.vue'
79
+ import ViewTable from '../examples/form/view-table.vue'
80
+ import formApi from './meta/form'
81
+
82
+ import basicCode from '../examples/form/basic.vue?raw'
83
+ import initCode from '../examples/form/init.vue?raw'
84
+ import masterDetailCode from '../examples/form/master-detail.vue?raw'
85
+ import ruleFormatCode from '../examples/form/rule-format.vue?raw'
86
+ import viewTableCode from '../examples/form/view-table.vue?raw'
87
+ </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>
@@ -1,24 +1,24 @@
1
- # Hpanel 水平布局
2
-
3
- 用于水平排列内容的面板,支持左、中(主内容)、右三个区域。
4
-
5
- ## 基础用法
6
-
7
- <Demo :source-code="hpanelBasicCode">
8
- <template #source>
9
- <hpanel-basic />
10
- </template>
11
- <template #description>
12
- 使用 `left`、`default` 和 `right` 插槽来定义面板的不同部分。
13
- </template>
14
- </Demo>
15
-
16
- ## API
17
-
18
- <ApiTable :data="hpanelApi" componentName="hpanel" />
19
-
20
- <script setup>
21
- import HpanelBasic from '../examples/hpanel/basic.vue'
22
- import hpanelApi from './meta/hpanel'
23
- import hpanelBasicCode from '../examples/hpanel/basic.vue?raw'
24
- </script>
1
+ # Hpanel 水平布局
2
+
3
+ 用于水平排列内容的面板,支持左、中(主内容)、右三个区域。
4
+
5
+ ## 基础用法
6
+
7
+ <Demo :source-code="hpanelBasicCode">
8
+ <template #source>
9
+ <hpanel-basic />
10
+ </template>
11
+ <template #description>
12
+ 使用 `left`、`default` 和 `right` 插槽来定义面板的不同部分。
13
+ </template>
14
+ </Demo>
15
+
16
+ ## API
17
+
18
+ <ApiTable :data="hpanelApi" componentName="hpanel" />
19
+
20
+ <script setup>
21
+ import HpanelBasic from '../examples/hpanel/basic.vue'
22
+ import hpanelApi from './meta/hpanel'
23
+ import hpanelBasicCode from '../examples/hpanel/basic.vue?raw'
24
+ </script>
@@ -1,56 +1,56 @@
1
- # Icon 图标
2
-
3
- 语义化的矢量图形。使用了 [@iconify/vue](https://iconify.design/docs/icon-components/vue/)。
4
-
5
- ## 基础用法
6
-
7
- 通过 `icon` 属性来指定图标名称。你可以从 [Iconify](https://icon-sets.iconify.design/) 搜索成千上万个图标。
8
-
9
- <Demo :source-code="iconBasicCode">
10
- <template #source>
11
- <icon-basic />
12
- </template>
13
- <template #description>
14
- 使用 icon、color 来定义图标和颜色。
15
- </template>
16
- </Demo>
17
-
18
- ## 不同尺寸
19
-
20
- 使用 `size` 属性来配置图标尺寸。
21
-
22
- <Demo :source-code="iconSizeCode">
23
- <template #source>
24
- <icon-size />
25
- </template>
26
- <template #description>
27
- size 接受数字(单位为px)。
28
- </template>
29
- </Demo>
30
-
31
- ## 旋转与翻转
32
-
33
- 使用 `rotate` 和 `flip` 属性来调整图标方向。
34
-
35
- <Demo :source-code="iconRotateFlipCode">
36
- <template #source>
37
- <icon-rotate-flip />
38
- </template>
39
- <template #description>
40
- 使用 rotate 定义角度,使用 flip 定义翻转方向。
41
- </template>
42
- </Demo>
43
-
44
- ## API
45
-
46
- <ApiTable :data="iconApi" componentName="icon" />
47
-
48
- <script setup>
49
- import IconBasic from '../examples/icon/basic.vue'
50
- import IconSize from '../examples/icon/size.vue'
51
- import IconRotateFlip from '../examples/icon/rotate-flip.vue'
52
- import iconApi from './meta/icon'
53
- import iconBasicCode from '../examples/icon/basic.vue?raw'
54
- import iconSizeCode from '../examples/icon/size.vue?raw'
55
- import iconRotateFlipCode from '../examples/icon/rotate-flip.vue?raw'
56
- </script>
1
+ # Icon 图标
2
+
3
+ 语义化的矢量图形。使用了 [@iconify/vue](https://iconify.design/docs/icon-components/vue/)。
4
+
5
+ ## 基础用法
6
+
7
+ 通过 `icon` 属性来指定图标名称。你可以从 [Iconify](https://icon-sets.iconify.design/) 搜索成千上万个图标。
8
+
9
+ <Demo :source-code="iconBasicCode">
10
+ <template #source>
11
+ <icon-basic />
12
+ </template>
13
+ <template #description>
14
+ 使用 icon、color 来定义图标和颜色。
15
+ </template>
16
+ </Demo>
17
+
18
+ ## 不同尺寸
19
+
20
+ 使用 `size` 属性来配置图标尺寸。
21
+
22
+ <Demo :source-code="iconSizeCode">
23
+ <template #source>
24
+ <icon-size />
25
+ </template>
26
+ <template #description>
27
+ size 接受数字(单位为px)。
28
+ </template>
29
+ </Demo>
30
+
31
+ ## 旋转与翻转
32
+
33
+ 使用 `rotate` 和 `flip` 属性来调整图标方向。
34
+
35
+ <Demo :source-code="iconRotateFlipCode">
36
+ <template #source>
37
+ <icon-rotate-flip />
38
+ </template>
39
+ <template #description>
40
+ 使用 rotate 定义角度,使用 flip 定义翻转方向。
41
+ </template>
42
+ </Demo>
43
+
44
+ ## API
45
+
46
+ <ApiTable :data="iconApi" componentName="icon" />
47
+
48
+ <script setup>
49
+ import IconBasic from '../examples/icon/basic.vue'
50
+ import IconSize from '../examples/icon/size.vue'
51
+ import IconRotateFlip from '../examples/icon/rotate-flip.vue'
52
+ import iconApi from './meta/icon'
53
+ import iconBasicCode from '../examples/icon/basic.vue?raw'
54
+ import iconSizeCode from '../examples/icon/size.vue?raw'
55
+ import iconRotateFlipCode from '../examples/icon/rotate-flip.vue?raw'
56
+ </script>
@@ -1,24 +1,24 @@
1
- # InputButton 输入按钮
2
-
3
- 通过点击按钮打开一个弹窗层,用于输入或选择复杂的数据。
4
-
5
- ## 基础用法
6
-
7
- <Demo :source-code="inputButtonBasicCode">
8
- <template #source>
9
- <input-button-basic />
10
- </template>
11
- <template #description>
12
- 点击按钮打开弹窗,在弹窗中完成输入后点击确定。
13
- </template>
14
- </Demo>
15
-
16
- ## API
17
-
18
- <ApiTable :data="inputButtonApi" componentName="input-button" />
19
-
20
- <script setup>
21
- import InputButtonBasic from '../examples/input-button/basic.vue'
22
- import inputButtonApi from './meta/input-button'
23
- import inputButtonBasicCode from '../examples/input-button/basic.vue?raw'
24
- </script>
1
+ # InputButton 输入按钮
2
+
3
+ 通过点击按钮打开一个弹窗层,用于输入或选择复杂的数据。
4
+
5
+ ## 基础用法
6
+
7
+ <Demo :source-code="inputButtonBasicCode">
8
+ <template #source>
9
+ <input-button-basic />
10
+ </template>
11
+ <template #description>
12
+ 点击按钮打开弹窗,在弹窗中完成输入后点击确定。
13
+ </template>
14
+ </Demo>
15
+
16
+ ## API
17
+
18
+ <ApiTable :data="inputButtonApi" componentName="input-button" />
19
+
20
+ <script setup>
21
+ import InputButtonBasic from '../examples/input-button/basic.vue'
22
+ import inputButtonApi from './meta/input-button'
23
+ import inputButtonBasicCode from '../examples/input-button/basic.vue?raw'
24
+ </script>
@@ -1,24 +1,24 @@
1
- # InputCode 脚本输入框
2
-
3
- 通过点击按钮打开一个集成了脚本编辑器的弹窗,用于编写代码或脚本内容。
4
-
5
- ## 基础用法
6
-
7
- <Demo :source-code="inputCodeBasicCode">
8
- <template #source>
9
- <input-code-basic />
10
- </template>
11
- <template #description>
12
- 点击按钮打开代码编辑器,支持多种语言模式和示例代码对比。
13
- </template>
14
- </Demo>
15
-
16
- ## API
17
-
18
- <ApiTable :data="inputCodeApi" componentName="input-code" />
19
-
20
- <script setup>
21
- import InputCodeBasic from '../examples/input-code/basic.vue'
22
- import inputCodeApi from './meta/input-code'
23
- import inputCodeBasicCode from '../examples/input-code/basic.vue?raw'
24
- </script>
1
+ # InputCode 脚本输入框
2
+
3
+ 通过点击按钮打开一个集成了脚本编辑器的弹窗,用于编写代码或脚本内容。
4
+
5
+ ## 基础用法
6
+
7
+ <Demo :source-code="inputCodeBasicCode">
8
+ <template #source>
9
+ <input-code-basic />
10
+ </template>
11
+ <template #description>
12
+ 点击按钮打开代码编辑器,支持多种语言模式和示例代码对比。
13
+ </template>
14
+ </Demo>
15
+
16
+ ## API
17
+
18
+ <ApiTable :data="inputCodeApi" componentName="input-code" />
19
+
20
+ <script setup>
21
+ import InputCodeBasic from '../examples/input-code/basic.vue'
22
+ import inputCodeApi from './meta/input-code'
23
+ import inputCodeBasicCode from '../examples/input-code/basic.vue?raw'
24
+ </script>