@a2simcode/ui 0.0.172 → 0.0.174

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 (343) 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/inject-provide.d.ts +2 -0
  6. package/dist/core/utils/comp.d.ts +1 -0
  7. package/dist/simcode-ui.es.js +3205 -3196
  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 +72 -72
  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 +26 -26
  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/buttons.ts +76 -76
  49. package/docs/components/meta/code-mirror.ts +108 -108
  50. package/docs/components/meta/comp.ts +236 -236
  51. package/docs/components/meta/date.ts +267 -267
  52. package/docs/components/meta/echarts.ts +64 -64
  53. package/docs/components/meta/form-item.ts +50 -50
  54. package/docs/components/meta/form.ts +181 -181
  55. package/docs/components/meta/input-cards.ts +112 -112
  56. package/docs/components/meta/input-color.ts +243 -243
  57. package/docs/components/meta/input-layer.ts +366 -366
  58. package/docs/components/meta/input-rows.ts +119 -119
  59. package/docs/components/meta/layer-form.ts +56 -56
  60. package/docs/components/meta/map.ts +68 -68
  61. package/docs/components/meta/panel.ts +152 -152
  62. package/docs/components/meta/slider.ts +270 -270
  63. package/docs/components/meta/table-panel.ts +232 -232
  64. package/docs/components/meta/table.ts +391 -391
  65. package/docs/components/meta/tabs.ts +146 -146
  66. package/docs/components/meta/title.ts +91 -91
  67. package/docs/components/meta/tree-select.ts +199 -199
  68. package/docs/components/meta/tree.ts +219 -219
  69. package/docs/components/meta/vpanel.ts +19 -19
  70. package/docs/components/meta/workflow-viewer.ts +55 -55
  71. package/docs/components/number.md +124 -124
  72. package/docs/components/page.md +102 -102
  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 +236 -236
  81. package/docs/components/table.md +391 -391
  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 +10 -10
  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 +101 -101
  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 -73
  143. package/docs/examples/date/default-value.vue +59 -59
  144. package/docs/examples/date/format.vue +75 -75
  145. package/docs/examples/date/range.vue +66 -66
  146. package/docs/examples/date/types.vue +79 -79
  147. package/docs/examples/decorated-title/basic.vue +31 -31
  148. package/docs/examples/dialog/basic.vue +36 -36
  149. package/docs/examples/dialog/custom-buttons.vue +44 -44
  150. package/docs/examples/dialog/fullscreen.vue +23 -23
  151. package/docs/examples/dialog/no-mask.vue +17 -17
  152. package/docs/examples/dialog/size.vue +44 -44
  153. package/docs/examples/dialog/steps.vue +57 -57
  154. package/docs/examples/dialog-full/basic.vue +29 -29
  155. package/docs/examples/dialog-full/custom-buttons.vue +45 -45
  156. package/docs/examples/dialog-full/no-buttons.vue +18 -18
  157. package/docs/examples/dialog-full/no-header.vue +27 -27
  158. package/docs/examples/dialog-full/steps.vue +71 -71
  159. package/docs/examples/divider/basic.vue +52 -52
  160. package/docs/examples/drawer/basic.vue +35 -35
  161. package/docs/examples/drawer/custom-buttons.vue +34 -34
  162. package/docs/examples/drawer/direction.vue +47 -47
  163. package/docs/examples/drawer/mask.vue +36 -36
  164. package/docs/examples/drawer/no-buttons.vue +20 -20
  165. package/docs/examples/drawer/size.vue +28 -28
  166. package/docs/examples/dynamic-layer/basic.vue +33 -33
  167. package/docs/examples/dynamic-layer/custom-buttons.vue +43 -43
  168. package/docs/examples/dynamic-layer/form.vue +73 -73
  169. package/docs/examples/dynamic-layer/steps.vue +52 -52
  170. package/docs/examples/dynamic-layer/types.vue +40 -40
  171. package/docs/examples/echarts/basic.vue +31 -31
  172. package/docs/examples/echarts/dynamic.vue +43 -43
  173. package/docs/examples/echarts/line.vue +46 -46
  174. package/docs/examples/echarts/pie.vue +44 -44
  175. package/docs/examples/editor/basic.vue +15 -15
  176. package/docs/examples/form/basic.vue +662 -613
  177. package/docs/examples/form/init.vue +76 -76
  178. package/docs/examples/form/master-detail.vue +203 -203
  179. package/docs/examples/form/rule-format.vue +179 -179
  180. package/docs/examples/guid/basic.vue +10 -10
  181. package/docs/examples/guid/size.vue +13 -13
  182. package/docs/examples/hpanel/basic.vue +79 -79
  183. package/docs/examples/icon/basic.vue +9 -9
  184. package/docs/examples/icon/rotate-flip.vue +9 -9
  185. package/docs/examples/icon/size.vue +7 -7
  186. package/docs/examples/input/basic.vue +10 -10
  187. package/docs/examples/input/clearable.vue +12 -12
  188. package/docs/examples/input/disabled.vue +6 -6
  189. package/docs/examples/input/icon.vue +23 -23
  190. package/docs/examples/input/password.vue +18 -18
  191. package/docs/examples/input/size.vue +13 -13
  192. package/docs/examples/input/textarea.vue +25 -25
  193. package/docs/examples/input/word-limit.vue +28 -28
  194. package/docs/examples/input-button/basic.vue +33 -33
  195. package/docs/examples/input-code/basic.vue +29 -29
  196. package/docs/examples/input-color/basic.vue +10 -10
  197. package/docs/examples/input-color/disabled.vue +13 -13
  198. package/docs/examples/input-color/format.vue +17 -17
  199. package/docs/examples/input-color/no-alpha.vue +13 -13
  200. package/docs/examples/input-color/only-button.vue +15 -15
  201. package/docs/examples/input-color/predefine.vue +31 -31
  202. package/docs/examples/input-color/size.vue +15 -15
  203. package/docs/examples/input-layer/basic.vue +86 -86
  204. package/docs/examples/input-rows/basic.vue +73 -73
  205. package/docs/examples/input-rows/drag.vue +48 -48
  206. package/docs/examples/input-rows/layer-form.vue +85 -85
  207. package/docs/examples/input-rows/nested.vue +91 -91
  208. package/docs/examples/input-tag/basic.vue +27 -27
  209. package/docs/examples/input-tag/colors.vue +23 -23
  210. package/docs/examples/input-tag/readonly.vue +17 -17
  211. package/docs/examples/layer/basic.vue +43 -43
  212. package/docs/examples/layer/custom-buttons.vue +61 -61
  213. package/docs/examples/layer/drawer.vue +37 -37
  214. package/docs/examples/layer/full.vue +38 -38
  215. package/docs/examples/layer/modal.vue +34 -34
  216. package/docs/examples/layer/steps.vue +46 -46
  217. package/docs/examples/layer-form/basic.vue +76 -76
  218. package/docs/examples/layer-form/config.vue +82 -82
  219. package/docs/examples/layer-form/size.vue +72 -72
  220. package/docs/examples/layout/basic.vue +36 -36
  221. package/docs/examples/layout/custom-size.vue +50 -50
  222. package/docs/examples/layout/disable-move.vue +37 -37
  223. package/docs/examples/layout/hide-mid-when-narrow.vue +96 -96
  224. package/docs/examples/layout/min-size.vue +73 -73
  225. package/docs/examples/layout/percent-size.vue +80 -80
  226. package/docs/examples/layout/simple.vue +22 -22
  227. package/docs/examples/layout/top-side.vue +34 -34
  228. package/docs/examples/map/basic.vue +22 -22
  229. package/docs/examples/menu/basic.vue +58 -58
  230. package/docs/examples/menu/collapsed.vue +49 -49
  231. package/docs/examples/menu/horizontal.vue +44 -44
  232. package/docs/examples/menu/selection-test.vue +104 -104
  233. package/docs/examples/menu/theme.vue +46 -46
  234. package/docs/examples/menu/vertical.vue +46 -46
  235. package/docs/examples/number/advanced.vue +143 -143
  236. package/docs/examples/number/basic.vue +63 -63
  237. package/docs/examples/number/disabled.vue +49 -49
  238. package/docs/examples/number/size.vue +42 -42
  239. package/docs/examples/number/slots.vue +123 -123
  240. package/docs/examples/number/step-strictly.vue +41 -41
  241. package/docs/examples/number/step.vue +47 -47
  242. package/docs/examples/page/basic.vue +41 -41
  243. package/docs/examples/page/code-table-model.vue +428 -428
  244. package/docs/examples/page/dept-user-management.vue +211 -211
  245. package/docs/examples/page/init.vue +87 -87
  246. package/docs/examples/page/log.vue +453 -453
  247. package/docs/examples/page/user-management.vue +313 -313
  248. package/docs/examples/panel/tool-buttons.vue +18 -18
  249. package/docs/examples/radio/basic.vue +17 -17
  250. package/docs/examples/radio/button.vue +17 -17
  251. package/docs/examples/radio/color.vue +18 -18
  252. package/docs/examples/radio/disabled.vue +17 -17
  253. package/docs/examples/radio/size.vue +29 -29
  254. package/docs/examples/rate/basic.vue +24 -24
  255. package/docs/examples/rate/half.vue +24 -24
  256. package/docs/examples/rate/readonly.vue +11 -11
  257. package/docs/examples/rate/text.vue +37 -37
  258. package/docs/examples/select/basic.vue +16 -16
  259. package/docs/examples/select/clearable.vue +22 -22
  260. package/docs/examples/select/disabled.vue +31 -31
  261. package/docs/examples/select/filterable.vue +24 -24
  262. package/docs/examples/select/group.vue +23 -23
  263. package/docs/examples/select/icon.vue +16 -16
  264. package/docs/examples/select/multiple.vue +18 -18
  265. package/docs/examples/select/size.vue +39 -39
  266. package/docs/examples/slider/basic.vue +42 -42
  267. package/docs/examples/slider/disabled.vue +17 -17
  268. package/docs/examples/slider/marks.vue +30 -30
  269. package/docs/examples/slider/size.vue +37 -37
  270. package/docs/examples/slider/tooltip.vue +36 -36
  271. package/docs/examples/slider/vertical.vue +26 -26
  272. package/docs/examples/slider-captcha/basic.vue +44 -44
  273. package/docs/examples/slider-captcha/custom.vue +48 -48
  274. package/docs/examples/switch/basic.vue +16 -16
  275. package/docs/examples/switch/disabled.vue +13 -13
  276. package/docs/examples/switch/loading.vue +13 -13
  277. package/docs/examples/switch/size.vue +15 -15
  278. package/docs/examples/switch/text.vue +13 -13
  279. package/docs/examples/table/action-filter.vue +126 -126
  280. package/docs/examples/table/actions.vue +116 -116
  281. package/docs/examples/table/add-row.vue +103 -103
  282. package/docs/examples/table/basic.vue +168 -168
  283. package/docs/examples/table/checkbox-layout.vue +68 -68
  284. package/docs/examples/table/custom-layout.vue +115 -115
  285. package/docs/examples/table/dynamic-type.vue +73 -73
  286. package/docs/examples/table/editable.vue +262 -262
  287. package/docs/examples/table/field-selection.vue +87 -87
  288. package/docs/examples/table/frozen-column.vue +140 -140
  289. package/docs/examples/table/height-mode.vue +99 -99
  290. package/docs/examples/table/icon.vue +85 -85
  291. package/docs/examples/table/link.vue +66 -66
  292. package/docs/examples/table/multiple.vue +188 -188
  293. package/docs/examples/table/pagination.vue +151 -151
  294. package/docs/examples/table/single-selection.vue +64 -64
  295. package/docs/examples/table/sub-table-lazy.vue +97 -97
  296. package/docs/examples/table/sub-table.vue +103 -103
  297. package/docs/examples/table/tag.vue +43 -43
  298. package/docs/examples/table/tree-column.vue +119 -119
  299. package/docs/examples/table/tree-data.vue +141 -141
  300. package/docs/examples/table/tree-default-expand-all.vue +60 -60
  301. package/docs/examples/table/tree-lazy.vue +80 -80
  302. package/docs/examples/table/tree-set-selection.vue +75 -75
  303. package/docs/examples/table-panel/basic.vue +229 -229
  304. package/docs/examples/table-panel/batch-operations.vue +285 -285
  305. package/docs/examples/table-panel/button-visibility.vue +88 -88
  306. package/docs/examples/table-panel/filter.vue +219 -219
  307. package/docs/examples/table-panel/get-selection.vue +111 -111
  308. package/docs/examples/table-panel/multiple-selection.vue +243 -243
  309. package/docs/examples/table-panel/pagination.vue +133 -133
  310. package/docs/examples/table-panel/sub-table-lazy.vue +118 -118
  311. package/docs/examples/table-panel/tree-parent-key.vue +67 -67
  312. package/docs/examples/tabs/basic.vue +98 -98
  313. package/docs/examples/time/base.vue +67 -67
  314. package/docs/examples/title/basic.vue +87 -87
  315. package/docs/examples/tree/accordion.vue +46 -46
  316. package/docs/examples/tree/basic.vue +50 -50
  317. package/docs/examples/tree/buttons.vue +53 -53
  318. package/docs/examples/tree/checkable.vue +52 -52
  319. package/docs/examples/tree/custom-keys.vue +39 -39
  320. package/docs/examples/tree/default-expanded.vue +52 -52
  321. package/docs/examples/tree/draggable.vue +29 -29
  322. package/docs/examples/tree/expand-on-click.vue +39 -39
  323. package/docs/examples/tree/flat-data.vue +20 -20
  324. package/docs/examples/tree/icon.vue +40 -40
  325. package/docs/examples/tree/load-data.vue +37 -37
  326. package/docs/examples/tree/methods.vue +74 -74
  327. package/docs/examples/tree/theme.vue +33 -33
  328. package/docs/examples/tree-select/basic.vue +47 -47
  329. package/docs/examples/upload/accept.vue +31 -31
  330. package/docs/examples/upload/basic.vue +12 -12
  331. package/docs/examples/upload/drag.vue +11 -11
  332. package/docs/examples/upload/image.vue +17 -17
  333. package/docs/examples/upload/limit.vue +20 -20
  334. package/docs/examples/upload/multiple.vue +17 -17
  335. package/docs/examples/upload/readonly.vue +17 -17
  336. package/docs/examples/utils/cipher.vue +160 -160
  337. package/docs/examples/utils/common.vue +153 -153
  338. package/docs/examples/utils/date.vue +56 -56
  339. package/docs/examples/utils/dom.vue +52 -52
  340. package/docs/examples/utils/is.vue +70 -70
  341. package/docs/examples/workflow/basic.vue +265 -265
  342. package/docs/examples/workflow-viewer/basic.vue +248 -248
  343. package/package.json +27 -27
