vue-devui 1.0.0-rc.7 → 1.0.0
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.
- package/README.md +163 -146
- package/alert/index.es.js +46 -15
- package/alert/index.umd.js +1 -1
- package/alert/style.css +1 -1
- package/auto-complete/index.es.js +8230 -231
- package/auto-complete/index.umd.js +29 -5
- package/auto-complete/style.css +1 -1
- package/avatar/index.es.js +81 -70
- package/avatar/index.umd.js +1 -1
- package/avatar/style.css +1 -1
- package/badge/index.es.js +34 -4
- package/badge/index.umd.js +1 -1
- package/badge/style.css +1 -1
- package/button/index.es.js +5706 -98
- package/button/index.umd.js +27 -1
- package/button/style.css +1 -1
- package/card/index.es.js +38 -13
- package/card/index.umd.js +1 -1
- package/card/style.css +1 -1
- package/checkbox/index.es.js +8066 -245
- package/checkbox/index.umd.js +27 -1
- package/checkbox/style.css +1 -1
- package/{date-picker → collapse}/index.d.ts +0 -0
- package/collapse/index.es.js +213 -0
- package/collapse/index.umd.js +1 -0
- package/{date-picker → collapse}/package.json +1 -1
- package/collapse/style.css +1 -0
- package/countdown/index.es.js +56 -13
- package/countdown/index.umd.js +1 -1
- package/date-picker-pro/index.d.ts +7 -0
- package/date-picker-pro/index.es.js +12020 -0
- package/date-picker-pro/index.umd.js +27 -0
- package/date-picker-pro/package.json +7 -0
- package/date-picker-pro/style.css +1 -0
- package/drawer/index.es.js +29 -4
- package/drawer/index.umd.js +1 -1
- package/drawer/style.css +1 -1
- package/dropdown/index.es.js +178 -142
- package/dropdown/index.umd.js +1 -1
- package/dropdown/style.css +1 -1
- package/editable-select/index.es.js +742 -107
- package/editable-select/index.umd.js +1 -1
- package/editable-select/style.css +1 -1
- package/form/index.es.js +544 -316
- package/form/index.umd.js +17 -17
- package/form/style.css +1 -1
- package/fullscreen/index.es.js +28 -4
- package/fullscreen/index.umd.js +1 -1
- package/fullscreen/style.css +1 -1
- package/grid/index.es.js +71 -50
- package/grid/index.umd.js +1 -1
- package/grid/style.css +1 -1
- package/icon/index.es.js +184 -23
- package/icon/index.umd.js +1 -1
- package/icon/style.css +1 -0
- package/image-preview/index.es.js +34 -11
- package/image-preview/index.umd.js +1 -1
- package/image-preview/style.css +1 -1
- package/input/index.es.js +8250 -131
- package/input/index.umd.js +27 -1
- package/input/style.css +1 -1
- package/input-number/index.es.js +275 -203
- package/input-number/index.umd.js +1 -1
- package/input-number/style.css +1 -1
- package/layout/index.es.js +34 -6
- package/layout/index.umd.js +1 -1
- package/layout/style.css +1 -1
- package/loading/index.es.js +34 -10
- package/loading/index.umd.js +1 -1
- package/loading/style.css +1 -1
- package/mention/index.d.ts +7 -0
- package/mention/index.es.js +8310 -0
- package/mention/index.umd.js +36 -0
- package/mention/package.json +7 -0
- package/mention/style.css +1 -0
- package/menu/index.d.ts +7 -0
- package/menu/index.es.js +934 -0
- package/menu/index.umd.js +1 -0
- package/menu/package.json +7 -0
- package/menu/style.css +1 -0
- package/message/index.d.ts +7 -0
- package/message/index.es.js +538 -0
- package/message/index.umd.js +1 -0
- package/message/package.json +7 -0
- package/message/style.css +1 -0
- package/modal/index.es.js +359 -170
- package/modal/index.umd.js +1 -1
- package/modal/style.css +1 -1
- package/notification/index.es.js +236 -65
- package/notification/index.umd.js +1 -1
- package/notification/style.css +1 -1
- package/nuxt/components/ButtonGroup.js +3 -0
- package/nuxt/components/CheckboxButton.js +3 -0
- package/nuxt/components/Collapse.js +3 -0
- package/nuxt/components/CollapseItem.js +3 -0
- package/nuxt/components/DRangeDatePickerPro.js +3 -0
- package/nuxt/components/DatePickerPro.js +3 -0
- package/nuxt/components/Icon.js +1 -0
- package/nuxt/components/IconGroup.js +3 -0
- package/nuxt/components/LABEL_DATA.js +3 -0
- package/nuxt/components/Mention.js +3 -0
- package/nuxt/components/Menu.js +3 -0
- package/nuxt/components/MenuItem.js +3 -0
- package/nuxt/components/Message.js +3 -0
- package/nuxt/components/Option.js +3 -0
- package/nuxt/components/OptionGroup.js +3 -0
- package/nuxt/components/RadioButton.js +3 -0
- package/nuxt/components/Step.js +3 -0
- package/nuxt/components/Steps.js +3 -0
- package/nuxt/components/SubMenu.js +3 -0
- package/nuxt/components/TABLE_TOKEN.js +3 -0
- package/nuxt/components/TimePicker.js +3 -0
- package/nuxt/components/TimeSelect.js +3 -0
- package/nuxt/components/animationInjectionKey.js +3 -0
- package/nuxt/components/buttonGroupInjectionKey.js +3 -0
- package/nuxt/components/buttonGroupProps.js +3 -0
- package/nuxt/components/collapseItemProps.js +3 -0
- package/nuxt/components/collapseProps.js +3 -0
- package/nuxt/components/datePickerProCommonProps.js +3 -0
- package/nuxt/components/datePickerProPanelProps.js +3 -0
- package/nuxt/components/datePickerProProps.js +3 -0
- package/nuxt/components/iconProps.js +1 -0
- package/nuxt/components/mentionProps.js +3 -0
- package/nuxt/components/messageProps.js +3 -0
- package/nuxt/components/roundInjectionKey.js +3 -0
- package/nuxt/components/skeletonItemProps.js +3 -0
- package/nuxt/components/stepProps.js +3 -0
- package/nuxt/components/stepsProps.js +3 -0
- package/nuxt/components/svgIconProps.js +3 -0
- package/nuxt/components/tableProps.js +3 -0
- package/nuxt/components/timerPickerPanelProps.js +3 -0
- package/nuxt/components/treeNodeProps.js +3 -0
- package/overlay/index.es.js +84 -125
- package/overlay/index.umd.js +1 -1
- package/overlay/style.css +1 -1
- package/package.json +7 -3
- package/pagination/index.es.js +234 -39
- package/pagination/index.umd.js +1 -1
- package/pagination/style.css +1 -1
- package/panel/style.css +1 -1
- package/popover/index.es.js +274 -220
- package/popover/index.umd.js +13 -13
- package/popover/style.css +1 -1
- package/progress/index.es.js +31 -9
- package/progress/index.umd.js +3 -3
- package/progress/style.css +1 -1
- package/radio/index.es.js +7969 -152
- package/radio/index.umd.js +27 -1
- package/radio/style.css +1 -1
- package/rate/index.es.js +46 -14
- package/rate/index.umd.js +1 -1
- package/rate/style.css +1 -1
- package/result/index.es.js +169 -22
- package/result/index.umd.js +1 -1
- package/result/style.css +1 -1
- package/search/index.es.js +3823 -1090
- package/search/index.umd.js +18 -18
- package/search/style.css +1 -1
- package/select/index.es.js +9186 -478
- package/select/index.umd.js +27 -1
- package/select/style.css +1 -1
- package/skeleton/index.es.js +110 -259
- package/skeleton/index.umd.js +1 -1
- package/skeleton/style.css +1 -1
- package/slider/index.es.js +143 -146
- package/slider/index.umd.js +1 -1
- package/slider/style.css +1 -1
- package/splitter/index.es.js +433 -207
- package/splitter/index.umd.js +17 -17
- package/splitter/style.css +1 -1
- package/statistic/index.es.js +34 -16
- package/statistic/index.umd.js +1 -1
- package/statistic/style.css +1 -1
- package/status/index.es.js +26 -2
- package/status/index.umd.js +1 -1
- package/status/style.css +1 -1
- package/steps/index.d.ts +7 -0
- package/steps/index.es.js +386 -0
- package/steps/index.umd.js +1 -0
- package/steps/package.json +7 -0
- package/steps/style.css +1 -0
- package/style.css +1 -1
- package/switch/index.es.js +7802 -59
- package/switch/index.umd.js +27 -1
- package/switch/style.css +1 -1
- package/table/index.es.js +9769 -919
- package/table/index.umd.js +27 -1
- package/table/style.css +1 -1
- package/tabs/index.es.js +309 -96
- package/tabs/index.umd.js +1 -1
- package/tabs/style.css +1 -1
- package/tag/index.es.js +35 -7
- package/tag/index.umd.js +1 -1
- package/tag/style.css +1 -1
- package/textarea/index.es.js +7922 -78
- package/textarea/index.umd.js +35 -1
- package/textarea/style.css +1 -1
- package/time-picker/index.d.ts +7 -0
- package/time-picker/index.es.js +9549 -0
- package/time-picker/index.umd.js +27 -0
- package/time-picker/package.json +7 -0
- package/time-picker/style.css +1 -0
- package/time-select/index.d.ts +7 -0
- package/time-select/index.es.js +9585 -0
- package/time-select/index.umd.js +27 -0
- package/time-select/package.json +7 -0
- package/time-select/style.css +1 -0
- package/timeline/index.es.js +169 -22
- package/timeline/index.umd.js +1 -1
- package/timeline/style.css +1 -1
- package/tooltip/index.es.js +265 -212
- package/tooltip/index.umd.js +15 -15
- package/tooltip/style.css +1 -1
- package/tree/index.es.js +11343 -795
- package/tree/index.umd.js +27 -1
- package/tree/style.css +1 -1
- package/upload/index.es.js +494 -106
- package/upload/index.umd.js +1 -1
- package/upload/style.css +1 -1
- package/vue-devui.es.js +22849 -13614
- package/vue-devui.umd.js +30 -23
- package/date-picker/index.es.js +0 -1145
- package/date-picker/index.umd.js +0 -1
- package/date-picker/style.css +0 -1
- package/nuxt/components/DatePicker.js +0 -3
- package/nuxt/components/FormControl.js +0 -3
- package/nuxt/components/FormLabel.js +0 -3
- package/nuxt/components/StickSlider.js +0 -3
- package/nuxt/components/formControlProps.js +0 -3
- package/nuxt/components/overlayEmits.js +0 -3
- package/nuxt/components/overlayProps.js +0 -3
package/README.md
CHANGED
|
@@ -1,146 +1,163 @@
|
|
|
1
|
-
<p align="center">
|
|
2
|
-
<a href="https://devui.design/
|
|
3
|
-
<img alt="DevUI Logo" src="https://
|
|
4
|
-
</a>
|
|
5
|
-
</p>
|
|
6
|
-
|
|
7
|
-
<h1 align="center">Vue DevUI</h1>
|
|
8
|
-
|
|
9
|
-
<p align="center">Vue3 component library based on <a href="https://devui.design/" target="_blank" rel="noopener noreferrer">DevUI Design</a></p>
|
|
10
|
-
|
|
11
|
-
English | [简体中文](README.zh-CN.md)
|
|
12
|
-
|
|
13
|
-
🌈 Features:
|
|
14
|
-
|
|
15
|
-
- 📦 40 high-quality components that are simple, easy to use, and flexible.
|
|
16
|
-
- 🔑 Support for TypeScript.
|
|
17
|
-
- ⛰️ Support for Nuxt3.
|
|
18
|
-
- ⚡ Support for on-demand import.
|
|
19
|
-
- 🌍 Support internationalization.
|
|
20
|
-
- 🎨 Support theme customization, and built-in seven beautiful themes such as `Galaxy`, `Sweet` and `Provence`.
|
|
21
|
-
|
|
22
|
-
## 🔧 Usage
|
|
23
|
-
|
|
24
|
-
The first step is to install vue devui:
|
|
25
|
-
|
|
26
|
-
```
|
|
27
|
-
npm i vue-devui
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
Then import `DevUI` in the `main.ts` file:
|
|
31
|
-
|
|
32
|
-
```ts
|
|
33
|
-
import { createApp } from 'vue'
|
|
34
|
-
import App from './App.vue'
|
|
35
|
-
|
|
36
|
-
// Import Vue DevUI component and style
|
|
37
|
-
import DevUI from 'vue-devui'
|
|
38
|
-
import 'vue-devui/style.css'
|
|
39
|
-
|
|
40
|
-
createApp(App).use(DevUI).mount('#app')
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
Then you can use the vue devui component(such as `<d-button>`) in the `App.vue` file:
|
|
44
|
-
|
|
45
|
-
```vue
|
|
46
|
-
<template>
|
|
47
|
-
<d-button>Button</d-button>
|
|
48
|
-
</template>
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
## 🖥️ Development
|
|
52
|
-
|
|
53
|
-
```shell
|
|
54
|
-
git clone git@github.com:DevCloudFE/vue-devui.git
|
|
55
|
-
cd vue-devui
|
|
56
|
-
pnpm i
|
|
57
|
-
pnpm dev
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
Open your browser and visit: [http://localhost:3000/](http://localhost:3000/).
|
|
61
|
-
|
|
62
|
-
## 🤝 Contributing
|
|
63
|
-
|
|
64
|
-
Welcome to join our Vue DevUI open source project!🎉
|
|
65
|
-
|
|
66
|
-
By participating in the Vue DevUI project, we can together:
|
|
67
|
-
- 🔥 Learn the latest cool `Vite` + `Vue3` + `TypeScript` + `JSX` technology.
|
|
68
|
-
- 🎁 Learn how to design and develop UI components.
|
|
69
|
-
- ⭐ Hone programming skills and learn excellent programming practice.
|
|
70
|
-
- 🎊 Meet a group of friends who love learning and open source.
|
|
71
|
-
|
|
72
|
-
If you don't know how to start, please read our [contributing guide](https://vue-devui.github.io/contributing/)
|
|
73
|
-
|
|
74
|
-
## ✨ Contributors
|
|
75
|
-
|
|
76
|
-
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
|
|
77
|
-
|
|
78
|
-
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
|
|
79
|
-
<!-- prettier-ignore-start -->
|
|
80
|
-
<!-- markdownlint-disable -->
|
|
81
|
-
<table>
|
|
82
|
-
<tr>
|
|
83
|
-
<td align="center"><a href="https://juejin.cn/user/712139267650141"><img src="https://avatars.githubusercontent.com/u/9566362?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kagol</b></sub></a><br /><a href="#maintenance-kagol" title="Maintenance">🚧</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=kagol" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=kagol" title="Documentation">📖</a></td>
|
|
84
|
-
<td align="center"><a href="https://github.com/TinsFox"><img src="https://avatars.githubusercontent.com/u/33956589?v=4?s=100" width="100px;" alt=""/><br /><sub><b>TinsFox</b></sub></a><br /><a href="#maintenance-TinsFox" title="Maintenance">🚧</a> <a href="#infra-TinsFox" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
|
|
85
|
-
<td align="center"><a href="https://github.com/lnzhangsong"><img src="https://avatars.githubusercontent.com/u/15092594?v=4?s=100" width="100px;" alt=""/><br /><sub><b>nif</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=lnzhangsong" title="Code">💻</a></td>
|
|
86
|
-
<td align="center"><a href="https://github.com/Zcating"><img src="https://avatars.githubusercontent.com/u/13329558?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Zcating</b></sub></a><br /><a href="#maintenance-Zcating" title="Maintenance">🚧</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=Zcating" title="Code">💻</a></td>
|
|
87
|
-
<td align="center"><a href="https://github.com/sufuwang"><img src="https://avatars.githubusercontent.com/u/46395105?v=4?s=100" width="100px;" alt=""/><br /><sub><b>王凯</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=sufuwang" title="Code">💻</a></td>
|
|
88
|
-
<td align="center"><a href="https://github.com/iel-h"><img src="https://avatars.githubusercontent.com/u/53589602?v=4?s=100" width="100px;" alt=""/><br /><sub><b>iel</b></sub></a><br /><a href="#maintenance-iel-h" title="Maintenance">🚧</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=iel-h" title="Code">💻</a></td>
|
|
89
|
-
<td align="center"><a href="https://github.com/chenxi24"><img src="https://avatars.githubusercontent.com/u/40349890?v=4?s=100" width="100px;" alt=""/><br /><sub><b>chenxi24</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=chenxi24" title="Code">💻</a></td>
|
|
90
|
-
<td align="center"><a href="https://github.com/asdlml6"><img src="https://avatars.githubusercontent.com/u/61737780?v=4?s=100" width="100px;" alt=""/><br /><sub><b>小九九</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=asdlml6" title="Code">💻</a></td>
|
|
91
|
-
<td align="center"><a href="http://blog.alanlee.top"><img src="https://avatars.githubusercontent.com/u/42601044?v=4?s=100" width="100px;" alt=""/><br /><sub><b>AlanLee</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=AlanLee97" title="Code">💻</a></td>
|
|
92
|
-
<td align="center"><a href="https://github.com/ForeseeBear"><img src="https://avatars.githubusercontent.com/u/15258339?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Echo</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=ForeseeBear" title="Code">💻</a></td>
|
|
93
|
-
</tr>
|
|
94
|
-
<tr>
|
|
95
|
-
<td align="center"><a href="https://github.com/GaoNeng-wWw"><img src="https://avatars.githubusercontent.com/u/31283122?v=4?s=100" width="100px;" alt=""/><br /><sub><b>GaoNeng</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=GaoNeng-wWw" title="Code">💻</a></td>
|
|
96
|
-
<td align="center"><a href="https://github.com/xingyan95"><img src="https://avatars.githubusercontent.com/u/11143986?v=4?s=100" width="100px;" alt=""/><br /><sub><b>行言</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=xingyan95" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3Axingyan95" title="Bug reports">🐛</a></td>
|
|
97
|
-
<td align="center"><a href="https://devin974.github.io/"><img src="https://avatars.githubusercontent.com/u/67035714?v=4?s=100" width="100px;" alt=""/><br /><sub><b>devin</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=devin974" title="Code">💻</a></td>
|
|
98
|
-
<td align="center"><a href="https://juejin.cn/user/1618116899507735/posts"><img src="https://avatars.githubusercontent.com/u/70649502?v=4?s=100" width="100px;" alt=""/><br /><sub><b>无声</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=ivestszheng" title="Code">💻</a></td>
|
|
99
|
-
<td align="center"><a href="https://github.com/zxlfly"><img src="https://avatars.githubusercontent.com/u/26324442?v=4?s=100" width="100px;" alt=""/><br /><sub><b>sleep_fish</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=zxlfly" title="Code">💻</a></td>
|
|
100
|
-
<td align="center"><a href="https://github.com/whylost"><img src="https://avatars.githubusercontent.com/u/62528887?v=4?s=100" width="100px;" alt=""/><br /><sub><b>迷心whylost</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=whylost" title="Code">💻</a></td>
|
|
101
|
-
<td align="center"><a href="https://juejin.im/user/5c15d35fe51d4545ae495e43"><img src="https://avatars.githubusercontent.com/u/31237954?v=4?s=100" width="100px;" alt=""/><br /><sub><b>X.Q. Chen</b></sub></a><br /><a href="#infra-brenner8023" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=brenner8023" title="Code">💻</a></td>
|
|
102
|
-
<td align="center"><a href="https://github.com/git-Where"><img src="https://avatars.githubusercontent.com/u/16344566?v=4?s=100" width="100px;" alt=""/><br /><sub><b>葉家男孩</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=git-Where" title="Code">💻</a></td>
|
|
103
|
-
<td align="center"><a href="https://github.com/CatsAndMice"><img src="https://avatars.githubusercontent.com/u/58327088?v=4?s=100" width="100px;" alt=""/><br /><sub><b>lihai</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=CatsAndMice" title="Code">💻</a></td>
|
|
104
|
-
<td align="center"><a href="http://www.naluduo.vip"><img src="https://avatars.githubusercontent.com/u/28448589?v=4?s=100" width="100px;" alt=""/><br /><sub><b>纳撸多</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=naluduo233" title="Code">💻</a></td>
|
|
105
|
-
</tr>
|
|
106
|
-
<tr>
|
|
107
|
-
<td align="center"><a href="https://github.com/ElsaOOo"><img src="https://avatars.githubusercontent.com/u/48074435?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ElsaOOo</b></sub></a><br /><a href="#maintenance-ElsaOOo" title="Maintenance">🚧</a> <a href="#infra-ElsaOOo" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=ElsaOOo" title="Code">💻</a></td>
|
|
108
|
-
<td align="center"><a href="https://github.com/liuxdi"><img src="https://avatars.githubusercontent.com/u/10958003?v=4?s=100" width="100px;" alt=""/><br /><sub><b>刘小迪</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=liuxdi" title="Code">💻</a></td>
|
|
109
|
-
<td align="center"><a href="https://github.com/unfound"><img src="https://avatars.githubusercontent.com/u/32935349?v=4?s=100" width="100px;" alt=""/><br /><sub><b>unfound</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=unfound" title="Code">💻</a></td>
|
|
110
|
-
<td align="center"><a href="https://github.com/Roading"><img src="https://avatars.githubusercontent.com/u/7751774?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Roading</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=Roading" title="Code">💻</a></td>
|
|
111
|
-
<td align="center"><a href="http://inreasons.cn"><img src="https://avatars.githubusercontent.com/u/47918504?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Chestnut</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=banlify" title="Code">💻</a></td>
|
|
112
|
-
<td align="center"><a href="https://github.com/c0dedance"><img src="https://avatars.githubusercontent.com/u/38075730?v=4?s=100" width="100px;" alt=""/><br /><sub><b>c0dedance</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=c0dedance" title="Code">💻</a></td>
|
|
113
|
-
<td align="center"><a href="https://github.com/duqingyu"><img src="https://avatars.githubusercontent.com/u/30541930?v=4?s=100" width="100px;" alt=""/><br /><sub><b>杜庆愉</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=duqingyu" title="Code">💻</a></td>
|
|
114
|
-
<td align="center"><a href="https://github.com/linxiang07"><img src="https://avatars.githubusercontent.com/u/40119767?v=4?s=100" width="100px;" alt=""/><br /><sub><b>linxiang</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=linxiang07" title="Code">💻</a></td>
|
|
115
|
-
<td align="center"><a href="https://github.com/nextniko"><img src="https://avatars.githubusercontent.com/u/40553790?v=4?s=100" width="100px;" alt=""/><br /><sub><b>掘墓忍者</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=nextniko" title="Code">💻</a></td>
|
|
116
|
-
<td align="center"><a href="https://github.com/zcj996"><img src="https://avatars.githubusercontent.com/u/52314078?v=4?s=100" width="100px;" alt=""/><br /><sub><b>一个大胖子</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=zcj996" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=zcj996" title="Documentation">📖</a></td>
|
|
117
|
-
</tr>
|
|
118
|
-
<tr>
|
|
119
|
-
<td align="center"><a href="https://bandism.net/"><img src="https://avatars.githubusercontent.com/u/22633385?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ikko Ashimine</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=eltociear" title="Documentation">📖</a></td>
|
|
120
|
-
<td align="center"><a href="https://xiaoborao.github.io/"><img src="https://avatars.githubusercontent.com/u/27467603?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bob</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=xiaoboRao" title="Code">💻</a></td>
|
|
121
|
-
<td align="center"><a href="https://github.com/NidusP"><img src="https://avatars.githubusercontent.com/u/30283065?v=4?s=100" width="100px;" alt=""/><br /><sub><b>populus</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=NidusP" title="Code">💻</a></td>
|
|
122
|
-
<td align="center"><a href="https://github.com/554246839"><img src="https://avatars.githubusercontent.com/u/24663941?v=4?s=100" width="100px;" alt=""/><br /><sub><b>tohalf</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=554246839" title="Code">💻</a></td>
|
|
123
|
-
<td align="center"><a href="https://github.com/Lonely-shang"><img src="https://avatars.githubusercontent.com/u/34124930?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Miliky</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=Lonely-shang" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=Lonely-shang" title="Tests">⚠️</a></td>
|
|
124
|
-
<td align="center"><a href="https://github.com/MICD0704"><img src="https://avatars.githubusercontent.com/u/20532893?v=4?s=100" width="100px;" alt=""/><br /><sub><b>MICD</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=MICD0704" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3AMICD0704" title="Bug reports">🐛</a></td>
|
|
125
|
-
<td align="center"><a href="https://github.com/ming-bin"><img src="https://avatars.githubusercontent.com/u/54826175?v=4?s=100" width="100px;" alt=""/><br /><sub><b>mingBin</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=ming-bin" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3Aming-bin" title="Bug reports">🐛</a></td>
|
|
126
|
-
<td align="center"><a href="https://github.com/icjs-cc"><img src="https://avatars.githubusercontent.com/u/27618209?v=4?s=100" width="100px;" alt=""/><br /><sub><b>陈剑术</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=icjs-cc" title="Code">💻</a></td>
|
|
127
|
-
<td align="center"><a href="https://www.merlin218.top/"><img src="https://avatars.githubusercontent.com/u/61051874?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Merlin218</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3AMerlin218" title="Bug reports">🐛</a></td>
|
|
128
|
-
<td align="center"><a href="https://github.com/jingyiliu"><img src="https://avatars.githubusercontent.com/u/6957175?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Johnny.Liu</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3Ajingyiliu" title="Bug reports">🐛</a></td>
|
|
129
|
-
</tr>
|
|
130
|
-
<tr>
|
|
131
|
-
<td align="center"><a href="https://github.com/Yangxfeng"><img src="https://avatars.githubusercontent.com/u/35209766?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yangxfeng</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3AYangxfeng" title="Bug reports">🐛</a></td>
|
|
132
|
-
<td align="center"><a href="https://github.com/jCodeLife"><img src="https://avatars.githubusercontent.com/u/50767049?v=4?s=100" width="100px;" alt=""/><br /><sub><b>jCodeLife</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3AjCodeLife" title="Bug reports">🐛</a></td>
|
|
133
|
-
<td align="center"><a href="https://github.com/XiaoRIGE"><img src="https://avatars.githubusercontent.com/u/33147011?v=4?s=100" width="100px;" alt=""/><br /><sub><b>宋小日</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3AXiaoRIGE" title="Bug reports">🐛</a></td>
|
|
134
|
-
|
|
135
|
-
</
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://devui.design/" target="_blank" rel="noopener noreferrer">
|
|
3
|
+
<img alt="DevUI Logo" src="https://vue-devui.github.io/assets/logo.svg" width="180" style="max-width:100%;">
|
|
4
|
+
</a>
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
<h1 align="center">Vue DevUI</h1>
|
|
8
|
+
|
|
9
|
+
<p align="center">Vue3 component library based on <a href="https://devui.design/" target="_blank" rel="noopener noreferrer">DevUI Design</a></p>
|
|
10
|
+
|
|
11
|
+
English | [简体中文](README.zh-CN.md)
|
|
12
|
+
|
|
13
|
+
🌈 Features:
|
|
14
|
+
|
|
15
|
+
- 📦 40 high-quality components that are simple, easy to use, and flexible.
|
|
16
|
+
- 🔑 Support for TypeScript.
|
|
17
|
+
- ⛰️ Support for Nuxt3.
|
|
18
|
+
- ⚡ Support for on-demand import.
|
|
19
|
+
- 🌍 Support internationalization.
|
|
20
|
+
- 🎨 Support theme customization, and built-in seven beautiful themes such as `Galaxy`, `Sweet` and `Provence`.
|
|
21
|
+
|
|
22
|
+
## 🔧 Usage
|
|
23
|
+
|
|
24
|
+
The first step is to install vue devui:
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
npm i vue-devui
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Then import `DevUI` in the `main.ts` file:
|
|
31
|
+
|
|
32
|
+
```ts
|
|
33
|
+
import { createApp } from 'vue'
|
|
34
|
+
import App from './App.vue'
|
|
35
|
+
|
|
36
|
+
// Import Vue DevUI component and style
|
|
37
|
+
import DevUI from 'vue-devui'
|
|
38
|
+
import 'vue-devui/style.css'
|
|
39
|
+
|
|
40
|
+
createApp(App).use(DevUI).mount('#app')
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
Then you can use the vue devui component(such as `<d-button>`) in the `App.vue` file:
|
|
44
|
+
|
|
45
|
+
```vue
|
|
46
|
+
<template>
|
|
47
|
+
<d-button>Button</d-button>
|
|
48
|
+
</template>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## 🖥️ Development
|
|
52
|
+
|
|
53
|
+
```shell
|
|
54
|
+
git clone git@github.com:DevCloudFE/vue-devui.git
|
|
55
|
+
cd vue-devui
|
|
56
|
+
pnpm i
|
|
57
|
+
pnpm dev
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Open your browser and visit: [http://localhost:3000/](http://localhost:3000/).
|
|
61
|
+
|
|
62
|
+
## 🤝 Contributing
|
|
63
|
+
|
|
64
|
+
Welcome to join our Vue DevUI open source project!🎉
|
|
65
|
+
|
|
66
|
+
By participating in the Vue DevUI project, we can together:
|
|
67
|
+
- 🔥 Learn the latest cool `Vite` + `Vue3` + `TypeScript` + `JSX` technology.
|
|
68
|
+
- 🎁 Learn how to design and develop UI components.
|
|
69
|
+
- ⭐ Hone programming skills and learn excellent programming practice.
|
|
70
|
+
- 🎊 Meet a group of friends who love learning and open source.
|
|
71
|
+
|
|
72
|
+
If you don't know how to start, please read our [contributing guide](https://vue-devui.github.io/contributing/)
|
|
73
|
+
|
|
74
|
+
## ✨ Contributors
|
|
75
|
+
|
|
76
|
+
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
|
|
77
|
+
|
|
78
|
+
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
|
|
79
|
+
<!-- prettier-ignore-start -->
|
|
80
|
+
<!-- markdownlint-disable -->
|
|
81
|
+
<table>
|
|
82
|
+
<tr>
|
|
83
|
+
<td align="center"><a href="https://juejin.cn/user/712139267650141"><img src="https://avatars.githubusercontent.com/u/9566362?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kagol</b></sub></a><br /><a href="#maintenance-kagol" title="Maintenance">🚧</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=kagol" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=kagol" title="Documentation">📖</a></td>
|
|
84
|
+
<td align="center"><a href="https://github.com/TinsFox"><img src="https://avatars.githubusercontent.com/u/33956589?v=4?s=100" width="100px;" alt=""/><br /><sub><b>TinsFox</b></sub></a><br /><a href="#maintenance-TinsFox" title="Maintenance">🚧</a> <a href="#infra-TinsFox" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
|
|
85
|
+
<td align="center"><a href="https://github.com/lnzhangsong"><img src="https://avatars.githubusercontent.com/u/15092594?v=4?s=100" width="100px;" alt=""/><br /><sub><b>nif</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=lnzhangsong" title="Code">💻</a></td>
|
|
86
|
+
<td align="center"><a href="https://github.com/Zcating"><img src="https://avatars.githubusercontent.com/u/13329558?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Zcating</b></sub></a><br /><a href="#maintenance-Zcating" title="Maintenance">🚧</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=Zcating" title="Code">💻</a></td>
|
|
87
|
+
<td align="center"><a href="https://github.com/sufuwang"><img src="https://avatars.githubusercontent.com/u/46395105?v=4?s=100" width="100px;" alt=""/><br /><sub><b>王凯</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=sufuwang" title="Code">💻</a></td>
|
|
88
|
+
<td align="center"><a href="https://github.com/iel-h"><img src="https://avatars.githubusercontent.com/u/53589602?v=4?s=100" width="100px;" alt=""/><br /><sub><b>iel</b></sub></a><br /><a href="#maintenance-iel-h" title="Maintenance">🚧</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=iel-h" title="Code">💻</a></td>
|
|
89
|
+
<td align="center"><a href="https://github.com/chenxi24"><img src="https://avatars.githubusercontent.com/u/40349890?v=4?s=100" width="100px;" alt=""/><br /><sub><b>chenxi24</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=chenxi24" title="Code">💻</a></td>
|
|
90
|
+
<td align="center"><a href="https://github.com/asdlml6"><img src="https://avatars.githubusercontent.com/u/61737780?v=4?s=100" width="100px;" alt=""/><br /><sub><b>小九九</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=asdlml6" title="Code">💻</a></td>
|
|
91
|
+
<td align="center"><a href="http://blog.alanlee.top"><img src="https://avatars.githubusercontent.com/u/42601044?v=4?s=100" width="100px;" alt=""/><br /><sub><b>AlanLee</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=AlanLee97" title="Code">💻</a></td>
|
|
92
|
+
<td align="center"><a href="https://github.com/ForeseeBear"><img src="https://avatars.githubusercontent.com/u/15258339?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Echo</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=ForeseeBear" title="Code">💻</a></td>
|
|
93
|
+
</tr>
|
|
94
|
+
<tr>
|
|
95
|
+
<td align="center"><a href="https://github.com/GaoNeng-wWw"><img src="https://avatars.githubusercontent.com/u/31283122?v=4?s=100" width="100px;" alt=""/><br /><sub><b>GaoNeng</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=GaoNeng-wWw" title="Code">💻</a></td>
|
|
96
|
+
<td align="center"><a href="https://github.com/xingyan95"><img src="https://avatars.githubusercontent.com/u/11143986?v=4?s=100" width="100px;" alt=""/><br /><sub><b>行言</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=xingyan95" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3Axingyan95" title="Bug reports">🐛</a></td>
|
|
97
|
+
<td align="center"><a href="https://devin974.github.io/"><img src="https://avatars.githubusercontent.com/u/67035714?v=4?s=100" width="100px;" alt=""/><br /><sub><b>devin</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=devin974" title="Code">💻</a></td>
|
|
98
|
+
<td align="center"><a href="https://juejin.cn/user/1618116899507735/posts"><img src="https://avatars.githubusercontent.com/u/70649502?v=4?s=100" width="100px;" alt=""/><br /><sub><b>无声</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=ivestszheng" title="Code">💻</a></td>
|
|
99
|
+
<td align="center"><a href="https://github.com/zxlfly"><img src="https://avatars.githubusercontent.com/u/26324442?v=4?s=100" width="100px;" alt=""/><br /><sub><b>sleep_fish</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=zxlfly" title="Code">💻</a></td>
|
|
100
|
+
<td align="center"><a href="https://github.com/whylost"><img src="https://avatars.githubusercontent.com/u/62528887?v=4?s=100" width="100px;" alt=""/><br /><sub><b>迷心whylost</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=whylost" title="Code">💻</a></td>
|
|
101
|
+
<td align="center"><a href="https://juejin.im/user/5c15d35fe51d4545ae495e43"><img src="https://avatars.githubusercontent.com/u/31237954?v=4?s=100" width="100px;" alt=""/><br /><sub><b>X.Q. Chen</b></sub></a><br /><a href="#infra-brenner8023" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=brenner8023" title="Code">💻</a></td>
|
|
102
|
+
<td align="center"><a href="https://github.com/git-Where"><img src="https://avatars.githubusercontent.com/u/16344566?v=4?s=100" width="100px;" alt=""/><br /><sub><b>葉家男孩</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=git-Where" title="Code">💻</a></td>
|
|
103
|
+
<td align="center"><a href="https://github.com/CatsAndMice"><img src="https://avatars.githubusercontent.com/u/58327088?v=4?s=100" width="100px;" alt=""/><br /><sub><b>lihai</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=CatsAndMice" title="Code">💻</a></td>
|
|
104
|
+
<td align="center"><a href="http://www.naluduo.vip"><img src="https://avatars.githubusercontent.com/u/28448589?v=4?s=100" width="100px;" alt=""/><br /><sub><b>纳撸多</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=naluduo233" title="Code">💻</a></td>
|
|
105
|
+
</tr>
|
|
106
|
+
<tr>
|
|
107
|
+
<td align="center"><a href="https://github.com/ElsaOOo"><img src="https://avatars.githubusercontent.com/u/48074435?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ElsaOOo</b></sub></a><br /><a href="#maintenance-ElsaOOo" title="Maintenance">🚧</a> <a href="#infra-ElsaOOo" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=ElsaOOo" title="Code">💻</a></td>
|
|
108
|
+
<td align="center"><a href="https://github.com/liuxdi"><img src="https://avatars.githubusercontent.com/u/10958003?v=4?s=100" width="100px;" alt=""/><br /><sub><b>刘小迪</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=liuxdi" title="Code">💻</a></td>
|
|
109
|
+
<td align="center"><a href="https://github.com/unfound"><img src="https://avatars.githubusercontent.com/u/32935349?v=4?s=100" width="100px;" alt=""/><br /><sub><b>unfound</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=unfound" title="Code">💻</a></td>
|
|
110
|
+
<td align="center"><a href="https://github.com/Roading"><img src="https://avatars.githubusercontent.com/u/7751774?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Roading</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=Roading" title="Code">💻</a></td>
|
|
111
|
+
<td align="center"><a href="http://inreasons.cn"><img src="https://avatars.githubusercontent.com/u/47918504?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Chestnut</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=banlify" title="Code">💻</a></td>
|
|
112
|
+
<td align="center"><a href="https://github.com/c0dedance"><img src="https://avatars.githubusercontent.com/u/38075730?v=4?s=100" width="100px;" alt=""/><br /><sub><b>c0dedance</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=c0dedance" title="Code">💻</a></td>
|
|
113
|
+
<td align="center"><a href="https://github.com/duqingyu"><img src="https://avatars.githubusercontent.com/u/30541930?v=4?s=100" width="100px;" alt=""/><br /><sub><b>杜庆愉</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=duqingyu" title="Code">💻</a></td>
|
|
114
|
+
<td align="center"><a href="https://github.com/linxiang07"><img src="https://avatars.githubusercontent.com/u/40119767?v=4?s=100" width="100px;" alt=""/><br /><sub><b>linxiang</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=linxiang07" title="Code">💻</a></td>
|
|
115
|
+
<td align="center"><a href="https://github.com/nextniko"><img src="https://avatars.githubusercontent.com/u/40553790?v=4?s=100" width="100px;" alt=""/><br /><sub><b>掘墓忍者</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=nextniko" title="Code">💻</a></td>
|
|
116
|
+
<td align="center"><a href="https://github.com/zcj996"><img src="https://avatars.githubusercontent.com/u/52314078?v=4?s=100" width="100px;" alt=""/><br /><sub><b>一个大胖子</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=zcj996" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=zcj996" title="Documentation">📖</a></td>
|
|
117
|
+
</tr>
|
|
118
|
+
<tr>
|
|
119
|
+
<td align="center"><a href="https://bandism.net/"><img src="https://avatars.githubusercontent.com/u/22633385?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ikko Ashimine</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=eltociear" title="Documentation">📖</a></td>
|
|
120
|
+
<td align="center"><a href="https://xiaoborao.github.io/"><img src="https://avatars.githubusercontent.com/u/27467603?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bob</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=xiaoboRao" title="Code">💻</a></td>
|
|
121
|
+
<td align="center"><a href="https://github.com/NidusP"><img src="https://avatars.githubusercontent.com/u/30283065?v=4?s=100" width="100px;" alt=""/><br /><sub><b>populus</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=NidusP" title="Code">💻</a></td>
|
|
122
|
+
<td align="center"><a href="https://github.com/554246839"><img src="https://avatars.githubusercontent.com/u/24663941?v=4?s=100" width="100px;" alt=""/><br /><sub><b>tohalf</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=554246839" title="Code">💻</a></td>
|
|
123
|
+
<td align="center"><a href="https://github.com/Lonely-shang"><img src="https://avatars.githubusercontent.com/u/34124930?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Miliky</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=Lonely-shang" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=Lonely-shang" title="Tests">⚠️</a></td>
|
|
124
|
+
<td align="center"><a href="https://github.com/MICD0704"><img src="https://avatars.githubusercontent.com/u/20532893?v=4?s=100" width="100px;" alt=""/><br /><sub><b>MICD</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=MICD0704" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3AMICD0704" title="Bug reports">🐛</a></td>
|
|
125
|
+
<td align="center"><a href="https://github.com/ming-bin"><img src="https://avatars.githubusercontent.com/u/54826175?v=4?s=100" width="100px;" alt=""/><br /><sub><b>mingBin</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=ming-bin" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3Aming-bin" title="Bug reports">🐛</a></td>
|
|
126
|
+
<td align="center"><a href="https://github.com/icjs-cc"><img src="https://avatars.githubusercontent.com/u/27618209?v=4?s=100" width="100px;" alt=""/><br /><sub><b>陈剑术</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=icjs-cc" title="Code">💻</a></td>
|
|
127
|
+
<td align="center"><a href="https://www.merlin218.top/"><img src="https://avatars.githubusercontent.com/u/61051874?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Merlin218</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3AMerlin218" title="Bug reports">🐛</a></td>
|
|
128
|
+
<td align="center"><a href="https://github.com/jingyiliu"><img src="https://avatars.githubusercontent.com/u/6957175?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Johnny.Liu</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3Ajingyiliu" title="Bug reports">🐛</a></td>
|
|
129
|
+
</tr>
|
|
130
|
+
<tr>
|
|
131
|
+
<td align="center"><a href="https://github.com/Yangxfeng"><img src="https://avatars.githubusercontent.com/u/35209766?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yangxfeng</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3AYangxfeng" title="Bug reports">🐛</a></td>
|
|
132
|
+
<td align="center"><a href="https://github.com/jCodeLife"><img src="https://avatars.githubusercontent.com/u/50767049?v=4?s=100" width="100px;" alt=""/><br /><sub><b>jCodeLife</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3AjCodeLife" title="Bug reports">🐛</a></td>
|
|
133
|
+
<td align="center"><a href="https://github.com/XiaoRIGE"><img src="https://avatars.githubusercontent.com/u/33147011?v=4?s=100" width="100px;" alt=""/><br /><sub><b>宋小日</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/issues?q=author%3AXiaoRIGE" title="Bug reports">🐛</a></td>
|
|
134
|
+
<td align="center"><a href="https://github.com/daviForevel"><img src="https://avatars.githubusercontent.com/u/39021499?v=4?s=100" width="100px;" alt=""/><br /><sub><b>daviForevel</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=daviForevel" title="Code">💻</a></td>
|
|
135
|
+
<td align="center"><a href="https://github.com/lj1990111"><img src="https://avatars.githubusercontent.com/u/8649913?v=4?s=100" width="100px;" alt=""/><br /><sub><b>lj1990111</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=lj1990111" title="Code">💻</a></td>
|
|
136
|
+
<td align="center"><a href="https://github.com/newer2333"><img src="https://avatars.githubusercontent.com/u/32949033?v=4?s=100" width="100px;" alt=""/><br /><sub><b>newer2333</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=newer2333" title="Code">💻</a></td>
|
|
137
|
+
<td align="center"><a href="https://husky-bear.gitee.io/blob/"><img src="https://avatars.githubusercontent.com/u/50540342?v=4?s=100" width="100px;" alt=""/><br /><sub><b>哈士奇-黄</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=Husky-Yellow" title="Code">💻</a></td>
|
|
138
|
+
<td align="center"><a href="http://innei.ren"><img src="https://avatars.githubusercontent.com/u/41265413?v=4?s=100" width="100px;" alt=""/><br /><sub><b>寻</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=Innei" title="Code">💻</a></td>
|
|
139
|
+
<td align="center"><a href="https://github.com/aolyang"><img src="https://avatars.githubusercontent.com/u/72056179?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Anthonio OuYang</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=aolyang" title="Code">💻</a></td>
|
|
140
|
+
<td align="center"><a href="https://yyblog.top"><img src="https://avatars.githubusercontent.com/u/57666140?v=4?s=100" width="100px;" alt=""/><br /><sub><b>FlingYP</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=flingyp" title="Code">💻</a></td>
|
|
141
|
+
</tr>
|
|
142
|
+
<tr>
|
|
143
|
+
<td align="center"><a href="https://github.com/xzxldl55"><img src="https://avatars.githubusercontent.com/u/22699218?v=4?s=100" width="100px;" alt=""/><br /><sub><b>xzxldl55</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=xzxldl55" title="Code">💻</a></td>
|
|
144
|
+
<td align="center"><a href="https://github.com/79E"><img src="https://avatars.githubusercontent.com/u/71202421?v=4?s=100" width="100px;" alt=""/><br /><sub><b>79</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=79E" title="Code">💻</a></td>
|
|
145
|
+
<td align="center"><a href="https://github.com/SituC"><img src="https://avatars.githubusercontent.com/u/29355875?v=4?s=100" width="100px;" alt=""/><br /><sub><b>wailen</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=SituC" title="Code">💻</a></td>
|
|
146
|
+
<td align="center"><a href="https://github.com/JensonMiao"><img src="https://avatars.githubusercontent.com/u/46488783?v=4?s=100" width="100px;" alt=""/><br /><sub><b>jenson</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=JensonMiao" title="Code">💻</a></td>
|
|
147
|
+
</tr>
|
|
148
|
+
</table>
|
|
149
|
+
|
|
150
|
+
<!-- markdownlint-restore -->
|
|
151
|
+
<!-- prettier-ignore-end -->
|
|
152
|
+
|
|
153
|
+
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
|
154
|
+
|
|
155
|
+
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
|
|
156
|
+
|
|
157
|
+
## Partner project
|
|
158
|
+
|
|
159
|
+
- [H5-Dooring - 让H5制作,更简单](http://h5.dooring.cn/)
|
|
160
|
+
|
|
161
|
+
## License
|
|
162
|
+
|
|
163
|
+
[MIT](https://github.com/DevCloudFE/vue-devui/blob/dev/LICENSE)
|
package/alert/index.es.js
CHANGED
|
@@ -16,13 +16,37 @@ const AlertCloseIcon = () => createVNode("svg", {
|
|
|
16
16
|
}, [createVNode("path", {
|
|
17
17
|
"d": "M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z"
|
|
18
18
|
}, null)])])]);
|
|
19
|
+
function createBem(namespace, element, modifier) {
|
|
20
|
+
let cls = namespace;
|
|
21
|
+
if (element) {
|
|
22
|
+
cls += `__${element}`;
|
|
23
|
+
}
|
|
24
|
+
if (modifier) {
|
|
25
|
+
cls += `--${modifier}`;
|
|
26
|
+
}
|
|
27
|
+
return cls;
|
|
28
|
+
}
|
|
29
|
+
function useNamespace(block, needDot = false) {
|
|
30
|
+
const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
|
|
31
|
+
const b = () => createBem(namespace);
|
|
32
|
+
const e = (element) => element ? createBem(namespace, element) : "";
|
|
33
|
+
const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
|
|
34
|
+
const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
|
|
35
|
+
return {
|
|
36
|
+
b,
|
|
37
|
+
e,
|
|
38
|
+
m,
|
|
39
|
+
em
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
const ns = useNamespace("alert");
|
|
19
43
|
const AlertTypeIcon = (props) => createVNode("svg", {
|
|
20
44
|
"width": "16px",
|
|
21
45
|
"height": "16px",
|
|
22
46
|
"viewBox": "0 0 16 16",
|
|
23
47
|
"version": "1.1",
|
|
24
48
|
"xmlns": "http://www.w3.org/2000/svg",
|
|
25
|
-
"class":
|
|
49
|
+
"class": [ns.e("icon"), props.type === "danger" ? ns.em("icon", "error") : ns.em("icon", props.type)]
|
|
26
50
|
}, [(() => {
|
|
27
51
|
switch (props.type) {
|
|
28
52
|
case "success":
|
|
@@ -46,10 +70,10 @@ const AlertTypeIcon = (props) => createVNode("svg", {
|
|
|
46
70
|
"fill": "none",
|
|
47
71
|
"fill-rule": "evenodd"
|
|
48
72
|
}, [createVNode("path", {
|
|
49
|
-
"class": "
|
|
73
|
+
"class": "warning-outer",
|
|
50
74
|
"d": "M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"
|
|
51
75
|
}, null), createVNode("path", {
|
|
52
|
-
"class": "
|
|
76
|
+
"class": "warning-inner",
|
|
53
77
|
"stroke-width": "0.3",
|
|
54
78
|
"fill-rule": "nonzero",
|
|
55
79
|
"d": "M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105 L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z"
|
|
@@ -63,10 +87,10 @@ const AlertTypeIcon = (props) => createVNode("svg", {
|
|
|
63
87
|
}, [createVNode("g", {
|
|
64
88
|
"fill-rule": "nonzero"
|
|
65
89
|
}, [createVNode("path", {
|
|
66
|
-
"class": "
|
|
90
|
+
"class": "info-outer",
|
|
67
91
|
"d": "M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z"
|
|
68
92
|
}, null), createVNode("path", {
|
|
69
|
-
"class": "
|
|
93
|
+
"class": "info-inner",
|
|
70
94
|
"d": "M9.19008504,7 L8.79402696,13 L7.15622605,13 L6.73158434,7 L9.19008504,7 Z M9,3 L9,5 L7,5 L7,3 L9,3 Z",
|
|
71
95
|
"stroke-width": "0.2"
|
|
72
96
|
}, null)])]);
|
|
@@ -79,10 +103,10 @@ const AlertTypeIcon = (props) => createVNode("svg", {
|
|
|
79
103
|
}, [createVNode("g", {
|
|
80
104
|
"fill-rule": "nonzero"
|
|
81
105
|
}, [createVNode("path", {
|
|
82
|
-
"class": "
|
|
106
|
+
"class": "error-outer",
|
|
83
107
|
"d": "M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z"
|
|
84
108
|
}, null), createVNode("path", {
|
|
85
|
-
"class": "
|
|
109
|
+
"class": "error-inner",
|
|
86
110
|
"d": "M9,10.6 L9,12.6 L7,12.6 L7,10.6 L9,10.6 Z M9.1,3.1 L8.65924344,9.1 L7.28422786,9.1 L6.9,3.1 L9.1,3.1 Z",
|
|
87
111
|
"stroke-width": "0.2"
|
|
88
112
|
}, null)])]);
|
|
@@ -110,6 +134,10 @@ const alertProps = {
|
|
|
110
134
|
dismissTime: {
|
|
111
135
|
type: Number,
|
|
112
136
|
default: 0
|
|
137
|
+
},
|
|
138
|
+
center: {
|
|
139
|
+
type: Boolean,
|
|
140
|
+
default: false
|
|
113
141
|
}
|
|
114
142
|
};
|
|
115
143
|
var alert = "";
|
|
@@ -118,6 +146,7 @@ var Alert = defineComponent({
|
|
|
118
146
|
props: alertProps,
|
|
119
147
|
emits: ["close"],
|
|
120
148
|
setup(props, ctx) {
|
|
149
|
+
const ns2 = useNamespace("alert");
|
|
121
150
|
const hide = ref(false);
|
|
122
151
|
const closing = ref(false);
|
|
123
152
|
const alertEl = ref();
|
|
@@ -141,22 +170,24 @@ var Alert = defineComponent({
|
|
|
141
170
|
});
|
|
142
171
|
return () => {
|
|
143
172
|
return !hide.value ? createVNode(Transition, {
|
|
144
|
-
"name":
|
|
173
|
+
"name": ns2.b(),
|
|
145
174
|
"onAfterLeave": afterLeave
|
|
146
175
|
}, {
|
|
147
176
|
default: () => {
|
|
148
177
|
var _a, _b;
|
|
149
178
|
return [withDirectives(createVNode("div", {
|
|
150
179
|
"ref": alertEl,
|
|
151
|
-
"class":
|
|
152
|
-
}, [props.
|
|
153
|
-
"class": "
|
|
154
|
-
"onClick": close
|
|
155
|
-
}, [createVNode(AlertCloseIcon, null, null)]) : null, props.showIcon !== false && props.type !== "simple" ? createVNode("span", {
|
|
156
|
-
"class": "devui-alert-icon"
|
|
180
|
+
"class": [ns2.b(), ns2.m(props.type), props.cssClass, closing.value && ns2.m("close"), props.center && ns2.m("center")]
|
|
181
|
+
}, [props.showIcon !== false && props.type !== "simple" ? createVNode("span", {
|
|
182
|
+
"class": ns2.e("icon-wrap")
|
|
157
183
|
}, [createVNode(AlertTypeIcon, {
|
|
158
184
|
"type": props.type
|
|
159
|
-
}, null)]) : null, (
|
|
185
|
+
}, null)]) : null, createVNode("div", {
|
|
186
|
+
"class": ns2.e("content")
|
|
187
|
+
}, [createVNode("span", null, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), props.closeable ? createVNode("div", {
|
|
188
|
+
"class": ns2.e("close-icon"),
|
|
189
|
+
"onClick": close
|
|
190
|
+
}, [createVNode(AlertCloseIcon, null, null)]) : null])]), [[vShow, !closing.value]])];
|
|
160
191
|
}
|
|
161
192
|
}) : null;
|
|
162
193
|
};
|
package/alert/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(o,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis!="undefined"?globalThis:o||self,e(o.index={},o.Vue))})(this,function(o,e){"use strict";const N=()=>e.createVNode("svg",{width:"10px",height:"10px",viewBox:"0 0 10 10",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{transform:"translate(-3.000000, -3.000000)","fill-rule":"nonzero"},[e.createVNode("path",{d:"M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z"},null)])])]);function c(t,r,n){let s=t;return r&&(s+=`__${r}`),n&&(s+=`--${n}`),s}function h(t,r=!1){const n=r?`.devui-${t}`:`devui-${t}`;return{b:()=>c(n),e:l=>l?c(n,l):"",m:l=>l?c(n,"",l):"",em:(l,d)=>l&&d?c(n,l,d):""}}const u=h("alert"),p=t=>e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg",class:[u.e("icon"),t.type==="danger"?u.em("icon","error"):u.em("icon",t.type)]},[(()=>{switch(t.type){case"success":return e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{"fill-rule":"nonzero",d:"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z"},null),e.createVNode("polygon",{"stroke-width":"0.3","fill-rule":"nonzero",points:"6.82767602 11.5282799 3 7.24668779 3.89864233 6.37912367 6.82767602 9.04910002 12.2964408 4 13 4.64144383"},null)]);case"warning":return e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{class:"warning-outer",d:"M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"},null),e.createVNode("path",{class:"warning-inner","stroke-width":"0.3","fill-rule":"nonzero",d:"M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105 L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z"},null)]);case"info":return e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{"fill-rule":"nonzero"},[e.createVNode("path",{class:"info-outer",d:"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z"},null),e.createVNode("path",{class:"info-inner",d:"M9.19008504,7 L8.79402696,13 L7.15622605,13 L6.73158434,7 L9.19008504,7 Z M9,3 L9,5 L7,5 L7,3 L9,3 Z","stroke-width":"0.2"},null)])]);case"danger":return e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{"fill-rule":"nonzero"},[e.createVNode("path",{class:"error-outer",d:"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z"},null),e.createVNode("path",{class:"error-inner",d:"M9,10.6 L9,12.6 L7,12.6 L7,10.6 L9,10.6 Z M9.1,3.1 L8.65924344,9.1 L7.28422786,9.1 L6.9,3.1 L9.1,3.1 Z","stroke-width":"0.2"},null)])]);default:return null}})()]),w={type:{type:String,default:"info"},cssClass:{type:String,default:""},closeable:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!0},dismissTime:{type:Number,default:0},center:{type:Boolean,default:!1}};var g="",L=e.defineComponent({name:"DAlert",props:w,emits:["close"],setup(t,r){const n=h("alert"),s=e.ref(!1),a=e.ref(!1),C=e.ref();let i;const l=f=>{i&&clearTimeout(i),a.value=!0,r.emit("close",f)},d=()=>{i=void 0,s.value=!0,a.value=!1};return e.onMounted(()=>{t.dismissTime&&(i=window.setTimeout(()=>{l()},t.dismissTime))}),()=>s.value?null:e.createVNode(e.Transition,{name:n.b(),onAfterLeave:d},{default:()=>{var f,m;return[e.withDirectives(e.createVNode("div",{ref:C,class:[n.b(),n.m(t.type),t.cssClass,a.value&&n.m("close"),t.center&&n.m("center")]},[t.showIcon!==!1&&t.type!=="simple"?e.createVNode("span",{class:n.e("icon-wrap")},[e.createVNode(p,{type:t.type},null)]):null,e.createVNode("div",{class:n.e("content")},[e.createVNode("span",null,[(m=(f=r.slots).default)==null?void 0:m.call(f)]),t.closeable?e.createVNode("div",{class:n.e("close-icon"),onClick:l},[e.createVNode(N,null,null)]):null])]),[[e.vShow,!a.value]])]}})}}),V={title:"Alert \u8B66\u544A",category:"\u53CD\u9988",status:"100%",install(t){t.component(L.name,L)}};o.Alert=L,o.alertProps=w,o.default=V,Object.defineProperty(o,"__esModule",{value:!0}),o[Symbol.toStringTag]="Module"});
|
package/alert/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.devui-alert{color:var(--devui-text, #252b3a);font-size:var(--devui-font-size,
|
|
1
|
+
.devui-alert{color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 14px);border:1px solid transparent;padding:8px 16px;line-height:24px;border-radius:var(--devui-border-radius, 4px);display:flex;align-items:center;position:relative;width:100%;overflow:hidden}.devui-alert.devui-alert--center{justify-content:center}.devui-alert .devui-alert__content{display:flex;padding:0 16px 0 4px;word-break:normal;word-wrap:break-word}.devui-alert .devui-alert__close-icon{color:var(--devui-text, #252b3a);opacity:1;line-height:26px;height:24px;position:absolute;right:16px;top:8px}.devui-alert .devui-alert__close-icon>svg path{fill:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__close-icon span{color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 14px);font-weight:700}.devui-alert.devui-alert--success{background-color:var(--devui-success-bg, #edfff9);border-color:var(--devui-success-line, #50d4ab);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--success .devui-alert__close-icon>svg path{fill:var(--devui-success-line, #50d4ab)}.devui-alert.devui-alert--info{background-color:var(--devui-info-bg, #f2f5fc);border-color:var(--devui-info-line, #5e7ce0);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--info .devui-alert__close-icon>svg path{fill:var(--devui-info-line, #5e7ce0)}.devui-alert.devui-alert--warning{background-color:var(--devui-warning-bg, #fff3e8);border-color:var(--devui-warning-line, #fa9841);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--warning .devui-alert__close-icon>svg path{fill:var(--devui-warning-line, #fa9841)}.devui-alert.devui-alert--danger{background-color:var(--devui-danger-bg, #ffeeed);border-color:var(--devui-danger-line, #f66f6a);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--danger .devui-alert__close-icon>svg path{fill:var(--devui-danger-line, #f66f6a)}.devui-alert.devui-alert--simple{border-color:var(--devui-line, #d7d8da);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--simple .devui-alert__close-icon>svg path{fill:var(--devui-text-weak, #575d6c)}.devui-alert svg.devui-alert__icon{width:16px;height:16px;vertical-align:middle;transform:translateY(-1px)}.devui-alert .devui-alert__icon.devui-alert__icon--success>g path{fill:var(--devui-success-line, #50d4ab)}.devui-alert .devui-alert__icon.devui-alert__icon--success>g polygon{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__icon.devui-alert__icon--warning>g path.warning-outer{fill:var(--devui-warning-line, #fa9841)}.devui-alert .devui-alert__icon.devui-alert__icon--warning>g path.warning-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__icon.devui-alert__icon--info>g path.info-outer{fill:var(--devui-info-line, #5e7ce0)}.devui-alert .devui-alert__icon.devui-alert__icon--info>g path.info-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__icon.devui-alert__icon--error>g path.error-outer{fill:var(--devui-danger-line, #f66f6a)}.devui-alert .devui-alert__icon.devui-alert__icon--error>g path.error-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert__icon-wrap{margin-right:4px}.devui-alter--close{margin:0;padding-top:0;padding-bottom:0;transform-origin:50% 0;transition:all .3s ease-in-out}.devui-alert-leave-active{animation:alertUpOut .3s ease-in-out;animation-fill-mode:both}@keyframes alertUpOut{0%{transform:scaleY(1);transform-origin:0% 0%;opacity:1}to{transform:scaleY(0);transform-origin:0% 0%;opacity:0}}
|