@a2simcode/ui 0.0.236 → 0.0.238

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