@a2simcode/ui 0.0.55 → 0.0.57

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