├── .babelrc ├── .editorconfig ├── .eslintrc.js ├── .gitattributes ├── .github ├── CONTRIBUTING.md └── ISSUE_TEMPLATE.md ├── .gitignore ├── .gitmodules ├── .travis.yml ├── LICENSE ├── README.md ├── README.zh-CN.md ├── build ├── component.js ├── config.js ├── dev-server.js ├── locale.js ├── rewrite-font-url.js ├── strip-tags.js ├── utils.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── docs ├── App.vue ├── assets │ ├── aotu.png │ ├── aotu@2x.png │ ├── colors.png │ ├── favicon.png │ ├── feather.png │ ├── github.png │ ├── github@2x.png │ ├── icon-navigation-1.png │ ├── icon-navigation-2.png │ ├── icon-navigation-3.png │ ├── logo-at-large.svg │ ├── logo-at.svg │ ├── logo-at@2x.png │ ├── o2logo-doc.png │ ├── o2logo.png │ ├── o2logo@2x.png │ ├── o2logo_2.png │ ├── prototype-1.png │ ├── prototype-2.png │ ├── prototype-3.png │ ├── prototype-4.png │ └── style │ │ ├── docs.scss │ │ ├── index.scss │ │ └── mixin.scss ├── components │ ├── demobox.vue │ ├── footer.vue │ ├── header.vue │ ├── iconlist.vue │ └── sidebar.vue ├── directives │ └── clipboard.js ├── icons.json ├── index.html ├── main.js ├── markdown │ ├── en │ │ ├── alert.md │ │ ├── badge.md │ │ ├── breadcrumb.md │ │ ├── button.md │ │ ├── card.md │ │ ├── changelog.md │ │ ├── checkbox.md │ │ ├── collapse.md │ │ ├── color.md │ │ ├── design.md │ │ ├── dropdown.md │ │ ├── form.md │ │ ├── i18n.md │ │ ├── icon.md │ │ ├── input.md │ │ ├── inputnumber.md │ │ ├── installation.md │ │ ├── introduction.md │ │ ├── layout.md │ │ ├── loadingbar.md │ │ ├── menu.md │ │ ├── message.md │ │ ├── modal.md │ │ ├── notification.md │ │ ├── pagination.md │ │ ├── popover.md │ │ ├── progress.md │ │ ├── quickstart.md │ │ ├── radio.md │ │ ├── rate.md │ │ ├── select.md │ │ ├── slider.md │ │ ├── steps.md │ │ ├── switch.md │ │ ├── table.md │ │ ├── tabs.md │ │ ├── tag.md │ │ ├── textarea.md │ │ ├── timeline.md │ │ ├── tooltip.md │ │ └── typography.md │ └── zh │ │ ├── alert.md │ │ ├── badge.md │ │ ├── breadcrumb.md │ │ ├── button.md │ │ ├── card.md │ │ ├── changelog.md │ │ ├── checkbox.md │ │ ├── collapse.md │ │ ├── color.md │ │ ├── design.md │ │ ├── dropdown.md │ │ ├── form.md │ │ ├── i18n.md │ │ ├── icon.md │ │ ├── input.md │ │ ├── inputnumber.md │ │ ├── installation.md │ │ ├── introduction.md │ │ ├── layout.md │ │ ├── loadingbar.md │ │ ├── menu.md │ │ ├── message.md │ │ ├── modal.md │ │ ├── notification.md │ │ ├── pagination.md │ │ ├── popover.md │ │ ├── progress.md │ │ ├── quickstart.md │ │ ├── radio.md │ │ ├── rate.md │ │ ├── select.md │ │ ├── slider.md │ │ ├── steps.md │ │ ├── switch.md │ │ ├── table.md │ │ ├── tabs.md │ │ ├── tag.md │ │ ├── textarea.md │ │ ├── timeline.md │ │ ├── tooltip.md │ │ └── typography.md ├── router │ ├── index.js │ └── nav.config.yml ├── utils │ ├── collapse-transition.js │ ├── nodelist.js │ └── util.js └── views │ ├── docs-en.vue │ ├── docs.vue │ ├── guide-en.vue │ ├── guide.vue │ ├── index-en.vue │ ├── index.vue │ ├── resource-en.vue │ └── resource.vue ├── package-lock.json ├── package.json ├── src ├── components │ ├── alert │ │ ├── index.js │ │ └── src │ │ │ └── alert.vue │ ├── badge │ │ ├── index.js │ │ └── src │ │ │ └── badge.vue │ ├── breadcrumb-item │ │ └── index.js │ ├── breadcrumb │ │ ├── index.js │ │ └── src │ │ │ ├── breadcrumb-item.vue │ │ │ └── breadcrumb.vue │ ├── button-group │ │ └── index.js │ ├── button │ │ ├── index.js │ │ └── src │ │ │ ├── button-group.vue │ │ │ └── button.vue │ ├── card │ │ ├── index.js │ │ └── src │ │ │ └── card.vue │ ├── checkbox-group │ │ └── index.js │ ├── checkbox │ │ ├── index.js │ │ └── src │ │ │ ├── checkbox-group.vue │ │ │ └── checkbox.vue │ ├── collapse-item │ │ └── index.js │ ├── collapse │ │ ├── index.js │ │ └── src │ │ │ ├── collapse-item.vue │ │ │ └── collapse.vue │ ├── dialog │ │ └── index.js │ ├── dropdown-item │ │ └── index.js │ ├── dropdown-menu │ │ └── index.js │ ├── dropdown │ │ ├── index.js │ │ └── src │ │ │ ├── dropdown-item.vue │ │ │ ├── dropdown-menu.vue │ │ │ └── dropdown.vue │ ├── form │ │ ├── index.js │ │ └── src │ │ │ ├── form-item.vue │ │ │ └── form.vue │ ├── input-number │ │ ├── index.js │ │ └── src │ │ │ └── input-number.vue │ ├── input │ │ ├── index.js │ │ └── src │ │ │ └── input.vue │ ├── loading-bar │ │ ├── index.js │ │ └── src │ │ │ ├── loading-bar.js │ │ │ └── loading-bar.vue │ ├── menu-item-group │ │ └── index.js │ ├── menu-item │ │ └── index.js │ ├── menu │ │ ├── index.js │ │ └── src │ │ │ ├── menu-group.vue │ │ │ ├── menu-item.vue │ │ │ ├── menu.vue │ │ │ └── submenu.vue │ ├── message │ │ ├── index.js │ │ └── src │ │ │ ├── message.js │ │ │ └── message.vue │ ├── modal │ │ ├── index.js │ │ └── src │ │ │ ├── dialog.js │ │ │ └── modal.vue │ ├── notification │ │ ├── index.js │ │ └── src │ │ │ ├── notic.js │ │ │ └── notification.vue │ ├── option-group │ │ └── index.js │ ├── option │ │ └── index.js │ ├── pagination │ │ ├── index.js │ │ └── src │ │ │ └── pagination.vue │ ├── popover │ │ ├── index.js │ │ └── src │ │ │ └── popover.vue │ ├── progress │ │ ├── index.js │ │ └── src │ │ │ └── progress.vue │ ├── radio-button │ │ └── index.js │ ├── radio-group │ │ └── index.js │ ├── radio │ │ ├── index.js │ │ └── src │ │ │ ├── radio-button.vue │ │ │ ├── radio-group.vue │ │ │ └── radio.vue │ ├── rate │ │ ├── index.js │ │ └── src │ │ │ └── rate.vue │ ├── select │ │ ├── index.js │ │ └── src │ │ │ ├── dropdown.vue │ │ │ ├── option-group.vue │ │ │ ├── option.vue │ │ │ └── select.vue │ ├── slider │ │ ├── index.js │ │ └── src │ │ │ └── slider.vue │ ├── step │ │ └── index.js │ ├── steps │ │ ├── index.js │ │ └── src │ │ │ ├── step.vue │ │ │ └── steps.vue │ ├── submenu │ │ └── index.js │ ├── switch │ │ ├── index.js │ │ └── src │ │ │ └── switch.vue │ ├── tab-pane │ │ └── index.js │ ├── table │ │ ├── index.js │ │ └── src │ │ │ ├── render.js │ │ │ └── table.vue │ ├── tabs │ │ ├── index.js │ │ └── src │ │ │ ├── tab-pane.vue │ │ │ └── tabs.vue │ ├── tag │ │ ├── index.js │ │ └── src │ │ │ └── tag.vue │ ├── textarea │ │ ├── index.js │ │ └── src │ │ │ ├── textarea.vue │ │ │ └── utils.js │ ├── timeline-item │ │ └── index.js │ ├── timeline │ │ ├── index.js │ │ └── src │ │ │ ├── timeline-item.vue │ │ │ └── timeline.vue │ └── tooltip │ │ ├── index.js │ │ └── src │ │ └── tooltip.vue ├── directives │ └── clickoutside.js ├── index.js ├── locale │ ├── README.md │ ├── index.js │ └── lang │ │ ├── de.js │ │ ├── en-US.js │ │ ├── fa-IR.js │ │ ├── ko-KR.js │ │ ├── pt-BR.js │ │ └── zh-CN.js ├── mixins │ ├── emitter.js │ ├── locale.js │ └── popover.js └── utils │ ├── NodeList.js │ ├── collapse-transition.js │ └── util.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: 'o2team', 4 | // required to lint *.vue files 5 | plugins: [ 6 | 'html' 7 | ], 8 | // add your custom rules here 9 | 'rules': { 10 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 11 | 'prefer-spread': 'off', 12 | 'class-methods-use-this': 'off' 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Set the default behavior, in case people don't have core.autocrlf set. 2 | * text eol=lf 3 | 4 | # Denote all files that are truly binary and should not be modified. 5 | *.png binary 6 | *.jpg binary 7 | *.ttf binary 8 | *.woff binary 9 | *.eot binary 10 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 2 | # Contributing to AT-UI 3 | 4 | 5 | Thank you for choosing AT-UI. Please take a few moments to review the following guidelines to get you started. 6 | 7 | ## Team members 8 | 9 | AT-UI is developed as an open source project by [AOTU Labs](https://aotu.io/) 10 | 11 | ## Documentation 12 | 13 | The AT-UI documentation is maintained as a collection of Markdown files power by [vue-markdown-loader](https://www.npmjs.com/package/vue-markdown-loader). Any pull requests are highly appreciated. Especially for internationalization. 14 | 15 | ## Issue 16 | 17 | Issues are exclusively for bug reports, feature requests and design-related topics. A bug issue is a demonstrable problem that is caused by the code in the repository. Good bug reports are extremely helpful - thank you! 18 | 19 | Before submitting an issue, please check if similar questions have already been issued. 20 | 21 | ## Pull requests 22 | 23 | **Working on your first Pull Request?** You can learn how from this *free* series 24 | [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github) 25 | 26 | All pull requests are welcome. Thanks for taking the time to contribute. 27 | 28 | - Create an issue about the features, such as new components. 29 | - Fork the repo to your own account. 30 | - Clone your fork. 31 | - Create a new branch base on `dev`, if you want to add new component, the branch name should be formatted as `component-[Component Name]`. (e.g. `component-steps`) And the commit info should be formatted as `[Component Name]: Info about commit`. 32 | - Make sure that running `npm run prepublish` outputs the correct files. 33 | - Rebase before creating a PR to keep commit history clear. (Merge request to branch `dev`) 34 | - Provide some description about your PR. 35 | 36 | ## Develop 37 | 38 | Clone and install the respoitory. 39 | 40 | ```bash 41 | git clone git@github.com:AT-UI/at-ui.git 42 | 43 | npm install 44 | ``` 45 | 46 | Update submodule. 47 | 48 | > `at-ui-style` is a submodule of `at-ui`. You should run two commands: `git submodule init` to initialize your local configuration file, and `git submodule update` to fetch all the data. 49 | 50 | ```bash 51 | git submodule init 52 | git submodule update 53 | ``` 54 | 55 | Run the project. 56 | 57 | ```bash 58 | npm run dev 59 | 60 | # open http://localhost:7200/ 61 | ``` 62 | 63 | If you add new language config, please run the command `npm run build:locale` first. 64 | 65 | ```bash 66 | npm run build:locale 67 | ``` 68 | 69 | To build components 70 | 71 | ```bash 72 | npm run build:component 73 | ``` 74 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 29 | 30 | 31 | 32 | ### Steps to reproduce 33 | 34 | ### Which browser? 35 | 36 | 37 | ### What is expected? 38 | 39 | ### What is actually happening? 40 | 41 | 42 | ### Reproduction Link 43 | 44 | 45 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | test/unit/coverage 5 | test/e2e/reports 6 | .vscode 7 | dist/ 8 | test 9 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "src/stylesheet"] 2 | path = src/stylesheet 3 | url = https://github.com/AT-UI/at-ui-style.git 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: stable 3 | 4 | cache: 5 | directories: 6 | - node_modules 7 | 8 | git: 9 | submodules: false 10 | 11 | before_install: 12 | - sed -i 's/git@github.com:/https:\/\/github.com\//' .gitmodules 13 | - git submodule update --init --recursive 14 | - cd src/stylesheet/ 15 | - npm install 16 | - npm run build 17 | - cd ../.. 18 | 19 | install: 20 | - npm install 21 | 22 | script: 23 | - npm run dist 24 | 25 | after_script: 26 | - cd dist 27 | - git init 28 | - git config user.name "koppthe" 29 | - git config user.email "koppthe@gmail.com" 30 | - git add . 31 | - git commit -m "Update Document" 32 | - git push --force --quiet "https://${GITHUB_TOKEN}@${GH_REF}" master:gh-pages 33 | 34 | branches: 35 | only: 36 | - master 37 | 38 | env: 39 | global: 40 | - GH_REF: github.com/at-ui/at-ui.git 41 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2017 O2Team 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 |

6 | 7 | # AT UI 8 | 9 | [![NPM][npm-version-image]][npm-version-url] [![david-dm][david-dm-image]][david-dm-url] [![travis][travis-image]][travis-url] 10 | 11 | AT-UI is a modular front-end UI framework for developing fast and powerful web interfaces based on Vue.js. 12 | 13 | [中文 README](README.zh-CN.md) 14 | 15 | ## Features 16 | 17 | - Based on `Vue` 18 | - A npm + webpack + babel front-end development workflow 19 | - Support ES2015 20 | - CSS Style independent, make consistent user interfaces (See: [AT-UI-Style](https://github.com/at-ui/at-ui-style)) 21 | - Friendly API 22 | 23 | ## Environment Support 24 | 25 | - Modern browsers and Internet Explorer 9+ 26 | - [Electron](http://electron.atom.io/) 27 | - [NW.js](http://nwjs.io) 28 | 29 | ## Links 30 | 31 | - [Home Page](https://at-ui.github.io/at-ui/) 32 | - [Vue](https://vuejs.org/) 33 | - [Webpack](https://webpack.js.org/) 34 | - [AT-UI for Angular](https://github.com/icepoint0/at-angular) (Developed by [@icepoint0](https://github.com/icepoint0), Thanks for contribution) 35 | 36 | ## Install 37 | 38 | - Recommended use `npm` 39 | 40 | ```bash 41 | npm install at-ui 42 | ``` 43 | 44 | - Or using ` 48 | ``` 49 | 50 | ## Usage 51 | 52 | Because the style of `AT-UI` is independent. It's a separate project. So we should install `AT-UI-Style` in need before we use `AT-UI`. Use npm or script tag according to your preference. 53 | 54 | ```bash 55 | npm install at-ui-style 56 | ``` 57 | 58 | or 59 | 60 | ```html 61 | 62 | ``` 63 | 64 | ## Contribution 65 | 66 | Finding bugs, sending pull requests or improving our docs - any contribution is welcome and highly appreciated. To get started, head over to our [contribution guidelines](https://github.com/at-ui/at-ui/blob/master/.github/CONTRIBUTING.md). Thanks! 67 | 68 | ## License 69 | 70 | MIT 71 | 72 | 73 | [npm-version-image]: https://img.shields.io/npm/v/at-ui.svg?style=flat-square 74 | [npm-version-url]: https://www.npmjs.com/package/at-ui 75 | [david-dm-image]: https://david-dm.org/AT-UI/at-ui.svg?style=flat-square 76 | [david-dm-url]: https://david-dm.org/AT-UI/at-ui 77 | [travis-image]: https://img.shields.io/travis/AT-UI/at-ui/master.svg?style=flat-square 78 | [travis-url]: https://travis-ci.org/AT-UI/at-ui 79 | -------------------------------------------------------------------------------- /README.zh-CN.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 |

