@a2simcode/ui 0.0.310 → 0.0.313

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