@a2simcode/ui 0.0.256 → 0.0.258

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