6 | 7 | # AT UI 8 | 9 | [![NPM][npm-version-image]][npm-version-url] [![david-dm][david-dm-image]][david-dm-url] [![travis][travis-image]][travis-url] 10 | 11 | 一款基于 `Vue.js 2.0` 的前端 UI 组件库，主要用于快速开发 PC 网站产品 12 | 13 | ## 特性 14 | 15 | - 基于 `Vue` 开发的 UI 组件 16 | - 基于 npm + webpack + babel 的工作流，支持 ES2015 17 | - CSS 样式独立，保证不同的框架实现都能保持统一的 UI 风格（ 详见：[AT-UI Style](https://github.com/at-ui/at-ui-style) ） 18 | - 提供友好的 API，可灵活的使用组件 19 | 20 | ## 支持环境 21 | 22 | - 现代浏览器和 IE9 及以上 23 | - [Electron](http://electron.atom.io/) 24 | - [NW.js](http://nwjs.io) 25 | 26 | ## 相关链接 27 | 28 | - [主页](https://at-ui.github.io/at-ui/) 29 | - [Vue](https://vuejs.org/) 30 | - [Webpack](https://webpack.js.org/) 31 | - [AT-UI for Angular](https://github.com/icepoint0/at-angular) （由 [@icepoint0](https://github.com/icepoint0) 同学开发，感谢贡献） 32 | 33 | ## 安装 34 | 35 | - 推荐使用 npm 安装 36 | 37 | ```bash 38 | npm install at-ui 39 | ``` 40 | 41 | - 也可以使用 ` 45 | ``` 46 | 47 | ## 使用 48 | 49 | 由于 `AT-UI` 的样式独立成了单独的项目，所以在使用 `AT-UI` 前，需要安装 `at-ui-style`。可采用 npm 的方式安装，或者使用 ` 16 | -------------------------------------------------------------------------------- /docs/assets/aotu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AT-UI/at-ui/417a6f9e4771960f4f83caf483971c871e1ede7c/docs/assets/aotu.png -------------------------------------------------------------------------------- /docs/assets/aotu@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AT-UI/at-ui/417a6f9e4771960f4f83caf483971c871e1ede7c/docs/assets/aotu@2x.png -------------------------------------------------------------------------------- /docs/assets/colors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AT-UI/at-ui/417a6f9e4771960f4f83caf483971c871e1ede7c/docs/assets/colors.png -------------------------------------------------------------------------------- /docs/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AT-UI/at-ui/417a6f9e4771960f4f83caf483971c871e1ede7c/docs/assets/favicon.png -------------------------------------------------------------------------------- /docs/assets/feather.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AT-UI/at-ui/417a6f9e4771960f4f83caf483971c871e1ede7c/docs/assets/feather.png -------------------------------------------------------------------------------- /docs/assets/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AT-UI/at-ui/417a6f9e4771960f4f83caf483971c871e1ede7c/docs/assets/github.png -------------------------------------------------------------------------------- /docs/assets/github@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AT-UI/at-ui/417a6f9e4771960f4f83caf483971c871e1ede7c/docs/assets/github@2x.png -------------------------------------------------------------------------------- /docs/assets/icon-navigation-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AT-UI/at-ui/417a6f9e4771960f4f83caf483971c871e1ede7c/docs/assets/icon-navigation-1.png -------------------------------------------------------------------------------- /docs/assets/icon-navigation-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AT-UI/at-ui/417a6f9e4771960f4f83caf483971c871e1ede7c/docs/assets/icon-navigation-2.png -------------------------------------------------------------------------------- /docs/assets/icon-navigation-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AT-UI/at-ui/417a6f9e4771960f4f83caf483971c871e1ede7c/docs/assets/icon-navigation-3.png -------------------------------------------------------------------------------- /docs/assets/logo-at-large.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | a copy 4 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/assets/logo-at.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | a copy 4 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/assets/logo-at@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AT-UI/at-ui/417a6f9e4771960f4f83caf483971c871e1ede7c/docs/assets/logo-at@2x.png -------------------------------------------------------------------------------- /docs/assets/o2logo-doc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AT-UI/at-ui/417a6f9e4771960f4f83caf483971c871e1ede7c/docs/assets/o2logo-doc.png -------------------------------------------------------------------------------- /docs/assets/o2logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AT-UI/at-ui/417a6f9e4771960f4f83caf483971c871e1ede7c/docs/assets/o2logo.png -------------------------------------------------------------------------------- /docs/assets/o2logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AT-UI/at-ui/417a6f9e4771960f4f83caf483971c871e1ede7c/docs/assets/o2logo@2x.png -------------------------------------------------------------------------------- /docs/assets/o2logo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AT-UI/at-ui/417a6f9e4771960f4f83caf483971c871e1ede7c/docs/assets/o2logo_2.png -------------------------------------------------------------------------------- /docs/assets/prototype-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AT-UI/at-ui/417a6f9e4771960f4f83caf483971c871e1ede7c/docs/assets/prototype-1.png -------------------------------------------------------------------------------- /docs/assets/prototype-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AT-UI/at-ui/417a6f9e4771960f4f83caf483971c871e1ede7c/docs/assets/prototype-2.png -------------------------------------------------------------------------------- /docs/assets/prototype-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AT-UI/at-ui/417a6f9e4771960f4f83caf483971c871e1ede7c/docs/assets/prototype-3.png -------------------------------------------------------------------------------- /docs/assets/prototype-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AT-UI/at-ui/417a6f9e4771960f4f83caf483971c871e1ede7c/docs/assets/prototype-4.png -------------------------------------------------------------------------------- /docs/assets/style/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin image2x-background($name, $full-size: false) { 2 | $img-path: '../assets/' + $name + '.png'; 3 | $img2x-path: '../assets/' + $name + '@2x.png'; 4 | background-image: url($img-path); 5 | background-image: -webkit-image-set(url($img-path) 1x, url($img2x-path) 2x); 6 | background-repeat: no-repeat; 7 | 8 | @if $full-size { 9 | background-size: 100% auto; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /docs/components/demobox.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 41 | 42 | 63 | -------------------------------------------------------------------------------- /docs/components/footer.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 91 | -------------------------------------------------------------------------------- /docs/components/iconlist.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 35 | 36 | 60 | -------------------------------------------------------------------------------- /docs/directives/clipboard.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vue clipboard base on clipboard.js 3 | * https://github.com/zhuowenli/vue-clipboards/blob/master/src/vue-clipboards.js 4 | */ 5 | const Clipboard = require('clipboard') 6 | 7 | if (!Clipboard) { 8 | throw new Error('[vue-clipboard] Cannot locate clipboard.js') 9 | } 10 | 11 | function isDom (obj) { 12 | return typeof window.HTMLElement === 'object' 13 | ? obj instanceof window.HTMLElement 14 | : obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string' 15 | } 16 | 17 | export default function (Vue) { 18 | const clipboard = {} 19 | const DEFAULTKEY = 'DEFAULT' 20 | 21 | Vue.directive('clipboard', { 22 | bind (el, binding, vnode) { 23 | const option = {} 24 | const key = (vnode.key || vnode.key === 0) ? vnode.key : DEFAULTKEY 25 | let text = binding.value 26 | let $parent = null 27 | 28 | if (text) { 29 | if (typeof text === 'function') { 30 | text = text() 31 | } 32 | 33 | if (/(string|number)/.test(typeof text)) { 34 | option.text = () => text 35 | } else { 36 | throw new Error('[vue-clipboard] Invalid value.') 37 | } 38 | } 39 | 40 | if (vnode.data.attrs && vnode.data.attrs.model) { 41 | $parent = isDom(vnode.data.attrs.model) ? vnode.data.attrs.model : document.querySelector(vnode.data.attrs.model) 42 | } 43 | 44 | if (vnode.elm.offsetParent) { 45 | option.container = vnode.elm.offsetParent 46 | } else if (isDom($parent)) { 47 | option.container = $parent 48 | } else { 49 | option.container = el.parentElement || document.body 50 | } 51 | 52 | clipboard[key] = new Clipboard(el, option) 53 | 54 | const { comoponentOptions, data } = vnode 55 | const listeners = comoponentOptions ? comoponentOptions.listeners : null 56 | const on = data ? data.on : null 57 | const events = listeners || on 58 | 59 | if (events && typeof events === 'object' && Object.keys(events).length) { 60 | Object.keys(events).map( 61 | cb => clipboard[key].on(cb, events[cb].fn || events[cb].fns) 62 | ) 63 | } 64 | 65 | return clipboard[key] 66 | }, 67 | unbind (vnode) { 68 | const key = (vnode.key || vnode.key === 0) ? vnode.key : DEFAULTKEY 69 | 70 | if (clipboard[key] && clipboard[key].destroy) { 71 | clipboard[key].destroy() 72 | clipboard[key] = null 73 | } 74 | }, 75 | update (el, binding, vnode) { 76 | binding.def.unbind(vnode) 77 | binding.def.bind(el, binding, vnode) 78 | } 79 | }) 80 | } 81 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AT UI | O2Team 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /docs/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueI18n from 'vue-i18n' 3 | 4 | import App from './App' 5 | import router from './router' 6 | import DemoBox from './components/demobox' 7 | import IconList from './components/iconlist' 8 | import VueClipboard from './directives/clipboard' 9 | import AtUI from 'at-ui-lib' 10 | import zhLocale from 'at-ui-locale-zh' 11 | import enLocale from 'at-ui-locale-en' 12 | import 'at-ui-style' 13 | 14 | Vue.use(VueI18n) 15 | Vue.use(AtUI) 16 | Vue.use(VueClipboard) 17 | Vue.component('demo-box', DemoBox) 18 | Vue.component('icon-list', IconList) 19 | 20 | const matchArr = window.location.href.match(/#\/(zh|en)/) 21 | const urlLang = matchArr && matchArr[1] 22 | let navigatorLang = window.navigator.language.slice(0, 2) 23 | 24 | if (['en', 'zh'].indexOf(navigatorLang) <= -1) { 25 | navigatorLang = '' 26 | } 27 | 28 | const userLang = urlLang || window.localStorage.getItem('at-ui-language') || navigatorLang || 'zh' 29 | 30 | const i18n = new VueI18n({ 31 | locale: userLang, 32 | fallbackLocale: 'en', 33 | messages: { 34 | 'en': { 35 | ...enLocale 36 | }, 37 | 'zh': { 38 | ...zhLocale 39 | } 40 | } 41 | }) 42 | 43 | AtUI.i18n((key, value) => i18n.t(key, value)) 44 | 45 | Vue.config.debug = process.env.NODE_ENV !== 'production' 46 | 47 | new Vue({ // eslint-disable-line 48 | el: '#app', 49 | router, 50 | i18n, 51 | ...App 52 | }) 53 | -------------------------------------------------------------------------------- /docs/markdown/en/breadcrumb.md: -------------------------------------------------------------------------------- 1 | 2 | # Breadcrumb 3 | 4 | ---- 5 | 6 | Breadcrumb displays the current location within a hierarchy. It provides a navigation to upper nodes. 7 | 8 | ## Basic 9 | 10 | Use `at-breadcrumb` and `at-breadcrumb-item` to create breadcrumbs and add links with `href` property. 11 | 12 | :::demo 13 | ```html 14 | 15 | Home 16 | Components 17 | Breadcrumb 18 | 19 | ``` 20 | ::: 21 | 22 | ## Vue Router Integration 23 | 24 | Used together with `vue-router`. Passed an `object` to `to` property. If you don't need a new history, add the `replace` property to `Breadcrumb Item`. 25 | 26 | :::demo 27 | ```html 28 | 29 | Home 30 | Layout 31 | Color 32 | Breadcrumb 33 | 34 | ``` 35 | ::: 36 | 37 | ## Configuring the Separator 38 | 39 | The separator can be customized by setting the `separator` property, which supports `HTML String`. 40 | 41 | :::demo 42 | ```html 43 | 44 | Home 45 | Components 46 | Breadcrumb 47 | 48 | ``` 49 | ::: 50 | 51 | 52 | ## Breadcrumb Props 53 | 54 | | Property | Description | Type | Accepted Values | Default | 55 | |---------- |-------------- |---------- |-------------------------------- |-------- | 56 | | separator | customize separator | String | - | `/` | 57 | 58 | ## BreadcrumbItem Props 59 | 60 | | Property | Description | Type | Accepted Values | Default | 61 | |---------- |-------------- |---------- |-------------------------------- |-------- | 62 | | href | link, same as the `href` property in `` | String | - | - | 63 | | to | the object of `vue-router`, same as the `to` property in `vue-router` | String / Object | - | - | 64 | | replace | whether to add new history when using `to` | Boolean | - | false | 65 | -------------------------------------------------------------------------------- /docs/markdown/en/checkbox.md: -------------------------------------------------------------------------------- 1 | 2 | # Checkbox 3 | 4 | ---- 5 | 6 | ## Basic 7 | 8 | Need to bind `model` separately for standalone use. 9 | 10 | :::demo 11 | ```html 12 | Shenzhen 13 |

{{ checkboxValue1 }}

14 | ``` 15 | ::: 16 | 17 | ## Disabled 18 | 19 | To make a checkbox as disabled, add `disabled` property to the `Checkbox`. 20 | 21 | :::demo 22 | ```html 23 | Shenzhen 24 | O2Team 25 | ``` 26 | ::: 27 | 28 | ## Checkbox Group 29 | 30 | Use `CheckboxGroup` combined with array to generate a combination. 31 | 32 | :::demo 33 | ```html 34 | 35 | Shenzhen 36 | Beijing 37 | Shanghai 38 | Guangzhou 39 | O2Team 40 | 41 |

{{ checkboxValue4 }}

