├── src ├── packages │ ├── check-box │ │ ├── README.md │ │ ├── README.en-US.md │ │ └── index.ts │ ├── check-list │ │ ├── README.md │ │ ├── README.en-US.md │ │ └── index.ts │ ├── field-item │ │ ├── README.md │ │ ├── README.en-US.md │ │ └── index.ts │ ├── radio-box │ │ ├── README.md │ │ ├── README.en-US.md │ │ └── index.ts │ ├── radio-list │ │ ├── README.md │ │ ├── README.en-US.md │ │ └── index.ts │ ├── tab-pane │ │ ├── README.md │ │ ├── README.en-US.md │ │ └── index.ts │ ├── check-group │ │ ├── README.md │ │ ├── README.en-US.md │ │ └── index.ts │ ├── image-uploader │ │ ├── README.md │ │ ├── README.en-US.md │ │ ├── index.ts │ │ ├── __test__ │ │ │ └── index.spec.ts │ │ └── demo │ │ │ ├── demo1.vue │ │ │ ├── demo3.vue │ │ │ ├── demo2.vue │ │ │ ├── demo4.vue │ │ │ └── demo0.vue │ ├── popup-title-bar │ │ ├── README.md │ │ ├── README.en-US.md │ │ └── index.ts │ ├── radio-group │ │ ├── README.md │ │ ├── README.en-US.md │ │ └── index.ts │ ├── scroll-view-pulldown │ │ ├── README.md │ │ ├── README.en-US.md │ │ └── index.ts │ ├── scroll-view-pullup │ │ ├── README.md │ │ ├── README.en-US.md │ │ └── index.ts │ ├── directives │ │ └── index.ts │ ├── composable │ │ ├── index.ts │ │ └── show.ts │ ├── popup │ │ ├── index.styl │ │ ├── index.ts │ │ ├── title-bar.styl │ │ └── demo │ │ │ └── index.vue │ ├── icon │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ ├── index.styl │ │ ├── index.ts │ │ └── demo │ │ │ ├── demo1.vue │ │ │ └── demo3.vue │ ├── agree │ │ ├── index.styl │ │ ├── index.ts │ │ ├── README.md │ │ ├── README.en-US.md │ │ └── demo │ │ │ ├── demo1.vue │ │ │ ├── index.vue │ │ │ └── demo2.vue │ ├── number-keyboard │ │ ├── images │ │ │ ├── keyboard-del.png │ │ │ └── keyboard-hide.png │ │ ├── index.ts │ │ ├── demo │ │ │ ├── demo4.vue │ │ │ ├── demo3.vue │ │ │ ├── demo1.vue │ │ │ ├── demo0.vue │ │ │ └── demo2.vue │ │ └── index.styl │ ├── landscape │ │ ├── index.styl │ │ ├── index.ts │ │ └── README.md │ ├── selector │ │ ├── index.styl │ │ └── index.ts │ ├── image-viewer │ │ ├── index.styl │ │ ├── index.ts │ │ ├── README.md │ │ ├── demo │ │ │ └── demo0.vue │ │ └── README.en-US.md │ ├── slider │ │ ├── index.styl │ │ ├── index.ts │ │ ├── demo │ │ │ ├── demo0.vue │ │ │ ├── demo2.vue │ │ │ ├── demo1.vue │ │ │ ├── demo4.vue │ │ │ ├── demo3.vue │ │ │ └── index.vue │ │ └── README.md │ ├── tab-picker │ │ ├── index.styl │ │ └── index.ts │ ├── tag │ │ ├── index.ts │ │ ├── index.styl │ │ ├── demo │ │ │ ├── demo1.vue │ │ │ ├── demo2.vue │ │ │ ├── demo3.vue │ │ │ └── index.vue │ │ └── README.md │ ├── tip │ │ ├── index.ts │ │ ├── index.styl │ │ ├── demo │ │ │ ├── demo0.vue │ │ │ ├── demo1.vue │ │ │ └── demo2.vue │ │ └── README.md │ ├── bill │ │ ├── index.ts │ │ ├── index.styl │ │ ├── __test__ │ │ │ └── index.spec.ts │ │ ├── README.md │ │ ├── README.en-US.md │ │ └── demo │ │ │ └── index.vue │ ├── steps │ │ ├── index.ts │ │ ├── demo │ │ │ ├── demo0.vue │ │ │ ├── demo1.vue │ │ │ ├── demo6.vue │ │ │ ├── demo5.vue │ │ │ ├── demo3.vue │ │ │ ├── demo4.vue │ │ │ ├── demo7.vue │ │ │ └── index.vue │ │ └── index.styl │ ├── amount │ │ ├── index.ts │ │ ├── demo │ │ │ ├── demo1.vue │ │ │ ├── demo3.vue │ │ │ ├── demo2.vue │ │ │ └── index.vue │ │ └── README.md │ ├── button │ │ ├── index.ts │ │ └── demo │ │ │ ├── demo2.vue │ │ │ ├── demo0.vue │ │ │ ├── demo3.vue │ │ │ ├── demo1.vue │ │ │ └── demo4.vue │ ├── switch │ │ ├── index.ts │ │ ├── index.styl │ │ ├── README.md │ │ ├── README.en-US.md │ │ └── demo │ │ │ ├── demo0.vue │ │ │ └── index.vue │ ├── tab-bar │ │ ├── index.ts │ │ ├── index.styl │ │ └── demo │ │ │ └── index.vue │ ├── captcha │ │ ├── index.ts │ │ ├── index.styl │ │ └── demo │ │ │ └── index.vue │ ├── cashier │ │ ├── index.ts │ │ ├── __test__ │ │ │ └── index.spec.ts │ │ └── demo │ │ │ └── index.vue │ ├── stepper │ │ ├── index.ts │ │ ├── index.styl │ │ └── demo │ │ │ ├── demo0.vue │ │ │ ├── demo1.vue │ │ │ ├── demo4.vue │ │ │ ├── demo5.vue │ │ │ ├── demo2.vue │ │ │ └── demo3.vue │ ├── cell-item │ │ ├── index.ts │ │ ├── index.styl │ │ ├── demo │ │ │ ├── demo0.vue │ │ │ └── index.vue │ │ └── README.md │ ├── drop-menu │ │ ├── index.ts │ │ ├── index.styl │ │ └── demo │ │ │ └── demo0.vue │ ├── progress │ │ ├── index.ts │ │ ├── demo │ │ │ └── demo0.vue │ │ └── index.vue │ ├── skeleton │ │ ├── index.ts │ │ ├── demo │ │ │ ├── demo1.vue │ │ │ ├── demo0.vue │ │ │ └── index.vue │ │ └── README.md │ ├── action-bar │ │ ├── index.ts │ │ ├── index.styl │ │ └── demo │ │ │ ├── demo0.vue │ │ │ ├── demo1.vue │ │ │ ├── demo2.vue │ │ │ └── demo3.vue │ ├── notice-bar │ │ ├── index.ts │ │ ├── index.styl │ │ └── demo │ │ │ ├── demo0.vue │ │ │ ├── demo3.vue │ │ │ ├── demo1.vue │ │ │ ├── demo6.vue │ │ │ ├── demo2.vue │ │ │ ├── demo5.vue │ │ │ ├── demo7.vue │ │ │ ├── demo4.vue │ │ │ └── index.vue │ ├── water-mark │ │ ├── index.ts │ │ ├── README.md │ │ └── demo │ │ │ └── demo0.vue │ ├── date-picker │ │ ├── index.ts │ │ ├── demo │ │ │ ├── demo1.vue │ │ │ ├── demo0.vue │ │ │ └── demo2.vue │ │ └── __test__ │ │ │ └── index.spec.ts │ ├── detail-item │ │ ├── index.ts │ │ ├── index.styl │ │ ├── README.md │ │ ├── README.en-US.md │ │ ├── demo │ │ │ └── index.vue │ │ └── __test__ │ │ │ └── index.spec.ts │ ├── result-page │ │ ├── index.ts │ │ ├── index.styl │ │ └── demo │ │ │ ├── demo1.vue │ │ │ ├── demo0.vue │ │ │ ├── demo3.vue │ │ │ └── demo2.vue │ ├── toast │ │ ├── index.styl │ │ └── demo │ │ │ ├── demo1.vue │ │ │ ├── demo2.vue │ │ │ ├── demo5.vue │ │ │ ├── demo0.vue │ │ │ ├── demo4.vue │ │ │ ├── demo3.vue │ │ │ └── demo6.vue │ ├── transition │ │ ├── index.ts │ │ ├── README.md │ │ ├── README.en-US.md │ │ └── demo │ │ │ └── index.vue │ ├── swiper │ │ ├── index.ts │ │ └── demo │ │ │ └── index.vue │ ├── textarea-item │ │ ├── index.ts │ │ └── index.styl │ ├── codebox │ │ ├── index.ts │ │ ├── demo │ │ │ ├── demo0.vue │ │ │ ├── demo1.vue │ │ │ ├── demo2.vue │ │ │ ├── demo3.vue │ │ │ └── index.vue │ │ └── index.styl │ ├── utils │ │ ├── debug.ts │ │ ├── index.ts │ │ ├── format.ts │ │ ├── env.ts │ │ ├── example │ │ │ └── index.ts │ │ ├── constants.ts │ │ └── trigger-event.ts │ ├── tabs │ │ ├── index.ts │ │ ├── pane.vue │ │ ├── __test__ │ │ │ └── index.spec.ts │ │ └── demo │ │ │ └── index.vue │ ├── field │ │ ├── index.ts │ │ ├── item.styl │ │ ├── index.styl │ │ └── demo │ │ │ └── index.vue │ ├── picker │ │ ├── index.ts │ │ ├── index.styl │ │ └── demo │ │ │ ├── demo0.vue │ │ │ ├── data │ │ │ └── simple.js │ │ │ └── index.vue │ ├── scroll-view │ │ ├── index.ts │ │ └── pull-up.vue │ ├── input-item │ │ ├── index.ts │ │ ├── demo │ │ │ └── demo5.vue │ │ └── index.styl │ ├── activity-indicator │ │ ├── index.ts │ │ └── spinner.vue │ ├── check │ │ ├── index.styl │ │ ├── index.ts │ │ ├── demo │ │ │ ├── demo0.vue │ │ │ ├── demo3.vue │ │ │ ├── demo1.vue │ │ │ └── index.vue │ │ └── group.vue │ ├── radio │ │ ├── index.ts │ │ ├── index.styl │ │ ├── demo │ │ │ ├── demo0.vue │ │ │ ├── demo4.vue │ │ │ ├── demo2.vue │ │ │ ├── index.vue │ │ │ └── demo1.vue │ │ └── group.vue │ ├── action-sheet │ │ ├── index.styl │ │ └── demo │ │ │ └── demo0.vue │ ├── image-reader │ │ ├── index.ts │ │ └── __test__ │ │ │ └── index.spec.ts │ ├── dialog │ │ ├── index.styl │ │ └── demo │ │ │ └── index.vue │ └── locale │ │ └── index.ts ├── styles │ └── index.styl ├── global.d.ts ├── main.ts ├── shims-vue.d.ts └── assets │ └── stylus │ └── app.styl ├── .npmrc ├── .yarnrc ├── .vscode └── settings.json ├── .prettierignore ├── public └── favicon.ico ├── .eslintignore ├── docs ├── public │ ├── favicon.png │ └── qrcode_mand-mobile.github.io.png ├── .vitepress │ └── theme │ │ ├── components │ │ ├── Badge.vue │ │ ├── ThemeSwitch.vue │ │ ├── Layout.vue │ │ └── QrCode.vue │ │ └── index.ts ├── index.md ├── zh-CN │ └── index.md └── en-US │ └── index.md ├── .prettierrc ├── .gitignore ├── scripts ├── _template │ ├── index.vue.hbs │ ├── demo │ │ └── demo0.vue.hbs │ ├── index.ts.hbs │ └── __test__ │ │ └── index.spec.ts.hbs ├── gen-component.ts └── plugin │ └── rollup-plugin-gencss.js ├── CHANGELOG.md ├── CHANGELOG.en-US.md ├── .github └── workflows │ ├── unit-test.yml │ ├── release.yml │ └── build.yml ├── postcss.config.js ├── babel.config.js └── tsconfig.json /src/packages/check-box/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/check-list/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/field-item/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/radio-box/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/radio-list/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/tab-pane/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/check-box/README.en-US.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/check-group/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/image-uploader/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/popup-title-bar/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/radio-box/README.en-US.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/radio-group/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/tab-pane/README.en-US.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ -------------------------------------------------------------------------------- /src/packages/check-group/README.en-US.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/check-list/README.en-US.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/field-item/README.en-US.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/image-uploader/README.en-US.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/radio-group/README.en-US.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/radio-list/README.en-US.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/scroll-view-pulldown/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/scroll-view-pullup/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.yarnrc: -------------------------------------------------------------------------------- 1 | registry "https://registry.npmjs.org" -------------------------------------------------------------------------------- /src/packages/popup-title-bar/README.en-US.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/scroll-view-pullup/README.en-US.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/packages/scroll-view-pulldown/README.en-US.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "vetur.validation.script": false 3 | } -------------------------------------------------------------------------------- /src/packages/directives/index.ts: -------------------------------------------------------------------------------- 1 | export * from './click-outside' 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | # **/*.vue 3 | logs/* 4 | .nuxt 5 | nuxt.config.js -------------------------------------------------------------------------------- /src/packages/composable/index.ts: -------------------------------------------------------------------------------- 1 | export * from './show' 2 | export * from './use-css-var' 3 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mand-mobile/mand-mobile-next/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | **/*.json 3 | **/*.styl 4 | **/*.html 5 | .eslintrc.js 6 | !.vitepress 7 | -------------------------------------------------------------------------------- /docs/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mand-mobile/mand-mobile-next/HEAD/docs/public/favicon.png -------------------------------------------------------------------------------- /src/packages/popup/index.styl: -------------------------------------------------------------------------------- 1 | .md-popup 2 | --md-popup-mask-bg: var(--md-color-mask) 3 | --md-popup-zindex: 1000 -------------------------------------------------------------------------------- /src/packages/icon/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mand-mobile/mand-mobile-next/HEAD/src/packages/icon/iconfont.ttf -------------------------------------------------------------------------------- /src/packages/icon/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mand-mobile/mand-mobile-next/HEAD/src/packages/icon/iconfont.woff -------------------------------------------------------------------------------- /src/styles/index.styl: -------------------------------------------------------------------------------- 1 | @import './fonts.styl' 2 | @import './variable.styl' 3 | @import './util.styl' 4 | @import './theme.component.styl' 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "semi": false, 4 | "printWidth": 60, 5 | "tabWidth": 2, 6 | "trailingComma": "es5" 7 | } 8 | -------------------------------------------------------------------------------- /docs/public/qrcode_mand-mobile.github.io.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mand-mobile/mand-mobile-next/HEAD/docs/public/qrcode_mand-mobile.github.io.png -------------------------------------------------------------------------------- /src/packages/agree/index.styl: -------------------------------------------------------------------------------- 1 | .md-agree 2 | --md-agree-fill: var(--md-color-primary) 3 | --md-agree-disabled-opacity: var(--md-opacity-disabled) 4 | -------------------------------------------------------------------------------- /src/packages/number-keyboard/images/keyboard-del.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mand-mobile/mand-mobile-next/HEAD/src/packages/number-keyboard/images/keyboard-del.png -------------------------------------------------------------------------------- /src/packages/number-keyboard/images/keyboard-hide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mand-mobile/mand-mobile-next/HEAD/src/packages/number-keyboard/images/keyboard-hide.png -------------------------------------------------------------------------------- /src/packages/landscape/index.styl: -------------------------------------------------------------------------------- 1 | .md-landscape 2 | --md-landscape-width: 540px 3 | --md-landscape-fullscreen-bg: var(--md-color-bg-inverse) 4 | --md-landscape-zindex: 1600 -------------------------------------------------------------------------------- /src/packages/selector/index.styl: -------------------------------------------------------------------------------- 1 | .md-selector 2 | --md-selector-disabled-opacity: .2 3 | --md-selector-active-color: var(--md-color-primary) 4 | --md-selector-zindex: 1102 -------------------------------------------------------------------------------- /src/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'virtual:generated-pages' { 2 | import { RouteRecordRaw } from 'vue-router' 3 | const routes: RouteRecordRaw[] 4 | export default routes 5 | } 6 | -------------------------------------------------------------------------------- /src/packages/image-viewer/index.styl: -------------------------------------------------------------------------------- 1 | .md-image-viewer-box 2 | --md-image-viewer-index-font-size: 32px 3 | --md-image-viewer-index-bottom: 100px 4 | --md-image-viewer-zindex: 1001 -------------------------------------------------------------------------------- /src/packages/icon/index.styl: -------------------------------------------------------------------------------- 1 | .md-icon 2 | --md-icon-size-xxs: 16px 3 | --md-icon-size-xs: 20px 4 | --md-icon-size-sm: 24px 5 | --md-icon-size-md: 32px 6 | --md-icon-size-lg: 42px 7 | -------------------------------------------------------------------------------- /src/packages/slider/index.styl: -------------------------------------------------------------------------------- 1 | .md-slider 2 | --md-slider-bg-base: var(--md-color-bg-base) 3 | --md-slider-bg-tap: var(--md-color-primary) 4 | --md-slider-handle-bg: var(--md-color-bg-inverse) -------------------------------------------------------------------------------- /src/packages/tab-picker/index.styl: -------------------------------------------------------------------------------- 1 | .md-tab-picker 2 | --md-tab-picker-height: 500px 3 | --md-tab-picker-h-gap: var(--md-h-gap-sl) 4 | --md-tab-picker-bg: var(--md-color-bg-inverse) 5 | --md-tab-picker-zindex: 1102 -------------------------------------------------------------------------------- /src/packages/tag/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Tag from './index.vue' 3 | 4 | Tag.install = (app: App) => { 5 | app.component(Tag.name, Tag) 6 | } 7 | 8 | export { Tag } 9 | export default Tag 10 | -------------------------------------------------------------------------------- /src/packages/tip/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Tip from './index.vue' 3 | 4 | Tip.install = (app: App) => { 5 | app.component(Tip.name, Tip) 6 | } 7 | 8 | export { Tip } 9 | export default Tip 10 | -------------------------------------------------------------------------------- /src/packages/bill/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Bill from './index.vue' 3 | 4 | Bill.install = (app: App) => { 5 | app.component(Bill.name, Bill) 6 | } 7 | 8 | export { Bill } 9 | export default Bill 10 | -------------------------------------------------------------------------------- /src/packages/icon/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Icon from './index.vue' 3 | 4 | Icon.install = (app: App) => { 5 | app.component(Icon.name, Icon) 6 | } 7 | 8 | export { Icon } 9 | export default Icon 10 | -------------------------------------------------------------------------------- /src/packages/agree/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Agree from './index.vue' 3 | 4 | Agree.install = (app: App) => { 5 | app.component(Agree.name, Agree) 6 | } 7 | 8 | export { Agree } 9 | export default Agree 10 | -------------------------------------------------------------------------------- /src/packages/steps/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Steps from './index.vue' 3 | 4 | Steps.install = (app: App) => { 5 | app.component(Steps.name, Steps) 6 | } 7 | 8 | export { Steps } 9 | export default Steps 10 | -------------------------------------------------------------------------------- /src/packages/amount/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Amount from './index.vue' 3 | 4 | Amount.install = (app: App) => { 5 | app.component(Amount.name, Amount) 6 | } 7 | 8 | export { Amount } 9 | export default Amount 10 | -------------------------------------------------------------------------------- /src/packages/button/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Button from './index.vue' 3 | 4 | Button.install = (app: App) => { 5 | app.component(Button.name, Button) 6 | } 7 | 8 | export { Button } 9 | export default Button 10 | -------------------------------------------------------------------------------- /src/packages/slider/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Slider from './index.vue' 3 | 4 | Slider.install = (app: App) => { 5 | app.component(Slider.name, Slider) 6 | } 7 | 8 | export { Slider } 9 | export default Slider 10 | -------------------------------------------------------------------------------- /src/packages/switch/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Switch from './index.vue' 3 | 4 | Switch.install = (app: App) => { 5 | app.component(Switch.name, Switch) 6 | } 7 | 8 | export { Switch } 9 | export default Switch 10 | -------------------------------------------------------------------------------- /src/packages/tab-bar/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import TabBar from './index.vue' 3 | 4 | TabBar.install = (app: App) => { 5 | app.component(TabBar.name, TabBar) 6 | } 7 | 8 | export { TabBar } 9 | export default TabBar 10 | -------------------------------------------------------------------------------- /src/packages/captcha/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Captcha from './index.vue' 3 | 4 | Captcha.install = (app: App) => { 5 | app.component(Captcha.name, Captcha) 6 | } 7 | 8 | export { Captcha } 9 | export default Captcha 10 | -------------------------------------------------------------------------------- /src/packages/cashier/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Cashier from './index.vue' 3 | 4 | Cashier.install = (app: App) => { 5 | app.component(Cashier.name, Cashier) 6 | } 7 | 8 | export { Cashier } 9 | export default Cashier 10 | -------------------------------------------------------------------------------- /src/packages/stepper/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Stepper from './index.vue' 3 | 4 | Stepper.install = (app: App) => { 5 | app.component(Stepper.name, Stepper) 6 | } 7 | 8 | export { Stepper } 9 | export default Stepper 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | example/* 5 | dist-ssr 6 | *.local 7 | mand-mobile.ts 8 | coverage 9 | lib 10 | es 11 | mand-mobile.min.css 12 | mand-mobile-next.min.css 13 | docs/zh-CN/components 14 | docs/en-US/components 15 | .history -------------------------------------------------------------------------------- /src/packages/cell-item/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import CellItem from './index.vue' 3 | 4 | CellItem.install = (app: App) => { 5 | app.component(CellItem.name, CellItem) 6 | } 7 | 8 | export { CellItem } 9 | export default CellItem 10 | -------------------------------------------------------------------------------- /src/packages/check-box/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import { CheckBox } from '../check' 3 | 4 | CheckBox.install = (app: App) => { 5 | app.component(CheckBox.name, CheckBox) 6 | } 7 | 8 | export { CheckBox } 9 | export default CheckBox 10 | -------------------------------------------------------------------------------- /src/packages/drop-menu/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import DropMenu from './index.vue' 3 | 4 | DropMenu.install = (app: App) => { 5 | app.component(DropMenu.name, DropMenu) 6 | } 7 | 8 | export { DropMenu } 9 | export default DropMenu 10 | -------------------------------------------------------------------------------- /src/packages/progress/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Progress from './index.vue' 3 | 4 | Progress.install = (app: App) => { 5 | app.component(Progress.name, Progress) 6 | } 7 | 8 | export { Progress } 9 | export default Progress 10 | -------------------------------------------------------------------------------- /src/packages/radio-box/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import { RadioBox } from '../radio' 3 | 4 | RadioBox.install = (app: App) => { 5 | app.component(RadioBox.name, RadioBox) 6 | } 7 | 8 | export { RadioBox } 9 | export default RadioBox 10 | -------------------------------------------------------------------------------- /src/packages/selector/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Selector from './index.vue' 3 | 4 | Selector.install = (app: App) => { 5 | app.component(Selector.name, Selector) 6 | } 7 | 8 | export { Selector } 9 | export default Selector 10 | -------------------------------------------------------------------------------- /src/packages/skeleton/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Skeleton from './index.vue' 3 | 4 | Skeleton.install = (app: App) => { 5 | app.component(Skeleton.name, Skeleton) 6 | } 7 | 8 | export { Skeleton } 9 | export default Skeleton 10 | -------------------------------------------------------------------------------- /src/packages/landscape/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Landscape from './index.vue' 3 | 4 | Landscape.install = (app: App) => { 5 | app.component(Landscape.name, Landscape) 6 | } 7 | 8 | export { Landscape } 9 | export default Landscape 10 | -------------------------------------------------------------------------------- /src/packages/scroll-view-pullup/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import { PullUp } from '../scroll-view' 3 | 4 | PullUp.install = (app: App) => { 5 | app.component(PullUp.name, PullUp) 6 | } 7 | 8 | export { PullUp } 9 | export default PullUp 10 | -------------------------------------------------------------------------------- /src/packages/tag/index.styl: -------------------------------------------------------------------------------- 1 | .md-tag 2 | --md-tag-color: var(--md-color-primary) 3 | --md-tag-fillet-radius: 2px 4 | --md-tag-large-font-size: var(--md-font-body-normal) 5 | --md-tag-small-font-size: var(--md-font-minor-normal) 6 | --md-tag-tiny-font-size: 12px -------------------------------------------------------------------------------- /src/packages/action-bar/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import ActionBar from './index.vue' 3 | 4 | ActionBar.install = (app: App) => { 5 | app.component(ActionBar.name, ActionBar) 6 | } 7 | 8 | export { ActionBar } 9 | export default ActionBar 10 | -------------------------------------------------------------------------------- /src/packages/field-item/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import { FieldItem } from '../field' 3 | 4 | FieldItem.install = (app: App) => { 5 | app.component(FieldItem.name, FieldItem) 6 | } 7 | 8 | export { FieldItem } 9 | export default FieldItem 10 | -------------------------------------------------------------------------------- /src/packages/notice-bar/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import NoticeBar from './index.vue' 3 | 4 | NoticeBar.install = (app: App) => { 5 | app.component(NoticeBar.name, NoticeBar) 6 | } 7 | 8 | export { NoticeBar } 9 | export default NoticeBar 10 | -------------------------------------------------------------------------------- /src/packages/tab-picker/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import TabPicker from './index.vue' 3 | 4 | TabPicker.install = (app: App) => { 5 | app.component(TabPicker.name, TabPicker) 6 | } 7 | 8 | export { TabPicker } 9 | export default TabPicker 10 | -------------------------------------------------------------------------------- /src/packages/water-mark/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import WaterMark from './index.vue' 3 | 4 | WaterMark.install = (app: App) => { 5 | app.component(WaterMark.name, WaterMark) 6 | } 7 | 8 | export { WaterMark } 9 | export default WaterMark 10 | -------------------------------------------------------------------------------- /src/packages/check-group/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import { CheckGroup } from '../check' 3 | 4 | CheckGroup.install = (app: App) => { 5 | app.component(CheckGroup.name, CheckGroup) 6 | } 7 | 8 | export { CheckGroup } 9 | export default CheckGroup 10 | -------------------------------------------------------------------------------- /src/packages/date-picker/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import DatePicker from './index.vue' 3 | 4 | DatePicker.install = (app: App) => { 5 | app.component(DatePicker.name, DatePicker) 6 | } 7 | 8 | export { DatePicker } 9 | export default DatePicker 10 | -------------------------------------------------------------------------------- /src/packages/detail-item/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import DetailItem from './index.vue' 3 | 4 | DetailItem.install = (app: App) => { 5 | app.component(DetailItem.name, DetailItem) 6 | } 7 | 8 | export { DetailItem } 9 | export default DetailItem 10 | -------------------------------------------------------------------------------- /src/packages/radio-group/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import { RadioGroup } from '../radio' 3 | 4 | RadioGroup.install = (app: App) => { 5 | app.component(RadioGroup.name, RadioGroup) 6 | } 7 | 8 | export { RadioGroup } 9 | export default RadioGroup 10 | -------------------------------------------------------------------------------- /src/packages/result-page/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import ResultPage from './index.vue' 3 | 4 | ResultPage.install = (app: App) => { 5 | app.component(ResultPage.name, ResultPage) 6 | } 7 | 8 | export { ResultPage } 9 | export default ResultPage 10 | -------------------------------------------------------------------------------- /src/packages/toast/index.styl: -------------------------------------------------------------------------------- 1 | .md-toast 2 | --md-toast-fill: rgba(65, 72, 93, .77) 3 | --md-toast-font-size: var(--md-font-body-large) 4 | --md-toast-color: #fff 5 | --md-toast-radius: var(--md-radius-normal) 6 | --md-toast-padding: 20px 30px 7 | --md-toast-zindex: 1700 -------------------------------------------------------------------------------- /src/packages/transition/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Transition from './index.vue' 3 | 4 | Transition.install = (app: App) => { 5 | app.component(Transition.name, Transition) 6 | } 7 | 8 | export { Transition } 9 | export default Transition 10 | -------------------------------------------------------------------------------- /src/packages/detail-item/index.styl: -------------------------------------------------------------------------------- 1 | .md-detail-item 2 | --md-detail-item-font-size: var(--md-font-body-large) 3 | --md-detail-item-title-color: var(--md-color-text-caption) 4 | --md-detail-item-content-color: var(--md-color-text-body) 5 | --md-detail-item-gap: var(--md-v-gap-sm) -------------------------------------------------------------------------------- /src/packages/image-viewer/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import ImageViewer from './index.vue' 3 | 4 | ImageViewer.install = (app: App) => { 5 | app.component(ImageViewer.name, ImageViewer) 6 | } 7 | 8 | export { ImageViewer } 9 | export default ImageViewer 10 | -------------------------------------------------------------------------------- /src/packages/scroll-view-pulldown/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import { PullDown } from '../scroll-view' 3 | 4 | PullDown.install = (app: App) => { 5 | app.component(PullDown.name, PullDown) 6 | } 7 | 8 | export { PullDown } 9 | export default PullDown 10 | -------------------------------------------------------------------------------- /src/packages/tab-pane/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import { TabPane } from '../tabs' 3 | /* istanbul ignore next */ 4 | TabPane.install = (app: App) => { 5 | app.component(TabPane.name, TabPane) 6 | } 7 | 8 | export { TabPane } 9 | export default TabPane 10 | -------------------------------------------------------------------------------- /scripts/_template/index.vue.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/packages/swiper/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Swiper from './index.vue' 3 | 4 | Swiper.install = (app: App) => { 5 | app.component(Swiper.name, Swiper) 6 | } 7 | 8 | export { Dragger } from './dragger' 9 | export { Swiper } 10 | export default Swiper 11 | -------------------------------------------------------------------------------- /src/packages/textarea-item/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import TextareaItem from './index.vue' 3 | 4 | TextareaItem.install = (app: App) => { 5 | app.component(TextareaItem.name, TextareaItem) 6 | } 7 | 8 | export { TextareaItem } 9 | export default TextareaItem 10 | -------------------------------------------------------------------------------- /src/packages/image-uploader/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import ImageUploader from './index.vue' 3 | 4 | ImageUploader.install = (app: App) => { 5 | app.component(ImageUploader.name, ImageUploader) 6 | } 7 | 8 | export { ImageUploader } 9 | export default ImageUploader 10 | -------------------------------------------------------------------------------- /src/packages/check-list/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import { CheckList } from '../check' 3 | 4 | /* istanbul ignore next */ 5 | CheckList.install = (app: App) => { 6 | app.component(CheckList.name, CheckList) 7 | } 8 | 9 | export { CheckList } 10 | export default CheckList 11 | -------------------------------------------------------------------------------- /src/packages/popup-title-bar/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import { PopupTitleBar } from '../popup' 3 | 4 | PopupTitleBar.install = (app: App) => { 5 | app.component(PopupTitleBar.name, PopupTitleBar) 6 | } 7 | 8 | export { PopupTitleBar } 9 | export default PopupTitleBar 10 | -------------------------------------------------------------------------------- /src/packages/radio-list/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import { RadioList } from '../radio' 3 | 4 | /* istanbul ignore next */ 5 | RadioList.install = (app: App) => { 6 | app.component(RadioList.name, RadioList) 7 | } 8 | 9 | export { RadioList } 10 | export default RadioList 11 | -------------------------------------------------------------------------------- /src/packages/number-keyboard/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import NumberKeyboard from './index.vue' 3 | 4 | NumberKeyboard.install = (app: App) => { 5 | app.component(NumberKeyboard.name, NumberKeyboard) 6 | } 7 | 8 | export { NumberKeyboard } 9 | export default NumberKeyboard 10 | -------------------------------------------------------------------------------- /src/packages/switch/index.styl: -------------------------------------------------------------------------------- 1 | .md-switch 2 | --md-switch-fill: var(--md-color-primary) 3 | --md-switch-fill-inverse: var(--md-color-bg-disabled) 4 | --md-switch-handle-color: #FFF 5 | --md-switch-item-color-disabled: var(--md-opacity-disabled) 6 | --md-switch-width: 80px 7 | --md-switch-height: 48px -------------------------------------------------------------------------------- /scripts/_template/demo/demo0.vue.hbs: -------------------------------------------------------------------------------- 1 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /src/packages/codebox/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Codebox from './index.vue' 3 | 4 | Codebox.install = (app: App) => { 5 | app.component(Codebox.name, Codebox) 6 | } 7 | 8 | export { Codebox } 9 | export { focusAndOpenKeyboard } from './use-codebox' 10 | export default Codebox 11 | -------------------------------------------------------------------------------- /src/packages/utils/debug.ts: -------------------------------------------------------------------------------- 1 | import { isProd } from './env' 2 | 3 | interface IConsole extends Console { 4 | [key: string]: any 5 | } 6 | 7 | const logger: IConsole = console 8 | 9 | export const warn = (msg: string, fn = 'error') => { 10 | !isProd && logger[fn](`[Mand-Mobile]: ${msg}`) 11 | } 12 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Badge.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | navbar: false 3 | sidebar: false 4 | editLink: false 5 | replace: true 6 | --- 7 | 15 | -------------------------------------------------------------------------------- /scripts/_template/index.ts.hbs: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import {{properCase name}} from './index.vue' 3 | 4 | {{properCase name}}.install = (app: App) => { 5 | app.component({{properCase name}}.name, {{properCase name}}) 6 | } 7 | 8 | export { {{properCase name}} } 9 | export default {{properCase name}} 10 | -------------------------------------------------------------------------------- /src/packages/tabs/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Tabs from './index.vue' 3 | import TabPane from './pane.vue' 4 | 5 | Tabs.install = (app: App) => { 6 | app.component(Tabs.name, Tabs) 7 | app.component(TabPane.name, TabPane) 8 | } 9 | 10 | export { Tabs, TabPane } 11 | export default Tabs 12 | -------------------------------------------------------------------------------- /src/packages/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './example' 2 | export * from './constants' 3 | export * from './env' 4 | export * from './animate' 5 | export * from './debug' 6 | export * from './format' 7 | export * from './store' 8 | export * from './use-create' 9 | export * from './function' 10 | export * from './trigger-event' 11 | -------------------------------------------------------------------------------- /src/packages/field/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Field from './index.vue' 3 | import FieldItem from './item.vue' 4 | 5 | Field.install = (app: App) => { 6 | app.component(Field.name, Field) 7 | app.component(FieldItem.name, FieldItem) 8 | } 9 | 10 | export { Field, FieldItem } 11 | export default Field 12 | -------------------------------------------------------------------------------- /src/packages/result-page/index.styl: -------------------------------------------------------------------------------- 1 | .md-result 2 | --md-result-page-image-size: 260px 3 | --md-result-page-title-font-size: var(--md-font-caption-normal) 4 | --md-result-page-describe-font-size: var(--md-font-body-large) 5 | --md-result-page-title-color: var(--md-color-text-base) 6 | --md-result-page-describe-color: var(--md-color-text-caption) -------------------------------------------------------------------------------- /src/packages/action-bar/index.styl: -------------------------------------------------------------------------------- 1 | .md-action-bar 2 | --md-action-bar-width: 100% 3 | --md-action-bar-height: 100px 4 | --md-action-bar-padding-v: var(--md-v-gap-md) 5 | --md-action-bar-padding-h: var(--md-h-gap-sl) 6 | --md-action-bar-button-gap: 22px 7 | --md-action-bar-slot-height: var(--md-button-height) 8 | --md-action-bar-zindex: 100 9 | -------------------------------------------------------------------------------- /src/packages/popup/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Popup from './index.vue' 3 | import PopupTitleBar from './title-bar.vue' 4 | 5 | Popup.install = (app: App) => { 6 | app.component(Popup.name, Popup) 7 | app.component(PopupTitleBar.name, PopupTitleBar) 8 | } 9 | 10 | export { Popup, PopupTitleBar } 11 | export default Popup 12 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 更新日志 2 | 3 | ### 0.0.1-alpha.15 4 | 5 | `2024-03-07` 6 | 7 | - Design 8 | - 🍭金融设计规范更新 9 | - 更新数字优先使用 `DIDIFD-Medium` 字体 10 | 11 | ### 0.0.1-alpha.13 12 | 13 | `2021-08-28` 14 | 15 | - Feat 16 | - 支持全量 bundle，方便 cdn 使用 17 | 18 | ### 0.0.1-alpha.12 19 | 20 | `2021-08-20` 21 | 22 | - Fix 23 | - 优化 `swiper` 的方法暴露 24 | - 优化了 `scroll-view` 的内部逻辑 25 | -------------------------------------------------------------------------------- /src/packages/picker/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Picker from './index.vue' 3 | import PickerView from './picker-view.vue' 4 | import { popupProps, usePopup } from './use-popup' 5 | 6 | Picker.install = (app: App) => { 7 | app.component(Picker.name, Picker) 8 | } 9 | 10 | export { Picker, PickerView, popupProps, usePopup } 11 | export default Picker 12 | -------------------------------------------------------------------------------- /src/packages/codebox/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 13 | 14 | 17 | -------------------------------------------------------------------------------- /src/packages/tip/index.styl: -------------------------------------------------------------------------------- 1 | .md-tip-content 2 | --md-tip-fill: #41485D 3 | --md-tip-fill-opacity: .8 4 | --md-tip-font-size: var(--md-font-minor-large) 5 | --md-tip-color: var(--md-color-text-base-inverse) 6 | --md-tip-radius: 1000px 7 | --md-tip-padding: 15px 32px 8 | --md-tip-close-size: 32px 9 | --md-tip-shadow: 0 5px 20px rgba(0, 0, 0, .08) 10 | --md-tip-zindex: 1303 -------------------------------------------------------------------------------- /src/packages/codebox/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 7 | 13 | 14 | 17 | -------------------------------------------------------------------------------- /src/packages/codebox/demo/demo2.vue: -------------------------------------------------------------------------------- 1 | 7 | 13 | 14 | 17 | -------------------------------------------------------------------------------- /src/packages/number-keyboard/demo/demo4.vue: -------------------------------------------------------------------------------- 1 | 7 | 10 | 11 | 17 | -------------------------------------------------------------------------------- /scripts/_template/__test__/index.spec.ts.hbs: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import {{properCase name}} from '../index.vue' 3 | 4 | describe('{{properCase name}}.vue', () => { 5 | test('render', () => { 6 | const wrapper = mount({{properCase name}}, { 7 | props: { 8 | name: 'scan', 9 | }, 10 | }) 11 | expect(wrapper.classes()).toContain('md-{{dashCase name}}') 12 | }) 13 | }) 14 | -------------------------------------------------------------------------------- /src/packages/bill/index.styl: -------------------------------------------------------------------------------- 1 | .md-bill 2 | --md-bill-bg: var(--md-color-bg-base) 3 | --md-bill-name-font-size: var(--md-font-caption-large) 4 | --md-bill-name-color: var(--md-color-text-body) 5 | --md-bill-no-font-size: var(--md-font-minor-large) 6 | --md-bill-no-color: var(--md-color-text-placeholder) 7 | --md-bill-description-font-size: var(--md-font-minor-large) 8 | --md-bill-description-color: var(--md-color-text-caption) -------------------------------------------------------------------------------- /src/packages/utils/format.ts: -------------------------------------------------------------------------------- 1 | export function transformDate(dateStr: string | Date) { 2 | if (typeof dateStr === 'string') { 3 | return new Date(dateStr) 4 | } 5 | return dateStr 6 | } 7 | 8 | /** 9 | * kebab-case -> camelCase 10 | */ 11 | export function transformCamelCase(str: string) { 12 | const re = /-(\w)/g 13 | return str.replace(re, function ($0, $1) { 14 | return $1.toUpperCase() 15 | }) 16 | } 17 | -------------------------------------------------------------------------------- /src/packages/scroll-view/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import ScrollView from './index.vue' 3 | import PullDown from './pull-down.vue' 4 | import PullUp from './pull-up.vue' 5 | 6 | ScrollView.install = (app: App) => { 7 | app.component(ScrollView.name, ScrollView) 8 | app.component(PullDown.name, PullDown) 9 | app.component(PullUp.name, PullUp) 10 | } 11 | 12 | export { ScrollView, PullDown, PullUp } 13 | export default ScrollView 14 | -------------------------------------------------------------------------------- /CHANGELOG.en-US.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ### 0.0.1-alpha.15 4 | 5 | `2024-03-07` 6 | 7 | - Design 8 | - 🍭 Financial design specification update 9 | - Update numbers using `DIDIFD-Medium` font first 10 | 11 | ### 0.0.1-alpha.13 12 | 13 | `2021-08-28` 14 | 15 | - Feat 16 | - support full bundle for cdn use 17 | 18 | ### 0.0.1-alpha.12 19 | 20 | `2021-08-20` 21 | 22 | - Fix 23 | - expose more `swiper` methods 24 | - optimize `scroll-view` logic 25 | -------------------------------------------------------------------------------- /src/packages/notice-bar/index.styl: -------------------------------------------------------------------------------- 1 | .md-notice-bar 2 | --md-notice-bar-fill: rgba(89, 158, 248, .08) 3 | --md-notice-bar-font-size: var(--md-font-body-normal) 4 | --md-notice-bar-color: var(--md-color-primary) 5 | --md-notice-bar-border-radius: 32px 6 | --md-notice-bar-fill-warning: #FFEEEF 7 | --md-notice-bar-color-warning: #FF5B60 8 | --md-notice-bar-fill-activity: #FFEDDE 9 | --md-notice-bar-color-activity: #FF843D 10 | --md-notice-bar-zindex: 999 -------------------------------------------------------------------------------- /src/packages/steps/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/packages/picker/index.styl: -------------------------------------------------------------------------------- 1 | .md-picker,.md-picker-view,.inner-popup 2 | --md-picker-padding-h: var(--md-h-gap-sl) 3 | --md-picker-font-size: var(--md-font-caption-normal) 4 | --md-picker-disabled-opacity: .2 5 | --md-picker-color: var(--md-color-text-disabled) 6 | --md-picker-color-active: var(--md-color-text-highlight) 7 | --md-picker-font-weight-active: var(--md-font-weight-medium) 8 | --md-picker-border-color: var(--md-color-border-base) 9 | --md-picker-zindex: 1100 -------------------------------------------------------------------------------- /src/packages/number-keyboard/demo/demo3.vue: -------------------------------------------------------------------------------- 1 | 7 | 13 | 14 | 20 | -------------------------------------------------------------------------------- /src/packages/utils/env.ts: -------------------------------------------------------------------------------- 1 | // Development environment 2 | export const isProd = import.meta.env.PROD 3 | 4 | // Browser environment sniffing 5 | export const inBrowser = typeof window !== 'undefined' 6 | export const UA = 7 | inBrowser && window.navigator.userAgent.toLowerCase() 8 | export const isAndroid = UA && UA.indexOf('android') > 0 9 | export const isIOS = UA && /iphone|ipad|ipod|ios/.test(UA) 10 | export const root = 11 | typeof window !== 'undefined' ? window : global 12 | -------------------------------------------------------------------------------- /docs/zh-CN/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroImage: https://pt-starimg.didistatic.com/static/starimg/img/ySOsAunfGm1610683661213.png 4 | heroBanner: https://pt-starimg.didistatic.com/static/starimg/img/23iUuVLsnS1605512486154.png 5 | heroAlt: 6 | heroSub: 'next' 7 | heroText: Mand Mobile 8 | tagline: 面向金融场景，基于 Vue 3.0 移动端组件库 9 | 10 | actionText: 开始使用 11 | actionLink: /zh-CN/components/ 12 | 13 | altActionText: 了解更多 14 | altActionLink: /roadmap 15 | 16 | footer: 滴滴金融泛前端 ❤ MFE 17 | --- 18 | -------------------------------------------------------------------------------- /src/packages/input-item/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import InputItem from './index.vue' 3 | import FakeInputItem from './fake-input.vue' 4 | 5 | InputItem.install = (app: App) => { 6 | app.component(InputItem.name, InputItem) 7 | app.component(FakeInputItem.name, FakeInputItem) 8 | } 9 | 10 | export { InputItem } 11 | export { 12 | formatValue, 13 | formatMoney, 14 | formatBankCard, 15 | formatPhoneNumber, 16 | } from './use-input' 17 | export default InputItem 18 | -------------------------------------------------------------------------------- /.github/workflows/unit-test.yml: -------------------------------------------------------------------------------- 1 | name: Unit Test 2 | 3 | on: pull_request 4 | 5 | jobs: 6 | build: 7 | name: Unit Test 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/checkout@v2 11 | - name: Setup node 12 | uses: actions/setup-node@v2 13 | with: 14 | node-version: '14.16.1' 15 | - name: Install dependencies 16 | run: yarn 17 | - name: Lint 18 | run: yarn lint 19 | - name: Test 20 | run: yarn test -------------------------------------------------------------------------------- /src/packages/stepper/index.styl: -------------------------------------------------------------------------------- 1 | .md-stepper 2 | --md-stepper-fill: var(--md-color-bg-base) 3 | --md-stepper-disabled-opacity: var(--md-opacity-disabled) 4 | --md-stepper-color: var(--md-color-text-base) 5 | --md-stepper-font-size: var(--md-font-body-large) 6 | --md-stepper-input-font-size: var(--md-font-body-normal) 7 | --md-stepper-height: 50px 8 | --md-stepper-width-button: 54px 9 | --md-stepper-width-input: 68px 10 | --md-stepper-radius-button: 2px 11 | --md-stepper-radius-input: 0 -------------------------------------------------------------------------------- /src/packages/tab-bar/index.styl: -------------------------------------------------------------------------------- 1 | .md-tab-bar 2 | --md-tab-font-size: var(--md-font-body-large) 3 | --md-tab-font-weight: var(--md-font-weight-medium) 4 | --md-tab-text-color: var(--md-color-text-minor) 5 | --md-tab-active-color: var(--md-color-primary) 6 | --md-tab-disabled-color: var(--md-color-text-disabled) 7 | --md-tab-bg: var(--md-color-bg-base) 8 | --md-tab-height: 100px 9 | --md-tab-ink-height: 3px 10 | --md-tab-offset: var(--md-h-gap-sl) 11 | --md-tab-item-gap: var(--md-h-gap-md) -------------------------------------------------------------------------------- /src/packages/activity-indicator/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import ActivityIndicator from './index.vue' 3 | import ActivityIndicatorRolling from './roller.vue' 4 | import ActivityIndicatorSuccess from './roller-success.vue' 5 | 6 | ActivityIndicator.install = (app: App) => { 7 | app.component(ActivityIndicator.name, ActivityIndicator) 8 | } 9 | 10 | export { 11 | ActivityIndicator, 12 | ActivityIndicatorRolling, 13 | ActivityIndicatorSuccess, 14 | } 15 | export default ActivityIndicator 16 | -------------------------------------------------------------------------------- /src/packages/steps/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 7 | 24 | 25 | 28 | -------------------------------------------------------------------------------- /src/packages/steps/demo/demo6.vue: -------------------------------------------------------------------------------- 1 | 7 | 24 | 25 | 28 | -------------------------------------------------------------------------------- /src/packages/check/index.styl: -------------------------------------------------------------------------------- 1 | .md-check,.md-check-box 2 | --md-check-color: var(--md-color-text-highlight) 3 | --md-checkbox-color: var(--md-color-text-base) 4 | --md-checkbox-font-size: var(--md-font-caption-normal) 5 | --md-checkbox-disabled-color: var(--md-color-text-disabled) 6 | --md-checkbox-active-color: var(--md-color-primary) 7 | --md-checkbox-active-border-color: var(--md-color-primary) 8 | --md-checkbox-border-color: var(--md-color-border-element) 9 | --md-checkbox-border-radius: var(--md-radius-normal) -------------------------------------------------------------------------------- /src/packages/check/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Check from './index.vue' 3 | import CheckBox from './box.vue' 4 | import CheckGroup from './group.vue' 5 | import CheckList from './list.vue' 6 | 7 | Check.install = (app: App) => { 8 | app.component(Check.name, Check) 9 | app.component(CheckBox.name, CheckBox) 10 | app.component(CheckGroup.name, CheckGroup) 11 | app.component(CheckList.name, CheckList) 12 | } 13 | 14 | export { Check, CheckBox, CheckGroup, CheckList } 15 | export default Check 16 | -------------------------------------------------------------------------------- /src/packages/radio/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import Radio from './index.vue' 3 | import RadioBox from './box.vue' 4 | import RadioGroup from './group.vue' 5 | import RadioList from './list.vue' 6 | 7 | Radio.install = (app: App) => { 8 | app.component(Radio.name, Radio) 9 | app.component(RadioBox.name, RadioBox) 10 | app.component(RadioGroup.name, RadioGroup) 11 | app.component(RadioList.name, RadioList) 12 | } 13 | 14 | export { Radio, RadioBox, RadioGroup, RadioList } 15 | export default Radio 16 | -------------------------------------------------------------------------------- /src/packages/steps/demo/demo5.vue: -------------------------------------------------------------------------------- 1 | 7 | 24 | 25 | 28 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import { 3 | createRouter, 4 | createWebHashHistory, 5 | } from 'vue-router' 6 | import routes from 'virtual:generated-pages' 7 | import App from './App.vue' 8 | 9 | import './assets/stylus/app.styl' 10 | import './styles/vars.styl' 11 | 12 | if (import.meta.env.PROD) { 13 | import('dist/mand-mobile-next.min.css') 14 | } 15 | 16 | const router = createRouter({ 17 | history: createWebHashHistory(), 18 | routes, 19 | }) 20 | 21 | createApp(App).use(router).mount('#app') 22 | -------------------------------------------------------------------------------- /src/packages/drop-menu/index.styl: -------------------------------------------------------------------------------- 1 | .md-drop-menu 2 | --md-drop-menu-height: 110px 3 | --md-drop-menu-bar-bg: var(--md-color-bg-inverse) 4 | --md-drop-menu-bar-border-color: var(--md-color-border-base) 5 | --md-drop-menu-list-bg: var(--md-color-bg-inverse) 6 | --md-drop-menu-color: var(--md-color-primary) 7 | --md-drop-menu-font-size: var(--md-font-caption-normal) 8 | --md-drop-menu-font-weight: var(--md-font-weight-medium) 9 | --md-drop-menu-disabled-opacity: var(--md-opacity-disabled) 10 | --md-drop-menu-zindex: 1200 -------------------------------------------------------------------------------- /src/packages/cashier/__test__/index.spec.ts: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import Cashier from '../index' 3 | import demo from '../demo/demo0.vue' 4 | 5 | describe('Cashier.vue', () => { 6 | test('render', () => { 7 | const wrapper = mount(demo) 8 | expect( 9 | document.querySelector('.md-cashier') 10 | ).toBeTruthy() 11 | wrapper.unmount() 12 | }) 13 | 14 | test('install', () => { 15 | expect( 16 | require('vue').createApp(Cashier).use(Cashier) 17 | ).toBeTruthy() 18 | }) 19 | }) 20 | -------------------------------------------------------------------------------- /docs/en-US/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroImage: https://pt-starimg.didistatic.com/static/starimg/img/ySOsAunfGm1610683661213.png 4 | heroBanner: https://pt-starimg.didistatic.com/static/starimg/img/23iUuVLsnS1605512486154.png 5 | heroAlt: 6 | heroSub: 'next' 7 | heroText: Mand Mobile 8 | tagline: Focus on financial scenarios, based on Vue 3.0 mobile terminal component library 9 | 10 | actionText: GetStarted 11 | actionLink: /en-US/components/ 12 | 13 | altActionText: Learn more 14 | altActionLink: /roadmap 15 | 16 | footer: MFE 17 | --- 18 | -------------------------------------------------------------------------------- /src/packages/codebox/demo/demo3.vue: -------------------------------------------------------------------------------- 1 | 7 | 13 | 14 | 21 | 22 | 27 | -------------------------------------------------------------------------------- /src/packages/date-picker/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 7 | 14 | 15 | 23 | -------------------------------------------------------------------------------- /src/packages/slider/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 13 | 14 | 19 | 20 | 24 | -------------------------------------------------------------------------------- /src/packages/steps/demo/demo3.vue: -------------------------------------------------------------------------------- 1 | 7 | 25 | 26 | 29 | -------------------------------------------------------------------------------- /src/packages/slider/demo/demo2.vue: -------------------------------------------------------------------------------- 1 | 7 | 13 | 14 | 19 | 20 | 24 | -------------------------------------------------------------------------------- /src/packages/slider/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 7 | 13 | 14 | 19 | 20 | 24 | -------------------------------------------------------------------------------- /src/packages/steps/index.styl: -------------------------------------------------------------------------------- 1 | .md-steps 2 | --md-steps-color: var(--md-color-border-base) 3 | --md-steps-color-active: var(--md-color-primary) 4 | --md-steps-border-size: 1px 5 | --md-steps-icon-size: 32px // icon size 6 | --md-steps-text-color: var(--md-color-text-body) 7 | --md-steps-text-font-size: var(--md-font-body-large) 8 | --md-steps-text-gap-horizontal: 20px 9 | --md-steps-text-gap-vertical: 40px 10 | --md-steps-desc-color: var(--md-color-text-caption) 11 | --md-steps-desc-font-size: var(--md-font-body-normal) 12 | --md-steps-transition-delay: .15s -------------------------------------------------------------------------------- /src/packages/utils/example/index.ts: -------------------------------------------------------------------------------- 1 | /* istanbul ignore file */ 2 | import { DefineComponent, defineComponent } from 'vue' 3 | import MdIcon from 'mand-mobile-next/icon' 4 | // eslint-disable-next-line @typescript-eslint/ban-types 5 | type component = DefineComponent<{}, {}, any> 6 | 7 | export const createDemoModule = ( 8 | name: string, 9 | demos: component[] 10 | ) => 11 | defineComponent({ 12 | name: `${name}-demo`, 13 | components: { 14 | MdIcon, 15 | }, 16 | setup() { 17 | return { 18 | demos, 19 | } 20 | }, 21 | }) 22 | -------------------------------------------------------------------------------- /src/packages/image-uploader/__test__/index.spec.ts: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import ImageUploader from '../index' 3 | 4 | describe('ImageUploader.vue', () => { 5 | test('render', () => { 6 | const wrapper = mount(ImageUploader, { 7 | props: { 8 | name: 'scan', 9 | }, 10 | }) 11 | expect(wrapper.classes()).toContain('md-image-uploader') 12 | }) 13 | test('install', () => { 14 | expect( 15 | require('vue') 16 | .createApp(ImageUploader) 17 | .use(ImageUploader) 18 | ).toBeTruthy() 19 | }) 20 | }) 21 | -------------------------------------------------------------------------------- /src/packages/radio/index.styl: -------------------------------------------------------------------------------- 1 | .md-radio,.md-radio-box 2 | --md-radio-color: var(--md-color-text-highlight) 3 | --md-check-color: var(--md-color-text-highlight) 4 | --md-checkbox-color: var(--md-color-text-base) 5 | --md-checkbox-font-size: var(--md-font-caption-normal) 6 | --md-checkbox-disabled-color: var(--md-color-text-disabled) 7 | --md-checkbox-active-color: var(--md-color-primary) 8 | --md-checkbox-active-border-color: var(--md-color-primary) 9 | --md-checkbox-border-color: var(--md-color-border-element) 10 | --md-checkbox-border-radius: var(--md-radius-normal) -------------------------------------------------------------------------------- /src/packages/result-page/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 7 | 10 | 11 | 26 | -------------------------------------------------------------------------------- /src/packages/captcha/index.styl: -------------------------------------------------------------------------------- 1 | .md-captcha 2 | --md-captcha-zindex: 1301 3 | --md-captcha-title-color: var(--md-color-text-base) 4 | --md-captcha-title-font-size: var(--md-font-heading-normal) 5 | --md-captcha-color: var(--md-color-text-caption) 6 | --md-captcha-font-size: var(--md-font-body-large) 7 | --md-captcha-footer-font-size: var(--md-font-minor-large) 8 | --md-captcha-error-color: var(--md-color-text-error) 9 | --md-captcha-brief-color: var(--md-color-text-caption) 10 | --md-captcha-countbtn-gap: var(--md-h-gap-lg) 11 | --md-captcha-btn-color: var(--md-color-primary) -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const plugins = 2 | process.env.NODE_ENV === 'build' || 3 | process.argv[1].includes('vitepress') || 4 | process.argv[1].includes('fisandoc') || 5 | process.argv[1].includes('dev-docs.ts') 6 | ? { 7 | autoprefixer: {}, 8 | } 9 | : { 10 | 'postcss-pxtorem': { 11 | rootValue: 100, 12 | propWhiteList: [], 13 | minPixelValue: 2, 14 | }, 15 | // to edit target browsers: use "browserslist" field in package.json 16 | autoprefixer: {}, 17 | } 18 | 19 | module.exports = { 20 | plugins, 21 | } 22 | -------------------------------------------------------------------------------- /src/packages/cell-item/index.styl: -------------------------------------------------------------------------------- 1 | .md-cell-item 2 | --md-cell-item-min-height: 100px 3 | --md-cell-item-padding-v: 32px 4 | --md-cell-item-multilines-padding-v: 36px 5 | --md-cell-item-title-color: var(--md-color-text-base) 6 | --md-cell-item-title-font-size: var(--md-font-caption-normal) 7 | --md-cell-item-brief-color: var(--md-color-text-caption) 8 | --md-cell-item-brief-font-size: var(--md-font-minor-large) 9 | --md-cell-item-right-color: var(--md-color-text-caption) 10 | --md-cell-item-right-font-size: var(--md-font-body-large) 11 | --md-cell-item-border-color: var(--md-color-border-base) -------------------------------------------------------------------------------- /src/packages/date-picker/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 15 | 16 | 24 | -------------------------------------------------------------------------------- /src/packages/tabs/pane.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 23 | 24 | 30 | -------------------------------------------------------------------------------- /src/packages/radio/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 13 | 14 | 26 | -------------------------------------------------------------------------------- /src/packages/skeleton/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 8 | 11 | 22 | 23 | 27 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: mand-mobile-next 2 | on: 3 | release: 4 | types: [created] 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/checkout@v2 10 | # Setup .npmrc file to publish to npm 11 | - uses: actions/setup-node@v2 12 | with: 13 | node-version: '14.x' 14 | registry-url: 'https://registry.npmjs.org' 15 | - run: yarn 16 | - run: yarn lint 17 | - run: yarn test 18 | - run: yarn build 19 | - run: npm publish --tag alpha 20 | env: 21 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} -------------------------------------------------------------------------------- /src/packages/codebox/index.styl: -------------------------------------------------------------------------------- 1 | .md-codebox-wrapper 2 | --md-codebox-font-size: 50px 3 | --md-codebox-width: 66px 4 | --md-codebox-height: 70px 5 | --md-codebox-gutter: 18px 6 | --md-codebox-border-width: 2px 7 | --md-codebox-border-color: var(--md-color-border-element) 8 | --md-codebox-border-active-color: var(--md-color-text-base) 9 | --md-codebox-color: var(--md-color-text-base) 10 | --md-codebox-blink-color: var(--md-color-text-base) 11 | --md-codebox-dot-color: var(--md-color-text-base) 12 | --md-codebox-holder-space: var(--md-h-gap-sm) 13 | --md-codebox-disabled-color: var(--md-color-text-disabled) -------------------------------------------------------------------------------- /src/packages/result-page/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 10 | 11 | 22 | 23 | 27 | -------------------------------------------------------------------------------- /src/packages/action-sheet/index.styl: -------------------------------------------------------------------------------- 1 | .md-action-sheet 2 | --md-action-sheet-height : 120px 3 | --md-action-sheet-padding-h : var(--md-h-gap-sl) 4 | --md-action-sheet-color : var(--md-color-text-body) 5 | --md-action-sheet-color-highlight : var(--md-color-primary) 6 | --md-action-sheet-color-cancel : var(--md-color-text-minor) 7 | --md-action-sheet-font-size : var(--md-font-caption-normal) 8 | --md-action-sheet-bg : var(--md-color-bg-inverse) 9 | --md-action-sheet-disabled-opacity : var(--md-opacity-disabled) 10 | --md-action-sheet-cancel-gap-bg : var(--md-color-bg-base) 11 | --md-action-sheet-zindex : 1101 12 | -------------------------------------------------------------------------------- /src/packages/slider/demo/demo4.vue: -------------------------------------------------------------------------------- 1 | 7 | 13 | 14 | 23 | 24 | 28 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/ThemeSwitch.vue: -------------------------------------------------------------------------------- 1 | 11 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /src/packages/notice-bar/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 29 | -------------------------------------------------------------------------------- /src/packages/toast/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 8 | 16 | 27 | -------------------------------------------------------------------------------- /src/packages/toast/demo/demo2.vue: -------------------------------------------------------------------------------- 1 | 8 | 16 | 27 | -------------------------------------------------------------------------------- /src/packages/slider/demo/demo3.vue: -------------------------------------------------------------------------------- 1 | 7 | 13 | 14 | 23 | 24 | 28 | -------------------------------------------------------------------------------- /src/packages/textarea-item/index.styl: -------------------------------------------------------------------------------- 1 | .md-textarea-item 2 | --md-textarea-item-font-size: var(--md-font-caption-normal) 3 | --md-textarea-item-font-weight: var(--md-font-weight-medium) 4 | --md-textarea-item-line-height: 1.4 5 | --md-textarea-item-color: var(--md-color-text-base) 6 | --md-textarea-item-icon: var(--md-color-text-placeholder) // delete icon 7 | --md-textarea-item-color-error: var(--md-color-text-error) 8 | --md-textarea-item-color-disabled: var(--md-color-text-caption) 9 | --md-textarea-item-placeholder-color: var(--md-color-text-placeholder) 10 | --md-textarea-item-placeholder-weight: var(--md-font-weight-normal) -------------------------------------------------------------------------------- /src/packages/toast/demo/demo5.vue: -------------------------------------------------------------------------------- 1 | 8 | 16 | 27 | -------------------------------------------------------------------------------- /src/packages/skeleton/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 13 | 24 | 28 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 此文件仅仅单测 3 | * 解决单测问题env文件中 vite的环境变量获取import.meta.env 4 | * https://github.com/vitejs/vite/issues/1149 5 | */ 6 | module.exports = { 7 | presets: [ 8 | [ 9 | '@babel/preset-env', 10 | { 11 | useBuiltIns: 'entry', 12 | corejs: '2', 13 | targets: { node: 'current' }, 14 | }, 15 | ], 16 | '@babel/preset-typescript', 17 | ], 18 | plugins: [ 19 | function () { 20 | return { 21 | visitor: { 22 | MetaProperty(path) { 23 | path.replaceWithSourceString('process') 24 | }, 25 | }, 26 | } 27 | }, 28 | ], 29 | } 30 | -------------------------------------------------------------------------------- /src/packages/scroll-view/pull-up.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 21 | 28 | -------------------------------------------------------------------------------- /src/packages/picker/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 16 | 17 | 26 | -------------------------------------------------------------------------------- /src/packages/notice-bar/demo/demo3.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 30 | -------------------------------------------------------------------------------- /src/packages/check/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 14 | 15 | 28 | -------------------------------------------------------------------------------- /src/packages/toast/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 18 | 19 | 30 | -------------------------------------------------------------------------------- /src/packages/image-reader/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import ImageReader from './index.vue' 3 | import { CreateImageReader } from './image-reader' 4 | import { imageProcessor } from './image-processor' 5 | import { imageReaderProps } from './use-image-reader' 6 | import { 7 | dataURIToArrayBuffer, 8 | dataURItoBlob, 9 | } from './image-dataurl' 10 | 11 | ImageReader.install = (app: App) => { 12 | app.component(ImageReader.name, ImageReader) 13 | } 14 | 15 | export { 16 | ImageReader, 17 | imageReaderProps, 18 | CreateImageReader, 19 | imageProcessor, 20 | dataURIToArrayBuffer, 21 | dataURItoBlob, 22 | } 23 | 24 | export default ImageReader 25 | -------------------------------------------------------------------------------- /src/packages/stepper/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 12 | 13 | 28 | -------------------------------------------------------------------------------- /src/packages/notice-bar/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 30 | -------------------------------------------------------------------------------- /src/packages/stepper/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 7 | 12 | 13 | 28 | -------------------------------------------------------------------------------- /src/packages/stepper/demo/demo4.vue: -------------------------------------------------------------------------------- 1 | 7 | 12 | 13 | 28 | -------------------------------------------------------------------------------- /src/packages/toast/demo/demo4.vue: -------------------------------------------------------------------------------- 1 | 8 | 19 | 30 | -------------------------------------------------------------------------------- /src/packages/toast/demo/demo3.vue: -------------------------------------------------------------------------------- 1 | 8 | 19 | 30 | -------------------------------------------------------------------------------- /src/packages/date-picker/__test__/index.spec.ts: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import DatePicker from '../index' 3 | import demo from '../demo/demo0.vue' 4 | import demo1 from '../demo/demo1.vue' 5 | 6 | describe('DatePicker.vue', () => { 7 | test('base date picker', () => { 8 | const wrapper = mount(demo) 9 | expect(wrapper.classes()).toContain('md-date-picker') 10 | }) 11 | 12 | test('time picker', () => { 13 | const wrapper = mount(demo1) 14 | expect(wrapper.classes()).toContain('md-date-picker') 15 | }) 16 | 17 | test('install', () => { 18 | expect( 19 | require('vue').createApp(DatePicker).use(DatePicker) 20 | ).toBeTruthy() 21 | }) 22 | }) 23 | -------------------------------------------------------------------------------- /src/packages/detail-item/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: detail-item 3 | title: DetailItem 清单项 4 | preview: https://didi.github.io/mand-mobile/examples/#/detail-item 5 | --- 6 | 7 | # DetailItem 清单项 8 | 9 | 清单列表用于展示一些列表信息，如账单 10 | 11 | ## 引入 12 | 13 | ```javascript 14 | import { DetailItem } from 'mand-mobile-next' 15 | 16 | Vue.createApp().component(DetailItem.name, DetailItem) 17 | ``` 18 | 19 | ## 代码演示 20 | 21 | 24 | 25 | ## API 26 | 27 | ### DetailItem Props 28 | 29 | |属性 | 说明 | 类型 | 默认值|备注| 30 | |----|-----|------|------|------| 31 | |title|标题|String| | | 32 | |content|描述内容|String\/Number| | | 33 | |bold|是否加粗显示|Boolean|`false`| | 34 | -------------------------------------------------------------------------------- /src/packages/result-page/demo/demo3.vue: -------------------------------------------------------------------------------- 1 | 7 | 10 | 11 | 28 | -------------------------------------------------------------------------------- /src/packages/stepper/demo/demo5.vue: -------------------------------------------------------------------------------- 1 | 7 | 12 | 13 | 28 | -------------------------------------------------------------------------------- /src/packages/toast/demo/demo6.vue: -------------------------------------------------------------------------------- 1 | 8 | 19 | 30 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | import 'virtual:windi.css' 2 | import './styles/vars.css' 3 | import './styles/layout.css' 4 | import './styles/code.css' 5 | import './styles/custom-blocks.css' 6 | import './styles/sidebar-links.css' 7 | import './styles/mand-reset.styl' 8 | import './styles/prism.styl' 9 | 10 | import { Theme } from 'vitepress' 11 | import Layout from './components/Layout.vue' 12 | import Badge from './components/Badge.vue' 13 | 14 | if (import.meta.env.DEV) { 15 | import('../../../dist/es/mand-mobile-next.min.css') 16 | } 17 | 18 | const theme: Theme = { 19 | Layout, 20 | enhanceApp({ app }) { 21 | app.component('Badge', Badge) 22 | }, 23 | } 24 | 25 | export default theme 26 | -------------------------------------------------------------------------------- /src/packages/field/item.styl: -------------------------------------------------------------------------------- 1 | .md-field-item 2 | --md-field-item-min-height: 100px 3 | --md-field-item-padding-v: 30px 4 | --md-field-item-title-width: 160px 5 | --md-field-item-title-gap: 10px 6 | --md-field-item-color: var(--md-color-text-base) 7 | --md-field-item-font-size: var(--md-font-caption-normal) 8 | --md-field-item-font-weight: var(--md-font-weight-medium) 9 | --md-field-item-placeholder-color: var(--md-color-text-placeholder) 10 | --md-field-item-addon-color: var(--md-color-text-caption) 11 | --md-field-item-addon-font-size: var(--md-font-body-large) 12 | --md-field-item-border-color: var(--md-color-border-base) 13 | --md-field-item-children-font-size: var(--md-font-minor-large) -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Layout.vue: -------------------------------------------------------------------------------- 1 | 15 | 26 | -------------------------------------------------------------------------------- /src/packages/steps/demo/demo4.vue: -------------------------------------------------------------------------------- 1 | 7 | 31 | 32 | 40 | -------------------------------------------------------------------------------- /src/packages/amount/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 7 | 10 | 11 | 20 | 21 | 30 | -------------------------------------------------------------------------------- /src/packages/bill/__test__/index.spec.ts: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import Bill from '../index' 3 | 4 | describe('Bill.vue', () => { 5 | test('render', () => { 6 | const wrapper = mount(Bill, { 7 | props: { 8 | name: 'scan', 9 | }, 10 | }) 11 | expect(wrapper.classes()).toContain('md-bill') 12 | }) 13 | 14 | test('props title should be wrok', () => { 15 | const wrapper = mount(Bill, { 16 | props: { 17 | title: 'this is title', 18 | }, 19 | }) 20 | expect(wrapper.text()).toContain('this is title') 21 | }) 22 | 23 | test('install', () => { 24 | expect( 25 | require('vue').createApp(Bill).use(Bill) 26 | ).toBeTruthy() 27 | }) 28 | }) 29 | -------------------------------------------------------------------------------- /src/packages/notice-bar/demo/demo6.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 30 | -------------------------------------------------------------------------------- /src/packages/image-uploader/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 7 | 19 | 20 | 30 | -------------------------------------------------------------------------------- /src/packages/field/index.styl: -------------------------------------------------------------------------------- 1 | .md-field 2 | --md-field-padding-h: var(--md-h-gap-sl) 3 | --md-field-padding-v: var(--md-v-gap-sl) 4 | --md-field-bg-color: var(--md-color-bg-inverse) 5 | --md-field-header-gap: var(--md-v-gap-lg) 6 | --md-field-footer-gap: var(--md-v-gap-md) 7 | --md-field-title-color: var(--md-color-text-base) 8 | --md-field-title-font-size: var(--md-font-caption-large) 9 | --md-field-title-font-weight: var(--md-font-weight-medium) 10 | --md-field-title-font-weight-android: bold 11 | --md-field-brief-color: var(--md-color-text-caption) 12 | --md-field-brief-font-size: var(--md-font-minor-large) 13 | --md-field-action-color: var(--md-color-text-caption) 14 | --md-field-action-font-size: var(--md-font-minor-large) -------------------------------------------------------------------------------- /src/packages/notice-bar/demo/demo2.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 32 | -------------------------------------------------------------------------------- /src/packages/notice-bar/demo/demo5.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 30 | -------------------------------------------------------------------------------- /src/packages/action-bar/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 21 | 22 | 33 | -------------------------------------------------------------------------------- /src/packages/amount/demo/demo3.vue: -------------------------------------------------------------------------------- 1 | 7 | 10 | 11 | 20 | 21 | 30 | -------------------------------------------------------------------------------- /src/packages/bill/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: bill 3 | title: Bill 票据 4 | preview: https://didi.github.io/mand-mobile/examples/#/bill 5 | --- 6 | 7 | # Bill 票据 8 | 9 | 10 | 电子账单或票据 11 | 12 | ## 引入 13 | 14 | ```javascript 15 | import { Bill } from 'mand-mobile-next' 16 | 17 | Vue.createApp().component(Bill.name, Bill) 18 | ``` 19 | 20 | ## 代码演示 21 | 22 | 25 | 26 | ### API 27 | 28 | ### Bill Props 29 | |属性 | 说明 | 类型 | 默认值 | 备注 | 30 | |----|-----|------|------ |------| 31 | |title|票据抬头|String| | | 32 | |no|票据编号|String| | | 33 | |water-mark|水印内容|String\/Object| | | 34 | 35 | ### Bill Slots 36 | 37 | #### default 38 | 默认内容插槽 39 | 40 | #### header 41 | 头部内容插槽 42 | 43 | #### footer 44 | 底部内容插槽 -------------------------------------------------------------------------------- /src/packages/radio/group.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/packages/tip/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 17 | 18 | 35 | -------------------------------------------------------------------------------- /src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | declare module '*.vue' { 3 | import { DefineComponent } from 'vue' 4 | const component: DefineComponent<{}, {}, any> 5 | export default component 6 | } 7 | 8 | declare const __VP_HASH_MAP__: Record 9 | declare const __CARBON__: boolean 10 | declare const __BSA__: boolean 11 | declare const __ALGOLIA__: boolean 12 | 13 | declare module '@siteData' { 14 | const data: string 15 | export default data 16 | } 17 | 18 | // this module's typing is broken 19 | declare module '@docsearch/js' { 20 | function docsearch(props: T): void 21 | export default docsearch 22 | } 23 | 24 | declare module '@docsearch/css' { 25 | const css: string 26 | export default css 27 | } 28 | -------------------------------------------------------------------------------- /src/packages/input-item/demo/demo5.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 16 | 17 | 32 | -------------------------------------------------------------------------------- /src/packages/composable/show.ts: -------------------------------------------------------------------------------- 1 | import { 2 | HIDE_EVENT, 3 | SHOW_EVENT, 4 | UPDATE_VISIBLE_EVENT, 5 | } from 'mand-mobile-next/utils' 6 | import { computed } from 'vue' 7 | import type { SetupContext } from 'vue' 8 | 9 | export function useShow< 10 | T extends { visible: boolean }, 11 | E extends ('update:visible' | 'hide' | 'show')[] 12 | >(props: T, emit: SetupContext['emit']) { 13 | const popupShow = computed({ 14 | get: () => props.visible, 15 | set: () => hide(), 16 | }) 17 | const onHide = () => { 18 | emit(HIDE_EVENT) 19 | hide() 20 | } 21 | const onShow = () => { 22 | emit(SHOW_EVENT) 23 | } 24 | 25 | const hide = () => { 26 | emit(UPDATE_VISIBLE_EVENT, false) 27 | } 28 | return { popupShow, onHide, onShow, hide } 29 | } 30 | -------------------------------------------------------------------------------- /src/packages/stepper/demo/demo2.vue: -------------------------------------------------------------------------------- 1 | 7 | 15 | 16 | 31 | -------------------------------------------------------------------------------- /src/packages/switch/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: switch 3 | title: Switch 开关 4 | preview: https://didi.github.io/mand-mobile/examples/#/switch 5 | --- 6 | 7 | # Switch 开关 8 | 9 | 开关按钮，用于表示开关状态/两种状态之间的切换 10 | 11 | ## 引入 12 | 13 | ```javascript 14 | import { Switch } from 'mand-mobile-next' 15 | 16 | Vue.createApp().component(Switch.name, Switch) 17 | ``` 18 | 19 | ## 代码演示 20 | 21 | 24 | 25 | ## API 26 | 27 | ### Switch Props 28 | 29 | |属性 | 说明 | 类型 | 默认值| 30 | |----|-----|------|------| 31 | |v-model|打开或者关闭|Boolean|`false`| 32 | |disabled|是否禁用|Boolean|`false`| 33 | 34 | ### Switch Events 35 | 36 | #### @change(isActive) 37 | 38 | 事件说明 39 | 40 | |属性 | 说明 | 类型 | 41 | |----|-----|------| 42 | |isActive|开关状态，打开或者关闭|Boolean| 43 | -------------------------------------------------------------------------------- /src/packages/check/group.vue: -------------------------------------------------------------------------------- 1 | 6 | 32 | 33 | -------------------------------------------------------------------------------- /src/packages/detail-item/README.en-US.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: detail-item 3 | title: DetailItem 4 | preview: https://didi.github.io/mand-mobile/examples/#/detail-item 5 | --- 6 | 7 | # DetailItem 8 | 9 | Detail list usually used as bill details, inventory details and so on. 10 | 11 | ### Import 12 | 13 | ```javascript 14 | import { DetailItem } from 'mand-mobile-next' 15 | 16 | Vue.createApp().component(DetailItem.name, DetailItem) 17 | ``` 18 | 19 | ### Code Examples 20 | 21 | 24 | 25 | ### API 26 | 27 | #### CellItem Props 28 | 29 | |Props | Description | Type | Default | Note| 30 | |----|-----|------|------|------| 31 | |title|title|String|-|-| 32 | |content|content text|String\/Number|-|-| 33 | |bold|whether emphasis content|Boolean|`false`|-| 34 | -------------------------------------------------------------------------------- /src/packages/dialog/index.styl: -------------------------------------------------------------------------------- 1 | .md-dialog 2 | --md-dialog-width: 606px 3 | --md-dialog-radius: 12px 4 | --md-dialog-body-padding: 52px 5 | --md-dialog-title-font-size: 40px 6 | --md-dialog-title-color: var(--md-color-text-base) 7 | --md-dialog-text-font-size: var(--md-font-body-large) 8 | --md-dialog-action-font-weight: var(--md-font-weight-medium) 9 | --md-dialog-text-color: var(--md-color-text-minor) 10 | --md-dialog-action-height: 100px 11 | --md-dialog-action-font-size: var(--md-font-caption-large) 12 | --md-dialog-action-border-color: var(--md-color-border-base) 13 | --md-dialog-close-color: var(--md-color-text-caption) 14 | --md-dialog-action-highlight-color: var(--md-color-primary) 15 | --md-dialog-icon-size: 100px 16 | --md-dialog-icon-fill: var(--md-color-text-caption) 17 | --md-dialog-zindex: 1500 -------------------------------------------------------------------------------- /src/packages/popup/title-bar.styl: -------------------------------------------------------------------------------- 1 | .md-popup-title-bar 2 | --md-popup-title-bar-bg: var(--md-color-bg-inverse) 3 | --md-popup-title-bar-height: 120px 4 | --md-popup-title-bar-height-large: 180px 5 | --md-popup-title-bar-radius: 28px 6 | --md-popup-title-bar-radius-large: 40px 7 | --md-popup-title-bar-font-size-button: var(--md-font-caption-large) 8 | --md-popup-title-bar-font-weight-button: var(--md-font-weight-medium) 9 | --md-popup-title-bar-font-size-title: 40px 10 | --md-popup-title-bar-font-size-describe: var(--md-font-body-large) 11 | --md-popup-title-bar-color-title: var(--md-color-text-base) 12 | --md-popup-title-bar-color-describe: var(--md-color-text-caption) 13 | --md-popup-title-bar-color-button-left: var(--md-color-text-minor) 14 | --md-popup-title-bar-color-button-right: var(--md-color-text-highlight) -------------------------------------------------------------------------------- /src/packages/transition/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: transition 3 | title: Transition 动画 4 | preview: https://didi.github.io/mand-mobile/examples/#/transition 5 | --- 6 | 7 | # Transition 动画 8 | 9 | 复用动画切换组件 10 | 11 | ## 引入 12 | 13 | ```javascript 14 | import { Transition } from 'mand-mobile-next' 15 | 16 | Vue.createApp().component(Transition.name, Transition) 17 | ``` 18 | 19 | ## 代码演示 20 | 21 | 24 | 25 | ## API 26 | 27 | `md-transition`组件为Vue内置`transtion`的一层封装，支持所有Transition的属性参数。 28 | 29 | 其中内置动画`name`参数如下： 30 | 31 | - `md-fade` 32 | - `md-fade-up` 33 | - `md-fade-down` 34 | - `md-fade-left` 35 | - `md-fade-right` 36 | - `md-slide-up` 37 | - `md-slide-down` 38 | - `md-slide-left` 39 | - `md-slide-right` 40 | - `md-bounce` 41 | - `md-punch` 42 | - `md-zoom` 43 | -------------------------------------------------------------------------------- /src/packages/date-picker/demo/demo2.vue: -------------------------------------------------------------------------------- 1 | 7 | 15 | 16 | 33 | -------------------------------------------------------------------------------- /src/packages/radio/demo/demo4.vue: -------------------------------------------------------------------------------- 1 | 7 | 13 | 14 | 34 | 35 | 40 | -------------------------------------------------------------------------------- /src/packages/button/demo/demo2.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 36 | -------------------------------------------------------------------------------- /src/packages/check/demo/demo3.vue: -------------------------------------------------------------------------------- 1 | 7 | 21 | 22 | 32 | -------------------------------------------------------------------------------- /src/packages/action-bar/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 7 | 26 | 27 | 38 | -------------------------------------------------------------------------------- /src/packages/agree/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: agree 3 | title: Agree 勾选按钮 4 | preview: https://didi.github.io/mand-mobile/examples/#/agree 5 | --- 6 | 7 | # Agree 勾选按钮 8 | 9 | 用于标记切换某种状态，如协议勾选 10 | 11 | ## 引入 12 | 13 | ```javascript 14 | import { Agree } from 'mand-mobile-next' 15 | 16 | Vue.createApp().component(Agree.name, Agree) 17 | ``` 18 | 19 | ## 代码演示 20 | 21 | 24 | 25 | ## API 26 | 27 | #### Agree Props 28 | |属性 | 说明 | 类型 | 默认值 | 备注 | 29 | |----|-----|------|------|------| 30 | |v-model|是否选中|Boolean|`false`|-| 31 | |disabled|是否禁用|Boolean|`false`|-| 32 | |size|按钮大小|String|`md`|可选值参考组件`Icon`| 33 | 34 | ### Agree Events 35 | 36 | #### @change(name, checked) 37 | 勾选状态发生变化事件 38 | 39 | |属性 | 说明 | 类型 | 40 | |----|-----|------| 41 | |name|单选按钮名称，唯一标识|Number/String| 42 | |checked|是否选中|Boolean| 43 | -------------------------------------------------------------------------------- /src/packages/stepper/demo/demo3.vue: -------------------------------------------------------------------------------- 1 | 7 | 15 | 16 | 36 | -------------------------------------------------------------------------------- /src/packages/steps/demo/demo7.vue: -------------------------------------------------------------------------------- 1 | 7 | 24 | 25 | 41 | 42 | 46 | -------------------------------------------------------------------------------- /src/packages/tip/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 7 | 20 | 21 | 38 | -------------------------------------------------------------------------------- /src/packages/transition/README.en-US.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: transition 3 | title: Transition 4 | preview: https://didi.github.io/mand-mobile/examples/#/transition 5 | --- 6 | 7 | # Transition 8 | 9 | 复用动画切换组件 10 | 11 | ### 引入 12 | 13 | ```javascript 14 | import { Transition } from 'mand-mobile-next' 15 | 16 | Vue.createApp().component(Transition.name, Transition) 17 | ``` 18 | 19 | ### 代码演示 20 | 21 | 24 | 25 | ### API 26 | 27 | `md-transition` is a wrapper of vue `transtion`, support all `transition` props. 28 | 29 | built-in transition name： 30 | 31 | - `md-fade` 32 | - `md-fade-up` 33 | - `md-fade-down` 34 | - `md-fade-left` 35 | - `md-fade-right` 36 | - `md-slide-up` 37 | - `md-slide-down` 38 | - `md-slide-left` 39 | - `md-slide-right` 40 | - `md-bounce` 41 | - `md-punch` 42 | - `md-zoom` 43 | -------------------------------------------------------------------------------- /src/packages/image-viewer/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: image-viewer 3 | title: ImageViewer 图片查看器 4 | preview: https://didi.github.io/mand-mobile/examples/#/image-viewer 5 | --- 6 | 7 | # ImageViewer 图片查看器 8 | 9 | 用于浏览多张图片，并可对图片进行滑动切换 10 | 11 | ### 引入 12 | 13 | ```javascript 14 | import { ImageViewer } from 'mand-mobile-next' 15 | 16 | Vue.createApp().component(ImageViewer.name, ImageViewer) 17 | ``` 18 | 19 | ## 代码演示 20 | 21 | 24 | 25 | ### API 26 | 27 | #### ImageViewer Props 28 | 29 | |属性 | 说明 | 类型 | 默认值 | 备注| 30 | |----|-----|------|------|------| 31 | | visible | 是否显示查看器 | Boolean | `false` | 32 | | list |展示图片列表 | Array\ | `[]` | -| 33 | | default-index | 初始索引值 | Number | `0` | - | 34 | | has-dots | 是否展示图片索引值 | Boolean | `true` | - | 35 | | deletable | 是否展示删除图标 | Boolean | `false` | - | -------------------------------------------------------------------------------- /src/packages/tag/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 7 | 10 | 11 | 30 | 31 | 40 | -------------------------------------------------------------------------------- /src/packages/result-page/demo/demo2.vue: -------------------------------------------------------------------------------- 1 | 7 | 28 | 29 | 40 | -------------------------------------------------------------------------------- /src/packages/check/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 7 | 14 | 15 | 32 | 33 | 38 | -------------------------------------------------------------------------------- /src/packages/utils/constants.ts: -------------------------------------------------------------------------------- 1 | export const UPDATE_MODEL_EVENT = 'update:modelValue' 2 | export const UPDATE_VISIBLE_EVENT = 'update:visible' 3 | export const UPDATE_LIST_EVENT = 'update:list' 4 | export const CHANGE_EVENT = 'change' 5 | export const INPUT_EVENT = 'input' 6 | export const ERROR_EVENT = 'error' 7 | export const COMPLETE_EVENT = 'complete' 8 | export const SELECT_EVENT = 'select' 9 | export const DELETE_EVENT = 'delete' 10 | export const FOCUS_EVENT = 'focus' 11 | export const BLUR_EVENT = 'blur' 12 | export const SHOW_EVENT = 'show' 13 | export const HIDE_EVENT = 'hide' 14 | export const KEYUP_EVNET = 'keyup' 15 | export const KEYDOWN_EVENT = 'keydown' 16 | export const SUBMIT_EVNENT = 'submit' 17 | export const CONFIRM_EVENT = 'confirm' 18 | export const CANCEL_EVENT = 'cancel' 19 | 20 | export const DEFAULT_TITLE_WIDTH = '40%' 21 | export const DEFAULT_WIDTH = '100%' 22 | -------------------------------------------------------------------------------- /src/packages/drop-menu/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 9 | 29 | 30 | 42 | -------------------------------------------------------------------------------- /src/packages/image-viewer/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 24 | 25 | 34 | -------------------------------------------------------------------------------- /src/packages/switch/README.en-US.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: switch 3 | title: Switch 4 | preview: https://didi.github.io/mand-mobile/examples/#/switch 5 | --- 6 | 7 | # Switch 8 | 9 | Switch between two status 10 | 11 | ### Import 12 | 13 | ```javascript 14 | import { Switch } from 'mand-mobile-next' 15 | 16 | Vue.createApp().component(Switch.name, Switch) 17 | ``` 18 | 19 | ### Code Examples 20 | 21 | 24 | 25 | ### API 26 | 27 | #### Switch Props 28 | 29 | | Props | Description | Type | Default | 30 | |----|-----|------|------| 31 | |v-model| Whether it is on or off |Boolean|`false`| 32 | |disabled| Whether it is disabled or not |Boolean|`false`| 33 | 34 | #### Switch Instance Events 35 | 36 | ##### @change(isActive) 37 | 38 | | Props | Description | Type | 39 | |----|-----|------| 40 | |isActive| Whether it is on or off |Boolean| 41 | -------------------------------------------------------------------------------- /src/packages/image-uploader/demo/demo3.vue: -------------------------------------------------------------------------------- 1 | 7 | 25 | 26 | 36 | -------------------------------------------------------------------------------- /src/packages/skeleton/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: skeleton 3 | title: Skeleton 骨架屏 4 | preview: https://didi.github.io/mand-mobile/examples/#/skeleton 5 | --- 6 | 7 | # Skeleton 骨架屏 8 | 9 | 骨架屏，一般用于数据尚未加载前先展示出页面的大致结构的加载状态 10 | 11 | ## 引入 12 | 13 | ```javascript 14 | import { Skeleton } from 'mand-mobile-next' 15 | 16 | Vue.createApp().component(Skeleton.name, Skeleton) 17 | ``` 18 | 19 | ## 代码演示 20 | 21 | 24 | 25 | ## API 26 | 27 | ### Skeleton Props 28 | 29 | |属性 | 说明 | 类型 | 默认值 | 备注| 30 | |----|-----|------|------|------| 31 | |loading|是否显示骨架屏|Boolean|true|-| 32 | |avatar|是否显示图标占位图|Boolean|false|-| 33 | |avatar-size|图标占位图大小|String|md| sm, md, lg | 34 | |title|是否显示标题占位图|Boolean|false|-| 35 | |title-width|标题占位宽度|Number,String| 40%|-| 36 | |row|内容占位图行数|Number|3|-| 37 | |row-width|内容占位图宽度|String,Number,Array\|100%|-| 38 | -------------------------------------------------------------------------------- /src/packages/slider/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: slider 3 | title: Slider 滑块 4 | preview: https://didi.github.io/mand-mobile/examples/#/slider 5 | --- 6 | 7 | # Slider 滑块 8 | 9 | ## 引入 10 | 11 | ```javascript 12 | import { Slider } from 'mand-mobile-next' 13 | 14 | Vue.createApp().component(Slider.name, Slider) 15 | ``` 16 | 17 | ## 代码演示 18 | 19 | 22 | 23 | ## API 24 | 25 | ### Slider Props 26 | 27 | |属性 | 说明 | 类型 | 默认值 | 备注| 28 | |----|-----|------|------|------| 29 | |v-model|双向绑定的值|number/number[]|`0`|当开启 range 时, 其值为数组形式| 30 | |disabled|是否禁用滑块|Boolean|`false`|-| 31 | |min|可拖动的最小值|number|`0`|-| 32 | |max|可拖动的最大值|number|`100`|-| 33 | |step|步长|number|`1`|-| 34 | |range|是否启动双向拖动|Boolean|`false`|-| 35 | |format|显示文本的格式化函数|Function|`(val) => {return val}`|-| 36 | |hasTip|是否有气泡提示|Boolean|`true`| | 37 | |tip-Placement|气泡提示位置|String|'top'| | 38 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/QrCode.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 39 | -------------------------------------------------------------------------------- /scripts/gen-component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * todo 组件生成脚本 3 | * 关键： 4 | * 1. export { XXComponent} export default XXComponent 都要存在，方便打包 5 | * 2. 出口 为 index.ts 6 | * 3. 自带一个 install 的方法，方便单独引用 7 | */ 8 | 9 | import path from 'path' 10 | import chalk from 'chalk' 11 | import { Plop, run } from 'plop' 12 | 13 | const args = process.argv.slice(2) 14 | const argv = require('minimist')(args) 15 | 16 | /** 17 | * 生成模版 18 | */ 19 | function generateTemplate() { 20 | console.log( 21 | `${chalk.cyanBright.bold('Welcome to Mand Mobile!')}` 22 | ) 23 | if (argv.name === true) { 24 | console.log( 25 | chalk.red('[ERROR] ') + 26 | '开发组件命令: yarn gen [component name]' 27 | ) 28 | return 29 | } 30 | Plop.launch( 31 | { 32 | configPath: path.resolve(__dirname, 'plopfile.js'), 33 | }, 34 | (env) => run(env, undefined, true) 35 | ) 36 | } 37 | 38 | generateTemplate() 39 | -------------------------------------------------------------------------------- /src/packages/image-uploader/demo/demo2.vue: -------------------------------------------------------------------------------- 1 | 7 | 25 | 26 | 36 | -------------------------------------------------------------------------------- /src/packages/radio/demo/demo2.vue: -------------------------------------------------------------------------------- 1 | 7 | 14 | 15 | 33 | -------------------------------------------------------------------------------- /src/packages/action-bar/demo/demo2.vue: -------------------------------------------------------------------------------- 1 | 7 | 28 | 29 | 40 | -------------------------------------------------------------------------------- /src/packages/number-keyboard/index.styl: -------------------------------------------------------------------------------- 1 | .md-number-keyboard-container 2 | --md-number-keyboard-width: 100% 3 | --md-number-keyboard-height: 428px 4 | --md-number-keyboard-bg: var(--md-color-bg-base) 5 | --md-number-keyboard-key-height: 107px 6 | --md-number-keyboard-key-bg: var(--md-color-bg-inverse) 7 | --md-number-keyboard-key-bg-tap: var(--md-color-bg-base) 8 | --md-number-keyboard-key-confirm-bg: var(--md-color-primary) 9 | --md-number-keyboard-key-confirm-bg-tap: var(--md-button-primary-active-fill) 10 | --md-number-keyboard-key-font-size: var(--md-font-heading-medium) 11 | --md-number-keyboard-key-font-weight: var(--md-font-weight-medium) 12 | --md-number-keyboard-key-color: var(--md-color-text-base) 13 | --md-number-keyboard-key-confirm-color: var(--md-color-text-base-inverse) 14 | --md-number-keyboard-key-border-color: var(--md-color-border-base) 15 | --md-number-keyboard-zindex: 1302 -------------------------------------------------------------------------------- /src/packages/amount/demo/demo2.vue: -------------------------------------------------------------------------------- 1 | 7 | 20 | 21 | 31 | 32 | 41 | -------------------------------------------------------------------------------- /src/packages/utils/trigger-event.ts: -------------------------------------------------------------------------------- 1 | /* istanbul ignore next */ 2 | export function triggerEvent( 3 | element: any, 4 | eventName: string, 5 | x: any, 6 | y: any, 7 | keyCodeOrValue?: any 8 | ) { 9 | const touch = { 10 | identifier: Date.now(), 11 | target: element, 12 | pageX: x, 13 | pageY: y, 14 | clientX: x, 15 | clientY: y, 16 | radiusX: 2.5, 17 | radiusY: 2.5, 18 | rotationAngle: 10, 19 | force: 0.5, 20 | } 21 | 22 | const event = document.createEvent('CustomEvent') as any 23 | event.initCustomEvent(eventName, true, true, {}) 24 | event.touches = [touch] 25 | event.targetTouches = [touch] 26 | event.changedTouches = [touch] 27 | event.keyCode = keyCodeOrValue 28 | event.clientX = x 29 | event.clientY = y 30 | event.pageX = x 31 | event.pageY = y 32 | 33 | element.value += keyCodeOrValue 34 | 35 | element.dispatchEvent(event) 36 | } 37 | -------------------------------------------------------------------------------- /src/packages/switch/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 16 | 17 | 37 | -------------------------------------------------------------------------------- /src/packages/image-uploader/demo/demo4.vue: -------------------------------------------------------------------------------- 1 | 7 | 26 | 27 | 36 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "jsx": "preserve", 8 | "sourceMap": true, 9 | "resolveJsonModule": true, 10 | "esModuleInterop": true, 11 | "lib": ["esnext", "dom"], 12 | "types": ["vite/client", "@types/jest", "@types/node"] , 13 | "baseUrl": ".", 14 | "declaration": true, 15 | "declarationDir": "dist/types", 16 | "outDir": "dist", 17 | "paths": { 18 | "mand-mobile-next/*": [ 19 | "./src/packages/*" 20 | ], 21 | "dist/*": [ 22 | "./dist/es/*" 23 | ] 24 | }, 25 | }, 26 | "include": [ 27 | "src/**/*.ts", 28 | "src/**/*.d.ts", 29 | "src/**/*.tsx", 30 | "src/**/*.vue", 31 | "docs/.vitepress/**/*.ts", 32 | "docs/.vitepress/**/*.vue" 33 | ], 34 | "exclude": [ 35 | "node_modules", 36 | ] 37 | } 38 | -------------------------------------------------------------------------------- /src/packages/number-keyboard/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 7 | 23 | 24 | 37 | -------------------------------------------------------------------------------- /src/packages/tag/demo/demo2.vue: -------------------------------------------------------------------------------- 1 | 7 | 10 | 11 | 35 | 36 | 45 | -------------------------------------------------------------------------------- /scripts/plugin/rollup-plugin-gencss.js: -------------------------------------------------------------------------------- 1 | /** 2 | * rollup-plugin-vue 好像无法正确解析 stylus vars，因此添加这个插件保证 css 生成正确 3 | */ 4 | import stylus from 'stylus' 5 | 6 | /** 7 | * @type {() => import('vite').Plugin} 8 | */ 9 | export function genCss() { 10 | return { 11 | name: 'roll-plugin-gencss', 12 | async transform(code, id) { 13 | if (/lang\.css$/g.test(id)) { 14 | const curCss = await injectStylusVars(code) 15 | return { 16 | code: curCss, 17 | map: null, 18 | } 19 | } 20 | }, 21 | } 22 | } 23 | 24 | export function injectStylusVars(code, filePath = '') { 25 | return new Promise((resolve, reject) => { 26 | stylus(code, { 27 | imports: [`${process.cwd()}/src/styles/index.styl`], 28 | paths: [filePath], 29 | }).render((err, css) => { 30 | if (err) { 31 | reject(err) 32 | } else { 33 | resolve(css) 34 | } 35 | }) 36 | }) 37 | } 38 | -------------------------------------------------------------------------------- /src/packages/number-keyboard/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 23 | 24 | 37 | -------------------------------------------------------------------------------- /src/packages/cell-item/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 15 | 16 | 42 | -------------------------------------------------------------------------------- /src/packages/notice-bar/demo/demo7.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 41 | -------------------------------------------------------------------------------- /src/packages/tip/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: tip 3 | title: Tip 气泡提示 4 | preview: https://didi.github.io/mand-mobile/examples/#/tip 5 | --- 6 | 7 | # Tip 气泡提示 8 | 9 | ## 引入 10 | 11 | ```javascript 12 | import { Tip } from 'mand-mobile-next' 13 | 14 | Vue.createApp().component(Tip.name, Tip) 15 | ``` 16 | 17 | ## 代码演示 18 | 19 | 22 | 23 | ## API 24 | 25 | ### Tip Props 26 | 27 | |属性 | 说明 | 类型 | 默认值|备注| 28 | |----|-----|------|------|------| 29 | |name|提示名称|String\/Number| |一般用于特殊类名| 30 | |content|提示文本内容|String\/Number| | | 31 | |placement|位置|String|`top`|`top`, `left`, `bottom`, `right`| 32 | |icon|图标|String| |可选值请参考组件`Icon`| 33 | |icon-svg |使用svg图标|Boolean|`false`| | 34 | |fill|充满子元素|Boolean|`false`|如按钮提示，与按钮等宽(top/bottom)或等高(left/right)| 35 | |offset|偏移量|Object: {left, top}| | | 36 | 37 | ### Tip Events 38 | 39 | #### @show() 40 | 41 | 提示框显示后触发的事件 42 | 43 | #### @hide() 44 | 45 | 提示框隐藏后触发的事件 46 | -------------------------------------------------------------------------------- /src/packages/progress/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 21 | 22 | 25 | 26 | 35 | -------------------------------------------------------------------------------- /src/packages/detail-item/demo/index.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 35 | -------------------------------------------------------------------------------- /src/packages/button/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 37 | -------------------------------------------------------------------------------- /src/packages/button/demo/demo3.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 40 | -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: build 2 | 3 | on: 4 | push: 5 | branches: 6 | - vue3 7 | 8 | jobs: 9 | build-and-deploy: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v2 13 | - name: Setup node 14 | uses: actions/setup-node@v2 15 | with: 16 | node-version: '14.16.1' 17 | - name: Install dependencies 18 | run: yarn 19 | - name: build 20 | run: yarn build 21 | 22 | 23 | - name: Build docs 24 | run: yarn docs:build 25 | - name: Build example 26 | run: yarn build:example 27 | - name: Move example 28 | run: mv example docs/.vitepress/dist 29 | - name: Deploy 30 | uses: JamesIves/github-pages-deploy-action@3.7.1 31 | with: 32 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 33 | BRANCH: gh-pages 34 | FOLDER: docs/.vitepress/dist 35 | GIT_CONFIG_NAME: MandMobileBot 36 | COMMIT_MESSAGE: website deploy 37 | -------------------------------------------------------------------------------- /src/packages/bill/README.en-US.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: bill 3 | title: Bill 4 | preview: https://didi.github.io/mand-mobile/examples/#/water-mask 5 | --- 6 | 7 | # Bill 8 | 9 | 10 | Electronic bill 11 | 12 | ### 引入 13 | 14 | ```javascript 15 | import { Bill } from 'mand-mobile-next' 16 | 17 | Vue.createApp().component(Bill.name, Bill) 18 | ``` 19 | 20 | ### 代码演示 21 | 22 | 25 | 26 | ### API 27 | 28 | #### Bill Props 29 | |Props | Description | Type | Default | Note | 30 | |----|-----|------|------ |------| 31 | |title|-|String|-|-| 32 | |no|-|String|-|-| 33 | |water-mark|-|String|-|complex content using `scoped slot`| 34 | 35 | #### Bill Slots 36 | 37 | ##### default 38 | Default slot of content 39 | 40 | ##### header 41 | Header slot 42 | 43 | ##### footer 44 | Footer slot 45 | 46 | ##### watermask 47 | Scoped slot of watermask content 48 | 49 | ```html 50 |
51 | 52 |
53 | ``` 54 | -------------------------------------------------------------------------------- /src/packages/locale/index.ts: -------------------------------------------------------------------------------- 1 | /* istanbul ignore file */ 2 | import defaultLang from './lang/zh-CN' 3 | 4 | let lang = defaultLang 5 | 6 | function template( 7 | str: string, 8 | option: { [x: string]: any } 9 | ) { 10 | if (!str || !option) { 11 | return str 12 | } 13 | 14 | return str.replace( 15 | /\{(\w+)\}/g, 16 | (match: any, key: string | number) => { 17 | return option[key] 18 | } 19 | ) 20 | } 21 | 22 | export const t = (path: string, option?: any) => { 23 | let value 24 | const array = path.split('.') 25 | let current: any = lang 26 | for (let i = 0, j = array.length; i < j; i++) { 27 | const property = array[i] 28 | value = current[property] 29 | if (i === j - 1) { 30 | return template(value, option) 31 | } 32 | if (!value) { 33 | return '' 34 | } 35 | current = value 36 | } 37 | return '' 38 | } 39 | 40 | export const setLocale = (l: any) => { 41 | lang = l || lang 42 | } 43 | 44 | export default { setLocale, t } 45 | -------------------------------------------------------------------------------- /src/packages/image-viewer/README.en-US.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: image-viewer 3 | title: ImageViewer 4 | preview: https://didi.github.io/mand-mobile/examples/#/image-viewer 5 | --- 6 | 7 | # ImageViewer 8 | 9 | For browsing multiple pictures and swiping to switch pictures 10 | 11 | ### Import 12 | 13 | ```javascript 14 | import { ImageViewer } from 'mand-mobile-next' 15 | 16 | Vue.createApp().component(ImageViewer.name, ImageViewer) 17 | ``` 18 | 19 | ### Code Examples 20 | 21 | 24 | 25 | ### API 26 | 27 | #### ImageViewer Props 28 | 29 | |Props | Description | Type | Default | Note | 30 | |----|-----|------|------|------| 31 | | visible | viewer display | Boolean | `false` | 32 | | list |show picture list | Array\ | `[]` | -| 33 | | default-index | initialize the index of displayed image | Number | `0` | - | 34 | | has-dots | display the index of picture| Boolean | `true` | - | 35 | | deletable | show delete icon | Boolean | `false` | - | 36 | -------------------------------------------------------------------------------- /src/packages/input-item/index.styl: -------------------------------------------------------------------------------- 1 | .md-input-item 2 | --md-input-item-height: 100px 3 | --md-input-item-font-size: var(--md-font-caption-normal) 4 | --md-input-item-font-weight: var(--md-font-weight-medium) 5 | --md-input-item-font-weight-android: bold 6 | --md-input-item-title-latent-font-size: var(--md-font-body-normal) 7 | --md-input-item-font-size-large: 80px 8 | --md-input-item-font-size-error: var(--md-font-minor-large) 9 | --md-input-item-font-size-brief: var(--md-font-minor-large) 10 | --md-input-item-color: var(--md-color-text-base) 11 | --md-input-item-title-latent-color: var(--md-color-text-minor) 12 | --md-input-item-color-disabled: var(--md-color-text-caption) 13 | --md-input-item-color-error: var(--md-color-text-error) 14 | --md-input-item-color-brief: var(--md-color-text-caption) 15 | --md-input-item-placeholder: var(--md-color-text-placeholder) 16 | --md-input-item-color-highlight: var(--md-color-text-base) 17 | --md-input-item-icon: var(--md-color-text-placeholder) // delete icon -------------------------------------------------------------------------------- /src/packages/detail-item/__test__/index.spec.ts: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import DetailItem from '../index' 3 | 4 | describe('DetailItem.vue', () => { 5 | test('render', () => { 6 | const wrapper = mount(DetailItem, { 7 | props: { 8 | name: 'scan', 9 | }, 10 | }) 11 | expect(wrapper.classes()).toContain('md-detail-item') 12 | }) 13 | 14 | test('props title should be work', () => { 15 | const wrapper = mount(DetailItem, { 16 | props: { 17 | title: 'this is title', 18 | }, 19 | }) 20 | expect(wrapper.text()).toContain('this is title') 21 | }) 22 | 23 | test('props content should be work', () => { 24 | const wrapper = mount(DetailItem, { 25 | props: { 26 | title: 'this is content', 27 | }, 28 | }) 29 | expect(wrapper.text()).toContain('this is content') 30 | }) 31 | 32 | test('install', () => { 33 | expect( 34 | require('vue').createApp(DetailItem).use(DetailItem) 35 | ).toBeTruthy() 36 | }) 37 | }) 38 | -------------------------------------------------------------------------------- /src/packages/action-bar/demo/demo3.vue: -------------------------------------------------------------------------------- 1 | 7 | 21 | 22 | 37 | 38 | 48 | -------------------------------------------------------------------------------- /src/packages/agree/README.en-US.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: agree 3 | title: Agree 4 | preview: https://didi.github.io/mand-mobile/examples/#/agree 5 | --- 6 | 7 | # Agree 8 | 9 | 10 | For toggling states 11 | 12 | ### Import 13 | 14 | ```javascript 15 | import { Agree } from 'mand-mobile-next' 16 | 17 | Vue.createApp().component(Agree.name, Agree) 18 | ``` 19 | 20 | ### Code Examples 21 | 22 | 25 | 26 | 27 | 28 | ### API 29 | 30 | ##### Agree Props 31 | 32 | | Props | Description | Type | Default | Note | 33 | |----|-----|------|------|------| 34 | | v-model | checked | Boolean | `false` |-| 35 | | disabled | - | Boolean | `false` |-| 36 | | size | size of icon | String | `md` | refer to `Icon` for optional values | 37 | #### Agree Instance Events 38 | 39 | ##### @change(name, checked) 40 | Invoked when checked state is changed 41 | 42 | | Props | Description | Type | 43 | |----|-----|------| 44 | | name | unique name of radio button | Number/String | 45 | | checked | - | Boolean | 46 | -------------------------------------------------------------------------------- /src/packages/action-sheet/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 29 | 30 | 47 | -------------------------------------------------------------------------------- /src/packages/amount/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: amount 3 | title: Amount 金融数字 4 | preview: https://didi.github.io/mand-mobile/examples/#/amount 5 | --- 6 | 7 | # Amount 金融数字 8 | 9 | 10 | 金融数字，一般用于金额，数量等 11 | 12 | ## 引入 13 | 14 | ```javascript 15 | import { Amount } from 'mand-mobile-next' 16 | 17 | Vue.createApp().component(Amount.name, Amount) 18 | ``` 19 | 20 | :::tip 21 | 组件中使用字体`DIDIFD-Medium`仅用于案例展示，如有必要可重置`.md-amount`的`font-family` 22 | ::: 23 | 24 | ## 代码演示 25 | 26 | 29 | 30 | ## API 31 | 32 | ### Amount Props 33 | |属性 | 说明 | 类型 | 默认值 | 备注 | 34 | |----|-----|------|------|------| 35 | |value|数值|Number| | | 36 | |precision|数字精度|Number|`2`|小数点后保留几位| 37 | |is-round-up|数字精度取舍是否四舍五入|Boolean|`true`| | 38 | |has-separator|数字是否有千位分隔符|Boolean|`false`| | 39 | |separator|数字千位分隔符|String|`,`| | 40 | |is-capital|数字是否转换为大写中文|Boolean|`false`| | 41 | |transition|数字变化是否使用动画|Boolean|`false`| | 42 | |duration|数字变化动画时长|Number|`1000`|单位`ms`| 43 | |unit|金额符号|String| | | 44 | |reverse|是否置后金额符号位置|Boolean|`false`| | 45 | -------------------------------------------------------------------------------- /src/packages/button/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 42 | -------------------------------------------------------------------------------- /src/packages/icon/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 44 | -------------------------------------------------------------------------------- /src/packages/landscape/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: landscape 3 | title: Landscape 输入框 4 | preview: https://didi.github.io/mand-mobile/examples/#/landscape 5 | --- 6 | 7 | # Landscape 输入框 8 | 9 | 用于在浮层中显示广告或说明 10 | 11 | ## 引入 12 | 13 | ```javascript 14 | import { Landscape } from 'mand-mobile-next' 15 | 16 | Vue.createApp().component(Landscape.name, Landscape) 17 | ``` 18 | 19 | ## 代码演示 20 | 21 | 25 | 26 | 27 | 28 | ## API 29 | 30 | ### Landscape Props 31 | |属性 | 说明 | 类型 | 默认值| 备注 | 32 | |----|-----|------|------|-----| 33 | |v-model|是否展示|Boolean|`false`| - | 34 | |has-mask|是否有蒙层|Boolean|`true`| - | 35 | |mask-closable|是否可以通过点击蒙层关闭|Boolean|`false`| - | 36 | |full-screen|是否全屏|Boolean|`false`| - | 37 | |transition|弹出层过渡动画|String|`full-screen`为`true`时，默认值`md-fade`；否则默认为`md-punch`| 可选值参考[Transition](https://didi.github.io/mand-mobile/#/zh-CN/docs/components/feedback/transition?anchor=API) | 38 | 39 | ### Landscape Events 40 | 41 | #### @show() 42 | 弹出层展示事件 43 | 44 | #### @hide() 45 | 弹出层隐藏事件 46 | -------------------------------------------------------------------------------- /src/packages/progress/index.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/water-mark/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: water-mark 3 | title: WaterMark 水印 4 | preview: https://didi.github.io/mand-mobile/examples/#/water-mark 5 | --- 6 | 7 | # WaterMark 水印 8 | 9 | 自带水印背景的容器 10 | 11 | ## 引入 12 | 13 | ```javascript 14 | import { WaterMark } from 'mand-mobile-next' 15 | 16 | Vue.createApp().component(WaterMask.name, WaterMark) 17 | ``` 18 | 19 | ## 代码演示 20 | 21 | 24 | 25 | ## API 26 | 27 | ### WaterMask Props 28 | 29 | |属性 | 说明 | 类型 | 默认值 | 备注 | 30 | |----|-----|------|------ |------| 31 | |content|水印内容|String| |复杂内容使用`scoped slot`| 32 | |spacing|水印间距|String|`60px`| | 33 | |repeat-x|横向重复|Boolean|`true`| | 34 | |repeat-y|纵向重复|Boolean|`true`| | 35 | |rotate|旋转角度|String|`-30`| | 36 | |opacity|透明度|String|`0.1`| | 37 | 38 | ### WaterMark Slots 39 | 40 | #### default 41 | 42 | 默认内容插槽 43 | 44 | #### watermark 45 | 46 | 水印内容scoped插槽 47 | 48 | ```html 49 |
50 | 51 | 52 |
53 | ``` 54 | -------------------------------------------------------------------------------- /src/packages/image-reader/__test__/index.spec.ts: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import ImageReader from '../index' 3 | import { imageProcessor } from '../image-processor' 4 | import { dataUrl } from './fileMock' 5 | 6 | describe('ImageReader.vue', () => { 7 | test('render', () => { 8 | const wrapper = mount(ImageReader, { 9 | props: { 10 | name: 'scan', 11 | }, 12 | }) 13 | expect(wrapper.classes()).toContain('md-image-reader') 14 | }) 15 | 16 | test('create a image-reader', () => { 17 | const wrapper = mount(ImageReader, { 18 | props: { 19 | size: 10, 20 | accept: ['jpeg', 'png'], 21 | }, 22 | }) 23 | expect(wrapper.find('input')).toBeTruthy() 24 | }) 25 | 26 | test('image-reader processor', () => { 27 | imageProcessor({ 28 | dataUrl, 29 | width: 200, 30 | height: 200, 31 | quality: 0.1, 32 | }) 33 | }) 34 | 35 | test('install', () => { 36 | expect( 37 | require('vue').createApp(ImageReader).use(ImageReader) 38 | ).toBeTruthy() 39 | }) 40 | }) 41 | -------------------------------------------------------------------------------- /src/packages/picker/demo/data/simple.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | [ 3 | { text: '2015', value: 1 }, 4 | { text: '2016', value: 2 }, 5 | { text: '2017', value: 3 }, 6 | { text: '2018', value: 4 }, 7 | { text: '2019', value: 5 }, 8 | { text: '2020', value: 6 }, 9 | { text: '2021', value: 7 }, 10 | { text: '2022', value: 8 }, 11 | { text: '2023', value: 9 }, 12 | { text: '2024', value: 10 }, 13 | { text: '2025', value: 11 }, 14 | { text: '2026', value: 12 }, 15 | { text: '2027', value: 13 }, 16 | { text: '2028', value: 14 }, 17 | { text: '2029', value: 15 }, 18 | { text: '2030', value: 16 }, 19 | ], 20 | [ 21 | { text: '1', value: 1 }, 22 | { text: '2', value: 2 }, 23 | { text: '3', value: 3 }, 24 | { text: '4', value: 4 }, 25 | { text: '5', value: 5 }, 26 | { text: '6', value: 6 }, 27 | { text: '7', value: 7 }, 28 | { text: '8', value: 8 }, 29 | { text: '9', value: 9 }, 30 | { text: '10', value: 10 }, 31 | { text: '11', value: 11 }, 32 | { text: '12', value: 12 }, 33 | ], 34 | ] 35 | -------------------------------------------------------------------------------- /src/packages/cell-item/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: cell-item 3 | title: CellItem 单元格 4 | preview: https://didi.github.io/mand-mobile/examples/#/cell-item 5 | --- 6 | 7 | # CellItem 单元格 8 | 9 | 列表用于展现并列层级的信息内容，列表可承载功能入口、功能操作、信息展示等功能。 10 | 11 | ## 引入 12 | 13 | ```javascript 14 | import { CellItem } from 'mand-mobile-next' 15 | 16 | Vue.createApp().component(CellItem.name, CellItem) 17 | ``` 18 | 19 | ## 代码演示 20 | 21 | 24 | 25 | ## API 26 | 27 | ### CellItem Props 28 | 29 | |属性 | 说明 | 类型 | 默认值|备注| 30 | |----|-----|------|------|------| 31 | |title|标题|String\/Number| | | 32 | |brief|描述文案|String\/Number| | | 33 | |addon|附加文案|String| | | 34 | |disabled|是否禁用项目|Boolean|`false`| | 35 | |arrow|动作箭头标识|Boolean|`false`| | 36 | |no-border|去除边框|Boolean|`false`| | 37 | 38 | ### CellItem Events 39 | 40 | #### @click(event) 41 | 42 | 非禁用状态下的点击事件 43 | 44 | ### CellItem Slots 45 | 46 | #### default 47 | 48 | 内容默认插槽 49 | 50 | #### left 51 | 52 | 起始区域插槽 53 | 54 | #### right 55 | 56 | 末尾附加内容插槽 57 | 58 | #### children 59 | 60 | 额外内容插槽 61 | -------------------------------------------------------------------------------- /src/packages/icon/demo/demo3.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 43 | -------------------------------------------------------------------------------- /src/packages/notice-bar/demo/demo4.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 42 | 43 | 49 | -------------------------------------------------------------------------------- /src/packages/image-uploader/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 31 | 32 | 42 | -------------------------------------------------------------------------------- /src/packages/number-keyboard/demo/demo2.vue: -------------------------------------------------------------------------------- 1 | 7 | 29 | 30 | 44 | -------------------------------------------------------------------------------- /src/packages/water-mark/demo/demo0.vue: -------------------------------------------------------------------------------- 1 | 7 | 10 | 11 | 32 | 33 | 44 | -------------------------------------------------------------------------------- /src/packages/tag/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | component: tag 3 | title: Tag 标签 4 | preview: https://didi.github.io/mand-mobile/examples/#/tag 5 | --- 6 | 7 | # Tag 标签 8 | 9 | 用于表示区域的状态的标签 10 | 11 | ## 引入 12 | 13 | ```javascript 14 | import { Tag } from 'mand-mobile-next' 15 | 16 | Vue.createApp().component(Tag.name, Tag) 17 | ``` 18 | 19 | ## 代码演示 20 | 21 | 24 | 25 | 30 | 31 | ## API 32 | 33 | ### Tag Props 34 | 35 | |属性 | 说明 | 类型 | 默认值 |可选值| 36 | |----|-----|------|------|------| 37 | |size|标签大小|String|`large`|`tiny`, `small`, `large`| 38 | |shape|标签形状|String|`square`|`square`, `circle`, `fillet`, `quarter`, `coupon`,`bubble`| 39 | |sharp|标签尖角|String| |`top-left`, `top-right`, `bottom-left`, `bottom-right`| 40 | |type|标签样式|String|`ghost`|`fill`(填充), `ghost`(线框)| 41 | |fill-color|标签颜色`rgba` or `hex number`|String|`rgba(0,0,0,0)`| | 42 | |font-weight|字体粗细|String|`normal`|`normal`, `bold`, `bolder`| 43 | |font-color|字体颜色`rgba` or `hex number`|String|`#fc9153`| | 44 | -------------------------------------------------------------------------------- /src/packages/tag/demo/demo3.vue: -------------------------------------------------------------------------------- 1 | 7 | 10 | 11 | 40 | 41 | 50 | -------------------------------------------------------------------------------- /src/packages/notice-bar/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | -------------------------------------------------------------------------------- /src/packages/activity-indicator/spinner.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 38 | 39 | 48 | -------------------------------------------------------------------------------- /src/packages/popup/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | -------------------------------------------------------------------------------- /src/packages/tabs/__test__/index.spec.ts: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import Tabs from '../index' 3 | 4 | describe('Tabs.vue', () => { 5 | test('render', () => { 6 | const wrapper = mount(Tabs, { 7 | props: { 8 | name: 'scan', 9 | }, 10 | }) 11 | expect(wrapper.classes()).toContain('md-tabs') 12 | }) 13 | 14 | test('props immediate should be work', () => { 15 | const wrapper = mount(Tabs, { 16 | props: { 17 | immediate: true, 18 | defaultIndex: 1, 19 | }, 20 | }) 21 | wrapper.vm.changeHandler('', 2) 22 | expect(wrapper.emitted('change')).toBeTruthy() 23 | }) 24 | 25 | test('swiperChangeHandler should be work', () => { 26 | const wrapper = mount(Tabs, { 27 | props: { 28 | name: 'tab', 29 | label: 'first page', 30 | }, 31 | }) 32 | wrapper.vm.swiperChangeHandler('', 2) 33 | expect(wrapper.emitted('change')).toBeTruthy() 34 | }) 35 | 36 | test('install', () => { 37 | expect( 38 | require('vue').createApp(Tabs).use(Tabs) 39 | ).toBeTruthy() 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /src/packages/tag/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/bill/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/tabs/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/agree/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 9 | 28 | 29 | 49 | -------------------------------------------------------------------------------- /src/packages/agree/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/check/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/field/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/radio/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/slider/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/steps/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/swiper/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/switch/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/tip/demo/demo2.vue: -------------------------------------------------------------------------------- 1 | 7 | 16 | 17 | 45 | 46 | 50 | -------------------------------------------------------------------------------- /src/packages/amount/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/captcha/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/cashier/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/dialog/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/picker/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/radio/demo/demo1.vue: -------------------------------------------------------------------------------- 1 | 7 | 15 | 16 | 48 | -------------------------------------------------------------------------------- /src/packages/tab-bar/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/transition/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | -------------------------------------------------------------------------------- /src/assets/stylus/app.styl: -------------------------------------------------------------------------------- 1 | @import '../../styles/fonts.styl' 2 | 3 | * 4 | margin 0 5 | padding 0 6 | 7 | *, * > * 8 | box-sizing border-box 9 | 10 | html, body, div, span, applet, object, iframe, 11 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 12 | a, abbr, acronym, address, big, cite, code, 13 | del, dfn, em, img, ins, kbd, q, s, samp, 14 | small, strike, strong, sub, sup, tt, var, 15 | b, u, i, center, 16 | dl, dt, dd, ol, ul, li, 17 | fieldset, form, label, legend, 18 | table, caption, tbody, tfoot, thead, tr, th, td, 19 | article, aside, canvas, details, embed, 20 | figure, figcaption, footer, header, hgroup, 21 | menu, nav, output, ruby, section, summary, 22 | time, mark, audio, video 23 | margin 0 24 | padding 0 25 | // border 0 26 | // font-size 100% 27 | // font inherit 28 | // vertical-align baseline 29 | 30 | ol, li, ul 31 | list-style none 32 | 33 | body 34 | font-family "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif 35 | -webkit-tap-highlight-color transparent 36 | -webkit-font-smoothing antialiased 37 | -moz-osx-font-smoothing grayscale 38 | -------------------------------------------------------------------------------- /src/packages/codebox/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/skeleton/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/packages/agree/demo/demo2.vue: -------------------------------------------------------------------------------- 1 | 9 | 28 | 29 | 49 | -------------------------------------------------------------------------------- /src/packages/button/demo/demo4.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 31 | 32 | 45 | -------------------------------------------------------------------------------- /src/packages/cell-item/demo/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | 40 | 41 | --------------------------------------------------------------------------------