├── .env ├── src ├── views │ ├── card │ │ └── index.ts │ ├── grid │ │ └── index.ts │ ├── home │ │ └── index.ts │ ├── list │ │ └── index.ts │ ├── rate │ │ └── index.ts │ ├── tag │ │ └── index.ts │ ├── alert │ │ └── index.ts │ ├── avatar │ │ ├── index.ts │ │ └── Index.vue │ ├── backTop │ │ └── index.ts │ ├── badge │ │ └── index.ts │ ├── button │ │ └── index.ts │ ├── calendar │ │ └── index.ts │ ├── carousel │ │ └── index.ts │ ├── checkbox │ │ └── index.ts │ ├── dialog │ │ └── index.ts │ ├── divider │ │ ├── index.ts │ │ └── Index.vue │ ├── drawer │ │ ├── index.ts │ │ └── Index.vue │ ├── empty │ │ ├── index.ts │ │ └── Index.vue │ ├── flex │ │ ├── index.ts │ │ └── Index.vue │ ├── image │ │ ├── index.ts │ │ └── Index.vue │ ├── input │ │ └── index.ts │ ├── layout │ │ ├── index.ts │ │ └── Index.vue │ ├── message │ │ └── index.ts │ ├── modal │ │ └── index.ts │ ├── popover │ │ ├── index.ts │ │ └── Index.vue │ ├── progress │ │ └── index.ts │ ├── qrcode │ │ └── index.ts │ ├── radio │ │ └── index.ts │ ├── result │ │ ├── index.ts │ │ └── Index.vue │ ├── select │ │ └── index.ts │ ├── skeleton │ │ ├── index.ts │ │ └── Index.vue │ ├── slider │ │ └── index.ts │ ├── space │ │ ├── index.ts │ │ └── Index.vue │ ├── spin │ │ └── index.ts │ ├── steps │ │ └── index.ts │ ├── swiper │ │ └── index.ts │ ├── switch │ │ └── index.ts │ ├── table │ │ └── index.ts │ ├── tabs │ │ └── index.ts │ ├── textarea │ │ ├── index.ts │ │ └── Index.vue │ ├── timeline │ │ ├── index.ts │ │ └── Index.vue │ ├── tooltip │ │ └── index.ts │ ├── upload │ │ ├── index.ts │ │ ├── worker.ts │ │ └── sliceFile.ts │ ├── video │ │ ├── index.ts │ │ └── Index.vue │ ├── watermark │ │ └── index.ts │ ├── breadcrumb │ │ ├── index.ts │ │ └── Index.vue │ ├── cascader │ │ └── index.ts │ ├── collapse │ │ └── index.ts │ ├── colorPicker │ │ └── index.ts │ ├── countdown │ │ ├── index.ts │ │ └── Index.vue │ ├── datePicker │ │ └── index.ts │ ├── descriptions │ │ └── index.ts │ ├── ellipsis │ │ ├── index.ts │ │ └── Index.vue │ ├── exception │ │ ├── index.ts │ │ └── Index.vue │ ├── floatButton │ │ └── index.ts │ ├── gradientText │ │ ├── index.ts │ │ └── Index.vue │ ├── highlight │ │ ├── index.ts │ │ └── Index.vue │ ├── inputNumber │ │ ├── index.ts │ │ └── Index.vue │ ├── inputSearch │ │ └── index.ts │ ├── loadingBar │ │ ├── index.ts │ │ └── Index.vue │ ├── notification │ │ └── index.ts │ ├── pagination │ │ ├── index.ts │ │ └── Index.vue │ ├── popconfirm │ │ └── index.ts │ ├── scrollbar │ │ └── index.ts │ ├── segmented │ │ └── index.ts │ ├── statistic │ │ ├── index.ts │ │ └── Index.vue │ ├── textScroll │ │ └── index.ts │ ├── timepicker │ │ ├── index.ts │ │ └── Index.vue │ ├── waterfall │ │ ├── index.ts │ │ └── Index.vue │ ├── configProvider │ │ └── index.ts │ └── numberAnimation │ │ ├── index.ts │ │ └── Index.vue ├── main.ts ├── App.vue └── assets │ └── less │ └── global.less ├── .husky ├── pre-commit └── commit-msg ├── .vscode ├── settings.json └── extensions.json ├── docs ├── .vitepress │ ├── cache │ │ └── deps │ │ │ ├── package.json │ │ │ ├── vue.js.map │ │ │ ├── date-fns.js.map │ │ │ ├── @vueuse_core.js.map │ │ │ ├── chunk-JVWSFFO4.js.map │ │ │ └── chunk-JVWSFFO4.js │ ├── theme │ │ ├── env.d.ts │ │ ├── components │ │ │ ├── VersionDateTag.vue │ │ │ ├── MailSVG.vue │ │ │ ├── ArrowDownSVG.vue │ │ │ └── GlobalElement.vue │ │ └── index.ts │ ├── dist │ │ ├── _headers │ │ └── amazing-logo.svg │ └── utils │ │ └── fetchVersion.ts ├── public │ ├── alipay.jpg │ ├── avatar.png │ ├── avatar_2.jpg │ ├── avatar_3.png │ ├── avatar_4.png │ ├── avatar_5.png │ ├── wechat.jpg │ ├── avatar_1.jpeg │ ├── _headers │ └── amazing-logo.svg ├── guide │ ├── template.md │ ├── customize.md │ ├── ondemand.md │ ├── started.md │ ├── features.md │ └── components │ │ └── highlight.md ├── utils │ ├── functions │ │ ├── fps.md │ │ ├── add.md │ │ ├── debounce.md │ │ ├── throttle.md │ │ ├── download-file.md │ │ ├── media-query.md │ │ ├── format-number.md │ │ ├── event-listener.md │ │ ├── slots-exist.md │ │ ├── injection.md │ │ └── options-supported.md │ └── started.md └── index.md ├── public └── favicon.ico ├── components ├── card │ └── index.ts ├── flex │ ├── index.ts │ └── Flex.vue ├── rate │ └── index.ts ├── spin │ └── index.ts ├── tag │ └── index.ts ├── alert │ └── index.ts ├── empty │ └── index.ts ├── input │ └── index.ts ├── space │ ├── index.ts │ └── Space.vue ├── tabs │ └── index.ts ├── video │ └── index.ts ├── button │ └── index.ts ├── dialog │ └── index.ts ├── drawer │ └── index.ts ├── qrcode │ └── index.ts ├── result │ └── index.ts ├── slider │ └── index.ts ├── steps │ └── index.ts ├── switch │ └── index.ts ├── backtop │ └── index.ts ├── divider │ └── index.ts ├── grid │ ├── col │ │ └── index.ts │ ├── index.ts │ └── row │ │ ├── index.ts │ │ └── Row.vue ├── image │ └── index.ts ├── modal │ └── index.ts ├── popover │ ├── index.ts │ └── Popover.vue ├── radio │ └── index.ts ├── tooltip │ └── index.ts ├── ellipsis │ └── index.ts ├── list │ ├── list │ │ └── index.ts │ ├── index.ts │ └── listitem │ │ └── index.ts ├── select │ └── index.ts ├── swiper │ └── index.ts ├── textarea │ └── index.ts ├── avatar │ └── index.ts ├── badge │ └── index.ts ├── collapse │ └── index.ts ├── countdown │ └── index.ts ├── highlight │ ├── index.ts │ └── Highlight.vue ├── message │ └── index.ts ├── scrollbar │ └── index.ts ├── statistic │ ├── index.ts │ └── Statistic.vue ├── timeline │ └── index.ts ├── carousel │ └── index.ts ├── cascader │ └── index.ts ├── checkbox │ └── index.ts ├── datepicker │ └── index.ts ├── loadingbar │ └── index.ts ├── pagination │ └── index.ts ├── popconfirm │ └── index.ts ├── progress │ └── index.ts ├── watermark │ └── index.ts ├── floatbutton │ └── index.ts ├── inputnumber │ └── index.ts ├── inputsearch │ └── index.ts ├── segmented │ └── index.ts ├── textscroll │ └── index.ts ├── upload │ └── index.ts ├── waterfall │ └── index.ts ├── table │ └── index.ts ├── breadcrumb │ └── index.ts ├── gradienttext │ ├── index.ts │ └── GradientText.vue ├── notification │ └── index.ts ├── configprovider │ └── index.ts ├── calendar │ └── index.ts ├── colorpicker │ └── index.ts ├── numberanimation │ ├── index.ts │ └── NumberAnimation.vue ├── descriptions │ ├── descriptions │ │ └── index.ts │ ├── descriptionsitem │ │ ├── index.ts │ │ └── DescriptionsItem.vue │ └── index.ts ├── utils │ └── type.ts ├── skeleton │ └── index.ts ├── style │ └── global.less └── index.ts ├── tsconfig.json ├── scripts ├── push.sh ├── publish.sh └── deploy.sh ├── .prettierrc.json ├── types └── env.d.ts ├── index.html ├── .npmignore ├── components.d.ts ├── .gitignore ├── tsconfig.dts.json ├── tsconfig.node.json ├── commitlint.config.js ├── tsconfig.app.json └── eslint.config.js /.env: -------------------------------------------------------------------------------- 1 | # spa-title 2 | VITE_GLOB_APP_TITLE = Vue Amazing UI 3 | -------------------------------------------------------------------------------- /src/views/card/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '卡片' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/grid/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '栅格' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/home/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '首页' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/list/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '列表' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/rate/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '评分' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/tag/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '标签' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/alert/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '警告提示' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/avatar/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '头像' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/backTop/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '回到顶部' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/badge/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '徽标' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/button/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '按钮' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/calendar/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '日历' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/carousel/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '轮播图' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '复选框' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/dialog/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '对话框' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/divider/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '分割线' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/drawer/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '抽屉' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/empty/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '空状态' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/flex/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '弹性布局' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/image/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '图片' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/input/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '输入框' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/layout/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '布局' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/message/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '全局提示' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/modal/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '模态框' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/popover/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '气泡卡片' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/progress/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '进度条' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/qrcode/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '二维码' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/radio/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '单选框' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/result/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '结果' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/select/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '选择器' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/skeleton/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '骨架屏' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/slider/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '滑动输入条' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/space/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '间距' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/spin/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '加载中' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/steps/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '步骤条' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/swiper/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '触摸滑动' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/switch/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '开关' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/table/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '表格' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/tabs/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '标签页' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/textarea/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '文本域' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/timeline/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '时间轴' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '文字提示' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/upload/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '上传' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/video/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '播放器' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/watermark/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '水印' 3 | } 4 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | # 在 git commit 命令执行前，但在用户输入提交信息后触发 2 | npx lint-staged 3 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.cursorBlinking": "expand" // 光标闪烁 3 | } -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "module" 3 | } 4 | -------------------------------------------------------------------------------- /src/views/breadcrumb/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '面包屑' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/cascader/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '级联选择' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/collapse/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '折叠面板' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/colorPicker/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '颜色选择器' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/countdown/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '倒计时' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/datePicker/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '日期选择' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/descriptions/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '描述列表' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/ellipsis/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '文本省略' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/exception/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '未找到' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/floatButton/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '浮动按钮' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/gradientText/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '渐变文字' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/highlight/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '高亮文本' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/inputNumber/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '数字输入框' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/inputSearch/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '搜索框' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/loadingBar/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '加载条' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/notification/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '通知提醒' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/pagination/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '分页' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/popconfirm/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '弹出确认' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/scrollbar/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '滚动条' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/segmented/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '分段控制器' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/statistic/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '统计数值' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/textScroll/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '文字滚动' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/timepicker/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '时间选择器' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/waterfall/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '瀑布流' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/configProvider/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '全局化配置' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/numberAnimation/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '数值动画' 3 | } 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /docs/public/alipay.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/HEAD/docs/public/alipay.jpg -------------------------------------------------------------------------------- /docs/public/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/HEAD/docs/public/avatar.png -------------------------------------------------------------------------------- /docs/public/avatar_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/HEAD/docs/public/avatar_2.jpg -------------------------------------------------------------------------------- /docs/public/avatar_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/HEAD/docs/public/avatar_3.png -------------------------------------------------------------------------------- /docs/public/avatar_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/HEAD/docs/public/avatar_4.png -------------------------------------------------------------------------------- /docs/public/avatar_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/HEAD/docs/public/avatar_5.png -------------------------------------------------------------------------------- /docs/public/wechat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/HEAD/docs/public/wechat.jpg -------------------------------------------------------------------------------- /docs/public/avatar_1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/HEAD/docs/public/avatar_1.jpeg -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | # 在用户输入提交信息后触发，用于校验提交信息的格式，并显式指定配置路径 2 | npx --no-install commitlint --config commitlint.config.js --edit "$1" 3 | -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/vue.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/date-fns.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/@vueuse_core.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/chunk-JVWSFFO4.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /components/card/index.ts: -------------------------------------------------------------------------------- 1 | import Card from './Card.vue' 2 | export type { Props } from './Card.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Card) 6 | -------------------------------------------------------------------------------- /components/flex/index.ts: -------------------------------------------------------------------------------- 1 | import Flex from './Flex.vue' 2 | export type { Props } from './Flex.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Flex) 6 | -------------------------------------------------------------------------------- /components/rate/index.ts: -------------------------------------------------------------------------------- 1 | import Rate from './Rate.vue' 2 | export type { Props } from './Rate.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Rate) 6 | -------------------------------------------------------------------------------- /components/spin/index.ts: -------------------------------------------------------------------------------- 1 | import Spin from './Spin.vue' 2 | export type { Props } from './Spin.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Spin) 6 | -------------------------------------------------------------------------------- /components/tag/index.ts: -------------------------------------------------------------------------------- 1 | import Tag from './Tag.vue' 2 | export type { Props, Item } from './Tag.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Tag) 6 | -------------------------------------------------------------------------------- /components/alert/index.ts: -------------------------------------------------------------------------------- 1 | import Alert from './Alert.vue' 2 | export type { Props } from './Alert.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Alert) 6 | -------------------------------------------------------------------------------- /components/empty/index.ts: -------------------------------------------------------------------------------- 1 | import Empty from './Empty.vue' 2 | export type { Props } from './Empty.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Empty) 6 | -------------------------------------------------------------------------------- /components/input/index.ts: -------------------------------------------------------------------------------- 1 | import Input from './Input.vue' 2 | export type { Props } from './Input.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Input) 6 | -------------------------------------------------------------------------------- /components/space/index.ts: -------------------------------------------------------------------------------- 1 | import Space from './Space.vue' 2 | export type { Props } from './Space.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Space) 6 | -------------------------------------------------------------------------------- /components/tabs/index.ts: -------------------------------------------------------------------------------- 1 | import Tabs from './Tabs.vue' 2 | export type { Props, Item } from './Tabs.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Tabs) 6 | -------------------------------------------------------------------------------- /components/video/index.ts: -------------------------------------------------------------------------------- 1 | import Video from './Video.vue' 2 | export type { Props } from './Video.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Video) 6 | -------------------------------------------------------------------------------- /components/button/index.ts: -------------------------------------------------------------------------------- 1 | import Button from './Button.vue' 2 | export type { Props } from './Button.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Button) 6 | -------------------------------------------------------------------------------- /components/dialog/index.ts: -------------------------------------------------------------------------------- 1 | import Dialog from './Dialog.vue' 2 | export type { Props } from './Dialog.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Dialog) 6 | -------------------------------------------------------------------------------- /components/drawer/index.ts: -------------------------------------------------------------------------------- 1 | import Drawer from './Drawer.vue' 2 | export type { Props } from './Drawer.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Drawer) 6 | -------------------------------------------------------------------------------- /components/qrcode/index.ts: -------------------------------------------------------------------------------- 1 | import QRCode from './QRCode.vue' 2 | export type { Props } from './QRCode.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(QRCode) 6 | -------------------------------------------------------------------------------- /components/result/index.ts: -------------------------------------------------------------------------------- 1 | import Result from './Result.vue' 2 | export type { Props } from './Result.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Result) 6 | -------------------------------------------------------------------------------- /components/slider/index.ts: -------------------------------------------------------------------------------- 1 | import Slider from './Slider.vue' 2 | export type { Props } from './Slider.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Slider) 6 | -------------------------------------------------------------------------------- /components/steps/index.ts: -------------------------------------------------------------------------------- 1 | import Steps from './Steps.vue' 2 | export type { Props, Item } from './Steps.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Steps) 6 | -------------------------------------------------------------------------------- /components/switch/index.ts: -------------------------------------------------------------------------------- 1 | import Switch from './Switch.vue' 2 | export type { Props } from './Switch.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Switch) 6 | -------------------------------------------------------------------------------- /components/backtop/index.ts: -------------------------------------------------------------------------------- 1 | import BackTop from './BackTop.vue' 2 | export type { Props } from './BackTop.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(BackTop) 6 | -------------------------------------------------------------------------------- /components/divider/index.ts: -------------------------------------------------------------------------------- 1 | import Divider from './Divider.vue' 2 | export type { Props } from './Divider.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Divider) 6 | -------------------------------------------------------------------------------- /components/grid/col/index.ts: -------------------------------------------------------------------------------- 1 | import Col from './Col.vue' 2 | export type { Props as ColProps } from './Col.vue' 3 | import { withInstall } from '../../utils/type' 4 | 5 | export default withInstall(Col) 6 | -------------------------------------------------------------------------------- /components/image/index.ts: -------------------------------------------------------------------------------- 1 | import Image from './Image.vue' 2 | export type { Props, Image } from './Image.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Image) 6 | -------------------------------------------------------------------------------- /components/modal/index.ts: -------------------------------------------------------------------------------- 1 | import Modal from './Modal.vue' 2 | export type { Props, Modal } from './Modal.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Modal) 6 | -------------------------------------------------------------------------------- /components/popover/index.ts: -------------------------------------------------------------------------------- 1 | import Popover from './Popover.vue' 2 | export type { Props } from './Popover.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Popover) 6 | -------------------------------------------------------------------------------- /components/radio/index.ts: -------------------------------------------------------------------------------- 1 | import Radio from './Radio.vue' 2 | export type { Props, Option } from './Radio.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Radio) 6 | -------------------------------------------------------------------------------- /components/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | import Tooltip from './Tooltip.vue' 2 | export type { Props } from './Tooltip.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Tooltip) 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { 5 | "path": "./tsconfig.node.json" 6 | }, 7 | { 8 | "path": "./tsconfig.app.json" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /components/ellipsis/index.ts: -------------------------------------------------------------------------------- 1 | import Ellipsis from './Ellipsis.vue' 2 | export type { Props } from './Ellipsis.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Ellipsis) 6 | -------------------------------------------------------------------------------- /components/grid/index.ts: -------------------------------------------------------------------------------- 1 | import Row from './row' 2 | import Col from './col' 3 | 4 | export type { RowProps, Responsive } from './row' 5 | export type { ColProps } from './col' 6 | 7 | export { Row, Col } 8 | -------------------------------------------------------------------------------- /components/list/list/index.ts: -------------------------------------------------------------------------------- 1 | import List from './List.vue' 2 | export type { Props as ListProps } from './List.vue' 3 | import { withInstall } from '../../utils/type' 4 | 5 | export default withInstall(List) 6 | -------------------------------------------------------------------------------- /components/select/index.ts: -------------------------------------------------------------------------------- 1 | import Select from './Select.vue' 2 | export type { Props, Option } from './Select.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Select) 6 | -------------------------------------------------------------------------------- /components/swiper/index.ts: -------------------------------------------------------------------------------- 1 | import Swiper from './Swiper.vue' 2 | export type { Props, Image } from './Swiper.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Swiper) 6 | -------------------------------------------------------------------------------- /components/textarea/index.ts: -------------------------------------------------------------------------------- 1 | import Textarea from './Textarea.vue' 2 | export type { Props } from './Textarea.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Textarea) 6 | -------------------------------------------------------------------------------- /components/avatar/index.ts: -------------------------------------------------------------------------------- 1 | import Avatar from './Avatar.vue' 2 | export type { Props, Responsive } from './Avatar.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Avatar) 6 | -------------------------------------------------------------------------------- /components/badge/index.ts: -------------------------------------------------------------------------------- 1 | import Badge from './Badge.vue' 2 | export type { Props, PresetColor, Status } from './Badge.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Badge) 6 | -------------------------------------------------------------------------------- /components/collapse/index.ts: -------------------------------------------------------------------------------- 1 | import Collapse from './Collapse.vue' 2 | export type { Props, Item } from './Collapse.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Collapse) 6 | -------------------------------------------------------------------------------- /components/countdown/index.ts: -------------------------------------------------------------------------------- 1 | import Countdown from './Countdown.vue' 2 | export type { Props } from './Countdown.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Countdown) 6 | -------------------------------------------------------------------------------- /components/highlight/index.ts: -------------------------------------------------------------------------------- 1 | import Highlight from './Highlight.vue' 2 | export type { Props } from './Highlight.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Highlight) 6 | -------------------------------------------------------------------------------- /components/message/index.ts: -------------------------------------------------------------------------------- 1 | import Message from './Message.vue' 2 | export type { Props, Message } from './Message.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Message) 6 | -------------------------------------------------------------------------------- /components/scrollbar/index.ts: -------------------------------------------------------------------------------- 1 | import Scrollbar from './Scrollbar.vue' 2 | export type { Props } from './Scrollbar.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Scrollbar) 6 | -------------------------------------------------------------------------------- /components/statistic/index.ts: -------------------------------------------------------------------------------- 1 | import Statistic from './Statistic.vue' 2 | export type { Props } from './Statistic.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Statistic) 6 | -------------------------------------------------------------------------------- /components/timeline/index.ts: -------------------------------------------------------------------------------- 1 | import Timeline from './Timeline.vue' 2 | export type { Props, Item } from './Timeline.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Timeline) 6 | -------------------------------------------------------------------------------- /components/carousel/index.ts: -------------------------------------------------------------------------------- 1 | import Carousel from './Carousel.vue' 2 | export type { Props, Image } from './Carousel.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Carousel) 6 | -------------------------------------------------------------------------------- /components/cascader/index.ts: -------------------------------------------------------------------------------- 1 | import Cascader from './Cascader.vue' 2 | export type { Props, Option } from './Cascader.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Cascader) 6 | -------------------------------------------------------------------------------- /components/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | import Checkbox from './Checkbox.vue' 2 | export type { Props, Option } from './Checkbox.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Checkbox) 6 | -------------------------------------------------------------------------------- /components/datepicker/index.ts: -------------------------------------------------------------------------------- 1 | import DatePicker from './DatePicker.vue' 2 | export type { Props } from './DatePicker.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(DatePicker) 6 | -------------------------------------------------------------------------------- /components/grid/row/index.ts: -------------------------------------------------------------------------------- 1 | import Row from './Row.vue' 2 | export type { Props as RowProps, Responsive } from './Row.vue' 3 | import { withInstall } from '../../utils/type' 4 | 5 | export default withInstall(Row) 6 | -------------------------------------------------------------------------------- /components/loadingbar/index.ts: -------------------------------------------------------------------------------- 1 | import LoadingBar from './LoadingBar.vue' 2 | export type { Props } from './LoadingBar.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(LoadingBar) 6 | -------------------------------------------------------------------------------- /components/pagination/index.ts: -------------------------------------------------------------------------------- 1 | import Pagination from './Pagination.vue' 2 | export type { Props } from './Pagination.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Pagination) 6 | -------------------------------------------------------------------------------- /components/popconfirm/index.ts: -------------------------------------------------------------------------------- 1 | import Popconfirm from './Popconfirm.vue' 2 | export type { Props } from './Popconfirm.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Popconfirm) 6 | -------------------------------------------------------------------------------- /components/progress/index.ts: -------------------------------------------------------------------------------- 1 | import Progress from './Progress.vue' 2 | export type { Props, Gradient } from './Progress.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Progress) 6 | -------------------------------------------------------------------------------- /components/watermark/index.ts: -------------------------------------------------------------------------------- 1 | import Watermark from './Watermark.vue' 2 | export type { Props, Font } from './Watermark.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Watermark) 6 | -------------------------------------------------------------------------------- /components/floatbutton/index.ts: -------------------------------------------------------------------------------- 1 | import FloatButton from './FloatButton.vue' 2 | export type { Props } from './FloatButton.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(FloatButton) 6 | -------------------------------------------------------------------------------- /components/inputnumber/index.ts: -------------------------------------------------------------------------------- 1 | import InputNumber from './InputNumber.vue' 2 | export type { Props } from './InputNumber.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(InputNumber) 6 | -------------------------------------------------------------------------------- /components/inputsearch/index.ts: -------------------------------------------------------------------------------- 1 | import InputSearch from './InputSearch.vue' 2 | export type { Props } from './InputSearch.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(InputSearch) 6 | -------------------------------------------------------------------------------- /components/list/index.ts: -------------------------------------------------------------------------------- 1 | import List from './list' 2 | import ListItem from './listitem' 3 | 4 | export type { ListProps } from './list' 5 | export type { ListItemProps } from './listitem' 6 | 7 | export { List, ListItem } 8 | -------------------------------------------------------------------------------- /components/segmented/index.ts: -------------------------------------------------------------------------------- 1 | import Segmented from './Segmented.vue' 2 | export type { Props, Option } from './Segmented.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Segmented) 6 | -------------------------------------------------------------------------------- /components/textscroll/index.ts: -------------------------------------------------------------------------------- 1 | import TextScroll from './TextScroll.vue' 2 | export type { Props, Item } from './TextScroll.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(TextScroll) 6 | -------------------------------------------------------------------------------- /components/upload/index.ts: -------------------------------------------------------------------------------- 1 | import Upload from './Upload.vue' 2 | export type { Props, MessageType, FileType } from './Upload.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Upload) 6 | -------------------------------------------------------------------------------- /components/waterfall/index.ts: -------------------------------------------------------------------------------- 1 | import Waterfall from './Waterfall.vue' 2 | export type { Props, Image } from './Waterfall.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Waterfall) 6 | -------------------------------------------------------------------------------- /components/table/index.ts: -------------------------------------------------------------------------------- 1 | import Table from './Table.vue' 2 | export type { Props, Column, Selection, ScrollOption } from './Table.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Table) 6 | -------------------------------------------------------------------------------- /components/breadcrumb/index.ts: -------------------------------------------------------------------------------- 1 | import Breadcrumb from './Breadcrumb.vue' 2 | export type { Props, Route, Query } from './Breadcrumb.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Breadcrumb) 6 | -------------------------------------------------------------------------------- /components/list/listitem/index.ts: -------------------------------------------------------------------------------- 1 | import ListItem from './ListItem.vue' 2 | export type { Props as ListItemProps } from './ListItem.vue' 3 | import { withInstall } from '../../utils/type' 4 | 5 | export default withInstall(ListItem) 6 | -------------------------------------------------------------------------------- /components/gradienttext/index.ts: -------------------------------------------------------------------------------- 1 | import GradientText from './GradientText.vue' 2 | export type { Props, Gradient } from './GradientText.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(GradientText) 6 | -------------------------------------------------------------------------------- /components/notification/index.ts: -------------------------------------------------------------------------------- 1 | import Notification from './Notification.vue' 2 | export type { Props, Notification } from './Notification.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Notification) 6 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | declare module '*.vue' { 3 | import type { DefineComponent } from 'vue' 4 | const vueComponent: DefineComponent<{}, {}, any> 5 | export default vueComponent 6 | } 7 | -------------------------------------------------------------------------------- /components/configprovider/index.ts: -------------------------------------------------------------------------------- 1 | import ConfigProvider from './ConfigProvider.vue' 2 | export type { Props, Theme } from './ConfigProvider.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(ConfigProvider) 6 | -------------------------------------------------------------------------------- /components/calendar/index.ts: -------------------------------------------------------------------------------- 1 | import Calendar from './Calendar.vue' 2 | export type { Props, DayOfWeek, DefaultWeek, DateItem, MonthItem } from './Calendar.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Calendar) 6 | -------------------------------------------------------------------------------- /components/colorpicker/index.ts: -------------------------------------------------------------------------------- 1 | import ColorPicker from './ColorPicker.vue' 2 | export type { Props, ColorPickerMode, ColorPickerAction } from './ColorPicker.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(ColorPicker) 6 | -------------------------------------------------------------------------------- /components/numberanimation/index.ts: -------------------------------------------------------------------------------- 1 | import NumberAnimation from './NumberAnimation.vue' 2 | export type { Props, TransitionFunc } from './NumberAnimation.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(NumberAnimation) 6 | -------------------------------------------------------------------------------- /src/views/timepicker/Index.vue: -------------------------------------------------------------------------------- 1 | 4 | 10 | -------------------------------------------------------------------------------- /src/views/layout/Index.vue: -------------------------------------------------------------------------------- 1 | 4 | 10 | -------------------------------------------------------------------------------- /components/descriptions/descriptions/index.ts: -------------------------------------------------------------------------------- 1 | import Descriptions from './Descriptions.vue' 2 | export type { Props as DescriptionsProps, Responsive } from './Descriptions.vue' 3 | import { withInstall } from '../../utils/type' 4 | 5 | export default withInstall(Descriptions) 6 | -------------------------------------------------------------------------------- /docs/public/_headers: -------------------------------------------------------------------------------- 1 | /assets/* 2 | cache-control: max-age=31536000 3 | cache-control: immutable 4 | 5 | /*.svg 6 | cache-control: max-age=604800 7 | cache-control: immutable 8 | 9 | /*.png 10 | cache-control: max-age=604800 11 | cache-control: immutable 12 | -------------------------------------------------------------------------------- /src/views/exception/Index.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /components/descriptions/descriptionsitem/index.ts: -------------------------------------------------------------------------------- 1 | import DescriptionsItem from './DescriptionsItem.vue' 2 | export type { Props as DescriptionsItemProps } from './DescriptionsItem.vue' 3 | import { withInstall } from '../../utils/type' 4 | 5 | export default withInstall(DescriptionsItem) 6 | -------------------------------------------------------------------------------- /docs/.vitepress/dist/_headers: -------------------------------------------------------------------------------- 1 | /assets/* 2 | cache-control: max-age=31536000 3 | cache-control: immutable 4 | 5 | /*.svg 6 | cache-control: max-age=604800 7 | cache-control: immutable 8 | 9 | /*.png 10 | cache-control: max-age=604800 11 | cache-control: immutable 12 | -------------------------------------------------------------------------------- /components/utils/type.ts: -------------------------------------------------------------------------------- 1 | import type { App, Plugin, Component } from 'vue' 2 | export const withInstall = (comp: T) => { 3 | const c = comp as any 4 | c.install = function (app: App) { 5 | app.component(c.__name, comp) 6 | } 7 | return comp as T & Plugin 8 | } 9 | -------------------------------------------------------------------------------- /components/descriptions/index.ts: -------------------------------------------------------------------------------- 1 | import Descriptions from './descriptions' 2 | import DescriptionsItem from './descriptionsitem' 3 | 4 | export type { DescriptionsProps, Responsive } from './descriptions' 5 | export type { DescriptionsItemProps } from './descriptionsitem' 6 | 7 | export { Descriptions, DescriptionsItem } 8 | -------------------------------------------------------------------------------- /scripts/push.sh: -------------------------------------------------------------------------------- 1 | # /bin/bash 2 | 3 | # 确保脚本抛出遇到的错误 4 | set -e 5 | 6 | # 提交修改到 github 7 | 8 | commitDesc=$1 9 | 10 | git add . 11 | 12 | if [ -z "$commitDesc" ]; then 13 | git commit -m 'feat: update components library' 14 | else 15 | git commit -m "$commitDesc" 16 | fi 17 | 18 | git push 19 | 20 | echo ⏰ "$(date '+%Y-%m-%d %H:%M:%S')" 21 | -------------------------------------------------------------------------------- /components/skeleton/index.ts: -------------------------------------------------------------------------------- 1 | import Skeleton from './Skeleton.vue' 2 | export type { 3 | Props, 4 | SkeletonParagraphProps, 5 | SkeletonTitleProps, 6 | SkeletonInputProps, 7 | SkeletonAvatarProps, 8 | SkeletonButtonProps 9 | } from './Skeleton.vue' 10 | import { withInstall } from '../utils/type' 11 | 12 | export default withInstall(Skeleton) 13 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/prettierrc", 3 | "singleQuote": true, 4 | "semi": false, 5 | "tabWidth": 2, 6 | "trailingComma": "none", 7 | "endOfLine": "auto", 8 | "printWidth": 120, 9 | "proseWrap": "never", 10 | "arrowParens": "always", 11 | "htmlWhitespaceSensitivity": "strict", 12 | "embeddedLanguageFormatting": "auto" 13 | } 14 | -------------------------------------------------------------------------------- /types/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | // declare module '*.vue' { 3 | // import type { DefineComponent } from 'vue' 4 | // const vueComponent: DefineComponent<{}, {}, any> 5 | // export default vueComponent 6 | // } 7 | 8 | declare module '*.js' 9 | declare module '*.gz' 10 | declare module '*.json' 11 | 12 | interface Window { 13 | rafTimeout: Function 14 | } 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue Amazing UI 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # 只有编译后的 dist 目录、package.json、README.md是需要被发布的 2 | # 忽略目录 3 | .vite/ 4 | .DS_Store 5 | .vscode/ 6 | components/ 7 | docs/ 8 | node_modules 9 | public/ 10 | scripts/ 11 | src/ 12 | 13 | # 忽略指定文件 14 | .eslintrc.cjs 15 | .gitignore 16 | .npmignore 17 | .npmrc 18 | .prettierrc.json 19 | components.d.ts 20 | env.d.ts 21 | index.html 22 | pnpm-lock.yaml 23 | stats.html 24 | tsconfig.config.json 25 | tsconfig.json 26 | vite.config.ts 27 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import 'less/global.less' 5 | 6 | import VueAmazingUI from 'components/index' 7 | // import VueAmazingUI from 'vue-amazing-ui' 8 | // import 'vue-amazing-ui/css' 9 | 10 | const app = createApp(App) 11 | // window.rafTimeout = rafTimeout // 挂载到window上，全局可用，无需引入 12 | app.use(router) 13 | app.use(VueAmazingUI) 14 | app.mount('#app') 15 | -------------------------------------------------------------------------------- /components.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | // @ts-nocheck 3 | // biome-ignore lint: disable 4 | // oxlint-disable 5 | // ------ 6 | // Generated by unplugin-vue-components 7 | // Read more: https://github.com/vuejs/core/pull/3399 8 | 9 | export {} 10 | 11 | /* prettier-ignore */ 12 | declare module 'vue' { 13 | export interface GlobalComponents { 14 | RouterLink: typeof import('vue-router')['RouterLink'] 15 | RouterView: typeof import('vue-router')['RouterView'] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | # components 13 | dist 14 | es 15 | lib 16 | *.mp4 17 | dist-ssr 18 | coverage 19 | *.local 20 | .npmrc 21 | 22 | /cypress/videos/ 23 | /cypress/screenshots/ 24 | 25 | # Editor directories and files 26 | .vscode/* 27 | !.vscode/extensions.json 28 | !.vscode/settings.json 29 | .idea 30 | *.suo 31 | *.ntvs* 32 | *.njsproj 33 | *.sln 34 | *.sw? 35 | -------------------------------------------------------------------------------- /tsconfig.dts.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.dom.json", 3 | "include": [ 4 | "components/*.ts", 5 | "components/**/*.ts", 6 | "components/**/*.vue", 7 | ], 8 | "exclude": [ 9 | "node_modules", 10 | "dist", 11 | ], 12 | "compilerOptions": { 13 | "removeComments": true, 14 | "isolatedModules": true, 15 | "composite": true, 16 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 17 | "baseUrl": ".", 18 | "paths": { 19 | "components/*": ["components/*"], 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/VersionDateTag.vue: -------------------------------------------------------------------------------- 1 | 11 | 20 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/node22/tsconfig.json", 3 | "include": [ 4 | "vite.config.*", 5 | "vitest.config.*", 6 | "cypress.config.*", 7 | "nightwatch.conf.*", 8 | "playwright.config.*", 9 | "eslint.config.*" 10 | ], 11 | "compilerOptions": { 12 | "composite": true, 13 | "noEmit": true, 14 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 15 | "module": "ESNext", 16 | "moduleResolution": "node", 17 | "allowSyntheticDefaultImports": true, 18 | "types": ["node"] 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /docs/guide/template.md: -------------------------------------------------------------------------------- 1 | # 模板 Template 2 | 3 | 4 | 5 | *模板文件* 6 | 7 | ## 何时使用 8 | 9 | - 当需要添加新组件时 10 | 11 | 13 | 14 | ## 基本使用 15 | 16 | ::: details Show Code 17 | 18 | ```vue 19 | 21 | 23 | ``` 24 | 25 | ::: 26 | 27 | ## APIs 28 | 29 | ### Template 30 | 31 | 参数 | 说明 | 类型 | 默认值 32 | :-- | :-- | :-- | :-- 33 | 34 | ## Slots 35 | 36 | 名称 | 说明 | 类型 37 | :-- | :-- | :-- 38 | 39 | ## Methods 40 | 41 | 名称 | 说明 | 类型 42 | :-- | :-- | :-- 43 | 44 | ## Events 45 | 46 | 名称 | 说明 | 类型 47 | :-- | :-- | :-- 48 | -------------------------------------------------------------------------------- /scripts/publish.sh: -------------------------------------------------------------------------------- 1 | # /bin/bash 2 | 3 | # 确保脚本抛出遇到的错误 4 | set -e 5 | 6 | commitDesc=$1 7 | 8 | # 读取 package.json 中的 version 9 | version=$(jq -r .version package.json) 10 | 11 | # 打包构建 12 | pnpm build 13 | 14 | git add . 15 | 16 | if [ -z "$commitDesc" ]; then 17 | git commit -m 'feat: update components library' 18 | else 19 | git commit -m "$commitDesc" 20 | fi 21 | 22 | git push 23 | 24 | # 发布到 npm 25 | npm publish 26 | 27 | # 升级 vue-amazing-ui 依赖版本 28 | pnpm up vue-amazing-ui@$version 29 | 30 | # 提交版本更新代码到 github 31 | git add . 32 | git commit -m "feat: update $version" 33 | git push 34 | 35 | # 重新部署文档 36 | pnpm docs:deploy "$commitDesc" 37 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | import DefaultTheme from 'vitepress/theme' 2 | import './global.less' // global less 3 | import GlobalElement from './components/GlobalElement.vue' 4 | import VersionDateTag from './components/VersionDateTag.vue' 5 | // import VueAmazingUI from 'vue-amazing-ui' 6 | // import 'vue-amazing-ui/css' 7 | import VueAmazingUI from '../../../dist/index' 8 | import '../../../dist/style.css' 9 | 10 | export default { 11 | extends: DefaultTheme, // or ...DefaultTheme 12 | enhanceApp({ app }) { 13 | app.component('GlobalElement', GlobalElement) 14 | app.component('VersionDateTag', VersionDateTag) 15 | app.use(VueAmazingUI) 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/chunk-JVWSFFO4.js: -------------------------------------------------------------------------------- 1 | var __defProp = Object.defineProperty 2 | var __getOwnPropNames = Object.getOwnPropertyNames 3 | var __defNormalProp = (obj, key, value) => 4 | key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : (obj[key] = value) 5 | var __commonJS = (cb, mod) => 6 | function __require() { 7 | return (mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports) 8 | } 9 | var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== 'symbol' ? key + '' : key, value) 10 | 11 | export { __commonJS, __publicField } 12 | //# sourceMappingURL=chunk-JVWSFFO4.js.map 13 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | // commitlint.config.js 2 | import { resolve } from 'path' 3 | import { readFileSync } from 'fs' 4 | 5 | // 动态获取 package.json 的 type 字段 6 | const pkg = JSON.parse(readFileSync(resolve(process.cwd(), 'package.json'), 'utf-8')) 7 | 8 | export default { 9 | extends: ['@commitlint/config-conventional'], 10 | rules: { 11 | 'type-enum': [2, 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore', 'revert', 'perf']], 12 | 'header-max-length': [0, 'always', 120] 13 | }, 14 | // ESM 兼容配置 15 | parserPreset: { 16 | parserOpts: { 17 | // 解决 ESM 下的路径问题 18 | ...(pkg.type === 'module' ? { sourceType: 'module' } : {}) 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /scripts/deploy.sh: -------------------------------------------------------------------------------- 1 | # /bin/bash 2 | 3 | # 确保脚本抛出遇到的错误 4 | set -e 5 | 6 | commitDesc=$1 7 | 8 | # 重新打包组件库 9 | pnpm build 10 | 11 | # 打包生成静态文件 12 | pnpm docs:build 13 | 14 | # 进入待发布的 dist/ 目录 15 | cd docs/.vitepress/dist 16 | 17 | # 提交打包静态网站到 github-pages 分支 18 | git init 19 | git branch -M main 20 | git add . 21 | git commit -m 'deploy' 22 | 23 | # 部署到 https://.github.io/ 24 | git push -f git@github.com:themusecatcher/vue-amazing-ui.git main:gh-pages 25 | 26 | # 提交所有代码到 github 27 | cd ../../../ 28 | git add . 29 | 30 | if [ -z "$commitDesc" ]; then 31 | git commit -m 'feat: update components library' 32 | else 33 | git commit -m "$commitDesc" 34 | fi 35 | 36 | git push 37 | 38 | echo ⏰ "$(date '+%Y-%m-%d %H:%M:%S')" 39 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/MailSVG.vue: -------------------------------------------------------------------------------- 1 | 18 | 25 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 19 | 28 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.dom.json", 3 | "include": [ 4 | "src/*.ts", 5 | "src/**/*.ts", 6 | "src/**/*.vue", 7 | "types/*.d.ts", 8 | "components/*.ts", 9 | "components/**/*.ts", 10 | "components/**/*.vue", 11 | ], 12 | "exclude": [ 13 | "node_modules", 14 | "dist", 15 | "es", 16 | "lib" 17 | ], 18 | "compilerOptions": { 19 | "removeComments": true, 20 | "isolatedModules": true, 21 | "composite": true, 22 | // "noUnusedLocals": true, 23 | // "noUnusedParameters": true, 24 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 25 | "baseUrl": ".", 26 | "paths": { 27 | "@/*": ["src/*"], 28 | "#/*": ["types/*"], 29 | "components/*": ["components/*"], 30 | "images/*": ["src/assets/images/*"], 31 | "less/*": ["src/assets/less/*"], 32 | "utils/*": ["src/utils/*"] 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/ArrowDownSVG.vue: -------------------------------------------------------------------------------- 1 | 27 | 34 | -------------------------------------------------------------------------------- /components/style/global.less: -------------------------------------------------------------------------------- 1 | // 组件库全局样式定义 2 | *, 3 | *::before, 4 | *::after { 5 | box-sizing: border-box; 6 | margin: 0; 7 | padding: 0; 8 | caret-color: transparent; // 消除 win 系统点击后出现插入光标闪烁的问题 9 | } 10 | :root { 11 | --primary-color: #1677ff; 12 | --primary-color-hover: #4096ff; 13 | } 14 | body { 15 | font-family: 16 | Inter, 17 | -apple-system, 18 | BlinkMacSystemFont, 19 | 'Segoe UI', 20 | Roboto, 21 | Oxygen, 22 | Ubuntu, 23 | Cantarell, 24 | 'Fira Sans', 25 | 'Droid Sans', 26 | 'Helvetica Neue', 27 | sans-serif; 28 | } 29 | input, 30 | textarea { 31 | caret-color: auto; 32 | } 33 | a { 34 | color: var(--primary-color); 35 | text-decoration: none; 36 | background-color: transparent; 37 | -webkit-tap-highlight-color: transparent; 38 | outline: none; 39 | cursor: pointer; 40 | transition: color 0.3s ease; 41 | &:hover { 42 | color: var(--primary-color-hover); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /components/index.ts: -------------------------------------------------------------------------------- 1 | import './style/global.less' 2 | import type { App, Plugin } from 'vue' 3 | import * as components from './components' 4 | export * from './components' 5 | export { 6 | dateFormat, 7 | formatNumber, 8 | rafTimeout, 9 | cancelRaf, 10 | throttle, 11 | debounce, 12 | add, 13 | downloadFile, 14 | toggleDark, 15 | useEventListener, 16 | useMutationObserver, 17 | useScroll, 18 | useFps, 19 | useMediaQuery, 20 | useResizeObserver, 21 | useSlotsExist, 22 | useInject, 23 | useOptionsSupported 24 | } from './utils' 25 | export { VueAmazingUIResolver } from './utils/resolver' 26 | export type { VueAmazingUIResolverOptions } from './utils/resolver' 27 | 28 | export const install = function (app: App) { 29 | Object.values(components).forEach((component) => { 30 | if (component.install) { 31 | app.use(component as unknown as Plugin) 32 | } 33 | }) 34 | return app // 用于支持链式调用，例如: app.use(A).use(B) 35 | } 36 | 37 | export default { 38 | install 39 | } 40 | -------------------------------------------------------------------------------- /src/views/upload/worker.ts: -------------------------------------------------------------------------------- 1 | import SparkMD5 from 'spark-md5' 2 | // 创建分片 3 | function createFileChunk(file: File, index: number, chunkSize: number) { 4 | return new Promise((resolve, reject) => { 5 | const start = index * chunkSize 6 | const end = Math.min(file.size, start + chunkSize) 7 | const spark = new SparkMD5.ArrayBuffer() // https://github.com/satazor/js-spark-md5 8 | const fileReader = new FileReader() 9 | const blob = file.slice(start, end) 10 | fileReader.onload = (e: ProgressEvent) => { 11 | spark.append(e.target?.result as ArrayBuffer) 12 | resolve({ 13 | start, 14 | end, 15 | index, 16 | hash: spark.end(), 17 | blob 18 | }) 19 | } 20 | fileReader.onerror = (e) => { 21 | reject(new Error(`文件读取过程中发生错误: ${e}`)) 22 | } 23 | fileReader.readAsArrayBuffer(blob) 24 | }) 25 | } 26 | // web worker 通信 27 | onmessage = async (e: MessageEvent) => { 28 | const { file, start, end, CHUNK_SIZE } = e.data 29 | const result = [] 30 | for (let i = start; i < end; i++) { 31 | const chunkPromise = createFileChunk(file, i, CHUNK_SIZE) 32 | result.push(chunkPromise) 33 | } 34 | const chunks = await Promise.all(result) 35 | postMessage(chunks) 36 | } 37 | -------------------------------------------------------------------------------- /docs/guide/customize.md: -------------------------------------------------------------------------------- 1 | # 定制主题 2 | 3 | 4 | 5 | `Vue Amazing UI` 通过使用 `ConfigProvider` 调整主题，默认情况下主题色为 #1677ff，无需任何配置 6 | 7 | 更多关于 `ConfigProvider` 的使用，参见 [全局化配置 ConfigProvider](/guide/components/configprovider.html) 8 | 9 | ## 动态切换主题 10 | 11 | *配置的全局主题色会注入后代组件，如果要动态切换主题色，只需要修改 `theme` 对象即可* 12 | 13 | ```vue 14 | 15 | 24 | 29 | 30 | ``` 31 | 32 | ## 定制组件主题 33 | 34 | *组件主题配置方法同全局主题配置方法，并且组件主题色会覆盖全局主题色* 35 | 36 | ```vue 37 | 38 | 53 | 58 | 59 | ``` 60 | -------------------------------------------------------------------------------- /src/views/upload/sliceFile.ts: -------------------------------------------------------------------------------- 1 | const CHUNK_SIZE = 1024 * 1024 * 5 // 5MB 分片大小 2 | // navigator.hardwareConcurrency 返回用户计算机上可用于运行线程的逻辑处理器数量 3 | const THREAD_COUNT = navigator.hardwareConcurrency || 4 // 并发执行的线程数 4 | export function sliceFile(file: File) { 5 | return new Promise((resolve, reject) => { 6 | const chunkCount = Math.ceil(file.size / CHUNK_SIZE) // 分片数量 7 | const threadChunkCount = Math.ceil(chunkCount / THREAD_COUNT) // 每个线程分配的分片数量 8 | const result: any[] = [] 9 | let finishCount = 0 10 | for (let i = 0; i < THREAD_COUNT; i++) { 11 | // 依次创建 web worker 线程 12 | const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' }) // // module 为了线程内部可以导入其他模块 13 | const start = i * threadChunkCount 14 | const end = Math.min(start + threadChunkCount, chunkCount) 15 | worker.postMessage({ 16 | file, 17 | start, 18 | end, 19 | CHUNK_SIZE 20 | }) 21 | worker.onmessage = (e: MessageEvent) => { 22 | worker.terminate() 23 | result[i] = e.data 24 | finishCount++ 25 | if (finishCount === THREAD_COUNT) { 26 | // 所有线程均完成时返回结果 27 | resolve(result.flat()) 28 | } 29 | } 30 | worker.onerror = (err) => { 31 | worker.terminate() 32 | reject(err) 33 | } 34 | } 35 | }) 36 | } 37 | -------------------------------------------------------------------------------- /src/views/highlight/Index.vue: -------------------------------------------------------------------------------- 1 | 8 | 41 | -------------------------------------------------------------------------------- /docs/utils/functions/fps.md: -------------------------------------------------------------------------------- 1 | # 刷新率 useFps 2 | 3 | 4 | 5 | _实时监测浏览器刷新率 `FPS` 的组合式函数_ 6 | 7 | ::: details Show Source Code 8 | 9 | ```ts 10 | /** 11 | * 组合式函数 12 | * 实时监测浏览器刷新率FPS 13 | * 14 | * FPS值可以帮助开发者识别性能瓶颈，以优化应用的性能 15 | * 16 | * @returns {{ fps: Ref }} 返回一个包含 FPS 值的 ref 对象 17 | */ 18 | import { ref } from 'vue' 19 | import type { Ref } from 'vue' 20 | export function useFps(): { fps: Ref } { 21 | const fps = ref(0) 22 | const frameCount = ref(0) 23 | let lastTime = performance.now() 24 | const every = 10 25 | const calculateFrameRate = (currentTime: number) => { 26 | frameCount.value++ 27 | if (frameCount.value >= every) { 28 | // 每 every 帧进行一次 FPS 计算 29 | const timeDiff = currentTime - lastTime 30 | fps.value = Math.round(1000 / (timeDiff / every)) 31 | lastTime = currentTime 32 | frameCount.value = 0 33 | } 34 | requestAnimationFrame(calculateFrameRate) 35 | } 36 | requestAnimationFrame(calculateFrameRate) 37 | // 返回帧率状态 38 | return { fps } 39 | } 40 | ``` 41 | 42 | ::: 43 | 44 | 49 | 50 | ## 基本使用 51 | 52 |