42 | ``` 43 | ::: 44 | 45 | ## Checkbox Props 46 | 47 | | Property | Description | Type | Accepted values | Default | 48 | |---------- |-------------- |---------- |-------------------------------- |-------- | 49 | | label | value of selection | String | - | - | 50 | | disabled | disable selection or not | Boolean | - | false | 51 | | checked | whether the checkbox is selected | Boolean | - | false | 52 | 53 | ## Checkbox Events 54 | 55 | | Event Name | Description | Return Value | 56 | |---------- |-------------- |---------- | 57 | | on-change | Emitted when the state of selection is changed | the `lavel` value of selected button | 58 | 59 | ## Checkbox Group Events 60 | 61 | | Event Name | Description | Return Value | 62 | |---------- |-------------- |---------- | 63 | | on-change | Emitted when the state of selection is changed | the `lavel` value of selected button | 64 | 65 | 77 | -------------------------------------------------------------------------------- /docs/markdown/en/design.md: -------------------------------------------------------------------------------- 1 | 2 | # Design 3 | 4 | ---- 5 | 6 | Provide design resources and tools that shaped AT-UI. More of this is still being collected. 7 | 8 |
9 |
10 | 11 | 14 | 15 | Feather 16 | Icon Font and Sketch Template for Feather 17 | 18 | 19 |
20 |
21 | -------------------------------------------------------------------------------- /docs/markdown/en/form.md: -------------------------------------------------------------------------------- 1 | 2 | # Form 表单 3 | 4 | ---- 5 | 6 | ## 简单的表单 7 | 8 | 以下是简单的登录校验框 9 | 10 | :::demo 11 | 12 | ```html 13 | 14 | 15 | 16 | 19 | 20 | 21 | 22 | 23 | 26 | 27 | 28 | 29 | 登录 30 | 31 | 32 | ``` 33 | 34 | ::: 35 | 36 | ## 多个表单控件 37 | 38 | ## 表单布局 39 | 40 | 表单有三种布局方式，设置 `formLayout`，可以改变表单标签的布局方式 41 | 42 | ## 表单校验 43 | 44 | ## 自定义表单校验 45 | 46 | ## 弹出层中新建表单 47 | 48 | ## 动态增减表单项 49 | 50 | 96 | 97 | 102 | -------------------------------------------------------------------------------- /docs/markdown/en/i18n.md: -------------------------------------------------------------------------------- 1 | # Internationalization 2 | 3 | ---- 4 | 5 | The default language of `AT-UI` is `English`. If you want to use Chinese or other languages, you can follow instruction below. 6 | 7 | ## Compatible with vue-i18n 8 | 9 | ```js 10 | import Vue from 'vue' 11 | import AtUI from 'at-ui' 12 | import 'at-ui-style' // Import CSS 13 | import VueI18n from 'vue-i18n' 14 | import enLocale from 'at-ui/dist/locale/en-US' 15 | import zhLocale from 'at-ui/dist/locale/zh-CN' 16 | 17 | Vue.use(VueI18n) 18 | Vue.use(AtUI) 19 | 20 | const i18n = new VueI18n({ 21 | locale: 'en', 22 | fallbackLocale: 'en', 23 | messages: { 24 | 'en': { ...enLocale }, 25 | 'zh': { ...zhLocale } 26 | } 27 | }) 28 | 29 | AtUI.i18n((key, value) => i18n.t(key, value)) 30 | 31 | new Vue({ i18n }).$mount('#app') 32 | ``` 33 | 34 | ## Supported Languages 35 | 36 | | Language | Filename | 37 | |--- |--- | 38 | | Chinese | zh-CN | 39 | | English | en-US | 40 | | German | de | 41 | | Korean (South Korea) | ko-KR | 42 | | Portuguese (Brazil) | pt-BR | 43 | | Persian (Iran) | fa-IR | 44 | 45 | If your target language is not included, you are more than welcome to contribute: just add another language config to [here](https://github.com/AT-UI/at-ui/blob/master/src/locale/lang/) and create a pull request. 46 | -------------------------------------------------------------------------------- /docs/markdown/en/icon.md: -------------------------------------------------------------------------------- 1 | # Icon 2 | 3 | ---- 4 | 5 | For semantic vector graphics, `AT-UI` use the open source [Feather](https://feathericons.com/) as the ICON library, and make `Icon Font`. `Feather` use `24x24` sizes, with rounded corners, consistent stroke widths. 6 | 7 | ## How To Use 8 | 9 | Use `class="icon"` to declare the icon and set the proper classname. 10 | 11 | :::demo 12 | ```html 13 | 14 | 15 | 16 | 17 | ``` 18 | ::: 19 | 20 | ## List of Icons 21 | 22 | ### Main 23 | 24 | 25 | 26 | ### Media Control 27 | 28 | 29 | 30 | ### Communication 31 | 32 | 33 | 34 | ### Photo 35 | 36 | 37 | 38 | ### Location 39 | 40 | 41 | 42 | ### Weather 43 | 44 | 45 | 46 | ### Arrows 47 | 48 | 49 | 50 | ### LOGO 51 | 52 | 53 | 54 | 55 | 61 | -------------------------------------------------------------------------------- /docs/markdown/en/installation.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | 3 | ---- 4 | 5 | ## NPM 6 | 7 | Recommended use `npm` to development, enjoy the ecosystem of `node` and the chain tool of `webpack`, which brings convenience of development. With the package modules installed by `NPM`, we can easily refer to it in `import` or `require`. 8 | 9 | ```bash 10 | npm install at-ui 11 | 12 | npm install at-ui-style 13 | ``` 14 | 15 | ## CDN 16 | 17 | Can use traditional ` 24 | 25 | 26 | 27 | 28 | ``` 29 | 30 | #### DEMO： 31 | 32 | By using the script tag to import resources, we can quickly write a demo page with `AT-UI`. You can copy the following code or view [Online Demo](https://jsbin.com/dezafos/edit?html,output) directly. 33 | 34 | ```html 35 | 36 | 37 | 38 | 39 | 40 | AT-UI Example 41 | 42 | 43 | 44 | 52 | 53 | 54 |
55 | Show message 56 |
57 | 58 | 68 | 69 | 70 | ``` 71 | -------------------------------------------------------------------------------- /docs/markdown/en/introduction.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | ---- 4 | 5 | `AT-UI` is a modular front-end UI framework for developing fast and powerful web interfaces based on Vue.js. 6 | 7 | ## Features 8 | 9 | - Based on `Vue` 10 | - A NPM + Webpack + Babel Front-End development workflow 11 | - Support `ES2015` 12 | - CSS Style independent, make consistent user interfaces (See: [AT-UI Style](https://github.com/at-ui/at-ui-style)) 13 | - Friendly API 14 | 15 | ## Environment Support 16 | 17 | - Modern browsers and Internet Explorer 9+ 18 | - [Electron](http://electron.atom.io/) 19 | - [NW.js](http://nwjs.io) 20 | 21 | ## Version 22 | 23 | `AT-UI`：[![npm version](https://badge.fury.io/js/at-ui.svg)](https://badge.fury.io/js/at-ui) 24 | 25 | `AT-UI-Style`：[![npm version](https://badge.fury.io/js/at-ui-style.svg)](https://badge.fury.io/js/at-ui-style) 26 | 27 | ## Contribution 28 | 29 | Finding bugs and [Issue](https://github.com/at-ui/at-ui/issues), sending [Pull Request](https://github.com/at-ui/at-ui/pulls) or improving our docs - any contribution is welcome and highly appreciated. To get started, head over to our contribution guidelines. Thanks! 30 | -------------------------------------------------------------------------------- /docs/markdown/en/loadingbar.md: -------------------------------------------------------------------------------- 1 | 2 | # LoadingBar 3 | 4 | ---- 5 | 6 | Create a loading progress bar globally to display the status of asynchronous requests. 7 | 8 | Because of reusability, `LoadingBar` creates only one instance globally. You can use the `this.$Loading` instance directly. 9 | 10 | ## Basic 11 | 12 | Invoke `$Loading` by thress methods: `start()`、`finish()`、`error()` 13 | 14 | :::demo 15 | ```html 16 | Start 17 | Finish 18 | Error 19 | Update 20 | 21 | 39 | ``` 40 | ::: 41 | 42 | ## LoadingBar Methods 43 | 44 | | Function Name | Description | Parameter | 45 | |---------- |-------------- |---------- | 46 | | start | start loading the progress from 0, and load automatically | - | 47 | | finish | complete progress | - | 48 | | error | display the error type of progress bar | - | 49 | | update | specify and update the percentage of progress | percentage | 50 | 51 | ## LoadingBar Configs 52 | 53 | Provides the global configuration of `LoadingBar`, usage methods below: 54 | 55 | ```js 56 | this.$Loading.config({ 57 | width: 4 58 | }) 59 | ``` 60 | 61 | :::demo 62 | ```html 63 | {{ btnText }} 64 | ``` 65 | ::: 66 | 67 | ## LoadingBar Props 68 | 69 | | Property | Description | Type | Accepted Values | Default | 70 | |---------- |-------------- |---------- |-------------------------------- |-------- | 71 | | width | the width of line | Number | - | 2 | 72 | 73 | 112 | -------------------------------------------------------------------------------- /docs/markdown/en/rate.md: -------------------------------------------------------------------------------- 1 | 2 | # Rate 3 | 4 | --- 5 | 6 | Rate component 7 | 8 | ## Basic 9 | 10 | The simplest usage. 11 | 12 | :::demo 13 | ```html 14 | 15 | ``` 16 | ::: 17 | 18 | ## Show copywriting 19 | 20 | Add copywriting in rate component. 21 | 22 | :::demo 23 | ```html 24 | 25 | {{ value2 }} stars 26 | 27 | ``` 28 | ::: 29 | 30 | ## Other icon 31 | 32 | Replace the default star to other icon. 33 | 34 | :::demo 35 | ```html 36 | 37 | ``` 38 | ::: 39 | 40 | ## Half star 41 | 42 | Support select half star. 43 | 44 | :::demo 45 | ```html 46 |
47 | 52 | 53 |
54 | ``` 55 | ::: 56 | 57 | ## Read only 58 | 59 | Read only，can't use mouse to interact. 60 | 61 | :::demo 62 | ```html 63 |
64 | 69 | 70 |
71 | ``` 72 | ::: 73 | 74 | 75 | ## Rate Props 76 | 77 | | Property | Description | Type | Accepted Values | Default | 78 | |---------- |-------------- |---------- |-------------------------------- |-------- | 79 | | count | star count | Number | - | 5 | 80 | | value | current value | String | - | 0 | 81 | | allow-half | whether to allow semi selection | Boolean | - | `false` | 82 | | disabled | read only, unable to interact | Boolean | - | `false` | 83 | | icon | to specify the icon | String | - | `icon-star` | 84 | | show-text | whether to display a copywriting | Boolean | - | `false` | 85 | 86 | ## Rate Events 87 | 88 | | Event Name | Description | Return Value | 89 | |---------- |-------------- |---------- | 90 | | on-change | callback when select value | value | 91 | | on-hover-change | callback when hover item | value | 92 | 93 | ## Rate slot 94 | 95 | | Name | Description | 96 | |----------|-------- | 97 | | - | customize the contents of the copywriting | 98 | 99 | 114 | -------------------------------------------------------------------------------- /docs/markdown/en/slider.md: -------------------------------------------------------------------------------- 1 | 2 | # Slider 3 | 4 | ---- 5 | 6 | Slider is used to control the value within specified numerical range. 7 | 8 | ## Basic 9 | 10 | Basic slider, use `v-model` to binding value, the range is `0~100` default. 11 | 12 | :::demo 13 | ```html 14 | 15 | ``` 16 | ::: 17 | 18 | ## Disabled 19 | 20 | To make a slider as disabled, add `disabled` property to the Slider. 21 | 22 | :::demo 23 | ```html 24 | 25 | ``` 26 | ::: 27 | 28 | ## Customize Range 29 | 30 | The minimum and maximum values are set by `min` and `max` properties. 31 | 32 | :::demo 33 | ```html 34 | 35 | ``` 36 | ::: 37 | 38 | ## Discrete Value 39 | 40 | Control the interval of slider through the `step` property, the value of interval is `1` by default. 41 | 42 | :::demo 43 | ```html 44 | 45 | ``` 46 | ::: 47 | 48 | ## Slider Props 49 | 50 | | Property | Description | Type | Accepted Values | Default | 51 | |---------- |-------------- |---------- |-------------------------------- |-------- | 52 | | value | the value of slider, use `v-model` to enable a two-way binding | Number | - | - | 53 | | step | the granularity that slider can step through values | Number | - | 1 | 54 | | min | minimum | Number | - | 0 | 55 | | max | maximum | Number | - | 100 | 56 | | disabled | whether slider is disabled | Boolean | - | false | 57 | 58 | ## Slider Events 59 | 60 | | Event Name | Description | Return Value | 61 | |---------- |-------------- |---------- | 62 | | change | Emitted when the value of slider changed | value | 63 | 64 | 76 | -------------------------------------------------------------------------------- /docs/markdown/en/tag.md: -------------------------------------------------------------------------------- 1 | # Tag 2 | 3 | ---- 4 | 5 | ## Basic Tag 6 | 7 | To make a tag get close button, add `closable` property to `Tag`. Trigger `on-close` event when the button clicked. 8 | 9 | :::demo 10 | ```html 11 | Tag One 12 | Tag Two 13 | Tag Three 14 | Tag Four 15 | ``` 16 | ::: 17 | 18 | ## With Color Tendency 19 | 20 | Tag with color tendency gives different types. Set property `color`. It also provide Hex value, such as `color="#6190E8"`. 21 | 22 | :::demo 23 | ```html 24 | Tag One 25 | Tag Two 26 | Tag Three 27 | Tag Four 28 | Tag Five 29 | Tag Six 30 | #ecefce 31 | ``` 32 | ::: 33 | 34 | ## Tag Props 35 | 36 | | Property | Description | Type | Accepted values | Default | 37 | |---------- |-------------- |---------- |-------------------------------- |-------- | 38 | | name | the name of tag used for close event | Boolean | — | false | 39 | | color | type | String / Hex | Hex value or `default`, `primary`, `success`, `error`, `warning`, `info` | default | 40 | | closable | can be closed | Boolean | — | false | 41 | 42 | ## Tag Events 43 | 44 | | Event Name | Description | Return Value | 45 | |---------- |-------------- |---------- | 46 | | on-close | Emitted when closed | event | 47 | 48 | 63 | -------------------------------------------------------------------------------- /docs/markdown/en/textarea.md: -------------------------------------------------------------------------------- 1 | 2 | # Textarea 3 | 4 | ---- 5 | 6 | Textarea Input for multiline text, not for rich text entry. 7 | 8 | ## Basic 9 | 10 | The textarea is fixed as two lines default, similear to the `AtInput` component. 11 | 12 | :::demo 13 | ```html 14 | 15 | ``` 16 | ::: 17 | 18 | ## Disabled 19 | 20 | To make textarea as disabled, add `disabled` property to the Textarea. 21 | 22 | :::demo 23 | ```html 24 | 25 | ``` 26 | ::: 27 | 28 | ## Adaptive Text Height (Limited) 29 | 30 | Automatically adjusted the height of textarea according to the number of lines. The minimum and maximum number of rows can be set by `minRows` and `maxRows` properties. 31 | 32 | :::demo 33 | ```html 34 |

minRows=2, maxRows=4

35 | 36 | ``` 37 | ::: 38 | 39 | ## Adaptive Text Height (Without Limited) 40 | 41 | Automatically adjusted the height of textarea according to the number of lines without limited. Use `autosize` property. 42 | 43 | :::demo 44 | ```html 45 | 46 | ``` 47 | ::: 48 | 49 | ## Textarea Props 50 | 51 | | Property | Description | Type | Accepted Values | Default | 52 | |---------- |-------------- |---------- |-------------------------------- |-------- | 53 | | name | same as native textarea | String | - | - | 54 | | value | the value of textarea, use `v-model` to enable a two-way binding | String | - | - | 55 | | autosize | adaptive text height | Boolean | - | false | 56 | | placeholder | the text of placeholder | String | - | - | 57 | | disabled | whether the textarea is disabled | Boolean | - | false | 58 | | autofocus | same as native textarea | Boolean | - | false | 59 | | resize | whether to be resize by the user | String | `none`, `both`, `horizontal`, `vertical` | `vertical` | 60 | 61 | 72 | 73 | 80 | -------------------------------------------------------------------------------- /docs/markdown/en/timeline.md: -------------------------------------------------------------------------------- 1 | 2 | # Timeline 3 | 4 | --- 5 | 6 | ## Basic 7 | 8 | Basic timeline. 9 | 10 | :::demo 11 | ```html 12 | 13 |

Brush teeth and wash face

 14 |

Have breakfast

 15 |

Work

 16 |

Sleep

 17 | 18 | ``` 19 | ::: 20 | 21 | ## Circle Colors 22 | 23 | Set the color of circles. green means completed or success status, red means error, yellow means warning, and blue means ongoing or other default status. 24 | 25 | :::demo 26 | ```html 27 | 28 |

Brush teeth and wash face

 29 |

Have breakfast

 30 |

Work

 31 |

Sleep

 32 | 33 | ``` 34 | ::: 35 | 36 | ## Last Item 37 | 38 | When the timeline is incomplete and ongoing, put a ghost item at last. 39 | 40 | :::demo 41 | ```html 42 | 43 |

Brush teeth and wash face

 44 |

Have breakfast

 45 |

Work

 46 |

Sleep

 47 | 48 | ``` 49 | ::: 50 | 51 | ## Custom Timeline Items 52 | 53 | Accepts a `slot` to customize the timeline item's content, such as the icon. 54 | 55 | :::demo 56 | ```html 57 | 58 | 59 | 60 |

Brush teeth and wash face

61 | 62 | 63 | 64 |

Have breakfast

65 | 66 | 67 | 68 |

Work

69 | 70 | 71 | 72 |

Sleep

