├── vite-env.d.ts ├── .npmignore ├── README.md ├── packages ├── icon │ ├── iconfont.ttf │ └── iconfont.woff ├── components │ ├── cell │ │ ├── test.vue │ │ ├── index.ts │ │ └── props.ts │ ├── col │ │ ├── test.vue │ │ ├── index.ts │ │ ├── props.ts │ │ └── col.less │ ├── form │ │ ├── test.vue │ │ ├── index.ts │ │ ├── form.less │ │ ├── form.vue │ │ └── props.ts │ ├── icon │ │ ├── test.vue │ │ ├── index.ts │ │ ├── props.ts │ │ ├── icon.vue │ │ └── icon.less │ ├── list │ │ ├── test.vue │ │ ├── index.ts │ │ ├── list.less │ │ └── props.ts │ ├── page │ │ ├── test.vue │ │ └── index.ts │ ├── roll │ │ ├── test.vue │ │ ├── index.ts │ │ ├── roll.less │ │ └── props.ts │ ├── row │ │ ├── test.vue │ │ ├── row.less │ │ ├── index.ts │ │ ├── props.ts │ │ └── row.vue │ ├── sign │ │ ├── test.vue │ │ ├── index.ts │ │ ├── sign.less │ │ └── props.ts │ ├── step │ │ ├── test.vue │ │ └── index.ts │ ├── tab │ │ ├── test.vue │ │ ├── index.ts │ │ ├── tab.less │ │ └── props.ts │ ├── tabs │ │ ├── test.vue │ │ ├── index.ts │ │ └── props.ts │ ├── calendar │ │ ├── test.vue │ │ └── index.ts │ ├── carousel │ │ ├── test.vue │ │ ├── index.ts │ │ └── props.ts │ ├── collapse │ │ ├── test.vue │ │ ├── index.ts │ │ ├── collapse.less │ │ ├── props.ts │ │ └── collapse.vue │ ├── dialog │ │ └── test.vue │ ├── dropdown │ │ ├── test.vue │ │ └── index.ts │ ├── field │ │ ├── test.vue │ │ └── index.ts │ ├── form-el │ │ ├── test.vue │ │ ├── index.ts │ │ ├── props.ts │ │ └── form-el.less │ ├── image │ │ ├── test.vue │ │ ├── index.ts │ │ └── image.less │ ├── input │ │ ├── test.vue │ │ └── index.ts │ ├── msgbox │ │ ├── test.vue │ │ └── props.ts │ ├── navbar │ │ ├── test.vue │ │ ├── index.ts │ │ └── props.ts │ ├── notify │ │ ├── test.vue │ │ ├── props.ts │ │ └── notify.less │ ├── picker │ │ ├── test.vue │ │ ├── index.ts │ │ └── props.ts │ ├── popup │ │ ├── test.vue │ │ └── index.ts │ ├── search │ │ ├── test.vue │ │ └── index.ts │ ├── select │ │ ├── test.vue │ │ └── index.ts │ ├── skeleton │ │ ├── test.vue │ │ ├── index.ts │ │ └── props.ts │ ├── slider │ │ ├── test.vue │ │ ├── index.ts │ │ ├── props.ts │ │ └── slider.less │ ├── stepper │ │ ├── test.vue │ │ └── index.ts │ ├── steps │ │ ├── test.vue │ │ ├── index.ts │ │ ├── steps.less │ │ ├── steps.vue │ │ └── props.ts │ ├── tabbar │ │ ├── test.vue │ │ ├── index.ts │ │ ├── tabbar.less │ │ └── tabbar-item.less │ ├── toast │ │ ├── test.vue │ │ └── toast.less │ ├── tooltip │ │ ├── test.vue │ │ ├── index.ts │ │ └── tooltip.less │ ├── triangle │ │ ├── test.vue │ │ ├── index.ts │ │ └── props.ts │ ├── carousel-item │ │ ├── test.vue │ │ ├── index.ts │ │ └── carousel-item.less │ ├── cell-group │ │ ├── test.vue │ │ ├── index.ts │ │ ├── cell-group.less │ │ ├── props.ts │ │ └── cell-group.vue │ ├── collapse-item │ │ ├── test.vue │ │ ├── index.ts │ │ ├── props.ts │ │ └── collapse-item.less │ ├── color-picker │ │ ├── test.vue │ │ ├── index.ts │ │ └── props.ts │ ├── date-chooser │ │ ├── test.vue │ │ └── index.ts │ ├── date-picker │ │ ├── test.vue │ │ ├── date-picker.less │ │ └── index.ts │ ├── image-preview │ │ ├── test.vue │ │ └── index.ts │ ├── loading-bar │ │ ├── test.vue │ │ ├── loading-bar.less │ │ └── props.ts │ ├── pull-refresh │ │ ├── test.vue │ │ ├── index.ts │ │ ├── pull-refresh.less │ │ └── props.ts │ ├── rich-image │ │ ├── test.vue │ │ ├── rich-image.less │ │ ├── index.ts │ │ └── props.ts │ ├── circle-progress │ │ ├── test.vue │ │ ├── index.ts │ │ ├── circle-progress.less │ │ └── props.ts │ ├── number-keyboard │ │ ├── test.vue │ │ └── index.ts │ ├── transition-slide │ │ ├── test.vue │ │ ├── transition-slide.less │ │ ├── index.ts │ │ └── props.ts │ ├── swipe-cell │ │ ├── test.vue │ │ ├── index.ts │ │ ├── props.ts │ │ └── swipe-cell.less │ ├── table │ │ ├── test.vue │ │ └── index.ts │ ├── date-native-picker │ │ ├── test.vue │ │ ├── date-native-picker.less │ │ ├── index.ts │ │ └── props.ts │ ├── divider │ │ ├── test.vue │ │ ├── index.ts │ │ ├── props.ts │ │ ├── divider.vue │ │ └── divider.less │ ├── progress │ │ ├── test.vue │ │ ├── index.ts │ │ ├── progress.less │ │ └── props.ts │ ├── badge │ │ ├── index.ts │ │ ├── test.vue │ │ ├── props.ts │ │ └── badge.less │ ├── label │ │ ├── index.ts │ │ ├── test.vue │ │ ├── props.ts │ │ └── label.vue │ ├── layer │ │ ├── index.ts │ │ ├── test.vue │ │ └── layer.less │ ├── modal │ │ ├── index.ts │ │ └── test.vue │ ├── radio │ │ ├── index.ts │ │ ├── test.vue │ │ └── props.ts │ ├── button │ │ ├── index.ts │ │ └── test.vue │ ├── switch │ │ ├── index.ts │ │ ├── test.vue │ │ ├── props.ts │ │ └── switch.less │ ├── loading │ │ ├── index.ts │ │ ├── test.vue │ │ └── props.ts │ ├── overlay │ │ ├── index.ts │ │ ├── test.vue │ │ ├── overlay.less │ │ └── props.ts │ ├── checkbox │ │ ├── index.ts │ │ ├── test.vue │ │ └── props.ts │ ├── actionsheet │ │ ├── index.ts │ │ └── test.vue │ └── autocomplete │ │ ├── index.ts │ │ └── test.vue ├── directives │ ├── drag │ │ ├── test.vue │ │ └── index.ts │ ├── prop │ │ ├── test.vue │ │ └── index.ts │ ├── px │ │ ├── test.vue │ │ └── index.ts │ ├── spy │ │ ├── test.vue │ │ └── index.ts │ ├── anchor │ │ ├── test.vue │ │ └── index.ts │ ├── observe │ │ ├── test.vue │ │ └── index.ts │ ├── resize │ │ ├── test.vue │ │ └── index.ts │ ├── ripple │ │ ├── test.vue │ │ └── index.ts │ ├── scroll │ │ ├── test.vue │ │ ├── index.ts │ │ └── scroll.ts │ └── upload │ │ ├── test.vue │ │ └── index.ts └── css │ └── base.less ├── lib ├── directives │ ├── px │ │ ├── index.d.ts │ │ └── px.d.ts │ ├── anchor │ │ ├── index.d.ts │ │ └── anchor.d.ts │ ├── scroll │ │ ├── index.d.ts │ │ └── scroll.d.ts │ ├── upload │ │ └── index.d.ts │ ├── spy │ │ ├── index.d.ts │ │ └── spy.d.ts │ ├── drag │ │ ├── index.d.ts │ │ └── drag.d.ts │ ├── resize │ │ └── index.d.ts │ ├── ripple │ │ ├── index.d.ts │ │ └── ripple.d.ts │ ├── observe │ │ ├── index.d.ts │ │ └── observe.d.ts │ └── prop │ │ ├── index.d.ts │ │ └── prop.d.ts ├── components │ ├── divider │ │ ├── props.d.ts │ │ └── divider.vue.d.ts │ ├── swipe-cell │ │ ├── props.d.ts │ │ └── swipe-cell.vue.d.ts │ ├── color-picker │ │ ├── props.d.ts │ │ ├── color-picker.vue.d.ts │ │ └── index.d.ts │ ├── msgbox │ │ ├── index.d.ts │ │ └── props.d.ts │ ├── transition-slide │ │ ├── props.d.ts │ │ └── transition-slide.vue.d.ts │ ├── step │ │ ├── step.vue.d.ts │ │ └── index.d.ts │ ├── carousel-item │ │ ├── carousel-item.vue.d.ts │ │ └── index.d.ts │ ├── sign │ │ ├── props.d.ts │ │ ├── sign.vue.d.ts │ │ └── index.d.ts │ ├── cell-group │ │ ├── props.d.ts │ │ └── cell-group.vue.d.ts │ ├── loading │ │ ├── props.d.ts │ │ ├── loading.vue.d.ts │ │ └── index.d.ts │ ├── toast │ │ └── index.d.ts │ ├── notify │ │ ├── index.d.ts │ │ └── props.d.ts │ ├── loading-bar │ │ ├── index.d.ts │ │ ├── props.d.ts │ │ └── loading-bar.vue.d.ts │ ├── row │ │ └── props.d.ts │ ├── icon │ │ ├── props.d.ts │ │ ├── icon.vue.d.ts │ │ └── index.d.ts │ ├── form-el │ │ └── props.d.ts │ ├── triangle │ │ ├── props.d.ts │ │ └── triangle.vue.d.ts │ ├── date-native-picker │ │ └── props.d.ts │ ├── tab │ │ └── props.d.ts │ ├── collapse-item │ │ └── props.d.ts │ ├── form │ │ └── props.d.ts │ ├── switch │ │ └── props.d.ts │ ├── steps │ │ └── props.d.ts │ ├── collapse │ │ └── props.d.ts │ ├── dialog │ │ └── index.d.ts │ ├── overlay │ │ └── props.d.ts │ ├── label │ │ └── props.d.ts │ ├── navbar │ │ └── props.d.ts │ ├── list │ │ └── props.d.ts │ ├── badge │ │ └── props.d.ts │ ├── rich-image │ │ └── props.d.ts │ ├── col │ │ └── props.d.ts │ ├── cell │ │ └── props.d.ts │ ├── roll │ │ └── props.d.ts │ ├── slider │ │ └── props.d.ts │ ├── checkbox │ │ └── props.d.ts │ ├── radio │ │ └── props.d.ts │ ├── skeleton │ │ └── props.d.ts │ ├── tabs │ │ └── props.d.ts │ ├── pull-refresh │ │ └── props.d.ts │ ├── carousel │ │ └── props.d.ts │ └── picker │ │ └── props.d.ts ├── utils │ └── index.d.ts └── default.css ├── .gitignore ├── tsconfig.node.json ├── example ├── main.ts ├── test.html └── App.vue ├── index.html ├── tsconfig.json ├── LICENSE ├── package.json └── vite-plugin-compile-less-to-css.ts /vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # 忽略目录 2 | example/ 3 | public/ 4 | index.html 5 | 6 | # 忽略指定文件 7 | vite.config.ts -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #### 一个基于 Vue3 的前端开发组件库 2 | 3 | > 具体使用方法请参阅：[mvi-web-plus](https://www.so-better.cn/mvi-web-plus/) 4 | -------------------------------------------------------------------------------- /packages/icon/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/so-better/mvi-web-plus/HEAD/packages/icon/iconfont.ttf -------------------------------------------------------------------------------- /packages/icon/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/so-better/mvi-web-plus/HEAD/packages/icon/iconfont.woff -------------------------------------------------------------------------------- /packages/components/cell/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/col/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/form/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/icon/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/list/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/page/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/roll/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/row/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/sign/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/step/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/tab/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/tabs/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/directives/drag/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/directives/prop/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/directives/px/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/directives/spy/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/calendar/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/carousel/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/collapse/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/dialog/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/dropdown/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/field/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/form-el/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/image/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/input/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/msgbox/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/navbar/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/notify/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/picker/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/popup/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/search/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/select/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/skeleton/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/slider/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/stepper/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/steps/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/tabbar/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/toast/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/tooltip/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/triangle/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/directives/anchor/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/directives/observe/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/directives/resize/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/directives/ripple/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/directives/scroll/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/directives/upload/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/carousel-item/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/cell-group/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/collapse-item/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/color-picker/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/date-chooser/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/date-picker/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/image-preview/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/loading-bar/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/pull-refresh/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/rich-image/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/circle-progress/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/number-keyboard/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/transition-slide/test.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/components/row/row.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-row { 4 | display: flex; 5 | width: 100%; 6 | flex-wrap: wrap; 7 | } 8 | -------------------------------------------------------------------------------- /packages/components/swipe-cell/test.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/components/table/test.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/components/date-native-picker/test.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/components/date-picker/date-picker.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-date-picker { 4 | display: block; 5 | width: 100%; 6 | position: relative; 7 | } 8 | -------------------------------------------------------------------------------- /packages/components/step/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import step from './step.vue' 3 | 4 | const Step = withInstall(step) 5 | 6 | export { Step, Step as default } 7 | -------------------------------------------------------------------------------- /packages/components/divider/test.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/components/col/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import col from './col.vue' 3 | export type * from './props' 4 | 5 | const Col = withInstall(col) 6 | export { Col, Col as default } 7 | -------------------------------------------------------------------------------- /packages/components/progress/test.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/components/row/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import row from './row.vue' 3 | export type * from './props' 4 | 5 | const Row = withInstall(row) 6 | export { Row, Row as default } 7 | -------------------------------------------------------------------------------- /packages/components/tab/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import tab from './tab.vue' 3 | export type * from './props' 4 | 5 | const Tab = withInstall(tab) 6 | export { Tab, Tab as default } 7 | -------------------------------------------------------------------------------- /packages/components/cell/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import cell from './cell.vue' 3 | export type * from './props' 4 | 5 | const Cell = withInstall(cell) 6 | export { Cell, Cell as default } 7 | -------------------------------------------------------------------------------- /packages/components/form/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import form from './form.vue' 3 | export type * from './props' 4 | 5 | const Form = withInstall(form) 6 | export { Form, Form as default } 7 | -------------------------------------------------------------------------------- /packages/components/icon/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import icon from './icon.vue' 3 | export type * from './props' 4 | 5 | const Icon = withInstall(icon) 6 | export { Icon, Icon as default } 7 | -------------------------------------------------------------------------------- /packages/components/list/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import list from './list.vue' 3 | export type * from './props' 4 | 5 | const List = withInstall(list) 6 | export { List, List as default } 7 | -------------------------------------------------------------------------------- /packages/components/page/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import page from './page.vue' 3 | export type * from './props' 4 | 5 | const Page = withInstall(page) 6 | export { Page, Page as default } 7 | -------------------------------------------------------------------------------- /packages/components/roll/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import roll from './roll.vue' 3 | export type * from './props' 4 | 5 | const Roll = withInstall(roll) 6 | export { Roll, Roll as default } 7 | -------------------------------------------------------------------------------- /packages/components/sign/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import sign from './sign.vue' 3 | export type * from './props' 4 | 5 | const Sign = withInstall(sign) 6 | export { Sign, Sign as default } 7 | -------------------------------------------------------------------------------- /packages/components/tabs/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import tabs from './tabs.vue' 3 | export type * from './props' 4 | 5 | const Tabs = withInstall(tabs) 6 | export { Tabs, Tabs as default } 7 | -------------------------------------------------------------------------------- /packages/components/badge/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import badge from './badge.vue' 3 | export type * from './props' 4 | 5 | const Badge = withInstall(badge) 6 | export { Badge, Badge as default } 7 | -------------------------------------------------------------------------------- /packages/components/field/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import field from './field.vue' 3 | export type * from './props' 4 | 5 | const Field = withInstall(field) 6 | export { Field, Field as default } 7 | -------------------------------------------------------------------------------- /packages/components/image/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import image from './image.vue' 3 | export type * from './props' 4 | 5 | const Image = withInstall(image) 6 | export { Image, Image as default } 7 | -------------------------------------------------------------------------------- /packages/components/input/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import input from './input.vue' 3 | export type * from './props' 4 | 5 | const Input = withInstall(input) 6 | export { Input, Input as default } 7 | -------------------------------------------------------------------------------- /packages/components/label/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import label from './label.vue' 3 | export type * from './props' 4 | 5 | const Label = withInstall(label) 6 | export { Label, Label as default } 7 | -------------------------------------------------------------------------------- /packages/components/layer/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import layer from './layer.vue' 3 | export type * from './props' 4 | 5 | const Layer = withInstall(layer) 6 | export { Layer, Layer as default } 7 | -------------------------------------------------------------------------------- /packages/components/modal/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import modal from './modal.vue' 3 | export type * from './props' 4 | 5 | const Modal = withInstall(modal) 6 | export { Modal, Modal as default } 7 | -------------------------------------------------------------------------------- /packages/components/popup/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import popup from './popup.vue' 3 | export type * from './props' 4 | 5 | const Popup = withInstall(popup) 6 | export { Popup, Popup as default } 7 | -------------------------------------------------------------------------------- /packages/components/radio/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import radio from './radio.vue' 3 | export type * from './props' 4 | 5 | const Radio = withInstall(radio) 6 | export { Radio, Radio as default } 7 | -------------------------------------------------------------------------------- /packages/components/rich-image/rich-image.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-rich-image { 4 | display: block; 5 | width: 100%; 6 | height: 100%; 7 | position: relative; 8 | overflow: hidden; 9 | } 10 | -------------------------------------------------------------------------------- /packages/components/steps/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import steps from './steps.vue' 3 | export type * from './props' 4 | 5 | const Steps = withInstall(steps) 6 | export { Steps, Steps as default } 7 | -------------------------------------------------------------------------------- /packages/components/table/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import table from './table.vue' 3 | export type * from './props' 4 | 5 | const Table = withInstall(table) 6 | export { Table, Table as default } 7 | -------------------------------------------------------------------------------- /packages/components/button/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import button from './button.vue' 3 | export type * from './props' 4 | 5 | const Button = withInstall(button) 6 | export { Button, Button as default } 7 | -------------------------------------------------------------------------------- /packages/components/label/test.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/components/navbar/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import navbar from './navbar.vue' 3 | export type * from './props' 4 | 5 | const Navbar = withInstall(navbar) 6 | export { Navbar, Navbar as default } 7 | -------------------------------------------------------------------------------- /packages/components/picker/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import picker from './picker.vue' 3 | export type * from './props' 4 | 5 | const Picker = withInstall(picker) 6 | export { Picker, Picker as default } 7 | -------------------------------------------------------------------------------- /packages/components/search/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import search from './search.vue' 3 | export type * from './props' 4 | 5 | const Search = withInstall(search) 6 | export { Search, Search as default } 7 | -------------------------------------------------------------------------------- /packages/components/select/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import select from './select.vue' 3 | export type * from './props' 4 | 5 | const Select = withInstall(select) 6 | export { Select, Select as default } 7 | -------------------------------------------------------------------------------- /packages/components/slider/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import slider from './slider.vue' 3 | export type * from './props' 4 | 5 | const Slider = withInstall(slider) 6 | export { Slider, Slider as default } 7 | -------------------------------------------------------------------------------- /packages/components/tabbar/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import tabbar from './tabbar.vue' 3 | export type * from './props' 4 | 5 | const Tabbar = withInstall(tabbar) 6 | export { Tabbar, Tabbar as default } 7 | -------------------------------------------------------------------------------- /packages/components/form-el/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import formEl from './form-el.vue' 3 | export type * from './props' 4 | 5 | const FormEl = withInstall(formEl) 6 | export { FormEl, FormEl as default } 7 | -------------------------------------------------------------------------------- /packages/components/sign/sign.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-sign { 4 | display: block; 5 | width: 100%; 6 | height: 100%; 7 | user-select: none; 8 | 9 | &:hover { 10 | cursor: pointer; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/components/switch/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import _switch from './switch.vue' 3 | export type * from './props' 4 | 5 | const Switch = withInstall(_switch) 6 | export { Switch, Switch as default } 7 | -------------------------------------------------------------------------------- /packages/components/divider/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import divider from './divider.vue' 3 | export type * from './props' 4 | 5 | const Divider = withInstall(divider) 6 | export { Divider, Divider as default } 7 | -------------------------------------------------------------------------------- /packages/components/loading/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import loading from './loading.vue' 3 | export type * from './props' 4 | 5 | const Loading = withInstall(loading) 6 | export { Loading, Loading as default } 7 | -------------------------------------------------------------------------------- /packages/components/overlay/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import overlay from './overlay.vue' 3 | export type * from './props' 4 | 5 | const Overlay = withInstall(overlay) 6 | export { Overlay, Overlay as default } 7 | -------------------------------------------------------------------------------- /packages/components/stepper/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import stepper from './stepper.vue' 3 | export type * from './props' 4 | 5 | const Stepper = withInstall(stepper) 6 | export { Stepper, Stepper as default } 7 | -------------------------------------------------------------------------------- /packages/components/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import tooltip from './tooltip.vue' 3 | export type * from './props' 4 | 5 | const Tooltip = withInstall(tooltip) 6 | export { Tooltip, Tooltip as default } 7 | -------------------------------------------------------------------------------- /packages/components/calendar/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import calendar from './calendar.vue' 3 | export type * from './props' 4 | 5 | const Calendar = withInstall(calendar) 6 | export { Calendar, Calendar as default } 7 | -------------------------------------------------------------------------------- /packages/components/carousel/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import carousel from './carousel.vue' 3 | export type * from './props' 4 | 5 | const Carousel = withInstall(carousel) 6 | export { Carousel, Carousel as default } 7 | -------------------------------------------------------------------------------- /packages/components/collapse/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import collapse from './collapse.vue' 3 | export type * from './props' 4 | 5 | const Collapse = withInstall(collapse) 6 | export { Collapse, Collapse as default } 7 | -------------------------------------------------------------------------------- /packages/components/dropdown/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | export type * from './props' 3 | import dropdown from './dropdown.vue' 4 | 5 | const Dropdown = withInstall(dropdown) 6 | export { Dropdown, Dropdown as default } 7 | -------------------------------------------------------------------------------- /packages/components/progress/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import progress from './progress.vue' 3 | export type * from './props' 4 | 5 | const Progress = withInstall(progress) 6 | export { Progress, Progress as default } 7 | -------------------------------------------------------------------------------- /packages/components/skeleton/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import skeleton from './skeleton.vue' 3 | export type * from './props' 4 | 5 | const Skeleton = withInstall(skeleton) 6 | export { Skeleton, Skeleton as default } 7 | -------------------------------------------------------------------------------- /packages/components/triangle/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import triangle from './triangle.vue' 3 | export type * from './props' 4 | 5 | const Triangle = withInstall(triangle) 6 | export { Triangle, Triangle as default } 7 | -------------------------------------------------------------------------------- /packages/components/carousel-item/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import carouselItem from './carousel-item.vue' 3 | 4 | const CarouselItem = withInstall(carouselItem) 5 | 6 | export { CarouselItem, CarouselItem as default } 7 | -------------------------------------------------------------------------------- /packages/components/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import checkbox from './checkbox.vue' 3 | export type * from './props' 4 | 5 | const Checkbox = withInstall(checkbox) 6 | 7 | export { Checkbox, Checkbox as default } 8 | -------------------------------------------------------------------------------- /packages/components/cell-group/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import cellGroup from './cell-group.vue' 3 | export type * from './props' 4 | 5 | const CellGroup = withInstall(cellGroup) 6 | export { CellGroup, CellGroup as default } 7 | -------------------------------------------------------------------------------- /packages/components/rich-image/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import richImage from './rich-image.vue' 3 | export type * from './props' 4 | 5 | const RichImage = withInstall(richImage) 6 | export { RichImage, RichImage as default } 7 | -------------------------------------------------------------------------------- /packages/components/swipe-cell/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import swipeCell from './swipe-cell.vue' 3 | export type * from './props' 4 | 5 | const SwipeCell = withInstall(swipeCell) 6 | export { SwipeCell, SwipeCell as default } 7 | -------------------------------------------------------------------------------- /packages/components/date-picker/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import datePicker from './date-picker.vue' 3 | export type * from './props' 4 | 5 | const DatePicker = withInstall(datePicker) 6 | export { DatePicker, DatePicker as default } 7 | -------------------------------------------------------------------------------- /packages/components/actionsheet/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import actionsheet from './actionsheet.vue' 3 | export type * from './props' 4 | 5 | const Actionsheet = withInstall(actionsheet) 6 | export { Actionsheet, Actionsheet as default } 7 | -------------------------------------------------------------------------------- /packages/components/color-picker/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import colorPicker from './color-picker.vue' 3 | export type * from './props' 4 | 5 | const ColorPicker = withInstall(colorPicker) 6 | export { ColorPicker, ColorPicker as default } 7 | -------------------------------------------------------------------------------- /packages/components/date-chooser/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import dateChooser from './date-chooser.vue' 3 | export type * from './props' 4 | 5 | const DateChooser = withInstall(dateChooser) 6 | export { DateChooser, DateChooser as default } 7 | -------------------------------------------------------------------------------- /packages/components/pull-refresh/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import pullRefresh from './pull-refresh.vue' 3 | export type * from './props' 4 | 5 | const PullRefresh = withInstall(pullRefresh) 6 | export { PullRefresh, PullRefresh as default } 7 | -------------------------------------------------------------------------------- /packages/components/autocomplete/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import autocomplete from './autocomplete.vue' 3 | export type * from './props' 4 | 5 | const Autocomplete = withInstall(autocomplete) 6 | export { Autocomplete, Autocomplete as default } 7 | -------------------------------------------------------------------------------- /packages/components/collapse-item/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import collapseItem from './collapse-item.vue' 3 | export type * from './props' 4 | 5 | const CollapseItem = withInstall(collapseItem) 6 | export { CollapseItem, CollapseItem as default } 7 | -------------------------------------------------------------------------------- /packages/components/date-native-picker/date-native-picker.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-date-native-picker { 4 | width: 0; 5 | height: 0; 6 | opacity: 0; 7 | border: none; 8 | min-width: 0; 9 | max-width: 0; 10 | position: relative; 11 | } 12 | -------------------------------------------------------------------------------- /packages/components/form/form.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-form { 4 | display: flex; 5 | width: 100%; 6 | justify-content: flex-start; 7 | align-items: center; 8 | flex-wrap: wrap; 9 | 10 | &.block { 11 | display: block; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/image-preview/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import imagePreview from './image-preview.vue' 3 | export type * from './props' 4 | 5 | const ImagePreview = withInstall(imagePreview) 6 | export { ImagePreview, ImagePreview as default } 7 | -------------------------------------------------------------------------------- /packages/components/transition-slide/transition-slide.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-transition-slide { 4 | display: block; 5 | width: 100%; 6 | overflow: hidden; 7 | padding: 0; 8 | margin: 0; 9 | border: none; 10 | background: none; 11 | } 12 | -------------------------------------------------------------------------------- /packages/components/circle-progress/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import circleProgress from './circle-progress.vue' 3 | export type * from './props' 4 | 5 | const CircleProgress = withInstall(circleProgress) 6 | export { CircleProgress, CircleProgress as default } 7 | -------------------------------------------------------------------------------- /packages/components/number-keyboard/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import numberKeyboard from './number-keyboard.vue' 3 | export type * from './props' 4 | 5 | const NumberKeyboard = withInstall(numberKeyboard) 6 | export { NumberKeyboard, NumberKeyboard as default } 7 | -------------------------------------------------------------------------------- /lib/directives/px/index.d.ts: -------------------------------------------------------------------------------- 1 | import { default as Px } from './px'; 2 | 3 | export type * from './px'; 4 | declare const vPx: import('../../utils').SFCWithInstall<{ 5 | mounted(el: any, binding: import('vue').DirectiveBinding): void; 6 | }>; 7 | export { Px, vPx, vPx as default }; 8 | -------------------------------------------------------------------------------- /packages/components/switch/test.vue: -------------------------------------------------------------------------------- 1 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /packages/components/transition-slide/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import transitionSlide from './transition-slide.vue' 3 | export type * from './props' 4 | 5 | const TransitionSlide = withInstall(transitionSlide) 6 | export { TransitionSlide, TransitionSlide as default } 7 | -------------------------------------------------------------------------------- /packages/components/loading-bar/loading-bar.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-loading-bar { 4 | position: fixed; 5 | left: 0; 6 | top: 0; 7 | width: 0; 8 | opacity: 0; 9 | height: 0.04rem; 10 | background-color: var(--mvi-success-normal); 11 | z-index: 3000; 12 | } 13 | -------------------------------------------------------------------------------- /packages/components/date-native-picker/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '@/utils' 2 | import dateNativePicker from './date-native-picker.vue' 3 | export type * from './props' 4 | 5 | const DateNativePicker = withInstall(dateNativePicker) 6 | export { DateNativePicker, DateNativePicker as default } 7 | -------------------------------------------------------------------------------- /packages/components/loading/test.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /lib/directives/anchor/index.d.ts: -------------------------------------------------------------------------------- 1 | import { default as Anchor } from './anchor'; 2 | 3 | export type * from './anchor'; 4 | declare const vAnchor: import('../../utils').SFCWithInstall<{ 5 | mounted(el: any, binding: import('vue').DirectiveBinding): void; 6 | }>; 7 | export { Anchor, vAnchor, vAnchor as default }; 8 | -------------------------------------------------------------------------------- /lib/directives/scroll/index.d.ts: -------------------------------------------------------------------------------- 1 | import { default as Scroll } from './scroll'; 2 | 3 | export type * from './scroll'; 4 | declare const vScroll: import('../../utils').SFCWithInstall<{ 5 | mounted(el: any, binding: import('vue').DirectiveBinding): void; 6 | }>; 7 | export { Scroll, vScroll, vScroll as default }; 8 | -------------------------------------------------------------------------------- /lib/directives/upload/index.d.ts: -------------------------------------------------------------------------------- 1 | import { default as Upload } from './upload'; 2 | 3 | export type * from './upload'; 4 | declare const vUpload: import('../../utils').SFCWithInstall<{ 5 | mounted(el: any, binding: import('vue').DirectiveBinding): void; 6 | }>; 7 | export { Upload, vUpload, vUpload as default }; 8 | -------------------------------------------------------------------------------- /lib/directives/spy/index.d.ts: -------------------------------------------------------------------------------- 1 | import { default as Spy } from './spy'; 2 | 3 | export type * from './spy'; 4 | declare const vSpy: import('../../utils').SFCWithInstall<{ 5 | mounted(el: any, binding: import('vue').DirectiveBinding): void; 6 | beforeUnmount(el: any): void; 7 | }>; 8 | export { Spy, vSpy, vSpy as default }; 9 | -------------------------------------------------------------------------------- /lib/directives/drag/index.d.ts: -------------------------------------------------------------------------------- 1 | import { default as Drag } from './drag'; 2 | 3 | export type * from './drag'; 4 | declare const vDrag: import('../../utils').SFCWithInstall<{ 5 | mounted(el: any, binding: import('vue').DirectiveBinding): void; 6 | beforeUnmount(el: any): void; 7 | }>; 8 | export { Drag, vDrag, vDrag as default }; 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | 23 | /package-lock.json 24 | -------------------------------------------------------------------------------- /lib/directives/resize/index.d.ts: -------------------------------------------------------------------------------- 1 | import { default as Resize } from './resize'; 2 | 3 | export type * from './resize'; 4 | declare const vResize: import('../../utils').SFCWithInstall<{ 5 | mounted(el: any, binding: import('vue').DirectiveBinding): void; 6 | beforeUnmount(el: any): void; 7 | }>; 8 | export { Resize, vResize, vResize as default }; 9 | -------------------------------------------------------------------------------- /lib/directives/ripple/index.d.ts: -------------------------------------------------------------------------------- 1 | import { default as Ripple } from './ripple'; 2 | 3 | export type * from './ripple'; 4 | declare const vRipple: import('../../utils').SFCWithInstall<{ 5 | mounted(el: any, binding: import('vue').DirectiveBinding): void; 6 | beforeUnmount(el: any): void; 7 | }>; 8 | export { Ripple, vRipple, vRipple as default }; 9 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "include": ["vite.config.ts", "vite-plugin-compile-less-to-css.ts", "vite-plugin-router-autocreate.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /lib/directives/observe/index.d.ts: -------------------------------------------------------------------------------- 1 | import { default as Observe } from './observe'; 2 | 3 | export type * from './observe'; 4 | declare const vObserve: import('../../utils').SFCWithInstall<{ 5 | mounted(el: any, binding: import('vue').DirectiveBinding): void; 6 | beforeUnmount(el: any): void; 7 | }>; 8 | export { Observe, vObserve, vObserve as default }; 9 | -------------------------------------------------------------------------------- /packages/components/steps/steps.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-steps { 4 | display: flex; 5 | position: relative; 6 | justify-content: space-between; 7 | align-items: center; 8 | width: 100%; 9 | padding: @mp-sm; 10 | background-color: var(--mvi-bg-color-common); 11 | 12 | &.vertical { 13 | flex-direction: column; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/components/divider/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue' 2 | 3 | export const DividerProps = { 4 | //是否使用虚线 5 | dashed: { 6 | type: Boolean, 7 | default: false 8 | }, 9 | //线颜色 10 | color: { 11 | type: String, 12 | default: null 13 | } 14 | } 15 | 16 | export type DividerPropsType = ExtractPublicPropTypes 17 | -------------------------------------------------------------------------------- /packages/components/layer/test.vue: -------------------------------------------------------------------------------- 1 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /packages/components/overlay/test.vue: -------------------------------------------------------------------------------- 1 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /packages/components/autocomplete/test.vue: -------------------------------------------------------------------------------- 1 | 6 | 12 | 13 | -------------------------------------------------------------------------------- /packages/components/carousel-item/carousel-item.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-carousel-item { 4 | display: block; 5 | position: relative; 6 | overflow: hidden; 7 | width: 100%; 8 | height: 100%; 9 | 10 | &.fade { 11 | position: absolute; 12 | left: 0; 13 | top: 0; 14 | } 15 | } 16 | 17 | .carousel-fade-enter-from, 18 | .carousel-fade-leave-to { 19 | opacity: 0; 20 | } 21 | -------------------------------------------------------------------------------- /packages/components/color-picker/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue' 2 | 3 | export const ColorPickerProps = { 4 | //颜色值 5 | modelValue: { 6 | type: String, 7 | default: '#ff0000' 8 | }, 9 | //是否显示透明度滑动条 10 | showAlpha: { 11 | type: Boolean, 12 | default: true 13 | } 14 | } 15 | 16 | export type ColorPickerPropsType = ExtractPublicPropTypes 17 | -------------------------------------------------------------------------------- /packages/components/swipe-cell/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue' 2 | 3 | export const SwipeCellProps = { 4 | //是否禁用滑动 5 | disabled: { 6 | type: Boolean, 7 | default: false 8 | }, 9 | //默认点击center部分关闭展开的左右内容 10 | centerClose: { 11 | type: Boolean, 12 | default: true 13 | } 14 | } 15 | 16 | export type SwipeCellPropsType = ExtractPublicPropTypes 17 | -------------------------------------------------------------------------------- /packages/components/transition-slide/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue' 2 | 3 | export const TransitionSlideProps = { 4 | //是否展开 5 | expand: { 6 | type: Boolean, 7 | default: true 8 | }, 9 | //动画时间 10 | timeout: { 11 | type: Number, 12 | default: 200 13 | } 14 | } 15 | 16 | export type TransitionSlidePropsType = ExtractPublicPropTypes 17 | -------------------------------------------------------------------------------- /lib/components/divider/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue'; 2 | 3 | export declare const DividerProps: { 4 | dashed: { 5 | type: BooleanConstructor; 6 | default: boolean; 7 | }; 8 | color: { 9 | type: StringConstructor; 10 | default: null; 11 | }; 12 | }; 13 | export type DividerPropsType = ExtractPublicPropTypes; 14 | -------------------------------------------------------------------------------- /packages/components/collapse/collapse.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-collapse { 4 | display: block; 5 | width: 100%; 6 | background-color: var(--mvi-bg-color-common); 7 | 8 | :deep(.mvi-collapse-item:last-child) { 9 | &.border::after { 10 | border-bottom: none; 11 | } 12 | 13 | .mvi-collapse-cell.border:not(.expand)::after { 14 | border-bottom: none; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/components/modal/test.vue: -------------------------------------------------------------------------------- 1 | 9 | 13 | 14 | -------------------------------------------------------------------------------- /packages/components/cell-group/cell-group.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-cell-group { 4 | display: block; 5 | width: 100%; 6 | margin-bottom: @mp-md; 7 | 8 | .mvi-cell-group-title { 9 | padding: @mp-md @mp-sm; 10 | color: var(--mvi-font-color-sub); 11 | font-size: @font-size-default; 12 | } 13 | 14 | &.border :deep(.mvi-cell.border:last-child::after) { 15 | border: none; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /lib/directives/prop/index.d.ts: -------------------------------------------------------------------------------- 1 | import { default as Prop } from './prop'; 2 | 3 | export type * from './prop'; 4 | declare const vProp: import('../../utils').SFCWithInstall<{ 5 | mounted(el: any, binding: import('vue').DirectiveBinding): void; 6 | updated(el: any, binding: import('vue').DirectiveBinding): void; 7 | beforeUnmount(el: any): void; 8 | }>; 9 | export { Prop, vProp, vProp as default }; 10 | -------------------------------------------------------------------------------- /example/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import '../lib/support.css' 5 | import '../lib/default.css' 6 | import mvi from '../packages' 7 | const app = createApp(App) 8 | app.config.globalProperties.dialogComponentWatch = function (eventName, type, el) { 9 | console.log(eventName, type, el) 10 | } 11 | 12 | app.use(router).use(mvi).mount('#app') 13 | -------------------------------------------------------------------------------- /lib/components/swipe-cell/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue'; 2 | 3 | export declare const SwipeCellProps: { 4 | disabled: { 5 | type: BooleanConstructor; 6 | default: boolean; 7 | }; 8 | centerClose: { 9 | type: BooleanConstructor; 10 | default: boolean; 11 | }; 12 | }; 13 | export type SwipeCellPropsType = ExtractPublicPropTypes; 14 | -------------------------------------------------------------------------------- /lib/directives/prop/prop.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 高度比例系数 3 | */ 4 | declare class Prop { 5 | private $el; 6 | private ratio; 7 | private width; 8 | private height; 9 | private hasInit; 10 | private guid; 11 | constructor(element: HTMLElement, ratio: number); 12 | private createGuid; 13 | set(number?: number): void; 14 | init(): void; 15 | destroy(): void; 16 | } 17 | export default Prop; 18 | -------------------------------------------------------------------------------- /lib/components/color-picker/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue'; 2 | 3 | export declare const ColorPickerProps: { 4 | modelValue: { 5 | type: StringConstructor; 6 | default: string; 7 | }; 8 | showAlpha: { 9 | type: BooleanConstructor; 10 | default: boolean; 11 | }; 12 | }; 13 | export type ColorPickerPropsType = ExtractPublicPropTypes; 14 | -------------------------------------------------------------------------------- /lib/components/msgbox/index.d.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue'; 2 | import { MsgboxPropsType } from './props'; 3 | 4 | export type * from './props'; 5 | type MsgboxType = { 6 | initParams: (options: string | MsgboxPropsType) => MsgboxPropsType; 7 | install: (app: App) => void; 8 | msgbox: (options: string | MsgboxPropsType) => Promise; 9 | }; 10 | declare const Msgbox: MsgboxType; 11 | export { Msgbox, Msgbox as default }; 12 | -------------------------------------------------------------------------------- /lib/components/transition-slide/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue'; 2 | 3 | export declare const TransitionSlideProps: { 4 | expand: { 5 | type: BooleanConstructor; 6 | default: boolean; 7 | }; 8 | timeout: { 9 | type: NumberConstructor; 10 | default: number; 11 | }; 12 | }; 13 | export type TransitionSlidePropsType = ExtractPublicPropTypes; 14 | -------------------------------------------------------------------------------- /packages/components/list/list.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-list { 4 | display: block; 5 | width: 100%; 6 | 7 | .mvi-list-loading, 8 | .mvi-list-finished, 9 | .mvi-list-error, 10 | .mvi-list-content { 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | width: 100%; 15 | padding: @mp-md; 16 | font-size: @font-size-default; 17 | color: var(--mvi-font-color-mute); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /lib/directives/scroll/scroll.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 监听元素滚动条到达顶部或者底部 3 | */ 4 | export type ScrollOptionsType = { 5 | top?: (...args: any) => void; 6 | bottom?: (...args: any) => void; 7 | }; 8 | declare class Scroll { 9 | private $el; 10 | private top?; 11 | private bottom?; 12 | private hasInit; 13 | constructor(element: HTMLElement, options: ScrollOptionsType); 14 | init(): void; 15 | } 16 | export default Scroll; 17 | -------------------------------------------------------------------------------- /packages/components/tooltip/tooltip.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-tooltip { 4 | display: inline-block; 5 | position: relative; 6 | 7 | &.block { 8 | display: block; 9 | } 10 | } 11 | 12 | .mvi-tooltip-content { 13 | position: relative; 14 | display: block; 15 | padding: @mp-xs @mp-sm; 16 | font-size: @font-size-small; 17 | margin: 0; 18 | white-space: nowrap; 19 | line-height: 1.5; 20 | text-align: center; 21 | } 22 | -------------------------------------------------------------------------------- /packages/components/cell-group/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue' 2 | 3 | export const CellGroupProps = { 4 | //单元格组标题 5 | title: { 6 | type: String, 7 | default: null 8 | }, 9 | //下边框 10 | border: { 11 | type: Boolean, 12 | default: true 13 | }, 14 | //是否显示点击态 15 | active: { 16 | type: Boolean, 17 | default: true 18 | } 19 | } 20 | 21 | export type CellGroupPropsType = ExtractPublicPropTypes 22 | -------------------------------------------------------------------------------- /packages/components/sign/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue' 2 | 3 | export const SignProps = { 4 | //签名颜色 5 | color: { 6 | type: String, 7 | default: null // '#505050' 8 | }, 9 | //背景色 10 | background: { 11 | type: String, 12 | default: null // '#fff' 13 | }, 14 | //字体粗细 px值 15 | width: { 16 | type: Number, 17 | default: 0.05 18 | } 19 | } 20 | 21 | export type SignPropsType = ExtractPublicPropTypes 22 | -------------------------------------------------------------------------------- /lib/components/step/step.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { 2 | default?(_: {}): any; 3 | }>; 4 | export default _default; 5 | type __VLS_WithTemplateSlots = T & { 6 | new (): { 7 | $slots: S; 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /packages/components/actionsheet/test.vue: -------------------------------------------------------------------------------- 1 | 7 | 19 | 20 | -------------------------------------------------------------------------------- /lib/components/carousel-item/carousel-item.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, {}, {}>, { 2 | default?(_: {}): any; 3 | }>; 4 | export default _default; 5 | type __VLS_WithTemplateSlots = T & { 6 | new (): { 7 | $slots: S; 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /lib/components/sign/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue'; 2 | 3 | export declare const SignProps: { 4 | color: { 5 | type: StringConstructor; 6 | default: null; 7 | }; 8 | background: { 9 | type: StringConstructor; 10 | default: null; 11 | }; 12 | width: { 13 | type: NumberConstructor; 14 | default: number; 15 | }; 16 | }; 17 | export type SignPropsType = ExtractPublicPropTypes; 18 | -------------------------------------------------------------------------------- /lib/directives/px/px.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 1px适配实现 3 | */ 4 | export type PxOptionsType = { 5 | attr?: string; 6 | after?: boolean; 7 | before?: boolean; 8 | }; 9 | declare class Px { 10 | private $el; 11 | private attr?; 12 | private isAfter?; 13 | private isBefore?; 14 | private hasInit; 15 | constructor(element: HTMLElement, options: PxOptionsType); 16 | private handle; 17 | private createGuid; 18 | init(): void; 19 | } 20 | export default Px; 21 | -------------------------------------------------------------------------------- /packages/components/overlay/overlay.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-overlay { 4 | display: block; 5 | background-color: var(--mvi-overlay); 6 | overflow: hidden; 7 | position: absolute; 8 | top: 0; 9 | left: 0; 10 | width: 100%; 11 | height: 100%; 12 | border-radius: inherit; 13 | } 14 | 15 | .mvi-overlay-fade-enter-from, 16 | .mvi-overlay-fade-leave-to { 17 | opacity: 0; 18 | } 19 | 20 | .mvi-overlay-fade-enter-to, 21 | .mvi-overlay-fade-leave-from { 22 | opacity: 1; 23 | } 24 | -------------------------------------------------------------------------------- /lib/components/cell-group/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue'; 2 | 3 | export declare const CellGroupProps: { 4 | title: { 5 | type: StringConstructor; 6 | default: null; 7 | }; 8 | border: { 9 | type: BooleanConstructor; 10 | default: boolean; 11 | }; 12 | active: { 13 | type: BooleanConstructor; 14 | default: boolean; 15 | }; 16 | }; 17 | export type CellGroupPropsType = ExtractPublicPropTypes; 18 | -------------------------------------------------------------------------------- /packages/components/tabbar/tabbar.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-tabbar { 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | width: 100%; 8 | height: @mini-height * 2; 9 | background-color: var(--mvi-bg-color-common); 10 | padding: 0 @mp-xs; 11 | color: var(--mvi-font-color-default); 12 | 13 | &.border { 14 | border-top: 1px solid var(--mvi-border-color); 15 | } 16 | 17 | &.fixed { 18 | position: fixed; 19 | bottom: 0; 20 | left: 0; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/components/roll/roll.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-roll-container { 4 | display: block; 5 | width: 100%; 6 | position: relative; 7 | overflow: hidden; 8 | cursor: pointer; 9 | 10 | .mvi-roll { 11 | position: absolute; 12 | left: 100%; 13 | top: 100%; 14 | white-space: nowrap; 15 | 16 | &.vertical { 17 | left: 0; 18 | 19 | &.center { 20 | left: 50%; 21 | transform: translateX(-50%); 22 | } 23 | } 24 | 25 | &.horizontal { 26 | top: 0; 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/directives/scroll/index.ts: -------------------------------------------------------------------------------- 1 | import Dap from 'dap-util' 2 | import { withInstallDirective } from '@/utils' 3 | import Scroll from './scroll' 4 | export type * from './scroll' 5 | 6 | const vScroll = withInstallDirective('scroll', { 7 | mounted(el, binding) { 8 | const options = {} 9 | if (Dap.common.isObject(binding.value)) { 10 | Object.assign(options, binding.value) 11 | } 12 | const scroll = new Scroll(el, options) 13 | scroll.init() 14 | } 15 | }) 16 | 17 | export { Scroll, vScroll, vScroll as default } 18 | -------------------------------------------------------------------------------- /packages/directives/anchor/index.ts: -------------------------------------------------------------------------------- 1 | import Dap from 'dap-util' 2 | import { withInstallDirective } from '@/utils' 3 | import Anchor from './anchor' 4 | export type * from './anchor' 5 | 6 | const vAnchor = withInstallDirective('anchor', { 7 | mounted(el, binding) { 8 | const options: any = {} 9 | if (Dap.common.isObject(binding.value)) { 10 | Object.assign(options, binding.value) 11 | } 12 | const anchor = new Anchor(el, options) 13 | anchor.init() 14 | } 15 | }) 16 | 17 | export { Anchor, vAnchor, vAnchor as default } 18 | -------------------------------------------------------------------------------- /lib/directives/anchor/anchor.d.ts: -------------------------------------------------------------------------------- 1 | export type AnchorOptionsType = { 2 | target?: HTMLElement | string; 3 | root?: HTMLElement | string; 4 | time?: number; 5 | distance?: number; 6 | callback?: (top: number) => void; 7 | }; 8 | /** 9 | * 锚点定位 10 | */ 11 | export default class Anchor { 12 | private $el; 13 | private $target?; 14 | private $root?; 15 | private callback?; 16 | private time?; 17 | private distance?; 18 | private hasInit; 19 | constructor(element: HTMLElement, options: AnchorOptionsType); 20 | init(): void; 21 | } 22 | -------------------------------------------------------------------------------- /packages/components/icon/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue' 2 | 3 | export const IconProps = { 4 | //图标类型 5 | type: { 6 | type: String, 7 | default: '' 8 | }, 9 | //是否旋转 10 | spin: { 11 | type: Boolean, 12 | default: false 13 | }, 14 | //图标的图片链接 15 | url: { 16 | type: String, 17 | default: null 18 | }, 19 | //图标尺寸 20 | size: { 21 | type: String, 22 | default: null 23 | }, 24 | //图标颜色 25 | color: { 26 | type: String, 27 | default: null 28 | } 29 | } 30 | 31 | export type IconPropsType = ExtractPublicPropTypes 32 | -------------------------------------------------------------------------------- /lib/components/loading/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | 3 | export declare const LoadingProps: { 4 | type: { 5 | type: PropType<"default" | "circle" | "spin" | "dots" | "transfer">; 6 | default: string; 7 | validator(value: any): boolean; 8 | }; 9 | color: { 10 | type: StringConstructor; 11 | default: null; 12 | }; 13 | size: { 14 | type: StringConstructor; 15 | default: string; 16 | }; 17 | }; 18 | export type LoadingPropsType = ExtractPublicPropTypes; 19 | -------------------------------------------------------------------------------- /lib/components/toast/index.d.ts: -------------------------------------------------------------------------------- 1 | import { App, ComponentInternalInstance } from 'vue'; 2 | import { ToastPropsType } from './props'; 3 | 4 | export type * from './props'; 5 | type ToastType = { 6 | $el?: HTMLElement; 7 | $instance?: App; 8 | $vm?: ComponentInternalInstance; 9 | initParams: (options: string | ToastPropsType) => ToastPropsType; 10 | install: (app: App) => void; 11 | showToast: (options: string | ToastPropsType) => Promise; 12 | hideToast: () => void; 13 | }; 14 | declare const Toast: ToastType; 15 | export { Toast, Toast as default }; 16 | -------------------------------------------------------------------------------- /lib/components/notify/index.d.ts: -------------------------------------------------------------------------------- 1 | import { App, ComponentInternalInstance } from 'vue'; 2 | import { NotifyPropsType } from './props'; 3 | 4 | export type * from './props'; 5 | type NotifyType = { 6 | $el?: HTMLElement; 7 | $instance?: App; 8 | $vm?: ComponentInternalInstance; 9 | initParams: (options: string | NotifyPropsType) => NotifyPropsType; 10 | install: (app: App) => void; 11 | showNotify: (options: NotifyPropsType) => Promise; 12 | hideNotify: () => void; 13 | }; 14 | declare const Notify: NotifyType; 15 | export { Notify, Notify as default }; 16 | -------------------------------------------------------------------------------- /packages/components/button/test.vue: -------------------------------------------------------------------------------- 1 | 9 | 13 | 14 | -------------------------------------------------------------------------------- /packages/components/form-el/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue' 2 | 3 | export const FormElProps = { 4 | //垂直对齐方式 5 | align: { 6 | type: String, 7 | default: null 8 | }, 9 | //宽度 10 | width: { 11 | type: String, 12 | default: null 13 | }, 14 | //标签内容 15 | label: { 16 | type: String, 17 | default: '' 18 | }, 19 | //标签宽度 20 | labelWidth: { 21 | type: String, 22 | default: null 23 | }, 24 | //标签距离右侧距离 25 | labelOffset: { 26 | type: String, 27 | default: null 28 | } 29 | } 30 | 31 | export type FormElPropsType = ExtractPublicPropTypes 32 | -------------------------------------------------------------------------------- /packages/components/divider/divider.vue: -------------------------------------------------------------------------------- 1 | 10 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /packages/components/loading/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | 3 | export const LoadingProps = { 4 | //类型 5 | type: { 6 | type: String as PropType<'default' | 'circle' | 'dots' | 'spin' | 'transfer'>, 7 | default: 'default', 8 | validator(value: any) { 9 | return ['default', 'circle', 'dots', 'spin', 'transfer'].includes(value) 10 | } 11 | }, 12 | //颜色 13 | color: { 14 | type: String, 15 | default: null 16 | }, 17 | //尺寸 18 | size: { 19 | type: String, 20 | default: '0.6rem' 21 | } 22 | } 23 | 24 | export type LoadingPropsType = ExtractPublicPropTypes 25 | -------------------------------------------------------------------------------- /packages/directives/upload/index.ts: -------------------------------------------------------------------------------- 1 | import Dap from 'dap-util' 2 | import { withInstallDirective } from '@/utils' 3 | import Upload from './upload' 4 | export type * from './upload' 5 | 6 | const vUpload = withInstallDirective('upload', { 7 | mounted(el, binding) { 8 | const options = {} 9 | if (Dap.common.isObject(binding.value)) { 10 | Object.assign(options, binding.value) 11 | } 12 | if (Dap.common.isObject(binding.modifiers)) { 13 | Object.assign(options, binding.modifiers) 14 | } 15 | const upload = new Upload(el, options) 16 | upload.init() 17 | } 18 | }) 19 | 20 | export { Upload, vUpload, vUpload as default } 21 | -------------------------------------------------------------------------------- /lib/components/loading-bar/index.d.ts: -------------------------------------------------------------------------------- 1 | import { App, ComponentInternalInstance } from 'vue'; 2 | import { LoadingBarPropsType } from './props'; 3 | 4 | export type * from './props'; 5 | type LoadingBarType = { 6 | $el?: HTMLElement; 7 | $instance?: App; 8 | $vm?: ComponentInternalInstance; 9 | initParams: (options: string | LoadingBarPropsType) => LoadingBarPropsType; 10 | install: (app: App) => void; 11 | showLoadingBar: (options: string | LoadingBarPropsType) => Promise; 12 | hideLoadingBar: () => void; 13 | }; 14 | declare const LoadingBar: LoadingBarType; 15 | export { LoadingBar, LoadingBar as default }; 16 | -------------------------------------------------------------------------------- /lib/components/row/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | 3 | export declare const RowProps: { 4 | justify: { 5 | type: PropType<"flex-start" | "flex-end" | "space-around" | "space-between">; 6 | default: string; 7 | validator(value: any): boolean; 8 | }; 9 | align: { 10 | type: PropType<"center" | "flex-start" | "flex-end">; 11 | default: string; 12 | validator(value: any): boolean; 13 | }; 14 | tag: { 15 | type: StringConstructor; 16 | default: string; 17 | }; 18 | }; 19 | export type RowPropsType = ExtractPublicPropTypes; 20 | -------------------------------------------------------------------------------- /lib/components/icon/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue'; 2 | 3 | export declare const IconProps: { 4 | type: { 5 | type: StringConstructor; 6 | default: string; 7 | }; 8 | spin: { 9 | type: BooleanConstructor; 10 | default: boolean; 11 | }; 12 | url: { 13 | type: StringConstructor; 14 | default: null; 15 | }; 16 | size: { 17 | type: StringConstructor; 18 | default: null; 19 | }; 20 | color: { 21 | type: StringConstructor; 22 | default: null; 23 | }; 24 | }; 25 | export type IconPropsType = ExtractPublicPropTypes; 26 | -------------------------------------------------------------------------------- /packages/directives/px/index.ts: -------------------------------------------------------------------------------- 1 | import Dap from 'dap-util' 2 | import { withInstallDirective } from '@/utils' 3 | import Px from './px' 4 | export type * from './px' 5 | 6 | const vPx = withInstallDirective('px', { 7 | mounted(el, binding) { 8 | const options: any = {} 9 | if (Dap.common.isObject(binding.value)) { 10 | Object.assign(options, binding.value) 11 | } 12 | if (Dap.common.isObject(binding.modifiers)) { 13 | Object.assign(options, binding.modifiers) 14 | } 15 | if (binding.arg) { 16 | options.attr = binding.arg 17 | } 18 | const px = new Px(el, options) 19 | px.init() 20 | } 21 | }) 22 | 23 | export { Px, vPx, vPx as default } 24 | -------------------------------------------------------------------------------- /packages/components/layer/layer.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-layer { 4 | position: fixed; 5 | z-index: 400; 6 | 7 | .mvi-layer-wrapper { 8 | display: block; 9 | position: relative; 10 | width: 100%; 11 | border-radius: @radius-default; 12 | background: var(--mvi-bg-color-common); 13 | 14 | &.shadow { 15 | box-shadow: var(--mvi-boxshadow); 16 | } 17 | 18 | &.border { 19 | border: 1px solid var(--mvi-border-color); 20 | } 21 | 22 | .mvi-layer-triangle { 23 | position: absolute; 24 | } 25 | } 26 | } 27 | 28 | .mvi-layer-enter-from, 29 | .mvi-layer-leave-to { 30 | opacity: 0; 31 | transform: translateY(0.6rem); 32 | } 33 | -------------------------------------------------------------------------------- /packages/components/form-el/form-el.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-form-el { 4 | display: flex; 5 | justify-content: flex-start; 6 | align-items: center; 7 | flex-wrap: wrap; 8 | width: 6.4rem; 9 | padding: @mp-sm; 10 | 11 | &.block { 12 | width: 100%; 13 | } 14 | } 15 | 16 | .mvi-form-label { 17 | display: block; 18 | width: 1.2rem; 19 | text-align: right; 20 | margin: 0 @mp-lg 0 0; 21 | color: var(--mvi-font-color-default); 22 | font-weight: bold; 23 | 24 | &.block { 25 | width: 100%; 26 | text-align: left; 27 | margin: 0 0 @mp-sm 0; 28 | } 29 | } 30 | 31 | .mvi-form-container { 32 | display: block; 33 | width: 100%; 34 | flex: 1; 35 | } 36 | -------------------------------------------------------------------------------- /lib/components/form-el/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue'; 2 | 3 | export declare const FormElProps: { 4 | align: { 5 | type: StringConstructor; 6 | default: null; 7 | }; 8 | width: { 9 | type: StringConstructor; 10 | default: null; 11 | }; 12 | label: { 13 | type: StringConstructor; 14 | default: string; 15 | }; 16 | labelWidth: { 17 | type: StringConstructor; 18 | default: null; 19 | }; 20 | labelOffset: { 21 | type: StringConstructor; 22 | default: null; 23 | }; 24 | }; 25 | export type FormElPropsType = ExtractPublicPropTypes; 26 | -------------------------------------------------------------------------------- /lib/components/triangle/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | 3 | export declare const TriangleProps: { 4 | background: { 5 | type: StringConstructor; 6 | default: null; 7 | }; 8 | borderColor: { 9 | type: StringConstructor; 10 | default: null; 11 | }; 12 | size: { 13 | type: StringConstructor; 14 | default: string; 15 | }; 16 | placement: { 17 | type: PropType<"left" | "top" | "bottom" | "right">; 18 | default: string; 19 | validator(value: any): boolean; 20 | }; 21 | }; 22 | export type TrianglePropsType = ExtractPublicPropTypes; 23 | -------------------------------------------------------------------------------- /packages/components/form/form.vue: -------------------------------------------------------------------------------- 1 | 6 | 24 | 25 | -------------------------------------------------------------------------------- /lib/components/loading-bar/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ComponentInternalInstance, ExtractPublicPropTypes, PropType } from 'vue'; 2 | 3 | export declare const LoadingBarProps: { 4 | color: { 5 | type: StringConstructor; 6 | default: null; 7 | }; 8 | zIndex: { 9 | type: NumberConstructor; 10 | default: null; 11 | }; 12 | __remove: { 13 | type: PropType<() => void>; 14 | default: () => () => void; 15 | }; 16 | __init: { 17 | type: PropType<(vm: ComponentInternalInstance) => void>; 18 | default: () => () => void; 19 | }; 20 | }; 21 | export type LoadingBarPropsType = ExtractPublicPropTypes; 22 | -------------------------------------------------------------------------------- /packages/components/triangle/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | 3 | export const TriangleProps = { 4 | //背景色 5 | background: { 6 | type: String, 7 | default: null 8 | }, 9 | //边框颜色 10 | borderColor: { 11 | type: String, 12 | default: null 13 | }, 14 | //大小 15 | size: { 16 | type: String, 17 | default: '0.14rem' 18 | }, 19 | //位置 20 | placement: { 21 | type: String as PropType<'top' | 'left' | 'right' | 'bottom'>, 22 | default: 'top', 23 | validator(value: any) { 24 | return ['top', 'left', 'right', 'bottom'].includes(value) 25 | } 26 | } 27 | } 28 | 29 | export type TrianglePropsType = ExtractPublicPropTypes 30 | -------------------------------------------------------------------------------- /lib/components/date-native-picker/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | 3 | export declare const DateNativePickerProps: { 4 | type: { 5 | type: PropType<"time" | "date" | "month" | "datetime">; 6 | default: string; 7 | validator(value: any): boolean; 8 | }; 9 | modelValue: { 10 | type: DateConstructor; 11 | default: null; 12 | }; 13 | max: { 14 | type: DateConstructor; 15 | default: null; 16 | }; 17 | min: { 18 | type: DateConstructor; 19 | default: null; 20 | }; 21 | }; 22 | export type DateNativePickerPropsType = ExtractPublicPropTypes; 23 | -------------------------------------------------------------------------------- /lib/components/tab/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | import { IconPropsType } from '../icon'; 3 | 4 | export declare const TabProps: { 5 | title: { 6 | type: StringConstructor; 7 | default: string; 8 | }; 9 | icon: { 10 | type: PropType; 11 | default: null; 12 | }; 13 | disabled: { 14 | type: BooleanConstructor; 15 | default: boolean; 16 | }; 17 | placement: { 18 | type: PropType<"left" | "right">; 19 | default: string; 20 | validator(value: any): boolean; 21 | }; 22 | }; 23 | export type TabPropsType = ExtractPublicPropTypes; 24 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | mvi-web-plus 9 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /packages/components/form/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue' 2 | 3 | export const FormProps = { 4 | //竖排显示时整个表单宽度 5 | width: { 6 | type: String, 7 | default: null 8 | }, 9 | //是否竖排显示 10 | block: { 11 | type: Boolean, 12 | default: false 13 | }, 14 | //同form-el的align 15 | align: { 16 | type: String, 17 | default: 'center' 18 | }, 19 | //竖排显示时标签是否独立一行 20 | labelBlock: { 21 | type: Boolean, 22 | default: false 23 | }, 24 | //标签宽度 25 | labelWidth: { 26 | type: String, 27 | default: null 28 | }, 29 | //标签距离右侧距离 30 | labelOffset: { 31 | type: String, 32 | default: null 33 | } 34 | } 35 | 36 | export type FormPropsType = ExtractPublicPropTypes 37 | -------------------------------------------------------------------------------- /packages/components/switch/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue' 2 | 3 | export const SwitchProps = { 4 | //是否勾选 5 | modelValue: { 6 | type: Boolean, 7 | default: false 8 | }, 9 | //是否显示加载状态 10 | loading: { 11 | type: Boolean, 12 | default: false 13 | }, 14 | //是否禁用 15 | disabled: { 16 | type: Boolean, 17 | default: false 18 | }, 19 | //尺寸大小 20 | size: { 21 | type: String, 22 | default: '0.4rem' 23 | }, 24 | //开关打开时背景色 25 | activeColor: { 26 | type: String, 27 | default: null 28 | }, 29 | //开关关闭时背景色 30 | inactiveColor: { 31 | type: String, 32 | default: null 33 | } 34 | } 35 | 36 | export type SwitchPropsType = ExtractPublicPropTypes 37 | -------------------------------------------------------------------------------- /packages/components/date-native-picker/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | 3 | export const DateNativePickerProps = { 4 | //选择的类型 5 | type: { 6 | type: String as PropType<'date' | 'datetime' | 'month' | 'time'>, 7 | default: 'date', 8 | validator(value: any) { 9 | return ['date', 'datetime', 'month', 'time'].includes(value) 10 | } 11 | }, 12 | //日期 13 | modelValue: { 14 | type: Date, 15 | default: null 16 | }, 17 | //最大日期 18 | max: { 19 | type: Date, 20 | default: null 21 | }, 22 | //最小日期 23 | min: { 24 | type: Date, 25 | default: null 26 | } 27 | } 28 | 29 | export type DateNativePickerPropsType = ExtractPublicPropTypes 30 | -------------------------------------------------------------------------------- /packages/components/tab/tab.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-tab { 4 | display: block; 5 | position: absolute; 6 | left: 0; 7 | top: 0; 8 | width: 100%; 9 | background-color: var(--mvi-bg-color-common); 10 | } 11 | 12 | .mvi-tab-fade-enter-from, 13 | .mvi-tab-fade-leave-to, 14 | .mvi-tab-fade-back-enter-from, 15 | .mvi-tab-fade-back-leave-to { 16 | opacity: 0; 17 | } 18 | 19 | .mvi-tab-slide-enter-from { 20 | left: 100%; 21 | opacity: 0; 22 | } 23 | 24 | .mvi-tab-slide-leave-to { 25 | left: -100%; 26 | opacity: 0; 27 | } 28 | 29 | .mvi-tab-slide-back-enter-from { 30 | left: -100%; 31 | opacity: 0; 32 | } 33 | 34 | .mvi-tab-slide-back-leave-to { 35 | left: 100%; 36 | opacity: 0; 37 | } 38 | -------------------------------------------------------------------------------- /packages/components/collapse-item/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | import { IconPropsType } from '@/components/icon' 3 | 4 | export const CollapseItemProps = { 5 | //标题栏左侧图标 6 | icon: { 7 | type: [String, Object] as PropType, 8 | default: null 9 | }, 10 | //标题 11 | title: { 12 | type: String, 13 | default: null 14 | }, 15 | //标题栏内容 16 | label: { 17 | type: String, 18 | default: null 19 | }, 20 | //是否禁用 21 | disabled: { 22 | type: Boolean, 23 | default: false 24 | }, 25 | //展开的内容 26 | content: { 27 | type: String, 28 | default: '' 29 | } 30 | } 31 | 32 | export type CollapseItemPropsType = ExtractPublicPropTypes 33 | -------------------------------------------------------------------------------- /packages/components/tab/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | import { IconPropsType } from '@/components/icon' 3 | 4 | export const TabProps = { 5 | //标题 6 | title: { 7 | type: String, 8 | default: '' 9 | }, 10 | //标题侧边显示的图标 11 | icon: { 12 | type: [String, Object] as PropType, 13 | default: null 14 | }, 15 | //是否禁用选项卡 16 | disabled: { 17 | type: Boolean, 18 | default: false 19 | }, 20 | //图标位置 21 | placement: { 22 | type: String as PropType<'left' | 'right'>, 23 | default: 'left', 24 | validator(value: any) { 25 | return ['left', 'right'].includes(value) 26 | } 27 | } 28 | } 29 | 30 | export type TabPropsType = ExtractPublicPropTypes 31 | -------------------------------------------------------------------------------- /packages/directives/spy/index.ts: -------------------------------------------------------------------------------- 1 | import Dap from 'dap-util' 2 | import { withInstallDirective } from '@/utils' 3 | import Spy from './spy' 4 | export type * from './spy' 5 | 6 | const vSpy = withInstallDirective('spy', { 7 | mounted(el, binding) { 8 | const options = {} 9 | if (Dap.common.isObject(binding.value)) { 10 | Object.assign(options, binding.value) 11 | } 12 | const spy = new Spy(el, options) 13 | //初始化 14 | spy.init() 15 | //将对象记录在元素里 16 | Dap.data.set(el, 'directive:spy', spy) 17 | }, 18 | beforeUnmount(el) { 19 | //获取对象 20 | const spy: Spy = Dap.data.get(el, 'directive:spy') 21 | if (spy) { 22 | //移除容器队列监听的滚动事件 23 | spy.destroy() 24 | } 25 | } 26 | }) 27 | 28 | export { Spy, vSpy, vSpy as default } 29 | -------------------------------------------------------------------------------- /packages/components/loading-bar/props.ts: -------------------------------------------------------------------------------- 1 | import { ComponentInternalInstance, ExtractPublicPropTypes, PropType } from 'vue' 2 | 3 | export const LoadingBarProps = { 4 | //进度条颜色 5 | color: { 6 | type: String, 7 | default: null 8 | }, 9 | //进度条层级 10 | zIndex: { 11 | type: Number, 12 | default: null 13 | }, 14 | //进度条移除方法 15 | __remove: { 16 | type: Function as PropType<() => void>, 17 | default: function () { 18 | return function () {} 19 | } 20 | }, 21 | //进度条初始化方法 22 | __init: { 23 | type: Function as PropType<(vm: ComponentInternalInstance) => void>, 24 | default: function () { 25 | return function () {} 26 | } 27 | } 28 | } 29 | 30 | export type LoadingBarPropsType = ExtractPublicPropTypes 31 | -------------------------------------------------------------------------------- /lib/directives/spy/spy.d.ts: -------------------------------------------------------------------------------- 1 | export type SpyOptionsType = { 2 | el?: HTMLElement | string; 3 | beforeEnter?: (...args: any) => void; 4 | enter?: (...args: any) => void; 5 | beforeLeave?: (...args: any) => void; 6 | leave?: (...args: any) => void; 7 | }; 8 | /** 9 | * 滚动侦听 10 | */ 11 | declare class Spy { 12 | private $el; 13 | private $root?; 14 | private beforeEnter?; 15 | private enter?; 16 | private beforeLeave?; 17 | private leave?; 18 | private hasInit; 19 | private triggerTag; 20 | private guid; 21 | constructor(element: HTMLElement, options: SpyOptionsType); 22 | private scrollHandle; 23 | private createGuid; 24 | init(): void; 25 | destroy(): void; 26 | } 27 | export default Spy; 28 | -------------------------------------------------------------------------------- /packages/directives/drag/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstallDirective } from '@/utils' 2 | import Dap from 'dap-util' 3 | import Drag from './drag' 4 | export type * from './drag' 5 | 6 | const vDrag = withInstallDirective('drag', { 7 | mounted(el, binding) { 8 | const options = {} 9 | if (Dap.common.isObject(binding.value)) { 10 | Object.assign(options, binding.value) 11 | } 12 | const drag = new Drag(el, options) 13 | //初始化 14 | drag.init() 15 | //将对象记录在元素里 16 | Dap.data.set(el, 'directive:drag', drag) 17 | }, 18 | beforeUnmount(el) { 19 | //获取对象 20 | const drag: Drag = Dap.data.get(el, 'directive:drag') 21 | if (drag) { 22 | //移除绑定在documentElement上的事件 23 | drag.destroy() 24 | } 25 | } 26 | }) 27 | 28 | export { Drag, vDrag, vDrag as default } 29 | -------------------------------------------------------------------------------- /lib/components/collapse-item/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | import { IconPropsType } from '../icon'; 3 | 4 | export declare const CollapseItemProps: { 5 | icon: { 6 | type: PropType; 7 | default: null; 8 | }; 9 | title: { 10 | type: StringConstructor; 11 | default: null; 12 | }; 13 | label: { 14 | type: StringConstructor; 15 | default: null; 16 | }; 17 | disabled: { 18 | type: BooleanConstructor; 19 | default: boolean; 20 | }; 21 | content: { 22 | type: StringConstructor; 23 | default: string; 24 | }; 25 | }; 26 | export type CollapseItemPropsType = ExtractPublicPropTypes; 27 | -------------------------------------------------------------------------------- /packages/components/cell-group/cell-group.vue: -------------------------------------------------------------------------------- 1 | 7 | 27 | 28 | -------------------------------------------------------------------------------- /lib/components/form/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue'; 2 | 3 | export declare const FormProps: { 4 | width: { 5 | type: StringConstructor; 6 | default: null; 7 | }; 8 | block: { 9 | type: BooleanConstructor; 10 | default: boolean; 11 | }; 12 | align: { 13 | type: StringConstructor; 14 | default: string; 15 | }; 16 | labelBlock: { 17 | type: BooleanConstructor; 18 | default: boolean; 19 | }; 20 | labelWidth: { 21 | type: StringConstructor; 22 | default: null; 23 | }; 24 | labelOffset: { 25 | type: StringConstructor; 26 | default: null; 27 | }; 28 | }; 29 | export type FormPropsType = ExtractPublicPropTypes; 30 | -------------------------------------------------------------------------------- /lib/directives/observe/observe.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 实现监听元素的属性变更 3 | */ 4 | export type ObserveOptionsType = { 5 | attributes?: boolean; 6 | childList?: boolean; 7 | subtree?: boolean; 8 | attributeNames?: Array; 9 | attributesChange?: (...args: any) => void; 10 | childNodesChange?: (...args: any) => void; 11 | }; 12 | declare class Observe { 13 | private $el; 14 | private attributes?; 15 | private childList?; 16 | private subtree?; 17 | private attributeNames?; 18 | private attributesChange?; 19 | private childNodesChange?; 20 | private hasInit; 21 | private mutationObserver; 22 | constructor(el: HTMLElement, options: ObserveOptionsType); 23 | init(): void; 24 | destroy(): void; 25 | } 26 | export default Observe; 27 | -------------------------------------------------------------------------------- /packages/directives/prop/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstallDirective } from '@/utils' 2 | import Dap from 'dap-util' 3 | import Prop from './prop' 4 | export type * from './prop' 5 | 6 | const vProp = withInstallDirective('prop', { 7 | mounted(el, binding) { 8 | const prop = new Prop(el, binding.value) 9 | prop.init() 10 | //将对象记录在元素里 11 | Dap.data.set(el, 'directive:prop', prop) 12 | }, 13 | updated(el, binding) { 14 | const prop = Dap.data.get(el, 'directive:prop') 15 | if (prop) { 16 | prop.set(binding.value) 17 | } 18 | }, 19 | beforeUnmount(el) { 20 | //获取对象 21 | const prop: Prop = Dap.data.get(el, 'directive:prop') 22 | if (prop) { 23 | //移除绑定在window上的事件 24 | prop.destroy() 25 | } 26 | } 27 | }) 28 | 29 | export { Prop, vProp, vProp as default } 30 | -------------------------------------------------------------------------------- /lib/components/switch/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue'; 2 | 3 | export declare const SwitchProps: { 4 | modelValue: { 5 | type: BooleanConstructor; 6 | default: boolean; 7 | }; 8 | loading: { 9 | type: BooleanConstructor; 10 | default: boolean; 11 | }; 12 | disabled: { 13 | type: BooleanConstructor; 14 | default: boolean; 15 | }; 16 | size: { 17 | type: StringConstructor; 18 | default: string; 19 | }; 20 | activeColor: { 21 | type: StringConstructor; 22 | default: null; 23 | }; 24 | inactiveColor: { 25 | type: StringConstructor; 26 | default: null; 27 | }; 28 | }; 29 | export type SwitchPropsType = ExtractPublicPropTypes; 30 | -------------------------------------------------------------------------------- /packages/components/radio/test.vue: -------------------------------------------------------------------------------- 1 | 10 | 30 | 31 | -------------------------------------------------------------------------------- /packages/components/row/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | 3 | export const RowProps = { 4 | //排列方式 5 | justify: { 6 | type: String as PropType<'flex-start' | 'flex-end' | 'space-around' | 'space-between'>, 7 | default: 'flex-start', 8 | validator(value: any) { 9 | return ['flex-start', 'flex-end', 'space-around', 'space-between'].includes(value) 10 | } 11 | }, 12 | //垂直对齐方式 13 | align: { 14 | type: String as PropType<'flex-start' | 'flex-end' | 'center'>, 15 | default: 'flex-start', 16 | validator(value: any) { 17 | return ['flex-start', 'flex-end', 'center'].includes(value) 18 | } 19 | }, 20 | //渲染标签 21 | tag: { 22 | type: String, 23 | default: 'div' 24 | } 25 | } 26 | 27 | export type RowPropsType = ExtractPublicPropTypes 28 | -------------------------------------------------------------------------------- /packages/directives/ripple/index.ts: -------------------------------------------------------------------------------- 1 | import Dap from 'dap-util' 2 | import { withInstallDirective } from '@/utils' 3 | import Ripple from './ripple' 4 | export type * from './ripple' 5 | 6 | const vRipple = withInstallDirective('ripple', { 7 | mounted(el, binding) { 8 | const options = {} 9 | if (Dap.common.isObject(binding.value)) { 10 | Object.assign(options, binding.value) 11 | } 12 | const ripple = new Ripple(el, options) 13 | //初始化 14 | ripple.init() 15 | //将对象记录在元素里 16 | Dap.data.set(el, 'directive:ripple', ripple) 17 | }, 18 | beforeUnmount(el) { 19 | //获取对象 20 | const ripple: Ripple = Dap.data.get(el, 'directive:ripple') 21 | if (ripple) { 22 | //移除绑定在documentElement上的事件 23 | ripple.destroy() 24 | } 25 | } 26 | }) 27 | export { Ripple, vRipple, vRipple as default } 28 | -------------------------------------------------------------------------------- /packages/components/divider/divider.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-divider { 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | color: var(--mvi-font-color-mute); 8 | user-select: none; 9 | 10 | .mvi-divider-left { 11 | flex: 1; 12 | display: block; 13 | height: 0px; 14 | border-top: 1px solid var(--mvi-border-color); 15 | } 16 | 17 | .mvi-divider-center { 18 | display: flex; 19 | justify-content: flex-start; 20 | align-items: center; 21 | margin: 0 @mp-sm; 22 | } 23 | 24 | .mvi-divider-right { 25 | flex: 1; 26 | display: block; 27 | height: 0px; 28 | border-top: 1px solid var(--mvi-border-color); 29 | } 30 | 31 | &.dashed > .mvi-divider-left, 32 | &.dashed > .mvi-divider-right { 33 | border-top-style: dashed; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/components/steps/steps.vue: -------------------------------------------------------------------------------- 1 | 6 | 30 | 31 | -------------------------------------------------------------------------------- /packages/directives/observe/index.ts: -------------------------------------------------------------------------------- 1 | import Dap from 'dap-util' 2 | import { withInstallDirective } from '@/utils' 3 | import Observe from './observe' 4 | export type * from './observe' 5 | 6 | const vObserve = withInstallDirective('observe', { 7 | mounted(el, binding) { 8 | const options = {} 9 | if (Dap.common.isObject(binding.value)) { 10 | Object.assign(options, binding.value) 11 | } 12 | const observe = new Observe(el, options) 13 | //初始化 14 | observe.init() 15 | //将对象记录在元素里 16 | Dap.data.set(el, 'directive:observe', observe) 17 | }, 18 | beforeUnmount(el) { 19 | //获取对象 20 | const observe: Observe = Dap.data.get(el, 'directive:observe') 21 | if (observe) { 22 | //取消监听 23 | observe.destroy() 24 | } 25 | } 26 | }) 27 | 28 | export { Observe, vObserve, vObserve as default } 29 | -------------------------------------------------------------------------------- /packages/directives/resize/index.ts: -------------------------------------------------------------------------------- 1 | import Dap from 'dap-util' 2 | import { withInstallDirective } from '@/utils' 3 | import Resize from './resize' 4 | export type * from './resize' 5 | 6 | const vResize = withInstallDirective('resize', { 7 | mounted(el, binding) { 8 | const options = {} 9 | if (Dap.common.isObject(binding.value)) { 10 | Object.assign(options, binding.value) 11 | } 12 | const resize = new Resize(el, options) 13 | //初始化 14 | resize.init() 15 | //将对象记录在元素里 16 | Dap.data.set(el, 'directive:resize', resize) 17 | }, 18 | beforeUnmount(el) { 19 | //获取对象 20 | const resize: Resize = Dap.data.get(el, 'directive:resize') 21 | if (resize) { 22 | //移除绑定在documentElement上的事件 23 | resize.destroy() 24 | } 25 | } 26 | }) 27 | 28 | export { Resize, vResize, vResize as default } 29 | -------------------------------------------------------------------------------- /packages/components/pull-refresh/pull-refresh.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-pull-refresh { 4 | display: block; 5 | width: 100%; 6 | height: 100vh; 7 | position: relative; 8 | overflow: hidden; 9 | 10 | .mvi-pull-refresh-container { 11 | display: block; 12 | width: 100%; 13 | position: relative; 14 | overflow: hidden; 15 | 16 | .mvi-pull-refresh-wrapper { 17 | display: block; 18 | position: relative; 19 | width: 100%; 20 | overflow-x: hidden; 21 | overflow-y: auto; 22 | } 23 | 24 | .mvi-pull-refresh-el { 25 | display: flex; 26 | justify-content: center; 27 | align-items: center; 28 | color: var(--mvi-font-color-sub); 29 | width: 100%; 30 | padding: @mp-lg 0; 31 | 32 | .mvi-pull-refresh-text { 33 | margin-left: @mp-xs; 34 | } 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /packages/components/checkbox/test.vue: -------------------------------------------------------------------------------- 1 | 10 | 30 | 31 | -------------------------------------------------------------------------------- /example/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 按钮 16 |
17 | 18 | 31 | 32 | -------------------------------------------------------------------------------- /packages/components/collapse/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue' 2 | 3 | export const CollapseProps = { 4 | //默认展开的面板索引 5 | modelValue: { 6 | type: [Number, Array], 7 | default: null 8 | }, 9 | //是否手风琴模式 10 | accordion: { 11 | type: Boolean, 12 | default: false 13 | }, 14 | //是否显示每个面板的内下边框 15 | inBorder: { 16 | type: Boolean, 17 | default: true 18 | }, 19 | //是否展示每个面板的外下边框 20 | outBorder: { 21 | type: Boolean, 22 | default: true 23 | }, 24 | //是否禁用 25 | disabled: { 26 | type: Boolean, 27 | default: false 28 | }, 29 | //点击标题栏是否显示点击态 30 | active: { 31 | type: Boolean, 32 | default: true 33 | }, 34 | //是否对标题栏的标题和内容使用单行限制 35 | noWrap: { 36 | type: Boolean, 37 | default: false 38 | } 39 | } 40 | 41 | export type CollapsePropsType = ExtractPublicPropTypes 42 | -------------------------------------------------------------------------------- /packages/components/swipe-cell/swipe-cell.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-swipe-cell { 4 | display: block; 5 | width: 100%; 6 | position: relative; 7 | overflow: hidden; 8 | 9 | .mvi-swipe-cell-wrapper { 10 | display: block; 11 | width: 100%; 12 | position: relative; 13 | 14 | .mvi-swipe-cell-left { 15 | display: block; 16 | position: absolute; 17 | right: 100%; 18 | top: 0; 19 | height: 100%; 20 | z-index: 1; 21 | overflow: hidden; 22 | } 23 | 24 | .mvi-swipe-cell-right { 25 | display: block; 26 | position: absolute; 27 | left: 100%; 28 | top: 0; 29 | height: 100%; 30 | z-index: 1; 31 | overflow: hidden; 32 | } 33 | 34 | .mvi-swipe-cell-center { 35 | display: block; 36 | width: 100%; 37 | position: relative; 38 | overflow: hidden; 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /packages/components/msgbox/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | 3 | export const MsgboxProps = { 4 | //提示文本 5 | message: { 6 | type: String, 7 | default: null 8 | }, 9 | //动画效果 10 | animation: { 11 | type: String, 12 | default: null 13 | }, 14 | //自动关闭的时间 15 | timeout: { 16 | type: Number, 17 | default: null 18 | }, 19 | //弹窗z-index 20 | zIndex: { 21 | type: Number, 22 | default: null 23 | }, 24 | //弹窗背景色 25 | background: { 26 | type: String, 27 | default: null 28 | }, 29 | //弹窗字体颜色 30 | color: { 31 | type: String, 32 | default: null 33 | }, 34 | //移除方法 35 | __remove: { 36 | type: Function as PropType<() => void>, 37 | default: function () { 38 | return function () {} 39 | } 40 | } 41 | } 42 | 43 | export type MsgboxPropsType = ExtractPublicPropTypes 44 | -------------------------------------------------------------------------------- /packages/components/steps/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | import { IconPropsType } from '@/components/icon' 3 | 4 | export const StepsProps = { 5 | //当前步骤 6 | active: { 7 | type: Number, 8 | default: 0 9 | }, 10 | //是否垂直 11 | vertical: { 12 | type: Boolean, 13 | default: false 14 | }, 15 | //激活状态的颜色 16 | activeColor: { 17 | type: String, 18 | default: null 19 | }, 20 | //未激活状态的颜色 21 | inactiveColor: { 22 | type: String, 23 | default: null 24 | }, 25 | //激活状态的图标 26 | activeIcon: { 27 | type: [String, Object] as PropType, 28 | default: 'success-o' 29 | }, 30 | //未激活状态的图标 31 | inactiveIcon: { 32 | type: [String, Object] as PropType, 33 | default: null 34 | } 35 | } 36 | 37 | export type StepsPropsType = ExtractPublicPropTypes 38 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | "allowSyntheticDefaultImports": true, 9 | "types": ["node"], 10 | "baseUrl": "./", 11 | "paths": { 12 | "@/*": ["packages/*"] 13 | }, 14 | 15 | /* Bundler mode */ 16 | "moduleResolution": "bundler", 17 | "allowImportingTsExtensions": true, 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "preserve", 22 | 23 | /* Linting */ 24 | "strict": true, 25 | "noUnusedLocals": true, 26 | "noUnusedParameters": true, 27 | "noFallthroughCasesInSwitch": true 28 | }, 29 | "include": ["packages/**/*.ts", "packages/**/*.vue", "vite-env.d.ts"], 30 | "references": [{ "path": "./tsconfig.node.json" }] 31 | } 32 | -------------------------------------------------------------------------------- /lib/components/steps/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | import { IconPropsType } from '../icon'; 3 | 4 | export declare const StepsProps: { 5 | active: { 6 | type: NumberConstructor; 7 | default: number; 8 | }; 9 | vertical: { 10 | type: BooleanConstructor; 11 | default: boolean; 12 | }; 13 | activeColor: { 14 | type: StringConstructor; 15 | default: null; 16 | }; 17 | inactiveColor: { 18 | type: StringConstructor; 19 | default: null; 20 | }; 21 | activeIcon: { 22 | type: PropType; 23 | default: string; 24 | }; 25 | inactiveIcon: { 26 | type: PropType; 27 | default: null; 28 | }; 29 | }; 30 | export type StepsPropsType = ExtractPublicPropTypes; 31 | -------------------------------------------------------------------------------- /lib/components/msgbox/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | 3 | export declare const MsgboxProps: { 4 | message: { 5 | type: StringConstructor; 6 | default: null; 7 | }; 8 | animation: { 9 | type: StringConstructor; 10 | default: null; 11 | }; 12 | timeout: { 13 | type: NumberConstructor; 14 | default: null; 15 | }; 16 | zIndex: { 17 | type: NumberConstructor; 18 | default: null; 19 | }; 20 | background: { 21 | type: StringConstructor; 22 | default: null; 23 | }; 24 | color: { 25 | type: StringConstructor; 26 | default: null; 27 | }; 28 | __remove: { 29 | type: PropType<() => void>; 30 | default: () => () => void; 31 | }; 32 | }; 33 | export type MsgboxPropsType = ExtractPublicPropTypes; 34 | -------------------------------------------------------------------------------- /packages/components/badge/test.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /packages/components/row/row.vue: -------------------------------------------------------------------------------- 1 | 6 | 38 | 39 | -------------------------------------------------------------------------------- /lib/components/divider/divider.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 20 | color: string; 21 | dashed: boolean; 22 | }, {}>, { 23 | default?(_: {}): any; 24 | }>; 25 | export default _default; 26 | type __VLS_WithTemplateSlots = T & { 27 | new (): { 28 | $slots: S; 29 | }; 30 | }; 31 | -------------------------------------------------------------------------------- /lib/components/collapse/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue'; 2 | 3 | export declare const CollapseProps: { 4 | modelValue: { 5 | type: (NumberConstructor | ArrayConstructor)[]; 6 | default: null; 7 | }; 8 | accordion: { 9 | type: BooleanConstructor; 10 | default: boolean; 11 | }; 12 | inBorder: { 13 | type: BooleanConstructor; 14 | default: boolean; 15 | }; 16 | outBorder: { 17 | type: BooleanConstructor; 18 | default: boolean; 19 | }; 20 | disabled: { 21 | type: BooleanConstructor; 22 | default: boolean; 23 | }; 24 | active: { 25 | type: BooleanConstructor; 26 | default: boolean; 27 | }; 28 | noWrap: { 29 | type: BooleanConstructor; 30 | default: boolean; 31 | }; 32 | }; 33 | export type CollapsePropsType = ExtractPublicPropTypes; 34 | -------------------------------------------------------------------------------- /packages/components/icon/icon.vue: -------------------------------------------------------------------------------- 1 | 5 | 34 | 35 | -------------------------------------------------------------------------------- /packages/components/circle-progress/circle-progress.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-circle-progress { 4 | display: inline-block; 5 | position: relative; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | .mvi-circle-progress > svg { 11 | width: 100%; 12 | height: 100%; 13 | overflow: hidden; 14 | } 15 | 16 | .mvi-circle-progress-track { 17 | fill: none; 18 | stroke: var(--mvi-bg-color-dark); 19 | margin: 0; 20 | padding: 0; 21 | } 22 | 23 | .mvi-circle-progress-bar { 24 | fill: none; 25 | stroke: var(--mvi-info-normal); 26 | margin: 0; 27 | padding: 0; 28 | stroke-linecap: square; 29 | } 30 | 31 | .mvi-circle-progress-tip { 32 | display: inline-block; 33 | position: absolute; 34 | top: 50%; 35 | left: 50%; 36 | transform: translate(-50%, -50%); 37 | width: 100%; 38 | font-size: @font-size-default; 39 | color: var(--mvi-font-color-sub); 40 | line-height: 1.5; 41 | text-align: center; 42 | z-index: 10; 43 | } 44 | -------------------------------------------------------------------------------- /packages/components/overlay/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue' 2 | 3 | export const OverlayProps = { 4 | //挂载元素 5 | mountEl: { 6 | type: String, 7 | default: null 8 | }, 9 | //遮罩层z-index 10 | zIndex: { 11 | type: Number, 12 | default: 800 13 | }, 14 | //遮罩层颜色 15 | color: { 16 | type: String, 17 | default: null 18 | }, 19 | //是否显示遮罩层 20 | modelValue: { 21 | type: Boolean, 22 | default: false 23 | }, 24 | //是否渐变 25 | fade: { 26 | type: Boolean, 27 | default: true 28 | }, 29 | //动画时间 30 | timeout: { 31 | type: Number, 32 | default: 200, 33 | validator(value: any) { 34 | return value >= 0 35 | } 36 | }, 37 | //是否点击可关闭 38 | closable: { 39 | type: Boolean, 40 | default: false 41 | }, 42 | //是否考虑PC滚动条（设置padding距离占位） 43 | usePadding: { 44 | type: Boolean, 45 | default: false 46 | } 47 | } 48 | 49 | export type OverlayPropsType = ExtractPublicPropTypes 50 | -------------------------------------------------------------------------------- /lib/directives/ripple/ripple.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 水波纹效果 3 | */ 4 | export type RippleOptionsType = { 5 | color?: string; 6 | duration?: number; 7 | finalOpacity?: number; 8 | initialOpacity?: number; 9 | delay?: number; 10 | disabled?: boolean; 11 | }; 12 | declare class Ripple { 13 | private $el; 14 | private color?; 15 | private duration?; 16 | private finalOpacity?; 17 | private initialOpacity?; 18 | private delay?; 19 | private disabled?; 20 | private hasInit; 21 | private initColor?; 22 | private observe; 23 | private isSupportTouch; 24 | private guid; 25 | private rippleContainers; 26 | constructor(element: HTMLElement, options: RippleOptionsType); 27 | private endDeal; 28 | private createRippleElement; 29 | private createRippleContainer; 30 | private getRadius; 31 | private createGuid; 32 | init(): void; 33 | destroy(): void; 34 | } 35 | export default Ripple; 36 | -------------------------------------------------------------------------------- /packages/components/list/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue' 2 | 3 | export const ListProps = { 4 | //是否加载状态 5 | loading: { 6 | type: Boolean, 7 | default: false 8 | }, 9 | //是否错误状态 10 | error: { 11 | type: Boolean, 12 | default: false 13 | }, 14 | //是否完成状态 15 | finished: { 16 | type: Boolean, 17 | default: false 18 | }, 19 | //加载文案 20 | loadingText: { 21 | type: String, 22 | default: '正在加载' 23 | }, 24 | //错误文案 25 | errorText: { 26 | type: String, 27 | default: '数据加载失败' 28 | }, 29 | //完成文案 30 | finishedText: { 31 | type: String, 32 | default: '没有更多了' 33 | }, 34 | //初始化是否触发一次load 35 | immediateLoad: { 36 | type: Boolean, 37 | default: false 38 | }, 39 | //content内容 40 | content: { 41 | type: String, 42 | default: '点我加载更多' 43 | }, 44 | //滚动元素 45 | scrollEl: { 46 | type: String, 47 | default: null 48 | } 49 | } 50 | 51 | export type ListPropsType = ExtractPublicPropTypes 52 | -------------------------------------------------------------------------------- /example/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 26 | 27 | 43 | -------------------------------------------------------------------------------- /packages/components/navbar/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | import { IconPropsType } from '@/components/icon' 3 | 4 | export const NavbarProps = { 5 | //标题 6 | title: { 7 | type: String, 8 | default: null 9 | }, 10 | //左侧文本 11 | leftText: { 12 | type: String, 13 | default: null 14 | }, 15 | //右侧文本 16 | rightText: { 17 | type: String, 18 | default: null 19 | }, 20 | //左侧图标 21 | leftIcon: { 22 | type: [String, Object] as PropType, 23 | default: null 24 | }, 25 | //右侧图标 26 | rightIcon: { 27 | type: [String, Object] as PropType, 28 | default: null 29 | }, 30 | //是否固定顶部 31 | fixed: { 32 | type: Boolean, 33 | default: false 34 | }, 35 | //是否显示下边框 36 | border: { 37 | type: Boolean, 38 | default: false 39 | }, 40 | //层级 41 | zIndex: { 42 | type: Number, 43 | default: 400 44 | } 45 | } 46 | 47 | export type NavbarPropsType = ExtractPublicPropTypes 48 | -------------------------------------------------------------------------------- /packages/components/slider/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue' 2 | 3 | export const SliderProps = { 4 | //当前值 5 | modelValue: { 6 | type: Number, 7 | default: 0 8 | }, 9 | //最小值 10 | min: { 11 | type: Number, 12 | default: 0 13 | }, 14 | //最大值 15 | max: { 16 | type: Number, 17 | default: 100 18 | }, 19 | //进度粗细 20 | strokeWidth: { 21 | type: String, 22 | default: '0.2rem' 23 | }, 24 | //激活的进度颜色 25 | color: { 26 | type: String, 27 | default: null 28 | }, 29 | //滑轨颜色 30 | trackColor: { 31 | type: String, 32 | default: null 33 | }, 34 | //是否禁用 35 | disabled: { 36 | type: Boolean, 37 | default: false 38 | }, 39 | //是否垂直 40 | vertical: { 41 | type: Boolean, 42 | default: false 43 | }, 44 | //滑动条是否显示圆形的圆角弧度 45 | round: { 46 | type: Boolean, 47 | default: false 48 | }, 49 | //滑动条是否不显示圆角弧度 50 | square: { 51 | type: Boolean, 52 | default: false 53 | } 54 | } 55 | 56 | export type SliderPropsType = ExtractPublicPropTypes 57 | -------------------------------------------------------------------------------- /lib/components/sign/sign.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: import('vue').DefineComponent<{ 2 | color: { 3 | type: StringConstructor; 4 | default: null; 5 | }; 6 | background: { 7 | type: StringConstructor; 8 | default: null; 9 | }; 10 | width: { 11 | type: NumberConstructor; 12 | default: number; 13 | }; 14 | }, { 15 | getImage: () => string; 16 | clear: () => void; 17 | }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly>, { 31 | width: number; 32 | color: string; 33 | background: string; 34 | }, {}>; 35 | export default _default; 36 | -------------------------------------------------------------------------------- /lib/components/color-picker/color-picker.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: import('vue').DefineComponent<{ 2 | modelValue: { 3 | type: StringConstructor; 4 | default: string; 5 | }; 6 | showAlpha: { 7 | type: BooleanConstructor; 8 | default: boolean; 9 | }; 10 | }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, { 11 | "update:modelValue": (...args: any[]) => void; 12 | change: (...args: any[]) => void; 13 | }, string, import('vue').PublicProps, Readonly> & { 23 | "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; 24 | onChange?: ((...args: any[]) => any) | undefined; 25 | }, { 26 | modelValue: string; 27 | showAlpha: boolean; 28 | }, {}>; 29 | export default _default; 30 | -------------------------------------------------------------------------------- /lib/components/dialog/index.d.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue'; 2 | import { DialogPcPropsType, DialogPropsType } from './props'; 3 | 4 | export type * from './props'; 5 | export type DialogType = { 6 | initParams: (type: DialogPropsType['type'] | DialogPcPropsType['type'], options: string | DialogPropsType | DialogPcPropsType) => DialogPropsType | DialogPcPropsType; 7 | install: (app: App) => void; 8 | alert: (options: string | DialogPropsType) => Promise; 9 | confirm: (options: string | DialogPropsType) => Promise; 10 | prompt: (options: string | DialogPropsType) => Promise<{ 11 | ok: boolean; 12 | value: string; 13 | }>; 14 | Alert: (options: string | DialogPcPropsType) => Promise; 15 | Confirm: (options: string | DialogPcPropsType) => Promise; 16 | Prompt: (options: string | DialogPcPropsType) => Promise<{ 17 | ok: boolean; 18 | value: string; 19 | }>; 20 | }; 21 | declare const Dialog: DialogType; 22 | export { Dialog, Dialog as default }; 23 | -------------------------------------------------------------------------------- /lib/components/overlay/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue'; 2 | 3 | export declare const OverlayProps: { 4 | mountEl: { 5 | type: StringConstructor; 6 | default: null; 7 | }; 8 | zIndex: { 9 | type: NumberConstructor; 10 | default: number; 11 | }; 12 | color: { 13 | type: StringConstructor; 14 | default: null; 15 | }; 16 | modelValue: { 17 | type: BooleanConstructor; 18 | default: boolean; 19 | }; 20 | fade: { 21 | type: BooleanConstructor; 22 | default: boolean; 23 | }; 24 | timeout: { 25 | type: NumberConstructor; 26 | default: number; 27 | validator(value: any): boolean; 28 | }; 29 | closable: { 30 | type: BooleanConstructor; 31 | default: boolean; 32 | }; 33 | usePadding: { 34 | type: BooleanConstructor; 35 | default: boolean; 36 | }; 37 | }; 38 | export type OverlayPropsType = ExtractPublicPropTypes; 39 | -------------------------------------------------------------------------------- /packages/components/collapse-item/collapse-item.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-collapse-item { 4 | display: block; 5 | width: 100%; 6 | overflow: hidden; 7 | background-color: inherit; 8 | position: relative; 9 | 10 | &[disabled] { 11 | opacity: 0.6; 12 | } 13 | 14 | &.border::after { 15 | display: block; 16 | position: absolute; 17 | left: 0; 18 | bottom: 0; 19 | content: ''; 20 | height: 0; 21 | border-bottom: 1px solid var(--mvi-border-color); 22 | width: 100%; 23 | box-sizing: content-box; 24 | } 25 | 26 | .mvi-collapse-cell { 27 | background-color: inherit; 28 | color: inherit; 29 | cursor: pointer; 30 | 31 | :deep(.mvi-cell-arrow) { 32 | transition: transform 200ms linear; 33 | } 34 | 35 | &.expand :deep(.mvi-cell-arrow) { 36 | transform: rotate(90deg); 37 | } 38 | } 39 | 40 | .mvi-collapse-content { 41 | display: block; 42 | width: 100%; 43 | padding: @mp-sm; 44 | font-size: @font-size-default; 45 | color: inherit; 46 | line-height: 1.5; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /packages/components/collapse/collapse.vue: -------------------------------------------------------------------------------- 1 | 6 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /lib/components/label/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | 3 | export declare const LabelProps: { 4 | type: { 5 | type: PropType<"default" | "info" | "success" | "warn" | "error" | "primary">; 6 | default: string; 7 | validator(value: any): boolean; 8 | }; 9 | size: { 10 | type: PropType<"medium" | "large">; 11 | default: string; 12 | validator(value: any): boolean; 13 | }; 14 | plain: { 15 | type: BooleanConstructor; 16 | default: boolean; 17 | }; 18 | round: { 19 | type: BooleanConstructor; 20 | default: boolean; 21 | }; 22 | mark: { 23 | type: BooleanConstructor; 24 | default: boolean; 25 | }; 26 | closable: { 27 | type: BooleanConstructor; 28 | default: boolean; 29 | }; 30 | reverse: { 31 | type: BooleanConstructor; 32 | default: boolean; 33 | }; 34 | }; 35 | export type LabelPropsType = ExtractPublicPropTypes; 36 | -------------------------------------------------------------------------------- /packages/components/progress/progress.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-progress { 4 | position: relative; 5 | display: block; 6 | width: 100%; 7 | height: 0.2rem; 8 | background-color: var(--mvi-bg-color-dark); 9 | border-radius: @radius-default; 10 | 11 | &.square { 12 | border-radius: 0; 13 | } 14 | 15 | &.round { 16 | border-radius: @radius-round; 17 | } 18 | 19 | .mvi-progress-bar { 20 | display: block; 21 | position: absolute; 22 | left: 0; 23 | top: 0; 24 | width: 100%; 25 | height: 100%; 26 | background-color: var(--mvi-info-normal); 27 | border-radius: inherit; 28 | border-top-right-radius: 0; 29 | border-bottom-right-radius: 0; 30 | } 31 | 32 | .mvi-progress-tooltip { 33 | position: absolute; 34 | display: flex; 35 | justify-content: center; 36 | align-items: center; 37 | right: 0; 38 | top: 50%; 39 | transform: translateY(-50%); 40 | width: auto; 41 | min-height: 100%; 42 | font-size: @font-size-small; 43 | color: #fff; 44 | padding-right: @mp-xs; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /lib/directives/drag/drag.d.ts: -------------------------------------------------------------------------------- 1 | export type DragOptionsType = { 2 | container?: HTMLElement | string; 3 | mode?: string; 4 | draggableX?: boolean; 5 | draggableY?: boolean; 6 | cursor?: boolean; 7 | beforeDrag?: (...args: any) => void; 8 | drag?: (...args: any) => void; 9 | dragged?: (...args: any) => void; 10 | ready?: (...args: any) => void; 11 | }; 12 | /** 13 | * Drag拖拽插件 14 | */ 15 | declare class Drag { 16 | private $el; 17 | private $container?; 18 | draggableX?: boolean; 19 | draggableY?: boolean; 20 | private mode?; 21 | private cursor?; 22 | private beforeDrag?; 23 | private drag?; 24 | private dragged?; 25 | private ready?; 26 | private draggable; 27 | private hasInit; 28 | private pageX; 29 | private pageY; 30 | private guid; 31 | constructor(element: HTMLElement, options: DragOptionsType); 32 | private setOn; 33 | private resize; 34 | private createGuid; 35 | init(): void; 36 | destroy(): void; 37 | } 38 | export default Drag; 39 | -------------------------------------------------------------------------------- /packages/components/image/image.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-image { 4 | display: inline-block; 5 | overflow: hidden; 6 | position: relative; 7 | 8 | img { 9 | display: block; 10 | margin: 0; 11 | padding: 0; 12 | border-radius: inherit; 13 | width: 100%; 14 | height: 100%; 15 | position: relative; 16 | z-index: 1; 17 | 18 | &.mvi-image-contain { 19 | object-fit: contain; 20 | } 21 | 22 | &.mvi-image-cover { 23 | object-fit: cover; 24 | } 25 | 26 | &.mvi-image-fill { 27 | object-fit: fill; 28 | } 29 | 30 | &.mvi-image-none { 31 | object-fit: none; 32 | } 33 | 34 | &.mvi-image-response { 35 | object-fit: scale-down; 36 | } 37 | } 38 | 39 | .mvi-image-error, 40 | .mvi-image-loading { 41 | display: flex; 42 | justify-content: center; 43 | align-items: center; 44 | width: 100%; 45 | height: 100%; 46 | position: absolute; 47 | left: 0; 48 | top: 0; 49 | background-color: var(--mvi-bg-color-dark); 50 | color: var(--mvi-font-color-sub); 51 | z-index: 2; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /lib/components/navbar/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | import { IconPropsType } from '../icon'; 3 | 4 | export declare const NavbarProps: { 5 | title: { 6 | type: StringConstructor; 7 | default: null; 8 | }; 9 | leftText: { 10 | type: StringConstructor; 11 | default: null; 12 | }; 13 | rightText: { 14 | type: StringConstructor; 15 | default: null; 16 | }; 17 | leftIcon: { 18 | type: PropType; 19 | default: null; 20 | }; 21 | rightIcon: { 22 | type: PropType; 23 | default: null; 24 | }; 25 | fixed: { 26 | type: BooleanConstructor; 27 | default: boolean; 28 | }; 29 | border: { 30 | type: BooleanConstructor; 31 | default: boolean; 32 | }; 33 | zIndex: { 34 | type: NumberConstructor; 35 | default: number; 36 | }; 37 | }; 38 | export type NavbarPropsType = ExtractPublicPropTypes; 39 | -------------------------------------------------------------------------------- /packages/components/toast/toast.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-toast { 4 | display: flex; 5 | justify-content: flex-start; 6 | flex-direction: column; 7 | position: absolute; 8 | left: 50%; 9 | top: 50%; 10 | transform: translate(-50%, -50%); 11 | min-width: 3rem; 12 | max-width: 5rem; 13 | margin: 0; 14 | padding: @mp-md; 15 | border-radius: @radius-default; 16 | background-color: fade(#1a1a1a, 70%); 17 | color: #fff; 18 | 19 | &.iconless { 20 | justify-content: center; 21 | align-items: center; 22 | padding: 0; 23 | width: 2.4rem; 24 | height: 1.8rem; 25 | } 26 | 27 | &.shadow { 28 | box-shadow: var(--mvi-boxshadow); 29 | } 30 | 31 | .mvi-toast-icon { 32 | display: flex; 33 | justify-content: center; 34 | align-items: center; 35 | width: 100%; 36 | } 37 | 38 | .mvi-toast-message { 39 | display: block; 40 | width: 100%; 41 | text-align: center; 42 | font-size: @font-size-default; 43 | margin-top: @mp-sm; 44 | white-space: nowrap; 45 | text-overflow: ellipsis; 46 | overflow: hidden; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /packages/components/checkbox/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | 3 | export const CheckboxProps = { 4 | //是否禁用 5 | disabled: { 6 | type: Boolean, 7 | default: false 8 | }, 9 | //是否选中 10 | modelValue: { 11 | type: [Boolean, Array], 12 | default: false 13 | }, 14 | //label文字 15 | label: { 16 | type: String, 17 | default: null 18 | }, 19 | //值 20 | value: { 21 | type: [Object, Number, String, Array], 22 | default: '' 23 | }, 24 | //是否圆形 25 | round: { 26 | type: Boolean, 27 | default: false 28 | }, 29 | //原生name属性 30 | name: { 31 | type: String, 32 | default: null 33 | }, 34 | //文字位置 35 | placement: { 36 | type: String as PropType<'left' | 'right'>, 37 | default: 'right', 38 | validator(value: any) { 39 | return ['left', 'right'].includes(value) 40 | } 41 | }, 42 | //大小 43 | size: { 44 | type: String, 45 | default: null 46 | }, 47 | //主题颜色 48 | color: { 49 | type: String, 50 | default: null 51 | } 52 | } 53 | 54 | export type CheckboxPropsType = ExtractPublicPropTypes 55 | -------------------------------------------------------------------------------- /packages/components/radio/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | 3 | export const RadioProps = { 4 | //是否禁用 5 | disabled: { 6 | type: Boolean, 7 | default: false 8 | }, 9 | //是否选中 10 | modelValue: { 11 | type: [Boolean, String, Number, Object], 12 | default: false 13 | }, 14 | //label文字 15 | label: { 16 | type: String, 17 | default: null 18 | }, 19 | //值 20 | value: { 21 | type: [Object, Number, String], 22 | default: '' 23 | }, 24 | //是否圆形 25 | round: { 26 | type: Boolean, 27 | default: true 28 | }, 29 | //原生name属性 30 | name: { 31 | type: String, 32 | default: null 33 | }, 34 | //文字位置 35 | placement: { 36 | type: String as PropType<'left' | 'right'>, 37 | default: 'right', 38 | validator(value: any) { 39 | return ['left', 'right'].includes(value) 40 | } 41 | }, 42 | //大小 43 | size: { 44 | type: String, 45 | default: null 46 | }, 47 | //主题颜色 48 | color: { 49 | type: String, 50 | default: null 51 | } 52 | } 53 | 54 | export type RadioPropsType = ExtractPublicPropTypes 55 | -------------------------------------------------------------------------------- /packages/components/cell/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | import { IconPropsType } from '@/components/icon' 3 | 4 | export const CellProps = { 5 | //左侧图标 6 | icon: { 7 | type: [String, Object] as PropType, 8 | default: null 9 | }, 10 | //标题 11 | title: { 12 | type: String, 13 | default: null 14 | }, 15 | //内容 16 | content: { 17 | type: String, 18 | default: null 19 | }, 20 | //描述文本 21 | label: { 22 | type: String, 23 | default: null 24 | }, 25 | //是否显示下边框 26 | border: { 27 | type: Boolean, 28 | default: null 29 | }, 30 | //右侧图标 31 | arrow: { 32 | type: [String, Object] as PropType, 33 | default: null 34 | }, 35 | //是否显示点击态 36 | active: { 37 | type: Boolean, 38 | default: null 39 | }, 40 | //是否对描述文本内容进行行数限制 41 | ellipsis: { 42 | type: [Boolean, Number], 43 | default: null 44 | }, 45 | //标题和内容超出一行是否省略 46 | noWrap: { 47 | type: Boolean, 48 | default: false 49 | } 50 | } 51 | 52 | export type CellPropsType = ExtractPublicPropTypes 53 | -------------------------------------------------------------------------------- /lib/components/list/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue'; 2 | 3 | export declare const ListProps: { 4 | loading: { 5 | type: BooleanConstructor; 6 | default: boolean; 7 | }; 8 | error: { 9 | type: BooleanConstructor; 10 | default: boolean; 11 | }; 12 | finished: { 13 | type: BooleanConstructor; 14 | default: boolean; 15 | }; 16 | loadingText: { 17 | type: StringConstructor; 18 | default: string; 19 | }; 20 | errorText: { 21 | type: StringConstructor; 22 | default: string; 23 | }; 24 | finishedText: { 25 | type: StringConstructor; 26 | default: string; 27 | }; 28 | immediateLoad: { 29 | type: BooleanConstructor; 30 | default: boolean; 31 | }; 32 | content: { 33 | type: StringConstructor; 34 | default: string; 35 | }; 36 | scrollEl: { 37 | type: StringConstructor; 38 | default: null; 39 | }; 40 | }; 41 | export type ListPropsType = ExtractPublicPropTypes; 42 | -------------------------------------------------------------------------------- /lib/components/badge/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | 3 | export declare const BadgeProps: { 4 | content: { 5 | type: (StringConstructor | NumberConstructor)[]; 6 | default: null; 7 | }; 8 | placement: { 9 | type: PropType<"top-right" | "top-left" | "bottom-right" | "bottom-left">; 10 | default: string; 11 | validator(value: any): boolean; 12 | }; 13 | dot: { 14 | type: BooleanConstructor; 15 | default: boolean; 16 | }; 17 | show: { 18 | type: BooleanConstructor; 19 | default: boolean; 20 | }; 21 | offset: { 22 | type: PropType; 23 | default: () => null; 24 | }; 25 | background: { 26 | type: StringConstructor; 27 | default: null; 28 | }; 29 | color: { 30 | type: StringConstructor; 31 | default: null; 32 | }; 33 | block: { 34 | type: BooleanConstructor; 35 | default: boolean; 36 | }; 37 | }; 38 | export type BadgePropsType = ExtractPublicPropTypes; 39 | -------------------------------------------------------------------------------- /lib/components/sign/index.d.ts: -------------------------------------------------------------------------------- 1 | export type * from './props'; 2 | declare const Sign: import('../../utils').SFCWithInstall string; 17 | clear: () => void; 18 | }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly>, { 32 | width: number; 33 | color: string; 34 | background: string; 35 | }, {}>>; 36 | export { Sign, Sign as default }; 37 | -------------------------------------------------------------------------------- /packages/components/label/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | 3 | export const LabelProps = { 4 | //标签样式 5 | type: { 6 | type: String as PropType<'default' | 'error' | 'info' | 'primary' | 'success' | 'warn'>, 7 | default: 'default', 8 | validator(value: any) { 9 | return ['default', 'error', 'info', 'primary', 'success', 'warn'].includes(value) 10 | } 11 | }, 12 | //标签大小 13 | size: { 14 | type: String as PropType<'medium' | 'large'>, 15 | default: 'medium', 16 | validator(value: any) { 17 | return ['medium', 'large'].includes(value) 18 | } 19 | }, 20 | //是否为朴素样式 21 | plain: { 22 | type: Boolean, 23 | default: false 24 | }, 25 | //是否为圆角样式 26 | round: { 27 | type: Boolean, 28 | default: false 29 | }, 30 | //是否为标记样式 31 | mark: { 32 | type: Boolean, 33 | default: false 34 | }, 35 | //是否可关闭 36 | closable: { 37 | type: Boolean, 38 | default: false 39 | }, 40 | //标记样式时是否反向 41 | reverse: { 42 | type: Boolean, 43 | default: false 44 | } 45 | } 46 | 47 | export type LabelPropsType = ExtractPublicPropTypes 48 | -------------------------------------------------------------------------------- /lib/components/rich-image/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | import { IconPropsType } from '../icon'; 3 | 4 | export type RichImageDoubleTouchType = { 5 | is: boolean; 6 | spacing?: number; 7 | }; 8 | export type RichImagePointType = { 9 | x: number; 10 | y: number; 11 | }; 12 | export type RichImageCoverType = { 13 | left: number; 14 | right: number; 15 | top: number; 16 | bottom: number; 17 | }; 18 | export declare const RichImageProps: { 19 | src: { 20 | type: StringConstructor; 21 | default: string; 22 | }; 23 | loadIcon: { 24 | type: PropType; 25 | default: null; 26 | }; 27 | errorIcon: { 28 | type: PropType; 29 | default: null; 30 | }; 31 | maxScale: { 32 | type: NumberConstructor; 33 | default: number; 34 | }; 35 | minScale: { 36 | type: NumberConstructor; 37 | default: number; 38 | }; 39 | }; 40 | export type RichImagePropsType = ExtractPublicPropTypes; 41 | -------------------------------------------------------------------------------- /packages/components/badge/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | 3 | export const BadgeProps = { 4 | //徽标内容 5 | content: { 6 | type: [String, Number], 7 | default: null 8 | }, 9 | //徽标位置 10 | placement: { 11 | type: String as PropType<'top-right' | 'top-left' | 'bottom-left' | 'bottom-right'>, 12 | default: 'top-right', 13 | validator(value: any) { 14 | return ['top-right', 'top-left', 'bottom-left', 'bottom-right'].includes(value) 15 | } 16 | }, 17 | //是否圆点 18 | dot: { 19 | type: Boolean, 20 | default: false 21 | }, 22 | //徽标是否显示 23 | show: { 24 | type: Boolean, 25 | default: true 26 | }, 27 | //徽标偏移值 28 | offset: { 29 | type: Array as PropType, 30 | default: function () { 31 | return null 32 | } 33 | }, 34 | //背景色 35 | background: { 36 | type: String, 37 | default: null 38 | }, 39 | //字体颜色 40 | color: { 41 | type: String, 42 | default: null 43 | }, 44 | //是否块级 45 | block: { 46 | type: Boolean, 47 | default: false 48 | } 49 | } 50 | 51 | export type BadgePropsType = ExtractPublicPropTypes 52 | -------------------------------------------------------------------------------- /lib/components/color-picker/index.d.ts: -------------------------------------------------------------------------------- 1 | export type * from './props'; 2 | declare const ColorPicker: import('../../utils').SFCWithInstall void; 13 | change: (...args: any[]) => void; 14 | }, string, import('vue').PublicProps, Readonly> & { 24 | "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; 25 | onChange?: ((...args: any[]) => any) | undefined; 26 | }, { 27 | modelValue: string; 28 | showAlpha: boolean; 29 | }, {}>>; 30 | export { ColorPicker, ColorPicker as default }; 31 | -------------------------------------------------------------------------------- /lib/components/col/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | 3 | export type ColResponsiveType = { 4 | span?: number; 5 | offset?: number; 6 | }; 7 | export declare const ColProps: { 8 | span: { 9 | type: NumberConstructor; 10 | default: number; 11 | }; 12 | offset: { 13 | type: NumberConstructor; 14 | default: number; 15 | }; 16 | tag: { 17 | type: StringConstructor; 18 | default: string; 19 | }; 20 | xs: { 21 | type: PropType; 22 | default: null; 23 | }; 24 | sm: { 25 | type: PropType; 26 | default: null; 27 | }; 28 | md: { 29 | type: PropType; 30 | default: null; 31 | }; 32 | lg: { 33 | type: PropType; 34 | default: null; 35 | }; 36 | xl: { 37 | type: PropType; 38 | default: null; 39 | }; 40 | }; 41 | export type ColPropsType = ExtractPublicPropTypes; 42 | -------------------------------------------------------------------------------- /packages/components/icon/icon.less: -------------------------------------------------------------------------------- 1 | @import '@/icon/icon.css'; 2 | @import '@/css/base.less'; 3 | 4 | .mvi-icon { 5 | display: inline-flex; 6 | font-family: 'mvi-icon' !important; 7 | font-style: normal; 8 | vertical-align: middle; 9 | justify-content: center; 10 | align-items: center; 11 | font-size: inherit; 12 | line-height: 1; 13 | 14 | &.spin { 15 | animation: spin 1.4s linear infinite; 16 | } 17 | } 18 | 19 | .mvi-icon-url { 20 | display: inline-block; 21 | width: 0.28rem; 22 | height: 0.28rem; 23 | vertical-align: middle; 24 | background-size: cover; 25 | background-repeat: no-repeat; 26 | background-position: center; 27 | 28 | &.spin { 29 | animation: spin 1.4s linear infinite; 30 | } 31 | } 32 | 33 | //旋转 34 | @keyframes spin { 35 | from { 36 | transform: rotateZ(0deg); 37 | transform-origin: center; 38 | } 39 | 40 | to { 41 | transform: rotateZ(360deg); 42 | transform-origin: center; 43 | } 44 | } 45 | @-webkit-keyframes spin { 46 | from { 47 | transform: rotateZ(0deg); 48 | transform-origin: center; 49 | } 50 | 51 | to { 52 | transform: rotateZ(360deg); 53 | transform-origin: center; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /lib/components/cell-group/cell-group.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots>, { 28 | title: string; 29 | border: boolean; 30 | active: boolean; 31 | }, {}>, { 32 | default?(_: {}): any; 33 | }>; 34 | export default _default; 35 | type __VLS_WithTemplateSlots = T & { 36 | new (): { 37 | $slots: S; 38 | }; 39 | }; 40 | -------------------------------------------------------------------------------- /lib/components/cell/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | import { IconPropsType } from '../icon'; 3 | 4 | export declare const CellProps: { 5 | icon: { 6 | type: PropType; 7 | default: null; 8 | }; 9 | title: { 10 | type: StringConstructor; 11 | default: null; 12 | }; 13 | content: { 14 | type: StringConstructor; 15 | default: null; 16 | }; 17 | label: { 18 | type: StringConstructor; 19 | default: null; 20 | }; 21 | border: { 22 | type: BooleanConstructor; 23 | default: null; 24 | }; 25 | arrow: { 26 | type: PropType; 27 | default: null; 28 | }; 29 | active: { 30 | type: BooleanConstructor; 31 | default: null; 32 | }; 33 | ellipsis: { 34 | type: (BooleanConstructor | NumberConstructor)[]; 35 | default: null; 36 | }; 37 | noWrap: { 38 | type: BooleanConstructor; 39 | default: boolean; 40 | }; 41 | }; 42 | export type CellPropsType = ExtractPublicPropTypes; 43 | -------------------------------------------------------------------------------- /packages/components/skeleton/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | 3 | export const SkeletonProps = { 4 | //是否加载状态 5 | loading: { 6 | type: Boolean, 7 | default: true 8 | }, 9 | //行数 10 | rows: { 11 | type: Number, 12 | default: 1, 13 | validator(value: number) { 14 | return value > 0 15 | } 16 | }, 17 | //每行宽度 18 | rowWidth: { 19 | type: [String, Array] as PropType, 20 | default: null 21 | }, 22 | //是否显示头像占位 23 | avatar: { 24 | type: Boolean, 25 | default: false 26 | }, 27 | //是否显示标题占位 28 | title: { 29 | type: Boolean, 30 | default: false 31 | }, 32 | //标题占位宽度 33 | titleWidth: { 34 | type: String, 35 | default: null 36 | }, 37 | //是否显示动画效果 38 | animation: { 39 | type: Boolean, 40 | default: false 41 | }, 42 | //标题段落是否展示圆角 43 | round: { 44 | type: Boolean, 45 | default: false 46 | }, 47 | //头像占位大小 48 | avatarSize: { 49 | type: String, 50 | default: null 51 | }, 52 | //头像占位是否展示圆角 53 | avatarRound: { 54 | type: Boolean, 55 | default: false 56 | } 57 | } 58 | 59 | export type SkeletonPropsType = ExtractPublicPropTypes 60 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 so-better 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /lib/components/roll/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | 3 | export declare const RollProps: { 4 | interval: { 5 | type: NumberConstructor; 6 | default: number; 7 | }; 8 | direction: { 9 | type: PropType<"left" | "right" | "up" | "down">; 10 | default: string; 11 | validator(value: any): boolean; 12 | }; 13 | autoplay: { 14 | type: BooleanConstructor; 15 | default: boolean; 16 | }; 17 | loop: { 18 | type: BooleanConstructor; 19 | default: boolean; 20 | }; 21 | animation: { 22 | type: PropType<"linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out">; 23 | default: string; 24 | validator(value: any): boolean; 25 | }; 26 | clickStop: { 27 | type: BooleanConstructor; 28 | default: boolean; 29 | }; 30 | hoverStop: { 31 | type: BooleanConstructor; 32 | default: boolean; 33 | }; 34 | center: { 35 | type: BooleanConstructor; 36 | default: boolean; 37 | }; 38 | }; 39 | export type RollPropsType = ExtractPublicPropTypes; 40 | -------------------------------------------------------------------------------- /packages/components/rich-image/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | import { IconPropsType } from '@/components/icon' 3 | 4 | //双指触摸类型 5 | export type RichImageDoubleTouchType = { 6 | //是否双指 7 | is: boolean 8 | //双指间距 9 | spacing?: number 10 | } 11 | 12 | //鼠标在图片上按下的坐标类型 13 | export type RichImagePointType = { 14 | //横坐标 15 | x: number 16 | //纵坐标 17 | y: number 18 | } 19 | 20 | //图片被容器遮挡的部分数据类型 21 | export type RichImageCoverType = { 22 | left: number 23 | right: number 24 | top: number 25 | bottom: number 26 | } 27 | 28 | export const RichImageProps = { 29 | //图片地址 30 | src: { 31 | type: String, 32 | default: '' 33 | }, 34 | //加载图标 35 | loadIcon: { 36 | type: [String, Object] as PropType, 37 | default: null 38 | }, 39 | //失败图标 40 | errorIcon: { 41 | type: [String, Object] as PropType, 42 | default: null 43 | }, 44 | //最大缩放值 45 | maxScale: { 46 | type: Number, 47 | default: 3 48 | }, 49 | //最小缩放值 50 | minScale: { 51 | type: Number, 52 | default: 0.3 53 | } 54 | } 55 | 56 | export type RichImagePropsType = ExtractPublicPropTypes 57 | -------------------------------------------------------------------------------- /packages/css/base.less: -------------------------------------------------------------------------------- 1 | /** 2 | * mvi组件库中常用的css样式配置 3 | */ 4 | 5 | //字体大小 6 | @font-size-default: 0.28rem; 7 | @font-size-small: 0.24rem; 8 | @font-size-h6: 0.32rem; 9 | @font-size-h5: 0.36rem; 10 | @font-size-h4: 0.4rem; 11 | @font-size-h3: 0.44rem; 12 | @font-size-h2: 0.48rem; 13 | @font-size-h1: 0.54rem; 14 | 15 | //默认字体样式 16 | @font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Roboto, 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif; 17 | 18 | //常用的margin与padding距离 19 | @mp-xs: 0.1rem; 20 | @mp-sm: 0.2rem; 21 | @mp-md: 0.3rem; 22 | @mp-lg: 0.4rem; 23 | 24 | //常用的圆角 25 | @radius-default: 0.08rem; 26 | @radius-round: 999rem; 27 | @radius-circle: 50%; 28 | 29 | //高度 30 | @mini-height: 0.6rem; 31 | @small-height: 0.72rem; 32 | @medium-height: 0.88rem; 33 | @large-height: 1rem; 34 | 35 | //点击态 36 | .mvi-active(@background:#032237) { 37 | position: absolute; 38 | top: 50%; 39 | left: 50%; 40 | width: 100%; 41 | height: 100%; 42 | background-color: @background; 43 | border: inherit; 44 | border-color: @background; 45 | border-radius: inherit; 46 | transform: translate(-50%, -50%); 47 | opacity: 0.1; 48 | content: ' '; 49 | box-sizing: content-box; 50 | } 51 | -------------------------------------------------------------------------------- /lib/components/slider/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue'; 2 | 3 | export declare const SliderProps: { 4 | modelValue: { 5 | type: NumberConstructor; 6 | default: number; 7 | }; 8 | min: { 9 | type: NumberConstructor; 10 | default: number; 11 | }; 12 | max: { 13 | type: NumberConstructor; 14 | default: number; 15 | }; 16 | strokeWidth: { 17 | type: StringConstructor; 18 | default: string; 19 | }; 20 | color: { 21 | type: StringConstructor; 22 | default: null; 23 | }; 24 | trackColor: { 25 | type: StringConstructor; 26 | default: null; 27 | }; 28 | disabled: { 29 | type: BooleanConstructor; 30 | default: boolean; 31 | }; 32 | vertical: { 33 | type: BooleanConstructor; 34 | default: boolean; 35 | }; 36 | round: { 37 | type: BooleanConstructor; 38 | default: boolean; 39 | }; 40 | square: { 41 | type: BooleanConstructor; 42 | default: boolean; 43 | }; 44 | }; 45 | export type SliderPropsType = ExtractPublicPropTypes; 46 | -------------------------------------------------------------------------------- /lib/components/step/index.d.ts: -------------------------------------------------------------------------------- 1 | declare const Step: import('../../utils').SFCWithInstall<{ 2 | new (...args: any[]): import('vue').CreateComponentPublicInstance>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly>, {}, true, {}, {}, { 3 | P: {}; 4 | B: {}; 5 | D: {}; 6 | C: {}; 7 | M: {}; 8 | Defaults: {}; 9 | }, Readonly>, {}, {}, {}, {}, {}>; 10 | __isFragment?: undefined; 11 | __isTeleport?: undefined; 12 | __isSuspense?: undefined; 13 | } & import('vue').ComponentOptionsBase>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => { 14 | $slots: { 15 | default?(_: {}): any; 16 | }; 17 | })>; 18 | export { Step, Step as default }; 19 | -------------------------------------------------------------------------------- /lib/components/loading/loading.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: import('vue').DefineComponent<{ 2 | type: { 3 | type: import('vue').PropType<"default" | "circle" | "spin" | "dots" | "transfer">; 4 | default: string; 5 | validator(value: any): boolean; 6 | }; 7 | color: { 8 | type: StringConstructor; 9 | default: null; 10 | }; 11 | size: { 12 | type: StringConstructor; 13 | default: string; 14 | }; 15 | }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly; 18 | default: string; 19 | validator(value: any): boolean; 20 | }; 21 | color: { 22 | type: StringConstructor; 23 | default: null; 24 | }; 25 | size: { 26 | type: StringConstructor; 27 | default: string; 28 | }; 29 | }>>, { 30 | size: string; 31 | type: "default" | "circle" | "spin" | "dots" | "transfer"; 32 | color: string; 33 | }, {}>; 34 | export default _default; 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mvi-web-plus", 3 | "version": "2.0.15", 4 | "private": false, 5 | "sideEffects": [ 6 | "*.css" 7 | ], 8 | "type": "module", 9 | "author": "so-better", 10 | "main": "lib/mvi.umd.js", 11 | "module": "lib/mvi.es.js", 12 | "types": "lib/index.d.ts", 13 | "license": "MIT", 14 | "description": "一个基于Vue3的移动端web前端组件库", 15 | "scripts": { 16 | "dev": "vite", 17 | "lib": "vue-tsc && vite build" 18 | }, 19 | "dependencies": { 20 | "animator-clip": "^1.4.3", 21 | "dap-util": "^1.5.8", 22 | "dayjs": "^1.11.9", 23 | "vue": "^3.4.19", 24 | "vue-router": "^4.3.0" 25 | }, 26 | "devDependencies": { 27 | "@types/less": "^3.0.6", 28 | "@types/node": "^20.11.24", 29 | "@vitejs/plugin-vue": "^5.0.4", 30 | "less": "^3.0.4", 31 | "less-loader": "^5.0.0", 32 | "terser": "^5.16.9", 33 | "typescript": "^5.2.2", 34 | "vite": "^5.2.8", 35 | "vite-plugin-css-injected-by-js": "^3.5.1", 36 | "vite-plugin-dts": "^3.7.3", 37 | "vue-tsc": "^2.0.26" 38 | }, 39 | "browserslist": [ 40 | "> 1%", 41 | "last 2 versions", 42 | "not dead" 43 | ], 44 | "repository": { 45 | "type": "git", 46 | "url": "https://github.com/so-better/mvi-web-plus" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /packages/components/tabbar/tabbar-item.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-tabbar-item { 4 | position: relative; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | vertical-align: middle; 9 | height: 100%; 10 | padding: 0 @mp-lg; 11 | cursor: pointer; 12 | user-select: none; 13 | 14 | .mvi-tabbar-badge { 15 | width: 100%; 16 | } 17 | .mvi-tabbar-item-child { 18 | display: flex; 19 | justify-content: flex-start; 20 | align-items: center; 21 | flex-direction: column; 22 | vertical-align: middle; 23 | 24 | .mvi-tabbar-icon { 25 | display: block; 26 | width: 100%; 27 | text-align: center; 28 | margin: 0; 29 | padding: 0; 30 | font-size: @font-size-h4; 31 | } 32 | 33 | .mvi-tabbar-name { 34 | display: block; 35 | width: 100%; 36 | text-align: center; 37 | font-size: @font-size-h6; 38 | white-space: nowrap; 39 | 40 | &.small { 41 | font-size: @font-size-small; 42 | } 43 | } 44 | } 45 | 46 | &.item-active { 47 | color: var(--mvi-info-normal); 48 | } 49 | 50 | &.active:active::before { 51 | .mvi-active(var(--mvi-bg-color-active)); 52 | } 53 | 54 | &[disabled] { 55 | opacity: 0.6; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /packages/components/roll/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | 3 | export const RollProps = { 4 | //滚动一个周期需要的时间 5 | interval: { 6 | type: Number, 7 | default: 5000 8 | }, 9 | //滚动方向 10 | direction: { 11 | type: String as PropType<'left' | 'right' | 'up' | 'down'>, 12 | default: 'left', 13 | validator(value: any) { 14 | return ['left', 'right', 'up', 'down'].includes(value) 15 | } 16 | }, 17 | //是否自动滚动 18 | autoplay: { 19 | type: Boolean, 20 | default: false 21 | }, 22 | //是否循环滚动 23 | loop: { 24 | type: Boolean, 25 | default: false 26 | }, 27 | //动画效果 28 | animation: { 29 | type: String as PropType<'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out'>, 30 | default: 'linear', 31 | validator(value: any) { 32 | return ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'].includes(value) 33 | } 34 | }, 35 | //是否点击暂停 36 | clickStop: { 37 | type: Boolean, 38 | default: false 39 | }, 40 | //是否悬浮暂停 41 | hoverStop: { 42 | type: Boolean, 43 | default: false 44 | }, 45 | //垂直方向滚动时内容是否居中 46 | center: { 47 | type: Boolean, 48 | default: false 49 | } 50 | } 51 | 52 | export type RollPropsType = ExtractPublicPropTypes 53 | -------------------------------------------------------------------------------- /lib/components/carousel-item/index.d.ts: -------------------------------------------------------------------------------- 1 | declare const CarouselItem: import('../../utils').SFCWithInstall<{ 2 | new (...args: any[]): import('vue').CreateComponentPublicInstance>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly>, {}, true, {}, {}, { 3 | P: {}; 4 | B: {}; 5 | D: {}; 6 | C: {}; 7 | M: {}; 8 | Defaults: {}; 9 | }, Readonly>, {}, {}, {}, {}, {}>; 10 | __isFragment?: undefined; 11 | __isTeleport?: undefined; 12 | __isSuspense?: undefined; 13 | } & import('vue').ComponentOptionsBase>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => { 14 | $slots: { 15 | default?(_: {}): any; 16 | }; 17 | })>; 18 | export { CarouselItem, CarouselItem as default }; 19 | -------------------------------------------------------------------------------- /lib/components/checkbox/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | 3 | export declare const CheckboxProps: { 4 | disabled: { 5 | type: BooleanConstructor; 6 | default: boolean; 7 | }; 8 | modelValue: { 9 | type: (BooleanConstructor | ArrayConstructor)[]; 10 | default: boolean; 11 | }; 12 | label: { 13 | type: StringConstructor; 14 | default: null; 15 | }; 16 | value: { 17 | type: (StringConstructor | NumberConstructor | ObjectConstructor | ArrayConstructor)[]; 18 | default: string; 19 | }; 20 | round: { 21 | type: BooleanConstructor; 22 | default: boolean; 23 | }; 24 | name: { 25 | type: StringConstructor; 26 | default: null; 27 | }; 28 | placement: { 29 | type: PropType<"left" | "right">; 30 | default: string; 31 | validator(value: any): boolean; 32 | }; 33 | size: { 34 | type: StringConstructor; 35 | default: null; 36 | }; 37 | color: { 38 | type: StringConstructor; 39 | default: null; 40 | }; 41 | }; 42 | export type CheckboxPropsType = ExtractPublicPropTypes; 43 | -------------------------------------------------------------------------------- /packages/components/col/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | 3 | export type ColResponsiveType = { 4 | span?: number 5 | offset?: number 6 | } 7 | export const ColProps = { 8 | //栅格占据的列数 9 | span: { 10 | type: Number, 11 | default: 24 12 | }, 13 | //栅格左侧的间隔格数 14 | offset: { 15 | type: Number, 16 | default: 0 17 | }, 18 | //渲染标签 19 | tag: { 20 | type: String, 21 | default: 'div' 22 | }, 23 | // >=0px 响应式栅格数或者栅格属性对象 24 | xs: { 25 | type: [Number, Object] as PropType, 26 | default: null 27 | }, 28 | // >=640px 响应式栅格数或者栅格属性对象 29 | sm: { 30 | type: [Number, Object] as PropType, 31 | default: null 32 | }, 33 | // >=992px 响应式栅格数或者栅格属性对象 34 | md: { 35 | type: [Number, Object] as PropType, 36 | default: null 37 | }, 38 | // >=1440px 响应式栅格数或者栅格属性对象 39 | lg: { 40 | type: [Number, Object] as PropType, 41 | default: null 42 | }, 43 | // >=1920px 响应式栅格数或者栅格属性对象 44 | xl: { 45 | type: [Number, Object] as PropType, 46 | default: null 47 | } 48 | } 49 | 50 | export type ColPropsType = ExtractPublicPropTypes 51 | -------------------------------------------------------------------------------- /lib/components/radio/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | 3 | export declare const RadioProps: { 4 | disabled: { 5 | type: BooleanConstructor; 6 | default: boolean; 7 | }; 8 | modelValue: { 9 | type: (BooleanConstructor | StringConstructor | NumberConstructor | ObjectConstructor)[]; 10 | default: boolean; 11 | }; 12 | label: { 13 | type: StringConstructor; 14 | default: null; 15 | }; 16 | value: { 17 | type: (StringConstructor | NumberConstructor | ObjectConstructor)[]; 18 | default: string; 19 | }; 20 | round: { 21 | type: BooleanConstructor; 22 | default: boolean; 23 | }; 24 | name: { 25 | type: StringConstructor; 26 | default: null; 27 | }; 28 | placement: { 29 | type: PropType<"left" | "right">; 30 | default: string; 31 | validator(value: any): boolean; 32 | }; 33 | size: { 34 | type: StringConstructor; 35 | default: null; 36 | }; 37 | color: { 38 | type: StringConstructor; 39 | default: null; 40 | }; 41 | }; 42 | export type RadioPropsType = ExtractPublicPropTypes; 43 | -------------------------------------------------------------------------------- /packages/components/switch/switch.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-switch { 4 | display: inline-flex; 5 | justify-content: flex-start; 6 | align-items: center; 7 | position: relative; 8 | background-color: var(--mvi-bg-color-common); 9 | border-radius: @radius-round; 10 | border: 1px solid var(--mvi-border-light-color); 11 | transition: background-color 300ms; 12 | cursor: pointer; 13 | vertical-align: middle; 14 | 15 | input[type='checkbox'] { 16 | display: none; 17 | width: 0; 18 | height: 0; 19 | opacity: 0; 20 | 21 | &[disabled] { 22 | pointer-events: none; 23 | } 24 | } 25 | 26 | &[disabled] { 27 | opacity: 0.6; 28 | } 29 | 30 | &.checked { 31 | background-color: var(--mvi-info-normal); 32 | } 33 | 34 | .mvi-switch-el { 35 | display: inline-flex; 36 | justify-content: center; 37 | align-items: center; 38 | color: var(--mvi-info-normal); 39 | width: 0.4rem; 40 | height: 0.4rem; 41 | border-radius: @radius-circle; 42 | box-shadow: var(--mvi-boxshadow); 43 | background-color: #fff; 44 | margin: 0; 45 | padding: 0; 46 | transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05); 47 | 48 | &.checked { 49 | transform: translateX(100%); 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /lib/components/notify/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ComponentInternalInstance, ExtractPublicPropTypes, PropType } from 'vue'; 2 | import { IconPropsType } from '../icon'; 3 | 4 | export declare const NotifyProps: { 5 | type: { 6 | type: PropType<"info" | "success" | "warn" | "error" | "primary">; 7 | default: null; 8 | }; 9 | message: { 10 | type: StringConstructor; 11 | default: null; 12 | }; 13 | color: { 14 | type: StringConstructor; 15 | default: null; 16 | }; 17 | background: { 18 | type: StringConstructor; 19 | default: null; 20 | }; 21 | zIndex: { 22 | type: NumberConstructor; 23 | default: null; 24 | }; 25 | timeout: { 26 | type: NumberConstructor; 27 | default: null; 28 | }; 29 | icon: { 30 | type: PropType; 31 | default: null; 32 | }; 33 | __remove: { 34 | type: PropType<() => void>; 35 | default: () => () => void; 36 | }; 37 | __init: { 38 | type: PropType<(vm: ComponentInternalInstance) => void>; 39 | default: () => () => void; 40 | }; 41 | }; 42 | export type NotifyPropsType = ExtractPublicPropTypes; 43 | -------------------------------------------------------------------------------- /packages/components/progress/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue' 2 | 3 | export const ProgressProps = { 4 | //当前进度值 5 | value: { 6 | type: Number, 7 | default: 0 8 | }, 9 | //最大值 10 | max: { 11 | type: Number, 12 | default: 100 13 | }, 14 | //最小值 15 | min: { 16 | type: Number, 17 | default: 0 18 | }, 19 | //进度条粗细 20 | strokeWidth: { 21 | type: String, 22 | default: null 23 | }, 24 | //是否显示进度文字 25 | showTip: { 26 | type: Boolean, 27 | default: false 28 | }, 29 | //进度条颜色 30 | color: { 31 | type: String, 32 | default: null 33 | }, 34 | //进度文字颜色 35 | tipColor: { 36 | type: String, 37 | default: null 38 | }, 39 | //轨道颜色 40 | trackColor: { 41 | type: String, 42 | default: null 43 | }, 44 | //进度显示的文字，默认为百分比 45 | tipText: { 46 | type: String, 47 | default: null 48 | }, 49 | //显示圆角 50 | round: { 51 | type: Boolean, 52 | default: false 53 | }, 54 | //无角度 55 | square: { 56 | type: Boolean, 57 | default: false 58 | }, 59 | //是否开启动画效果 60 | animation: { 61 | type: Boolean, 62 | default: false 63 | }, 64 | //动画效果时长 65 | timeout: { 66 | type: Number, 67 | default: 400 68 | } 69 | } 70 | 71 | export type ProgressPropsType = ExtractPublicPropTypes 72 | -------------------------------------------------------------------------------- /lib/components/skeleton/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | 3 | export declare const SkeletonProps: { 4 | loading: { 5 | type: BooleanConstructor; 6 | default: boolean; 7 | }; 8 | rows: { 9 | type: NumberConstructor; 10 | default: number; 11 | validator(value: number): boolean; 12 | }; 13 | rowWidth: { 14 | type: PropType; 15 | default: null; 16 | }; 17 | avatar: { 18 | type: BooleanConstructor; 19 | default: boolean; 20 | }; 21 | title: { 22 | type: BooleanConstructor; 23 | default: boolean; 24 | }; 25 | titleWidth: { 26 | type: StringConstructor; 27 | default: null; 28 | }; 29 | animation: { 30 | type: BooleanConstructor; 31 | default: boolean; 32 | }; 33 | round: { 34 | type: BooleanConstructor; 35 | default: boolean; 36 | }; 37 | avatarSize: { 38 | type: StringConstructor; 39 | default: null; 40 | }; 41 | avatarRound: { 42 | type: BooleanConstructor; 43 | default: boolean; 44 | }; 45 | }; 46 | export type SkeletonPropsType = ExtractPublicPropTypes; 47 | -------------------------------------------------------------------------------- /packages/components/notify/props.ts: -------------------------------------------------------------------------------- 1 | import { ComponentInternalInstance, ExtractPublicPropTypes, PropType } from 'vue' 2 | import { IconPropsType } from '@/components/icon' 3 | 4 | export const NotifyProps = { 5 | //提示类型 6 | type: { 7 | type: String as PropType<'success' | 'info' | 'primary' | 'error' | 'warn'>, 8 | default: null 9 | }, 10 | //展示文字 11 | message: { 12 | type: String, 13 | default: null 14 | }, 15 | //字体颜色 16 | color: { 17 | type: String, 18 | default: null 19 | }, 20 | //背景色 21 | background: { 22 | type: String, 23 | default: null 24 | }, 25 | //层级 26 | zIndex: { 27 | type: Number, 28 | default: null 29 | }, 30 | //自动关闭间隔 31 | timeout: { 32 | type: Number, 33 | default: null 34 | }, 35 | //图标 36 | icon: { 37 | type: [String, Object] as PropType, 38 | default: null 39 | }, 40 | //移除方法 41 | __remove: { 42 | type: Function as PropType<() => void>, 43 | default: function () { 44 | return function () {} 45 | } 46 | }, 47 | //初始化方法 48 | __init: { 49 | type: Function as PropType<(vm: ComponentInternalInstance) => void>, 50 | default: function () { 51 | return function () {} 52 | } 53 | } 54 | } 55 | 56 | export type NotifyPropsType = ExtractPublicPropTypes 57 | -------------------------------------------------------------------------------- /lib/components/loading/index.d.ts: -------------------------------------------------------------------------------- 1 | export type * from './props'; 2 | declare const Loading: import('../../utils').SFCWithInstall; 5 | default: string; 6 | validator(value: any): boolean; 7 | }; 8 | color: { 9 | type: StringConstructor; 10 | default: null; 11 | }; 12 | size: { 13 | type: StringConstructor; 14 | default: string; 15 | }; 16 | }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly; 19 | default: string; 20 | validator(value: any): boolean; 21 | }; 22 | color: { 23 | type: StringConstructor; 24 | default: null; 25 | }; 26 | size: { 27 | type: StringConstructor; 28 | default: string; 29 | }; 30 | }>>, { 31 | size: string; 32 | type: "default" | "circle" | "spin" | "dots" | "transfer"; 33 | color: string; 34 | }, {}>>; 35 | export { Loading, Loading as default }; 36 | -------------------------------------------------------------------------------- /packages/components/notify/notify.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-notify { 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | width: 100%; 8 | height: @small-height; 9 | position: fixed; 10 | top: 0; 11 | left: 0; 12 | margin: 0; 13 | padding: 0 @mp-sm; 14 | 15 | &.success { 16 | background-color: var(--mvi-success-normal); 17 | color: #fff; 18 | } 19 | 20 | &.info { 21 | background-color: var(--mvi-info-normal); 22 | color: #fff; 23 | } 24 | 25 | &.primary { 26 | background-color: var(--mvi-primary-normal); 27 | color: #fff; 28 | } 29 | 30 | &.error { 31 | background-color: var(--mvi-error-normal); 32 | color: #fff; 33 | } 34 | 35 | &.warn { 36 | background-color: var(--mvi-warn-normal); 37 | color: #fff; 38 | } 39 | 40 | .mvi-notify-content { 41 | display: block; 42 | overflow: hidden; 43 | text-overflow: ellipsis; 44 | white-space: nowrap; 45 | 46 | & > .mvi-icon { 47 | margin-right: @mp-sm; 48 | } 49 | 50 | & > span { 51 | vertical-align: middle; 52 | } 53 | } 54 | } 55 | 56 | .mvi-notify-enter-active, 57 | .mvi-notify-leave-active { 58 | transition: all 300ms; 59 | } 60 | 61 | .mvi-notify-enter-from, 62 | .mvi-notify-leave-to { 63 | opacity: 0; 64 | transform: translateY(-100%); 65 | } 66 | -------------------------------------------------------------------------------- /packages/components/slider/slider.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-slider { 4 | position: relative; 5 | display: block; 6 | width: 100%; 7 | height: 0.2rem; 8 | background: var(--mvi-bg-color-dark); 9 | touch-action: none; 10 | border-radius: @radius-default; 11 | user-select: none; 12 | 13 | &[disabled] { 14 | opacity: 0.6; 15 | } 16 | 17 | .mvi-slider-bar { 18 | display: block; 19 | position: absolute; 20 | left: 0; 21 | top: 0; 22 | width: 100%; 23 | height: 100%; 24 | background: var(--mvi-info-normal); 25 | border-radius: inherit; 26 | touch-action: none; 27 | } 28 | 29 | .mvi-slider-button { 30 | position: absolute; 31 | left: 0; 32 | top: 50%; 33 | cursor: pointer; 34 | transform: translateY(-50%); 35 | 36 | .mvi-slider-button-el { 37 | display: block; 38 | min-width: 0.4rem; 39 | min-height: 0.4rem; 40 | background: #fff; 41 | box-shadow: var(--mvi-boxshadow); 42 | border-radius: @radius-circle; 43 | } 44 | } 45 | 46 | &.vertical { 47 | height: 100%; 48 | width: 0.2rem; 49 | 50 | .mvi-slider-button { 51 | top: 0; 52 | left: 50%; 53 | transform: translateX(-50%); 54 | } 55 | } 56 | 57 | &.square { 58 | border-radius: 0; 59 | } 60 | 61 | &.round { 62 | border-radius: @radius-round; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /lib/components/tabs/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | 3 | export type TabsFlexType = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'; 4 | export declare const TabsProps: { 5 | type: { 6 | type: PropType<"default" | "card">; 7 | default: string; 8 | validator(value: any): boolean; 9 | }; 10 | modelValue: { 11 | type: NumberConstructor; 12 | default: number; 13 | }; 14 | animation: { 15 | type: PropType<"fade" | "none" | "slide">; 16 | default: string; 17 | validator(value: any): boolean; 18 | }; 19 | timeout: { 20 | type: NumberConstructor; 21 | default: number; 22 | }; 23 | ellipsis: { 24 | type: BooleanConstructor; 25 | default: boolean; 26 | }; 27 | border: { 28 | type: BooleanConstructor; 29 | default: boolean; 30 | }; 31 | flex: { 32 | type: PropType; 33 | default: string; 34 | }; 35 | offset: { 36 | type: StringConstructor; 37 | default: string; 38 | }; 39 | activeColor: { 40 | type: StringConstructor; 41 | default: null; 42 | }; 43 | }; 44 | export type TabsPropsType = ExtractPublicPropTypes; 45 | -------------------------------------------------------------------------------- /packages/components/picker/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | 3 | export type PickerOptionsItemType = { 4 | values: string[] 5 | defaultIndex: number 6 | } 7 | 8 | export type PickerActiveType = { 9 | value: string 10 | index: number 11 | } 12 | 13 | export type PickerCrisisType = { 14 | max: number 15 | min: number 16 | } 17 | 18 | export const PickerProps = { 19 | //选择器配置 20 | options: { 21 | type: [Array, Object] as PropType, 22 | default: function () { 23 | return { 24 | values: [], 25 | defaultIndex: 0 26 | } 27 | } 28 | }, 29 | //是否显示标题栏 30 | showToolbar: { 31 | type: Boolean, 32 | default: true 33 | }, 34 | //标题 35 | title: { 36 | type: String, 37 | default: null 38 | }, 39 | //确认文字 40 | confirmText: { 41 | type: String, 42 | default: '确定' 43 | }, 44 | //取消文字 45 | cancelText: { 46 | type: String, 47 | default: '取消' 48 | }, 49 | //是否显示加载状态 50 | loading: { 51 | type: Boolean, 52 | default: false 53 | }, 54 | //可见选项个数 55 | visibleCounts: { 56 | type: Number, 57 | default: 5 58 | }, 59 | //选择框高度 60 | selectHeight: { 61 | type: String, 62 | default: '0.88rem' 63 | } 64 | } 65 | 66 | export type PickerPropsType = ExtractPublicPropTypes 67 | -------------------------------------------------------------------------------- /lib/components/swipe-cell/swipe-cell.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots void; 12 | close: () => void; 13 | }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, { 14 | close: (...args: any[]) => void; 15 | open: (...args: any[]) => void; 16 | }, string, import('vue').PublicProps, Readonly> & { 26 | onClose?: ((...args: any[]) => any) | undefined; 27 | onOpen?: ((...args: any[]) => any) | undefined; 28 | }, { 29 | disabled: boolean; 30 | centerClose: boolean; 31 | }, {}>, { 32 | left?(_: {}): any; 33 | default?(_: {}): any; 34 | right?(_: {}): any; 35 | }>; 36 | export default _default; 37 | type __VLS_WithTemplateSlots = T & { 38 | new (): { 39 | $slots: S; 40 | }; 41 | }; 42 | -------------------------------------------------------------------------------- /packages/components/col/col.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .span(@num) when (@num >=0) { 4 | .mvi-col-@{num} { 5 | width: calc(~'100% / 24 * @{num}'); 6 | } 7 | 8 | .span(@num - 1); 9 | } 10 | 11 | .offset(@num) when (@num >=0) { 12 | .mvi-col-offset-@{num} { 13 | margin-left: calc(~'100% / 24 * @{num}'); 14 | } 15 | 16 | .offset(@num - 1); 17 | } 18 | 19 | .span(24); 20 | .offset(24); 21 | 22 | .spanResponse(@num, @grid) when (@num >=0) { 23 | .mvi-col-@{grid}-@{num} { 24 | width: calc(~'100% / 24 * @{num}'); 25 | } 26 | 27 | .spanResponse(@num - 1, @grid); 28 | } 29 | 30 | .offsetResponse(@num, @grid) when (@num >=0) { 31 | .mvi-col-offset-@{grid}-@{num} { 32 | margin-left: calc(~'100% / 24 * @{num}'); 33 | } 34 | 35 | .offsetResponse(@num - 1, @grid); 36 | } 37 | 38 | .spanResponse(24, xs); 39 | .offsetResponse(24, xs); 40 | 41 | @media only screen and (min-width: 640px) { 42 | .spanResponse(24, sm); 43 | .offsetResponse(24, sm); 44 | } 45 | 46 | @media only screen and (min-width: 992px) { 47 | .spanResponse(24, md); 48 | .offsetResponse(24, md); 49 | } 50 | 51 | @media only screen and (min-width: 1440px) { 52 | .spanResponse(24, lg); 53 | .offsetResponse(24, lg); 54 | } 55 | 56 | @media only screen and (min-width: 1920px) { 57 | .spanResponse(24, xl); 58 | .offsetResponse(24, xl); 59 | } 60 | -------------------------------------------------------------------------------- /packages/components/pull-refresh/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | import { IconPropsType } from '@/components/icon' 3 | 4 | export type PullRefreshStatusType = 0 | 1 | 2 5 | 6 | export const PullRefreshProps = { 7 | //下拉文案 8 | pullingText: { 9 | type: String, 10 | default: '下拉刷新' 11 | }, 12 | //释放文案 13 | loosingText: { 14 | type: String, 15 | default: '释放刷新' 16 | }, 17 | //刷新时显示的文本 18 | loadingText: { 19 | type: String, 20 | default: '正在刷新' 21 | }, 22 | //是否刷新 23 | modelValue: { 24 | type: Boolean, 25 | default: false 26 | }, 27 | //下拉图标 28 | pullingIcon: { 29 | type: [String, Object] as PropType, 30 | default: 'arrow-down' 31 | }, 32 | //释放图标 33 | loosingIcon: { 34 | type: [String, Object] as PropType, 35 | default: 'arrow-up' 36 | }, 37 | //刷新图标 38 | loadingIcon: { 39 | type: [String, Object] as PropType, 40 | default: function () { 41 | return { 42 | type: 'load-e', 43 | spin: true 44 | } 45 | } 46 | }, 47 | //是否禁用 48 | disabled: { 49 | type: Boolean, 50 | default: false 51 | }, 52 | //下拉触发刷新的距离值 53 | distance: { 54 | type: Number, 55 | default: 1.4 56 | } 57 | } 58 | 59 | export type PullRefreshPropsType = ExtractPublicPropTypes 60 | -------------------------------------------------------------------------------- /lib/utils/index.d.ts: -------------------------------------------------------------------------------- 1 | import { App, ComponentInternalInstance, Directive, Ref, Component } from 'vue'; 2 | 3 | export type SFCWithInstall = T & { 4 | install(app: App): void; 5 | }; 6 | /** 7 | * 判断组件默认插槽的内容是否都是指定的组件 8 | * @param instance 9 | * @param childName 10 | * @param names 11 | */ 12 | export declare const componentIsMatch: (instance: ComponentInternalInstance, childName: string, names: string[]) => void; 13 | /** 14 | * 判断组件的父组件是不是指定的组件 15 | * @param children 16 | * @param parentInstance 17 | * @param parentName 18 | * @param names 19 | */ 20 | export declare const parentIsMatch: (children: Ref | null, parentInstance: ComponentInternalInstance | null, parentName: string, names: string[]) => void; 21 | /** 22 | * 给组件增加install属性 23 | * @param component 24 | * @returns 25 | */ 26 | export declare const withInstall: (component: T) => SFCWithInstall; 27 | /** 28 | * 给指令增加install属性 29 | * @param directive 30 | * @param name 31 | */ 32 | export declare const withInstallDirective: (name: string, directive: T) => SFCWithInstall; 33 | /** 34 | * 使用深色模式/浅色模式 35 | * @param dark 36 | */ 37 | export declare const useDark: (dark: boolean) => void; 38 | /** 39 | * 当前是否深色模式 40 | * @returns 41 | */ 42 | export declare const isDark: () => boolean; 43 | -------------------------------------------------------------------------------- /packages/components/circle-progress/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes } from 'vue' 2 | 3 | export const CircleProgressProps = { 4 | //进度值 5 | value: { 6 | type: Number, 7 | default: 0 8 | }, 9 | //最小值 10 | min: { 11 | type: Number, 12 | default: 0 13 | }, 14 | //最大值 15 | max: { 16 | type: Number, 17 | default: 100 18 | }, 19 | //直径 20 | size: { 21 | type: Number, 22 | default: 2 23 | }, 24 | //进度颜色 25 | color: { 26 | type: String, 27 | default: null 28 | }, 29 | //轨道颜色 30 | trackColor: { 31 | type: String, 32 | default: null 33 | }, 34 | //填充色 35 | fill: { 36 | type: String, 37 | default: null 38 | }, 39 | //是否显示动画效果 40 | animation: { 41 | type: Boolean, 42 | default: true 43 | }, 44 | //动画效果的时长 45 | timeout: { 46 | type: Number, 47 | default: 400 48 | }, 49 | //是否显示文字 50 | showTip: { 51 | type: Boolean, 52 | default: false 53 | }, 54 | //中间显示的文本 55 | tipText: { 56 | type: String, 57 | default: null 58 | }, 59 | //进度条厚度 60 | strokeWidth: { 61 | type: Number, 62 | default: 0.2 63 | }, 64 | //进度条端点是否有圆角 65 | round: { 66 | type: Boolean, 67 | default: false 68 | }, 69 | //是否顺时针增加 70 | clockWise: { 71 | type: Boolean, 72 | default: true 73 | } 74 | } 75 | 76 | export type CircleProgressPropsType = ExtractPublicPropTypes 77 | -------------------------------------------------------------------------------- /packages/directives/scroll/scroll.ts: -------------------------------------------------------------------------------- 1 | import Dap from 'dap-util' 2 | /** 3 | * 监听元素滚动条到达顶部或者底部 4 | */ 5 | 6 | export type ScrollOptionsType = { 7 | top?: (...args: any) => void 8 | bottom?: (...args: any) => void 9 | } 10 | 11 | class Scroll { 12 | //滚动元素 13 | private $el: HTMLElement | Window 14 | //到达顶部触发函数 15 | private top?: (...args: any) => void 16 | //到达底部触发函数 17 | private bottom?: (...args: any) => void 18 | //是否已经初始化 19 | private hasInit: boolean = false 20 | 21 | constructor(element: HTMLElement, options: ScrollOptionsType) { 22 | options = Dap.common.isObject(options) ? options : {} 23 | this.$el = element 24 | this.top = options.top 25 | this.bottom = options.bottom 26 | } 27 | 28 | //api：初始化 29 | init() { 30 | if (this.hasInit) { 31 | return 32 | } 33 | this.hasInit = true 34 | if (!Dap.element.isElement(this.$el)) { 35 | this.$el = window 36 | } 37 | if (typeof this.top != 'function') { 38 | this.top = function () {} 39 | } 40 | if (typeof this.bottom != 'function') { 41 | this.bottom = function () {} 42 | } 43 | Dap.element.scrollTopBottomTrigger(this.$el, (res: any) => { 44 | if (res.state == 'top') { 45 | this.top!.apply(this, [res.target]) 46 | } else { 47 | this.bottom!.apply(this, [res.target]) 48 | } 49 | }) 50 | } 51 | } 52 | 53 | export default Scroll 54 | -------------------------------------------------------------------------------- /lib/components/pull-refresh/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | import { IconPropsType } from '../icon'; 3 | 4 | export type PullRefreshStatusType = 0 | 1 | 2; 5 | export declare const PullRefreshProps: { 6 | pullingText: { 7 | type: StringConstructor; 8 | default: string; 9 | }; 10 | loosingText: { 11 | type: StringConstructor; 12 | default: string; 13 | }; 14 | loadingText: { 15 | type: StringConstructor; 16 | default: string; 17 | }; 18 | modelValue: { 19 | type: BooleanConstructor; 20 | default: boolean; 21 | }; 22 | pullingIcon: { 23 | type: PropType; 24 | default: string; 25 | }; 26 | loosingIcon: { 27 | type: PropType; 28 | default: string; 29 | }; 30 | loadingIcon: { 31 | type: PropType; 32 | default: () => { 33 | type: string; 34 | spin: boolean; 35 | }; 36 | }; 37 | disabled: { 38 | type: BooleanConstructor; 39 | default: boolean; 40 | }; 41 | distance: { 42 | type: NumberConstructor; 43 | default: number; 44 | }; 45 | }; 46 | export type PullRefreshPropsType = ExtractPublicPropTypes; 47 | -------------------------------------------------------------------------------- /packages/components/label/label.vue: -------------------------------------------------------------------------------- 1 | 14 | 58 | 59 | -------------------------------------------------------------------------------- /lib/components/icon/icon.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: import('vue').DefineComponent<{ 2 | type: { 3 | type: StringConstructor; 4 | default: string; 5 | }; 6 | spin: { 7 | type: BooleanConstructor; 8 | default: boolean; 9 | }; 10 | url: { 11 | type: StringConstructor; 12 | default: null; 13 | }; 14 | size: { 15 | type: StringConstructor; 16 | default: null; 17 | }; 18 | color: { 19 | type: StringConstructor; 20 | default: null; 21 | }; 22 | }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly>, { 44 | size: string; 45 | type: string; 46 | color: string; 47 | spin: boolean; 48 | url: string; 49 | }, {}>; 50 | export default _default; 51 | -------------------------------------------------------------------------------- /vite-plugin-compile-less-to-css.ts: -------------------------------------------------------------------------------- 1 | import { Plugin } from 'vite' 2 | import { resolve, parse, dirname } from 'path' 3 | import fs from 'fs' 4 | import less from 'less' 5 | 6 | type PluginOptionType = { 7 | include: string[] 8 | outputDir: string 9 | } 10 | 11 | export default (options: PluginOptionType) => { 12 | const { include, outputDir } = options 13 | //编译less为css的函数 14 | const compile = (lessPath: string, cssPath: string) => { 15 | //读取less文件内容 16 | const lessContent = fs.readFileSync(lessPath, 'utf-8') 17 | //编译 18 | less.render( 19 | lessContent, 20 | { 21 | // 确保可以解析 @import 语句 22 | paths: [dirname(lessPath)] 23 | }, 24 | (err, output) => { 25 | //处理失败 26 | if (err || !output) { 27 | console.error(`Failed to compile LESS for ${lessPath}`, err) 28 | return 29 | } 30 | //写入css文件 31 | fs.writeFileSync(cssPath, output.css, 'utf-8') 32 | console.log(`Compiled LESS for ${lessPath} to ${cssPath}`) 33 | } 34 | ) 35 | } 36 | return { 37 | name: 'vite-plugin-compile-less-to-css', 38 | buildEnd() { 39 | //遍历less文件地址数组 40 | include.forEach(lessPath => { 41 | //获取文件名（不带扩展名） 42 | const { name } = parse(lessPath) 43 | //构建CSS文件的输出路径 44 | const cssPath = resolve(outputDir, `${name}.css`) 45 | //编译 LESS 到 CSS 46 | compile(lessPath, cssPath) 47 | }) 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /packages/components/carousel/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | 3 | export type CarouselIndicatorsType = { 4 | //是否显示 5 | show?: boolean 6 | //激活颜色 7 | active?: string 8 | //未激活颜色 9 | inactive?: string 10 | } 11 | 12 | export const CarouselProps = { 13 | //当前轮播序列 14 | modelValue: { 15 | type: Number, 16 | default: 0 17 | }, 18 | //是否自动轮播 19 | autoplay: { 20 | type: Boolean, 21 | default: false 22 | }, 23 | //是否循环轮播 24 | loop: { 25 | type: Boolean, 26 | default: false 27 | }, 28 | //自动轮播的切换速度 29 | speed: { 30 | type: Number, 31 | default: 500 32 | }, 33 | //自定轮播的间隔 34 | interval: { 35 | type: Number, 36 | default: 3000 37 | }, 38 | //模式 39 | mode: { 40 | type: String as PropType<'slide' | 'fade'>, 41 | default: 'slide', 42 | validator(value: any) { 43 | return ['slide', 'fade'].includes(value) 44 | } 45 | }, 46 | //分页指示器配置 47 | indicators: { 48 | type: [Boolean, Object] as PropType, 49 | default: false 50 | }, 51 | //前后控制器是否显示 52 | controls: { 53 | type: Boolean, 54 | default: false 55 | }, 56 | //滑动模式下是否纵向轮播 57 | vertical: { 58 | type: Boolean, 59 | default: false 60 | }, 61 | //滑动模式下是否可以通过手势触摸滑动 62 | touchable: { 63 | type: Boolean, 64 | default: true 65 | } 66 | } 67 | 68 | export type CarouselPropsType = ExtractPublicPropTypes 69 | -------------------------------------------------------------------------------- /lib/default.css: -------------------------------------------------------------------------------- 1 | /** 2 | * 这里是对HTML里的诸多元素进行默认样式设置的 3 | */ 4 | /** 5 | * mvi组件库中常用的css样式配置 6 | */ 7 | *, 8 | *::before, 9 | *::after { 10 | box-sizing: border-box; 11 | -webkit-tap-highlight-color: transparent; 12 | outline: none; 13 | } 14 | html, 15 | body { 16 | font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Roboto, 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif; 17 | color: var(--mvi-font-color-default); 18 | margin: 0; 19 | padding: 0; 20 | width: 100%; 21 | height: 100%; 22 | -webkit-font-smoothing: antialiased; 23 | text-size-adjust: none; 24 | } 25 | body { 26 | background-color: var(--mvi-bg-color-default); 27 | font-size: 0.28rem !important; 28 | overflow: hidden; 29 | line-height: 1.5; 30 | } 31 | h1, 32 | h2, 33 | h3, 34 | h4, 35 | h5, 36 | h6, 37 | p { 38 | margin: 0 0 0.2rem 0; 39 | line-height: 1.5; 40 | } 41 | h1 { 42 | font-size: 0.54rem; 43 | } 44 | h2 { 45 | font-size: 0.48rem; 46 | } 47 | h3 { 48 | font-size: 0.44rem; 49 | } 50 | h4 { 51 | font-size: 0.4rem; 52 | } 53 | h5 { 54 | font-size: 0.36rem; 55 | } 56 | h6 { 57 | font-size: 0.32rem; 58 | } 59 | a { 60 | text-decoration: none; 61 | color: var(--mvi-font-color-link); 62 | } 63 | ul, 64 | ol { 65 | margin: 0 0 0.3rem; 66 | padding: 0.1rem 0.2rem 0.1rem 0.4rem; 67 | } 68 | li { 69 | margin-bottom: 0.2rem; 70 | } 71 | [disabled] { 72 | cursor: not-allowed !important; 73 | } 74 | -------------------------------------------------------------------------------- /lib/components/carousel/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | 3 | export type CarouselIndicatorsType = { 4 | show?: boolean; 5 | active?: string; 6 | inactive?: string; 7 | }; 8 | export declare const CarouselProps: { 9 | modelValue: { 10 | type: NumberConstructor; 11 | default: number; 12 | }; 13 | autoplay: { 14 | type: BooleanConstructor; 15 | default: boolean; 16 | }; 17 | loop: { 18 | type: BooleanConstructor; 19 | default: boolean; 20 | }; 21 | speed: { 22 | type: NumberConstructor; 23 | default: number; 24 | }; 25 | interval: { 26 | type: NumberConstructor; 27 | default: number; 28 | }; 29 | mode: { 30 | type: PropType<"fade" | "slide">; 31 | default: string; 32 | validator(value: any): boolean; 33 | }; 34 | indicators: { 35 | type: PropType; 36 | default: boolean; 37 | }; 38 | controls: { 39 | type: BooleanConstructor; 40 | default: boolean; 41 | }; 42 | vertical: { 43 | type: BooleanConstructor; 44 | default: boolean; 45 | }; 46 | touchable: { 47 | type: BooleanConstructor; 48 | default: boolean; 49 | }; 50 | }; 51 | export type CarouselPropsType = ExtractPublicPropTypes; 52 | -------------------------------------------------------------------------------- /lib/components/triangle/triangle.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: import('vue').DefineComponent<{ 2 | background: { 3 | type: StringConstructor; 4 | default: null; 5 | }; 6 | borderColor: { 7 | type: StringConstructor; 8 | default: null; 9 | }; 10 | size: { 11 | type: StringConstructor; 12 | default: string; 13 | }; 14 | placement: { 15 | type: import('vue').PropType<"left" | "top" | "bottom" | "right">; 16 | default: string; 17 | validator(value: any): boolean; 18 | }; 19 | }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly; 34 | default: string; 35 | validator(value: any): boolean; 36 | }; 37 | }>>, { 38 | size: string; 39 | placement: "left" | "top" | "bottom" | "right"; 40 | background: string; 41 | borderColor: string; 42 | }, {}>; 43 | export default _default; 44 | -------------------------------------------------------------------------------- /lib/components/picker/props.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue'; 2 | 3 | export type PickerOptionsItemType = { 4 | values: string[]; 5 | defaultIndex: number; 6 | }; 7 | export type PickerActiveType = { 8 | value: string; 9 | index: number; 10 | }; 11 | export type PickerCrisisType = { 12 | max: number; 13 | min: number; 14 | }; 15 | export declare const PickerProps: { 16 | options: { 17 | type: PropType; 18 | default: () => { 19 | values: never[]; 20 | defaultIndex: number; 21 | }; 22 | }; 23 | showToolbar: { 24 | type: BooleanConstructor; 25 | default: boolean; 26 | }; 27 | title: { 28 | type: StringConstructor; 29 | default: null; 30 | }; 31 | confirmText: { 32 | type: StringConstructor; 33 | default: string; 34 | }; 35 | cancelText: { 36 | type: StringConstructor; 37 | default: string; 38 | }; 39 | loading: { 40 | type: BooleanConstructor; 41 | default: boolean; 42 | }; 43 | visibleCounts: { 44 | type: NumberConstructor; 45 | default: number; 46 | }; 47 | selectHeight: { 48 | type: StringConstructor; 49 | default: string; 50 | }; 51 | }; 52 | export type PickerPropsType = ExtractPublicPropTypes; 53 | -------------------------------------------------------------------------------- /packages/components/badge/badge.less: -------------------------------------------------------------------------------- 1 | @import '@/css/base.less'; 2 | 3 | .mvi-badge { 4 | position: relative; 5 | display: inline-block; 6 | 7 | &.block { 8 | display: block; 9 | width: 100%; 10 | } 11 | 12 | .mvi-badge-el { 13 | position: absolute; 14 | display: inline-flex; 15 | justify-content: center; 16 | align-items: center; 17 | background: var(--mvi-error-normal); 18 | color: #fff; 19 | padding: 0 @mp-xs; 20 | border-radius: 999rem; 21 | font-size: @font-size-small; 22 | line-height: 1; 23 | min-width: 0.34rem; 24 | height: 0.34rem; 25 | z-index: 40; 26 | 27 | &[data-placement='top-right'] { 28 | left: auto; 29 | bottom: auto; 30 | right: 0; 31 | top: 0; 32 | transform: translate(50%, -50%); 33 | } 34 | 35 | &[data-placement='top-left'] { 36 | left: 0; 37 | top: 0; 38 | right: auto; 39 | bottom: auto; 40 | transform: translate(-50%, -50%); 41 | } 42 | 43 | &[data-placement='bottom-right'] { 44 | right: 0; 45 | bottom: 0; 46 | left: auto; 47 | top: auto; 48 | transform: translate(50%, 50%); 49 | } 50 | 51 | &[data-placement='bottom-left'] { 52 | left: 0; 53 | bottom: 0; 54 | right: auto; 55 | top: auto; 56 | transform: translate(-50%, 50%); 57 | } 58 | 59 | &.mvi-badge-dot { 60 | padding: 0; 61 | border-radius: 50%; 62 | min-width: 0; 63 | width: 0.18rem; 64 | height: 0.18rem; 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /lib/components/transition-slide/transition-slide.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: __VLS_WithTemplateSlots void; 12 | "slide-down": (...args: any[]) => void; 13 | "before-slide-up": (...args: any[]) => void; 14 | "slide-up": (...args: any[]) => void; 15 | }, string, import('vue').PublicProps, Readonly> & { 25 | "onBefore-slide-down"?: ((...args: any[]) => any) | undefined; 26 | "onSlide-down"?: ((...args: any[]) => any) | undefined; 27 | "onBefore-slide-up"?: ((...args: any[]) => any) | undefined; 28 | "onSlide-up"?: ((...args: any[]) => any) | undefined; 29 | }, { 30 | timeout: number; 31 | expand: boolean; 32 | }, {}>, { 33 | default?(_: {}): any; 34 | }>; 35 | export default _default; 36 | type __VLS_WithTemplateSlots = T & { 37 | new (): { 38 | $slots: S; 39 | }; 40 | }; 41 | -------------------------------------------------------------------------------- /packages/components/tabs/props.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPublicPropTypes, PropType } from 'vue' 2 | export type TabsFlexType = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' 3 | 4 | export const TabsProps = { 5 | //tabs类型 6 | type: { 7 | type: String as PropType<'default' | 'card'>, 8 | default: 'default', 9 | validator(value: any) { 10 | return ['default', 'card'].includes(value) 11 | } 12 | }, 13 | //激活的tab序列 14 | modelValue: { 15 | type: Number, 16 | default: 0 17 | }, 18 | //tab切换动画 19 | animation: { 20 | type: String as PropType<'none' | 'slide' | 'fade'>, 21 | default: 'none', 22 | validator(value: any) { 23 | return ['none', 'slide', 'fade'].includes(value) 24 | } 25 | }, 26 | //当animation为slide或者fade时的动画时长 27 | timeout: { 28 | type: Number, 29 | default: 500 30 | }, 31 | //当标题过长时是否省略，标题栏最大长度只有1/n，n表示标题栏个数 32 | ellipsis: { 33 | type: Boolean, 34 | default: true 35 | }, 36 | //type="default"下是否显示选项卡头部下边框 37 | border: { 38 | type: Boolean, 39 | default: false 40 | }, 41 | //type="default"下布局方式 42 | flex: { 43 | type: String as PropType, 44 | default: 'space-between' 45 | }, 46 | //type="default"下每个选项卡头部距离左侧的距离 47 | offset: { 48 | type: String, 49 | default: '0' 50 | }, 51 | //激活颜色 52 | activeColor: { 53 | type: String, 54 | default: null 55 | } 56 | } 57 | 58 | export type TabsPropsType = ExtractPublicPropTypes 59 | -------------------------------------------------------------------------------- /lib/components/icon/index.d.ts: -------------------------------------------------------------------------------- 1 | export type * from './props'; 2 | declare const Icon: import('../../utils').SFCWithInstall>, { 45 | size: string; 46 | type: string; 47 | color: string; 48 | spin: boolean; 49 | url: string; 50 | }, {}>>; 51 | export { Icon, Icon as default }; 52 | -------------------------------------------------------------------------------- /lib/components/loading-bar/loading-bar.vue.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: import('vue').DefineComponent<{ 2 | color: { 3 | type: StringConstructor; 4 | default: null; 5 | }; 6 | zIndex: { 7 | type: NumberConstructor; 8 | default: null; 9 | }; 10 | __remove: { 11 | type: import('vue').PropType<() => void>; 12 | default: () => () => void; 13 | }; 14 | __init: { 15 | type: import('vue').PropType<(vm: import('vue').ComponentInternalInstance) => void>; 16 | default: () => () => void; 17 | }; 18 | }, { 19 | leave: () => void; 20 | }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly void>; 31 | default: () => () => void; 32 | }; 33 | __init: { 34 | type: import('vue').PropType<(vm: import('vue').ComponentInternalInstance) => void>; 35 | default: () => () => void; 36 | }; 37 | }>>, { 38 | zIndex: number; 39 | color: string; 40 | __remove: () => void; 41 | __init: (vm: import('vue').ComponentInternalInstance) => void; 42 | }, {}>; 43 | export default _default; 44 | --------------------------------------------------------------------------------