@a2simcode/ui 0.0.248 → 0.0.250

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 +671 -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,114 +1,114 @@
1
- # InputColor 颜色选择器
2
-
3
- 用于颜色选择,支持多种颜色格式。
4
-
5
- ## 基础用法
6
-
7
- <Demo :source-code="inputColorBasicCode">
8
- <template #source>
9
- <input-color-basic />
10
- </template>
11
- <template #description>
12
- 使用 v-model 实现双向数据绑定。
13
- </template>
14
- </Demo>
15
-
16
- ## 不同尺寸
17
-
18
- InputColor 组件提供三种尺寸。
19
-
20
- <Demo :source-code="inputColorSizeCode">
21
- <template #source>
22
- <input-color-size />
23
- </template>
24
- <template #description>
25
- 使用 size 属性改变输入框大小。除了默认大小外,还有另外两个选项: large, small。
26
- </template>
27
- </Demo>
28
-
29
- ## 禁用和只读
30
-
31
- 通过 `disabled` 和 `readonly` 属性指定输入框的状态。
32
-
33
- <Demo :source-code="inputColorDisabledCode">
34
- <template #source>
35
- <input-color-disabled />
36
- </template>
37
- <template #description>
38
- 通过 disabled 属性指定是否禁用 input-color 组件,通过 readonly 属性指定是否只读。
39
- </template>
40
- </Demo>
41
-
42
- ## 仅显示按钮
43
-
44
- 使用 `only-button` 属性可以只显示颜色选择器按钮,隐藏输入框。
45
-
46
- <Demo :source-code="inputColorOnlyButtonCode">
47
- <template #source>
48
- <input-color-only-button />
49
- </template>
50
- <template #description>
51
- 设置 `only-button` 属性为 `true` 即可只显示颜色选择器按钮。
52
- </template>
53
- </Demo>
54
-
55
- ## 预定义颜色
56
-
57
- 使用 `predefine-colors` 属性可以设置预定义的颜色选项。
58
-
59
- <Demo :source-code="inputColorPredefineCode">
60
- <template #source>
61
- <input-color-predefine />
62
- </template>
63
- <template #description>
64
- 通过 `predefine-colors` 属性设置预定义的颜色数组,支持多种颜色格式。
65
- </template>
66
- </Demo>
67
-
68
- ## 透明度支持
69
-
70
- 使用 `show-alpha` 属性控制是否支持透明度选择。
71
-
72
- <Demo :source-code="inputColorNoAlphaCode">
73
- <template #source>
74
- <input-color-no-alpha />
75
- </template>
76
- <template #description>
77
- 设置 `show-alpha` 属性为 `true` 或 `false` 来控制是否支持透明度选择。
78
- </template>
79
- </Demo>
80
-
81
- ## 颜色格式
82
-
83
- 使用 `color-format` 属性可以设置写入 v-model 的颜色的格式。
84
-
85
- <Demo :source-code="inputColorFormatCode">
86
- <template #source>
87
- <input-color-format />
88
- </template>
89
- <template #description>
90
- 通过 `color-format` 属性设置颜色格式,支持 hex、rgb、hsl、hsv 四种格式。
91
- </template>
92
- </Demo>
93
-
94
- ## API
95
-
96
- <ApiTable :data="inputColorApi" componentName="input-color" />
97
-
98
- <script setup>
99
- import InputColorBasic from '../examples/input-color/basic.vue'
100
- import InputColorSize from '../examples/input-color/size.vue'
101
- import InputColorDisabled from '../examples/input-color/disabled.vue'
102
- import InputColorOnlyButton from '../examples/input-color/only-button.vue'
103
- import InputColorPredefine from '../examples/input-color/predefine.vue'
104
- import InputColorNoAlpha from '../examples/input-color/no-alpha.vue'
105
- import InputColorFormat from '../examples/input-color/format.vue'
106
- import inputColorApi from './meta/input-color'
107
- import inputColorBasicCode from '../examples/input-color/basic.vue?raw'
108
- import inputColorSizeCode from '../examples/input-color/size.vue?raw'
109
- import inputColorDisabledCode from '../examples/input-color/disabled.vue?raw'
110
- import inputColorOnlyButtonCode from '../examples/input-color/only-button.vue?raw'
111
- import inputColorPredefineCode from '../examples/input-color/predefine.vue?raw'
112
- import inputColorNoAlphaCode from '../examples/input-color/no-alpha.vue?raw'
113
- import inputColorFormatCode from '../examples/input-color/format.vue?raw'
114
- </script>
1
+ # InputColor 颜色选择器
2
+
3
+ 用于颜色选择,支持多种颜色格式。
4
+
5
+ ## 基础用法
6
+
7
+ <Demo :source-code="inputColorBasicCode">
8
+ <template #source>
9
+ <input-color-basic />
10
+ </template>
11
+ <template #description>
12
+ 使用 v-model 实现双向数据绑定。
13
+ </template>
14
+ </Demo>
15
+
16
+ ## 不同尺寸
17
+
18
+ InputColor 组件提供三种尺寸。
19
+
20
+ <Demo :source-code="inputColorSizeCode">
21
+ <template #source>
22
+ <input-color-size />
23
+ </template>
24
+ <template #description>
25
+ 使用 size 属性改变输入框大小。除了默认大小外,还有另外两个选项: large, small。
26
+ </template>
27
+ </Demo>
28
+
29
+ ## 禁用和只读
30
+
31
+ 通过 `disabled` 和 `readonly` 属性指定输入框的状态。
32
+
33
+ <Demo :source-code="inputColorDisabledCode">
34
+ <template #source>
35
+ <input-color-disabled />
36
+ </template>
37
+ <template #description>
38
+ 通过 disabled 属性指定是否禁用 input-color 组件,通过 readonly 属性指定是否只读。
39
+ </template>
40
+ </Demo>
41
+
42
+ ## 仅显示按钮
43
+
44
+ 使用 `only-button` 属性可以只显示颜色选择器按钮,隐藏输入框。
45
+
46
+ <Demo :source-code="inputColorOnlyButtonCode">
47
+ <template #source>
48
+ <input-color-only-button />
49
+ </template>
50
+ <template #description>
51
+ 设置 `only-button` 属性为 `true` 即可只显示颜色选择器按钮。
52
+ </template>
53
+ </Demo>
54
+
55
+ ## 预定义颜色
56
+
57
+ 使用 `predefine-colors` 属性可以设置预定义的颜色选项。
58
+
59
+ <Demo :source-code="inputColorPredefineCode">
60
+ <template #source>
61
+ <input-color-predefine />
62
+ </template>
63
+ <template #description>
64
+ 通过 `predefine-colors` 属性设置预定义的颜色数组,支持多种颜色格式。
65
+ </template>
66
+ </Demo>
67
+
68
+ ## 透明度支持
69
+
70
+ 使用 `show-alpha` 属性控制是否支持透明度选择。
71
+
72
+ <Demo :source-code="inputColorNoAlphaCode">
73
+ <template #source>
74
+ <input-color-no-alpha />
75
+ </template>
76
+ <template #description>
77
+ 设置 `show-alpha` 属性为 `true` 或 `false` 来控制是否支持透明度选择。
78
+ </template>
79
+ </Demo>
80
+
81
+ ## 颜色格式
82
+
83
+ 使用 `color-format` 属性可以设置写入 v-model 的颜色的格式。
84
+
85
+ <Demo :source-code="inputColorFormatCode">
86
+ <template #source>
87
+ <input-color-format />
88
+ </template>
89
+ <template #description>
90
+ 通过 `color-format` 属性设置颜色格式,支持 hex、rgb、hsl、hsv 四种格式。
91
+ </template>
92
+ </Demo>
93
+
94
+ ## API
95
+
96
+ <ApiTable :data="inputColorApi" componentName="input-color" />
97
+
98
+ <script setup>
99
+ import InputColorBasic from '../examples/input-color/basic.vue'
100
+ import InputColorSize from '../examples/input-color/size.vue'
101
+ import InputColorDisabled from '../examples/input-color/disabled.vue'
102
+ import InputColorOnlyButton from '../examples/input-color/only-button.vue'
103
+ import InputColorPredefine from '../examples/input-color/predefine.vue'
104
+ import InputColorNoAlpha from '../examples/input-color/no-alpha.vue'
105
+ import InputColorFormat from '../examples/input-color/format.vue'
106
+ import inputColorApi from './meta/input-color'
107
+ import inputColorBasicCode from '../examples/input-color/basic.vue?raw'
108
+ import inputColorSizeCode from '../examples/input-color/size.vue?raw'
109
+ import inputColorDisabledCode from '../examples/input-color/disabled.vue?raw'
110
+ import inputColorOnlyButtonCode from '../examples/input-color/only-button.vue?raw'
111
+ import inputColorPredefineCode from '../examples/input-color/predefine.vue?raw'
112
+ import inputColorNoAlphaCode from '../examples/input-color/no-alpha.vue?raw'
113
+ import inputColorFormatCode from '../examples/input-color/format.vue?raw'
114
+ </script>
@@ -1,56 +1,56 @@
1
- # InputLayer 弹窗选择
2
-
3
- 带有弹窗选择功能的输入框组件。
4
-
5
- ## 基础用法
6
-
7
- 基础的弹窗选择用法。
8
-
9
- <Demo :source-code="inputLayerBasicCode">
10
- <template #source>
11
- <input-layer-basic />
12
- </template>
13
- <template #description>
14
- 使用 `load-layer-data` 属性配置数据加载方法,`columns` 配置表格列。
15
- </template>
16
- </Demo>
17
-
18
- ## 自定义渲染
19
-
20
- 通过 `render-v-node` 透传到底层 `j-table-panel`,可以用 VNode 自定义每条记录的展示方式(例如卡片列表)。示例中点击卡片会设置选中项,点击“确定”后回填到输入框。
21
-
22
- <Demo :source-code="inputLayerRenderVNodeCode">
23
- <template #source>
24
- <input-layer-render-vnode />
25
- </template>
26
- <template #description>
27
- `render-v-node` 接收当前行数据并返回 VNode;点击卡片设置选中项后,InputLayer 会从表格面板的选中项回填值与文本。
28
- </template>
29
- </Demo>
30
-
31
- ## 分页(自定义渲染)
32
-
33
- `render-v-node` 模式下开启分页(`is-page`),配合 `load-layer-data` 返回分页结构数据(`{ rows, records }`)。示例里通过卡片点击实现多选,最后点“确定”回填到输入框。
34
-
35
- <Demo :source-code="inputLayerRenderVNodePageCode">
36
- <template #source>
37
- <input-layer-render-vnode-page />
38
- </template>
39
- <template #description>
40
- `load-layer-data(params)` 在 `params.pagination` 中拿到 `page/rows`,返回 `{ rows, records }` 给表格面板分页使用。
41
- </template>
42
- </Demo>
43
-
44
- ## API
45
-
46
- <ApiTable :data="inputLayerApi" componentName="input-layer" />
47
-
48
- <script setup>
49
- import InputLayerBasic from '../examples/input-layer/basic.vue'
50
- import InputLayerRenderVnode from '../examples/input-layer/render-vnode.vue'
51
- import InputLayerRenderVnodePage from '../examples/input-layer/render-vnode-page.vue'
52
- import inputLayerBasicCode from '../examples/input-layer/basic.vue?raw'
53
- import inputLayerRenderVNodeCode from '../examples/input-layer/render-vnode.vue?raw'
54
- import inputLayerRenderVNodePageCode from '../examples/input-layer/render-vnode-page.vue?raw'
55
- import inputLayerApi from './meta/input-layer'
56
- </script>
1
+ # InputLayer 弹窗选择
2
+
3
+ 带有弹窗选择功能的输入框组件。
4
+
5
+ ## 基础用法
6
+
7
+ 基础的弹窗选择用法。
8
+
9
+ <Demo :source-code="inputLayerBasicCode">
10
+ <template #source>
11
+ <input-layer-basic />
12
+ </template>
13
+ <template #description>
14
+ 使用 `load-layer-data` 属性配置数据加载方法,`columns` 配置表格列。
15
+ </template>
16
+ </Demo>
17
+
18
+ ## 自定义渲染
19
+
20
+ 通过 `render-v-node` 透传到底层 `j-table-panel`,可以用 VNode 自定义每条记录的展示方式(例如卡片列表)。示例中点击卡片会设置选中项,点击“确定”后回填到输入框。
21
+
22
+ <Demo :source-code="inputLayerRenderVNodeCode">
23
+ <template #source>
24
+ <input-layer-render-vnode />
25
+ </template>
26
+ <template #description>
27
+ `render-v-node` 接收当前行数据并返回 VNode;点击卡片设置选中项后,InputLayer 会从表格面板的选中项回填值与文本。
28
+ </template>
29
+ </Demo>
30
+
31
+ ## 分页(自定义渲染)
32
+
33
+ `render-v-node` 模式下开启分页(`is-page`),配合 `load-layer-data` 返回分页结构数据(`{ rows, records }`)。示例里通过卡片点击实现多选,最后点“确定”回填到输入框。
34
+
35
+ <Demo :source-code="inputLayerRenderVNodePageCode">
36
+ <template #source>
37
+ <input-layer-render-vnode-page />
38
+ </template>
39
+ <template #description>
40
+ `load-layer-data(params)` 在 `params.pagination` 中拿到 `page/rows`,返回 `{ rows, records }` 给表格面板分页使用。
41
+ </template>
42
+ </Demo>
43
+
44
+ ## API
45
+
46
+ <ApiTable :data="inputLayerApi" componentName="input-layer" />
47
+
48
+ <script setup>
49
+ import InputLayerBasic from '../examples/input-layer/basic.vue'
50
+ import InputLayerRenderVnode from '../examples/input-layer/render-vnode.vue'
51
+ import InputLayerRenderVnodePage from '../examples/input-layer/render-vnode-page.vue'
52
+ import inputLayerBasicCode from '../examples/input-layer/basic.vue?raw'
53
+ import inputLayerRenderVNodeCode from '../examples/input-layer/render-vnode.vue?raw'
54
+ import inputLayerRenderVNodePageCode from '../examples/input-layer/render-vnode-page.vue?raw'
55
+ import inputLayerApi from './meta/input-layer'
56
+ </script>