@a2simcode/ui 0.0.247 → 0.0.249

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