@a2simcode/ui 0.0.188 → 0.0.189

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