帧率：{{ fps }}

53 | 54 | ```vue 55 | 60 | 63 | ``` 64 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import pluginVue from 'eslint-plugin-vue' 2 | import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript' 3 | import skipFormatting from '@vue/eslint-config-prettier/skip-formatting' 4 | 5 | // To allow more languages other than `ts` in `.vue` files, uncomment the following lines: 6 | // import { configureVueProject } from '@vue/eslint-config-typescript' 7 | // configureVueProject({ scriptLangs: ['ts', 'tsx'] }) 8 | // More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup 9 | 10 | export default defineConfigWithVueTs( 11 | { 12 | name: 'app/files-to-lint', 13 | files: ['**/*.{ts,mts,tsx,vue}'] 14 | }, 15 | 16 | { 17 | name: 'app/files-to-ignore', 18 | ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**', 'docs/.vitepress/**'] 19 | }, 20 | 21 | pluginVue.configs['flat/essential'], 22 | vueTsConfigs.recommended, 23 | skipFormatting, 24 | 25 | // 添加自定义规则 26 | { 27 | name: 'custom-eslint-rules', 28 | rules: { 29 | '@typescript-eslint/no-explicit-any': 'off', 30 | '@typescript-eslint/no-unused-vars': 'off', 31 | '@typescript-eslint/no-unused-expressions': 'off', 32 | '@typescript-eslint/no-duplicate-enum-values': 'off', 33 | '@typescript-eslint/no-unsafe-function-type': 'off', 34 | 'vue/multi-word-component-names': 'off', 35 | 'vue/no-unused-vars': 'off', 36 | 'vue/return-in-computed-property': 'off', 37 | 'vue/require-toggle-inside-transition': 'off' 38 | } 39 | } 40 | ) 41 | -------------------------------------------------------------------------------- /docs/utils/functions/add.md: -------------------------------------------------------------------------------- 1 | # 加法 add 2 | 3 | 4 | 5 | _消除 `js` 加减精度问题的工具函数_ 6 | 7 | ::: details Show Source Code 8 | 9 | ```ts 10 | /** 11 | * 消除 js 加减精度问题的加法函数 12 | * 13 | * 该函数旨在添加两个数字，考虑到它们可能是整数或小数；对于整数，直接返回它们的和 14 | * 对于小数，为了确保精确计算，将小数转换为相同长度的字符串进行处理，然后将结果转换回小数 15 | * 16 | * @param {number} num1 第一个数字 17 | * @param {number} num2 第二个数字 18 | * @returns {number} 返回两个数字的和 19 | */ 20 | export function add(num1: number, num2: number): number { 21 | // 验证输入是否为有效的数字 22 | // Number.isNaN() 不会尝试将参数转换为数字；全局 isNaN() 函数会将参数强制转换为数字 23 | if (Number.isNaN(num1) || Number.isNaN(num2)) { 24 | throw new Error('Both num1 and num2 must be valid numbers.') 25 | } 26 | // 检查输入是否为小数 27 | const isDecimalNum1 = num1 % 1 !== 0 28 | const isDecimalNum2 = num2 % 1 !== 0 29 | if (!isDecimalNum1 && !isDecimalNum2) { 30 | return num1 + num2 // 如果两个数字都是整数，则直接返回它们的和 31 | } 32 | const num1DeciStr = String(num1).split('.')[1] ?? '' 33 | const num2DeciStr = String(num2).split('.')[1] ?? '' 34 | const maxLen = Math.max(num1DeciStr.length, num2DeciStr.length) 35 | const factor = Math.pow(10, maxLen) 36 | const num1Str = num1.toFixed(maxLen) 37 | const num2Str = num2.toFixed(maxLen) 38 | // 将小数点移除并转换为整数相加 39 | const result = (+num1Str.replace('.', '') + +num2Str.replace('.', '')) / factor 40 | return result 41 | } 42 | ``` 43 | 44 | ::: 45 | 46 | ## 基本使用 47 | 48 | ```vue 49 | 54 | ``` 55 | 56 | ## Params 57 | 58 | | 参数 | 说明 | 类型 | 默认值 | 59 | | ---- | ----- | ------ | --------- | 60 | | num1 | 加数1 | number | undefined | 61 | | num2 | 加数2 | number | undefined | 62 | -------------------------------------------------------------------------------- /docs/.vitepress/utils/fetchVersion.ts: -------------------------------------------------------------------------------- 1 | /* 2 | 远程读取 github 仓库中 package.json 文件中的 version 版本号 3 | 方式一： 4 | 读取规则：https://api.github.com/repos///contents/?ref= 5 | return fetch('https://api.github.com/repos/themusecatcher/vue-amazing-ui/contents/package.json?ref=main', { 6 | headers: { 7 | // See https://docs.github.com/en/rest/overview/media-types 8 | Accept: 'application/vnd.github.v3.raw', 9 | // See https://docs.github.com/en/rest/guides/getting-started-with-the-rest-api#authentication 10 | // Authorization: 'token ${GITHUB_TOKEN}', 11 | } 12 | }) 13 | 方式二： 14 | 读取规则：https://raw.githubusercontent.com//// 15 | return fetch('https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/main/package.json') 16 | */ 17 | export function fetchVersion() { 18 | return fetch('https://api.github.com/repos/themusecatcher/vue-amazing-ui/contents/package.json?ref=main', { 19 | headers: { 20 | // See https://docs.github.com/en/rest/overview/media-types 21 | Accept: 'application/vnd.github.v3.raw' 22 | // See https://docs.github.com/en/rest/guides/getting-started-with-the-rest-api#authentication 23 | // Authorization: 'token ${GITHUB_TOKEN}', 24 | } 25 | }) 26 | .then((res) => res.json()) 27 | .then((json) => json.version ?? '') 28 | .then((version) => { 29 | if (!version) return 30 | setLabel(version) 31 | }) 32 | } 33 | export function setLabel(version: string) { 34 | const tagLineParagragh = document.querySelector('div.VPHero.has-image.VPHomeHero > div > div.main > p.tagline') 35 | const docsVersionSpan = document.createElement('samp') 36 | docsVersionSpan.classList.add('tag-version') 37 | docsVersionSpan.innerText = version 38 | tagLineParagragh?.appendChild(docsVersionSpan) 39 | } -------------------------------------------------------------------------------- /src/views/empty/Index.vue: -------------------------------------------------------------------------------- 1 | 47 | 57 | -------------------------------------------------------------------------------- /src/views/divider/Index.vue: -------------------------------------------------------------------------------- 1 | 41 | -------------------------------------------------------------------------------- /src/views/gradientText/Index.vue: -------------------------------------------------------------------------------- 1 | 56 | -------------------------------------------------------------------------------- /components/popover/Popover.vue: -------------------------------------------------------------------------------- 1 | 30 | 54 | 67 | -------------------------------------------------------------------------------- /components/descriptions/descriptionsitem/DescriptionsItem.vue: -------------------------------------------------------------------------------- 1 | 16 | 34 | 64 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | 4 | title: Vue Amazing UI 5 | titleTemplate: Amazing UI Components Library 6 | 7 | hero: 8 | name: Vue Amazing UI 9 | text: Amazing UI 组件库 10 | tagline: 基于 Vue3 + TypeScript + Vite 开发 11 | image: 12 | src: /amazing-logo.svg 13 | alt: Vue Amazing UI 14 | actions: 15 | - theme: brand 16 | text: 开始使用 17 | link: /guide/features 18 | - theme: alt 19 | text: 成为赞助者 ✨ 20 | link: https://themusecatcher.github.io/vue-amazing-ui/sponsor/charge.html 21 | features: 22 | - icon: 💡 23 | title: 最新技术 24 | details: '基于 Vue@3.5.24、TypeScript@5.9.3、Vite@7.2.2 等最新技术栈开发' 25 | - icon: 🚀 26 | title: 开箱即用 27 | details: 目前共包含 67 个基础 UI 组件以及 18 个工具函数，持续探索更新中 28 | - icon: 😉 29 | title: 有点意思 30 | details: '主题可调，全量使用 TypeScript 和 SFC，支持 tree shaking' 31 | --- 32 | 33 | 34 | 35 | 66 | -------------------------------------------------------------------------------- /docs/utils/functions/debounce.md: -------------------------------------------------------------------------------- 1 | # 防抖 debounce 2 | 3 | 4 | 5 | _对于短时间内连续触发的事件，防抖就是让某个时间 `delay` 期限内，事件处理函数只执行一次_ 6 | 7 | ::: details Show Source Code 8 | 9 | ```ts 10 | /** 11 | * 防抖函数 debounce 12 | * 13 | * 主要用于限制函数调用的频率，当频繁触发某个函数时，实际上只需要在最后一次触发后的一段时间内执行一次即可 14 | * 这对于诸如输入事件处理函数、窗口大小调整事件处理函数等可能会频繁触发的函数非常有用 15 | * 16 | * @param {Function} fn 要执行的函数 17 | * @param {number} [delay = 300] 防抖的时间期限，单位 ms，默认为 300ms 18 | * @returns {Function} 返回一个新的防抖的函数 19 | */ 20 | export function debounce(fn: Function, delay: number = 300): Function { 21 | let timer: any = null // 使用闭包保存定时器的引用 22 | return function (...args: any[]) { 23 | // 返回一个包装函数 24 | if (timer) { 25 | // 如果定时器存在，则清除之前的定时器 26 | clearTimeout(timer) 27 | } 28 | // 设置新的定时器，延迟执行原函数 29 | timer = setTimeout(() => { 30 | fn(...args) 31 | }, delay) 32 | } 33 | } 34 | ``` 35 | 36 | ::: 37 | 38 | ## 何时使用 39 | 40 | - 对于短时间内连续触发的事件，在 `delay` `ms` 内函数只执行最后一次 41 | 42 | 52 | 53 | ## 基本使用 54 | 55 |

滚动条位置：{{ scrollTop }}

56 | 57 | ```vue 58 | 67 | ``` 68 | 69 | ## Params 70 | 71 | | 参数 | 说明 | 类型 | 默认值 | 72 | | ----- | ------------------------- | -------- | --------- | 73 | | fn | 要执行的函数 | Function | undefined | 74 | | delay | 防抖的时间期限，单位 `ms` | number | 300 | 75 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/GlobalElement.vue: -------------------------------------------------------------------------------- 1 | 16 | 74 | -------------------------------------------------------------------------------- /docs/utils/functions/throttle.md: -------------------------------------------------------------------------------- 1 | # 节流 throttle 2 | 3 | 4 | 5 | _如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间 `delay` 期限内不再工作，直至过了这段时间才重新生效_ 6 | 7 | ::: details Show Source Code 8 | 9 | ```ts 10 | /** 11 | * 节流函数 throttle 12 | * 13 | * 该函数用于生成一个节流函数，用于控制某个函数在给定时间间隔内只能被执行一次 14 | * 主要用于性能优化，例如限制事件处理函数的触发频率 15 | * 16 | * @param {Function} fn 要被节流的函数 17 | * @param {number} [delay = 300] 节流的时间间隔，单位 ms，默认为 300ms 18 | * @returns {Function} 返回一个新的节流的函数 19 | */ 20 | export function throttle(fn: Function, delay: number = 300): Function { 21 | let valid = true // 用于标记函数是否可以执行 22 | return function (...args: any[]) { 23 | if (!valid) return false // 返回 false，表示当前不执行函数 24 | // 返回一个新的函数，该函数负责执行节流逻辑 25 | if (valid) { 26 | fn(...args) // 执行原函数 27 | valid = false // 将函数置为无效 28 | setTimeout(() => { 29 | valid = true 30 | }, delay) 31 | } 32 | } 33 | } 34 | ``` 35 | 36 | ::: 37 | 38 | ## 何时使用 39 | 40 | - 短时间内大量触发同一事件时，每 `delay` `ms` 内函数只执行一次 41 | 42 | 51 | 52 | ## 基本使用 53 | 54 |

滚动条位置：{{ scrollTop }}

55 | 56 | ```vue 57 | 66 | ``` 67 | 68 | ## Params 69 | 70 | | 参数 | 说明 | 类型 | 默认值 | 71 | | ----- | ------------------------- | -------- | --------- | 72 | | fn | 要被节流的函数 | Function | undefined | 73 | | delay | 节流的时间间隔，单位 `ms` | number | 300 | 74 | -------------------------------------------------------------------------------- /docs/utils/functions/download-file.md: -------------------------------------------------------------------------------- 1 | # 下载文件 downloadFile 2 | 3 | 4 | 5 | _下载文件并自定义文件名的工具函数_ 6 | 7 | ::: details Show Source Code 8 | 9 | ```ts 10 | /** 11 | * 下载文件并自定义文件名 12 | * 13 | * @param {string} url 文件的 URL，支持网络路径或本地路径 14 | * @param {string} fileName 文件名；文件的命名，如果未提供，则从 URL 中尝试提取 15 | */ 16 | export function downloadFile(url: string, fileName?: string): void { 17 | if (!url) { 18 | console.error('无效的 url') 19 | return 20 | } 21 | // 获取文件名，如果未提供，则从URL中获取或使用默认值 22 | const name = fileName ? fileName : url.split('?')[0].split('/').pop() || 'download' 23 | try { 24 | // 使用 fetch API 从指定 URL 请求文件 25 | fetch(url).then((response) => { 26 | // 检查响应状态是否成功 27 | if (response.ok) { 28 | // 将响应转换为 Blob 对象 29 | response.blob().then((blob) => { 30 | const blobUrl = URL.createObjectURL(blob) // 创建 Blob URL 31 | const a = document.createElement('a') // 创建超链接元素 32 | a.href = blobUrl // 设置超链接的 href 属性为 Blob URL 33 | a.download = name // 设置超链接的 download 属性为自定义的文件名 34 | // 将超链接元素添加到文档中并触发点击事件 35 | document.body.appendChild(a) 36 | a.click() // 点击超链接，触发下载事件 37 | document.body.removeChild(a) 38 | URL.revokeObjectURL(blobUrl) // 释放 Blob URL 所占的内存 39 | }) 40 | } else { 41 | console.error('请求文件失败，状态码:', response.status) 42 | } 43 | }) 44 | } catch (error) { 45 | // 处理下载过程中出现的异常情况 46 | console.error('文件下载失败:', error) 47 | } 48 | } 49 | ``` 50 | 51 | ::: 52 | 53 | ## 基本使用 54 | 55 | ```vue 56 | 60 | ``` 61 | 62 | ## Params 63 | 64 | | 参数 | 说明 | 类型 | 默认值 | 65 | | --------- | --------------------------------------------- | ------ | --------- | 66 | | url | 文件的 `URL`，支持网络路径或本地路径 | string | undefined | 67 | | fileName? | 文件的命名，如果未提供，则从 `URL` 中尝试提取 | string | undefined | 68 | -------------------------------------------------------------------------------- /src/views/video/Index.vue: -------------------------------------------------------------------------------- 1 | 19 | 56 | -------------------------------------------------------------------------------- /src/views/waterfall/Index.vue: -------------------------------------------------------------------------------- 1 | 25 | 67 | -------------------------------------------------------------------------------- /components/space/Space.vue: -------------------------------------------------------------------------------- 1 | 40 | 49 | 79 | -------------------------------------------------------------------------------- /src/views/textarea/Index.vue: -------------------------------------------------------------------------------- 1 | 18 |