@a2simcode/ui 0.0.70 → 0.0.72

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