@@ -1,117 +1,117 @@
1
- # Upload 上传
2
-
3
- 通过点击或者拖拽上传文件。
4
-
5
- ## 基础用法
6
-
7
- 最基本的上传组件。
8
-
9
- <Demo :source-code="uploadBasicCode">
10
- <template #source>
11
- <upload-basic />
12
- </template>
13
- <template #description>
14
- 使用 `v-model` 绑定文件ID值。设置 `is-not-api` 为 `true` 可在不调用后端API的情况下预览效果。
15
- </template>
16
- </Demo>
17
-
18
- ## 多文件上传
19
-
20
- 支持一次性选择多个文件进行上传。
21
-
22
- <Demo :source-code="uploadMultipleCode">
23
- <template #source>
24
- <upload-multiple />
25
- </template>
26
- <template #description>
27
- 设置 `multiple` 属性启用多选模式。使用 `limit` 属性限制上传数量,设置为 `-1` 表示不限制。
28
- </template>
29
- </Demo>
30
-
31
- ## 拖拽上传
32
-
33
- 支持拖拽文件到指定区域进行上传。
34
-
35
- <Demo :source-code="uploadDragCode">
36
- <template #source>
37
- <upload-drag />
38
- </template>
39
- <template #description>
40
- 设置 `drag` 属性为 `true` 即可启用拖拽上传功能。
41
- </template>
42
- </Demo>
43
-
44
- ## 图片上传
45
-
46
- 专门用于上传图片的模式,提供图片预览功能。
47
-
48
- <Demo :source-code="uploadImageCode">
49
- <template #source>
50
- <upload-image />
51
- </template>
52
- <template #description>
53
- 设置 `is-upload-img` 属性为 `true` 启用图片上传模式,会以卡片形式展示上传的图片。
54
- </template>
55
- </Demo>
56
-
57
- ## 限制上传数量和大小
58
-
59
- 可以限制上传文件的数量和大小。
60
-
61
- <Demo :source-code="uploadLimitCode">
62
- <template #source>
63
- <upload-limit />
64
- </template>
65
- <template #description>
66
- 使用 `limit` 属性限制上传数量,`max-size` 和 `size-type` 配合使用限制文件大小。设置 `is-tip` 显示提示信息。
67
- </template>
68
- </Demo>
69
-
70
- ## 文件类型限制
71
-
72
- 限制上传的文件类型。
73
-
74
- <Demo :source-code="uploadAcceptCode">
75
- <template #source>
76
- <upload-accept />
77
- </template>
78
- <template #description>
79
- 使用 `accept` 属性指定接受的文件类型,例如 `.pdf`、`.xlsx,.xls`、`image/*` 等。
80
- </template>
81
- </Demo>
82
-
83
- ## 只读模式
84
-
85
- 只读状态下不能上传,只能查看已上传的文件。
86
-
87
- <Demo :source-code="uploadReadonlyCode">
88
- <template #source>
89
- <upload-readonly />
90
- </template>
91
- <template #description>
92
- 设置 `readonly` 属性为 `true` 即可进入只读模式。可通过 `btn-text` 自定义按钮文字。
93
- </template>
94
- </Demo>
95
-
96
- ## API
97
-
98
- <ApiTable :data="uploadApi" componentName="upload" />
99
-
100
- <script setup>
101
- import UploadBasic from '../examples/upload/basic.vue'
102
- import UploadMultiple from '../examples/upload/multiple.vue'
103
- import UploadDrag from '../examples/upload/drag.vue'
104
- import UploadImage from '../examples/upload/image.vue'
105
- import UploadLimit from '../examples/upload/limit.vue'
106
- import UploadAccept from '../examples/upload/accept.vue'
107
- import UploadReadonly from '../examples/upload/readonly.vue'
108
- import uploadApi from './meta/upload'
109
-
110
- import uploadBasicCode from '../examples/upload/basic.vue?raw'
111
- import uploadMultipleCode from '../examples/upload/multiple.vue?raw'
112
- import uploadDragCode from '../examples/upload/drag.vue?raw'
113
- import uploadImageCode from '../examples/upload/image.vue?raw'
114
- import uploadLimitCode from '../examples/upload/limit.vue?raw'
115
- import uploadAcceptCode from '../examples/upload/accept.vue?raw'
116
- import uploadReadonlyCode from '../examples/upload/readonly.vue?raw'
117
- </script>
1
+ # Upload 上传
2
+
3
+ 通过点击或者拖拽上传文件。
4
+
5
+ ## 基础用法
6
+
7
+ 最基本的上传组件。
8
+
9
+ <Demo :source-code="uploadBasicCode">
10
+ <template #source>
11
+ <upload-basic />
12
+ </template>
13
+ <template #description>
14
+ 使用 `v-model` 绑定文件ID值。设置 `is-not-api` 为 `true` 可在不调用后端API的情况下预览效果。
15
+ </template>
16
+ </Demo>
17
+
18
+ ## 多文件上传
19
+
20
+ 支持一次性选择多个文件进行上传。
21
+
22
+ <Demo :source-code="uploadMultipleCode">
23
+ <template #source>
24
+ <upload-multiple />
25
+ </template>
26
+ <template #description>
27
+ 设置 `multiple` 属性启用多选模式。使用 `limit` 属性限制上传数量,设置为 `-1` 表示不限制。
28
+ </template>
29
+ </Demo>
30
+
31
+ ## 拖拽上传
32
+
33
+ 支持拖拽文件到指定区域进行上传。
34
+
35
+ <Demo :source-code="uploadDragCode">
36
+ <template #source>
37
+ <upload-drag />
38
+ </template>
39
+ <template #description>
40
+ 设置 `drag` 属性为 `true` 即可启用拖拽上传功能。
41
+ </template>
42
+ </Demo>
43
+
44
+ ## 图片上传
45
+
46
+ 专门用于上传图片的模式,提供图片预览功能。
47
+
48
+ <Demo :source-code="uploadImageCode">
49
+ <template #source>
50
+ <upload-image />
51
+ </template>
52
+ <template #description>
53
+ 设置 `is-upload-img` 属性为 `true` 启用图片上传模式,会以卡片形式展示上传的图片。
54
+ </template>
55
+ </Demo>
56
+
57
+ ## 限制上传数量和大小
58
+
59
+ 可以限制上传文件的数量和大小。
60
+
61
+ <Demo :source-code="uploadLimitCode">
62
+ <template #source>
63
+ <upload-limit />
64
+ </template>
65
+ <template #description>
66
+ 使用 `limit` 属性限制上传数量,`max-size` 和 `size-type` 配合使用限制文件大小。设置 `is-tip` 显示提示信息。
67
+ </template>
68
+ </Demo>
69
+
70
+ ## 文件类型限制
71
+
72
+ 限制上传的文件类型。
73
+
74
+ <Demo :source-code="uploadAcceptCode">
75
+ <template #source>
76
+ <upload-accept />
77
+ </template>
78
+ <template #description>
79
+ 使用 `accept` 属性指定接受的文件类型,例如 `.pdf`、`.xlsx,.xls`、`image/*` 等。
80
+ </template>
81
+ </Demo>
82
+
83
+ ## 只读模式
84
+
85
+ 只读状态下不能上传,只能查看已上传的文件。
86
+
87
+ <Demo :source-code="uploadReadonlyCode">
88
+ <template #source>
89
+ <upload-readonly />
90
+ </template>
91
+ <template #description>
92
+ 设置 `readonly` 属性为 `true` 即可进入只读模式。可通过 `btn-text` 自定义按钮文字。
93
+ </template>
94
+ </Demo>
95
+
96
+ ## API
97
+
98
+ <ApiTable :data="uploadApi" componentName="upload" />
99
+
100
+ <script setup>
101
+ import UploadBasic from '../examples/upload/basic.vue'
102
+ import UploadMultiple from '../examples/upload/multiple.vue'
103
+ import UploadDrag from '../examples/upload/drag.vue'
104
+ import UploadImage from '../examples/upload/image.vue'
105
+ import UploadLimit from '../examples/upload/limit.vue'
106
+ import UploadAccept from '../examples/upload/accept.vue'
107
+ import UploadReadonly from '../examples/upload/readonly.vue'
108
+ import uploadApi from './meta/upload'
109
+
110
+ import uploadBasicCode from '../examples/upload/basic.vue?raw'
111
+ import uploadMultipleCode from '../examples/upload/multiple.vue?raw'
112
+ import uploadDragCode from '../examples/upload/drag.vue?raw'
113
+ import uploadImageCode from '../examples/upload/image.vue?raw'
114
+ import uploadLimitCode from '../examples/upload/limit.vue?raw'
115
+ import uploadAcceptCode from '../examples/upload/accept.vue?raw'
116
+ import uploadReadonlyCode from '../examples/upload/readonly.vue?raw'
117
+ </script>
@@ -1,21 +1,21 @@
1
- # WorkflowViewer 工作流查看器
2
-
3
- 工作流查看器组件。
4
-
5
- ## 基础用法
6
-
7
- <Demo :source-code="basicCode">
8
- <template #source>
9
- <Basic />
10
- </template>
11
- </Demo>
12
-
13
- ## API
14
-
15
- <ApiTable :data="metaData" componentName="workflow-viewer" />
16
-
17
- <script setup>
18
- import Basic from '../examples/workflow-viewer/basic.vue'
19
- import basicCode from '../examples/workflow-viewer/basic.vue?raw'
20
- import metaData from './meta/workflow-viewer'
21
- </script>
1
+ # WorkflowViewer 工作流查看器
2
+
3
+ 工作流查看器组件。
4
+
5
+ ## 基础用法
6
+
7
+ <Demo :source-code="basicCode">
8
+ <template #source>
9
+ <Basic />
10
+ </template>
11
+ </Demo>
12
+
13
+ ## API
14
+
15
+ <ApiTable :data="metaData" componentName="workflow-viewer" />
16
+
17
+ <script setup>
18
+ import Basic from '../examples/workflow-viewer/basic.vue'
19
+ import basicCode from '../examples/workflow-viewer/basic.vue?raw'
20
+ import metaData from './meta/workflow-viewer'
21
+ </script>
@@ -1,21 +1,21 @@
1
- # Workflow 工作流
2
-
3
- 工作流编辑器组件,支持创建工作流图、编辑节点和连接线。
4
-
5
- ## 基础用法
6
-
7
- <Demo :source-code="basicCode">
8
- <template #source>
9
- <Basic />
10
- </template>
11
- </Demo>
12
-
13
- ## API
14
-
15
- <ApiTable :data="metaData" componentName="workflow" />
16
-
17
- <script setup>
18
- import Basic from '../examples/workflow/basic.vue'
19
- import basicCode from '../examples/workflow/basic.vue?raw'
20
- import metaData from './meta/workflow'
21
- </script>
1
+ # Workflow 工作流
2
+
3
+ 工作流编辑器组件,支持创建工作流图、编辑节点和连接线。
4
+
5
+ ## 基础用法
6
+
7
+ <Demo :source-code="basicCode">
8
+ <template #source>
9
+ <Basic />
10
+ </template>
11
+ </Demo>
12
+
13
+ ## API
14
+
15
+ <ApiTable :data="metaData" componentName="workflow" />
16
+
17
+ <script setup>
18
+ import Basic from '../examples/workflow/basic.vue'
19
+ import basicCode from '../examples/workflow/basic.vue?raw'
20
+ import metaData from './meta/workflow'
21
+ </script>
@@ -1,35 +1,35 @@
1
- <template>
2
- <j-autocomplete
3
- v-model="state"
4
- :options="restaurants"
5
- placeholder="请输入内容"
6
- :trigger-on-focus="false"
7
- :debounce="500"
8
- clearable
9
- @select="handleSelect"
10
- />
11
- </template>
12
-
13
- <script setup lang="ts">
14
- import { ref } from 'vue'
15
-
16
- interface RestaurantItem {
17
- value: string
18
- link: string
19
- }
20
-
21
- const state = ref('')
22
-
23
- const restaurants = ref<RestaurantItem[]>([
24
- { value: 'vue', link: 'https://github.com/vuejs/vue' },
25
- { value: 'element', link: 'https://github.com/ElemeFE/element' },
26
- { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
27
- { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
28
- { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
29
- { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
30
- { value: 'babel', link: 'https://github.com/babel/babel' },
31
- ])
32
- const handleSelect = (item: RestaurantItem) => {
33
- console.log(item)
34
- }
35
- </script>
1
+ <template>
2
+ <j-autocomplete
3
+ v-model="state"
4
+ :options="restaurants"
5
+ placeholder="请输入内容"
6
+ :trigger-on-focus="false"
7
+ :debounce="500"
8
+ clearable
9
+ @select="handleSelect"
10
+ />
11
+ </template>
12
+
13
+ <script setup lang="ts">
14
+ import { ref } from 'vue'
15
+
16
+ interface RestaurantItem {
17
+ value: string
18
+ link: string
19
+ }
20
+
21
+ const state = ref('')
22
+
23
+ const restaurants = ref<RestaurantItem[]>([
24
+ { value: 'vue', link: 'https://github.com/vuejs/vue' },
25
+ { value: 'element', link: 'https://github.com/ElemeFE/element' },
26
+ { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
27
+ { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
28
+ { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
29
+ { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
30
+ { value: 'babel', link: 'https://github.com/babel/babel' },
31
+ ])
32
+ const handleSelect = (item: RestaurantItem) => {
33
+ console.log(item)
34
+ }
35
+ </script>
@@ -1,32 +1,32 @@
1
- <template>
2
- <j-autocomplete
3
- v-model="state"
4
- :options="restaurants"
5
- placeholder="请输入内容"
6
- @select="handleSelect"
7
- />
8
- </template>
9
-
10
- <script setup lang="ts">
11
- import { ref } from 'vue'
12
-
13
- interface RestaurantItem {
14
- value: string
15
- link: string
16
- }
17
-
18
- const state = ref('')
19
-
20
- const restaurants = ref<RestaurantItem[]>([
21
- { value: 'vue', link: 'https://github.com/vuejs/vue' },
22
- { value: 'element', link: 'https://github.com/ElemeFE/element' },
23
- { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
24
- { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
25
- { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
26
- { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
27
- { value: 'babel', link: 'https://github.com/babel/babel' },
28
- ])
29
- const handleSelect = (item: RestaurantItem) => {
30
- console.log(item)
31
- }
32
- </script>
1
+ <template>
2
+ <j-autocomplete
3
+ v-model="state"
4
+ :options="restaurants"
5
+ placeholder="请输入内容"
6
+ @select="handleSelect"
7
+ />
8
+ </template>
9
+
10
+ <script setup lang="ts">
11
+ import { ref } from 'vue'
12
+
13
+ interface RestaurantItem {
14
+ value: string
15
+ link: string
16
+ }
17
+
18
+ const state = ref('')
19
+
20
+ const restaurants = ref<RestaurantItem[]>([
21
+ { value: 'vue', link: 'https://github.com/vuejs/vue' },
22
+ { value: 'element', link: 'https://github.com/ElemeFE/element' },
23
+ { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
24
+ { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
25
+ { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
26
+ { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
27
+ { value: 'babel', link: 'https://github.com/babel/babel' },
28
+ ])
29
+ const handleSelect = (item: RestaurantItem) => {
30
+ console.log(item)
31
+ }
32
+ </script>
@@ -1,33 +1,33 @@
1
- <template>
2
- <j-autocomplete
3
- v-model="state"
4
- :options="restaurants"
5
- placeholder="请输入内容"
6
- clearable
7
- @select="handleSelect"
8
- />
9
- </template>
10
-
11
- <script setup lang="ts">
12
- import { ref } from 'vue'
13
-
14
- interface RestaurantItem {
15
- value: string
16
- link: string
17
- }
18
-
19
- const state = ref('')
20
-
21
- const restaurants = ref<RestaurantItem[]>([
22
- { value: 'vue', link: 'https://github.com/vuejs/vue' },
23
- { value: 'element', link: 'https://github.com/ElemeFE/element' },
24
- { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
25
- { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
26
- { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
27
- { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
28
- { value: 'babel', link: 'https://github.com/babel/babel' },
29
- ])
30
- const handleSelect = (item: RestaurantItem) => {
31
- console.log(item)
32
- }
33
- </script>
1
+ <template>
2
+ <j-autocomplete
3
+ v-model="state"
4
+ :options="restaurants"
5
+ placeholder="请输入内容"
6
+ clearable
7
+ @select="handleSelect"
8
+ />
9
+ </template>
10
+
11
+ <script setup lang="ts">
12
+ import { ref } from 'vue'
13
+
14
+ interface RestaurantItem {
15
+ value: string
16
+ link: string
17
+ }
18
+
19
+ const state = ref('')
20
+
21
+ const restaurants = ref<RestaurantItem[]>([
22
+ { value: 'vue', link: 'https://github.com/vuejs/vue' },
23
+ { value: 'element', link: 'https://github.com/ElemeFE/element' },
24
+ { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
25
+ { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
26
+ { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
27
+ { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
28
+ { value: 'babel', link: 'https://github.com/babel/babel' },
29
+ ])
30
+ const handleSelect = (item: RestaurantItem) => {
31
+ console.log(item)
32
+ }
33
+ </script>
@@ -1,49 +1,49 @@
1
- <template>
2
- <j-autocomplete
3
- v-model="state"
4
- :options="restaurants"
5
- placeholder="请输入内容"
6
- @select="handleSelect"
7
- >
8
- <template #default="{ item }">
9
- <div class="value">{{ item.value }}</div>
10
- <span class="link">{{ item.link }}</span>
11
- </template>
12
- </j-autocomplete>
13
- </template>
14
-
15
- <script setup lang="ts">
16
- import { ref } from 'vue'
17
-
18
- interface RestaurantItem {
19
- value: string
20
- link: string
21
- }
22
-
23
- const state = ref('')
24
-
25
- const restaurants = ref<RestaurantItem[]>([
26
- { value: 'vue', link: 'https://github.com/vuejs/vue' },
27
- { value: 'element', link: 'https://github.com/ElemeFE/element' },
28
- { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
29
- { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
30
- { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
31
- { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
32
- { value: 'babel', link: 'https://github.com/babel/babel' },
33
- ])
34
- const handleSelect = (item: RestaurantItem) => {
35
- console.log(item)
36
- }
37
- </script>
38
-
39
- <style scoped>
40
- .link {
41
- font-size: 12px;
42
- color: #b4b4b4;
43
- }
44
-
45
- .value {
46
- line-height: 26px;
47
- padding-right: 10px;
48
- }
49
- </style>
1
+ <template>
2
+ <j-autocomplete
3
+ v-model="state"
4
+ :options="restaurants"
5
+ placeholder="请输入内容"
6
+ @select="handleSelect"
7
+ >
8
+ <template #default="{ item }">
9
+ <div class="value">{{ item.value }}</div>
10
+ <span class="link">{{ item.link }}</span>
11
+ </template>
12
+ </j-autocomplete>
13
+ </template>
14
+
15
+ <script setup lang="ts">
16
+ import { ref } from 'vue'
17
+
18
+ interface RestaurantItem {
19
+ value: string
20
+ link: string
21
+ }
22
+
23
+ const state = ref('')
24
+
25
+ const restaurants = ref<RestaurantItem[]>([
26
+ { value: 'vue', link: 'https://github.com/vuejs/vue' },
27
+ { value: 'element', link: 'https://github.com/ElemeFE/element' },
28
+ { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
29
+ { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
30
+ { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
31
+ { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
32
+ { value: 'babel', link: 'https://github.com/babel/babel' },
33
+ ])
34
+ const handleSelect = (item: RestaurantItem) => {
35
+ console.log(item)
36
+ }
37
+ </script>
38
+
39
+ <style scoped>
40
+ .link {
41
+ font-size: 12px;
42
+ color: #b4b4b4;
43
+ }
44
+
45
+ .value {
46
+ line-height: 26px;
47
+ padding-right: 10px;
48
+ }
49
+ </style>