73 | 74 | 75 | ``` 76 | ::: 77 | 78 | ## Timeline Props 79 | 80 | | Property | Description | Type | Accepted Values | Default | 81 | |-------- |------------ |---------- |----------------- |-------- | 82 | | pending | to specify whether the last node is a ghost node | Boolean | - | false | 83 | 84 | ## TimelineItem Props 85 | 86 | | Property | Description | Type | Accepted Values | Default | 87 | |-------- |------------ |---------- |----------------- |-------- | 88 | | color | circle color | String | `blue`、`red`、`green`、`yellow` | `blue` | 89 | 90 | ## TimelineItem Slot 91 | 92 | | Name | Description | 93 | |----------|-------- | 94 | | dot | custom defined timeline item content | 95 | | - | main content | 96 | -------------------------------------------------------------------------------- /docs/markdown/zh/breadcrumb.md: -------------------------------------------------------------------------------- 1 | 2 | # Breadcrumb 面包屑 3 | 4 | ---- 5 | 6 | 显示当前页面在网站中的层级位置，点击可切换层级 7 | 8 | ## 基础用法 9 | 10 | 使用 `at-breadcrumb` 和 `at-breadcrumb-item` 创建面包屑，使用 `href` 属性添加链接 11 | 12 | :::demo 13 | ```html 14 | 15 | Home 16 | Components 17 | Breadcrumb 18 | 19 | ``` 20 | ::: 21 | 22 | ## 添加路由链接 23 | 24 | 除了可以使用 `href` 属性配置链接，也可以给 `to` 属性传入 `object` 添加 `vue-router` 的路由。添加 `replace` 属性可设置不给 `history` 添加新记录 25 | 26 | :::demo 27 | ```html 28 | 29 | Home 30 | Layout 31 | Color 32 | Breadcrumb 33 | 34 | ``` 35 | ::: 36 | 37 | ## 自定义分隔符 38 | 39 | 可以通过设置 `separator` 属性来自定义分隔符，支持 HTML 字符串 40 | 41 | :::demo 42 | ```html 43 | 44 | Home 45 | Components 46 | Breadcrumb 47 | 48 | ``` 49 | ::: 50 | 51 | 52 | ## Breadcrumb 参数 53 | 54 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 55 | |---------- |-------------- |---------- |-------------------------------- |-------- | 56 | | separator | 分隔符，可使用 HTML 字符串 | String | - | `/` | 57 | 58 | ## BreadcrumbItem 参数 59 | 60 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 61 | |---------- |-------------- |---------- |-------------------------------- |-------- | 62 | | href | 链接跳转地址，同 `` 中的 `href` 属性 | String | - | - | 63 | | to | 路由跳转对象，同 `vue-router` 中的 `to` | String / Object | - | - | 64 | | replace | 在使用 `to` 时，是否不需要向 `history` 添加新记录 | Boolean | - | false | 65 | -------------------------------------------------------------------------------- /docs/markdown/zh/card.md: -------------------------------------------------------------------------------- 1 | 2 | # Card 卡片 3 | 4 | --- 5 | 6 | ## 典型卡片 7 | 8 | 包含标题、内容和额外操作。 9 | 10 | :::demo 11 | ```html 12 | 13 |

Card Title

14 |
Extra
15 |
16 | Card Content 17 |
18 | 19 | ``` 20 | ::: 21 | 22 | ## 无边框 23 | 24 | 通过设置属性 `bordered: false`，不添加边框。 25 | 26 | :::demo 27 | ```html 28 | 29 |

Card Title

30 |
Extra
31 |
32 | Card Content 33 |
34 | 35 | ``` 36 | ::: 37 | 38 | ## 无阴影 39 | 通过设置属性 `no-hover: true` 来禁用鼠标悬停时显示的阴影效果。 40 | 41 | :::demo 42 | ```html 43 | 44 |

Card Title

45 |
Extra
46 |
47 | Card Content 48 |
49 | 50 | ``` 51 | ::: 52 | 53 | ## 只显示卡片内容区域 54 | 55 | 只显示卡片内容，而不显示标题和额外操作。 56 | 57 | :::demo 58 | ```html 59 | 60 |
61 | 62 |
63 |

AT-UI

64 |
65 |
66 | 67 | ``` 68 | ::: 69 | 70 | 71 | ## 预加载的卡片（默认） 72 | 73 | 数据加载前的文本块 Loading。 74 | 75 | :::demo 76 | ```html 77 | 78 |

Card Title

79 |
Extra
80 |
81 | Card Content 82 |
83 | 84 | ``` 85 | ::: 86 | 87 | ## 预加载的卡片（自定义） 88 | 89 | 自定义数据加载前的文本块 Loading。 90 | 91 | :::demo 92 | ```html 93 | 94 |

Card Title

95 |
Extra
96 |
加载中...
97 |
98 | Card Content 99 |
100 | 101 | ``` 102 | ::: 103 | 104 | ## Card 参数 105 | 106 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 107 | |---------- |-------------- |---------- |-------------------------------- |-------- | 108 | | bordered | 是否有边框 | Boolean | - | true | 109 | | noHover | 取消鼠标移过时所显示的阴影 | Boolean | - | false | 110 | | bodyStyle | 自定义内容区域的样式 | Object | - | {} | 111 | | loading | 当卡片内容还在加载中时，是否显示 loading | Boolean | - | false | 112 | 113 | ## Card slot 114 | 115 | | 名称 | 说明 | 116 | |----------|-------- | 117 | | title | 自定义卡片标题 | 118 | | extra | 自定义额外显示的内容，默认位置是在标题右侧 | 119 | | loading | 自定义 loading 显示内容 | 120 | | - | 卡片内容 | 121 | 122 | 131 | -------------------------------------------------------------------------------- /docs/markdown/zh/checkbox.md: -------------------------------------------------------------------------------- 1 | 2 | # Checkbox 多选框 3 | 4 | ---- 5 | 6 | ## 基本多选框 7 | 8 | 独立使用时，需要单独绑定 `model` 9 | 10 | :::demo 11 | ```html 12 | 深圳 13 |

{{ checkboxValue1 }}

14 | ``` 15 | ::: 16 | 17 | ## 不可用的多选框 18 | 19 | 添加 `disabled` 属性禁用多选框 20 | 21 | :::demo 22 | ```html 23 | 深圳 24 | 凹凸实验室 25 | ``` 26 | ::: 27 | 28 | ## 多选框组 29 | 30 | 适用于多个多选框绑定同一个 `model` 的情景 31 | 32 | :::demo 33 | ```html 34 | 35 | 深圳 36 | 北京 37 | 上海 38 | 广州 39 | 凹凸实验室 40 | 41 |

{{ checkboxValue4 }}

42 | ``` 43 | ::: 44 | 45 | ## Checkbox 参数 46 | 47 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 48 | |---------- |-------------- |---------- |-------------------------------- |-------- | 49 | | label | 选中状态的值 | String | - | - | 50 | | disabled | 是否禁用按钮 | Boolean | - | false | 51 | | checked | 是否已勾选 | Boolean | - | false | 52 | 53 | ## Checkbox 事件 54 | 55 | | 事件名称 | 说明 | 返回值 | 56 | |---------- |-------------- |---------- | 57 | | on-change | 绑定的值变化时触发 | 选中的按钮的 label 值 | 58 | 59 | ## Checkbox Group 事件 60 | 61 | | 事件名称 | 说明 | 返回值 | 62 | |---------- |-------------- |---------- | 63 | | on-change | 绑定的值变化时触发 | 选中的按钮的 label 值 | 64 | 65 | 77 | -------------------------------------------------------------------------------- /docs/markdown/zh/design.md: -------------------------------------------------------------------------------- 1 | 2 | # 设计资源 3 | 4 | ---- 5 | 6 | 提供 `AT-UI` 的视觉相关资源下载 7 | 8 |
9 |
10 | 11 | 14 | 15 | Feather 16 | Feather 字体图标的源文件及 Sketch 原稿 17 | 18 | 19 |
20 |
21 | -------------------------------------------------------------------------------- /docs/markdown/zh/form.md: -------------------------------------------------------------------------------- 1 | 2 | # Form 表单 3 | 4 | ---- 5 | 6 | ## 简单的表单 7 | 8 | 以下是简单的登录校验框 9 | 10 | :::demo 11 | 12 | ```html 13 | 14 | 15 | 16 | 19 | 20 | 21 | 22 | 23 | 26 | 27 | 28 | 29 | 登录 30 | 31 | 32 | ``` 33 | 34 | ::: 35 | 36 | ## 多个表单控件 37 | 38 | ## 表单布局 39 | 40 | 表单有三种布局方式，设置 `formLayout`，可以改变表单标签的布局方式 41 | 42 | ## 表单校验 43 | 44 | ## 自定义表单校验 45 | 46 | ## 弹出层中新建表单 47 | 48 | ## 动态增减表单项 49 | 50 | 96 | 97 | 102 | -------------------------------------------------------------------------------- /docs/markdown/zh/i18n.md: -------------------------------------------------------------------------------- 1 | # 国际化 2 | 3 | ---- 4 | 5 | `AT-UI` 组件的文案默认使用英文，如果需要使用其他中文或者其他语言，可以参考下面的方案： 6 | 7 | ## 兼容 vue-i18n 8 | 9 | ```js 10 | import Vue from 'vue' 11 | import AtUI from 'at-ui' 12 | import 'at-ui-style' // 引入组件样式 13 | import VueI18n from 'vue-i18n' 14 | import enLocale from 'at-ui/dist/locale/en-US' 15 | import zhLocale from 'at-ui/dist/locale/zh-CN' 16 | 17 | Vue.use(VueI18n) 18 | Vue.use(AtUI) 19 | 20 | const i18n = new VueI18n({ 21 | locale: 'en', 22 | fallbackLocale: 'en', 23 | messages: { 24 | 'en': { ...enLocale }, 25 | 'zh': { ...zhLocale } 26 | } 27 | }) 28 | 29 | AtUI.i18n((key, value) => i18n.t(key, value)) 30 | 31 | new Vue({ i18n }).$mount('#app') 32 | ``` 33 | 34 | ## 目前支持的语言 35 | 36 | | 语言 | 文件名 | 37 | |--- |--- | 38 | | 简体中文 | zh-CN | 39 | | 英语 | en-US | 40 | | 德语 | de | 41 | | 韩语（韩国） | ko-KR | 42 | | 葡萄牙语（巴西） | pt-BR | 43 | | 波斯语（伊朗） | fa-IR | 44 | 45 | 如果您需要使用其他的语言，欢迎贡献 PR：只需要在 [这里](https://github.com/AT-UI/at-ui/blob/master/src/locale/lang/) 添加一个语言配置文件即可 46 | -------------------------------------------------------------------------------- /docs/markdown/zh/icon.md: -------------------------------------------------------------------------------- 1 | # Icon 图标 2 | 3 | ---- 4 | 5 | 语义化的矢量图形，`AT-UI` 使用开源的 [Feather](https://feathericons.com/) 作为图标库，并制作成了 `icon font`。`Feather` 使用的是 `24x24` 的尺寸，拥有一致的圆角，一致的笔画宽度，确保整个图标系统保持视觉上的统一性。 6 | 7 | ## 如何使用 8 | 9 | 使用 `class="icon"` 来声明图标，具体图标的名称请 `copy` 相应的标签 10 | 11 | :::demo 12 | ```html 13 | 14 | 15 | 16 | 17 | ``` 18 | ::: 19 | 20 | ## 图标示例 21 | 22 | ### 主要 23 | 24 | 25 | 26 | ### 媒体控制 27 | 28 | 29 | 30 | ### 通信 31 | 32 | 33 | 34 | ### 照片 35 | 36 | 37 | 38 | ### 地理位置 39 | 40 | 41 | 42 | ### 天气 43 | 44 | 45 | 46 | ### 箭头 47 | 48 | 49 | 50 | ### LOGO 51 | 52 | 53 | 54 | 55 | 61 | -------------------------------------------------------------------------------- /docs/markdown/zh/inputnumber.md: -------------------------------------------------------------------------------- 1 | 2 | # InputNumber 数字输入框 3 | 4 | ---- 5 | 6 | ## 基础用法 7 | 8 | 支持传入 `step` 精度，以及指定取值范围 `max` , `min`。默认 `step` 取整数 1 9 | 10 | :::demo 11 | ```html 12 |

基本输入框

13 |
14 |
15 |
16 |
17 |
18 |

有取值范围的输入框，min=0, max=5

19 |
20 |
21 | 22 |
23 |
24 | ``` 25 | ::: 26 | 27 | ## 不可用状态 28 | 29 | 设置属性 `disabled` 禁用输入框 30 | 31 | :::demo 32 | ```html 33 |
34 |
35 | 36 |
37 |
38 | ``` 39 | ::: 40 | 41 | ## 小数输入 42 | 43 | 参数 `step` 可以配置成小数 44 | 45 | :::demo 46 | ```html 47 |

step=0.3, min=1

