├── .editorconfig ├── .gitattributes ├── .github ├── ISSUE_TEMPLATE │ ├── 1-bug-report.md │ ├── 2-feature-request.md │ ├── 3-style.md │ └── 4-docs.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ ├── ci.yaml │ ├── deploy-site-sync-gitee.yaml │ └── release-tag.yaml ├── .gitignore ├── .prettierignore ├── .prettierrc ├── CHANGELOG.md ├── LICENCE ├── README.md ├── README.zh-CN.md ├── package.json ├── packages ├── varlet-vue2-cli │ ├── lib │ │ └── index.js │ ├── package.json │ ├── preset.js │ ├── site │ │ ├── components │ │ │ ├── app-bar │ │ │ │ ├── AppBar.vue │ │ │ │ ├── appBar.less │ │ │ │ ├── index.ts │ │ │ │ └── props.ts │ │ │ ├── button │ │ │ │ ├── Button.vue │ │ │ │ ├── button.less │ │ │ │ ├── index.ts │ │ │ │ └── props.ts │ │ │ ├── cell │ │ │ │ ├── Cell.vue │ │ │ │ ├── cell.less │ │ │ │ ├── index.ts │ │ │ │ └── props.ts │ │ │ ├── code-example │ │ │ │ ├── CodeExample.vue │ │ │ │ ├── codeExample.less │ │ │ │ └── index.ts │ │ │ ├── context │ │ │ │ ├── index.ts │ │ │ │ └── lock.js │ │ │ ├── icon │ │ │ │ ├── Icon.vue │ │ │ │ ├── icon.less │ │ │ │ ├── index.ts │ │ │ │ └── props.ts │ │ │ ├── loading │ │ │ │ ├── Loading.vue │ │ │ │ ├── index.ts │ │ │ │ ├── loading.less │ │ │ │ └── props.ts │ │ │ ├── progress │ │ │ │ ├── Progress.vue │ │ │ │ ├── index.ts │ │ │ │ ├── progress.less │ │ │ │ └── props.ts │ │ │ ├── ripple │ │ │ │ ├── index.ts │ │ │ │ └── ripple.less │ │ │ ├── snackbar │ │ │ │ ├── Snackbar.vue │ │ │ │ ├── core.vue │ │ │ │ ├── index.jsx │ │ │ │ ├── props.ts │ │ │ │ └── snackbar.less │ │ │ ├── styles │ │ │ │ ├── common.less │ │ │ │ ├── elevation.less │ │ │ │ └── var.less │ │ │ ├── teleport │ │ │ │ ├── Teleport.jsx │ │ │ │ ├── index.ts │ │ │ │ └── props.ts │ │ │ └── utils │ │ │ │ ├── components.ts │ │ │ │ ├── create.ts │ │ │ │ ├── elements.ts │ │ │ │ ├── mixins │ │ │ │ ├── listeners.js │ │ │ │ ├── slots.js │ │ │ │ └── zIndex.js │ │ │ │ └── shared.ts │ │ ├── index.html │ │ ├── mobile.html │ │ ├── mobile │ │ │ ├── App.vue │ │ │ ├── components │ │ │ │ ├── AppHome.vue │ │ │ │ └── AppType.vue │ │ │ ├── main.js │ │ │ └── router.js │ │ ├── pc │ │ │ ├── App.vue │ │ │ ├── Layout.vue │ │ │ ├── components │ │ │ │ ├── AnimationBox.vue │ │ │ │ ├── AppHeader.vue │ │ │ │ ├── AppMobile.vue │ │ │ │ ├── AppSidebar.vue │ │ │ │ ├── LogoAnimation.vue │ │ │ │ └── NProgress.jsx │ │ │ ├── floating.js │ │ │ ├── main.js │ │ │ ├── pages │ │ │ │ └── index │ │ │ │ │ ├── index.less │ │ │ │ │ ├── index.vue │ │ │ │ │ └── locale │ │ │ │ │ ├── en-US.ts │ │ │ │ │ └── zh-CN.ts │ │ │ └── router.js │ │ └── utils.ts │ ├── src │ │ ├── commands │ │ │ ├── build.ts │ │ │ ├── changelog.ts │ │ │ ├── commitLint.ts │ │ │ ├── compile.ts │ │ │ ├── dev.ts │ │ │ ├── jest.ts │ │ │ ├── lint.ts │ │ │ ├── preview.ts │ │ │ └── release.ts │ │ ├── compiler │ │ │ ├── compileModule.ts │ │ │ ├── compileSFC.ts │ │ │ ├── compileScript.ts │ │ │ ├── compileSiteEntry.ts │ │ │ ├── compileStyle.ts │ │ │ ├── compileTemplateHighlight.ts │ │ │ └── compileTypes.ts │ │ ├── config │ │ │ ├── babel.config.ts │ │ │ ├── babel.sfc.transform.ts │ │ │ ├── jest.config.ts │ │ │ ├── jest.media.mock.ts │ │ │ ├── jest.style.mock.ts │ │ │ ├── varlet.config.ts │ │ │ └── vite.config.ts │ │ ├── index.ts │ │ ├── module.d.ts │ │ └── shared │ │ │ ├── constant.ts │ │ │ ├── fsUtils.ts │ │ │ └── logger.ts │ ├── tsconfig.json │ └── varlet.default.config.js ├── varlet-vue2-eslint-config │ ├── index.js │ └── package.json ├── varlet-vue2-markdown-vite-plugin │ ├── index.js │ └── package.json ├── varlet-vue2-stylelint-config │ ├── index.js │ └── package.json └── varlet-vue2-ui │ ├── README.md │ ├── README.zh-CN.md │ ├── babel.config.js │ ├── docs │ ├── browserAdaptation.en-US.md │ ├── browserAdaptation.zh-CN.md │ ├── customTheme.en-US.md │ ├── customTheme.zh-CN.md │ ├── home.en-US.md │ ├── home.zh-CN.md │ ├── ide.en-US.md │ ├── ide.zh-CN.md │ ├── importOnDemand.en-US.md │ ├── importOnDemand.zh-CN.md │ ├── quickstart.en-US.md │ └── quickstart.zh-CN.md │ ├── global.d.ts │ ├── json │ └── area.json │ ├── package.json │ ├── public │ ├── cat.jpg │ ├── cat2.jpg │ ├── cat3.jpg │ ├── cover.jpg │ ├── ext_vsc.png │ ├── ext_vsc_link.png │ ├── hl_vsc.png │ ├── hl_vsc_setting.png │ ├── hl_wb.jpg │ ├── hl_wb_setting.png │ ├── logo.svg │ ├── preview_error.png │ ├── preview_success.png │ ├── sitemap.xml │ ├── varlet-vscode-extension.gif │ └── varlet_icon.png │ ├── src │ ├── action-sheet │ │ ├── ActionSheet.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── component.spec.js.snap │ │ │ ├── component.spec.js │ │ │ └── index.spec.js │ │ ├── actionSheet.less │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ └── props.ts │ ├── app-bar │ │ ├── AppBar.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── appBar.less │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ └── props.ts │ ├── back-top │ │ ├── BackTop.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── backTop.less │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ └── index.vue │ │ ├── index.ts │ │ └── props.ts │ ├── badge │ │ ├── Badge.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── badge.less │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ └── props.ts │ ├── bottom-navigation-item │ │ ├── BottomNavigationItem.vue │ │ ├── bottomNavigationItem.less │ │ ├── docs │ │ │ └── zh-CN.md │ │ ├── index.ts │ │ └── props.ts │ ├── bottom-navigation │ │ ├── BottomNavigation.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── bottomNavigation.less │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ └── props.ts │ ├── button │ │ ├── Button.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── button.less │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ └── props.ts │ ├── card │ │ ├── Card.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── card.less │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ └── props.ts │ ├── cell │ │ ├── Cell.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── cell.less │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ └── props.ts │ ├── checkbox-group │ │ ├── CheckboxGroup.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── checkboxGroup.less │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ └── props.ts │ ├── checkbox │ │ ├── Checkbox.vue │ │ ├── checkbox.less │ │ ├── docs │ │ │ └── zh-CN.md │ │ ├── index.ts │ │ └── props.ts │ ├── chip │ │ ├── Chip.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── chip.less │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ └── props.ts │ ├── col │ │ ├── Col.vue │ │ ├── col.less │ │ ├── docs │ │ │ └── zh-CN.md │ │ ├── index.ts │ │ └── props.ts │ ├── collapse-item │ │ ├── CollapseItem.vue │ │ ├── collapseItem.less │ │ ├── docs │ │ │ └── zh-CN.md │ │ ├── index.ts │ │ └── props.ts │ ├── collapse │ │ ├── Collapse.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ └── props.ts │ ├── context │ │ ├── index.ts │ │ └── lock.js │ ├── countdown │ │ ├── Countdown.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ └── props.ts │ ├── counter │ │ ├── Counter.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── counter.less │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ └── props.ts │ ├── date-picker │ │ ├── DatePicker.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── date-picker.less │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── props.ts │ │ └── src │ │ │ ├── day-picker-panel.vue │ │ │ ├── month-picker-panel.vue │ │ │ ├── panel-header.vue │ │ │ └── year-picker-panel.vue │ ├── dialog │ │ ├── Dialog.vue │ │ ├── __tests__ │ │ │ ├── component.spec.js │ │ │ └── index.spec.js │ │ ├── dialog.less │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ └── props.ts │ ├── divider │ │ ├── Divider.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── divider.less │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ └── props.ts │ ├── form-details │ │ ├── FormDetails.vue │ │ ├── __tests__ │ │ │ └── index.spec.js │ │ ├── formDetails.less │ │ ├── index.ts │ │ └── props.ts │ ├── form │ │ ├── Form.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ └── props.ts │ ├── icon │ │ ├── Icon.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── icon.less │ │ ├── index.ts │ │ └── props.ts │ ├── image-preview │ │ ├── ImagePreview.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ ├── component.spec.js │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── imagePreview.less │ │ ├── index.ts │ │ └── props.ts │ ├── image │ │ ├── Image.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── image.less │ │ ├── index.ts │ │ └── props.ts │ ├── index-anchor │ │ ├── IndexAnchor.vue │ │ ├── docs │ │ │ └── zh-CN.md │ │ ├── index.ts │ │ └── props.ts │ ├── index-bar │ │ ├── IndexBar.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── indexBar.less │ │ └── props.ts │ ├── input │ │ ├── Input.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── input.less │ │ └── props.ts │ ├── lazy │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ └── index.ts │ ├── list │ │ ├── List.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── list.less │ │ └── props.ts │ ├── loading │ │ ├── Loading.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── loading.less │ │ └── props.ts │ ├── locale │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── en-US.d.ts │ │ ├── en-US.ts │ │ ├── index.ts │ │ ├── zh-CN.d.ts │ │ └── zh-CN.ts │ ├── menu │ │ ├── Menu.jsx │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── menu.less │ │ └── props.ts │ ├── option │ │ ├── Option.vue │ │ ├── docs │ │ │ └── zh-CN.md │ │ ├── example │ │ │ └── index.vue │ │ ├── index.ts │ │ ├── option.less │ │ ├── props.ts │ │ └── provide.ts │ ├── pagination │ │ ├── Pagination.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── Basic.vue │ │ │ ├── Disabled.vue │ │ │ ├── QuickJumper.vue │ │ │ ├── ShowTotal.vue │ │ │ ├── SizeOption.vue │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── pagination.less │ │ └── props.ts │ ├── picker │ │ ├── Picker.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── component.spec.js.snap │ │ │ ├── component.spec.js │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── picker.less │ │ └── props.ts │ ├── popup │ │ ├── Popup.jsx │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── popup.less │ │ └── props.ts │ ├── progress │ │ ├── Progress.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── progress.less │ │ └── props.ts │ ├── pull-refresh │ │ ├── PullRefresh.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ └── index.vue │ │ ├── index.ts │ │ ├── props.ts │ │ └── pullRefresh.less │ ├── radio-group │ │ ├── RadioGroup.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── props.ts │ │ └── radioGroup.less │ ├── radio │ │ ├── Radio.vue │ │ ├── docs │ │ │ └── zh-CN.md │ │ ├── index.ts │ │ ├── props.ts │ │ └── radio.less │ ├── rate │ │ ├── Rate.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── props.ts │ │ └── rate.less │ ├── ripple │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ └── ripple.less │ ├── row │ │ ├── Row.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── Responsive.vue │ │ │ ├── ResponsiveObject.vue │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── props.ts │ │ └── row.less │ ├── select │ │ ├── Select.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── props.ts │ │ └── select.less │ ├── skeleton │ │ ├── Skeleton.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── props.ts │ │ └── skeleton.less │ ├── slider │ │ ├── Slider.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── props.ts │ │ └── slider.less │ ├── snackbar │ │ ├── Snackbar.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── component.spec.js.snap │ │ │ ├── component.spec.js │ │ │ └── index.spec.js │ │ ├── core.vue │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.jsx │ │ ├── props.ts │ │ └── snackbar.less │ ├── space │ │ ├── Space.jsx │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── props.ts │ │ └── space.less │ ├── step │ │ ├── Step.vue │ │ ├── docs │ │ │ └── zh-CN.md │ │ ├── index.ts │ │ ├── props.ts │ │ └── step.less │ ├── steps │ │ ├── Steps.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ └── props.ts │ ├── sticky │ │ ├── Sticky.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── props.ts │ │ └── sticky.less │ ├── style-provider │ │ ├── StyleProvider.vue │ │ ├── __tests__ │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ └── props.ts │ ├── styles │ │ ├── common.less │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── elevation.less │ │ ├── example │ │ │ └── index.vue │ │ └── var.less │ ├── swipe-item │ │ ├── SwipeItem.vue │ │ ├── docs │ │ │ └── zh-CN.md │ │ ├── index.ts │ │ └── swipeItem.less │ ├── swipe │ │ ├── Swipe.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── props.ts │ │ └── swipe.less │ ├── switch │ │ ├── Switch.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── props.ts │ │ └── switch.less │ ├── tab-item │ │ ├── TabItem.vue │ │ ├── docs │ │ │ └── zh-CN.md │ │ ├── example │ │ │ └── index.vue │ │ ├── index.ts │ │ ├── props.ts │ │ └── tabItem.less │ ├── tab │ │ ├── Tab.vue │ │ ├── docs │ │ │ └── zh-CN.md │ │ ├── index.ts │ │ ├── props.ts │ │ └── tab.less │ ├── table │ │ ├── Table.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ ├── index.spec.js.snap │ │ │ │ └── index.spec.js.snap(include pagination) │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── Basic.vue │ │ │ ├── FooterSlots.vue │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ └── table.less │ ├── tabs-items │ │ ├── TabsItems.vue │ │ ├── docs │ │ │ └── zh-CN.md │ │ ├── example │ │ │ └── index.vue │ │ ├── index.ts │ │ └── props.ts │ ├── tabs │ │ ├── Tabs.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── props.ts │ │ └── tabs.less │ ├── teleport │ │ ├── Teleport.jsx │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── example │ │ │ └── index.vue │ │ ├── index.ts │ │ └── props.ts │ ├── themes │ │ ├── dark │ │ │ ├── actionSheet.ts │ │ │ ├── appBar.ts │ │ │ ├── badge.ts │ │ │ ├── bottomNavigation.ts │ │ │ ├── bottomNavigationItem.ts │ │ │ ├── button.ts │ │ │ ├── card.ts │ │ │ ├── cell.ts │ │ │ ├── checkbox.ts │ │ │ ├── chip.ts │ │ │ ├── collapse.ts │ │ │ ├── datePicker.ts │ │ │ ├── dialog.ts │ │ │ ├── divider.ts │ │ │ ├── index.d.ts │ │ │ ├── index.ts │ │ │ ├── input.ts │ │ │ ├── pagination.ts │ │ │ ├── picker.ts │ │ │ ├── popup.ts │ │ │ ├── pullRefresh.ts │ │ │ ├── radio.ts │ │ │ ├── select.ts │ │ │ ├── skeleton.ts │ │ │ ├── steps.ts │ │ │ ├── switch.ts │ │ │ ├── tab-item.ts │ │ │ ├── tab.ts │ │ │ ├── table.ts │ │ │ ├── tabs.ts │ │ │ ├── timePicker.ts │ │ │ └── uploader.ts │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ └── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ ├── en-US.ts │ │ │ ├── index.ts │ │ │ └── zh-CN.ts │ ├── time-picker │ │ ├── TimePicker.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── clock.vue │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── props.ts │ │ ├── timePicker.less │ │ └── utils.ts │ ├── uploader │ │ ├── Uploader.vue │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ ├── docs │ │ │ ├── en-US.md │ │ │ └── zh-CN.md │ │ ├── example │ │ │ ├── index.vue │ │ │ └── locale │ │ │ │ ├── en-US.ts │ │ │ │ ├── index.ts │ │ │ │ └── zh-CN.ts │ │ ├── index.ts │ │ ├── props.ts │ │ └── uploader.less │ └── utils │ │ ├── components.ts │ │ ├── create.ts │ │ ├── elements.ts │ │ ├── jest.ts │ │ ├── mixins │ │ ├── listeners.js │ │ ├── relation.js │ │ ├── slots.js │ │ ├── teleport.js │ │ ├── validation.js │ │ └── zIndex.js │ │ └── shared.ts │ ├── tsconfig.json │ ├── types │ ├── actionSheet.d.ts │ ├── appBar.d.ts │ ├── backTop.d.ts │ ├── badge.d.ts │ ├── bottomNavigation.d.ts │ ├── bottomNavigationItem.d.ts │ ├── button.d.ts │ ├── card.d.ts │ ├── cell.d.ts │ ├── checkbox.d.ts │ ├── checkboxGroup.d.ts │ ├── chip.d.ts │ ├── col.d.ts │ ├── collapse.d.ts │ ├── collapseItem.d.ts │ ├── countdown.d.ts │ ├── counter.d.ts │ ├── datePicker.d.ts │ ├── dialog.d.ts │ ├── divider.d.ts │ ├── form.d.ts │ ├── global.d.ts │ ├── icon.d.ts │ ├── image.d.ts │ ├── imagePreview.d.ts │ ├── index.d.ts │ ├── indexAnchor.d.ts │ ├── indexBar.d.ts │ ├── input.d.ts │ ├── lazy.d.ts │ ├── list.d.ts │ ├── loading.d.ts │ ├── locale.d.ts │ ├── menu.d.ts │ ├── option.d.ts │ ├── pagination.d.ts │ ├── picker.d.ts │ ├── progress.d.ts │ ├── pullRefresh.d.ts │ ├── radio.d.ts │ ├── radioGroup.d.ts │ ├── rate.d.ts │ ├── ripple.d.ts │ ├── row.d.ts │ ├── select.d.ts │ ├── skeleton.d.ts │ ├── slider.d.ts │ ├── snackbar.d.ts │ ├── space.d.ts │ ├── step.d.ts │ ├── steps.d.ts │ ├── sticky.d.ts │ ├── swipe.d.ts │ ├── swipeItem.d.ts │ ├── switch.d.ts │ ├── tab.d.ts │ ├── tabItem.d.ts │ ├── table.d.ts │ ├── tabs.d.ts │ ├── tabsItems.d.ts │ ├── timePicker.d.ts │ ├── uploader.d.ts │ ├── varComponent.d.ts │ └── varDirective.d.ts │ └── varlet.config.js ├── pnpm-lock.yaml ├── pnpm-workspace.yaml └── scripts ├── bootstrap.mjs ├── build.mjs └── publish.mjs /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | insert_final_newline = false 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.html linguist-vendored 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/1-bug-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 'Bug report 🐞' 3 | about: "If something isn't working as expected 🤔." 4 | --- 5 | 6 | # Bug report 🐞 7 | 8 | ## Version & Environment 9 | 10 | ## Expectation 11 | 12 | ## Actual results (or Errors) 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/2-feature-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 'Feature request 🚀' 3 | about: 'I have a suggestion!' 4 | --- 5 | 6 | # Feature request 🚀 7 | 8 | ### Expected: 9 | 10 | - No breaking changes 11 | 12 | ### Examples: 13 | 14 | ```js 15 | 16 | ``` 17 | 18 | ### Programme: 19 | 20 | ### Others: 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/3-style.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 'About `styles` 🛠️' 3 | about: 'Issues and feature requests for styles' 4 | --- 5 | 6 | # About `styles` 🛠️ 7 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/4-docs.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 'About `docs` 🛠️' 3 | about: 'Issues and feature requests for docs' 4 | --- 5 | 6 | # About `docs` 7 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Checklist 2 | 3 | --- 4 | 5 | - [ ] Fix linting errors 6 | - [ ] Tests have been added / updated (or snapshots) 7 | 8 | ## Change information 9 | 10 | --- 11 | -------------------------------------------------------------------------------- /.github/workflows/release-tag.yaml: -------------------------------------------------------------------------------- 1 | name: Create Release Tag 2 | 3 | on: 4 | push: 5 | tags: 6 | - 'v*' 7 | 8 | jobs: 9 | release-tag: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - name: Checkout code 13 | uses: actions/checkout@master 14 | 15 | - name: Create Release Tag 16 | id: release_tag 17 | uses: yyx990803/release-tag@master 18 | env: 19 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 20 | with: 21 | tag_name: ${{ github.ref }} 22 | body: | 23 | 更新内容请查看[CHANGELOG](https://github.com/varletjs/varlet-vue2/blob/dev/CHANGELOG.md)。 24 | Please refer to [CHANGELOG](https://github.com/varletjs/varlet-vue2/blob/dev/CHANGELOG.md) for details. 25 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | packages/varlet-vue2-cli/lib/** 2 | packages/varlet-vue2-cli/site/** 3 | 4 | packages/varlet-vue2-icons/dist/** 5 | 6 | packages/varlet-vue2-ui/es/** 7 | packages/varlet-vue2-ui/lib/** 8 | packages/varlet-vue2-ui/umd/** 9 | packages/varlet-vue2-ui/site/** 10 | packages/varlet-vue2-ui/public/** 11 | packages/varlet-vue2-ui/.varlet/** 12 | packages/varlet-vue2-ui/coverage/** 13 | packages/varlet-vue2-ui/highlight/** 14 | packages/varlet-vue2-ui/types/global.d.ts 15 | 16 | **/package.json 17 | *.md 18 | 19 | pnpm-lock.yaml 20 | pnpm-workspace.yaml 21 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "singleQuote": true, 4 | "semi": false 5 | } 6 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/preset.js: -------------------------------------------------------------------------------- 1 | const babelConfig = require('./lib/config/babel.config') 2 | 3 | module.exports = (api, options) => babelConfig(api, options) 4 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/components/app-bar/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import AppBar from './AppBar.vue' 3 | 4 | AppBar.install = function (app: VueConstructor) { 5 | app.component(AppBar.name, AppBar) 6 | } 7 | 8 | export const _AppBarComponent = AppBar 9 | 10 | export default AppBar 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/components/app-bar/props.ts: -------------------------------------------------------------------------------- 1 | export function positionValidator(position: string): boolean { 2 | const validPositions = ['left', 'center', 'right'] 3 | return validPositions.includes(position) 4 | } 5 | 6 | export const props = { 7 | color: { 8 | type: String, 9 | }, 10 | textColor: { 11 | type: String, 12 | }, 13 | title: { 14 | type: String, 15 | }, 16 | titlePosition: { 17 | type: String, 18 | default: 'left', 19 | validator: positionValidator, 20 | }, 21 | elevation: { 22 | type: Boolean, 23 | default: true, 24 | }, 25 | } 26 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/components/button/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Button from './Button.vue' 3 | 4 | Button.install = function (app: VueConstructor) { 5 | app.component(Button.name, Button) 6 | } 7 | 8 | export const _ButtonComponent = Button 9 | 10 | export default Button 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/components/cell/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Cell from './Cell.vue' 3 | 4 | Cell.install = function (app: VueConstructor) { 5 | app.component(Cell.name, Cell) 6 | } 7 | 8 | export const _CellComponent = Cell 9 | 10 | export default Cell 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/components/cell/props.ts: -------------------------------------------------------------------------------- 1 | export const props = { 2 | title: { 3 | type: [Number, String], 4 | }, 5 | icon: { 6 | type: String, 7 | }, 8 | desc: { 9 | type: String, 10 | }, 11 | border: { 12 | type: Boolean, 13 | default: false, 14 | }, 15 | iconClass: { 16 | type: String, 17 | }, 18 | titleClass: { 19 | type: String, 20 | }, 21 | descClass: { 22 | type: String, 23 | }, 24 | extraClass: { 25 | type: String, 26 | }, 27 | } 28 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/components/code-example/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import CodeExample from './CodeExample.vue' 3 | 4 | CodeExample.install = function (app: VueConstructor) { 5 | app.component(CodeExample.name, CodeExample) 6 | } 7 | 8 | export const _CodeExampleComponent = CodeExample 9 | 10 | export default CodeExample 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/components/context/index.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | interface Context { 4 | locks: Record; 5 | zIndex: number; 6 | touchmoveForbid: boolean; 7 | } 8 | 9 | const context: Context = { 10 | locks: {}, 11 | zIndex: 2000, 12 | touchmoveForbid: true, 13 | } 14 | 15 | const reactiveContext = Vue.observable(context) 16 | 17 | export const _ContextComponent = reactiveContext 18 | 19 | export default reactiveContext 20 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/components/icon/icon.less: -------------------------------------------------------------------------------- 1 | @import '@varlet/icons/dist/css/varlet-icons.less'; 2 | 3 | @site-icon-size: 20px; 4 | 5 | :root { 6 | --site-icon-size: @site-icon-size; 7 | } 8 | 9 | .var-site-icon { 10 | display: inline-flex; 11 | justify-content: center; 12 | align-items: center; 13 | font-size: var(--site-icon-size); 14 | color: inherit; 15 | vertical-align: bottom; 16 | 17 | &--shrinking { 18 | transform: scale(0); 19 | } 20 | 21 | &__image { 22 | width: var(--site-icon-size); 23 | height: var(--site-icon-size); 24 | object-fit: cover; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/components/icon/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Icon from './Icon.vue' 3 | 4 | Icon.install = function (app: VueConstructor) { 5 | app.component(Icon.name, Icon) 6 | } 7 | 8 | export const _IconComponent = Icon 9 | 10 | export default Icon 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/components/icon/props.ts: -------------------------------------------------------------------------------- 1 | import type { PropType } from 'vue' 2 | 3 | export const props = { 4 | name: { 5 | type: String, 6 | }, 7 | size: { 8 | type: [Number, String], 9 | }, 10 | color: { 11 | type: String, 12 | }, 13 | namespace: { 14 | type: String, 15 | default: 'var-icon', 16 | }, 17 | transition: { 18 | type: [Number, String], 19 | default: 0, 20 | }, 21 | onClick: { 22 | type: Function as PropType<(event: Event) => void>, 23 | }, 24 | } 25 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/components/loading/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Loading from './Loading.vue' 3 | 4 | Loading.install = function (app: VueConstructor) { 5 | app.component(Loading.name, Loading) 6 | } 7 | 8 | export const _LoadingComponent = Loading 9 | 10 | export default Loading 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/components/progress/index.ts: -------------------------------------------------------------------------------- 1 | import { VueConstructor } from 'vue' 2 | import Progress from './Progress.vue' 3 | 4 | Progress.install = function (app: VueConstructor) { 5 | app.component(Progress.name, Progress) 6 | } 7 | 8 | export const _ProgressComponent = Progress 9 | 10 | export default Progress 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/components/ripple/ripple.less: -------------------------------------------------------------------------------- 1 | @site-ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6); 2 | 3 | :root { 4 | --site-ripple-cubic-bezier: @site-ripple-cubic-bezier; 5 | } 6 | 7 | .var-site-ripple { 8 | position: absolute; 9 | transition: transform 0.2s var(--site-ripple-cubic-bezier), opacity 0.14s linear; 10 | top: 0; 11 | left: 0; 12 | border-radius: 50%; 13 | opacity: 0; 14 | will-change: transform, opacity; 15 | pointer-events: none; 16 | z-index: 100; 17 | } 18 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/components/styles/var.less: -------------------------------------------------------------------------------- 1 | // 文字 2 | @site-font-size-xs: 10px; 3 | @site-font-size-sm: 12px; 4 | @site-font-size-md: 14px; 5 | @site-font-size-lg: 16px; 6 | 7 | // 图标 8 | @site-icon-size-xs: 16px; 9 | @site-icon-size-sm: 18px; 10 | @site-icon-size-md: 20px; 11 | @site-icon-size-lg: 22px; 12 | 13 | //颜色 14 | @site-color-primary: #3a7afe; 15 | @site-color-info: #00afef; 16 | @site-color-success: #00c48f; 17 | @site-color-warning: #ff9f00; 18 | @site-color-danger: #f44336; 19 | @site-color-disabled: #e0e0e0; 20 | 21 | // 动画函数 22 | @site-cubic-bezier: cubic-bezier(0.25, 0.8, 0.5, 1); 23 | 24 | // 阴影 25 | @site-shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2); 26 | @site-shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14); 27 | @site-shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12); 28 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/components/teleport/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Teleport from './Teleport.jsx' 3 | 4 | Teleport.install = function (app: VueConstructor) { 5 | app.component(Teleport.name, Teleport) 6 | } 7 | 8 | export const _TeleportComponent = Teleport 9 | 10 | export default Teleport 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/components/teleport/props.ts: -------------------------------------------------------------------------------- 1 | export const props = { 2 | to: { 3 | required: true, 4 | }, 5 | disabled: { 6 | type: Boolean, 7 | default: false, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/components/utils/mixins/listeners.js: -------------------------------------------------------------------------------- 1 | import { bigCamelize } from '../shared' 2 | 3 | export const ListenersMixin = { 4 | methods: { 5 | getListeners() { 6 | return Object.keys(this.$listeners).reduce((listenersWithOn, key) => { 7 | listenersWithOn['on' + bigCamelize(key)] = this.$listeners[key] 8 | 9 | return listenersWithOn 10 | }, {}) 11 | }, 12 | }, 13 | } 14 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/components/utils/mixins/slots.js: -------------------------------------------------------------------------------- 1 | export const SlotsMixin = { 2 | methods: { 3 | slots(name = 'default', props) { 4 | const { $slots, $scopedSlots } = this 5 | const scopedSlot = $scopedSlots[name] 6 | 7 | return scopedSlot ? scopedSlot(props) : $slots[name] 8 | }, 9 | 10 | hasSlots(name = 'default') { 11 | return this.$scopedSlots[name] || this.$slots[name] 12 | }, 13 | }, 14 | } 15 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/components/utils/mixins/zIndex.js: -------------------------------------------------------------------------------- 1 | import context from '../../context' 2 | 3 | export function createZIndexMixin(state, count = 1) { 4 | return { 5 | data: () => ({ 6 | zIndex: context.zIndex, 7 | }), 8 | 9 | watch: { 10 | [state]: { 11 | handler(newValue) { 12 | if (newValue) { 13 | context.zIndex += count 14 | this.zIndex = context.zIndex 15 | } 16 | }, 17 | immediate: true, 18 | }, 19 | }, 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/mobile/components/AppType.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 21 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/mobile/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import '@varlet/touch-emulator' 5 | 6 | import Icon from '../components/icon' 7 | import AppBar from '../components/app-bar' 8 | import Button from '../components/button' 9 | import Cell from '../components/cell' 10 | import Ripple from '../components/ripple' 11 | import '../components/styles/common.less' 12 | import '../components/styles/elevation.less' 13 | 14 | Vue.use(Icon) 15 | .use(AppBar) 16 | .use(Cell) 17 | .use(Ripple) 18 | .use(Button) 19 | 20 | new Vue({ 21 | router, 22 | render: h => h(App) 23 | }).$mount('#app') 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/pc/floating.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | export default Vue.observable({ 4 | animationBoxData: null, 5 | animationEl: null, 6 | animationElClientRect: null 7 | }) -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/pc/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import '@varlet/touch-emulator' 5 | 6 | import Icon from '../components/icon' 7 | import Cell from '../components/cell' 8 | import Ripple from '../components/ripple' 9 | import CodeExample from '../components/code-example' 10 | import Snackbar from '../components/snackbar' 11 | 12 | Snackbar.allowMultiple(true) 13 | 14 | Vue.use(Cell) 15 | .use(Ripple) 16 | .use(Icon) 17 | .use(CodeExample) 18 | .use(Snackbar) 19 | 20 | new Vue({ 21 | router, 22 | render: h => h(App) 23 | }).$mount('#app') 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/pc/pages/index/locale/en-US.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/varletjs/varlet-vue2/bfe1e7a96a5eae998248779c8a2c159a1afc9873/packages/varlet-vue2-cli/site/pc/pages/index/locale/en-US.ts -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/site/pc/pages/index/locale/zh-CN.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/varletjs/varlet-vue2/bfe1e7a96a5eae998248779c8a2c159a1afc9873/packages/varlet-vue2-cli/site/pc/pages/index/locale/zh-CN.ts -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/src/commands/build.ts: -------------------------------------------------------------------------------- 1 | import { ensureDirSync } from 'fs-extra' 2 | import { SRC_DIR } from '../shared/constant' 3 | import { build as buildVite } from 'vite' 4 | import { getBuildConfig } from '../config/vite.config' 5 | import { getVarletConfig } from '../config/varlet.config' 6 | import { buildSiteEntry } from '../compiler/compileSiteEntry' 7 | 8 | export async function build() { 9 | process.env.NODE_ENV = 'production' 10 | 11 | ensureDirSync(SRC_DIR) 12 | await buildSiteEntry() 13 | const varletConfig = getVarletConfig() 14 | const buildConfig = getBuildConfig(varletConfig) 15 | 16 | await buildVite(buildConfig) 17 | } 18 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/src/commands/preview.ts: -------------------------------------------------------------------------------- 1 | import logger from '../shared/logger' 2 | import execa from 'execa' 3 | import { SITE_OUTPUT_PATH } from '../shared/constant' 4 | import { pathExistsSync } from 'fs-extra' 5 | 6 | export async function preview() { 7 | if (!pathExistsSync(SITE_OUTPUT_PATH)) { 8 | logger.warning('Cannot find the site folder, you must first run the build command to build the document site') 9 | return 10 | } 11 | 12 | try { 13 | await execa.command('live-server --port=5500', { cwd: SITE_OUTPUT_PATH }).stdout?.pipe(process.stdout) 14 | } catch (e: any) { 15 | logger.error(e.toString()) 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/src/config/babel.sfc.transform.ts: -------------------------------------------------------------------------------- 1 | import { readFileSync } from 'fs' 2 | import { declare } from '@babel/helper-plugin-utils' 3 | 4 | module.exports = declare(() => ({ 5 | overrides: [ 6 | { 7 | test: (file: string) => { 8 | if (/\.vue$/.test(file)) { 9 | const code = readFileSync(file, 'utf8') 10 | return code.includes('lang="ts"') || code.includes("lang='ts'") 11 | } 12 | 13 | return false 14 | }, 15 | plugins: ['@babel/plugin-transform-typescript'], 16 | }, 17 | ], 18 | })) 19 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/src/config/jest.media.mock.ts: -------------------------------------------------------------------------------- 1 | module.exports = {} 2 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/src/config/jest.style.mock.ts: -------------------------------------------------------------------------------- 1 | module.exports = {} 2 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/src/module.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'less' { 2 | declare const render: any 3 | 4 | export { render } 5 | } 6 | 7 | declare module 'inquirer' 8 | declare module '@babel/helper-plugin-utils' 9 | declare module '@varlet-vue2/markdown-vite-plugin' 10 | declare module 'hash-sum' 11 | declare module 'conventional-changelog' 12 | declare module 'glob' 13 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/src/shared/logger.ts: -------------------------------------------------------------------------------- 1 | import chalk from 'chalk' 2 | 3 | export default { 4 | info(text: string) { 5 | console.log(text) 6 | }, 7 | success(text: string) { 8 | console.log(chalk.hex('#00c48f')(text)) 9 | }, 10 | warning(text: string) { 11 | console.log(chalk.hex('#ff9800')(text)) 12 | }, 13 | error(text: string) { 14 | console.log(chalk.hex('#f44336')(text)) 15 | }, 16 | } 17 | -------------------------------------------------------------------------------- /packages/varlet-vue2-cli/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./lib", 4 | "target": "es5", 5 | "strict": true, 6 | "downlevelIteration": true, 7 | "declaration": true, 8 | "skipLibCheck": true, 9 | "esModuleInterop": true, 10 | "jsx": "preserve", 11 | "lib": ["esnext", "dom"] 12 | }, 13 | "include": ["src/**/*"] 14 | } 15 | -------------------------------------------------------------------------------- /packages/varlet-vue2-eslint-config/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet-vue2/eslint-config", 3 | "version": "0.2.0", 4 | "description": "eslint config of varlet-vue2", 5 | "keywords": [ 6 | "eslint", 7 | "varlet-vue2" 8 | ], 9 | "author": "haoziqaq <357229046@qq.com>", 10 | "license": "MIT", 11 | "main": "index.js", 12 | "dependencies": { 13 | "@typescript-eslint/eslint-plugin": "^2.28.0", 14 | "@typescript-eslint/parser": "^2.28.0", 15 | "eslint-config-airbnb-base": "^14.1.0", 16 | "eslint-config-prettier": "^6.10.1", 17 | "eslint-plugin-import": "^2.20.2", 18 | "eslint-plugin-vue": "^6.2.2", 19 | "typescript": "^4.3.5" 20 | }, 21 | "peerDependencies": { 22 | "eslint": ">=7.12.1" 23 | } 24 | } -------------------------------------------------------------------------------- /packages/varlet-vue2-markdown-vite-plugin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet-vue2/markdown-vite-plugin", 3 | "version": "0.2.0", 4 | "description": "markdown vite plugin of varlet-vue2", 5 | "keywords": [ 6 | "vite", 7 | "plugin", 8 | "varlet-vue2" 9 | ], 10 | "author": "haoziqaq <357229046@qq.com>", 11 | "license": "MIT", 12 | "main": "index.js", 13 | "dependencies": { 14 | "highlight.js": "^10.7.2", 15 | "markdown-it": "^12.0.2" 16 | } 17 | } -------------------------------------------------------------------------------- /packages/varlet-vue2-stylelint-config/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['stylelint-config-standard', 'stylelint-config-prettier'], 3 | rules: { 4 | 'no-descending-specificity': null, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /packages/varlet-vue2-stylelint-config/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet-vue2/stylelint-config", 3 | "version": "0.2.0", 4 | "description": "stylelint config of varlet-vue2", 5 | "keywords": [ 6 | "stylelint", 7 | "varlet-vue2" 8 | ], 9 | "author": "haoziqaq <357229046@qq.com>", 10 | "license": "MIT", 11 | "main": "index.js", 12 | "dependencies": { 13 | "stylelint-config-prettier": "^8.0.2", 14 | "stylelint-config-standard": "^20.0.0" 15 | }, 16 | "peerDependencies": { 17 | "stylelint": ">=13.7.2" 18 | } 19 | } -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@varlet-vue2/cli/preset'], 3 | } 4 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/global.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue' 2 | 3 | declare global { 4 | namespace JSX { 5 | type Element = VNode 6 | type ElementClass = Vue 7 | interface IntrinsicElements { 8 | [elem: string]: any 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/public/cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/varletjs/varlet-vue2/bfe1e7a96a5eae998248779c8a2c159a1afc9873/packages/varlet-vue2-ui/public/cat.jpg -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/public/cat2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/varletjs/varlet-vue2/bfe1e7a96a5eae998248779c8a2c159a1afc9873/packages/varlet-vue2-ui/public/cat2.jpg -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/public/cat3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/varletjs/varlet-vue2/bfe1e7a96a5eae998248779c8a2c159a1afc9873/packages/varlet-vue2-ui/public/cat3.jpg -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/public/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/varletjs/varlet-vue2/bfe1e7a96a5eae998248779c8a2c159a1afc9873/packages/varlet-vue2-ui/public/cover.jpg -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/public/ext_vsc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/varletjs/varlet-vue2/bfe1e7a96a5eae998248779c8a2c159a1afc9873/packages/varlet-vue2-ui/public/ext_vsc.png -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/public/ext_vsc_link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/varletjs/varlet-vue2/bfe1e7a96a5eae998248779c8a2c159a1afc9873/packages/varlet-vue2-ui/public/ext_vsc_link.png -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/public/hl_vsc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/varletjs/varlet-vue2/bfe1e7a96a5eae998248779c8a2c159a1afc9873/packages/varlet-vue2-ui/public/hl_vsc.png -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/public/hl_vsc_setting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/varletjs/varlet-vue2/bfe1e7a96a5eae998248779c8a2c159a1afc9873/packages/varlet-vue2-ui/public/hl_vsc_setting.png -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/public/hl_wb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/varletjs/varlet-vue2/bfe1e7a96a5eae998248779c8a2c159a1afc9873/packages/varlet-vue2-ui/public/hl_wb.jpg -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/public/hl_wb_setting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/varletjs/varlet-vue2/bfe1e7a96a5eae998248779c8a2c159a1afc9873/packages/varlet-vue2-ui/public/hl_wb_setting.png -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/public/preview_error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/varletjs/varlet-vue2/bfe1e7a96a5eae998248779c8a2c159a1afc9873/packages/varlet-vue2-ui/public/preview_error.png -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/public/preview_success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/varletjs/varlet-vue2/bfe1e7a96a5eae998248779c8a2c159a1afc9873/packages/varlet-vue2-ui/public/preview_success.png -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/public/varlet-vscode-extension.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/varletjs/varlet-vue2/bfe1e7a96a5eae998248779c8a2c159a1afc9873/packages/varlet-vue2-ui/public/varlet-vscode-extension.gif -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/public/varlet_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/varletjs/varlet-vue2/bfe1e7a96a5eae998248779c8a2c159a1afc9873/packages/varlet-vue2-ui/public/varlet_icon.png -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/action-sheet/__tests__/__snapshots__/component.spec.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`test action-sheet styles 1`] = ` 4 | " 5 |
6 |
7 | 8 |
9 | " 10 | `; 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/action-sheet/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | functionCall: 'Function Call', 3 | basicUsage: 'Basic Usage', 4 | modifyTitle: 'Modify Title', 5 | componentCall: 'Component Call', 6 | yourSelected: 'Your selected is:', 7 | customTitle: 'Choose whichever you like', 8 | disableCloseOnClickAction: 'Disable close on click action', 9 | disabled: 'Action Disabled', 10 | customActionStyles: 'Custom Action Styles', 11 | } 12 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/action-sheet/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/action-sheet/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | functionCall: '函数调用', 3 | basicUsage: '基本使用', 4 | modifyTitle: '修改标题', 5 | componentCall: '组件调用', 6 | yourSelected: '您选择的是:', 7 | customTitle: '选择一个你喜欢的吧', 8 | disableCloseOnClickAction: '禁用点击选项时关闭动作面板', 9 | disabled: '禁用选项', 10 | customActionStyles: '自定义选项样式', 11 | } 12 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/action-sheet/props.ts: -------------------------------------------------------------------------------- 1 | import { pickProps } from '../utils/components' 2 | import { props as popupProps } from '../popup/props' 3 | import type { PropType } from 'vue' 4 | import { ActionItem } from './index' 5 | 6 | export const props = { 7 | show: { 8 | type: Boolean, 9 | default: false, 10 | }, 11 | actions: { 12 | type: Array as PropType, 13 | default: () => [], 14 | }, 15 | title: { 16 | type: String, 17 | }, 18 | closeOnClickAction: { 19 | type: Boolean, 20 | default: true, 21 | }, 22 | ...pickProps(popupProps, [ 23 | 'overlay', 24 | 'overlayClass', 25 | 'overlayStyle', 26 | 'lockScroll', 27 | 'closeOnClickOverlay', 28 | 'teleport', 29 | ]), 30 | } 31 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/app-bar/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicAppBar: 'Basic AppBar', 3 | customStyle: 'Custom Style', 4 | addSlotsAtTitle: 'Add Slots At Title', 5 | addTheTitleFromTheSlot: 'Add The Title From The Slot', 6 | addLeftSlot: 'Add Left Slot', 7 | title: 'Title', 8 | addRightSlot: 'Add Right Slot', 9 | addLeftAndRightSlot: 'Add Left And Right Slot', 10 | options1: 'options1', 11 | options2: 'options2', 12 | search: 'search', 13 | goBack: 'Go Back', 14 | } 15 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/app-bar/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/app-bar/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicAppBar: '基础导航栏', 3 | customStyle: '自定义样式', 4 | addSlotsAtTitle: '添加标题处插槽', 5 | addTheTitleFromTheSlot: '从插槽处添加标题', 6 | addLeftSlot: '添加左侧插槽', 7 | title: '标题', 8 | addRightSlot: '添加右侧插槽', 9 | addLeftAndRightSlot: '添加左右插槽', 10 | options1: '选项一', 11 | options2: '选项二', 12 | search: '搜索', 13 | goBack: '返回', 14 | } 15 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/app-bar/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import AppBar from './AppBar.vue' 3 | 4 | AppBar.install = function (app: VueConstructor) { 5 | app.component(AppBar.name, AppBar) 6 | } 7 | 8 | export const _AppBarComponent = AppBar 9 | 10 | export default AppBar 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/app-bar/props.ts: -------------------------------------------------------------------------------- 1 | export function positionValidator(position: string): boolean { 2 | const validPositions = ['left', 'center', 'right'] 3 | return validPositions.includes(position) 4 | } 5 | 6 | export const props = { 7 | color: { 8 | type: String, 9 | }, 10 | textColor: { 11 | type: String, 12 | }, 13 | title: { 14 | type: String, 15 | }, 16 | titlePosition: { 17 | type: String, 18 | default: 'left', 19 | validator: positionValidator, 20 | }, 21 | elevation: { 22 | type: Boolean, 23 | default: true, 24 | }, 25 | } 26 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/back-top/backTop.less: -------------------------------------------------------------------------------- 1 | @back-top-right: 40px; 2 | @back-top-bottom: 40px; 3 | @back-top-button-size: 40px; 4 | 5 | :root { 6 | --back-top-right: @back-top-right; 7 | --back-top-bottom: @back-top-bottom; 8 | --back-top-button-size: @back-top-button-size; 9 | } 10 | 11 | .var-back-top { 12 | position: fixed; 13 | right: var(--back-top-right); 14 | bottom: var(--back-top-bottom); 15 | transform: scale(0); 16 | transition: 0.3s var(--cubic-bezier); 17 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 18 | 19 | .var-button[var-back-top-cover] { 20 | width: var(--back-top-button-size); 21 | height: var(--back-top-button-size); 22 | } 23 | 24 | &--active { 25 | transform: scale(1); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/back-top/example/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 31 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/back-top/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import BackTop from './BackTop.vue' 3 | 4 | BackTop.install = function (app: VueConstructor) { 5 | app.component(BackTop.name, BackTop) 6 | } 7 | 8 | export const _BackTopComponent = BackTop 9 | 10 | export default BackTop 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/back-top/props.ts: -------------------------------------------------------------------------------- 1 | import type { PropType } from 'vue' 2 | 3 | export const props = { 4 | visibilityHeight: { 5 | type: [Number, String], 6 | default: 200, 7 | }, 8 | duration: { 9 | type: Number, 10 | default: 300, 11 | }, 12 | right: { 13 | type: [Number, String], 14 | }, 15 | bottom: { 16 | type: [Number, String], 17 | }, 18 | target: { 19 | type: [String, Object] as PropType, 20 | }, 21 | onClick: { 22 | type: Function as PropType<(event: MouseEvent) => void>, 23 | }, 24 | } 25 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/badge/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | themeColorBadge: 'Theme Color Badge', 3 | dotBadge: 'Dot Badge', 4 | customContentBadge: 'Custom Content Badge', 5 | maximum: 'Maximum', 6 | differentPositioningBadges: 'Different Positioning Badges', 7 | upperRight: 'The Upper Right', 8 | lowerRight: 'The Lower Right', 9 | upperLeft: 'The Upper Left', 10 | lowerLeft: 'The Lower Left', 11 | whetherToDisplayTheBadge: 'Whether To Display The Badge', 12 | clickToChangeTheState: 'Click To Change The State', 13 | badge: 'Badge', 14 | customBadgeColors: 'Custom Badge Colors', 15 | customBadgeIcons: 'Custom Badge Icons', 16 | } 17 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/badge/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/badge/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | themeColorBadge: '主题色徽标', 3 | dotBadge: '圆点徽标', 4 | customContentBadge: '自定义内容标签', 5 | maximum: '最大值', 6 | differentPositioningBadges: '不同定位徽标', 7 | upperRight: '右上', 8 | lowerRight: '右下', 9 | upperLeft: '左上', 10 | lowerLeft: '左下', 11 | whetherToDisplayTheBadge: '是否显示徽标', 12 | clickToChangeTheState: '点击改变状态', 13 | badge: '徽标', 14 | customBadgeColors: '自定义徽标颜色', 15 | customBadgeIcons: '自定义徽标图标', 16 | } 17 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/badge/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Badge from './Badge.vue' 3 | 4 | Badge.install = function (app: VueConstructor) { 5 | app.component(Badge.name, Badge) 6 | } 7 | 8 | export const _BadgeComponent = Badge 9 | 10 | export default Badge 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/bottom-navigation-item/docs/zh-CN.md: -------------------------------------------------------------------------------- 1 | ## API 2 | 3 | ### 属性 4 | 5 | |参数 | 说明 | 类型 | 默认值 | 6 | | ---- | ---- | ---- | ---- | 7 | | `name` | 标签名称，作为匹配的标识符 | _string_ | `-` | 8 | | `icon` | 图标名称，等同于 Icon 组件的 [name 属性](/#/zh-CN/icon) | _string_ | `-` | 9 | | `label` | 标签文字内容 | _string_ | - | 10 | | `namespace` | 图标的命名空间, 可扩展自定义图标库，等同于 Icon 组件的 [namespace 属性](/#/zh-CN/icon) | _string_ | `var-icon` | 11 | | `badge` | 图标右上角徽标 | _boolean \| BadgeProps_ | `false` | 12 | 13 | ### 事件 14 | 15 | |事件名 | 说明 | 回调参数 | 16 | | ---- | ---- | ---- | 17 | | `click` | 点击时触发 | `active: number \| string` | 18 | 19 | ### 插槽 20 | 21 | | 名称 | 说明 | 参数 | 22 | | ---- | ---- | ----| 23 | | `default` | 自定义标签文字内容，会覆盖 `label` 的内容 | `-` | 24 | | `icon` | 自定义图标 | `active: boolean` | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/bottom-navigation-item/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import BottomNavigationItem from './BottomNavigationItem.vue' 3 | 4 | BottomNavigationItem.install = function (app: VueConstructor) { 5 | app.component(BottomNavigationItem.name, BottomNavigationItem) 6 | } 7 | 8 | export const _BottomNavigationItemComponent = BottomNavigationItem 9 | 10 | export default BottomNavigationItem 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/bottom-navigation-item/props.ts: -------------------------------------------------------------------------------- 1 | import type { PropType } from 'vue' 2 | import type { BadgeProps } from '../../types' 3 | 4 | export const props = { 5 | name: { 6 | type: String, 7 | }, 8 | icon: { 9 | type: String, 10 | }, 11 | label: { 12 | type: String, 13 | }, 14 | namespace: { 15 | type: String, 16 | default: 'var-icon', 17 | }, 18 | badge: { 19 | type: [Boolean, Object] as PropType>, 20 | default: false, 21 | }, 22 | onClick: { 23 | type: Function as PropType<(active: number | string) => void>, 24 | }, 25 | } 26 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/bottom-navigation/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | matchByName: 'Match by name', 4 | showBadge: 'Show Badge', 5 | customColor: 'Custom Color', 6 | changeEvent: 'Change Event', 7 | clickEvent: 'Click Event', 8 | fab: 'Fab', 9 | label: 'label', 10 | } 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/bottom-navigation/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/bottom-navigation/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | matchByName: '通过名称匹配', 4 | showBadge: '徽标提示', 5 | customColor: '自定义颜色', 6 | changeEvent: '监听切换事件', 7 | clickEvent: '监听点击事件', 8 | fab: '悬浮按钮', 9 | label: '标签', 10 | } 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/bottom-navigation/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import BottomNavigation from './BottomNavigation.vue' 3 | 4 | BottomNavigation.install = function (app: VueConstructor) { 5 | app.component(BottomNavigation.name, BottomNavigation) 6 | } 7 | 8 | export const _BottomNavigationComponent = BottomNavigation 9 | 10 | export default BottomNavigation 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/button/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/button/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Button from './Button.vue' 3 | 4 | Button.install = function (app: VueConstructor) { 5 | app.component(Button.name, Button) 6 | } 7 | 8 | export const _ButtonComponent = Button 9 | 10 | export default Button 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/card/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | title: 'Little Prince', 4 | showSubtitle: 'Show Subtitle', 5 | subtitle: 'little prince from', 6 | description: 7 | 'It took me a long time to learn where he came from. The little prince, whoasked me so many questions, never seemed to hear the ones I asked him. Itwas from words dropped by chance that, little by little, everything wasrevealed to me.', 8 | showImage: 'Show Image', 9 | useSlot: 'Use Slot', 10 | button: 'Use Button', 11 | showRipple: 'Ripple Effect', 12 | } 13 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/card/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/card/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | title: '风景', 4 | showSubtitle: '显示副标题', 5 | subtitle: '公园里的风景', 6 | description: 7 | '公园的树林也很美。在公园的小山上栽满了树木，梧桐树的叶子随着时间的流逝慢慢变黄，纷纷飘落；枫树的叶子却变红了，公园笼罩在片片红云中，也使秋天增添了一分热情。而柏树的叶子仍是那么青翠欲滴，令你陶醉极了。山上有一群孩子在快乐的嬉戏，不时传来阵阵欢笑声，瞧，他们玩得多起劲呀，给树林增添了活力。', 8 | showImage: '显示图片', 9 | useSlot: '使用插槽', 10 | button: '添加按钮', 11 | showRipple: '水波效果', 12 | } 13 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/card/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Card from './Card.vue' 3 | 4 | Card.install = function (app: VueConstructor) { 5 | app.component(Card.name, Card) 6 | } 7 | 8 | export const _CardComponent = Card 9 | 10 | export default Card 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/cell/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | showIcon: 'Show Icon', 4 | showDesc: 'Show Description', 5 | showBorder: 'Show Border', 6 | content: 'This is Cell', 7 | description: 'Description', 8 | } 9 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/cell/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/cell/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | showIcon: '显示图标', 4 | showDesc: '显示描述', 5 | showBorder: '显示边框', 6 | content: '这是单元格', 7 | description: '描述', 8 | } 9 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/cell/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Cell from './Cell.vue' 3 | 4 | Cell.install = function (app: VueConstructor) { 5 | app.component(Cell.name, Cell) 6 | } 7 | 8 | export const _CellComponent = Cell 9 | 10 | export default Cell 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/cell/props.ts: -------------------------------------------------------------------------------- 1 | export const props = { 2 | title: { 3 | type: [Number, String], 4 | }, 5 | icon: { 6 | type: String, 7 | }, 8 | desc: { 9 | type: String, 10 | }, 11 | border: { 12 | type: Boolean, 13 | default: false, 14 | }, 15 | iconClass: { 16 | type: String, 17 | }, 18 | titleClass: { 19 | type: String, 20 | }, 21 | descClass: { 22 | type: String, 23 | }, 24 | extraClass: { 25 | type: String, 26 | }, 27 | } 28 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/checkbox-group/checkboxGroup.less: -------------------------------------------------------------------------------- 1 | .var-checkbox-group { 2 | display: flex; 3 | flex-wrap: wrap; 4 | 5 | &--horizontal { 6 | flex-direction: row; 7 | } 8 | 9 | &--vertical { 10 | flex-direction: column; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/checkbox-group/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | currentValue: 'Current value:', 4 | setState: 'Set State value', 5 | setStyle: 'Modify the icon and color', 6 | disabled: 'Disabled', 7 | readonly: 'Readonly', 8 | eat: 'Eat', 9 | sleep: 'Sleep', 10 | checkAll: 'Check All', 11 | inverseAll: 'Inverse All', 12 | checkboxGroup: 'CheckboxGroup', 13 | checkboxValidate: 'Checkbox validation', 14 | checkboxGroupValidate: 'CheckboxGroup validate', 15 | checkboxValidateMessage: 'Please check your choices', 16 | checkboxGroupValidateMessage: 'Please check all', 17 | } 18 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/checkbox-group/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/checkbox-group/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | currentValue: '当前的值:', 4 | setState: '设置状态值', 5 | setStyle: '修改图标和颜色', 6 | disabled: '禁用', 7 | readonly: '只读', 8 | eat: '吃饭', 9 | sleep: '睡觉', 10 | checkAll: '全选', 11 | inverseAll: '反选', 12 | checkboxGroup: '复选框组', 13 | checkboxValidate: '复选框字段校验', 14 | checkboxGroupValidate: '复选框组字段校验', 15 | checkboxValidateMessage: '请勾选', 16 | checkboxGroupValidateMessage: '请全选', 17 | } 18 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/checkbox-group/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import CheckboxGroup from './CheckboxGroup.vue' 3 | 4 | CheckboxGroup.install = function (app: VueConstructor) { 5 | app.component(CheckboxGroup.name, CheckboxGroup) 6 | } 7 | 8 | export const _CheckboxGroupComponent = CheckboxGroup 9 | 10 | export default CheckboxGroup 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/checkbox-group/props.ts: -------------------------------------------------------------------------------- 1 | import type { PropType } from 'vue' 2 | 3 | export type ValidateTriggers = 'onChange' 4 | 5 | export function directionValidator(direction: string) { 6 | return ['horizontal', 'vertical'].includes(direction) 7 | } 8 | 9 | export const props = { 10 | value: { 11 | type: Array as PropType>, 12 | default: () => [], 13 | }, 14 | max: { 15 | type: [String, Number], 16 | }, 17 | direction: { 18 | type: String as PropType<'horizontal' | 'vertical'>, 19 | default: 'horizontal', 20 | validator: directionValidator, 21 | }, 22 | validateTrigger: { 23 | type: Array as PropType>, 24 | default: () => ['onChange'], 25 | }, 26 | rules: { 27 | type: Array as PropType any>>, 28 | }, 29 | } 30 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Checkbox from './Checkbox.vue' 3 | 4 | Checkbox.install = function (app: VueConstructor) { 5 | app.component(Checkbox.name, Checkbox) 6 | } 7 | 8 | export const _CheckboxComponent = Checkbox 9 | 10 | export default Checkbox 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/chip/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | chipType: 'Chip Type', 3 | defaultChip: 'Default Chip', 4 | primaryChip: 'Primary Chip', 5 | infoChip: 'Info Chip', 6 | successChip: 'Success Chip', 7 | warningChip: 'Warning Chip', 8 | dangerChip: 'Danger Chip', 9 | simpleChip: 'Simple Chip', 10 | nonRoundChip: 'Non Round Chip', 11 | chipSize: 'Chip Size', 12 | largeChip: 'Large Chip', 13 | normalChip: 'Normal Chip', 14 | smallChip: 'Small Chip', 15 | miniChip: 'Mini Chip', 16 | blockChip: 'Block Chip', 17 | canCloseChip: 'Can Close Chip', 18 | customCloseIcon: 'Custom Close Icon', 19 | customColor: 'Custom Color', 20 | chip: 'Chip', 21 | addSlot: 'Add Slot', 22 | leftSlot: 'Left Slot', 23 | rightSlot: 'Right Slot', 24 | leftAndRightSlot: 'Left And Right Slot', 25 | } 26 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/chip/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/chip/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | chipType: '纸片类型', 3 | defaultChip: '默认纸片', 4 | primaryChip: '主要纸片', 5 | infoChip: '信息纸片', 6 | successChip: '成功纸片', 7 | warningChip: '警告纸片', 8 | dangerChip: '危险纸片', 9 | simpleChip: '简单纸片', 10 | nonRoundChip: '非圆角纸片', 11 | chipSize: '纸片尺寸', 12 | largeChip: '大型纸片', 13 | normalChip: '常规纸片', 14 | smallChip: '小型纸片', 15 | miniChip: '迷你纸片', 16 | blockChip: '块级纸片', 17 | canCloseChip: '可关闭纸片', 18 | customCloseIcon: '自定义关闭图标', 19 | customColor: '自定义颜色', 20 | chip: '纸片', 21 | addSlot: '添加插槽', 22 | leftSlot: '左侧插槽', 23 | rightSlot: '右侧插槽', 24 | leftAndRightSlot: '左右两侧插槽', 25 | } 26 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/chip/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Chip from './Chip.vue' 3 | 4 | Chip.install = function (app: VueConstructor) { 5 | app.component(Chip.name, Chip) 6 | } 7 | 8 | export const _ChipComponent = Chip 9 | 10 | export default Chip 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/col/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Col from './Col.vue' 3 | 4 | Col.install = function (app: VueConstructor) { 5 | app.component(Col.name, Col) 6 | } 7 | 8 | export const _ColComponent = Col 9 | 10 | export default Col 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/collapse-item/docs/zh-CN.md: -------------------------------------------------------------------------------- 1 | ## API 2 | 3 | ### 属性 4 | 5 | | 参数 | 说明 | 类型 | 默认值 | 6 | | ----- | -------------- | -------- | ---------- | 7 | | `name` | 唯一标识符，默认为索引值 | _number \| string_ | `index` | 8 | | `title` | 面板标题 | _number \| string_ | - | 9 | | `icon` | icon的名称 | _string_ | `chevron-down` | 10 | | `disabled` | 是否禁用面板 | _boolean_ | `false` | 11 | 12 | ### 插槽 13 | 14 | | 名称 | 说明 | 参数 | 15 | | ----- | -------------- | -------- | 16 | | `default` | 面板的内容 | - | 17 | | `title` | 面板的标题 | - | 18 | | `icon` | 自定义右侧icon | - | 19 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/collapse-item/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import CollapseItem from './CollapseItem.vue' 3 | 4 | CollapseItem.install = function (app: VueConstructor) { 5 | app.component(CollapseItem.name, CollapseItem) 6 | } 7 | 8 | export const _CollapseItemComponent = CollapseItem 9 | 10 | export default CollapseItem 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/collapse-item/props.ts: -------------------------------------------------------------------------------- 1 | export const props = { 2 | name: { 3 | type: [String, Number], 4 | }, 5 | title: { 6 | type: String, 7 | }, 8 | icon: { 9 | type: String, 10 | default: 'chevron-down', 11 | }, 12 | disabled: { 13 | type: Boolean, 14 | default: false, 15 | }, 16 | } 17 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/collapse/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | hideMargin: 'Hide Margin', 4 | accordionMode: 'Accordion Mode', 5 | disabled: 'Disabled', 6 | enable: 'Enable', 7 | customContent: 'Custom Content', 8 | title: 'Title', 9 | text: 'Hello World', 10 | slotTitle: 'This is a Title', 11 | slotContent: 'This is a content', 12 | } 13 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/collapse/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/collapse/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | hideMargin: '隐藏边距', 4 | accordionMode: '手风琴模式', 5 | disabled: '禁用', 6 | enable: '启用', 7 | customContent: '自定义内容', 8 | title: '标题', 9 | text: '文本', 10 | slotTitle: '这是标题', 11 | slotContent: '这是内容', 12 | } 13 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/collapse/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Collapse from './Collapse.vue' 3 | 4 | Collapse.install = function (app: VueConstructor) { 5 | app.component(Collapse.name, Collapse) 6 | } 7 | 8 | export const _CollapseComponent = Collapse 9 | 10 | export default Collapse 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/collapse/props.ts: -------------------------------------------------------------------------------- 1 | import type { PropType } from 'vue' 2 | 3 | export type CollapseModelValue = null | string | number | Array 4 | 5 | export const props = { 6 | value: { 7 | type: [Array, String, Number] as PropType>, 8 | }, 9 | accordion: { 10 | type: Boolean, 11 | default: false, 12 | }, 13 | offset: { 14 | type: Boolean, 15 | default: true, 16 | }, 17 | } 18 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/context/index.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | interface Context { 4 | locks: Record 5 | zIndex: number 6 | touchmoveForbid: boolean 7 | } 8 | 9 | const context: Context = { 10 | locks: {}, 11 | zIndex: 2000, 12 | touchmoveForbid: true, 13 | } 14 | 15 | const reactiveContext = Vue.observable(context) 16 | 17 | export const _ContextComponent = reactiveContext 18 | 19 | export default reactiveContext 20 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/countdown/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | customFormat: 'Custom Format', 4 | showMillisecond: 'Show Millisecond', 5 | customStyle: 'Custom Style', 6 | manualControl: 'Manual Control', 7 | format: 'DD Day, HH:mm:ss', 8 | startText: 'Start', 9 | pauseText: 'Pause', 10 | resetText: 'Reset', 11 | } 12 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/countdown/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/countdown/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | customFormat: '自定义格式', 4 | showMillisecond: '显示毫秒', 5 | customStyle: '自定义样式', 6 | manualControl: '手动控制', 7 | format: 'DD 天 HH 时 mm 分 ss 秒', 8 | startText: '开始', 9 | pauseText: '暂停', 10 | resetText: '重置', 11 | } 12 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/countdown/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Countdown from './Countdown.vue' 3 | 4 | Countdown.install = function (app: VueConstructor) { 5 | app.component(Countdown.name, Countdown) 6 | } 7 | 8 | export const _CountdownComponent = Countdown 9 | 10 | export default Countdown 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/countdown/props.ts: -------------------------------------------------------------------------------- 1 | export type TimeData = { 2 | days: number 3 | hours: number 4 | minutes: number 5 | seconds: number 6 | milliseconds: number 7 | } 8 | 9 | export const props = { 10 | time: { 11 | type: [String, Number], 12 | default: 0, 13 | }, 14 | format: { 15 | type: String, 16 | default: 'HH : mm : ss', 17 | }, 18 | autoStart: { 19 | type: Boolean, 20 | default: true, 21 | }, 22 | } 23 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/counter/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | range: 'Set the value range', 4 | step: 'Set step', 5 | toFixed: 'Decimal length', 6 | disabled: 'Disabled', 7 | readonly: 'Readonly', 8 | lazyChange: 'Asynchronous change', 9 | size: 'Set size', 10 | validate: 'Validate', 11 | validateMessage: 'Please select a value greater than 5', 12 | } 13 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/counter/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/counter/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | range: '设置取值范围', 4 | step: '设置步长', 5 | toFixed: '保留小数', 6 | disabled: '禁用', 7 | readonly: '只读', 8 | lazyChange: '异步变更', 9 | size: '设置尺寸', 10 | validate: '字段校验', 11 | validateMessage: '请选择大于5的值', 12 | } 13 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/counter/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Counter from './Counter.vue' 3 | 4 | Counter.install = function (app: VueConstructor) { 5 | app.component(Counter.name, Counter) 6 | } 7 | 8 | export const _CounterComponent = Counter 9 | 10 | export default Counter 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/date-picker/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | monthPicker: 'Month Picker', 4 | multiple: 'Multiple', 5 | range: 'Range', 6 | dateLimit: 'Date Limit', 7 | custom: 'Custom', 8 | year: '', 9 | month: '', 10 | divider: '-', 11 | } 12 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/date-picker/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/date-picker/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | monthPicker: '月份选择器', 4 | multiple: '多选', 5 | range: '选择范围', 6 | dateLimit: '日期限制', 7 | custom: '自定义', 8 | year: '年', 9 | month: '月', 10 | divider: '年', 11 | } 12 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/date-picker/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import DatePicker from './DatePicker.vue' 3 | 4 | DatePicker.install = function (app: VueConstructor) { 5 | app.component(DatePicker.name, DatePicker) 6 | } 7 | 8 | export const _DatePickerComponent = DatePicker 9 | 10 | export default DatePicker 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/dialog/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | functionCall: 'Function Call', 3 | basicUsage: 'Basic Usage', 4 | modifyTitle: 'Modify Title', 5 | hideButton: 'Hide Button', 6 | handleUserBehavior: 'Handle User Behavior', 7 | asyncClose: 'Asynchronous closing', 8 | componentCall: 'Component Call', 9 | title: 'Beat It', 10 | message: "Don't Wanna See No Blood, Don't Be A Macho Man", 11 | customSlots: 'Custom Slots', 12 | asyncCloseProgress: 'Asynchronous shutdown in progress', 13 | } 14 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/dialog/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/dialog/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | functionCall: '函数调用', 3 | basicUsage: '基本使用', 4 | modifyTitle: '修改标题', 5 | hideButton: '隐藏按钮', 6 | handleUserBehavior: '处理用户行为', 7 | asyncClose: '异步关闭', 8 | componentCall: '组件调用', 9 | title: '兰亭序', 10 | message: '兰亭临帖 行书如行云流水', 11 | customSlots: '自定义插槽', 12 | asyncCloseProgress: '正在异步关闭', 13 | } 14 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/divider/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | dashed: 'Dashed Divider', 4 | inset: 'Inset Divider', 5 | vertical: 'Vertical Divider', 6 | text: 'Text', 7 | withDesc: 'The Divider with description', 8 | withDescText: 'Description', 9 | custom: 'Custom', 10 | } 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/divider/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/divider/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | dashed: '虚线', 4 | inset: '缩进', 5 | vertical: '垂直分割线', 6 | text: '文字', 7 | withDesc: '带有文字描述的分割线', 8 | withDescText: '文字描述', 9 | custom: '自定义', 10 | } 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/divider/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Divider from './Divider.vue' 3 | 4 | Divider.install = function (app: VueConstructor) { 5 | app.component(Divider.name, Divider) 6 | } 7 | 8 | export const _DividerComponent = Divider 9 | 10 | export default Divider 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/divider/props.ts: -------------------------------------------------------------------------------- 1 | export const props = { 2 | inset: { 3 | type: [Boolean, Number, String], 4 | default: false, 5 | }, 6 | vertical: { 7 | type: Boolean, 8 | default: false, 9 | }, 10 | description: { 11 | type: String, 12 | }, 13 | margin: { 14 | type: String, 15 | }, 16 | dashed: { 17 | type: Boolean, 18 | default: false, 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/form-details/FormDetails.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | 21 | 25 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/form-details/__tests__/index.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import FormDetails from '..' 3 | 4 | test('test form details plugin', () => { 5 | const app = Vue.use(FormDetails) 6 | expect(app.component(FormDetails.name)).toBeTruthy() 7 | }) 8 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/form-details/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import FormDetails from './FormDetails.vue' 3 | 4 | FormDetails.install = function (app: VueConstructor) { 5 | app.component(FormDetails.name, FormDetails) 6 | } 7 | 8 | export const _FormDetailsComponent = FormDetails 9 | 10 | export default FormDetails 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/form-details/props.ts: -------------------------------------------------------------------------------- 1 | export const props = { 2 | errorMessage: { 3 | type: String, 4 | default: '', 5 | }, 6 | maxlengthText: { 7 | type: String, 8 | default: '', 9 | }, 10 | } 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/form/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/form/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Form from './Form.vue' 3 | 4 | Form.install = function (app: VueConstructor) { 5 | app.component(Form.name, Form) 6 | } 7 | 8 | export const _FormComponent = Form 9 | 10 | export default Form 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/form/props.ts: -------------------------------------------------------------------------------- 1 | export const props = { 2 | disabled: { 3 | type: Boolean, 4 | default: false, 5 | }, 6 | readonly: { 7 | type: Boolean, 8 | default: false, 9 | }, 10 | } 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/icon/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | iconSize: 'Icon Size', 3 | iconColor: 'Icon color', 4 | useImage: 'Use Image', 5 | events: 'Events', 6 | iconAnimation: 'Icon Animation (click toggle)', 7 | toggle: 'Toggle', 8 | iconList: 'Icon List (click copy)', 9 | copySuccess: 'copy success', 10 | clickSuccess: 'Click success', 11 | } 12 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/icon/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/icon/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | iconSize: '图标尺寸', 3 | iconColor: '图标颜色', 4 | useImage: '使用图片', 5 | events: '注册事件', 6 | iconAnimation: '图标切换动画 (点击切换)', 7 | toggle: '切换', 8 | iconList: '图标列表 (点击复制)', 9 | copySuccess: '复制成功', 10 | clickSuccess: '点击成功', 11 | } 12 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/icon/icon.less: -------------------------------------------------------------------------------- 1 | @import '@varlet/icons/dist/css/varlet-icons.less'; 2 | 3 | @icon-size: 20px; 4 | 5 | :root { 6 | --icon-size: @icon-size; 7 | } 8 | 9 | .var-icon { 10 | display: inline-flex; 11 | justify-content: center; 12 | align-items: center; 13 | font-size: var(--icon-size); 14 | color: inherit; 15 | vertical-align: bottom; 16 | 17 | &--shrinking { 18 | transform: scale(0); 19 | } 20 | 21 | &__image { 22 | width: var(--icon-size); 23 | height: var(--icon-size); 24 | object-fit: cover; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/icon/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Icon from './Icon.vue' 3 | 4 | Icon.install = function (app: VueConstructor) { 5 | app.component(Icon.name, Icon) 6 | } 7 | 8 | export const _IconComponent = Icon 9 | 10 | export default Icon 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/icon/props.ts: -------------------------------------------------------------------------------- 1 | import type { PropType } from 'vue' 2 | 3 | export const props = { 4 | name: { 5 | type: String, 6 | }, 7 | size: { 8 | type: [Number, String], 9 | }, 10 | color: { 11 | type: String, 12 | }, 13 | namespace: { 14 | type: String, 15 | default: 'var-icon', 16 | }, 17 | transition: { 18 | type: [Number, String], 19 | default: 0, 20 | }, 21 | onClick: { 22 | type: Function as PropType<(event: Event) => void>, 23 | }, 24 | } 25 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/image-preview/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | functionCall: 'Function Call', 3 | componentCall: 'Component Call', 4 | preview: 'Basic use', 5 | callBack: 'Handle callback function', 6 | basicUse: 'Basic use', 7 | specifyInitialPosition: 'Specify initial position', 8 | displayCloseButton: 'Display the close button', 9 | listenCloseEvents: 'Listen for close event', 10 | shutdownEvent: 'The shutdown event was triggered.', 11 | showExtraSlots: 'Show extra slots', 12 | operate: '操作', 13 | } 14 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/image-preview/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/image-preview/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | functionCall: '函数调用', 3 | componentCall: '组件调用', 4 | preview: '基本使用', 5 | callBack: '处理回调函数', 6 | basicUse: '基本使用', 7 | specifyInitialPosition: '指定初始位置', 8 | displayCloseButton: '展示关闭按钮', 9 | listenCloseEvents: '监听关闭事件', 10 | shutdownEvent: '触发了关闭事件。', 11 | showExtraSlots: '展示额外插槽', 12 | operate: '操作', 13 | } 14 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/image-preview/props.ts: -------------------------------------------------------------------------------- 1 | import type { PropType } from 'vue' 2 | import { pickProps } from '../utils/components' 3 | import { props as swipeProps } from '../swipe/props' 4 | import { props as popupProps } from '../popup/props' 5 | 6 | export const props = { 7 | show: { 8 | type: Boolean, 9 | default: false, 10 | }, 11 | images: { 12 | type: Array as PropType, 13 | default: () => [], 14 | }, 15 | current: { 16 | type: String, 17 | }, 18 | zoom: { 19 | type: [String, Number], 20 | default: 2, 21 | }, 22 | closeable: { 23 | type: Boolean, 24 | default: false, 25 | }, 26 | ...pickProps(swipeProps, ['loop', 'indicator']), 27 | ...pickProps(popupProps, ['lockScroll', 'teleport']), 28 | } 29 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/image/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | fitMode: 'Fit Mode', 4 | setRadius: 'Set Radius', 5 | useRipple: 'Use Ripple', 6 | useLazyLoad: 'Use LazyLoad', 7 | } 8 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/image/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/image/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | fitMode: '填充模式', 4 | setRadius: '设置圆角', 5 | useRipple: '开启水波', 6 | useLazyLoad: '开启懒加载', 7 | } 8 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/image/image.less: -------------------------------------------------------------------------------- 1 | .var-image { 2 | overflow: hidden; 3 | 4 | &__image { 5 | display: block; 6 | width: 100%; 7 | height: 100%; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/image/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Image from './Image.vue' 3 | 4 | Image.install = function (app: VueConstructor) { 5 | app.component(Image.name, Image) 6 | } 7 | 8 | export const _ImageComponent = Image 9 | 10 | export default Image 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/index-anchor/docs/zh-CN.md: -------------------------------------------------------------------------------- 1 | ## API 2 | 3 | ### 属性 4 | 5 | | 参数 | 说明 | 类型 | 默认值 | 6 | | ----- | -------------- | -------- | ---------- | 7 | | `index` | 索引字符 | _number_ \| _string_ | - | 8 | 9 | ### 插槽 10 | 11 | | 名称 | 说明 | 参数 | 12 | | --- | --- | --- | 13 | | `default` | 自定义索引字符 | - | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/index-anchor/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import IndexAnchor from './IndexAnchor.vue' 3 | 4 | IndexAnchor.install = function (app: VueConstructor) { 5 | app.component(IndexAnchor.name, IndexAnchor) 6 | } 7 | 8 | export const _IndexAnchorComponent = IndexAnchor 9 | 10 | export default IndexAnchor 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/index-anchor/props.ts: -------------------------------------------------------------------------------- 1 | export const props = { 2 | index: { 3 | type: [Number, String], 4 | }, 5 | } 6 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/index-bar/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Title', 3 | text: 'Text', 4 | } 5 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/index-bar/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/index-bar/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '标题', 3 | text: '文本', 4 | } 5 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/index-bar/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import IndexBar from './IndexBar.vue' 3 | 4 | IndexBar.install = function (app: VueConstructor) { 5 | app.component(IndexBar.name, IndexBar) 6 | } 7 | 8 | export const _IndexBarComponent = IndexBar 9 | 10 | export default IndexBar 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/index-bar/props.ts: -------------------------------------------------------------------------------- 1 | export const props = { 2 | sticky: { 3 | type: Boolean, 4 | default: true, 5 | }, 6 | stickyOffsetTop: { 7 | type: Number, 8 | default: 0, 9 | }, 10 | cssMode: { 11 | type: Boolean, 12 | default: false, 13 | }, 14 | hideList: { 15 | type: Boolean, 16 | default: false, 17 | }, 18 | zIndex: { 19 | type: [Number, String], 20 | default: 1, 21 | }, 22 | highlightColor: { 23 | type: String, 24 | }, 25 | duration: { 26 | type: [Number, String], 27 | default: 0, 28 | }, 29 | } 30 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/input/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | plainMode: 'Plain Mode', 4 | textarea: 'Textarea', 5 | maxlength: 'Maxlength', 6 | disabled: 'Disabled', 7 | readonly: 'Readonly', 8 | clearable: 'Clearable', 9 | displayIcon: 'Display Icon', 10 | validate: 'Validate', 11 | placeholder: 'Please enter text', 12 | maxMessage: 'Text length must be greater than 6', 13 | clearableText: 'Clearable Text', 14 | } 15 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/input/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/input/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | plainMode: '朴素模式', 4 | textarea: '文本域', 5 | maxlength: '最大长度', 6 | disabled: '禁用', 7 | readonly: '只读', 8 | clearable: '可清除', 9 | displayIcon: '显示图标', 10 | validate: '字段校验', 11 | placeholder: '请输入文本', 12 | maxMessage: '文本长度必须大于6', 13 | clearableText: '可清除文本', 14 | } 15 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/input/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Input from './Input.vue' 3 | 4 | Input.install = function (app: VueConstructor) { 5 | app.component(Input.name, Input) 6 | } 7 | 8 | export const _InputComponent = Input 9 | 10 | export default Input 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/lazy/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | backgroundImageLazyLoad: 'Background Image Lazy Load', 4 | } 5 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/lazy/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/lazy/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | backgroundImageLazyLoad: '背景图懒加载', 4 | } 5 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/list/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | loadFail: 'Load Fail', 4 | tipText: 'Tip Text', 5 | loadingText: 'loading QAQ', 6 | errorText: 'error TNT', 7 | finishedText: 'finished ORZ', 8 | listItem: 'List Item', 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/list/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/list/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | loadFail: '加载失败', 4 | tipText: '提示文字', 5 | loadingText: '正在努力输出', 6 | errorText: '出错了出错了', 7 | finishedText: '一滴都没有了', 8 | listItem: '列表项', 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/list/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import List from './List.vue' 3 | 4 | List.install = function (app: VueConstructor) { 5 | app.component(List.name, List) 6 | } 7 | 8 | export const _ListComponent = List 9 | 10 | export default List 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/list/props.ts: -------------------------------------------------------------------------------- 1 | export const props = { 2 | loading: { 3 | type: Boolean, 4 | default: false, 5 | }, 6 | immediateCheck: { 7 | type: Boolean, 8 | default: true, 9 | }, 10 | finished: { 11 | type: Boolean, 12 | default: false, 13 | }, 14 | error: { 15 | type: Boolean, 16 | default: false, 17 | }, 18 | offset: { 19 | type: [String, Number], 20 | default: 0, 21 | }, 22 | loadingText: { 23 | type: String, 24 | }, 25 | finishedText: { 26 | type: String, 27 | }, 28 | errorText: { 29 | type: String, 30 | }, 31 | } 32 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/loading/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | type: 'Type', 3 | size: 'Size', 4 | color: 'Color', 5 | wrap: 'Wrap', 6 | open: 'Open', 7 | close: 'Close', 8 | cardTitle: 'Intro', 9 | cardDesc: 10 | 'Varlet-vue2 is a Material design mobile component library developed based on Vue2, developed and maintained by partners in the community.', 11 | } 12 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/loading/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/loading/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | type: '类型', 3 | size: '大小', 4 | color: '颜色', 5 | wrap: '包裹内容', 6 | open: '打开', 7 | close: '关闭', 8 | cardTitle: '介绍', 9 | cardDesc: 'Varlet-vue2 是一个基于Vue2开发的 Material 风格移动端组件库，全面拥抱Vue2生态，由社区的小伙伴开发和维护。', 10 | } 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/loading/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Loading from './Loading.vue' 3 | 4 | Loading.install = function (app: VueConstructor) { 5 | app.component(Loading.name, Loading) 6 | } 7 | 8 | export const _LoadingComponent = Loading 9 | 10 | export default Loading 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/locale/docs/en-US.md: -------------------------------------------------------------------------------- 1 | # Locale 2 | 3 | ### Intro 4 | Component library uses Chinese as the default language, support multi-language switch, 5 | built-in support for `Chinese`, `English`. 6 | 7 | ### Multi-language switch 8 | The `Locale` component is introduced to realize multi-language switching, and `Locale.add` is used for language extension. 9 | 10 | ```js 11 | import { Locale } from '@varlet-vue2/ui' 12 | import enUS from '@varlet-vue2/ui/es/locale/en-US' 13 | 14 | Locale.add('en-US', enUS) 15 | ``` 16 | 17 | Use `Locale.use` to switch languages. 18 | 19 | ```js 20 | Locale.use('en-US') 21 | ``` 22 | Use `Locale.merge` to merge languages. 23 | 24 | ```js 25 | Locale.merge('en-US', { 26 | dialogTitle: 'Hello' 27 | }) 28 | ``` 29 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/locale/docs/zh-CN.md: -------------------------------------------------------------------------------- 1 | # 国际化 2 | 3 | ### 介绍 4 | 组件库使用中文作为默认语言，支持多语言切换，内置支持 `中文`，`英文`。 5 | 6 | ### 多语言切换 7 | 引入 `Locale` 组件实现多语言切换，使用 `Locale.add` 进行语言扩展。 8 | 9 | ```js 10 | import { Locale } from '@varlet-vue2/ui' 11 | import enUS from '@varlet-vue2/ui/es/locale/en-US' 12 | 13 | Locale.add('en-US', enUS) 14 | ``` 15 | 16 | 使用 `Locale.use` 进行切换语言 17 | 18 | ```js 19 | Locale.use('en-US') 20 | ``` 21 | 22 | 使用 `Locale.merge` 进行语言合并 23 | 24 | ```js 25 | Locale.merge('en-US', { 26 | dialogTitle: 'Hello' 27 | }) 28 | ``` 29 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/locale/en-US.d.ts: -------------------------------------------------------------------------------- 1 | import type { Pack } from '../../types' 2 | 3 | declare const enUS: Pack 4 | 5 | export default enUS 6 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/locale/zh-CN.d.ts: -------------------------------------------------------------------------------- 1 | import type { Pack } from '../../types' 2 | 3 | declare const zhCN: Pack 4 | 5 | export default zhCN 6 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/menu/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | alignmentMethods: 'Alignment Methods', 3 | topAlignment: 'Top Alignment', 4 | menuOption: 'Menu Option', 5 | bottomAlignment: 'Bottom Alignment', 6 | offset: 'Offset', 7 | offsetRight: 'Offset Right', 8 | offsetLeft: 'Offset Left', 9 | offsetBottom: 'Offset Bottom', 10 | offsetTop: 'Offset Top', 11 | events: 'Events', 12 | } 13 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/menu/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/menu/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | alignmentMethods: '对齐方式', 3 | topAlignment: '顶部对齐', 4 | menuOption: '菜单项', 5 | bottomAlignment: '底部对齐', 6 | offset: '偏移量', 7 | offsetRight: '右偏移', 8 | offsetLeft: '左偏移', 9 | offsetBottom: '下偏移', 10 | offsetTop: '上偏移', 11 | events: '注册事件', 12 | } 13 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/menu/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Menu from './Menu' 3 | 4 | Menu.install = function (app: VueConstructor) { 5 | app.component(Menu.name, Menu) 6 | } 7 | 8 | export const _MenuComponent = Menu 9 | 10 | export default Menu 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/menu/menu.less: -------------------------------------------------------------------------------- 1 | .var { 2 | &-menu-enter, 3 | &-menu-leave-to { 4 | transform: scale(0.8); 5 | opacity: 0; 6 | } 7 | &-menu-enter-active, 8 | &-menu-leave-active { 9 | transition-property: opacity, transform; 10 | transition-duration: 0.25s; 11 | } 12 | } 13 | 14 | .var-menu { 15 | display: inline-block; 16 | transition: background-color 0.25s; 17 | 18 | &__menu { 19 | position: absolute; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/menu/props.ts: -------------------------------------------------------------------------------- 1 | import type { PropType } from 'vue' 2 | 3 | function alignmentValidator(alignment: string) { 4 | return ['top', 'bottom'].includes(alignment) 5 | } 6 | 7 | export const props = { 8 | show: { 9 | type: Boolean, 10 | default: false, 11 | }, 12 | alignment: { 13 | type: String as PropType<'top' | 'bottom'>, 14 | default: 'top', 15 | validator: alignmentValidator, 16 | }, 17 | offsetX: { 18 | type: [Number, String], 19 | default: 0, 20 | }, 21 | offsetY: { 22 | type: [Number, String], 23 | default: 0, 24 | }, 25 | teleport: { 26 | type: String, 27 | default: 'body', 28 | }, 29 | } 30 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/option/docs/zh-CN.md: -------------------------------------------------------------------------------- 1 | ## API 2 | 3 | ### 属性 4 | 5 | | 参数 | 说明 | 类型 | 默认值 | 6 | | --- | --- | --- | --- | 7 | | `label` | 选项显示的文本 | _any_ | `-` | 8 | | `value` | 选项绑定的值 | _any_ | `-` | 9 | 10 | ### 插槽 11 | 12 | | 插槽名 | 说明 | 参数 | 13 | | --- | --- | --- | 14 | | `default` | 选项显示的内容 | `-` | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/option/example/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/option/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Option from './Option.vue' 3 | 4 | Option.install = function (app: VueConstructor) { 5 | app.component(Option.name, Option) 6 | } 7 | 8 | export const _OptionComponent = Option 9 | 10 | export default Option 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/option/props.ts: -------------------------------------------------------------------------------- 1 | export const props = { 2 | label: {}, 3 | value: {}, 4 | } 5 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/pagination/example/Basic.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 30 | 31 | 38 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/pagination/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | showTotal: 'Show Total', 4 | total: '', 5 | item: 'items', 6 | disabled: 'Disabled', 7 | hideSize: 'Hide Size Changer', 8 | pcTotal: 'Total ', 9 | current: 'Current', 10 | } 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/pagination/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/pagination/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | showTotal: '显示总数', 4 | total: '共', 5 | item: '条', 6 | disabled: '禁用', 7 | hideSize: '隐藏 size 切换器', 8 | pcTotal: '共', 9 | current: '当前', 10 | } 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/pagination/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Pagination from './Pagination.vue' 3 | 4 | Pagination.install = function (app: VueConstructor) { 5 | app.component(Pagination.name, Pagination) 6 | } 7 | 8 | export const _PaginationComponent = Pagination 9 | 10 | export default Pagination 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/picker/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | functionCall: 'Function Call', 3 | componentCall: 'Component Call', 4 | singlePicker: 'Single Column Picker', 5 | multiplePicker: 'Multiple Column Picker', 6 | cascadePicker: 'Cascade Column Picker', 7 | textFormatter: 'Text Formatter', 8 | extension: 'Value Mapping', 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/picker/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/picker/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | functionCall: '函数调用', 3 | componentCall: '组件调用', 4 | singlePicker: '单列选择', 5 | multiplePicker: '多列选择', 6 | cascadePicker: '级联选择', 7 | textFormatter: '文本格式化', 8 | extension: '值的映射', 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/popup/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | popupPosition: 'Popup Position', 3 | centerPopup: 'Center Popup', 4 | belowPopup: 'Below Popup', 5 | abovePopup: 'Above Popup', 6 | leftPopup: 'Left Popup', 7 | rightPopup: 'Right Popup', 8 | overlayStyle: 'Overlay Style', 9 | overlayClass: 'Overlay Class', 10 | overlayStyles: 'Overlay Styles', 11 | event: 'Event', 12 | text: 'As he came into the window. It was the sound of a crescendo. He came into her apartment. He left the bloodstains on the carpet.', 13 | } 14 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/popup/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/popup/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | popupPosition: '弹出位置', 3 | centerPopup: '居中弹出', 4 | belowPopup: '下方弹出', 5 | abovePopup: '上方弹出', 6 | leftPopup: '左侧弹出', 7 | rightPopup: '右侧弹出', 8 | overlayStyle: '遮罩层样式', 9 | overlayClass: '遮罩层class', 10 | overlayStyles: '遮罩层style', 11 | event: '注册事件', 12 | text: '素胚勾勒出青花笔锋浓转淡, 瓶身描绘的牡丹一如你初妆, 冉冉檀香透过窗心事我了然, 宣纸上走笔至此搁一半。', 13 | } 14 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/popup/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Popup from './Popup' 3 | 4 | Popup.install = function (app: VueConstructor) { 5 | app.component(Popup.name, Popup) 6 | } 7 | 8 | export const _PopupComponent = Popup 9 | 10 | export default Popup 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/progress/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | circle: 'Circle Progress', 3 | basicUsage: 'Basic Usage', 4 | style: 'Custom Style', 5 | showLabel: 'Show Label', 6 | hideTrack: 'Hide Track', 7 | } 8 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/progress/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/progress/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | circle: '环形进度条', 3 | style: '自定义样式', 4 | basicUsage: '基本使用', 5 | showLabel: '显示标签', 6 | hideTrack: '隐藏轨道', 7 | } 8 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/progress/index.ts: -------------------------------------------------------------------------------- 1 | import { VueConstructor } from 'vue' 2 | import Progress from './Progress.vue' 3 | 4 | Progress.install = function (app: VueConstructor) { 5 | app.component(Progress.name, Progress) 6 | } 7 | 8 | export const _ProgressComponent = Progress 9 | 10 | export default Progress 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/pull-refresh/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import PullRefresh from './PullRefresh.vue' 3 | 4 | PullRefresh.install = function (app: VueConstructor) { 5 | app.component(PullRefresh.name, PullRefresh) 6 | } 7 | 8 | export const _PullRefreshComponent = PullRefresh 9 | 10 | export default PullRefresh 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/radio-group/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | currentValue: 'Current value:', 4 | setState: 'Set State value', 5 | setStyle: 'Modify the icon and color', 6 | disabled: 'Disabled', 7 | readonly: 'Readonly', 8 | eat: 'Eat', 9 | sleep: 'Sleep', 10 | checkAll: 'Check All', 11 | inverseAll: 'Inverse All', 12 | radioGroup: 'RadioGroup', 13 | radioValidate: 'Radio validation', 14 | radioGroupValidate: 'RadioGroup validate', 15 | radioValidateMessage: 'Please check your choice', 16 | radioGroupValidateMessage: 'Please check eat', 17 | } 18 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/radio-group/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/radio-group/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | currentValue: '当前的值:', 4 | setState: '设置状态值', 5 | setStyle: '修改图标和颜色', 6 | disabled: '禁用', 7 | readonly: '只读', 8 | eat: '吃饭', 9 | sleep: '睡觉', 10 | checkAll: '全选', 11 | inverseAll: '反选', 12 | radioGroup: '单选框组', 13 | radioValidate: '单选框字段校验', 14 | radioGroupValidate: '单选框组字段校验', 15 | radioValidateMessage: '请勾选', 16 | radioGroupValidateMessage: '必须选择吃饭', 17 | } 18 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/radio-group/index.ts: -------------------------------------------------------------------------------- 1 | import { VueConstructor } from 'vue' 2 | import RadioGroup from './RadioGroup.vue' 3 | 4 | RadioGroup.install = function (app: VueConstructor) { 5 | app.component(RadioGroup.name, RadioGroup) 6 | } 7 | 8 | export const _RadioGroupComponent = RadioGroup 9 | 10 | export default RadioGroup 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/radio-group/props.ts: -------------------------------------------------------------------------------- 1 | import type { PropType } from 'vue' 2 | 3 | export type ValidateTriggers = 'onChange' 4 | 5 | export function directionValidator(direction: string) { 6 | return ['horizontal', 'vertical'].includes(direction) 7 | } 8 | 9 | export const props = { 10 | value: { 11 | type: [String, Number, Boolean, Object, Array] as PropType, 12 | default: undefined, 13 | }, 14 | direction: { 15 | type: String as PropType<'horizontal' | 'vertical'>, 16 | default: 'horizontal', 17 | validator: directionValidator, 18 | }, 19 | validateTrigger: { 20 | type: Array as PropType>, 21 | default: () => ['onChange'], 22 | }, 23 | rules: { 24 | type: Array as PropType any>>, 25 | }, 26 | } 27 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/radio-group/radioGroup.less: -------------------------------------------------------------------------------- 1 | .var-radio-group { 2 | display: flex; 3 | flex-wrap: wrap; 4 | 5 | &--horizontal { 6 | flex-direction: row; 7 | } 8 | 9 | &--vertical { 10 | flex-direction: column; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/radio/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Radio from './Radio.vue' 3 | 4 | Radio.install = function (app: VueConstructor) { 5 | app.component(Radio.name, Radio) 6 | } 7 | 8 | export const _RadioComponent = Radio 9 | 10 | export default Radio 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/rate/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | baseRating: 'Base Rating', 3 | customizeTheTotalNumberOfRatingICONS: 'Customize The Total Number Of Rating ICONS', 4 | customizeTheIconColor: 'Customize The Icon Color', 5 | customizeRatingIconStyles: 'Customize Rating Icon Styles', 6 | customizeRatingIconSize: 'Customize Rating Icon Size', 7 | customIconSpacing: 'Custom Icon Spacing', 8 | useHalfAStar: 'Use Half A Star', 9 | disableTheRating: 'Disable The Rating', 10 | readonlyRating: 'Readonly Rating', 11 | waterRippleIsProhibited: 'Water ripple is prohibited', 12 | listeningForClickEvents: 'Listening For Click Events', 13 | validate: 'Validate', 14 | rateMessage: 'It has to be greater than 2', 15 | } 16 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/rate/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/rate/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | baseRating: '基础评分', 3 | customizeTheTotalNumberOfRatingICONS: '自定义评分总数', 4 | customizeTheIconColor: '自定义图标颜色', 5 | customizeRatingIconStyles: '自定义评分图标样式', 6 | customizeRatingIconSize: '自定义评分图标尺寸', 7 | customIconSpacing: '自定义图标间隔', 8 | useHalfAStar: '使用半星', 9 | disableTheRating: '禁用评分', 10 | readonlyRating: '只读评分', 11 | waterRippleIsProhibited: '禁止使用水波纹', 12 | listeningForClickEvents: '监听点击事件', 13 | validate: '字段校验', 14 | rateMessage: '必须大于2', 15 | } 16 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/rate/index.ts: -------------------------------------------------------------------------------- 1 | import { VueConstructor } from 'vue' 2 | import Rate from './Rate.vue' 3 | 4 | Rate.install = function (app: VueConstructor) { 5 | app.component(Rate.name, Rate) 6 | } 7 | 8 | export const _RateComponent = Rate 9 | 10 | export default Rate 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/ripple/__tests__/__snapshots__/index.spec.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`test ripple example 1`] = ` 4 | "
5 |
基本使用
6 |
点击
7 |
自定义颜色
8 |
点击
9 |
禁用状态
10 |
点击
11 |
" 12 | `; 13 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/ripple/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | click: 'Click', 3 | basicUsage: 'Basic Usage', 4 | customColor: 'Custom Color', 5 | disabledStatus: 'Disabled Status', 6 | } 7 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/ripple/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/ripple/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | click: '点击', 3 | basicUsage: '基本使用', 4 | customColor: '自定义颜色', 5 | disabledStatus: '禁用状态', 6 | } 7 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/ripple/ripple.less: -------------------------------------------------------------------------------- 1 | @ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6); 2 | 3 | :root { 4 | --ripple-cubic-bezier: @ripple-cubic-bezier; 5 | } 6 | 7 | .var-ripple { 8 | position: absolute; 9 | transition: transform 0.2s var(--ripple-cubic-bezier), opacity 0.14s linear; 10 | top: 0; 11 | left: 0; 12 | border-radius: 50%; 13 | opacity: 0; 14 | will-change: transform, opacity; 15 | pointer-events: none; 16 | z-index: 100; 17 | } 18 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/row/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | girdSystem: 'Grid System', 3 | offset: 'Offset', 4 | alignment: 'Alignment', 5 | gutter: 'Gutter', 6 | } 7 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/row/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/row/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | girdSystem: '栅格系统', 3 | offset: '偏移', 4 | alignment: '对齐', 5 | gutter: '列间距', 6 | } 7 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/row/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Row from './Row.vue' 3 | 4 | Row.install = function (app: VueConstructor) { 5 | app.component(Row.name, Row) 6 | } 7 | 8 | export const _RowComponent = Row 9 | 10 | export default Row 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/row/row.less: -------------------------------------------------------------------------------- 1 | .var-row { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } 5 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/select/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/select/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | plainMode: '朴素模式', 4 | disabled: '禁用', 5 | readonly: '只读', 6 | clearable: '可清除', 7 | displayIcon: '显示图标', 8 | validate: '单选值校验', 9 | multipleValidate: '多选值校验', 10 | placeholder: '请选择一个选项', 11 | multiplePlaceholder: '请选择多个选项', 12 | clearableText: '可清除文本', 13 | relation: '文本关联值', 14 | multiple: '多选', 15 | chipMultiple: '纸片风格的多选', 16 | eat: '吃饭', 17 | sleep: '睡觉', 18 | play: '打游戏', 19 | coding: '写代码', 20 | rest: '摸鱼', 21 | currentSelect: '当前选择的是:', 22 | mustSelectRest: '您一定得选择摸鱼', 23 | mustSelectMoreThan: '您至少选择两个选项', 24 | offsetY: '垂直偏移', 25 | emberSprit: '火猫', 26 | earthSprit: '土猫', 27 | stormSpirit: '蓝猫', 28 | voidSpirit: '紫猫', 29 | } 30 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/select/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Select from './Select.vue' 3 | 4 | Select.install = function (app: VueConstructor) { 5 | app.component(Select.name, Select) 6 | } 7 | 8 | export const _SelectComponent = Select 9 | 10 | export default Select 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/skeleton/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | displayTitle: 'Display Title', 4 | customRowsHeight: 'Custom Row Heights', 5 | displayAvatar: 'Display Avatar', 6 | displayCard: 'Display Card', 7 | fullscreenMode: 'Fullscreen Mode', 8 | toggleFullscreenMode: 'Toggle Fullscreen Mode', 9 | loadingData: 'Loading Data', 10 | } 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/skeleton/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/skeleton/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | displayTitle: '显示标题', 4 | customRowsHeight: '自定义段落高度', 5 | displayAvatar: '显示头像', 6 | displayCard: '显示卡片', 7 | fullscreenMode: '全屏模式', 8 | toggleFullscreenMode: '切换全屏模式', 9 | loadingData: '加载的数据', 10 | } 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/skeleton/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Skeleton from './Skeleton.vue' 3 | 4 | Skeleton.install = function (app: VueConstructor) { 5 | app.component(Skeleton.name, Skeleton) 6 | } 7 | 8 | export const _SkeletonComponent = Skeleton 9 | 10 | export default Skeleton 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/slider/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | stepSize: 'Step Size', 4 | dualThumb: 'Dual thumb', 5 | disable: 'Disable', 6 | readonly: 'Readonly', 7 | sliderSize: 'Slider Size', 8 | customStyle: 'Custom Style', 9 | showLabel: 'Show Label', 10 | customBtn: 'Custom Button', 11 | validateValue: 'Validate Value', 12 | } 13 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/slider/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/slider/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | stepSize: '指定步长', 4 | dualThumb: '双滑块', 5 | disable: '禁用', 6 | readonly: '只读', 7 | sliderSize: '不同大小', 8 | customStyle: '自定义样式', 9 | showLabel: '显示标签', 10 | customBtn: '自定义按钮', 11 | validateValue: '值的校验', 12 | } 13 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/slider/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Slider from './Slider.vue' 3 | 4 | Slider.install = function (app: VueConstructor) { 5 | app.component(Slider.name, Slider) 6 | } 7 | 8 | export const _SliderComponent = Slider 9 | 10 | export default Slider 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/snackbar/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | functionCall: 'Function Call', 3 | componentCall: 'Component Call', 4 | type: 'Snackbar Type', 5 | success: 'Success', 6 | warning: 'Warning', 7 | info: 'Info', 8 | error: 'Error', 9 | loading: 'Loading', 10 | text: "Hello, I'm a snackbar", 11 | loaded: 'Loaded', 12 | wait: 'waiting...', 13 | close: 'Close', 14 | basicUsage: 'Basic Usage', 15 | multiLine: 'Multi-Line', 16 | bottomDisplay: 'Bottom Display', 17 | hiddenTime: 'Display Duration', 18 | forbidClick: 'Forbid Click', 19 | } 20 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/snackbar/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/snackbar/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | functionCall: '函数调用', 3 | componentCall: '组件调用', 4 | type: 'Snackbar 类型', 5 | success: '成功', 6 | info: '消息', 7 | warning: '警告', 8 | error: '错误', 9 | loading: '加载', 10 | text: '这是一个消息条！！', 11 | loaded: '加载成功！！', 12 | wait: '等待中...', 13 | close: '关闭', 14 | basicUsage: '基本使用', 15 | multiLine: '垂直排列', 16 | bottomDisplay: '底部显示', 17 | hiddenTime: '显示时长', 18 | forbidClick: '禁止穿透点击', 19 | } 20 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/space/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | baseUse: 'Basic use', 3 | vertical: 'Vertical', 4 | space: 'Space Size', 5 | rightAlign: 'Right Align', 6 | around: 'Space Around', 7 | center: 'Align Center', 8 | between: 'Space Between', 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/space/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/space/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | baseUse: '基本用法', 3 | vertical: '垂直', 4 | space: '间隙', 5 | rightAlign: '靠右', 6 | around: '环绕', 7 | center: '居中', 8 | between: '两端对齐', 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/space/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Space from './Space.jsx' 3 | 4 | Space.install = function (app: VueConstructor) { 5 | app.component(Space.name, Space) 6 | } 7 | 8 | export const _SpaceComponent = Space 9 | 10 | export default Space 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/space/space.less: -------------------------------------------------------------------------------- 1 | .var-space { 2 | display: flex; 3 | &--inline { 4 | display: inline-flex; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/step/docs/zh-CN.md: -------------------------------------------------------------------------------- 1 | ## API 2 | 3 | ### 属性 4 | 5 | | 参数 | 说明 | 类型 | 默认值 | 6 | | ----- | -------------- | -------- | ---------- | 7 | | `active-icon` | 激活状态图标 | _string_ | `check` | 8 | | `current-icon` | 当前步骤时的图标 | _string_ | - | 9 | | `inactive-icon` | 未激活状态图标 | _string_ | - | 10 | 11 | ### 插槽 12 | 13 | | 名称 | 说明 | 参数 | 14 | | ----- | -------------- | -------- | 15 | | `default` | step 的内容 | - | 16 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/step/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Step from './Step.vue' 3 | 4 | Step.install = function (app: VueConstructor) { 5 | app.component(Step.name, Step) 6 | } 7 | 8 | export const _StepComponent = Step 9 | 10 | export default Step 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/step/props.ts: -------------------------------------------------------------------------------- 1 | export const props = { 2 | activeIcon: { 3 | type: String, 4 | default: 'check', 5 | }, 6 | currentIcon: { 7 | type: String, 8 | }, 9 | inactiveIcon: { 10 | type: String, 11 | }, 12 | } 13 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/steps/Steps.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 30 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/steps/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | customStyle: 'Custom Style', 4 | dynamicSteps: 'Dynamic Steps', 5 | vertical: 'Vertical Mode', 6 | next: 'next', 7 | first: 'Step1', 8 | second: 'Step2', 9 | third: 'Step3', 10 | fourth: 'Step4', 11 | fifth: 'Step5', 12 | placeholder: 'Change the number of steps', 13 | step: 'Step', 14 | text: 'do something...', 15 | } 16 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/steps/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/steps/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | customStyle: '自定义样式', 4 | dynamicSteps: '动态步骤', 5 | vertical: '垂直模式', 6 | next: '下一步', 7 | first: '步骤1', 8 | second: '步骤2', 9 | third: '步骤3', 10 | fourth: '步骤4', 11 | fifth: '步骤5', 12 | placeholder: '改变step的数量', 13 | step: '步骤', 14 | text: '接下来...', 15 | } 16 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/steps/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Steps from './Steps.vue' 3 | 4 | Steps.install = function (app: VueConstructor) { 5 | app.component(Steps.name, Steps) 6 | } 7 | 8 | export const _StepsComponent = Steps 9 | 10 | export default Steps 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/steps/props.ts: -------------------------------------------------------------------------------- 1 | import type { PropType } from 'vue' 2 | 3 | type Direction = 'horizontal' | 'vertical' 4 | 5 | function directionValidator(direction: string): boolean { 6 | return ['horizontal', 'vertical'].includes(direction) 7 | } 8 | 9 | export const props = { 10 | active: { 11 | type: [String, Number], 12 | default: 0, 13 | }, 14 | direction: { 15 | type: String as PropType, 16 | default: 'horizontal', 17 | validator: directionValidator, 18 | }, 19 | activeColor: { 20 | type: String, 21 | }, 22 | inactiveColor: { 23 | type: String, 24 | }, 25 | } 26 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/sticky/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | localSticky: 'Local Sticky', 4 | } 5 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/sticky/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/sticky/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | localSticky: '局部吸顶', 4 | } 5 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/sticky/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Sticky from './Sticky.vue' 3 | 4 | Sticky.install = function (app: VueConstructor) { 5 | app.component(Sticky.name, Sticky) 6 | } 7 | 8 | export const _StickyComponent = Sticky 9 | 10 | export default Sticky 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/sticky/props.ts: -------------------------------------------------------------------------------- 1 | import type { PropType } from 'vue' 2 | 3 | export const props = { 4 | offsetTop: { 5 | type: [String, Number], 6 | default: 0, 7 | }, 8 | zIndex: { 9 | type: [String, Number], 10 | default: 10, 11 | }, 12 | cssMode: { 13 | type: Boolean, 14 | default: false, 15 | }, 16 | disabled: { 17 | type: Boolean, 18 | default: false, 19 | }, 20 | onScroll: { 21 | type: Function as PropType<(offsetTop: number, isFixed: boolean) => void>, 22 | }, 23 | } 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/sticky/sticky.less: -------------------------------------------------------------------------------- 1 | .var-sticky { 2 | position: relative; 3 | 4 | &--css-mode { 5 | position: sticky; 6 | position: -webkit-sticky; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/style-provider/StyleProvider.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/style-provider/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | componentCall: 'Component Call', 3 | functionCall: 'Function Call', 4 | toggleTheme: 'Toggle Theme', 5 | toggleRootTheme: 'Toggle Root Theme', 6 | } 7 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/style-provider/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/style-provider/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | componentCall: '组件调用', 3 | functionCall: '函数调用', 4 | toggleTheme: '切换样式变量', 5 | toggleRootTheme: '切换根节点样式变量', 6 | } 7 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/style-provider/props.ts: -------------------------------------------------------------------------------- 1 | import type { PropType } from 'vue' 2 | import type { StyleVars } from './index' 3 | 4 | export const props = { 5 | styleVars: { 6 | type: Object as PropType, 7 | default: () => ({}), 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/styles/docs/en-US.md: -------------------------------------------------------------------------------- 1 | # Elevation 2 | 3 | ### Intro 4 | The component library provides a shadow elevation effect based on the `Material` 5 | specification to represent the dimensionality of an element. 6 | 7 | ### Install 8 | 9 | ```js 10 | // css 11 | import '@varlet/ui/es/styles/elevation.css' 12 | // less 13 | import '@varlet/ui/es/styles/elevation.less' 14 | ``` 15 | 16 | ### Basic Usage 17 | Shadows are divided into `0-24` levels, and the higher the level, the higher the altitude. 18 | 19 | ```html 20 |
21 |
22 |
23 | ...... 24 |
25 | ``` 26 | 27 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/styles/docs/zh-CN.md: -------------------------------------------------------------------------------- 1 | # 海拔效果 2 | 3 | ### 介绍 4 | 组件库提供了基于 `Material` 规范的阴影海拔效果，用来表现元素的立体感。 5 | 6 | ### 引入 7 | 8 | ```js 9 | // css 10 | import '@varlet/ui/es/styles/elevation.css' 11 | // less 12 | import '@varlet/ui/es/styles/elevation.less' 13 | ``` 14 | 15 | ### 基本使用 16 | 阴影程度划分为 `0-24` 个等级，等级越高海拔越高。 17 | 18 | ```html 19 |
20 |
21 |
22 | ...... 23 |
24 | ``` 25 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/styles/var.less: -------------------------------------------------------------------------------- 1 | // 文字 2 | @font-size-xs: 10px; 3 | @font-size-sm: 12px; 4 | @font-size-md: 14px; 5 | @font-size-lg: 16px; 6 | 7 | // 图标 8 | @icon-size-xs: 16px; 9 | @icon-size-sm: 18px; 10 | @icon-size-md: 20px; 11 | @icon-size-lg: 22px; 12 | 13 | //颜色 14 | @color-body: #fff; 15 | @color-text: #333; 16 | @color-primary: #3a7afe; 17 | @color-info: #00afef; 18 | @color-success: #00c48f; 19 | @color-warning: #ff9f00; 20 | @color-danger: #f44336; 21 | @color-disabled: #e0e0e0; 22 | @color-text-disabled: #aaa; 23 | 24 | // 动画函数 25 | @cubic-bezier: cubic-bezier(0.25, 0.8, 0.5, 1); 26 | 27 | // 阴影 28 | @shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2); 29 | @shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14); 30 | @shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12); 31 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/swipe-item/docs/zh-CN.md: -------------------------------------------------------------------------------- 1 | # 轮播项 -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/swipe-item/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import SwipeItem from './SwipeItem.vue' 3 | 4 | SwipeItem.install = function (app: VueConstructor) { 5 | app.component(SwipeItem.name, SwipeItem) 6 | } 7 | 8 | export const _SwipeItemComponent = SwipeItem 9 | 10 | export default SwipeItem 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/swipe-item/swipeItem.less: -------------------------------------------------------------------------------- 1 | .var-swipe-item { 2 | flex-shrink: 0; 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/swipe/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | forbidLoop: 'Forbid Loop', 4 | autoplay: 'Autoplay', 5 | vertical: 'Vertical Swipe', 6 | handleChange: 'Handle Change', 7 | customIndicator: 'Custom Indicator', 8 | } 9 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/swipe/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/swipe/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | forbidLoop: '禁止循环轮播', 4 | autoplay: '开启自动播放', 5 | vertical: '垂直轮播', 6 | handleChange: '监听切换', 7 | customIndicator: '自定义指示器', 8 | } 9 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/swipe/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Swipe from './Swipe.vue' 3 | 4 | Swipe.install = function (app: VueConstructor) { 5 | app.component(Swipe.name, Swipe) 6 | } 7 | 8 | export const _SwipeComponent = Swipe 9 | 10 | export default Swipe 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/swipe/props.ts: -------------------------------------------------------------------------------- 1 | export const props = { 2 | loop: { 3 | type: Boolean, 4 | default: true, 5 | }, 6 | autoplay: { 7 | type: [String, Number], 8 | }, 9 | duration: { 10 | type: [String, Number], 11 | default: 300, 12 | }, 13 | initialIndex: { 14 | type: [String, Number], 15 | default: 0, 16 | }, 17 | indicator: { 18 | type: Boolean, 19 | default: true, 20 | }, 21 | indicatorColor: { 22 | type: String, 23 | }, 24 | vertical: { 25 | type: Boolean, 26 | default: false, 27 | }, 28 | touchable: { 29 | type: Boolean, 30 | default: true, 31 | }, 32 | } 33 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/switch/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | customColor: 'Custom Color', 4 | notAvailable: 'Not Available', 5 | size: 'Size', 6 | loading: 'Loading', 7 | validateValue: 'Validate Value', 8 | text: 'Whether to open the switch', 9 | state: 'Error!', 10 | } 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/switch/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/switch/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | customColor: '自定义颜色', 4 | notAvailable: '不可用', 5 | size: '不同大小', 6 | loading: '加载状态', 7 | validateValue: '值的校验', 8 | text: '是否打开开关', 9 | state: '错误！', 10 | } 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/switch/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Switch from './Switch.vue' 3 | 4 | Switch.install = function (app: VueConstructor) { 5 | app.component(Switch.name, Switch) 6 | } 7 | 8 | export const _SwitchComponent = Switch 9 | 10 | export default Switch 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/tab-item/docs/zh-CN.md: -------------------------------------------------------------------------------- 1 | ## API 2 | 3 | ### 属性 4 | 5 | | 参数 | 说明 | 类型 | 默认值 | 6 | | --- | --- | --- | --- | 7 | | `name` | 视图的名字 | _string \| number_ | `index` | 8 | 9 | ### 插槽 10 | 11 | | 插槽名 | 说明 | 参数 | 12 | | --- | --- | --- | 13 | | `default` | 视图的内容 | `-` | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/tab-item/example/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 23 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/tab-item/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import TabItem from './TabItem.vue' 3 | 4 | TabItem.install = function (app: VueConstructor) { 5 | app.component(TabItem.name, TabItem) 6 | } 7 | 8 | export const _TabItemComponent = TabItem 9 | 10 | export default TabItem 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/tab-item/props.ts: -------------------------------------------------------------------------------- 1 | export const props = { 2 | name: { 3 | type: [String, Number], 4 | }, 5 | } 6 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/tab-item/tabItem.less: -------------------------------------------------------------------------------- 1 | .var-tab-item { 2 | &--inactive[var-tab-item-cover] { 3 | overflow: visible; 4 | height: 0; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/tab/docs/zh-CN.md: -------------------------------------------------------------------------------- 1 | ## API 2 | 3 | ### 属性 4 | 5 | | 参数 | 说明 | 类型 | 默认值 | 6 | | --- | --- | --- | --- | 7 | | `name` | 选项卡的名字 | _string \| number_ | `index` | 8 | | `disabled` | 是否禁用选项卡 | _boolean_ | `false` | 9 | 10 | ### 事件 11 | 12 | | 事件名 | 说明 | 参数 | 13 | | --- | --- | --- | 14 | | `click` | 点击选项卡时触发, 在 `disabled` 状态为 `true` 时不触发 | `active: string | number, event: Event` | 15 | 16 | ### 插槽 17 | 18 | | 插槽名 | 说明 | 参数 | 19 | | --- | --- | --- | 20 | | `default` | 选项卡内容 | `-` | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/tab/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Tab from './Tab.vue' 3 | 4 | Tab.install = function (app: VueConstructor) { 5 | app.component(Tab.name, Tab) 6 | } 7 | 8 | export const _TabComponent = Tab 9 | 10 | export default Tab 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/tab/props.ts: -------------------------------------------------------------------------------- 1 | export const props = { 2 | name: { 3 | type: [String, Number], 4 | }, 5 | disabled: { 6 | type: Boolean, 7 | default: false, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/table/__tests__/index.spec.js: -------------------------------------------------------------------------------- 1 | import example from '../example' 2 | import Table from '..' 3 | import Vue from 'vue' 4 | import { mount } from '@vue/test-utils' 5 | 6 | test('test table example', () => { 7 | const wrapper = mount(example) 8 | expect(wrapper.html()).toMatchSnapshot() 9 | }) 10 | 11 | test('test table plugin', () => { 12 | Vue.use(Table) 13 | expect(Vue.component(Table.name)).toBeTruthy() 14 | }) 15 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/table/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | slot: 'Footer Slots', 4 | math: 'Math', 5 | english: 'English', 6 | frontend: 'Frontend', 7 | tom: 'Tom', 8 | jerry: 'Jerry', 9 | name: 'Name', 10 | } 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/table/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/table/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | slot: '尾部插槽', 4 | math: '数学', 5 | english: '英语', 6 | tom: '火猫桑', 7 | jerry: '耗子君', 8 | name: '姓名', 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/table/index.ts: -------------------------------------------------------------------------------- 1 | import Table from './Table.vue' 2 | import type { VueConstructor } from 'vue' 3 | 4 | Table.install = function (app: VueConstructor) { 5 | app.component(Table.name, Table) 6 | } 7 | 8 | export const _TableComponent = Table 9 | 10 | export default Table 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/tabs-items/docs/zh-CN.md: -------------------------------------------------------------------------------- 1 | ## API 2 | 3 | ### 属性 4 | 5 | | 参数 | 说明 | 类型 | 默认值 | 6 | | --- | --- | --- | --- | 7 | | `active.sync` | 激活的选项卡的名字 | _string \| number_ | `-` | 8 | | `can-swipe` | 是否允许滑动切换 | _boolean_ | `true` | 9 | | `loop` | 是否允许循环切换 | _boolean_ | `false` | 10 | 11 | ### 插槽 12 | 13 | | 插槽名 | 说明 | 参数 | 14 | | --- | --- | --- | 15 | | `default` | 视图组的内容 | `-` | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/tabs-items/example/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 25 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/tabs-items/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import TabsItems from './TabsItems.vue' 3 | 4 | TabsItems.install = function (app: VueConstructor) { 5 | app.component(TabsItems.name, TabsItems) 6 | } 7 | 8 | export const _TabsItemsComponent = TabsItems 9 | 10 | export default TabsItems 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/tabs-items/props.ts: -------------------------------------------------------------------------------- 1 | export const props = { 2 | active: { 3 | type: [String, Number], 4 | default: 0, 5 | }, 6 | canSwipe: { 7 | type: Boolean, 8 | default: true, 9 | }, 10 | loop: { 11 | type: Boolean, 12 | default: false, 13 | }, 14 | } 15 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/tabs/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/tabs/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | modifyStyle: '修改样式', 4 | disabled: '禁用选项', 5 | enableScroll: '开启滚动', 6 | tabVerticalLayout: '选项卡垂直布局', 7 | tabsVerticalLayout: '容器垂直布局', 8 | viewRelation: '视图联动', 9 | option: '选项', 10 | stickyLayout: '开启粘性布局', 11 | text: 12 | '呜啦啦啦火车笛，随着奔腾的马蹄。\n' + 13 | '小妹妹吹着口琴，夕阳下美了剪影。\n' + 14 | '我用子弹写日记，介绍完了风景。\n' + 15 | '接下来换介绍我自己。\n' + 16 | '我虽然是个牛仔，在酒吧只点牛奶。\n' + 17 | '为什么不喝啤酒，因为啤酒伤身体。', 18 | text2: 19 | '很多人不长眼睛，嚣张都靠武器。\n' + 20 | '赤手空拳就缩成蚂蚁。\n' + 21 | '不用麻烦了，不用麻烦了。\n' + 22 | '不用麻烦，不用麻烦了，不用麻烦了。', 23 | text3: 24 | '你们一起上，我在赶时间。\n' + 25 | '每天决斗观众都累了，英雄也累了。\n' + 26 | '不用麻烦了，不用麻烦了。\n' + 27 | '副歌不长你们有几个，一起上好了。\n' + 28 | '正义呼唤我，美女需要我。\n' + 29 | '牛仔很忙的。', 30 | } 31 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/tabs/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Tabs from './Tabs.vue' 3 | 4 | Tabs.install = function (app: VueConstructor) { 5 | app.component(Tabs.name, Tabs) 6 | } 7 | 8 | export const _TabsComponent = Tabs 9 | 10 | export default Tabs 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/teleport/__tests__/__snapshots__/index.spec.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`test teleport disabled 1`] = ` 4 | "
5 |
hello
6 |
" 7 | `; 8 | 9 | exports[`test teleport to 1`] = `"
hello
"`; 10 | 11 | exports[`test teleport to 2`] = `"
hello
"`; 12 | 13 | exports[`test teleport transfer 1`] = `"
"`; 14 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/teleport/example/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 23 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/teleport/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Teleport from './Teleport.jsx' 3 | 4 | Teleport.install = function (app: VueConstructor) { 5 | app.component(Teleport.name, Teleport) 6 | } 7 | 8 | export const _TeleportComponent = Teleport 9 | 10 | export default Teleport 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/teleport/props.ts: -------------------------------------------------------------------------------- 1 | export const props = { 2 | to: { 3 | type: String, 4 | required: true, 5 | }, 6 | disabled: { 7 | type: Boolean, 8 | default: false, 9 | }, 10 | } 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/actionSheet.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--action-sheet-background': '#1e1e1e', 3 | '--action-sheet-title-color': '#aaa', 4 | '--action-sheet-action-item-color': '#fff', 5 | } 6 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/appBar.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--app-bar-color': '#272727', 3 | } 4 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/badge.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--badge-default-color': '#555', 3 | } 4 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/bottomNavigation.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--bottom-navigation-background-color': '#272727', 3 | '--bottom-navigation-border-color': '#444', 4 | } 5 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/bottomNavigationItem.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--bottom-navigation-item-active-background-color': '#272727', 3 | } 4 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/button.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--button-default-color': '#303030', 3 | } 4 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/card.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--card-background': '#303030', 3 | '--card-title-color': '#ffffff', 4 | '--card-subtitle-color': '#aaaaaa', 5 | '--card-description-color': '#aaaaaa', 6 | } 7 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/cell.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--cell-desc-color': '#aaa', 3 | '--cell-border-color': '#545454', 4 | } 5 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/checkbox.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--checkbox-unchecked-color': '#fff', 3 | } 4 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/chip.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--chip-default-color': '#555', 3 | } 4 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/collapse.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--collapse-background': '#303030', 3 | '--collapse-text-color': '#fff', 4 | '--collapse-border-top': 'thin solid rgba(255, 255, 255, 0.12)', 5 | } 6 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/datePicker.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--date-picker-main-color': '#fff', 3 | '--date-picker-body-background-color': '#303030', 4 | '--day-picker-head-item-color': '#aaaaaa', 5 | } 6 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/dialog.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--dialog-background': '#1e1e1e', 3 | '--dialog-message-color': '#bbb', 4 | } 5 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/divider.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--divider-color': 'rgba(255, 255, 255, 0.2)', 3 | '--divider-text-color': '#aaa', 4 | } 5 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/index.d.ts: -------------------------------------------------------------------------------- 1 | import { StyleVars } from '../../../types' 2 | 3 | declare const dark: StyleVars 4 | 5 | export default dark 6 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/input.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--input-input-text-color': '#fff', 3 | '--input-blur-color': 'rgb(255, 255, 255, .7)', 4 | } 5 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/pagination.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--pagination-list-bg-color': '#303030', 3 | '--pagination-hover-bg-color': '#25293a', 4 | '--pagination-list-active-bg-color': '#25293a', 5 | '--pagination-list-active-color': '#4a7afe', 6 | '--pagination-item-background': '#303030', 7 | } 8 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/picker.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--picker-background': '#1e1e1e', 3 | '--picker-cancel-button-text-color': '#aaa', 4 | '--picker-picked-border': '1px solid rgba(255, 255, 255, 0.12)', 5 | } 6 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/popup.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--popup-content-background-color': '#1e1e1e', 3 | } 4 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/pullRefresh.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--pull-refresh-background': '#303030', 3 | } 4 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/radio.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--radio-unchecked-color': '#fff', 3 | } 4 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/select.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--select-select-text-color': '#fff', 3 | '--select-blur-color': 'rgb(255, 255, 255, .7)', 4 | '--select-scroller-background': '#303030', 5 | } 6 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/skeleton.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--skeleton-card-background-color': 'hsla(0,0%,100%,.12)', 3 | '--skeleton-animation-background': `linear-gradient( 4 | 90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.05),hsla(0,0%,100%,0)) 5 | `, 6 | '--skeleton-avatar-background-color': 'hsla(0,0%,100%,.12)', 7 | '--skeleton-title-background-color': 'hsla(0,0%,100%,.12)', 8 | } 9 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/steps.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--step-content-color': 'rgba(255, 255, 255, .38)', 3 | '--step-content-active-color': '#fff', 4 | '--step-line-background': '#fff', 5 | } 6 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/switch.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--switch-track-background': '#727272', 3 | '--switch-handle-background': '#727272', 4 | } 5 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/tab-item.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--tab-item-content-color': '#aaa', 3 | } 4 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/tab.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--tab-inactive-color': 'rgba(255, 255, 255, .65)', 3 | } 4 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/table.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--table-background': '#303030', 3 | '--table-thead-th-text-color': 'rgba(255, 255, 255, 0.6)', 4 | '--table-tbody-tr-hover-background': '#4c4b4b', 5 | '--table-thead-border-bottom': 'thin solid rgba(255, 255, 255, 0.12)', 6 | '--table-tbody-tr-border-bottom': 'thin solid rgba(255, 255, 255, 0.12)', 7 | } 8 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/tabs.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--tabs-background': '#1e1e1e', 3 | } 4 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/timePicker.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--time-picker-clock-container-background': '#545454', 3 | '--time-picker-body-background': '#403f3f', 4 | '--time-picker-clock-item-disable-color': '#aaaaaa', 5 | } 6 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/dark/uploader.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | '--uploader-action-background': '#303030', 3 | '--uploader-action-icon-color': '#fff', 4 | '--uploader-file-name-background': '#303030', 5 | '--uploader-file-name-color': '#aaa', 6 | '--uploader-file-cover-background': '#303030', 7 | } 8 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | toggleTheme: 'Toggle Theme', 3 | } 4 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/themes/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | toggleTheme: '切换主题', 3 | } 4 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/time-picker/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | hour24: '24hr Format', 4 | readonly: 'Readonly', 5 | timeLimit: 'Time Limit', 6 | custom: 'Custom', 7 | showSecond: 'show-seconds', 8 | } 9 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/time-picker/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/time-picker/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | hour24: '24小时格式', 4 | readonly: '只读', 5 | timeLimit: '时间限制', 6 | custom: '自定义', 7 | showSecond: '显示秒', 8 | } 9 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/time-picker/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import TimePicker from './TimePicker.vue' 3 | 4 | TimePicker.install = function (app: VueConstructor) { 5 | app.component(TimePicker.name, TimePicker) 6 | } 7 | 8 | export const _TimePickerComponent = TimePicker 9 | 10 | export default TimePicker 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/uploader/example/locale/en-US.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: 'Basic Usage', 3 | preview: 'File Preview', 4 | state: 'Upload State', 5 | maxlength: 'File Maxlength', 6 | maxsize: 'File Size Limit', 7 | beforeRead: 'Upload Preprocessing', 8 | disabled: 'Disabled', 9 | readonly: 'Readonly', 10 | validate: 'Validate', 11 | validateMessage: 'There is a file that failed to upload', 12 | style: 'Customize upload styles', 13 | upload: 'Upload', 14 | beforeRemove: 'Remove Preprocessing', 15 | removeTitle: 'Delete or not?', 16 | removeMessage: 'Cannot be withdrawn after deletion', 17 | fileSizeExceedsLimit: 'file size exceeds limit', 18 | fileLessThen: 'the file is less than 1M, the upload is successful', 19 | fileLargeThen: 'the file is larger than 1M and cannot be uploaded', 20 | } 21 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/uploader/example/locale/index.ts: -------------------------------------------------------------------------------- 1 | // lib 2 | import _zhCN from '../../../locale/zh-CN' 3 | import _enCN from '../../../locale/en-US' 4 | // mobile example doc 5 | import zhCN from './zh-CN' 6 | import enUS from './en-US' 7 | import { useLocale, add as _add, use as _use } from '../../../locale' 8 | 9 | const { add, use: exampleUse, pack, packs, merge } = useLocale() 10 | 11 | const use = (lang: string) => { 12 | _use(lang) 13 | exampleUse(lang) 14 | } 15 | 16 | export { add, pack, packs, merge, use } 17 | 18 | // lib 19 | _add('zh-CN', _zhCN) 20 | _add('en-US', _enCN) 21 | // mobile example doc 22 | add('zh-CN', zhCN as any) 23 | add('en-US', enUS as any) 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/uploader/example/locale/zh-CN.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | basicUsage: '基本使用', 3 | preview: '文件预览', 4 | state: '上传状态', 5 | maxlength: '文件数量限制', 6 | maxsize: '文件大小限制', 7 | beforeRead: '上传预处理', 8 | disabled: '禁用', 9 | readonly: '只读', 10 | validate: '字段校验', 11 | validateMessage: '存在上传失败的文件', 12 | style: '自定义上传样式', 13 | upload: '上传', 14 | beforeRemove: '删除前处理', 15 | removeTitle: '是否删除?', 16 | removeMessage: '删除后无法撤回', 17 | fileSizeExceedsLimit: '文件大小超出限制', 18 | fileLessThen: '文件小于1M，上传成功', 19 | fileLargeThen: '文件大于1M，不能上传', 20 | } 21 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/uploader/index.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import Uploader from './Uploader.vue' 3 | 4 | Uploader.install = function (app: VueConstructor) { 5 | app.component(Uploader.name, Uploader) 6 | } 7 | 8 | export const _UploaderComponent = Uploader 9 | 10 | export default Uploader 11 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/utils/mixins/listeners.js: -------------------------------------------------------------------------------- 1 | import { bigCamelize } from '../shared' 2 | 3 | export const ListenersMixin = { 4 | methods: { 5 | getListeners() { 6 | return Object.keys(this.$listeners).reduce((listenersWithOn, key) => { 7 | listenersWithOn['on' + bigCamelize(key)] = this.$listeners[key] 8 | 9 | return listenersWithOn 10 | }, {}) 11 | }, 12 | }, 13 | } 14 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/utils/mixins/slots.js: -------------------------------------------------------------------------------- 1 | export const SlotsMixin = { 2 | methods: { 3 | slots(name = 'default', props) { 4 | const { $slots, $scopedSlots } = this 5 | const scopedSlot = $scopedSlots[name] 6 | 7 | return scopedSlot ? scopedSlot(props) : $slots[name] 8 | }, 9 | 10 | hasSlots(name = 'default') { 11 | return this.$scopedSlots[name] || this.$slots[name] 12 | }, 13 | }, 14 | } 15 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/utils/mixins/teleport.js: -------------------------------------------------------------------------------- 1 | export const createTeleportMixin = { 2 | data: () => ({ 3 | teleportDisabled: false, 4 | }), 5 | 6 | activated() { 7 | this.teleportDisabled = false 8 | }, 9 | 10 | deactivated() { 11 | this.teleportDisabled = true 12 | }, 13 | } 14 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/src/utils/mixins/zIndex.js: -------------------------------------------------------------------------------- 1 | import context from '../../context' 2 | 3 | export function createZIndexMixin(state, count = 1) { 4 | return { 5 | data: () => ({ 6 | zIndex: context.zIndex, 7 | }), 8 | 9 | watch: { 10 | [state]: { 11 | handler(newValue) { 12 | if (newValue) { 13 | context.zIndex += count 14 | this.zIndex = context.zIndex 15 | } 16 | }, 17 | immediate: true, 18 | }, 19 | }, 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esnext", 4 | "moduleResolution": "node", 5 | "strict": true, 6 | "downlevelIteration": true, 7 | "declaration": true, 8 | "skipLibCheck": true, 9 | "esModuleInterop": true, 10 | "allowJs": true, 11 | "lib": ["esnext", "dom"], 12 | "allowSyntheticDefaultImports": true, 13 | "jsx": "preserve", 14 | "isolatedModules": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/appBar.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface AppBarProps { 4 | color?: string 5 | textColor?: string 6 | title?: string 7 | titlePosition?: 'left' | 'center' | 'right' 8 | elevation?: boolean 9 | } 10 | 11 | export class AppBar extends VarComponent { 12 | $props: AppBarProps 13 | } 14 | 15 | export class _AppBarComponent extends AppBar {} 16 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/backTop.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface BackTopProps { 4 | visibilityHeight?: number | string 5 | duration?: number 6 | target?: string | HTMLElement 7 | right?: number | string 8 | bottom?: number | string 9 | onClick?: (e: MouseEvent) => void 10 | } 11 | 12 | export class BackTop extends VarComponent { 13 | $props: BackTopProps 14 | } 15 | 16 | export class _BackTopComponent extends BackTop {} 17 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/badge.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface BadgeProps { 4 | type?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger' 5 | hidden?: boolean 6 | dot?: boolean 7 | value?: string | number 8 | maxValue?: string | number 9 | color?: string 10 | position?: 'right-top' | 'right-bottom' | 'left-top' | 'left-bottom' 11 | icon?: string 12 | } 13 | 14 | export class Badge extends VarComponent { 15 | $props: BadgeProps 16 | } 17 | 18 | export class _BadgeComponent extends Badge {} 19 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/bottomNavigation.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | import { ButtonProps } from './button' 3 | 4 | export interface BottomNavigationProps { 5 | active?: number | string 6 | fixed?: boolean 7 | border?: boolean 8 | zIndex?: number | string 9 | activeColor?: string 10 | inactiveColor?: string 11 | fabProps?: Partial 12 | onChange?: (active: string | number) => void 13 | 'onUpdate:active'?: (active: string | number) => void 14 | onBeforeChange?: (active: string | number) => boolean | Promise 15 | onFabClick?: () => void 16 | } 17 | 18 | export class BottomNavigation extends VarComponent { 19 | $props: BottomNavigationProps 20 | } 21 | 22 | export class _BottomNavigationComponent extends BottomNavigation {} 23 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/bottomNavigationItem.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | import { BadgeProps } from './badge' 3 | 4 | export interface BottomNavigationItemProps { 5 | name?: string 6 | icon?: string 7 | label?: string 8 | namespace?: string 9 | badge?: boolean | BadgeProps 10 | onClick?: (active: string | number) => void 11 | } 12 | 13 | export class BottomNavigationItem extends VarComponent { 14 | $props: BottomNavigationItemProps 15 | } 16 | 17 | export class _BottomNavigationItemComponent extends BottomNavigationItem {} 18 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/card.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface CardProps { 4 | src?: string 5 | fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' 6 | height?: string | number 7 | alt?: string 8 | title?: string 9 | subtitle?: string 10 | description?: string 11 | elevation?: string | number 12 | ripple?: boolean 13 | onClick?: (e: Event) => void 14 | } 15 | 16 | export class Card extends VarComponent { 17 | $props: CardProps 18 | } 19 | 20 | export class _CardComponent extends Card {} 21 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/cell.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface CellProps { 4 | title?: string | number 5 | icon?: string 6 | desc?: string 7 | border?: boolean 8 | iconClass?: string 9 | titleClass?: string 10 | descClass?: string 11 | extraClass?: string 12 | } 13 | 14 | export class Cell extends VarComponent { 15 | $props: CellProps 16 | } 17 | 18 | export class _CellComponent extends Cell {} 19 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/checkboxGroup.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export type CheckboxGroupValidateTriggers = 'onChange' 4 | 5 | export interface CheckboxGroupProps { 6 | value?: any[] 7 | max?: string | number 8 | direction?: 'horizontal' | 'vertical' 9 | validateTrigger?: Array 10 | rules?: Array<(value: any) => any> 11 | onChange?: (value: Array) => void 12 | onInput?: (value: Array) => void 13 | } 14 | 15 | export class CheckboxGroup extends VarComponent { 16 | $props: CheckboxGroupProps 17 | 18 | validate(): Promise 19 | 20 | resetValidation(): void 21 | 22 | reset(): void 23 | 24 | checkAll(): any 25 | 26 | inverseAll(): any 27 | } 28 | 29 | export class _CheckboxGroupComponent extends CheckboxGroup {} 30 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/chip.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface ChipProps { 4 | type?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger' 5 | size?: 'normal' | 'mini' | 'small' | 'large' 6 | color?: string 7 | textColor?: string 8 | iconName?: string 9 | plain?: boolean 10 | round?: boolean 11 | block?: boolean 12 | closable?: boolean 13 | } 14 | 15 | export class Chip extends VarComponent { 16 | $props: ChipProps 17 | } 18 | 19 | export class _ChipComponent extends Chip {} 20 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/col.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export type SizeDescriptor = { 4 | span?: number | string 5 | offset?: number | string 6 | } 7 | 8 | export interface ColProps { 9 | span?: string | number 10 | offset?: string | number 11 | xs?: string | number | SizeDescriptor | undefined 12 | sm?: string | number | SizeDescriptor | undefined 13 | md?: string | number | SizeDescriptor | undefined 14 | lg?: string | number | SizeDescriptor | undefined 15 | xl?: string | number | SizeDescriptor | undefined 16 | onClick?: (e: Event) => void 17 | } 18 | 19 | export class Col extends VarComponent { 20 | $props: ColProps 21 | } 22 | 23 | export class _ColComponent extends Col {} 24 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/collapse.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export type CollapseModelValue = null | string | number | Array 4 | 5 | export interface CollapseProps { 6 | value?: CollapseModelValue 7 | accordion?: boolean 8 | offset?: boolean 9 | onChange?: (value: CollapseModelValue) => void 10 | onInput?: (value: CollapseModelValue) => void 11 | } 12 | 13 | export class Collapse extends VarComponent { 14 | $props: CollapseProps 15 | } 16 | 17 | export class _CollapseComponent extends Collapse {} 18 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/collapseItem.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface CollapseItemProps { 4 | name?: string | number 5 | title?: string 6 | icon?: string 7 | disabled?: boolean 8 | } 9 | 10 | export class CollapseItem extends VarComponent { 11 | $props: CollapseItemProps 12 | } 13 | 14 | export class _CollapseItemComponent extends CollapseItem {} 15 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/countdown.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export type TimeData = { 4 | days: number 5 | hours: number 6 | minutes: number 7 | seconds: number 8 | milliseconds: number 9 | } 10 | 11 | export interface CountdownProps { 12 | time?: string | number 13 | format?: string 14 | autoStart?: boolean 15 | onEnd?: () => void 16 | onChange?: (value: TimeData) => void 17 | } 18 | 19 | export class Countdown extends VarComponent { 20 | $props: CountdownProps 21 | 22 | start(): void 23 | 24 | pause(): void 25 | 26 | reset(): void 27 | } 28 | 29 | export class _CountdownComponent extends Countdown {} 30 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/datePicker.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface DatePickerProps { 4 | value: string | Array 5 | type?: 'date' | 'month' 6 | allowedDates?: (val: string) => boolean 7 | color?: string 8 | headerColor?: string 9 | shadow?: boolean 10 | firstDayOfWeek?: string | number 11 | min?: string 12 | max?: string 13 | showCurrent?: boolean 14 | readonly?: boolean 15 | multiple?: boolean 16 | range?: boolean 17 | touchable?: boolean 18 | onChange?: (value: string | string[]) => void 19 | onInput?: (value: string | string[]) => void 20 | } 21 | 22 | export class DatePicker extends VarComponent { 23 | $props: DatePickerProps 24 | } 25 | 26 | export class _DatePickerComponent extends DatePicker {} 27 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/divider.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface DividerProps { 4 | inset?: boolean | number 5 | vertical?: boolean 6 | description?: string 7 | margin?: string 8 | dashed?: boolean 9 | } 10 | 11 | export class Divider extends VarComponent { 12 | $props: DividerProps 13 | } 14 | 15 | export class _DividerComponent extends Divider {} 16 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/form.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface FormProps { 4 | disabled?: boolean 5 | readonly?: boolean 6 | } 7 | 8 | export class Form extends VarComponent { 9 | $props: FormProps 10 | 11 | validate(): Promise 12 | 13 | resetValidation(): void 14 | 15 | reset(): void 16 | } 17 | 18 | export class _FormComponent extends Form {} 19 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/icon.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface IconProps { 4 | name?: string 5 | size?: string | number 6 | color?: string 7 | namespace?: string 8 | transition?: string | number 9 | onClick?: () => (event: Event) => void 10 | } 11 | 12 | export class Icon extends VarComponent { 13 | $props: IconProps 14 | } 15 | 16 | export class _IconComponent extends Icon {} 17 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/image.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface ImageProps { 4 | src?: string 5 | fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' 6 | alt?: string 7 | width?: string | number 8 | height?: string | number 9 | radius?: string | number 10 | loading?: string 11 | error?: string 12 | lazy?: boolean 13 | ripple?: boolean 14 | block?: boolean 15 | onClick?: (e: Event) => void 16 | onLoad?: (e: Event) => void 17 | onError?: (e: Event) => void 18 | } 19 | 20 | export class Image extends VarComponent { 21 | $props: ImageProps 22 | } 23 | 24 | export class _ImageComponent extends Image {} 25 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/indexAnchor.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface IndexAnchorProps { 4 | index: string | number 5 | } 6 | 7 | export class IndexAnchor extends VarComponent { 8 | $props: IndexAnchorProps 9 | } 10 | 11 | export class _IndexAnchorComponent extends IndexAnchor {} 12 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/indexBar.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface IndexBarProps { 4 | sticky?: boolean 5 | stickyOffsetTop?: number 6 | hideList?: boolean 7 | cssMode?: boolean 8 | zIndex?: number | string 9 | highlightColor?: string 10 | duration?: number | string 11 | onClick?: (value: string | number) => void 12 | onChange?: (value: string | number) => void 13 | } 14 | 15 | export class IndexBar extends VarComponent { 16 | $props: IndexBarProps 17 | 18 | scrollTo: (index: number | string) => void 19 | } 20 | 21 | export class _IndexBarComponent extends IndexBar {} 22 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/lazy.d.ts: -------------------------------------------------------------------------------- 1 | import { VarDirective } from './varDirective' 2 | 3 | export class Lazy extends VarDirective {} 4 | 5 | export class _LazyComponent extends Lazy {} 6 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/list.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface LoadingProps { 4 | loading?: boolean 5 | immediateCheck?: boolean 6 | finished?: boolean 7 | error?: boolean 8 | offset?: 'String' | 'Number' 9 | loadingText?: string 10 | finishedText?: string 11 | errorText?: string 12 | 'onUpdate:loading'?: () => void 13 | 'onUpdate:error'?: () => void 14 | } 15 | 16 | export class List extends VarComponent { 17 | $props: ListProps 18 | } 19 | 20 | export class _List extends List {} 21 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/loading.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface LoadingProps { 4 | type?: 'circle' | 'wave' | 'cube' | 'rect' | 'disappear' 5 | radius?: string | number 6 | size?: 'normal' | 'mini' | 'small' | 'large' 7 | color?: string 8 | description?: string 9 | show?: boolean 10 | } 11 | 12 | export class Loading extends VarComponent { 13 | $props: LoadingProps 14 | } 15 | 16 | export class _LoadingComponent extends Loading {} 17 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/menu.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface MenuProps { 4 | show?: boolean 5 | alignment?: 'top' | 'bottom' 6 | offsetX?: string | number 7 | offsetY?: string | number 8 | onOpen?: () => void 9 | onOpened?: () => void 10 | onClose?: () => void 11 | onClosed?: () => void 12 | 'onUpdate:show'?: (show: boolean) => void 13 | } 14 | 15 | export class Menu extends VarComponent { 16 | $props: MenuProps 17 | 18 | resize(): void 19 | } 20 | 21 | export class _MenuComponent extends Menu {} 22 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/option.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface OptionProps { 4 | label?: any 5 | value?: any 6 | } 7 | 8 | export class Option extends VarComponent { 9 | $props: OptionProps 10 | } 11 | 12 | export class _OptionComponent extends Option {} 13 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/pagination.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | type Range = number[] 4 | 5 | export interface PaginationProps { 6 | current?: string | number 7 | size?: string | number 8 | total?: string | number 9 | maxPagerCount?: number 10 | disabled?: boolean 11 | simple?: boolean 12 | showSizeChanger?: boolean 13 | showQuickJumper?: boolean 14 | sizeOption?: Array 15 | showTotal?: (total: number, range: Range) => string 16 | onChange?: (current: number, size: number) => void 17 | 'onUpdate:current': (current: number) => void 18 | 'onUpdate:size': (size: number) => void 19 | } 20 | 21 | export class Pagination extends VarComponent { 22 | $props: PaginationProps 23 | } 24 | 25 | export class _PaginationComponent extends Pagination {} 26 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/progress.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface ProgressProps { 4 | mode?: 'linear' | 'circle' 5 | lineWidth?: string | number 6 | color?: string 7 | trackColor?: string 8 | ripple?: boolean 9 | showAction?: boolean 10 | showTrack?: boolean 11 | value?: number | string 12 | size?: number 13 | rotate?: number 14 | } 15 | 16 | export class Progress extends VarComponent { 17 | $props: ProgressProps 18 | } 19 | 20 | export class _ProgressComponent extends Progress {} 21 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/pullRefresh.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface PullRefreshProps { 4 | value?: boolean 5 | disabled?: boolean 6 | animationDuration?: number | string 7 | successDuration?: number | string 8 | bgColor?: string 9 | successBgColor?: string 10 | color?: string 11 | successColor?: string 12 | onRefresh: () => void 13 | onInput?: (value: boolean) => void 14 | } 15 | 16 | export class PullRefresh extends VarComponent { 17 | $props: PullRefreshProps 18 | } 19 | 20 | export class _PullRefreshComponent extends PullRefresh {} 21 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/radioGroup.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export type RadioGroupValidateTriggers = 'onChange' 4 | 5 | export interface RadioGroupProps { 6 | value?: any[] 7 | direction?: 'horizontal' | 'vertical' 8 | validateTrigger?: Array 9 | rules?: Array<(value: any) => any> 10 | onChange?: (value: Array) => void 11 | onInput?: (value: Array) => void 12 | } 13 | 14 | export class RadioGroup extends VarComponent { 15 | $props: RadioGroupProps 16 | 17 | validate(): Promise 18 | 19 | resetValidation(): void 20 | 21 | reset(): void 22 | } 23 | 24 | export class _RadioGroupComponent extends RadioGroup {} 25 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/ripple.d.ts: -------------------------------------------------------------------------------- 1 | import { VarDirective } from './varDirective' 2 | 3 | export class Ripple extends VarDirective {} 4 | 5 | export class _RippleComponent extends Ripple {} 6 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/row.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface RowProps { 4 | gutter?: string | number 5 | justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' 6 | align?: 'flex-start' | 'center' | 'flex-end' 7 | onClick?: (e: Event) => void 8 | } 9 | 10 | export class Row extends VarComponent { 11 | $props: RowProps 12 | } 13 | 14 | export class _RowComponent extends Row {} 15 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/skeleton.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface SkeletonProps { 4 | loading?: boolean 5 | title?: boolean 6 | avatar?: boolean 7 | card?: boolean 8 | fullscreen?: boolean 9 | fullscreenZIndex?: string | number 10 | titleWidth?: string | number 11 | avatarSize?: string | number 12 | cardHeight?: string | number 13 | rows?: string | number 14 | rowsWidth?: (string | number)[] 15 | } 16 | 17 | export class Skeleton extends VarComponent { 18 | $props: SkeletonProps 19 | } 20 | 21 | export class _SkeletonComponent extends Skeleton {} 22 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/step.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface StepProps { 4 | activeIcon?: string 5 | currentIcon?: string 6 | inactiveIcon?: string 7 | } 8 | 9 | export class Step extends VarComponent { 10 | $props: StepProps 11 | } 12 | 13 | export class _StepComponent extends Step {} 14 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/steps.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface StepsProps { 4 | active?: string | number 5 | direction?: 'horizontal' | 'vertical' 6 | activeColor?: string 7 | inactiveColor?: string 8 | onClickStep?: (index: number) => void 9 | } 10 | 11 | export class Steps extends VarComponent { 12 | $props: StepsProps 13 | } 14 | 15 | export class _StepsComponent extends Steps {} 16 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/sticky.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface StickyProps { 4 | offsetTop?: string | number 5 | zIndex?: string | number 6 | cssMode?: boolean 7 | disabled?: boolean 8 | onScroll?: (offsetTop: number, isFixed: boolean) => void 9 | } 10 | 11 | export class Sticky extends VarComponent { 12 | $props: StickyProps 13 | } 14 | 15 | export class _StickyComponent extends Sticky {} 16 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/swipe.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface SwipeProps { 4 | loop?: boolean 5 | autoplay?: string | number 6 | duration?: string | number 7 | initialIndex?: string | number 8 | indicator?: boolean 9 | indicatorColor?: string 10 | vertical?: boolean 11 | touchable?: boolean 12 | onChange?: (index: number) => void 13 | } 14 | 15 | export class Swipe extends VarComponent { 16 | $props: SwipeProps 17 | 18 | resize(): void 19 | 20 | prev(): void 21 | 22 | next(): void 23 | 24 | to(index: number): void 25 | } 26 | 27 | export class _SwipeComponent extends Swipe {} 28 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/swipeItem.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export class SwipeItem extends VarComponent {} 4 | 5 | export class _SwipeItemComponent extends SwipeItem {} 6 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/switch.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface SwitchProps { 4 | value?: any 5 | activeValue?: any 6 | inactiveValue?: any 7 | disabled?: boolean 8 | readonly?: boolean 9 | loading?: boolean 10 | ripple?: boolean 11 | color?: string 12 | loadingColor?: string 13 | closeColor?: string 14 | size?: string | number 15 | rules?: Array<(value: any) => any> 16 | onClick?: (event: MouseEvent) => void 17 | onChange?: (value: boolean) => void 18 | onInput?: (value: boolean) => void 19 | } 20 | 21 | export class Switch extends VarComponent { 22 | $props: SwitchProps 23 | } 24 | 25 | export class _SwitchComponent extends Switch {} 26 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/tab.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface TabProps { 4 | name?: string | number 5 | disabled?: boolean 6 | onClick?: (active: string | number, e: Event) => void 7 | } 8 | 9 | export class Tab extends VarComponent { 10 | $props: TabProps 11 | } 12 | 13 | export class _TabComponent extends Tab {} 14 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/tabItem.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface TabItemProps { 4 | name?: string | number 5 | } 6 | 7 | export class TabItem extends VarComponent { 8 | $props: TabItemProps 9 | } 10 | 11 | export class _TabItemComponent extends TabItem {} 12 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/table.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface TableProps { 4 | fullWidth?: string | number 5 | } 6 | 7 | export class Table extends VarComponent { 8 | $props: TableProps 9 | } 10 | 11 | export class _TableComponent extends Table {} 12 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/tabsItems.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export interface TabsItemsProps { 4 | active?: string | number 5 | 'onUpdate:active'?: (active: string | number) => void 6 | } 7 | 8 | export class TabsItems extends VarComponent { 9 | $props: TabsItemsProps 10 | } 11 | 12 | export class _TabsItemsComponent extends TabsItems {} 13 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/timePicker.d.ts: -------------------------------------------------------------------------------- 1 | import { VarComponent } from './varComponent' 2 | 3 | export type AllowedTime = { 4 | hours?: (hour: number) => boolean 5 | minutes?: (minute: number) => boolean 6 | seconds?: (second: number) => boolean 7 | } 8 | 9 | export interface TimePickerProps { 10 | value?: string 11 | shadow?: boolean 12 | color?: string 13 | headerColor?: string 14 | allowedTime?: AllowedTime 15 | format?: 'ampm' | '24hr' 16 | min?: string 17 | max?: string 18 | useSeconds?: boolean 19 | readonly?: boolean 20 | onChange?: (value: string) => void 21 | onInput?: (value: string) => void 22 | } 23 | 24 | export class TimePicker extends VarComponent { 25 | $props: TimePickerProps 26 | } 27 | 28 | export class _TimePickerComponent extends TimePicker {} 29 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/varComponent.d.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | 3 | export class VarComponent { 4 | static name: string 5 | 6 | static install(app: VueConstructor): void 7 | } 8 | -------------------------------------------------------------------------------- /packages/varlet-vue2-ui/types/varDirective.d.ts: -------------------------------------------------------------------------------- 1 | import type { VueConstructor } from 'vue' 2 | import { DirectiveBinding } from '@vue/runtime-core' 3 | 4 | export class VarDirective { 5 | static install(app: VueConstructor): void 6 | 7 | static mounted(el: HTMLElement, binding: DirectiveBinding): void 8 | 9 | static updated(el: HTMLElement, binding: DirectiveBinding): void 10 | 11 | static unmounted(el: HTMLElement, binding: DirectiveBinding): void 12 | } 13 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'packages/*' 3 | -------------------------------------------------------------------------------- /scripts/bootstrap.mjs: -------------------------------------------------------------------------------- 1 | import { buildCli, buildUI, runTask } from './build.mjs' 2 | ;(async () => { 3 | await runTask('cli', buildCli) 4 | await runTask('ui', buildUI) 5 | })() 6 | -------------------------------------------------------------------------------- /scripts/build.mjs: -------------------------------------------------------------------------------- 1 | import execa from 'execa' 2 | import ora from 'ora' 3 | import { resolve } from 'path' 4 | 5 | const CWD = process.cwd() 6 | const PKG_CLI = resolve(CWD, './packages/varlet-vue2-cli') 7 | const PKG_UI = resolve(CWD, './packages/varlet-vue2-ui') 8 | 9 | export const buildCli = () => execa('pnpm', ['build'], { cwd: PKG_CLI }) 10 | 11 | export const buildUI = (noUmd) => execa('pnpm', ['compile', noUmd ? '--noUmd' : ''], { cwd: PKG_UI }) 12 | 13 | export async function runTask(taskName, task) { 14 | const s = ora().start(`Building ${taskName}`) 15 | try { 16 | await task() 17 | s.succeed(`Build ${taskName} completed!`) 18 | } catch (e) { 19 | s.fail(`Build ${taskName} failed!`) 20 | console.error(e.toString()) 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /scripts/publish.mjs: -------------------------------------------------------------------------------- 1 | import { buildCli, buildUI, runTask } from './build.mjs' 2 | ;(async () => { 3 | await runTask('cli', buildCli) 4 | await runTask('ui', () => buildUI(false)) 5 | })() 6 | --------------------------------------------------------------------------------