48 |
49 |
50 | 51 |
52 |
53 | ``` 54 | ::: 55 | 56 | ## 不同尺寸 57 | 58 | 配置属性 `size`，可控制输入框的尺寸，默认支持三种尺寸：`large`，`normal`，`small` 59 | 60 | :::demo 61 | ```html 62 |
63 |
64 | 65 |
66 |
67 | 68 |
69 |
70 | 71 |
72 |
73 | ``` 74 | ::: 75 | 76 | ## InputNumber 参数 77 | 78 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 79 | |---------- |-------------- |---------- |-------------------------------- |-------- | 80 | | value | 输入框的值，可通过 `v-model` 绑定 | Number | - | - | 81 | | size | 输入框尺寸 | String | `small`, `normal`, `large` | normal | 82 | | step | 每次递增或递减的数目 | Number | - | 1 | 83 | | min | 最小值 | Number | - | -Infinity | 84 | | max | 最大值 | Number | - | Infinity | 85 | | disabled | 是否禁用输入框 | Boolean | - | false | 86 | | readonly | 是否设置成只读 | Boolean | - | false | 87 | | autofocus | 是否自动聚焦到输入框 | Boolean | - | false | 88 | 89 | ## InputNumber 事件 90 | 91 | | 事件名称 | 说明 | 返回值 | 92 | |---------- |-------------- |---------- | 93 | | focus | 获得焦点时触发 | event | 94 | | blur | 失去焦点时触发 | event | 95 | | change | 绑定的值有变化时触发 | 输入框的值 | 96 | 97 | 107 | -------------------------------------------------------------------------------- /docs/markdown/zh/installation.md: -------------------------------------------------------------------------------- 1 | # 安装 2 | 3 | ---- 4 | 5 | ## 使用 npm 安装 6 | 7 | 推荐使用 `npm` 的方式进行开发，享受 `node` 生态圈和 `webpack` 工具链带来的便利。通过 `npm` 安装的模块包，我们可以轻松的使用 `import` 或者 `require` 的方式引用 8 | 9 | ```bash 10 | npm install at-ui 11 | 12 | npm install at-ui-style 13 | ``` 14 | 15 | ## 浏览器标签引入 16 | 17 | 可以采用传统的 ` 24 | 25 | 26 | 27 | 28 | ``` 29 | 30 | #### 示例： 31 | 32 | 通过浏览器资源标签引入的方式，我们可以迅速用 `AT-UI` 写出一个 DEMO 页面，可复制下列代码或者直接查看 [示例页面](https://jsbin.com/dezafos/edit?html,output) 33 | 34 | ```html 35 | 36 | 37 | 38 | 39 | 40 | AT-UI Example 41 | 42 | 43 | 44 | 52 | 53 | 54 |
55 | Show message 56 |
57 | 58 | 68 | 69 | 70 | ``` 71 | -------------------------------------------------------------------------------- /docs/markdown/zh/introduction.md: -------------------------------------------------------------------------------- 1 | # 介绍 2 | 3 | ---- 4 | 5 | `AT-UI` 是一款基于 `Vue.js 2.0` 的前端 UI 组件库，主要用于快速开发 PC 网站中后台产品 6 | 7 | ## 特性 8 | 9 | - 基于 `Vue` 开发的 UI 组件 10 | - 使用 npm + webpack + babel 的工作流，支持 ES2015 11 | - CSS 样式独立，即使使用不同的框架实现，也都能保持统一的 UI 风格（ 详见：[AT-UI Style](https://github.com/at-ui/at-ui-style) ） 12 | - 提供友好的 API，可灵活的使用组件 13 | 14 | ## 浏览器支持 15 | 16 | - 现代浏览器和 IE9 及以上 17 | - [Electron](http://electron.atom.io/) 18 | - [NW.js](http://nwjs.io) 19 | 20 | ## 版本 21 | 22 | `AT-UI`：[![npm version](https://badge.fury.io/js/at-ui.svg)](https://badge.fury.io/js/at-ui) 23 | 24 | `AT-UI-Style`：[![npm version](https://badge.fury.io/js/at-ui-style.svg)](https://badge.fury.io/js/at-ui-style) 25 | 26 | ## 贡献 27 | 28 | 如果你在使用 `AT-UI` 时遇到问题，或者有好的建议，欢迎给我们提 [Issue](https://github.com/at-ui/at-ui/issues) 或 [Pull Request](https://github.com/at-ui/at-ui/pulls) 29 | -------------------------------------------------------------------------------- /docs/markdown/zh/loadingbar.md: -------------------------------------------------------------------------------- 1 | 2 | # LoadingBar 加载进度条 3 | 4 | ---- 5 | 6 | 全局创建了一个用于显示页面加载、异步请求的加载进度条。 7 | 8 | 因为可复用性的关系，`LoadingBar` 只会全局创建一个实例，而且在 `Vue.prototype` 中添加了全局对象 `$Loading`，可以直接通过 `this.$Loading` 操作实例 9 | 10 | ## 基础用法 11 | 12 | 通过调用 `$Loading` 提供的三种方法来控制全局的加载进度条 `start()`、`finish()`、`error()` 13 | 14 | :::demo 15 | ```html 16 | Start 17 | Finish 18 | Error 19 | Update 20 | 21 | 39 | ``` 40 | ::: 41 | 42 | ## LoadingBar 函数方法 43 | 44 | | 函数名 | 说明 | 参数 | 45 | |---------- |-------------- |---------- | 46 | | start | 开始从 0 显示加载进度条，并自动加载 | - | 47 | | finish | 完成进度条 | - | 48 | | error | 显示错误类型的进度条 | - | 49 | | update | 指定进度的百分比，更新进度条 | percent，指定进度的百分比 | 50 | 51 | ## LoadingBar 配置 52 | 53 | 提供 `LoadingBar` 的全局配置，使用方法如下： 54 | 55 | ```js 56 | this.$Loading.config({ 57 | width: 4 58 | }) 59 | ``` 60 | 61 | :::demo 62 | ```html 63 | {{ btnText }} 64 | ``` 65 | ::: 66 | 67 | ## LoadingBar 参数 68 | 69 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 70 | |---------- |-------------- |---------- |-------------------------------- |-------- | 71 | | width | 进度条的线宽 | Number | - | 2 | 72 | 73 | 112 | -------------------------------------------------------------------------------- /docs/markdown/zh/pagination.md: -------------------------------------------------------------------------------- 1 | 2 | # Pagination 分页 3 | 4 | ---- 5 | 6 | 当表格的数据量过多时，可以使用分页组件，每次只加载一页数据 7 | 8 | ## 基础分页 9 | 10 | 当页数小于 8 页时 11 | 12 | :::demo 13 | ```html 14 | 15 | ``` 16 | ::: 17 | 18 | ## 更多的分页 19 | 20 | 当页数大于 8 页时，会显示更多可点击项 21 | 22 | :::demo 23 | ```html 24 | 25 | ``` 26 | ::: 27 | 28 | ## 显示总数 29 | 30 | 设置属性 `show-total` 显示数据总数 31 | 32 | :::demo 33 | ```html 34 | 35 | ``` 36 | ::: 37 | 38 | ## 快速跳转 39 | 40 | 设置属性 `show-quickjump` 显示 `快速跳转` 操作框 41 | 42 | :::demo 43 | ```html 44 | 45 | ``` 46 | ::: 47 | 48 | ## 改变每页显示的数量 49 | 50 | 设置属性 `show-sizer` 显示 `改变每页显示数` 操作框 51 | 52 | :::demo 53 | ```html 54 | 55 | ``` 56 | ::: 57 | 58 | ## 完整功能的分页 59 | 60 | 一个完整功能的分页组件 61 | 62 | :::demo 63 | ```html 64 | 65 | ``` 66 | ::: 67 | 68 | ## 小型分页 69 | 70 | 设置属性 `size` 更改分页组件的尺寸，仅支持传入 `small` 71 | 72 | :::demo 73 | ```html 74 | 75 | ``` 76 | ::: 77 | 78 | ## 极简风格的分页 79 | 80 | 设置属性 `simple` 使用极简风格的分页组件，功能比较简单，适用于某些特殊场景 81 | 82 | :::demo 83 | ```html 84 | 85 | 86 | ``` 87 | ::: 88 | 89 | ## Pagination 参数 90 | 91 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 92 | |---------- |-------------- |---------- |----------------------------- |-------- | 93 | | current | 当前页码 | Number | - | 1 | 94 | | total | 总的数据条目数 | Number | - | 0 | 95 | | page-size | 每页最多展示的条目数 | Number | - | 10 | 96 | | page-size-opts | 改变每页显示数量的 `select` 选择框配置项 | Array | - | [10, 20, 30, 40] | 97 | | show-total | 是否显示总条目数 | Boolean | - | false | 98 | | show-sizer | 是否显示每页展示数量的 `select` 选择框 | Boolean | - | false | 99 | | show-quickjump | 是否显示快速跳转 | Boolean | - | false | 100 | | size | 分页组件的大小 | String | `small` | - | 101 | | simple | 是否为极简风格 | Boolean | - | false | 102 | 103 | ## Pagination 事件 104 | 105 | | 事件名称 | 说明 | 返回值 | 106 | |---------- |-------------- |---------- | 107 | | page-change | 页码改变时触发的回调 | 页码 | 108 | | pagesize-change | 切换每页显示的条数时触发的回调 | 每页的条目数 | 109 | 110 | 115 | -------------------------------------------------------------------------------- /docs/markdown/zh/popover.md: -------------------------------------------------------------------------------- 1 | 2 | # Popover 弹出框 3 | 4 | ---- 5 | 6 | ## 基本用法 7 | 8 | 默认显示在正中间，并且以 `click` 方式激活，使用方法跟 `Tooltip` 基本一样 9 | 10 | :::demo 11 | ```html 12 | 13 | 点击 14 | 15 | 16 | 一段文字 17 | 18 | ``` 19 | ::: 20 | 21 | ## 更改激活的方式 22 | 23 | 默认使用 `click` 方式激活，可设置 `trigger` 更换激活方式 24 | 25 | :::demo 26 | ```html 27 | 28 | Click 29 | 30 | 31 | Hover 32 | 33 | ``` 34 | ::: 35 | 36 | ## 弹出框的位置 37 | 38 | 设置属性 `placement` 可更改弹出框的位置，默认显示在顶部 `top` 39 | 40 | :::demo 41 | ```html 42 | 43 | Top 44 | 45 | 46 | Bottom 47 | 48 | 49 | Left 50 | 51 | 52 | Right 53 | 54 | ``` 55 | ::: 56 | 57 | ## 嵌套内容 58 | 59 | 除了可以使用属性 `title` 和 `content` 设置弹出框的内容，还可以使用 `slot="title"` 和 `slot="content"` 的方式设置弹出框的嵌套内容 60 | 61 | :::demo 62 | ```html 63 | 64 | 删除 65 | 72 | 73 | ``` 74 | ::: 75 | 76 | ## Popover 参数 77 | 78 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 79 | |---------- |-------------- |---------- |-------------------------------- |-------- | 80 | | title | 标题文字 | String | - | - | 81 | | content | 提示文字 | String | - | - | 82 | | trigger | 触发的事件类型 | String | `hover`, `focus`, `click` | `click` | 83 | | placement | 弹出框的位置 | String | `top`, `top-left`, `top-right`, `left`, `left-top`, `left-bottom`, `right`, `right-top`, `right-bottom`, `bottom`, `bottom-left`, `bottom-right` | `top` | 84 | 85 | 90 | 91 | 105 | -------------------------------------------------------------------------------- /docs/markdown/zh/progress.md: -------------------------------------------------------------------------------- 1 | # Progress 进度条 2 | 3 | ---- 4 | 5 | 用于展示事件的进度和状态 6 | 7 | ## 基本进度条 8 | 9 | 标准的进度条，当进度达到 `100%` 的时候，会自动将状态设置为 `success` 10 | 11 | :::demo 12 | ```html 13 | 14 | 15 | 16 | 17 | ``` 18 | ::: 19 | 20 | ## 小型进度条 21 | 22 | 在一些狭小的区域，需要使用小型进度条。通过参数 `stroke-width` 可配置进度条的线宽 23 | 24 | :::demo 25 | ```html 26 |
27 |
28 | 29 | 30 | 31 | 32 |
33 |
34 | ``` 35 | ::: 36 | 37 | ## 动态展示 38 | 39 | 点击操作按钮，查看进度条的状态变化 40 | 41 | :::demo 42 | ```html 43 | 44 | 45 | 46 | 47 | 48 | 49 | 68 | ``` 69 | ::: 70 | 71 | ## Progress 参数 72 | 73 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 74 | |---------- |-------------- |---------- |-------------------------------- |-------- | 75 | | percent | 百分比 | Number | - | 0 | 76 | | status | 进度条状态 | String | `success`, `error` | - | 77 | | stroke-width | 进度条的线宽 | Number | - | 8 | 78 | 79 | ## Progress 事件 80 | 81 | | 事件名称 | 说明 | 返回值 | 82 | |------------- |-------------- |---------- | 83 | | on-status-success | 进度到 `100%` 时触发 | 触发时 `percent` 的值 | 84 | 85 | 90 | 91 | 110 | -------------------------------------------------------------------------------- /docs/markdown/zh/rate.md: -------------------------------------------------------------------------------- 1 | 2 | # Rate 评分 3 | 4 | --- 5 | 6 | 评分组件 7 | 8 | ## 基础用法 9 | 10 | 最简单的用法。 11 | 12 | :::demo 13 | ```html 14 | 15 | ``` 16 | ::: 17 | 18 | ## 文案展现 19 | 20 | 给评分组件加上文案展示。 21 | 22 | :::demo 23 | ```html 24 | 25 | {{ value2 }} 星 26 | 27 | ``` 28 | ::: 29 | 30 | ## 其他图标 31 | 32 | 可以将星星替换为其他图标。 33 | 34 | :::demo 35 | ```html 36 | 37 | ``` 38 | ::: 39 | 40 | ## 半星 41 | 42 | 支持选中半星。 43 | 44 | :::demo 45 | ```html 46 |
47 | 52 | 53 |
54 | ``` 55 | ::: 56 | 57 | ## 只读 58 | 59 | 只读，无法进行鼠标交互。 60 | 61 | :::demo 62 | ```html 63 |
64 | 69 | 70 |
71 | ``` 72 | ::: 73 | 74 | 75 | ## Rate 参数 76 | 77 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 78 | |---------- |-------------- |---------- |-------------------------------- |-------- | 79 | | count | star 总数 | Number | - | 5 | 80 | | value | 当前值 | String | - | 0 | 81 | | allow-half | 是否允许选择半颗星 | Boolean | - | `false` | 82 | | disabled | 只读，无法进行交互 | Boolean | - | `false` | 83 | | icon | 指定图标 | String | - | `icon-star` | 84 | | show-text | 实现显示辅助文案 | Boolean | - | `false` | 85 | 86 | ## Rate 事件 87 | 88 | | 事件名称 | 说明 | 返回值 | 89 | |---------- |-------------- |---------- | 90 | | on-change | star 数目改变时触发 | 改变后的值 | 91 | | on-hover-change | 鼠标在 star 上移动导致数值变化时触发 | 改变后的值 | 92 | 93 | 94 | ## Rate slot 95 | 96 | | 名称 | 说明 | 97 | |----------|-------- | 98 | | - | 自定义展示文案的内容 | 99 | 100 | 101 | 116 | -------------------------------------------------------------------------------- /docs/markdown/zh/slider.md: -------------------------------------------------------------------------------- 1 | 2 | # Slider 滑动输入条 3 | 4 | ---- 5 | 6 | 滑动输入条，用于控制用户在规定的数值区间内进行选择 7 | 8 | ## 基础用法 9 | 10 | 基本滑动条，通过 `v-model` 绑定数据，默认取值范围为 `0~100` 11 | 12 | :::demo 13 | ```html 14 | 15 | ``` 16 | ::: 17 | 18 | ## 不可用状态 19 | 20 | 设置属性 `disabled` 禁用滑动条 21 | 22 | :::demo 23 | ```html 24 | 25 | ``` 26 | ::: 27 | 28 | ## 自定义取值范围 29 | 30 | 通过属性 `min`， `max` 分别设置最小和最大可取值 31 | 32 | :::demo 33 | ```html 34 | 35 | ``` 36 | ::: 37 | 38 | ## 离散值 39 | 40 | 可通过属性 `step` 控制每次滑动的间隔，默认间隔为 `1` 41 | 42 | :::demo 43 | ```html 44 | 45 | ``` 46 | ::: 47 | 48 | ## Slider 参数 49 | 50 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 51 | |---------- |-------------- |---------- |-------------------------------- |-------- | 52 | | value | 当前的值，可通过 `v-model` 绑定 | Number | - | - | 53 | | step | 步长 | Number | - | 1 | 54 | | min | 最小值 | Number | - | 0 | 55 | | max | 最大值 | Number | - | 100 | 56 | | disabled | 是否禁用 | Boolean | - | false | 57 | 58 | ## Slider 事件 59 | 60 | | 事件名称 | 说明 | 返回值 | 61 | |---------- |-------------- |---------- | 62 | | change | 绑定的值有变化时触发 | 改变后的值 | 63 | 64 | 76 | -------------------------------------------------------------------------------- /docs/markdown/zh/tag.md: -------------------------------------------------------------------------------- 1 | # Tag 标签 2 | 3 | ---- 4 | 5 | ## 基本标签 6 | 7 | 设置 `closable` 属性可给标签添加关闭按钮，点击关闭按钮触发 `on-close` 事件，按钮不包含逻辑，如需删除 `tag`，请自行添加关闭逻辑 8 | 9 | :::demo 10 | ```html 11 | 标签一 12 | 标签二 13 | 标签三 14 | 标签四 15 | ``` 16 | ::: 17 | 18 | ## 各种颜色的标签 19 | 20 | 内置六种颜色的标签，如需其他颜色的标签，可设置 `color` 属性的值为十六进制的色值，例如 `color="#6190E8"` 21 | 22 | :::demo 23 | ```html 24 | 标签一 25 | 标签二 26 | 标签三 27 | 标签四 28 | 标签五 29 | 标签六 30 | #ecefce 31 | ``` 32 | ::: 33 | 34 | ## API 35 | 36 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 37 | |---------- |-------------- |---------- |-------------------------------- |-------- | 38 | | name | 用于触发关闭事件时的回调 | Boolean | — | false | 39 | | color | 类型 | String / Hex | 可传入十六进制颜色值，或者 `default`, `primary`, `success`, `error`, `warning`, `info` | default | 40 | | closable | 是否可关闭 | Boolean | — | false | 41 | 42 | ## Tag 事件 43 | 44 | | 事件名称 | 说明 | 返回值 | 45 | |---------- |-------------- |---------- | 46 | | on-close | 点击关闭按钮时触发 | event | 47 | 48 | 63 | -------------------------------------------------------------------------------- /docs/markdown/zh/textarea.md: -------------------------------------------------------------------------------- 1 | 2 | # Textarea 文本域 3 | 4 | ---- 5 | 6 | 文本域输入框，用于输入多行文本，不适用于富文本输入 7 | 8 | ## 基础文本域 9 | 10 | 默认固定为两行的文本域，使用方法类似 `AtInput` 组件 11 | 12 | :::demo 13 | ```html 14 | 15 | ``` 16 | ::: 17 | 18 | ## 禁用状态 19 | 20 | 添加属性 `disabled` 禁用文本域输入框 21 | 22 | :::demo 23 | ```html 24 | 25 | ``` 26 | ::: 27 | 28 | ## 自适应文本高度（限制行数） 29 | 30 | 可根据输入文本的行数，自动调整输入框的高度，可分别通过 `minRows` 和 `maxRows` 属性来设置文本域的最小和最大行数 31 | 32 | :::demo 33 | ```html 34 |

minRows=2, maxRows=4

35 | 36 | ``` 37 | ::: 38 | 39 | ## 自适应文本高度（不限制行数） 40 | 41 | 设置属性 `autosize`，可根据输入文本的行数，自动调整输入框的高度，不限制行数。如果同时使用 `autosize` 和 `minRows`，会优先使用 `autosize` 42 | 43 | :::demo 44 | ```html 45 | 46 | ``` 47 | ::: 48 | 49 | ## Textarea 参数 50 | 51 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 52 | |---------- |-------------- |---------- |-------------------------------- |-------- | 53 | | name | 原生属性 | String | - | - | 54 | | value | 文本域的值，可通过 `v-model` 绑定 | String | - | - | 55 | | autosize | 是否自动调整输入框高度 | Boolean | - | false | 56 | | placeholder | 占位文本（原生属性） | String | - | - | 57 | | disabled | 是否禁用（原生属性） | Boolean | - | false | 58 | | autofocus | 是否自动获取焦点（原生属性） | Boolean | - | false | 59 | | resize | 是否能被用户缩放 | String | `none`, `both`, `horizontal`, `vertical` | `vertical` | 60 | 61 | 72 | 73 | 80 | -------------------------------------------------------------------------------- /docs/markdown/zh/timeline.md: -------------------------------------------------------------------------------- 1 | 2 | # Timeline 时间轴 3 | 4 | --- 5 | 6 | ## 基础用法 7 | 8 | 基本的时间轴。 9 | 10 | :::demo 11 | ```html 12 | 13 |

刷牙洗脸

 14 |

吃早餐

 15 |

上班

 16 |

睡觉

 17 | 18 | ``` 19 | ::: 20 | 21 | ## 圆圈颜色 22 | 23 | 圆圈颜色，绿色用于已完成、成功状态，红色表示错误状态，黄色表示警告状态，蓝色可表示正在进行或其他默认状态。 24 | 25 | :::demo 26 | ```html 27 | 28 |

刷牙洗脸

 29 |

吃早餐

 30 |

上班

 31 |

睡觉

 32 | 33 | ``` 34 | ::: 35 | 36 | ## 标记最后一个为幽灵节点 37 | 38 | 在最后位置添加一个幽灵节点，表示时间轴未完成，还在记录过程中。 39 | 40 | :::demo 41 | ```html 42 | 43 |

刷牙洗脸

 44 |

吃早餐

 45 |

上班

 46 |

睡觉

 47 | 48 | ``` 49 | ::: 50 | 51 | ## 自定义时间轴点 52 | 53 | 接受一个 `slot` 来自定义轴点的内容，比如一个图标。 54 | 55 | :::demo 56 | ```html 57 | 58 | 59 | 60 |

刷牙洗脸

61 | 62 | 63 | 64 |

吃早餐

65 | 66 | 67 | 68 |

上班

69 | 70 | 71 | 72 |

睡觉

73 | 74 | 75 | ``` 76 | ::: 77 | 78 | ## Timeline 参数 79 | 80 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 81 | |-------- |------------ |---------- |----------------- |-------- | 82 | | pending | 指定最后一个节点是否为幽灵节点 | Boolean | - | false | 83 | 84 | ## TimelineItem 参数 85 | 86 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 87 | |-------- |------------ |---------- |----------------- |-------- | 88 | | color | 圆圈颜色 | String | `blue`、`red`、`green`、`yellow` | `blue` | 89 | 90 | ## TimelineItem Slot 91 | 92 | | 名称 | 说明 | 93 | |----------|-------- | 94 | | dot | 替换圈圈 | 95 | | - | 主要内容 | 96 | -------------------------------------------------------------------------------- /docs/utils/collapse-transition.js: -------------------------------------------------------------------------------- 1 | /** 2 | * https://github.com/ElemeFE/element/blob/dev/src/transitions/collapse-transition.js 3 | */ 4 | import { addClass, removeClass } from './util' 5 | 6 | const Transition = { 7 | beforeEnter (el) { 8 | addClass(el, 'collapse-transition') 9 | if (!el.dataset) el.dataset = {} 10 | 11 | // // el.dataset.oldPaddingTop = el.style.paddingTop 12 | // // el.dataset.oldPaddingBottom = el.style.paddingBottom 13 | 14 | el.style.height = '0' 15 | // el.style.paddingTop = 0 16 | // el.style.paddingBottom = 0 17 | }, 18 | 19 | enter (el) { 20 | el.dataset.oldOverflow = el.style.overflow 21 | if (el.scrollHeight !== 0) { 22 | el.style.height = `${el.scrollHeight}px` 23 | // // el.style.paddingTop = el.dataset.oldPaddingTop 24 | // // el.style.paddingBottom = el.dataset.oldPaddingBottom 25 | } else { 26 | el.style.height = '' 27 | // // el.style.paddingTop = el.dataset.oldPaddingTop 28 | // // el.style.paddingBottom = el.dataset.oldPaddingBottom 29 | } 30 | 31 | el.style.overflow = 'hidden' 32 | }, 33 | 34 | afterEnter (el) { 35 | // for safari: remove class then reset height is necessary 36 | removeClass(el, 'collapse-transition') 37 | el.style.height = '' 38 | el.style.overflow = el.dataset.oldOverflow 39 | }, 40 | 41 | beforeLeave (el) { 42 | if (!el.dataset) el.dataset = {} 43 | // // el.dataset.oldPaddingTop = el.style.paddingTop 44 | // // el.dataset.oldPaddingBottom = el.style.paddingBottom 45 | el.dataset.oldOverflow = el.style.overflow 46 | 47 | el.style.height = `${el.scrollHeight}px` 48 | el.style.overflow = 'hidden' 49 | }, 50 | 51 | leave (el) { 52 | if (el.scrollHeight !== 0) { 53 | // for safari: add class after set height, or it will jump to zero height suddenly, weired 54 | addClass(el, 'collapse-transition') 55 | el.style.height = 0 56 | // el.style.paddingTop = 0 57 | // el.style.paddingBottom = 0 58 | } 59 | }, 60 | 61 | afterLeave (el) { 62 | removeClass(el, 'collapse-transition') 63 | el.style.height = '' 64 | el.style.overflow = el.dataset.oldOverflow 65 | // // el.style.paddingTop = el.dataset.oldPaddingTop 66 | // // el.style.paddingBottom = el.dataset.oldPaddingBottom 67 | } 68 | } 69 | 70 | export default { 71 | name: 'CollapseTransition', 72 | functional: true, 73 | render (h, { children }) { 74 | const data = { 75 | on: Transition 76 | } 77 | 78 | return h('transition', data, children) 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /docs/views/docs-en.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 19 | 20 | 31 | 32 | 56 | -------------------------------------------------------------------------------- /docs/views/docs.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 19 | 20 | 31 | 32 | 56 | -------------------------------------------------------------------------------- /docs/views/guide-en.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 19 | 20 | 31 | 32 | 56 | -------------------------------------------------------------------------------- /docs/views/guide.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 19 | 20 | 31 | 32 | 56 | -------------------------------------------------------------------------------- /docs/views/resource-en.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 19 | 20 | 31 | 32 | 56 | -------------------------------------------------------------------------------- /docs/views/resource.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 19 | 20 | 31 | 32 | 56 | -------------------------------------------------------------------------------- /src/components/alert/index.js: -------------------------------------------------------------------------------- 1 | import Alert from './src/alert.vue' 2 | 3 | Alert.install = function (Vue) { 4 | Vue.component(Alert.name, Alert) 5 | } 6 | 7 | export default Alert 8 | -------------------------------------------------------------------------------- /src/components/alert/src/alert.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 79 | 80 | -------------------------------------------------------------------------------- /src/components/badge/index.js: -------------------------------------------------------------------------------- 1 | import Badge from './src/badge.vue' 2 | 3 | Badge.install = function (Vue) { 4 | Vue.component(Badge.name, Badge) 5 | } 6 | 7 | export default Badge 8 | -------------------------------------------------------------------------------- /src/components/badge/src/badge.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 61 | -------------------------------------------------------------------------------- /src/components/breadcrumb-item/index.js: -------------------------------------------------------------------------------- 1 | import BreadcrumbItem from '../breadcrumb/src/breadcrumb-item.vue' 2 | 3 | BreadcrumbItem.install = function (Vue) { 4 | Vue.component(BreadcrumbItem.name, BreadcrumbItem) 5 | } 6 | 7 | export default BreadcrumbItem 8 | -------------------------------------------------------------------------------- /src/components/breadcrumb/index.js: -------------------------------------------------------------------------------- 1 | import Breadcrumb from './src/breadcrumb.vue' 2 | 3 | Breadcrumb.install = function (Vue) { 4 | Vue.component(Breadcrumb.name, Breadcrumb) 5 | } 6 | 7 | export default Breadcrumb 8 | -------------------------------------------------------------------------------- /src/components/breadcrumb/src/breadcrumb-item.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 47 | -------------------------------------------------------------------------------- /src/components/breadcrumb/src/breadcrumb.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | -------------------------------------------------------------------------------- /src/components/button-group/index.js: -------------------------------------------------------------------------------- 1 | import ButtonGroup from '../button/src/button-group.vue' 2 | 3 | ButtonGroup.install = function (Vue) { 4 | Vue.component(ButtonGroup.name, ButtonGroup) 5 | } 6 | 7 | export default ButtonGroup 8 | -------------------------------------------------------------------------------- /src/components/button/index.js: -------------------------------------------------------------------------------- 1 | import Button from './src/button.vue' 2 | 3 | Button.install = function (Vue) { 4 | Vue.component(Button.name, Button) 5 | } 6 | 7 | export default Button 8 | -------------------------------------------------------------------------------- /src/components/button/src/button-group.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 24 | -------------------------------------------------------------------------------- /src/components/button/src/button.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 73 | -------------------------------------------------------------------------------- /src/components/card/index.js: -------------------------------------------------------------------------------- 1 | import Card from './src/card.vue' 2 | 3 | Card.install = function (Vue) { 4 | Vue.component(Card.name, Card) 5 | } 6 | 7 | export default Card 8 | -------------------------------------------------------------------------------- /src/components/card/src/card.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 67 | 68 | -------------------------------------------------------------------------------- /src/components/checkbox-group/index.js: -------------------------------------------------------------------------------- 1 | import CheckboxGroup from '../checkbox/src/checkbox-group.vue' 2 | 3 | CheckboxGroup.install = function (Vue) { 4 | Vue.component(CheckboxGroup.name, CheckboxGroup) 5 | } 6 | 7 | export default CheckboxGroup 8 | -------------------------------------------------------------------------------- /src/components/checkbox/index.js: -------------------------------------------------------------------------------- 1 | import Checkbox from './src/checkbox.vue' 2 | 3 | Checkbox.install = function (Vue) { 4 | Vue.component(Checkbox.name, Checkbox) 5 | } 6 | 7 | export default Checkbox 8 | -------------------------------------------------------------------------------- /src/components/checkbox/src/checkbox-group.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 57 | -------------------------------------------------------------------------------- /src/components/checkbox/src/checkbox.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 110 | -------------------------------------------------------------------------------- /src/components/collapse-item/index.js: -------------------------------------------------------------------------------- 1 | import CollapseItem from '../collapse/src/collapse-item.vue' 2 | 3 | CollapseItem.install = function (Vue) { 4 | Vue.component(CollapseItem.name, CollapseItem) 5 | } 6 | 7 | export default CollapseItem 8 | -------------------------------------------------------------------------------- /src/components/collapse/index.js: -------------------------------------------------------------------------------- 1 | import Collapse from './src/collapse.vue' 2 | 3 | Collapse.install = function (Vue) { 4 | Vue.component(Collapse.name, Collapse) 5 | } 6 | 7 | export default Collapse 8 | -------------------------------------------------------------------------------- /src/components/collapse/src/collapse-item.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 61 | 62 | -------------------------------------------------------------------------------- /src/components/collapse/src/collapse.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 104 | -------------------------------------------------------------------------------- /src/components/dialog/index.js: -------------------------------------------------------------------------------- 1 | import Dialog from '../modal/src/dialog.js' 2 | 3 | export default Dialog 4 | -------------------------------------------------------------------------------- /src/components/dropdown-item/index.js: -------------------------------------------------------------------------------- 1 | import DropdownItem from '../dropdown/src/dropdown-item.vue' 2 | 3 | DropdownItem.install = function (Vue) { 4 | Vue.component(DropdownItem.name, DropdownItem) 5 | } 6 | 7 | export default DropdownItem 8 | -------------------------------------------------------------------------------- /src/components/dropdown-menu/index.js: -------------------------------------------------------------------------------- 1 | import DropdownMenu from '../dropdown/src/dropdown-menu.vue' 2 | 3 | DropdownMenu.install = function (Vue) { 4 | Vue.component(DropdownMenu.name, DropdownMenu) 5 | } 6 | 7 | export default DropdownMenu 8 | -------------------------------------------------------------------------------- /src/components/dropdown/index.js: -------------------------------------------------------------------------------- 1 | import Dropdown from './src/dropdown.vue' 2 | 3 | Dropdown.install = function (Vue) { 4 | Vue.component(Dropdown.name, Dropdown) 5 | } 6 | 7 | export default Dropdown 8 | -------------------------------------------------------------------------------- /src/components/dropdown/src/dropdown-item.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 40 | -------------------------------------------------------------------------------- /src/components/dropdown/src/dropdown-menu.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /src/components/dropdown/src/dropdown.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 47 | -------------------------------------------------------------------------------- /src/components/form/index.js: -------------------------------------------------------------------------------- 1 | import Form from './src/form.vue' 2 | import FormItem from './src/form-item.vue' 3 | 4 | export { 5 | Form, 6 | FormItem 7 | } 8 | -------------------------------------------------------------------------------- /src/components/form/src/form.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 86 | -------------------------------------------------------------------------------- /src/components/input-number/index.js: -------------------------------------------------------------------------------- 1 | import InputNumber from './src/input-number.vue' 2 | 3 | InputNumber.install = function (Vue) { 4 | Vue.component(InputNumber.name, InputNumber) 5 | } 6 | 7 | export default InputNumber 8 | -------------------------------------------------------------------------------- /src/components/input/index.js: -------------------------------------------------------------------------------- 1 | import Input from './src/input.vue' 2 | 3 | Input.install = function (Vue) { 4 | Vue.component(Input.name, Input) 5 | } 6 | 7 | export default Input 8 | -------------------------------------------------------------------------------- /src/components/loading-bar/index.js: -------------------------------------------------------------------------------- 1 | import LoadingBar from './src/loading-bar' 2 | 3 | let loadingBarInstance 4 | let width = 2 5 | let timer 6 | 7 | function getLoadingBarInstance () { 8 | loadingBarInstance = loadingBarInstance || new LoadingBar({ width }) 9 | return loadingBarInstance 10 | } 11 | 12 | function update (options) { 13 | const instance = getLoadingBarInstance() 14 | 15 | instance.update(options) 16 | } 17 | 18 | function hide () { 19 | setTimeout(() => { 20 | update({ 21 | percent: 0, 22 | show: false 23 | }) 24 | destroy() 25 | }, 800) 26 | } 27 | 28 | function destroy () { 29 | const instance = getLoadingBarInstance() 30 | clearTimer() 31 | loadingBarInstance = null 32 | instance.destroy() 33 | } 34 | 35 | function clearTimer () { 36 | if (timer) { 37 | clearInterval(timer) 38 | timer = null 39 | } 40 | } 41 | 42 | export default { 43 | start () { 44 | if (timer) return 45 | 46 | let percent = 0 47 | 48 | update({ 49 | percent, 50 | status: 'success', 51 | show: true 52 | }) 53 | 54 | timer = setInterval(() => { 55 | percent += Math.floor((Math.random() * 3) + 5) 56 | if (percent > 95) { 57 | clearTimer() 58 | } 59 | update({ 60 | percent, 61 | status: 'success', 62 | show: true 63 | }) 64 | }, 200) 65 | }, 66 | update (percent) { 67 | clearTimer() 68 | update({ 69 | percent, 70 | status: 'success', 71 | show: true 72 | }) 73 | }, 74 | finish () { 75 | clearTimer() 76 | update({ 77 | percent: 100, 78 | status: 'success', 79 | show: true 80 | }) 81 | hide() 82 | }, 83 | error () { 84 | clearTimer() 85 | update({ 86 | percent: 100, 87 | status: 'error', 88 | show: true 89 | }) 90 | hide() 91 | }, 92 | config (options) { 93 | if (options.width) { 94 | width = options.width 95 | } 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /src/components/loading-bar/src/loading-bar.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import LoadingBarVue from './loading-bar.vue' 3 | 4 | const LoadingBarConstructor = Vue.extend(LoadingBarVue) 5 | let instance 6 | 7 | class LoadingBar { 8 | constructor (options) { 9 | options = options || {} 10 | 11 | instance = new LoadingBarConstructor({ 12 | data: options 13 | }) 14 | 15 | instance.vm = instance.$mount() 16 | document.body.appendChild(instance.vm.$el) 17 | } 18 | 19 | update (newOptions) { 20 | if (newOptions.percent) { 21 | instance.percent = newOptions.percent 22 | } 23 | if (newOptions.status) { 24 | instance.status = newOptions.status 25 | } 26 | if (newOptions.show) { 27 | instance.show = newOptions.show 28 | } 29 | } 30 | 31 | destroy () { 32 | document.body.removeChild(instance.vm.$el) 33 | } 34 | } 35 | 36 | export default LoadingBar 37 | -------------------------------------------------------------------------------- /src/components/loading-bar/src/loading-bar.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 35 | -------------------------------------------------------------------------------- /src/components/menu-item-group/index.js: -------------------------------------------------------------------------------- 1 | import MenuItemGroup from '../menu/src/menu-group.vue' 2 | 3 | MenuItemGroup.install = function (Vue) { 4 | Vue.component(MenuItemGroup.name, MenuItemGroup) 5 | } 6 | 7 | export default MenuItemGroup 8 | -------------------------------------------------------------------------------- /src/components/menu-item/index.js: -------------------------------------------------------------------------------- 1 | import MenuItem from '../menu/src/menu-item.vue' 2 | 3 | MenuItem.install = function (Vue) { 4 | Vue.component(MenuItem.name, MenuItem) 5 | } 6 | 7 | export default MenuItem 8 | -------------------------------------------------------------------------------- /src/components/menu/index.js: -------------------------------------------------------------------------------- 1 | import Menu from './src/menu.vue' 2 | 3 | Menu.install = function (Vue) { 4 | Vue.component(Menu.name, Menu) 5 | } 6 | 7 | export default Menu 8 | -------------------------------------------------------------------------------- /src/components/menu/src/menu-group.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /src/components/menu/src/menu-item.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 83 | 84 | -------------------------------------------------------------------------------- /src/components/menu/src/menu.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 100 | -------------------------------------------------------------------------------- /src/components/message/index.js: -------------------------------------------------------------------------------- 1 | import Message from './src/message.js' 2 | 3 | export default Message 4 | -------------------------------------------------------------------------------- /src/components/message/src/message.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import MessageVue from './message.vue' 3 | 4 | const MessageConstructor = Vue.extend(MessageVue) 5 | 6 | const messageType = ['info', 'success', 'warning', 'error', 'loading'] 7 | const instances = [] 8 | let seed = 1 9 | let zindexSeed = 1010 10 | 11 | const Message = options => { 12 | if (Vue.prototype.$isServer) return 13 | options = options || {} 14 | 15 | if (typeof options === 'string') { 16 | options = { 17 | message: options 18 | } 19 | } 20 | 21 | const customCloseFunc = options.onClose 22 | const id = `message_${seed++}` 23 | 24 | options.onClose = () => { 25 | Message.close(id, customCloseFunc) 26 | } 27 | 28 | const instance = new MessageConstructor({ 29 | data: options 30 | }) 31 | 32 | instance.id = id 33 | instance.vm = instance.$mount() 34 | document.body.appendChild(instance.vm.$el) 35 | instance.vm.visible = true 36 | instance.dom = instance.vm.$el 37 | instance.dom.style.zIndex = zindexSeed++ 38 | 39 | const offset = 0 40 | const len = instances.length 41 | let topDist = offset 42 | 43 | for (let i = 0; i < len; i++) { 44 | topDist += instances[i].$el.offsetHeight + 8 45 | } 46 | 47 | topDist += 8 48 | instance.top = topDist 49 | 50 | instances.push(instance) 51 | 52 | // 返回关闭方法，用于手动消除 53 | return function () { 54 | instance.vm.close(id) 55 | } 56 | } 57 | 58 | Message.close = (id, customCloseFunc) => { 59 | const len = instances.length 60 | let index, removedHeight 61 | 62 | for (let i = 0; i < len; i++) { 63 | if (id === instances[i].id) { 64 | if (typeof customCloseFunc === 'function') { 65 | customCloseFunc(instances[i]) 66 | } 67 | index = i 68 | removedHeight = instances[i].dom.offsetHeight 69 | instances.splice(i, 1) 70 | break 71 | } 72 | } 73 | 74 | if (len > 1) { 75 | for (let i = index; i < len - 1; i++) { 76 | instances[i].dom.style.top = `${parseInt(instances[i].dom.style.top) - removedHeight - 8}px` 77 | } 78 | } 79 | } 80 | 81 | Message.closeAll = () => { 82 | instances.forEach((elem, idx) => { 83 | elem.close() 84 | }) 85 | } 86 | 87 | messageType.forEach(type => { 88 | Message[type] = options => { 89 | if (typeof options === 'string') { 90 | options = { 91 | message: options 92 | } 93 | } 94 | options.type = type 95 | options.icon = options.icon 96 | return Message(options) 97 | } 98 | }) 99 | 100 | export default Message 101 | -------------------------------------------------------------------------------- /src/components/message/src/message.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 83 | -------------------------------------------------------------------------------- /src/components/modal/index.js: -------------------------------------------------------------------------------- 1 | import Modal from './src/modal.vue' 2 | 3 | Modal.install = function (Vue) { 4 | Vue.component(Modal.name, Modal) 5 | } 6 | 7 | export default Modal 8 | -------------------------------------------------------------------------------- /src/components/notification/index.js: -------------------------------------------------------------------------------- 1 | import Notification from './src/notic.js' 2 | 3 | export default Notification 4 | -------------------------------------------------------------------------------- /src/components/notification/src/notic.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import NotificationVue from './notification.vue' 3 | 4 | const NotificationConstructor = Vue.extend(NotificationVue) 5 | 6 | const noticeType = ['success', 'error', 'warning', 'info'] 7 | const instances = [] 8 | let instance 9 | let seed = 1 10 | let zindexSeed = 1010 11 | 12 | const Notification = options => { 13 | if (Vue.prototype.$isServer) return 14 | options = options || {} 15 | 16 | const onClose = options.onClose 17 | const id = `notification_${seed++}` 18 | 19 | options.onClose = function () { 20 | Notification.close(id, onClose) 21 | } 22 | 23 | instance = new NotificationConstructor({ 24 | data: options 25 | }) 26 | 27 | instance.id = id 28 | instance.vm = instance.$mount() 29 | document.body.appendChild(instance.vm.$el) 30 | instance.vm.isShow = true 31 | instance.dom = instance.vm.$el 32 | instance.dom.style.zIndex = (zindexSeed++) 33 | 34 | const offset = 0 35 | let topDist = offset 36 | 37 | for (let i = 0, len = instances.length; i < len; i++) { 38 | topDist += instances[i].$el.offsetHeight + 16 39 | } 40 | 41 | topDist += 16 42 | instance.top = topDist 43 | instances.push(instance) 44 | 45 | return instance.vm 46 | } 47 | 48 | Notification.close = function (id, onClose) { 49 | const len = instances.length 50 | let index 51 | let removedHeight 52 | let i = 0 53 | 54 | for (i = 0; i < len; i++) { 55 | if (id === instances[i].id) { 56 | if (typeof onClose === 'function') { 57 | onClose(instances[i]) 58 | } 59 | index = i 60 | removedHeight = instances[i].dom.offsetHeight 61 | instances.splice(i, 1) 62 | break 63 | } 64 | } 65 | 66 | if (len > 1) { 67 | for (i = index; i < len - 1; i++) { 68 | instances[i].dom.style.top = `${parseInt(instances[i].dom.style.top) - removedHeight - 16}px` 69 | } 70 | } 71 | } 72 | 73 | noticeType.forEach(type => { 74 | Notification[type] = options => { 75 | if (typeof options === 'string') { 76 | options = { 77 | message: options 78 | } 79 | } 80 | 81 | options.type = type 82 | return Notification(options) 83 | } 84 | }) 85 | 86 | export default Notification 87 | -------------------------------------------------------------------------------- /src/components/notification/src/notification.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 92 | -------------------------------------------------------------------------------- /src/components/option-group/index.js: -------------------------------------------------------------------------------- 1 | import OptionGroup from '../select/src/option-group.vue' 2 | 3 | OptionGroup.install = function (Vue) { 4 | Vue.component(OptionGroup.name, OptionGroup) 5 | } 6 | 7 | export default OptionGroup 8 | -------------------------------------------------------------------------------- /src/components/option/index.js: -------------------------------------------------------------------------------- 1 | import Option from '../select/src/option.vue' 2 | 3 | Option.install = function (Vue) { 4 | Vue.component(Option.name, Option) 5 | } 6 | 7 | export default Option 8 | -------------------------------------------------------------------------------- /src/components/pagination/index.js: -------------------------------------------------------------------------------- 1 | import Pagination from './src/pagination.vue' 2 | 3 | Pagination.install = function (Vue) { 4 | Vue.component(Pagination.name, Pagination) 5 | } 6 | 7 | export default Pagination 8 | -------------------------------------------------------------------------------- /src/components/popover/index.js: -------------------------------------------------------------------------------- 1 | import Popover from './src/popover.vue' 2 | 3 | Popover.install = function (Vue) { 4 | Vue.component(Popover.name, Popover) 5 | } 6 | 7 | export default Popover 8 | -------------------------------------------------------------------------------- /src/components/popover/src/popover.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 57 | -------------------------------------------------------------------------------- /src/components/progress/index.js: -------------------------------------------------------------------------------- 1 | import Progress from './src/progress.vue' 2 | 3 | Progress.install = function (Vue) { 4 | Vue.component(Progress.name, Progress) 5 | } 6 | 7 | export default Progress 8 | -------------------------------------------------------------------------------- /src/components/progress/src/progress.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 86 | -------------------------------------------------------------------------------- /src/components/radio-button/index.js: -------------------------------------------------------------------------------- 1 | import RadioButton from '../radio/src/radio-button.vue' 2 | 3 | RadioButton.install = function (Vue) { 4 | Vue.component(RadioButton.name, RadioButton) 5 | } 6 | 7 | export default RadioButton 8 | -------------------------------------------------------------------------------- /src/components/radio-group/index.js: -------------------------------------------------------------------------------- 1 | import RadioGroup from '../radio/src/radio-group.vue' 2 | 3 | RadioGroup.install = function (Vue) { 4 | Vue.component(RadioGroup.name, RadioGroup) 5 | } 6 | 7 | export default RadioGroup 8 | -------------------------------------------------------------------------------- /src/components/radio/index.js: -------------------------------------------------------------------------------- 1 | import Radio from './src/radio.vue' 2 | 3 | Radio.install = function (Vue) { 4 | Vue.component(Radio.name, Radio) 5 | } 6 | 7 | export default Radio 8 | -------------------------------------------------------------------------------- /src/components/radio/src/radio-button.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 67 | -------------------------------------------------------------------------------- /src/components/radio/src/radio-group.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 30 | -------------------------------------------------------------------------------- /src/components/radio/src/radio.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 69 | -------------------------------------------------------------------------------- /src/components/rate/index.js: -------------------------------------------------------------------------------- 1 | import Rate from './src/rate.vue' 2 | 3 | Rate.install = function (Vue) { 4 | Vue.component(Rate.name, Rate) 5 | } 6 | 7 | export default Rate 8 | -------------------------------------------------------------------------------- /src/components/select/index.js: -------------------------------------------------------------------------------- 1 | import Select from './src/select.vue' 2 | 3 | Select.install = function (Vue) { 4 | Vue.component(Select.name, Select) 5 | } 6 | 7 | export default Select 8 | -------------------------------------------------------------------------------- /src/components/select/src/dropdown.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 46 | -------------------------------------------------------------------------------- /src/components/select/src/option-group.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 21 | -------------------------------------------------------------------------------- /src/components/select/src/option.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 88 | -------------------------------------------------------------------------------- /src/components/slider/index.js: -------------------------------------------------------------------------------- 1 | import Slider from './src/slider.vue' 2 | 3 | Slider.install = function (Vue) { 4 | Vue.component(Slider.name, Slider) 5 | } 6 | 7 | export default Slider 8 | -------------------------------------------------------------------------------- /src/components/step/index.js: -------------------------------------------------------------------------------- 1 | import Step from '../steps/src/step.vue' 2 | 3 | Step.install = function (Vue) { 4 | Vue.component(Step.name, Step) 5 | } 6 | 7 | export default Step 8 | -------------------------------------------------------------------------------- /src/components/steps/index.js: -------------------------------------------------------------------------------- 1 | import Steps from './src/steps.vue' 2 | 3 | Steps.install = function (Vue) { 4 | Vue.component(Steps.name, Steps) 5 | } 6 | 7 | export default Steps 8 | -------------------------------------------------------------------------------- /src/components/steps/src/steps.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 85 | 86 | -------------------------------------------------------------------------------- /src/components/submenu/index.js: -------------------------------------------------------------------------------- 1 | import Submenu from '../menu/src/submenu.vue' 2 | 3 | Submenu.install = function (Vue) { 4 | Vue.component(Submenu.name, Submenu) 5 | } 6 | 7 | export default Submenu 8 | -------------------------------------------------------------------------------- /src/components/switch/index.js: -------------------------------------------------------------------------------- 1 | import Switch from './src/switch.vue' 2 | 3 | Switch.install = function (Vue) { 4 | Vue.component(Switch.name, Switch) 5 | } 6 | 7 | export default Switch 8 | -------------------------------------------------------------------------------- /src/components/switch/src/switch.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 48 | -------------------------------------------------------------------------------- /src/components/tab-pane/index.js: -------------------------------------------------------------------------------- 1 | import TabPane from '../tabs/src/tab-pane.vue' 2 | 3 | TabPane.install = function (Vue) { 4 | Vue.component(TabPane.name, TabPane) 5 | } 6 | 7 | export default TabPane 8 | -------------------------------------------------------------------------------- /src/components/table/index.js: -------------------------------------------------------------------------------- 1 | import Table from './src/table.vue' 2 | 3 | Table.install = function (Vue) { 4 | Vue.component(Table.name, Table) 5 | } 6 | 7 | export default Table 8 | -------------------------------------------------------------------------------- /src/components/table/src/render.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'Cell', 3 | functional: true, 4 | props: { 5 | item: Object, 6 | column: Object, 7 | index: Number, 8 | render: Function 9 | }, 10 | render: (h, ctx) => { 11 | const params = { 12 | item: ctx.props.item, 13 | index: ctx.props.index 14 | } 15 | if (ctx.props.column) { 16 | params.column = ctx.props.column 17 | } 18 | return ctx.props.render(h, params) 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/components/tabs/index.js: -------------------------------------------------------------------------------- 1 | import Tabs from './src/tabs.vue' 2 | 3 | Tabs.install = function (Vue) { 4 | Vue.component(Tabs.name, Tabs) 5 | } 6 | 7 | export default Tabs 8 | -------------------------------------------------------------------------------- /src/components/tabs/src/tab-pane.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 50 | -------------------------------------------------------------------------------- /src/components/tag/index.js: -------------------------------------------------------------------------------- 1 | import Tag from './src/tag.vue' 2 | 3 | Tag.install = function (Vue) { 4 | Vue.component(Tag.name, Tag) 5 | } 6 | 7 | export default Tag 8 | -------------------------------------------------------------------------------- /src/components/tag/src/tag.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 57 | -------------------------------------------------------------------------------- /src/components/textarea/index.js: -------------------------------------------------------------------------------- 1 | import Textarea from './src/textarea.vue' 2 | 3 | Textarea.install = function (Vue) { 4 | Vue.component(Textarea.name, Textarea) 5 | } 6 | 7 | export default Textarea 8 | -------------------------------------------------------------------------------- /src/components/textarea/src/textarea.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 104 | -------------------------------------------------------------------------------- /src/components/textarea/src/utils.js: -------------------------------------------------------------------------------- 1 | /** 2 | * https://github.com/ElemeFE/element/blob/dev/packages/input/src/calcTextareaHeight.js 3 | */ 4 | let hiddenTextarea 5 | 6 | const HIDDEN_STYLE = [ 7 | 'position: absolute !important;', 8 | 'top: 0 !important;', 9 | 'right: 0 !important;', 10 | 'height: 0 !important;', 11 | 'visibility: hidden !important;', 12 | 'overflow: hidden !important;', 13 | 'z-index: -1000 !important;' 14 | ] 15 | 16 | const CONTEXT_STYLE = [ 17 | 'letter-spacing', 18 | 'line-height', 19 | 'padding-top', 20 | 'padding-bottom', 21 | 'font-family', 22 | 'font-weight', 23 | 'font-size', 24 | 'text-rendering', 25 | 'text-transform', 26 | 'width', 27 | 'text-indent', 28 | 'padding-left', 29 | 'padding-right', 30 | 'border-width', 31 | 'box-sizing' 32 | ] 33 | 34 | function calculateNodeStyling (node) { 35 | const style = window.getComputedStyle(node) 36 | const boxSizing = style.getPropertyValue('box-sizing') 37 | const paddingSize = ( 38 | parseFloat(style.getPropertyValue('padding-bottom')) + 39 | parseFloat(style.getPropertyValue('padding-top')) 40 | ) 41 | const borderSize = ( 42 | parseFloat(style.getPropertyValue('border-bottom-width')) + 43 | parseFloat(style.getPropertyValue('border-top-width')) 44 | ) 45 | const contextStyle = CONTEXT_STYLE.map(name => `${name}:${style.getPropertyValue(name)}`).join(';') 46 | 47 | return { boxSizing, paddingSize, borderSize, contextStyle } 48 | } 49 | 50 | export function calcTextareaHeight (targetNode, minRows = 1, maxRows = null) { 51 | if (!hiddenTextarea) { 52 | hiddenTextarea = document.createElement('textarea') 53 | document.body.appendChild(hiddenTextarea) 54 | } 55 | 56 | const { boxSizing, paddingSize, borderSize, contextStyle } = calculateNodeStyling(targetNode) 57 | 58 | hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE.join('')}`) 59 | hiddenTextarea.value = targetNode.value || targetNode.placeholder || '' 60 | 61 | const result = {} 62 | let height = hiddenTextarea.scrollHeight 63 | 64 | if (boxSizing === 'border-box') { 65 | height += borderSize 66 | } else if (boxSizing === 'content-box') { 67 | height -= paddingSize 68 | } 69 | 70 | hiddenTextarea.value = '' 71 | 72 | const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize 73 | 74 | if (minRows !== null) { 75 | let minHeight = singleRowHeight * minRows 76 | if (boxSizing === 'border-box') { 77 | minHeight = minHeight + paddingSize + borderSize 78 | } 79 | height = Math.max(minHeight, height) 80 | result.minHeight = `${minHeight}px` 81 | } 82 | 83 | if (maxRows !== null) { 84 | let maxHeight = singleRowHeight * maxRows 85 | if (boxSizing === 'border-box') { 86 | maxHeight = maxHeight + paddingSize + borderSize 87 | } 88 | height = Math.min(maxHeight, height) 89 | } 90 | 91 | result.height = `${height}px` 92 | hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea) 93 | hiddenTextarea = null 94 | 95 | return result 96 | } 97 | -------------------------------------------------------------------------------- /src/components/timeline-item/index.js: -------------------------------------------------------------------------------- 1 | import TimelineItem from '../timeline/src/timeline-item.vue' 2 | 3 | TimelineItem.install = function (Vue) { 4 | Vue.component(TimelineItem.name, TimelineItem) 5 | } 6 | 7 | export default TimelineItem 8 | -------------------------------------------------------------------------------- /src/components/timeline/index.js: -------------------------------------------------------------------------------- 1 | import Timeline from './src/timeline.vue' 2 | 3 | Timeline.install = function (Vue) { 4 | Vue.component(Timeline.name, Timeline) 5 | } 6 | 7 | export default Timeline 8 | -------------------------------------------------------------------------------- /src/components/timeline/src/timeline-item.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 68 | 69 | -------------------------------------------------------------------------------- /src/components/timeline/src/timeline.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 28 | -------------------------------------------------------------------------------- /src/components/tooltip/index.js: -------------------------------------------------------------------------------- 1 | import Tooltip from './src/tooltip.vue' 2 | 3 | Tooltip.install = function (Vue) { 4 | Vue.component(Tooltip.name, Tooltip) 5 | } 6 | 7 | export default Tooltip 8 | -------------------------------------------------------------------------------- /src/components/tooltip/src/tooltip.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 42 | -------------------------------------------------------------------------------- /src/directives/clickoutside.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Directive - clickoutside 3 | * a callback invoked when a target element was not clicked, it was clicked outside the target DOM element 4 | */ 5 | export default { 6 | bind (el, binding) { 7 | el._handler = evt => { 8 | if (!el.contains(evt.target) && binding.expression) { 9 | binding.value(evt) 10 | } 11 | } 12 | 13 | document.addEventListener('click', el._handler) 14 | }, 15 | unbind (el, binding) { 16 | document.removeEventListener('click', el._handler) 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/locale/README.md: -------------------------------------------------------------------------------- 1 | # Internationalization 2 | 3 | The default language is English (en-US). The internationalization of `AT-UI` is based on [vue-i18n](https://github.com/kazupon/vue-i18n), which makes it eaiser to switch between multiple languages. 4 | 5 | Put the file of language into the `lang` folder. 6 | -------------------------------------------------------------------------------- /src/locale/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Simplified version 3 | * https://github.com/ElemeFE/element/blob/dev/src/locale/index.js 4 | */ 5 | import Vue from 'vue' 6 | import deepmerge from 'deepmerge' 7 | import defaultLang from './lang/en-US' 8 | 9 | let lang = defaultLang 10 | let merged = false 11 | let i18nHandler = function (...args) { 12 | const vuei18n = Object.getPrototypeOf(this || Vue).$t 13 | 14 | if (typeof vuei18n === 'function' && !!Vue.locale) { 15 | if (!merged) { 16 | merged = true 17 | Vue.locale( 18 | Vue.config.lang, 19 | deepmerge(lang, Vue.locale(Vue.config.lang) || {}, { clone: true }) 20 | ) 21 | } 22 | return vuei18n.apply(this, args) 23 | } 24 | } 25 | 26 | export const t = function (...args) { 27 | let value = i18nHandler.apply(this, args) 28 | if (value !== null && typeof value !== 'undefined') { 29 | return value 30 | } 31 | 32 | const array = args[0].split('.') 33 | let current = lang 34 | 35 | for (let i = 0, len = array.length; i < len; i++) { 36 | const property = array[i] 37 | value = current[property] 38 | 39 | if (i === len - 1) { 40 | return value 41 | } else if (!value) { 42 | return '' 43 | } 44 | 45 | current = value 46 | } 47 | 48 | return '' 49 | } 50 | 51 | export const use = function (l) { 52 | lang = l || lang 53 | } 54 | 55 | export const i18n = function (fn) { 56 | i18nHandler = fn || i18nHandler 57 | } 58 | 59 | export default { use, t, i18n } 60 | -------------------------------------------------------------------------------- /src/locale/lang/de.js: -------------------------------------------------------------------------------- 1 | export default { 2 | at: { 3 | select: { 4 | placeholder: 'Auswählen', 5 | notFoundText: 'keine Übereinstimmung' 6 | }, 7 | modal: { 8 | okText: 'Bestätigen', 9 | cancelText: 'Abbrechen' 10 | }, 11 | pagination: { 12 | prevText: 'Vorherige Seite', 13 | nextText: 'Nächste Seite', 14 | total: 'Gesamt', 15 | item: 'Inhalt', 16 | items: 'Inhalte', 17 | pageSize: '/ Seite', 18 | goto: 'Gehe zu', 19 | pageText: '', 20 | prev5Text: 'Vorherige 5 Seiten', 21 | next5Text: 'Nächste 5 Seiten' 22 | }, 23 | table: { 24 | emptyText: 'Keine Daten' 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/locale/lang/en-US.js: -------------------------------------------------------------------------------- 1 | export default { 2 | at: { 3 | select: { 4 | placeholder: 'Select', 5 | notFoundText: 'No matching data' 6 | }, 7 | modal: { 8 | okText: 'OK', 9 | cancelText: 'Cancel' 10 | }, 11 | pagination: { 12 | prevText: 'Previous Page', 13 | nextText: 'Next Page', 14 | total: 'Total', 15 | item: 'item', 16 | items: 'items', 17 | pageSize: '/ page', 18 | goto: 'Goto', 19 | pageText: '', 20 | prev5Text: 'Previous 5 Pages', 21 | next5Text: 'Next 5 Pages' 22 | }, 23 | table: { 24 | emptyText: 'No data' 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/locale/lang/fa-IR.js: -------------------------------------------------------------------------------- 1 | export default { 2 | at: { 3 | select: { 4 | placeholder: 'انتخاب کنید', 5 | notFoundText: 'موردی یافت نشد' 6 | }, 7 | modal: { 8 | okText: 'تایید', 9 | cancelText: 'لغو' 10 | }, 11 | pagination: { 12 | prevText: 'صفحه‌ی قبل', 13 | nextText: 'صفحه‌ی بعد', 14 | total: 'تمام', 15 | item: 'مورد', 16 | items: 'مورد', 17 | pageSize: '/ صفحه', 18 | goto: 'برو به', 19 | pageText: '', 20 | prev5Text: 'پنج صفحه‌ی قبلی', 21 | next5Text: 'پنج صفحه‌ی بعدی' 22 | }, 23 | table: { 24 | emptyText: 'بدون داده' 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/locale/lang/ko-KR.js: -------------------------------------------------------------------------------- 1 | export default { 2 | at: { 3 | select: { 4 | placeholder: '선택', 5 | notFoundText: '찾는 데이터가 없습니다' 6 | }, 7 | modal: { 8 | okText: '확인', 9 | cancelText: '취소' 10 | }, 11 | pagination: { 12 | prevText: '이전 페이지', 13 | nextText: '다음 페이지', 14 | total: '전체', 15 | item: '항목', 16 | items: '항목', 17 | pageSize: '/ 페이지', 18 | goto: '이동', 19 | pageText: '', 20 | prev5Text: '이전 5 페이지', 21 | next5Text: '다음 5 페이지' 22 | }, 23 | table: { 24 | emptyText: '데이터가 없습니다' 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/locale/lang/pt-BR.js: -------------------------------------------------------------------------------- 1 | export default { 2 | at: { 3 | select: { 4 | placeholder: 'Selecione', 5 | notFoundText: 'Nenhum dado correspondente' 6 | }, 7 | modal: { 8 | okText: 'OK', 9 | cancelText: 'Cancelar' 10 | }, 11 | pagination: { 12 | prevText: 'Página anterior', 13 | nextText: 'Próxima página', 14 | total: 'Total', 15 | item: 'item', 16 | items: 'itens', 17 | pageSize: '/ página', 18 | goto: 'Ir para', 19 | pageText: '', 20 | prev5Text: '5 Páginas anteriores', 21 | next5Text: 'Próximas 5 Páginas' 22 | }, 23 | table: { 24 | emptyText: 'Sem dados' 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/locale/lang/zh-CN.js: -------------------------------------------------------------------------------- 1 | export default { 2 | at: { 3 | select: { 4 | placeholder: '请选择', 5 | notFoundText: '无匹配数据' 6 | }, 7 | modal: { 8 | okText: '确定', 9 | cancelText: '取消' 10 | }, 11 | pagination: { 12 | prevText: '上一页', 13 | nextText: '下一页', 14 | total: '共', 15 | item: '条', 16 | items: '条', 17 | pageSize: '条/页', 18 | goto: '前往', 19 | pageText: '页', 20 | prev5Text: '向前5页', 21 | next5Text: '向后5页' 22 | }, 23 | table: { 24 | emptyText: '暂无数据' 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/mixins/emitter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Use Hack to implement 'dispatch' and 'broadcast' methods in vue 1.x 3 | */ 4 | function broadcast (componentName, eventName, params) { 5 | this.$children.forEach(child => { 6 | const name = child.$options.name 7 | 8 | if (name === componentName) { 9 | child.$emit.apply(child, [eventName].concat(params)) 10 | } else { 11 | broadcast.apply(child, [componentName, eventName].concat([params])) 12 | } 13 | }) 14 | } 15 | export default { 16 | methods: { 17 | dispatch (componentName, eventName, params) { 18 | let parent = this.$parent || this.$root 19 | let name = parent.$options.name 20 | 21 | while (parent && (!name || name !== componentName)) { 22 | parent = parent.$parent 23 | 24 | if (parent) { 25 | name = parent.$options.name 26 | } 27 | } 28 | 29 | if (parent) { 30 | parent.$emit.apply(parent, [eventName].concat(params)) 31 | } 32 | }, 33 | broadcast (componentName, eventName, params) { 34 | broadcast.call(this, componentName, eventName, params) 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/mixins/locale.js: -------------------------------------------------------------------------------- 1 | import { t } from '../locale' 2 | 3 | export default { 4 | methods: { 5 | t (...args) { 6 | return t.apply(this, args) 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/utils/collapse-transition.js: -------------------------------------------------------------------------------- 1 | /** 2 | * https://github.com/ElemeFE/element/blob/dev/src/transitions/collapse-transition.js 3 | */ 4 | 5 | /* eslint-disable */ 6 | import { addClass, removeClass } from './util'; 7 | 8 | const Transition = { 9 | beforeEnter(el) { 10 | addClass(el, 'collapse-transition'); 11 | if (!el.dataset) el.dataset = {}; 12 | 13 | el.dataset.oldPaddingTop = el.style.paddingTop; 14 | el.dataset.oldPaddingBottom = el.style.paddingBottom; 15 | 16 | el.style.height = '0'; 17 | el.style.paddingTop = 0; 18 | el.style.paddingBottom = 0; 19 | }, 20 | 21 | enter(el) { 22 | el.dataset.oldOverflow = el.style.overflow; 23 | if (el.scrollHeight !== 0) { 24 | el.style.height = el.scrollHeight + 'px'; 25 | el.style.paddingTop = el.dataset.oldPaddingTop; 26 | el.style.paddingBottom = el.dataset.oldPaddingBottom; 27 | } else { 28 | el.style.height = ''; 29 | el.style.paddingTop = el.dataset.oldPaddingTop; 30 | el.style.paddingBottom = el.dataset.oldPaddingBottom; 31 | } 32 | 33 | el.style.overflow = 'hidden'; 34 | }, 35 | 36 | afterEnter(el) { 37 | // for safari: remove class then reset height is necessary 38 | removeClass(el, 'collapse-transition'); 39 | el.style.height = ''; 40 | el.style.overflow = el.dataset.oldOverflow; 41 | }, 42 | 43 | beforeLeave(el) { 44 | if (!el.dataset) el.dataset = {}; 45 | el.dataset.oldPaddingTop = el.style.paddingTop; 46 | el.dataset.oldPaddingBottom = el.style.paddingBottom; 47 | el.dataset.oldOverflow = el.style.overflow; 48 | 49 | el.style.height = el.scrollHeight + 'px'; 50 | el.style.overflow = 'hidden'; 51 | }, 52 | 53 | leave(el) { 54 | if (el.scrollHeight !== 0) { 55 | // for safari: add class after set height, or it will jump to zero height suddenly, weired 56 | addClass(el, 'collapse-transition'); 57 | el.style.height = 0; 58 | el.style.paddingTop = 0; 59 | el.style.paddingBottom = 0; 60 | } 61 | }, 62 | 63 | afterLeave(el) { 64 | removeClass(el, 'collapse-transition'); 65 | el.style.height = ''; 66 | el.style.overflow = el.dataset.oldOverflow; 67 | el.style.paddingTop = el.dataset.oldPaddingTop; 68 | el.style.paddingBottom = el.dataset.oldPaddingBottom; 69 | } 70 | }; 71 | 72 | export default { 73 | name: 'CollapseTransition', 74 | functional: true, 75 | render(h, { children }) { 76 | const data = { 77 | on: Transition 78 | }; 79 | 80 | return h('transition', data, children); 81 | } 82 | }; 83 | 84 | /* eslint-enable */ 85 | --------------------------------------------------------------------------------