├── .babelrc ├── .editorconfig ├── .eslintrc.js ├── .github └── ISSUE_TEMPLATE.md ├── .gitignore ├── .lesshintrc ├── .tern-project ├── .travis.yml ├── AUTHORS.txt ├── CHANGELOG.md ├── LICENSE ├── README.md ├── Untitled Diagram.xml ├── build ├── karma.base.config.js ├── karma.cover.config.js ├── karma.dev.config.js ├── karma.sauce.config.js ├── karma.unit.config.js ├── webconfig.config.js └── webpack.lib.js ├── dist ├── atui.js ├── atuiFilter.js ├── atuiWidget.js ├── greater-blue.css ├── style.js ├── tao-orange.css ├── tmall-red.css ├── vue.dev.js ├── vue.js └── vue.min.js ├── docs ├── atui │ ├── case.md │ ├── getting-started.md │ ├── introduce.md │ └── upgrade-notes.md ├── pattern │ ├── advanced-search.md │ ├── classic.md │ ├── complex-table.md │ ├── form.md │ ├── list.md │ ├── navigation.md │ └── table.md ├── practice │ ├── bussiness.md │ └── cases.md ├── resource │ ├── download.en-US.md │ ├── download.zh-CN.md │ ├── github.md │ └── reference.md ├── spec │ ├── alignment.md │ ├── colors.md │ ├── contrast.md │ ├── direct.md │ ├── feature.md │ ├── font.md │ ├── introduce.md │ ├── invitation.md │ ├── layout │ │ ├── demo │ │ │ ├── aside-collapse.md │ │ │ ├── aside.md │ │ │ ├── ceiling.md │ │ │ ├── top-aside.md │ │ │ └── top.md │ │ └── index.md │ ├── lightweight.md │ ├── motion.md │ ├── principle.md │ ├── proximity.md │ ├── reaction.md │ ├── repetition.md │ ├── stay.md │ ├── transition.md │ └── typography.md └── widgets │ └── introduce.md ├── package.json ├── post-site.sh ├── scripts └── lesshint-report.js ├── site ├── bisheng.config.js └── theme │ ├── en-US.js │ ├── index.js │ ├── static │ ├── antd.min.css │ ├── colors.less │ ├── common.less │ ├── demo.less │ ├── font.less │ ├── footer.less │ ├── header.less │ ├── highlight.less │ ├── home.less │ ├── markdown.less │ ├── mock-browser.less │ ├── motion.less │ ├── new-version-info-modal.less │ ├── not-found.less │ ├── nprogress.less │ ├── page-nav.less │ ├── preview-img.less │ ├── resource.less │ ├── responsive.less │ ├── style.js │ ├── template.html │ ├── themes-changer.less │ └── toc.less │ ├── template │ ├── BrowserDemo.jsx │ ├── Comp │ │ └── Div.jsx │ ├── Content │ │ ├── Article.jsx │ │ ├── ComponentDoc.jsx │ │ ├── Demo.jsx │ │ ├── MainContent.jsx │ │ └── index.jsx │ ├── Home │ │ ├── Banner.jsx │ │ ├── Link.jsx │ │ ├── Page1.jsx │ │ ├── Page2.jsx │ │ ├── Page3.jsx │ │ ├── Page4.jsx │ │ └── index.jsx │ ├── IconSet │ │ ├── CopyableIcon.jsx │ │ └── index.jsx │ ├── Layout │ │ ├── Footer.jsx │ │ ├── Header.jsx │ │ └── index.jsx │ ├── NotFound.jsx │ └── utils.jsx │ └── zh-CN.js ├── src ├── components │ ├── .eslintrc │ ├── Accordion │ │ ├── Accordion.vue │ │ ├── Panel.vue │ │ ├── demo │ │ │ └── basic.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── accordion.test.js │ ├── Affix │ │ ├── Affix.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── offset.md │ │ │ └── target.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── affix.test.js │ ├── Badge │ │ ├── Badge.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── dot.md │ │ │ └── overflow.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── badge.test.js │ ├── Breadcrumb │ │ ├── Breadcrumb.vue │ │ ├── BreadcrumbItem.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ └── symbol.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── breadcrumb.test.js │ ├── Button │ │ ├── Button.vue │ │ ├── ButtonGroup.vue │ │ ├── demo │ │ │ ├── btn-group.md │ │ │ ├── icon.md │ │ │ ├── loading.md │ │ │ ├── primary.md │ │ │ ├── secondary.md │ │ │ ├── tertiary.md │ │ │ └── text.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ ├── button-group.test.js │ │ │ └── button.test.js │ ├── Calendar │ │ ├── Calendar.vue │ │ ├── demo │ │ │ └── basic.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── calendar.test.js │ ├── Carousel │ │ ├── CSlide.vue │ │ ├── Carousel.vue │ │ ├── animation │ │ │ ├── fade.vue │ │ │ ├── index.js │ │ │ └── normal.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── change.md │ │ │ └── fade.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── carousel.test.js │ ├── Cascader │ │ ├── Cascader.vue │ │ ├── demo │ │ │ └── basic.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── cascader.test.js │ ├── DatePicker │ │ ├── DatePicker.vue │ │ ├── RangePicker.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── disabled.md │ │ │ ├── disabledrange.md │ │ │ └── rangepicker.md │ │ ├── index.js │ │ ├── index.md │ │ ├── store.js │ │ └── test │ │ │ ├── datepicker.test.js │ │ │ └── rangepicker.test.js │ ├── Dropdown │ │ ├── Dropdown.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── hide.md │ │ │ ├── hover.md │ │ │ └── offset.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── dropdown.test.js │ ├── Form │ │ ├── Form.vue │ │ ├── FormInput.vue │ │ ├── FormItem.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ └── lateral.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── form.test.js │ ├── Icon │ │ ├── Icon.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── color.md │ │ │ ├── recommend.md │ │ │ └── size.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── icon.test.js │ ├── Input │ │ ├── Input.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── status.md │ │ │ └── valid.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── input.test.js │ ├── Layout │ │ ├── Col.vue │ │ ├── Row.vue │ │ ├── demo │ │ │ ├── admin.md │ │ │ └── basic.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── layout.test.js │ ├── Menu │ │ ├── Menu.vue │ │ ├── MenuItem.vue │ │ ├── MenuItemGroup.vue │ │ ├── SubMenu.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── data.md │ │ │ ├── open-one.md │ │ │ └── vertical.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── menu.test.js │ ├── Message │ │ ├── Message.vue │ │ ├── demo │ │ │ ├── arrow.md │ │ │ ├── basic.md │ │ │ ├── closable.md │ │ │ ├── icon.md │ │ │ ├── js-call.md │ │ │ └── styles.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── message.test.js │ ├── Modal │ │ ├── Modal.vue │ │ ├── demo │ │ │ ├── backdrop.md │ │ │ ├── basic.md │ │ │ ├── custom-size.md │ │ │ ├── custom-style.md │ │ │ ├── modal-comfirm.md │ │ │ └── modal-success.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── modal.test.js │ ├── Pagination │ │ ├── Jumper.vue │ │ ├── Options.vue │ │ ├── Pager.vue │ │ ├── Pagination.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── mini.md │ │ │ ├── show-size-changer.md │ │ │ └── simple.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── pagination.test.js │ ├── Popover │ │ ├── Popover.vue │ │ ├── demo │ │ │ ├── always-show.md │ │ │ ├── basic.md │ │ │ └── close.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── popover.test.js │ ├── Progress │ │ ├── Progress.vue │ │ └── index.js │ ├── Searchbox │ │ ├── Searchbox.vue │ │ ├── demo │ │ │ └── basic.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── searchbox.test.js │ ├── Select │ │ ├── Option.vue │ │ ├── Select.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── multiple.md │ │ │ ├── size.md │ │ │ └── tag.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── select.test.js │ ├── Slider │ │ ├── Slider.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── input.md │ │ │ └── range.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── slider.test.js │ ├── Spin │ │ ├── Spin.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── inside.md │ │ │ └── size.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── spin.test.js │ ├── Steps │ │ ├── Step.vue │ │ ├── Steps.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ └── description.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── steps.test.js │ ├── Switch │ │ ├── Switch.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── color.md │ │ │ └── slot.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── switch.test.js │ ├── Table │ │ ├── Table.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── custom.md │ │ │ ├── expandable.md │ │ │ ├── filter.md │ │ │ ├── pagination.md │ │ │ └── row-selection.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── table.test.js │ ├── Tabs │ │ ├── Tab.vue │ │ ├── Tabset.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── callback.md │ │ │ ├── disabled.md │ │ │ ├── dynamic.md │ │ │ ├── header.md │ │ │ └── trigger.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── tab.test.js │ ├── Tag │ │ ├── Tag.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── closable.md │ │ │ └── color.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── tag.test.js │ ├── Textarea │ │ ├── Textarea.vue │ │ ├── demo │ │ │ ├── auto-size.md │ │ │ ├── basic.md │ │ │ ├── limit-words.md │ │ │ └── words-count.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── textarea.test.js │ ├── TimePicker │ │ ├── TimePicker.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── disabled-range.md │ │ │ └── disabled.md │ │ ├── index.js │ │ ├── index.md │ │ ├── selection.js │ │ └── test │ │ │ └── timepicker.test.js │ ├── Tooltip │ │ ├── Tooltip.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── position.md │ │ │ └── trigger.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── tooltip.test.js │ ├── Tree │ │ ├── Tree.vue │ │ ├── TreeNode.vue │ │ ├── demo │ │ │ └── basic.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── tree.test.js │ ├── Trigger │ │ ├── Trigger.vue │ │ ├── demo │ │ │ ├── always-show.md │ │ │ ├── basic.md │ │ │ ├── offset.md │ │ │ ├── popup-in-popup.md │ │ │ ├── popup-multi.md │ │ │ ├── trigger-focus.md │ │ │ └── trigger-hover.md │ │ ├── index.js │ │ ├── index.md │ │ └── test │ │ │ └── trigger.test.js │ ├── Uploader │ │ ├── Uploader.vue │ │ ├── demo │ │ │ ├── basic.md │ │ │ └── dragdrop.md │ │ ├── index.js │ │ └── index.md │ ├── _utils │ │ ├── EventListener.js │ │ ├── GlobalMixin.js │ │ ├── cssAnimationSupported.js │ │ ├── getScroll.js │ │ └── getScrollBarWidth.js │ └── eventbus.js ├── directives │ └── scroll-load.js ├── filters │ ├── index.js │ └── phoneNumber.js ├── index.js ├── style.js ├── styles │ ├── address-select.less │ ├── badges.less │ ├── bootstrap.less │ ├── breadcrumbs.less │ ├── buttons.less │ ├── calendar.less │ ├── carousel.less │ ├── cascader.less │ ├── close.less │ ├── code.less │ ├── component-animations.less │ ├── datepicker.less │ ├── dropdowns.less │ ├── form.less │ ├── grid.less │ ├── iconfont.less │ ├── input.less │ ├── jumbotron.less │ ├── labels.less │ ├── media.less │ ├── menu.less │ ├── message.less │ ├── mixins.less │ ├── mixins │ │ ├── background-variant.less │ │ ├── border-radius.less │ │ ├── center-block.less │ │ ├── clearfix.less │ │ ├── forms.less │ │ ├── gradients.less │ │ ├── grid-framework.less │ │ ├── grid.less │ │ ├── hide-text.less │ │ ├── image.less │ │ ├── labels.less │ │ ├── list-group.less │ │ ├── nav-divider.less │ │ ├── nav-vertical-align.less │ │ ├── opacity.less │ │ ├── pagination.less │ │ ├── panels.less │ │ ├── progress-bar.less │ │ ├── reset-filter.less │ │ ├── reset-text.less │ │ ├── resize.less │ │ ├── responsive-visibility.less │ │ ├── size.less │ │ ├── tab-focus.less │ │ ├── table-row.less │ │ ├── text-emphasis.less │ │ ├── text-overflow.less │ │ └── vendor-prefixes.less │ ├── modals.less │ ├── navs.less │ ├── normalize.less │ ├── pager.less │ ├── pagination.less │ ├── panels.less │ ├── popovers.less │ ├── print.less │ ├── progress-bars.less │ ├── responsive-embed.less │ ├── responsive-utilities.less │ ├── scaffolding.less │ ├── searchbox.less │ ├── select.less │ ├── slider.less │ ├── spin.less │ ├── step.less │ ├── switch.less │ ├── tables.less │ ├── tag.less │ ├── textarea.less │ ├── themes │ │ ├── common.less │ │ ├── greater-blue.less │ │ ├── tao-orange.less │ │ └── tmall-red.less │ ├── thumbnails.less │ ├── timepicker.less │ ├── tooltip.less │ ├── tree.less │ ├── trigger.less │ ├── type.less │ ├── uploader.less │ ├── utilities.less │ └── wells.less └── widgets │ ├── AddressSelect │ ├── AddressSelect.vue │ ├── addr.js │ ├── demo │ │ ├── level2.md │ │ ├── level3.md │ │ └── level4.md │ ├── index.js │ └── index.md │ └── index.js ├── sync_doc.sh ├── test.html └── test ├── .eslintrc └── unit ├── index.html ├── index.js ├── lib ├── MIT.LICENSE ├── boot.js ├── jasmine-html.js ├── jasmine.css ├── jasmine.js └── jquery.js └── util.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": [ 4 | "transform-runtime" 5 | ], 6 | "comments": false 7 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | charset = utf-8 6 | trim_trailing_whitespace = true 7 | insert_final_newline = true 8 | indent_style = space 9 | indent_size = 2 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 4 | extends: 'standard', 5 | globals: { 6 | Vue: true, 7 | assert: true 8 | }, 9 | // required to lint *.vue files 10 | plugins: [ 11 | 'html' 12 | ], 13 | // add your custom rules here 14 | 'rules': { 15 | // allow paren-less arrow functions 16 | 'arrow-parens': 0, 17 | "semi": 2, 18 | // allow debugger during development 19 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### ATUI版本 2 | 3 | ### Vue 版本 4 | 5 | ### 操作系统版本 & 浏览器版本 6 | 7 | ### 关键代码或在线demo（比如jsfiddle、codepen） -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .project 3 | #coverage/ 4 | node_modules 5 | npm-debug.log 6 | _site 7 | lib 8 | coverage 9 | vue-component.sublime-project 10 | 11 | vue-component.sublime-workspace 12 | .idea/ -------------------------------------------------------------------------------- /.lesshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "propertyOrdering": false, 3 | "hexLength": "short", 4 | "stringQuotes": false, 5 | "singleLinePerSelector": "18f", 6 | "decimalZero": false, 7 | "importantRule": false, 8 | "zeroUnit": "no_unit", 9 | "qualifyingElement": false, 10 | "duplicateProperty": false, 11 | "importPath": false, 12 | "finalNewline": false, 13 | "urlFormat": "absolute", 14 | "idSelector": { 15 | "exclude": ["gradient"] 16 | }, 17 | "excludedFiles": [ 18 | "src/styles/mixins/grid-framework.less", 19 | "src/styles/editor.less" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /.tern-project: -------------------------------------------------------------------------------- 1 | { 2 | "ecmaVersion": 6, 3 | "libs": [ 4 | "browser" 5 | ], 6 | "loadEagerly": [ 7 | "./src/" 8 | ], 9 | "dontLoad": [ 10 | "./node-modules" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | 3 | language: node_js 4 | 5 | node_js: 6 | - "6" 7 | 8 | env: 9 | - MAX_WORKERS=2 10 | 11 | script: 12 | - npm run lint 13 | - NODE_ENV=travis karma start build/karma.unit.config.js 14 | 15 | branches: 16 | only: 17 | - dev 18 | - master 19 | 20 | notifications: 21 | webhooks: https://oapi.dingtalk.com/robot/send?access_token=3bdd55a1ee8ddf4de6f708b7a0ac812c30a17c83faa705a15019aab84a32592b 22 | 23 | after_success: 24 | - npm run test:cover 25 | - npm run codecov 26 | - bash <(curl -s https://codecov.io/bash) 27 | -------------------------------------------------------------------------------- /AUTHORS.txt: -------------------------------------------------------------------------------- 1 | Cyrilszq 2 | lynsun <814253326@qq.com> 3 | sugarboy <814253326@qq.com> 4 | 韩鹏 <66033086@qq.com> 5 | 英布 6 | 王西迪 7 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | chinese: 更新日志 4 | toc: false 5 | timeline: true 6 | --- 7 | 8 | 你也可以查看 github 上的 [发布日志](https://github.com/aliqin/atui/tags)。 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 aliqin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /build/karma.base.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | 5 | var webpackConfig = { 6 | resolve: { 7 | alias: { 8 | src: path.resolve(__dirname, '../src'), 9 | test: path.resolve(__dirname, '../test'), 10 | 'vue$': 'vue/dist/vue.common.js' 11 | } 12 | }, 13 | module: { 14 | loaders: [ 15 | { 16 | test: /\.js$/, 17 | loader: 'babel', 18 | exclude: /node_modules/ 19 | },{ 20 | test: /\.vue$/, 21 | loader: 'vue' 22 | }] 23 | }, 24 | plugins: [ 25 | new webpack.DefinePlugin({ 26 | 'process.env': { 27 | NODE_ENV: '"development"' 28 | } 29 | }) 30 | ], 31 | babel: { 32 | presets: ['es2015'], 33 | plugins: ['transform-runtime', 'transform-object-assign'] 34 | }, 35 | vue: { 36 | loaders: { 37 | 38 | } 39 | }, 40 | devtool: '#inline-source-map' 41 | } 42 | 43 | 44 | // shared config for all unit tests 45 | module.exports = { 46 | frameworks: ['mocha', 'chai'], 47 | files: [ 48 | '../test/unit/index.js' 49 | ], 50 | preprocessors: { 51 | '../test/unit/index.js': ['webpack', 'sourcemap'] 52 | }, 53 | webpack: webpackConfig, 54 | webpackMiddleware: { 55 | noInfo: true 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /build/karma.cover.config.js: -------------------------------------------------------------------------------- 1 | var base = require('./karma.base.config.js') 2 | 3 | var env = process.env.NODE_ENV 4 | 5 | module.exports = function (config) { 6 | var options = Object.assign(base, { 7 | browsers: env === 'local' ? ['Chrome'] : ['PhantomJS'], 8 | //plugins: ['karma-webpack', 'karma-mocha', 'karma-chrome-launcher', 'karma-firefox-launcher', 'karma-phantomjs-launcher', 'karma-coverage', 'karma-spec-reporter'], 9 | reporters: ['mocha', 'coverage'], 10 | coverageReporter: { 11 | reporters: [ 12 | { type: 'lcov', dir: '../coverage', subdir: '.' }, 13 | { type: 'text-summary', dir: '../coverage', subdir: '.' } 14 | ] 15 | }, 16 | singleRun: true 17 | }) 18 | 19 | // add babel-plugin-istanbul for code intrumentation 20 | options.webpack.babel = { 21 | plugins: [['istanbul', { 22 | exclude: [ 23 | 'test/' 24 | ] 25 | }],'transform-runtime', 'transform-object-assign'] 26 | } 27 | 28 | config.set(options) 29 | } 30 | -------------------------------------------------------------------------------- /build/karma.dev.config.js: -------------------------------------------------------------------------------- 1 | var base = require('./karma.base.config.js') 2 | 3 | module.exports = function (config) { 4 | config.set(Object.assign(base, { 5 | browsers: ['Chrome'], 6 | reporters: ['progress'] 7 | })) 8 | } 9 | -------------------------------------------------------------------------------- /build/karma.unit.config.js: -------------------------------------------------------------------------------- 1 | var base = require('./karma.base.config.js') 2 | 3 | module.exports = function (config) { 4 | var cfg = { 5 | browsers: ['Chrome'/*, 'Firefox', 'Safari'*/], 6 | reporters: ['progress'], 7 | singleRun: true 8 | } 9 | console.log(process.env.NODE_ENV) 10 | if (process.env.NODE_ENV === 'travis') { 11 | cfg.browsers = ['PhantomJS'] 12 | } 13 | config.set(Object.assign(base, cfg)) 14 | } 15 | -------------------------------------------------------------------------------- /dist/atuiFilter.js: -------------------------------------------------------------------------------- 1 | 2 | /*! 3 | * atui v0.1.34 4 | * (c) 2019 alibaba 5 | * Released under the MIT License. 6 | */ 7 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):"object"==typeof exports?exports.atuiFilter=t(require("vue")):e.atuiFilter=t(e.Vue)}(this,function(e){return function(e){function t(o){if(r[o])return r[o].exports;var u=r[o]={exports:{},id:o,loaded:!1};return e[o].call(u.exports,u,u.exports,t),u.loaded=!0,u.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}({0:function(e,t,r){e.exports=r(214)},5:function(t,r){t.exports=e},214:function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}var u=r(5),n=o(u),i=r(215),f=o(i);n.default.filter("phoneNumber",f.default),e.exports={}},215:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){var r="";e=""+e,e=e.replace(/[^\d]/g,"").substr(0,11);for(var o=0;o'+t+"")),r}}})}); -------------------------------------------------------------------------------- /dist/style.js: -------------------------------------------------------------------------------- 1 | 2 | /*! 3 | * atui v0.1.34 4 | * (c) 2019 alibaba 5 | * Released under the MIT License. 6 | */ 7 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.style=e():t.style=e()}(this,function(){return function(t){function e(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return t[n].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var o={};return e.m=t,e.c=o,e.p="",e(0)}(function(t){for(var e in t)if(Object.prototype.hasOwnProperty.call(t,e))switch(typeof t[e]){case"function":break;case"object":t[e]=function(e){var o=e.slice(1),n=t[e[0]];return function(t,e,r){n.apply(this,[t,e,r].concat(o))}}(t[e]);break;default:t[e]=t[t[e]]}return t}({0:function(t,e,o){t.exports=o(217)},217:function(t,e,o){"use strict";o(258),o(259),o(260)},258:function(t,e){},259:258,260:258}))}); -------------------------------------------------------------------------------- /docs/atui/case.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | english: 经典案例 4 | --- 5 | 6 | ATUI一共有两个大版本，基于vue1.x的在阿里内部gitlab上部署，版本号0.1.x，基于vue2.x的atui开源在github上，两个版本的组件库都分别支撑着一些业务，后续使用1.x的组件库会慢慢升级到2.x 7 | 8 | 9 | ## 案例列表 10 | 11 | - [阿里大于](https://www.alidayu.com/) 12 | - [阿里天机](https://alitj.tmall.com/#!/) 13 | - [优酷移动](https://youku170.tmall.com/) 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/atui/introduce.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | english: AliTelecom UI System 4 | --- 5 | 6 | [![logo](http://img.alicdn.com/tps/TB16WYGPFXXXXX4XXXXXXXXXXXX-400-172.png)](https://github.com/aliqin/atui) 7 | 8 | 9 | 由阿里通信技术团队打造基于Vue2.0的Web组件库，目前支撑了[阿里天机](https://alitj.tmall.com/#!/)，[阿里大于](https://www.alidayu.com/)，[优酷移动](https://youku170.tmall.com/)，以及阿里通信内部的中后台项目 10 | 11 | > 部分实现借鉴了 [ant.design](http://ant.design) 12 | > 文档系统使用了ant.design的文档系统[bisheng](https://github.com/benjycui/bisheng) 13 | 14 | 15 | ## 特性 16 | 17 | - Vue实现的PC端组件库，对于不习惯React JSX语法的同学，是一个不错的选择 18 | - 一共30+组件，组件视觉交互参考antd实现 19 | - 基于 npm + webpack + babel 的工作流，支持 ES2015 20 | 21 | ## 版本 22 | 23 | 目前最新版本 v0.1.2 24 | 25 | ## 浏览器支持 26 | 27 | 现代浏览器和 IE9 及以上。 28 | 29 | ## 谁在使用 30 | 31 | - [阿里天机](https://alitj.tmall.com/#!/) 32 | - [阿里大于](https://www.alidayu.com/) 33 | - [优酷移动](https://youku170.tmall.com/) 34 | - 阿里通信 35 | 36 | ## 如何贡献 37 | 38 | 39 | -------------------------------------------------------------------------------- /docs/atui/upgrade-notes.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | english: 升级指南 4 | --- 5 | 6 | 此处着重列出升级中的不兼容变化和推荐改动。所有变动请见 [更新日志](/changelog)。 7 | 8 | ### 其他 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/pattern/classic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | disabled: true 4 | chinese: 典型页面 5 | english: Classic 6 | --- 7 | 8 | 敬请期待。 9 | -------------------------------------------------------------------------------- /docs/practice/bussiness.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | disabled: true 4 | chinese: 业务组件 5 | english: Business 6 | --- 7 | 8 | 占位。 9 | -------------------------------------------------------------------------------- /docs/resource/download.en-US.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | chinese: 资源下载 4 | english: Download 5 | --- 6 | 7 | TBD 8 | -------------------------------------------------------------------------------- /docs/resource/github.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | link: //github.com/ant-design/ant-design 4 | english: GitHub 5 | --- 6 | 7 | -------------------------------------------------------------------------------- /docs/spec/introduce.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | english: Ant Design 4 | --- 5 | 6 |
7 | 8 |
9 | 10 | 在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，给设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。 11 | 12 | Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。 13 | 14 | --- 15 | 16 | ## 谁在使用 17 | 18 | - 蚂蚁金服 19 | - 阿里巴巴 20 | - 口碑 21 | - 新美大 22 | - 滴滴 23 | 24 | > 如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。 25 | 26 | ## 前端实现 27 | 28 | 我们采用 [React](http://facebook.github.io/react/) 封装了一套 Ant Design 的组件库，也欢迎社区其他框架的实现版本。 29 | 30 | - [Ant Design of React](/docs/react/introduce)（官方实现） 31 | - [vue-antd](https://github.com/okoala/vue-antd) 32 | - [antd-ember](https://github.com/idcos/antd-ember) 33 | 34 | ## 如何贡献 35 | 36 | 我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或者给我们 [提问](https://github.com/ant-design/ant-design/issues)。 37 | -------------------------------------------------------------------------------- /docs/spec/layout/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | template: component 3 | category: 设计基础 4 | order: 4 5 | cols: 1 6 | chinese: 常用布局 7 | english: Layout 8 | --- 9 | 10 | 布局和导航是产品的骨架，是页面的重要构成模式之一，是作为后续展开页面设计的基础，可以为产品奠定交互和视觉风格。 11 | 12 | Ant Design 的布局和导航设计规范如下： 13 | 14 | ### 尺寸规则 15 | 16 | 一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。 17 | 18 | - 顶部导航（大部分系统）：一级导航高度 `64px`，二级导航 `48px`。 19 | - 顶部导航（展示类页面）：一级导航高度 `80px`,二级导航 `56px`。 20 | - 顶部导航高度的范围计算公式为：`48+8n`。 21 | - 侧边导航宽度的范围计算公式：`200+8n`。 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 | `12px`、`14px` 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。 49 | 50 | 51 | 在大中后台系统中，Ant Design 使用两种常见的布局形式，顶部导航布局和侧边导航布局，以下收集了使用 Ant Design 设计的中后台产品的基本布局。 52 | -------------------------------------------------------------------------------- /docs/spec/proximity.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: 十大原则 3 | order: 1 4 | subtitle: Proximity 5 | english: 亲密性 6 | --- 7 | 8 | 如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。 9 | 10 | --- 11 | 12 | ## 纵向间距关系 13 | 14 | 纵向间距示例 15 | 16 | 通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。 17 | 18 |
19 | 20 | 增加元素示例 21 | 22 | 在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。 23 | 24 | > 注：在 Ant Design 中，`y=8+8*n`。其中，`n>=0`，y 是纵向间距，8 是『基础间距』。 25 | 26 | --- 27 | 28 | ## 横向间距关系 29 | 30 | 组合排布示例 31 | 32 | 为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。 33 | 34 |
35 | 36 | 复选框内示例 37 | 38 | 在一个组件内部，元素的横向间距也应该有所不同。 39 | -------------------------------------------------------------------------------- /docs/spec/repetition.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: 十大原则 3 | order: 4 4 | subtitle: Repetition 5 | english: 重复 6 | --- 7 | 8 | 相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。 9 | 10 | --- 11 | 12 | ## 重复元素 13 | 14 | 线框重复示例 15 | 16 | 设计要素重复示例 17 | 18 | 文案格式重复示例 19 | 20 | 重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。 21 | -------------------------------------------------------------------------------- /docs/widgets/introduce.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 业务组件 4 | english: Widgets 5 | --- 6 | 7 | 业务组件是通过业务场景中提炼出来的组件。 8 | 9 | ## 安装 10 | 11 | 12 | ## 使用 13 | 14 | ## 参与开发 15 | 16 | 17 | -------------------------------------------------------------------------------- /post-site.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | siteDir=$PWD"/_site/"; 4 | distDir=$PWD"/dist/"; 5 | distFiles=$distDir"*"; 6 | compDir=$siteDir"src/components/"; 7 | widgetDir=$siteDir"src/widgets/"; 8 | pagePath=$siteDir"index.html"; 9 | 10 | 11 | gen(){ 12 | cd $1 13 | 14 | for file in `ls`; 15 | do 16 | if [ -d $file ]; 17 | then 18 | #echo $file; 19 | cp $pagePath $file 20 | fi 21 | done 22 | } 23 | 24 | gen $compDir; 25 | 26 | gen $widgetDir; 27 | 28 | #copy dist files to _site for doc 29 | cp $distFiles $siteDir; 30 | 31 | 32 | -------------------------------------------------------------------------------- /scripts/lesshint-report.js: -------------------------------------------------------------------------------- 1 | var originReport = require('lesshint/lib/reporters/stylish').report; 2 | 3 | module.exports = { 4 | report: function (errors) { 5 | // Use full path 6 | errors.forEach(function(error) { 7 | error.file = error.fullPath; 8 | }); 9 | originReport(errors); 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /site/bisheng.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | port: 8001, 5 | source: [ 6 | //'./components', 7 | './src/components', 8 | './src/widgets', 9 | './docs', 10 | 'CHANGELOG.md' 11 | ], 12 | lazyLoad: true, 13 | theme: './site/theme', 14 | htmlTemplate: './site/theme/static/template.html', 15 | root: '/atui/', 16 | plugins: [ 17 | 'bisheng-plugin-description', 18 | 'bisheng-plugin-toc?maxDepth=2', 19 | //'bisheng-plugin-react?lang=__react', 20 | 'bisheng-plugin-atui', 21 | ], 22 | doraConfig: { 23 | verbose: true, 24 | plugins: ['dora-plugin-upload'], 25 | }, 26 | webpackConfig(config) { 27 | config.resolve.alias = { 28 | antd: 'antd', 29 | site: path.join(process.cwd(), 'site'), 30 | }; 31 | 32 | /*config.babel.plugins.push([ 33 | require.resolve('babel-plugin-antd'), 34 | { 35 | style: true, 36 | libraryName: 'antd', 37 | libDir: 'lib', 38 | }, 39 | ]);*/ 40 | 41 | return config; 42 | }, 43 | }; 44 | -------------------------------------------------------------------------------- /site/theme/en-US.js: -------------------------------------------------------------------------------- 1 | import appLocaleData from 'react-intl/locale-data/en'; 2 | 3 | module.exports = { 4 | locale: 'en-US', 5 | data: appLocaleData, 6 | messages: { 7 | 'app.header.menu.home': 'Home', 8 | 'app.header.menu.practice': 'Practice', 9 | 'app.header.menu.pattern': 'Pattern', 10 | 'app.header.menu.react': 'React', 11 | 'app.header.menu.widgets': 'Widgets', 12 | 'app.header.menu.spec': 'Specification', 13 | 'app.header.menu.resource': 'Resource', 14 | 'app.header.lang': '中文', 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /site/theme/index.js: -------------------------------------------------------------------------------- 1 | const contentTmpl = './template/Content/index'; 2 | 3 | 4 | module.exports = { 5 | categoryOrder: { 6 | 组件: 0, 7 | 十大原则: 0, 8 | 设计基础: 1, 9 | 动画: 2, 10 | }, 11 | typeOrder: { 12 | Basic: 0, 13 | 'Form Controls': 1, 14 | Views: 2, 15 | Navigation: 3, 16 | Other: 4, 17 | }, 18 | docVersions: { 19 | '0.9.x': 'http://09x.ant.design/', 20 | '0.10.x': 'http://010x.ant.design/', 21 | '0.11.x': 'http://011x.ant.design/', 22 | '0.12.x': 'http://012x.ant.design/', 23 | }, 24 | routes: { 25 | '/': './template/Home/index', 26 | '/docs/practice/:children': contentTmpl, 27 | '/docs/pattern/:children': contentTmpl, 28 | '/docs/atui/:children': contentTmpl, 29 | '/docs/widgets/:children': contentTmpl, 30 | '/changelog': contentTmpl, 31 | //'/components/:children': contentTmpl, 32 | '/src/components/:children': contentTmpl, 33 | '/src/widgets/:children': contentTmpl, 34 | '/docs/spec/:children': contentTmpl, 35 | '/docs/resource/:children': contentTmpl, 36 | }, 37 | }; 38 | -------------------------------------------------------------------------------- /site/theme/static/font.less: -------------------------------------------------------------------------------- 1 | /* latin */ 2 | @font-face { 3 | font-family: 'Lato'; 4 | font-style: normal; 5 | font-weight: 400; 6 | src: local('Lato Regular'), local('Lato-Regular'), url(http://fontstatic.useso.com/s/lato/v11/MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); 7 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 8 | } 9 | /* latin */ 10 | @font-face { 11 | font-family: 'Lato'; 12 | font-style: normal; 13 | font-weight: 700; 14 | src: local('Lato Bold'), local('Lato-Bold'), url(http://fontstatic.useso.com/s/lato/v11/MgNNr5y1C_tIEuLEmicLmwLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2'); 15 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 16 | } 17 | /* latin */ 18 | @font-face { 19 | font-family: 'Raleway'; 20 | font-style: normal; 21 | font-weight: 400; 22 | src: local('Raleway'), url(http://fontstatic.useso.com/s/raleway/v9/QAUlVt1jXOgQavlW5wEfxQLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2'); 23 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 24 | } 25 | -------------------------------------------------------------------------------- /site/theme/static/footer.less: -------------------------------------------------------------------------------- 1 | footer { 2 | clear: both; 3 | border-top: 1px solid #eee; 4 | font-size: 12px; 5 | background: #fff; 6 | position: relative; 7 | z-index: 1; 8 | color: #666; 9 | box-shadow: 0 1000px 0 1000px #fff; 10 | } 11 | 12 | footer ul { 13 | overflow: hidden; 14 | margin: 0 2%; 15 | } 16 | 17 | footer ul li { 18 | float: left; 19 | width: 25%; 20 | padding: 24px 2%; 21 | } 22 | 23 | footer ul li > h2 { 24 | font-size: 12px; 25 | margin: 0 auto 8px; 26 | font-weight: 500; 27 | } 28 | 29 | footer ul li > div { 30 | margin: 0 8px 5px 0; 31 | } 32 | -------------------------------------------------------------------------------- /site/theme/static/motion.less: -------------------------------------------------------------------------------- 1 | .motion-container { 2 | height: 190px; 3 | line-height: 190px; 4 | text-align: center; 5 | margin: 40px 0 20px; 6 | } 7 | 8 | .motion-example { 9 | width: 180px; 10 | height: 180px; 11 | line-height: 180px; 12 | font-size: 18px; 13 | color: #fff; 14 | text-align: center; 15 | display: inline-block !important; 16 | border-radius: 8px; 17 | animation-duration: 0.5s !important; 18 | font-weight: bold; 19 | background: url(https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg) center/230px; 20 | } 21 | 22 | .motion-select-wrapper { 23 | text-align: center; 24 | margin-bottom: 40px; 25 | } 26 | 27 | .motion-select { 28 | text-align: left; 29 | width: 180px; 30 | } 31 | 32 | .video-player { 33 | position: relative; 34 | max-width: 800px; 35 | &-right { 36 | width: 616px; 37 | float: right; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /site/theme/static/new-version-info-modal.less: -------------------------------------------------------------------------------- 1 | .new-version-info-modal { 2 | img { 3 | width: 100px; 4 | position: absolute; 5 | left: 34px; 6 | top: 36px; 7 | } 8 | p { 9 | margin-top: 1em; 10 | } 11 | .anticon { 12 | display: none; 13 | } 14 | .ant-confirm-body { 15 | .ant-confirm-title { 16 | font-size: 18px; 17 | } 18 | margin-left: 120px; 19 | .ant-confirm-content { 20 | margin-left: 0; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /site/theme/static/not-found.less: -------------------------------------------------------------------------------- 1 | #page-404 { 2 | background-image: url('https://os.alipayobjects.com/rmsportal/NOAjOBbnYCrNzrW.jpg'); 3 | width: 100%; 4 | height: 100%; 5 | background-repeat: no-repeat; 6 | background-attachment: fixed; 7 | background-position: center; 8 | background-size: 100%; 9 | position: fixed; 10 | top: 0; 11 | left: 0; 12 | right: 0; 13 | bottom: 0; 14 | z-index: 100; 15 | 16 | section { 17 | position: absolute; 18 | top: 48%; 19 | left: 55%; 20 | margin: -103px 0 0 -120px; 21 | 22 | text-align: center; 23 | } 24 | 25 | h1 { 26 | color: #2DB7F5; 27 | font-size: 120px; 28 | font-weight: 500; 29 | } 30 | 31 | p { 32 | color: #666; 33 | font-size: 18px; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /site/theme/static/page-nav.less: -------------------------------------------------------------------------------- 1 | .prev-next-nav { 2 | position: absolute; 3 | bottom: -1px; 4 | left: 0; 5 | width: 100%; 6 | overflow: hidden; 7 | font-size: 16px; 8 | border-top: 1px solid #e9e9e9; 9 | background: #fff; 10 | 11 | a:hover{ 12 | text-decoration: none; 13 | } 14 | } 15 | 16 | .prev-next-nav > .prev-page, 17 | .prev-next-nav > .next-page { 18 | padding: 0 24px; 19 | width: 50%; 20 | float: left; 21 | line-height: 50px; 22 | height: 50px; 23 | font-size:12px; 24 | color:#0087e0; 25 | } 26 | 27 | .prev-next-nav > a.prev-page:before { 28 | font-family: 'anticon'; 29 | content: '\e601'; 30 | font-size: 12px; 31 | margin-right: 1em; 32 | } 33 | 34 | .prev-next-nav > .next-page { 35 | text-align: right; 36 | float: right; 37 | } 38 | 39 | .prev-next-nav > a.next-page:after { 40 | font-family: 'anticon'; 41 | content: '\e600'; 42 | font-size: 12px; 43 | margin-left: 1em; 44 | } -------------------------------------------------------------------------------- /site/theme/static/style.js: -------------------------------------------------------------------------------- 1 | import './common.less'; 2 | import './header.less'; 3 | import './footer.less'; 4 | import './home.less'; 5 | import './page-nav.less'; 6 | import './markdown.less'; 7 | import './resource.less'; 8 | import './responsive.less'; 9 | import './preview-img.less'; 10 | import './toc.less'; 11 | import './not-found.less'; 12 | import './font.less'; 13 | import './highlight.less'; 14 | import './demo.less'; 15 | import './colors.less'; 16 | import './mock-browser.less'; 17 | import './new-version-info-modal.less'; 18 | import './motion.less'; 19 | import './themes-changer.less'; 20 | -------------------------------------------------------------------------------- /site/theme/static/themes-changer.less: -------------------------------------------------------------------------------- 1 | .themes{ 2 | overflow: hidden; 3 | position: fixed; 4 | right:120px; 5 | top:100px; 6 | list-style: none; 7 | z-index: 9999; 8 | .thtmes-tips{ 9 | font-size: 12px; 10 | float:left; 11 | } 12 | } 13 | .themes ul { 14 | float:right; 15 | } 16 | .themes li{ 17 | float:left; 18 | width:14px; 19 | height:14px; 20 | border-radius:100%; 21 | margin:0 3px; 22 | cursor: pointer; 23 | color:#fff; 24 | font-size: 12px; 25 | transition: all .3s ease; 26 | opacity: .6; 27 | padding: 2px; 28 | border:1px solid #d9d9d9; 29 | background-clip: content-box; 30 | } 31 | .themes li.active{ 32 | opacity: 1; 33 | transform: scale(1.2); 34 | } 35 | -------------------------------------------------------------------------------- /site/theme/static/toc.less: -------------------------------------------------------------------------------- 1 | .toc { 2 | font-size: 14px; 3 | margin: 36px 0 24px; 4 | background: #fbfbfb; 5 | border-left: 2px solid #eee; 6 | } 7 | 8 | .toc > ul { 9 | padding: 8px 0; 10 | } 11 | 12 | .toc > ul li { 13 | list-style: none; 14 | } 15 | 16 | .toc li > ul { 17 | text-indent: 8px; 18 | font-size: 12px; 19 | display: none; 20 | } 21 | 22 | .toc a { 23 | padding-left: 16px; 24 | border-left: 2px solid #eee; 25 | margin-left: -2px; 26 | display: block; 27 | transition: all 0.3s ease; 28 | white-space: nowrap; 29 | overflow: hidden; 30 | color: #666; 31 | } 32 | 33 | .toc a:hover { 34 | color: #2db7f5; 35 | } 36 | 37 | .toc a.current { 38 | border-color: #2db7f5; 39 | color: #2db7f5; 40 | } 41 | 42 | .toc-affix { 43 | position: absolute; 44 | top: 8px; 45 | right: 20px; 46 | } 47 | 48 | .demos-anchor { 49 | color: #aaa; 50 | background: #fff; 51 | font-size: 12px; 52 | margin-top: 0; 53 | a { 54 | padding-left: 8px; 55 | display: block; 56 | overflow: hidden; 57 | text-overflow: ellipsis; 58 | white-space: nowrap; 59 | max-width: 90px; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /site/theme/template/BrowserDemo.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function BrowserDemo(props) { 4 | return ( 5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | 13 |
14 |
15 | {props.children} 16 |
17 |
18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /site/theme/template/Comp/Div.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default class Div extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | } 7 | 8 | render() { 9 | var props = this.props; 10 | return ( 11 |
12 | ); 13 | } 14 | } -------------------------------------------------------------------------------- /site/theme/template/Home/Banner.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router'; 3 | import ScrollElement from 'rc-scroll-anim/lib/ScrollElement'; 4 | import GitHubButton from 'react-github-button'; 5 | import 'react-github-button/assets/style.css'; 6 | import { Icon } from 'antd'; 7 | import QueueAnim from 'rc-queue-anim'; 8 | 9 | export default class Banner extends React.Component { 10 | typeFunc(a) { 11 | if (a.key === 'line') { 12 | return 'right'; 13 | } else if (a.key === 'button') { 14 | return 'bottom'; 15 | } 16 | return 'left'; 17 | } 18 | 19 | render() { 20 | return ( 21 | 30 | ); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /site/theme/template/Home/Link.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ScrollLink from 'rc-scroll-anim/lib/ScrollLink'; 3 | import scrollScreen from 'rc-scroll-anim/lib/ScrollScreen'; 4 | 5 | export default class Link extends React.Component { 6 | componentDidMount() { 7 | scrollScreen.init({ docHeight: 4746 }); 8 | } 9 | 10 | render() { 11 | return ( 12 |
13 | 14 | 15 | 16 | 17 | 18 |
19 | ); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /site/theme/template/Home/Page2.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router'; 3 | import TweenOne from 'rc-tween-one'; 4 | import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; 5 | import { Icon, Button } from 'antd'; 6 | import QueueAnim from 'rc-queue-anim'; 7 | 8 | export default function Page2() { 9 | return ( 10 | 14 | 17 |

设计模式

18 |

总结中后台设计中反复出现的问题，并提供相应的解决方案。

19 |
20 | 21 | 25 | 26 |
27 | 28 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /site/theme/template/Home/Page3.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router'; 3 | import TweenOne from 'rc-tween-one'; 4 | import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; 5 | import { Icon, Button } from 'antd'; 6 | import QueueAnim from 'rc-queue-anim'; 7 | 8 | export default function Page3() { 9 | return ( 10 | 13 | 17 | 20 |

丰富的基础组件

21 |

丰富、灵活、实用的基础组件，为业务产品提供强有力的设计支持。

22 |
23 | 24 | 28 | 29 |
30 | 31 | 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /site/theme/template/Home/Page4.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import TweenOne from 'rc-tween-one'; 3 | import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; 4 | import QueueAnim from 'rc-queue-anim'; 5 | 6 | export default function Page4() { 7 | return ( 8 | 11 | 14 |

微小·确定·幸福

15 |

这是一套致力于提升『用户』和『设计者』使用体验的中后台设计语言。

16 | 17 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /site/theme/template/IconSet/CopyableIcon.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CopyToClipboard from 'react-copy-to-clipboard'; 3 | import { Icon } from 'antd'; 4 | 5 | export default class CopyableIcon extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | justCopied: false, 10 | }; 11 | } 12 | 13 | onCopied = () => { 14 | this.setState({ justCopied: true }, () => { 15 | setTimeout(() => { 16 | this.setState({ justCopied: false }); 17 | }, 1000); 18 | }); 19 | } 20 | 21 | render() { 22 | const text = ``; 23 | return ( 24 | 25 |
  • 26 | 27 | {this.props.type} 28 |
    • 29 |     30 | ); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /site/theme/template/IconSet/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | import CopyableIcon from './CopyableIcon'; 4 | 5 | export default class IconSet extends React.Component { 6 | static defaultProps = { 7 | icons: [], 8 | } 9 | 10 | render() { 11 | const className = this.props.className; 12 | const listClassName = classNames({ 13 | 'anticons-list': true, 14 | clearfix: true, 15 | [className]: !!className, 16 | }); 17 | return ( 18 |
      19 | {this.props.icons.map((type, i) => )} 20 |
    21 | ); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /site/theme/template/NotFound.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router'; 3 | 4 | export default function NotFound() { 5 | return ( 6 |
    7 |
    8 |

    404

    9 |

    你要找的页面不存在 返回首页

    10 |
    11 | 38 | -------------------------------------------------------------------------------- /src/components/Badge/test/badge.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jiangyi on 16/7/4. 3 | */ 4 | 5 | import Vue from 'vue' 6 | import Badge from '../' 7 | 8 | describe('Badge组件单元测试', () => { 9 | let vm = new Vue({ 10 | data () { 11 | return { 12 | count: 6 13 | } 14 | }, 15 | components: { 16 | Badge 17 | }, 18 | template: ` 19 | 20 | 21 | 22 | ` 23 | }).$mount() 24 | 25 | it('组件基本渲染', () => { 26 | expect(vm.$el.querySelectorAll('.atui-badge-count').length).to.be.equal(1) 27 | }) 28 | }) 29 | -------------------------------------------------------------------------------- /src/components/Breadcrumb/Breadcrumb.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 28 | -------------------------------------------------------------------------------- /src/components/Breadcrumb/BreadcrumbItem.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 33 | -------------------------------------------------------------------------------- /src/components/Breadcrumb/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 一级类目 18 | 二级类目 19 | 三级类目 20 | 21 | ```` 22 | 23 | ````vue-script 24 | new Vue({ 25 | el: 'body', 26 | components: { 27 | vBreadcrumb: atui.Breadcrumb, 28 | vBreadcrumbItem: atui.Breadcrumb.BreadcrumbItem 29 | }, 30 | data: { 31 | href: '/' 32 | } 33 | }) 34 | ```` 35 | -------------------------------------------------------------------------------- /src/components/Breadcrumb/demo/symbol.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 自定义间隔符 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 一级类目 18 | 二级类目 19 | 三级类目 20 | 四级类目 21 | 22 | ```` 23 | 24 | ````vue-script 25 | new Vue({ 26 | el: 'body', 27 | components: { 28 | vBreadcrumb: atui.Breadcrumb, 29 | vBreadcrumbItem: atui.Breadcrumb.BreadcrumbItem 30 | }, 31 | data: { 32 | href: '/' 33 | } 34 | }) 35 | ```` 36 | -------------------------------------------------------------------------------- /src/components/Breadcrumb/index.js: -------------------------------------------------------------------------------- 1 | import Breadcrumb from './Breadcrumb.vue' 2 | import BreadcrumbItem from './BreadcrumbItem.vue' 3 | 4 | Breadcrumb.BreadcrumbItem = BreadcrumbItem 5 | 6 | export default Breadcrumb 7 | -------------------------------------------------------------------------------- /src/components/Breadcrumb/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Navigation 4 | title: Breadcrumb 5 | subtitle: 面包屑 6 | --- 7 | 8 | 9 | ## 何时使用 10 | 11 | 12 | ## API 13 | 14 | 15 | ### Breadcrumb 16 | 17 | 属性 | 说明 | 类型 | 默认值 18 | -----|-----|-----|------ 19 | symbol | 间隔符号 | | 20 | 21 | ### Breadcrumb-item 22 | 属性 | 说明 | 类型 | 默认值 23 | -----|-----|-----|------ 24 | href | 跳转的链接 | String | 25 | -------------------------------------------------------------------------------- /src/components/Breadcrumb/test/breadcrumb.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jiangyi on 16/7/4. 3 | */ 4 | 5 | import Vue from 'vue' 6 | import Breadcrumb from '../' 7 | 8 | const {BreadcrumbItem} = Breadcrumb 9 | 10 | describe('Breadcrumb组件单元测试', () => { 11 | let vm = new Vue({ 12 | data () { 13 | return { 14 | href: 'https://www.taobao.com' 15 | } 16 | }, 17 | components: { 18 | Breadcrumb, 19 | BreadcrumbItem 20 | }, 21 | template: ` 22 |
    23 | 24 | 一级目录 25 | 二级目录 26 | 三级别目录 27 | 28 |
    29 | ` 30 | }).$mount() 31 | 32 | it('基本功能渲染', () => { 33 | expect(vm.$el.querySelectorAll('.atui-breadcrumbs').length).to.be.equal(1) 34 | expect(vm.$el.querySelectorAll('.atui-breadcrumb').length).to.be.equal(3) 35 | }) 36 | }) 37 | -------------------------------------------------------------------------------- /src/components/Button/demo/btn-group.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 4 | zh-CN: 按钮组 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 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 | 51 | ```` 52 | 53 | ````vue-script 54 | new Vue({ 55 | el: 'body', 56 | components: { 57 | vButton: atui.Button, 58 | buttonGroup: atui.Button.ButtonGroup, 59 | icon: atui.Icon 60 | } 61 | }) 62 | ```` 63 | -------------------------------------------------------------------------------- /src/components/Button/demo/icon.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 带Icon的按钮 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 带有icon的按钮 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 关闭 18 | 19 | ```` 20 | 21 | ````vue-script 22 | new Vue({ 23 | el: 'body', 24 | components: { 25 | vButton: atui.Button, 26 | icon: atui.Icon 27 | } 28 | }) 29 | ```` 30 | -------------------------------------------------------------------------------- /src/components/Button/demo/loading.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 6 3 | title: 4 | zh-CN: 带loading的按钮 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 带loading的按钮 11 | 12 | ## en-US 13 | 14 | ````jsx 15 | 16 | ```` 17 | 18 | ````vue-script 19 | new Vue({ 20 | el: 'body', 21 | components: { 22 | vButton: atui.Button 23 | }, 24 | data: { 25 | loading: false 26 | }, 27 | methods: { 28 | onBtnClick: function(e){ 29 | debugger 30 | this.loading = !this.loading 31 | } 32 | } 33 | }) 34 | ```` 35 | -------------------------------------------------------------------------------- /src/components/Button/demo/primary.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 主要按钮 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 一级按钮，可以设置按钮大小 11 | 12 | ## en-US 13 | 14 | ````jsx 15 | 16 | 17 | 18 | ```` 19 | 20 | ````vue-script 21 | new Vue({ 22 | el: 'body', 23 | components: { 24 | vButton: atui.Button, 25 | icon: atui.Icon 26 | } 27 | }) 28 | ```` 29 | -------------------------------------------------------------------------------- /src/components/Button/demo/secondary.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 次要按钮 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 二级按钮 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 18 | 19 | ```` 20 | 21 | ````vue-script 22 | new Vue({ 23 | el: 'body', 24 | components: { 25 | vButton: atui.Button, 26 | icon: atui.Icon 27 | } 28 | }) 29 | ```` 30 | -------------------------------------------------------------------------------- /src/components/Button/demo/tertiary.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 三级按钮 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 三级按钮 10 | 11 | ## en-US 12 | 13 | ````jsx 14 |

    普通按钮使用，三级按钮

    15 | 16 | 17 | 18 | 19 | ```` 20 | 21 | ````vue-script 22 | new Vue({ 23 | el: 'body', 24 | components: { 25 | vButton: atui.Button, 26 | icon: atui.Icon 27 | } 28 | }) 29 | ```` 30 | -------------------------------------------------------------------------------- /src/components/Button/demo/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 4 | zh-CN: 文字按钮 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 文字型按钮 11 | 12 | ## en-US 13 | 14 | ````jsx 15 | 16 | 17 | 18 | ```` 19 | 20 | ````vue-script 21 | new Vue({ 22 | el: 'body', 23 | components: { 24 | vButton: atui.Button, 25 | icon: atui.Icon 26 | } 27 | }) 28 | ```` 29 | -------------------------------------------------------------------------------- /src/components/Button/index.js: -------------------------------------------------------------------------------- 1 | import Button from './Button.vue' 2 | import ButtonGroup from './ButtonGroup.vue' 3 | 4 | Button.ButtonGroup = ButtonGroup 5 | 6 | export default Button 7 | -------------------------------------------------------------------------------- /src/components/Button/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Basic 4 | title: Button 5 | subtitle: 按钮 6 | --- 7 | 8 | 按钮用于开始一个即时操作。加`disabled`属性可设置为禁用 9 | 10 | ## 何时使用 11 | 12 | 13 | ## API 14 | 15 | 16 | ### Button 17 | 18 | 属性 | 说明 | 类型 | 默认值 19 | -----|-----|-----|------ 20 | value | 按钮上显示的文字 | String | | 21 | large | 按钮尺寸，大 | Boolean | false | 22 | small | 按钮尺寸，小 | Boolean | false | 23 | primary | 按钮类型，主按钮 | Boolean | false | 24 | secondary | 按钮类型，次按钮 | Boolean | false | 25 | tertiary | 按钮类型，三级按钮 | Boolean | false | 26 | text | 按钮类型，文字型按钮 | Boolean | false | 27 | disabled | 按钮类型，失效按钮 | Boolean | false | 28 | loading | 按钮类型，loading模式 | Boolean | false | 29 | 30 | ### Button.Group 31 | 属性 | 说明 | 类型 | 默认值 32 | -----|-----|-----|------ 33 | large | 按钮组尺寸，大 | Boolean | false | 34 | small | 按钮组尺寸，小 | Boolean | false | 35 | 36 | 41 | -------------------------------------------------------------------------------- /src/components/Button/test/button-group.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Button from '../' 3 | let ButtonGroup = Button.ButtonGroup 4 | let vm = new Vue({ 5 | template: ` 6 |
    7 | 8 | 9 | 10 | 11 | 12 | 13 |
    14 | `, 15 | components: { vButton: Button, vButtonGroup: ButtonGroup }, 16 | data: { 17 | 18 | } 19 | }).$mount() 20 | 21 | describe('ButtonGroup', () => { 22 | it('ButtonGroup组件是否正常显示', () => { 23 | expect(vm.$el.querySelectorAll('button').length).to.equal(2) 24 | }) 25 | 26 | it('事件回调', () => { 27 | 28 | }) 29 | }) 30 | -------------------------------------------------------------------------------- /src/components/Button/test/button.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Button from '../' 3 | let vm = new Vue({ 4 | template: ` 5 |
    6 | 7 | 8 | 9 |
    10 | `, 11 | components: { vButton: Button }, 12 | data: { 13 | 14 | } 15 | }).$mount() 16 | 17 | describe('Button', () => { 18 | it('Button组件是否正常显示', () => { 19 | expect(vm.$el.querySelectorAll('button.atui-btn').length).to.equal(3) 20 | }) 21 | }) 22 | -------------------------------------------------------------------------------- /src/components/Calendar/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | datePicker抽像出来的日历组件，目前只有一种样式 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | components: { 23 | calendar: atui.Calendar 24 | }, 25 | data: { 26 | currDate: new Date('2017-03-31') 27 | }, 28 | methods: { 29 | onChange (dateStr, date) { 30 | console.log(arguments) 31 | } 32 | } 33 | }) 34 | ```` 35 | -------------------------------------------------------------------------------- /src/components/Calendar/index.js: -------------------------------------------------------------------------------- 1 | import Calendar from './Calendar.vue' 2 | 3 | export default Calendar 4 | -------------------------------------------------------------------------------- /src/components/Calendar/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Views 4 | title: Calendar 5 | subtitle: 日历 6 | cols: 1 7 | 8 | --- 9 | 10 | 11 | ## 何时使用 12 | 13 | 基础的日历控件 14 | 15 | ## API 16 | 17 | 18 | 按钮的属性说明如下： 19 | 20 | 属性 | 说明 | 类型 | 默认值 21 | -----|-----|-----|------ 22 | value | 默认值 | Date | 无 | 23 | format | 格式 | String | `yyyy-MM-dd` | 24 | disabledDate | 禁用的日期 | Function | `function(){}` | 25 | @change | 选择日期后的回调函数 | Function(dateStr, date) | `function(){}` | -------------------------------------------------------------------------------- /src/components/Calendar/test/calendar.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Calendar from '../' 3 | 4 | describe('Calendar组件单元测试', () => { 5 | let vm = new Vue({ 6 | components: { 7 | Calendar 8 | }, 9 | template: `
    10 | 11 |
    12 | `, 13 | methods: { 14 | selectChange () {} 15 | } 16 | }).$mount() 17 | 18 | it('基本功能渲染', () => { 19 | expect(vm.$el.querySelectorAll('.atui-calendar').length).to.be.equal(1) 20 | }) 21 | 22 | it('显示隐藏', () => { 23 | // vm.disabledDate = function () { 24 | // return date.getTime() < new Date(value + ' 00:00:00').getTime() 25 | // } 26 | vm.$nextTick(() => { 27 | expect(vm.$el.querySelectorAll('.atui-calendar').length).to.be.equal(1) 28 | }) 29 | }) 30 | }) 31 | -------------------------------------------------------------------------------- /src/components/Carousel/CSlide.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 29 | -------------------------------------------------------------------------------- /src/components/Carousel/animation/index.js: -------------------------------------------------------------------------------- 1 | import normal from './normal.vue' 2 | import fade from './fade.vue' 3 | 4 | export { 5 | normal, 6 | fade 7 | } 8 | -------------------------------------------------------------------------------- /src/components/Carousel/animation/normal.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 38 | -------------------------------------------------------------------------------- /src/components/Carousel/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 基本的切换，默认是横向滚动切换 10 | 11 | 12 | 13 | ## en-US 14 | 15 | 16 | ````jsx 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ```` 29 | 30 | ````vue-script 31 | new Vue({ 32 | el: 'body', 33 | components: { 34 | carousel: atui.Carousel, 35 | slide: atui.Carousel.CSlide 36 | }, 37 | methods: { 38 | beforeChange (slide) { 39 | console.log('before',slide) 40 | }, 41 | afterChange (slide) { 42 | console.log('after',slide) 43 | } 44 | } 45 | }) 46 | ```` 47 | -------------------------------------------------------------------------------- /src/components/Carousel/demo/fade.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 渐显 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | 13 | ## en-US 14 | 15 | 16 | ````jsx 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ```` 29 | 30 | ````vue-script 31 | new Vue({ 32 | el: 'body', 33 | components: { 34 | carousel: atui.Carousel, 35 | slide: atui.Carousel.CSlide 36 | }, 37 | events: { 38 | beforeChange (slide) { 39 | //console.log('beforeFade',slide) 40 | }, 41 | afterChange (slide) { 42 | //console.log('afterFade',slide) 43 | } 44 | } 45 | }) 46 | ```` 47 | -------------------------------------------------------------------------------- /src/components/Carousel/index.js: -------------------------------------------------------------------------------- 1 | import Carousel from './Carousel.vue' 2 | import CSlide from './CSlide.vue' 3 | Carousel.Slide = CSlide 4 | export default Carousel 5 | -------------------------------------------------------------------------------- /src/components/Carousel/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Views 4 | title: Carousel 5 | subtitle: 走马灯 6 | --- 7 | 8 | 9 | ## 何时使用 10 | 11 | 12 | ## API 13 | 14 | 15 | 16 | ### Carousel 17 | 18 | 属性 | 说明 | 类型 | 默认值 19 | -----|-----|-----|------ 20 | width | 宽度 | String | auto 21 | height | 高度，必须传，不能自适应 | String | 400px 22 | interval | 自动播放时的间隔时间 | Number | 3000 23 | speed | 切换速度 | Number | 500 24 | indicators | 圆点指示器 | String | center 25 | controlBtn | 左右控制按钮,默认显示 | Boolean | true 26 | animation | 切换动效，目前只支持默认的横向和fade | String | 27 | hoverStop | 只有当autoPlay时此属性才有用，当鼠标hover时是否停止自动播放 | Boolean | false 28 | @beforeChange | 切换之前触发的事件 | Function | | 29 | @afterChange | 切换之后触发的事件 | Function | | 30 | 31 | ### Carousel.Slide 32 | 属性 | 说明 | 类型 | 默认值 33 | -----|-----|-----|------ 34 | -------------------------------------------------------------------------------- /src/components/Cascader/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | ```` 18 | 19 | ````vue-script 20 | var options = [{ 21 | value: 'zhejiang', 22 | label: '浙江', 23 | children: [{ 24 | value: 'hangzhou', 25 | label: '杭州', 26 | children: [{ 27 | value: 'xihu', 28 | label: '西湖', 29 | }], 30 | }], 31 | }, { 32 | value: 'jiangsu', 33 | label: '江苏', 34 | children: [{ 35 | value: 'nanjing', 36 | label: '南京', 37 | children: [{ 38 | value: 'zhonghuamen', 39 | label: '中华门', 40 | }], 41 | }], 42 | }]; 43 | 44 | var defaultValue = ['zhejiang', 'hangzhou', 'xihu'] 45 | 46 | new Vue({ 47 | el: 'body', 48 | components: { 49 | cascader: atui.Cascader 50 | }, 51 | data () { 52 | return { 53 | options: options, 54 | defaultValue: defaultValue 55 | } 56 | }, 57 | methods: { 58 | selectChange(selectedValue, option) { 59 | alert(selectedValue) 60 | } 61 | } 62 | }) 63 | ```` 64 | -------------------------------------------------------------------------------- /src/components/Cascader/index.js: -------------------------------------------------------------------------------- 1 | import Cascader from './Cascader.vue' 2 | 3 | export default Cascader 4 | -------------------------------------------------------------------------------- /src/components/DatePicker/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 基本的使用方法 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | setDate 18 | ```` 19 | 20 | ````vue-script 21 | new Vue({ 22 | el: 'body', 23 | components: { 24 | vDatePicker: atui.DatePicker, 25 | vButton: atui.Button 26 | }, 27 | data: { 28 | date: new Date('2017-03-02') 29 | }, 30 | methods: { 31 | setDate () { 32 | this.date = new Date('2017-03-10') 33 | } 34 | } 35 | }) 36 | ```` 37 | -------------------------------------------------------------------------------- /src/components/DatePicker/demo/disabled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 禁用状态 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 通过添加disabled属性来禁用组件 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | components: { 23 | datePicker: atui.DatePicker 24 | } 25 | }) 26 | ```` 27 | -------------------------------------------------------------------------------- /src/components/DatePicker/demo/disabledrange.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 禁用部分日期的时间范围选择器 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | `RangePicker`可以通过设置`disabledStart`，`disabledEnd` 来禁用部分日期 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | components: { 23 | rangePicker: atui.DatePicker.RangePicker 24 | }, 25 | methods:{ 26 | change(start,end) { 27 | console.log(start,end) 28 | } 29 | } 30 | }) 31 | ```` 32 | -------------------------------------------------------------------------------- /src/components/DatePicker/demo/rangepicker.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 日期范围 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | DatePicker提供了一个子组件：`RangePicker`,使用`DatePicker.RangePicker`调用即可 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | components: { 23 | rangePicker: atui.DatePicker.RangePicker 24 | }, 25 | methods:{ 26 | change(start,end) { 27 | console.log(start,end) 28 | } 29 | } 30 | }) 31 | ```` 32 | -------------------------------------------------------------------------------- /src/components/DatePicker/index.js: -------------------------------------------------------------------------------- 1 | import DatePicker from './DatePicker.vue' 2 | import RangePicker from './RangePicker.vue' 3 | 4 | DatePicker.RangePicker = RangePicker 5 | 6 | export default DatePicker 7 | -------------------------------------------------------------------------------- /src/components/DatePicker/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Form Controls 4 | title: DatePicker 5 | subtitle: 日期选择器 6 | --- 7 | 8 | 9 | 10 | ## 何时使用 11 | 12 | 13 | ## API 14 | 15 | ### DatePicker 16 | 17 | 属性 | 说明 | 类型 | 默认值 18 | -----|-----|-----|------ 19 | value | 默认值,Date类型 | Date | `new Date()` | 20 | placeholder | 占位文字 | String | 请选择日期 21 | disabled | 是否禁用 | Boolean | false 22 | format | 格式 | String | yyyy-MM-dd 23 | disabledDate | 禁用的日期 | Function | `function(){}` 24 | locale | 语言 | String `zh_CN` or `en_US`| zh_CN 25 | 26 | 27 | 28 | ### DatePicker.RangePicker 29 | 30 | 属性 | 说明 | 类型 | 默认值 31 | -----|-----|-----|------ 32 | startDate | 开始日期,如果不设置默认为今天 | Date | | 33 | endDate | 结束日期,如果不设置默认为今天 | Date | | 34 | disabled | 是否禁用 | Boolean | false 35 | format | 格式 | String | yyyy-MM-dd 36 | disabledStart | 禁用开始时间的部分日期 | Function | `(date) => { return false }` | 37 | disabledEnd | 禁用结束时间的部分日期 | Function | `(date) => { return false }` | 38 | -------------------------------------------------------------------------------- /src/components/DatePicker/store.js: -------------------------------------------------------------------------------- 1 | var store = { 2 | state: { 3 | show: false 4 | }, 5 | setMessageAction (newValue) { 6 | this.debug && console.log('setMessageAction triggered with', newValue) 7 | this.state.message = newValue 8 | }, 9 | clearMessageAction () { 10 | this.debug && console.log('clearMessageAction triggered') 11 | this.state.message = 'action B triggered' 12 | } 13 | } 14 | 15 | module.export = store 16 | -------------------------------------------------------------------------------- /src/components/DatePicker/test/datepicker.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import DatePicker from '../' 3 | 4 | let vm = new Vue({ 5 | template: ` 6 |
    7 | 8 | 9 |
    10 | `, 11 | components: { DatePicker }, 12 | data: { 13 | 14 | } 15 | }).$mount() 16 | 17 | describe('DatePicker', () => { 18 | it('DatePicker组件是否正常显示', () => { 19 | expect(vm.$el.querySelectorAll('.atui-datepicker').length).to.equal(1) 20 | }) 21 | 22 | it('事件回调', () => { 23 | 24 | }) 25 | }) 26 | -------------------------------------------------------------------------------- /src/components/DatePicker/test/rangepicker.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import DatePicker from '../' 3 | const RangePicker = DatePicker.RangePicker 4 | 5 | let vm = new Vue({ 6 | template: ` 7 |
    8 | 9 |
    10 | `, 11 | components: { RangePicker }, 12 | data: { 13 | 14 | } 15 | }).$mount() 16 | 17 | describe('RangePicker', () => { 18 | it('RangePicker组件是否正常显示', () => { 19 | expect(vm.$el.querySelectorAll('.atui-datepicker').length).to.equal(2) 20 | }) 21 | }) 22 | -------------------------------------------------------------------------------- /src/components/Dropdown/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 通过名为`dropdown-menu`的slot来自定义弹出层 10 | 11 | 12 | ## en-US 13 | 14 | ````jsx 15 | 16 | 17 |
    18 | 点击显示菜单 19 |
    20 | 27 |     28 | 29 | ```` 30 | 31 | ````vue-script 32 | new Vue({ 33 | el: 'body', 34 | components: { 35 | vDropdown: atui.Dropdown, 36 | icon: atui.Icon 37 | }, 38 | data: { 39 | 40 | }, 41 | methods: { 42 | closeDropdown () { 43 | } 44 | } 45 | }) 46 | ```` 47 | -------------------------------------------------------------------------------- /src/components/Dropdown/demo/hide.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 菜单隐藏方式 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 下拉菜单默认在点击菜单项后会被隐藏，将`hide-on-click`属性默认为`false`可以关闭此功能。 10 | 11 | 12 | ## en-US 13 | 14 | ````jsx 15 | 16 | 17 |
    18 | 点击显示菜单 19 |
    20 | 27 |     28 | 29 | ```` 30 | 31 | ````vue-script 32 | new Vue({ 33 | el: 'body', 34 | components: { 35 | vDropdown: atui.Dropdown, 36 | icon: atui.Icon 37 | }, 38 | data: { 39 | 40 | }, 41 | methods: { 42 | closeDropdown () { 43 | } 44 | } 45 | }) 46 | ```` 47 | -------------------------------------------------------------------------------- /src/components/Dropdown/demo/hover.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: hover 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | hover显示 10 | 11 | 12 | ## en-US 13 | 14 | ````jsx 15 | 16 | 17 |
    18 | hover显示菜单 19 |
    20 | 27 |     28 | 29 | ```` 30 | 31 | ````vue-script 32 | new Vue({ 33 | el: 'body', 34 | components: { 35 | dropdown: atui.Dropdown, 36 | icon: atui.Icon 37 | } 38 | }) 39 | ```` 40 | -------------------------------------------------------------------------------- /src/components/Dropdown/demo/offset.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 带偏移量的菜单 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 配置props:`offset=[0, 20]`,向下偏移量20px 10 | 11 | 12 | ## en-US 13 | 14 | ````jsx 15 | 16 | 17 |
    18 | 点击显示菜单 19 |
    20 | 27 |     28 | 29 | ```` 30 | 31 | ````vue-script 32 | new Vue({ 33 | el: 'body', 34 | components: { 35 | vDropdown: atui.Dropdown, 36 | icon: atui.Icon 37 | }, 38 | data: { 39 | 40 | }, 41 | methods: { 42 | closeDropdown () { 43 | } 44 | } 45 | }) 46 | ```` 47 | -------------------------------------------------------------------------------- /src/components/Dropdown/index.js: -------------------------------------------------------------------------------- 1 | import Dropdown from './Dropdown.vue' 2 | 3 | export default Dropdown 4 | -------------------------------------------------------------------------------- /src/components/Dropdown/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Views 4 | title: Dropdown 5 | subtitle: 下拉菜单 6 | --- 7 | 8 | dropdown组件只提供了一种能力，只需要指定slot 9 | 10 | ## 何时使用 11 | 12 | 13 | ## API 14 | 15 | 16 | 属性 | 说明 | 类型 | 默认值 17 | -----|-----|-----|------ 18 | hideOnClick | 是否在点击菜单项后隐藏菜单 ｜ `Boolean` | `true` | 19 | offset | 下拉弹出层的偏移量, 如`[0, 50]`,横向不偏移,纵向偏移50px | `Array` | `[0, 0]` | 20 | trigger | 显示下拉菜单的触发方式，可选值为`hover`, `click`, `focus`默认为`click` | `click` | 21 | @change | 下拉菜单展示状态变化时触发 | `function(isOpen)` | 无 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/components/Dropdown/test/dropdown.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Dropdown from '../' 3 | 4 | 5 | let vm = new Vue({ 6 | template: ` 7 |
    8 | 9 | 10 |
    11 | `, 12 | components: { Dropdown }, 13 | data: { 14 | 15 | } 16 | }).$mount() 17 | 18 | describe('Dropdown', () => { 19 | it('Dropdown组件是否正常显示', () => { 20 | expect(vm.$el.querySelectorAll('.atui-dropdown-cont').length).to.equal(1) 21 | }) 22 | 23 | it('事件回调', () => { 24 | 25 | }) 26 | }) 27 | -------------------------------------------------------------------------------- /src/components/Form/Form.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 35 | -------------------------------------------------------------------------------- /src/components/Form/index.js: -------------------------------------------------------------------------------- 1 | import Form from './Form.vue' 2 | import FormItem from './FormItem.vue' 3 | 4 | Form.FormItem = FormItem 5 | 6 | export default Form 7 | -------------------------------------------------------------------------------- /src/components/Form/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Form Controls 4 | title: Form 5 | subtitle: 表单 6 | cols: 1 7 | --- 8 | 9 | 10 | ## 何时使用 11 | 12 | 13 | ## API 14 | 15 | ### Form 16 | 属性 | 说明 | 类型 | 默认值 17 | -----|-----|-----|------ 18 | prefix-cls | 样式前缀 | String | atui 19 | 20 | ### Form.FormItem 21 | 属性 | 说明 | 类型 | 默认值 22 | -----|-----|-----|------ 23 | label | 表单元素标记 | String | 空 24 | item-col | 以当前Form表单为准，表单信息项所占栅格列数 | String | 24，即占一行 25 | label-col | 以当前表单信息项为准，表单元素标记所占栅格列数 | String | 7 26 | wrapper-col | 以当前表单信息项为准，表单元素所占栅格列数 | String | 24 - labelCol 27 | required | 是否在表单元素标记前加* | Boolean | false 28 | tips | 表单信息项错误提示信息，有值才显示 | String | 空 29 | valid-status | 验证状态，目前取值有success,warning,error和空 | String | 空 30 | has-icon | 配合validateStatus属性使用，是否展示校验状态图标 | Boolean | false 31 | prefix-cls | 样式前缀 | String | atui 32 | tips-mode | 提示文案显示方式，目前取值有text（提示文案显示在输入域的下方）和popup（提示文案显示在输入域的右侧） | String | text 33 | description | popup模式提示下，显示的输入提示，如果验证状态为error，则会显示错误提示文案 | String | 空 34 | description-Width | popup提示框的宽度，和description配合使用 | String、Number | 300 35 | 36 | -------------------------------------------------------------------------------- /src/components/Form/test/form.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jiangyi on 16/7/13. 3 | */ 4 | 5 | import Vue from 'vue' 6 | import Form from '../' 7 | 8 | const FormItem = Form.FormItem 9 | 10 | describe('Form组件单元测试', () => { 11 | let vm = new Vue({ 12 | components: { 13 | vForm: Form, 14 | vFormItem: FormItem 15 | }, 16 | template: ` 17 |
    18 | 19 | 20 | 21 | 22 | 23 | 24 |
    25 | ` 26 | }).$mount() 27 | 28 | it('基础功能渲染', () => { 29 | expect(vm.$el.querySelectorAll('.atui-form').length).to.be.equal(1) 30 | expect(vm.$el.querySelectorAll('.atui-form-item').length).to.be.equal(1) 31 | }) 32 | }) 33 | -------------------------------------------------------------------------------- /src/components/Icon/Icon.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 28 | -------------------------------------------------------------------------------- /src/components/Icon/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 所有的icon示例 11 | 12 | 13 | ## en-US 14 | 15 | 16 | ````jsx 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 | ````vue-script 45 | new Vue({ 46 | el: 'body', 47 | components: { 48 | vIcon: atui.Icon 49 | } 50 | }) 51 | ```` 52 | -------------------------------------------------------------------------------- /src/components/Icon/demo/recommend.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 推荐尺寸 5 | en-US: Recommend 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 图标推荐尺寸 11 | 因为同一个的图标在不同尺寸下线条感差异可能会比较大，针对不同的图标，我们给出推荐尺寸 12 | 13 | 14 | ## en-US 15 | 16 | 17 | ````jsx 18 | 19 |

    16px尺寸推荐使用：

    20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
    31 |

    24px尺寸推荐使用：

    32 | 33 | 34 | 35 | 36 | 37 |
    38 |

    36px尺寸推荐使用：

    39 | 40 | 41 | 42 | 43 | 44 | 45 | ```` 46 | 47 | ````vue-script 48 | new Vue({ 49 | el: 'body', 50 | components: { 51 | vIcon: atui.Icon 52 | } 53 | }) 54 | ```` 55 | -------------------------------------------------------------------------------- /src/components/Icon/demo/size.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 自定义尺寸 5 | en-US: Size 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 自定义尺寸的图标 11 | 12 | 13 | ## en-US 14 | 15 | 16 | ````jsx 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | ```` 37 | 38 | ````vue-script 39 | new Vue({ 40 | el: 'body', 41 | components: { 42 | vIcon: atui.Icon 43 | } 44 | }) 45 | ```` 46 | -------------------------------------------------------------------------------- /src/components/Icon/index.js: -------------------------------------------------------------------------------- 1 | import Icon from './Icon.vue' 2 | 3 | export default Icon 4 | -------------------------------------------------------------------------------- /src/components/Icon/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Basic 4 | title: Icon 5 | subtitle: 图标 6 | --- 7 | 8 | 9 | ## 何时使用 10 | 11 | 当页面中需要展示icon时 12 | 13 | ## 如何调用 14 | 15 | `atui.Icon` 16 | 17 | ## API 18 | 19 | 属性 | 说明 | 类型 | 默认值 20 | -----|-----|-----|------ 21 | type | icon类型，必选 | String | | 22 | size | 大小 | String | 16px | 23 | color | 颜色 | String | | 24 | 25 | -------------------------------------------------------------------------------- /src/components/Icon/test/icon.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jiangyi on 16/7/13. 3 | */ 4 | 5 | import Vue from 'vue' 6 | import Icon from '../' 7 | 8 | describe('Icon组件单元测试', () => { 9 | let vm = new Vue({ 10 | components: { 11 | Icon 12 | }, 13 | template: ` 14 |
    15 | 16 |
    17 | ` 18 | }).$mount() 19 | 20 | it('基本功能渲染', () => { 21 | expect(vm.$el.querySelectorAll('.atui-icon-search').length).to.be.equal(1) 22 | }) 23 | }) 24 | -------------------------------------------------------------------------------- /src/components/Input/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 可以通过给输入框绑定v-model来创建双向绑定 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 |
    17 | 18 |
    19 |
    20 |
    21 | 22 |
    23 |
    24 |
    25 | 26 |
    27 |
    28 |
    29 | 30 |
    31 | ```` 32 | 33 | ````vue-script 34 | new Vue({ 35 | el: 'body', 36 | components: { 37 | vInput: atui.Input 38 | }, 39 | data: { 40 | val: '123' 41 | } 42 | }) 43 | ```` 44 | -------------------------------------------------------------------------------- /src/components/Input/demo/status.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 验证状态 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 有三个状态可选：`error`,`success`,`warn` 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 |
    17 | 18 |
    19 |
    20 |
    21 | 22 |
    23 | ```` 24 | 25 | ````vue-script 26 | new Vue({ 27 | el: 'body', 28 | components: { 29 | vInput: atui.Input 30 | } 31 | }) 32 | ```` 33 | -------------------------------------------------------------------------------- /src/components/Input/index.js: -------------------------------------------------------------------------------- 1 | import Input from './Input.vue' 2 | 3 | export default Input 4 | -------------------------------------------------------------------------------- /src/components/Input/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Form Controls 4 | title: Input 5 | subtitle: 输入框 6 | --- 7 | 8 | 9 | atui.Input 10 | 11 | > 注意：input在HTML是原生标签，注册组件时请使用自定义组件比如vInput 12 | 13 | ## API 14 | 15 | 16 | 17 | 属性 | 说明 | 类型 | 默认值 18 | -----|-----|-----|------ 19 | prefix-cls | 样式前缀 | String | atui 20 | placeholder | 占位提示 | String | 空 | 21 | value | 输入域文本 | String | 空 | 22 | large | 按钮组尺寸，大 | Boolean | false | 23 | small | 按钮组尺寸，小 | Boolean | false | 24 | error | 增加错误样式（不建议直接使用，推荐通过修改valid-status属性的值来控制） | Boolean | false | 25 | success | 增加成功样式（不建议直接使用，推荐通过修改valid-status属性的值来控制） | Boolean | false | 26 | warn | 增加警告样式（不建议直接使用，推荐通过修改valid-status属性的值来控制） | Boolean | false | 27 | valid-status | 当前验证状态，如不设置，会根据验证规则自动生成 有三个状态可选：`error`,`success`,`warn` | String | 空 | 28 | required | 规则验证，是否必填 | Boolean | false 29 | requiredTips | 必填验证失败的提示文案 | String | 空 30 | maxlength | 输入内容最大长度 | String | 空 | 31 | minlength | 输入内容最小长度 | String | 空 | 32 | minlengthTips | 最小长度验证失败的提示文案 | String | 空 33 | rules | 验证规则 | Array | 空 34 | rules-tips | 验证规则对应的验证失败时的提示文案 | Array | 空 35 | valid-result | 所有验证规则校验后的验证结果，每项验证规则都对应着一个验证状态（success或者error），一个验证提示 | Object | 空 36 | tips | 总的提示文案，如不配置，会根据rules和rules-tips自动生成 | String | 空 37 | 38 | 39 | -------------------------------------------------------------------------------- /src/components/Layout/Col.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 26 | -------------------------------------------------------------------------------- /src/components/Layout/Row.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /src/components/Layout/index.js: -------------------------------------------------------------------------------- 1 | import Row from './Row.vue' 2 | import Col from './Col.vue' 3 | 4 | export default { Row, Col } 5 | -------------------------------------------------------------------------------- /src/components/Layout/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Basic 4 | title: Layout 5 | subtitle: 布局 6 | cols: 1 7 | --- 8 | 9 | 10 | ## 何时使用 11 | 页面布局时使用，使用24栏栅格设计，在Layout组件下有两个子组件，分别是`Row`和`Col`，代表行和列，由于Col是HTML原生标签，所以使用时不能使用Col标签，用法示例： 12 | 13 | ```js 14 | new Vue({ 15 | el: 'body', 16 | components: { 17 | vRow: atui.Layout.Row, 18 | vCol: atui.Layout.Col 19 | } 20 | }) 21 | ``` 22 | 23 | ## API 24 | 25 | 26 | ### Layout.Row 27 | 28 | 属性 | 说明 | 类型 | 默认值 29 | -----|-----|-----|------ 30 | 31 | ### Layout.Col 32 | 33 | 属性 | 说明 | 类型 | 默认值 34 | -----|-----|-----|------ 35 | span | 栅格数量 | String | 1 36 | 37 | 38 | 39 | 49 | -------------------------------------------------------------------------------- /src/components/Layout/test/layout.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Layout from '../' 3 | 4 | 5 | describe('Layout组件单元测试', () => { 6 | let vm = new Vue({ 7 | components: { 8 | vRow: Layout.Row, 9 | vCol: Layout.Col 10 | }, 11 | template: ` 12 |
    13 | 14 | col-23 15 | 1 16 | 17 | 18 | col-22 19 | 2 20 | 21 | 22 | col-24 23 | 24 |
    25 | ` 26 | }).$mount() 27 | 28 | it('基础功能渲染', () => { 29 | expect(vm.$el.querySelectorAll('.atui-row').length).to.be.equal(3) 30 | expect(vm.$el.querySelectorAll('.atui-row:first-child > div').length).to.be.equal(2) 31 | }) 32 | }) 33 | -------------------------------------------------------------------------------- /src/components/Menu/MenuItem.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 49 | -------------------------------------------------------------------------------- /src/components/Menu/MenuItemGroup.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 38 | -------------------------------------------------------------------------------- /src/components/Menu/demo/open-one.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 始终只展开一个菜单 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 18 | 19 | 选项1 20 | 选项2 21 | 22 | 23 | 选项3 24 | 选项4 25 | 26 | 27 | 28 | 选项5 29 | 选项6 30 | 31 | 32 | 选项9 33 | 选项10 34 | 选项11 35 | 选项12 36 | 37 | 38 | ```` 39 | 40 | ````vue-script 41 | new Vue({ 42 | el: 'body', 43 | components: { 44 | vMenu: atui.Menu, 45 | vMenuItem: atui.Menu.MenuItem, 46 | vMenuItemGroup: atui.Menu.MenuItemGroup, 47 | vSubMenu: atui.Menu.SubMenu 48 | } 49 | }) 50 | ```` 51 | -------------------------------------------------------------------------------- /src/components/Menu/index.js: -------------------------------------------------------------------------------- 1 | import Menu from './Menu.vue' 2 | import SubMenu from './SubMenu.vue' 3 | import MenuItem from './MenuItem.vue' 4 | import MenuItemGroup from './MenuItemGroup.vue' 5 | 6 | // import Divider from './Divider.vue' 7 | 8 | Menu.SubMenu = SubMenu 9 | Menu.MenuItem = MenuItem 10 | Menu.MenuItemGroup = MenuItemGroup 11 | // Menu.Divider = Divider 12 | 13 | export default Menu 14 | -------------------------------------------------------------------------------- /src/components/Menu/test/menu.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jiangyi on 16/7/13. 3 | */ 4 | 5 | import Vue from 'vue' 6 | import Menu from '../' 7 | 8 | const {SubMenu, MenuItem, MenuItemGroup} = Menu 9 | 10 | describe('Menu组件单元测试', () => { 11 | let vm = new Vue({ 12 | components: { 13 | vMenu: Menu, 14 | vSubMenu: SubMenu, 15 | vMenuItem: MenuItem, 16 | vMenuItemGroup: MenuItemGroup 17 | }, 18 | template: ` 19 |
    20 | 21 | 22 | 23 | 选项1 24 | 选项2 25 | 26 | 27 | 选项3 28 | 选项4 29 | 30 | 31 | 32 |
    33 | ` 34 | }).$mount() 35 | 36 | it('基本功能渲染', () => { 37 | expect(vm.$el.querySelectorAll('.atui-menu-root').length).to.be.equal(1) 38 | expect(vm.$el.querySelectorAll('.atui-menu-submenu').length).to.be.equal(1) 39 | expect(vm.$el.querySelectorAll('.atui-menu-item-group').length).to.be.equal(2) 40 | expect(vm.$el.querySelectorAll('.atui-menu-item').length).to.be.equal(4) 41 | }) 42 | }) 43 | -------------------------------------------------------------------------------- /src/components/Message/demo/arrow.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 4 | zh-CN: 带箭头的 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 箭头在上边 18 | 19 | 20 | 箭头在下边 21 | 22 | 23 | 箭头在左边 24 | 25 | 26 | 箭头在右边 27 | 28 | ```` 29 | 30 | ````vue-script 31 | new Vue({ 32 | el: 'body', 33 | components: { 34 | message: atui.Message 35 | } 36 | }) 37 | ```` 38 | -------------------------------------------------------------------------------- /src/components/Message/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 这是一个信息提示 18 | 19 | ```` 20 | 21 | ````vue-script 22 | new Vue({ 23 | el: 'body', 24 | components: { 25 | message: atui.Message 26 | } 27 | }) 28 | ```` 29 | -------------------------------------------------------------------------------- /src/components/Message/demo/closable.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 可关闭的 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 这是一个信息提示，可关闭 18 | 19 | ```` 20 | 21 | ````vue-script 22 | new Vue({ 23 | el: 'body', 24 | components: { 25 | message: atui.Message 26 | } 27 | }) 28 | ```` 29 | -------------------------------------------------------------------------------- /src/components/Message/demo/icon.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 带icon的 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 这是一个信息提示 18 | 19 | ```` 20 | 21 | ````vue-script 22 | new Vue({ 23 | el: 'body', 24 | components: { 25 | message: atui.Message 26 | } 27 | }) 28 | ```` 29 | -------------------------------------------------------------------------------- /src/components/Message/demo/js-call.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 4 | zh-CN: 使用脚本调用 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 可以直接使用组件实例调用方法,比如： 11 | 12 | - `Message.success(content, duration)` 13 | - `Message.error(content, duration)` 14 | - `Message.info(content, duration)` 15 | - `Message.warning(content, duration)` 16 | - `Message.loading(content, duration)` 17 | 18 | ## en-US 19 | 20 | 21 | ````jsx 22 | 23 | 点我会弹出提示 24 | 25 | ```` 26 | 27 | 28 | ````vue-script 29 | new Vue({ 30 | el: 'body', 31 | components: { 32 | vButton: atui.Button 33 | }, 34 | methods: { 35 | showMessage () { 36 | atui.Message.success('成功啦',3000) 37 | } 38 | } 39 | 40 | }) 41 | ```` 42 | -------------------------------------------------------------------------------- /src/components/Message/demo/styles.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 不同样式 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 成功提示的文案 18 | 19 | 20 | 21 | 消息提示的文案 22 | 23 | 24 | 25 | 错误提示的文案 26 | 27 | 28 | 29 | 警告提示的文案 30 | 31 | ```` 32 | 33 | ````vue-script 34 | new Vue({ 35 | el: 'body', 36 | components: { 37 | message: atui.Message 38 | } 39 | }) 40 | ```` 41 | -------------------------------------------------------------------------------- /src/components/Message/test/message.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Message from '../' 3 | 4 | // 目前message测试用例,拉底了Coverage summary的统计数据 5 | let vm = new Vue({ 6 | data () { 7 | return { 8 | show: true 9 | } 10 | }, 11 | template: ` 12 |
    13 | 19 | 我是标题! 20 |

    我是具体内容.

    21 |     22 |
    23 | `, 24 | components: { Message } 25 | }).$mount() 26 | 27 | describe('Message', () => { 28 | it('Message组件是否正常显示', () => { 29 | expect(vm.$el.textContent).to.contain('我是标题!') 30 | expect(vm.$el.textContent).to.contain('我是具体内容.') 31 | }) 32 | 33 | // it('定时消失', () => { 34 | // setTimeout(() => { 35 | // expect(vm.$el.style.display).to.equal('none') 36 | // }, 4000) 37 | // }) 38 | }) 39 | 40 | -------------------------------------------------------------------------------- /src/components/Modal/demo/backdrop.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 点击蒙层可关闭 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 增加backdrop属性即可 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 显示弹窗 17 | 18 |
    19 |

    Custom Modal Title

    20 |
    21 |
    22 | 高圆圆，中国女演员，1979年10月5日出生于北京市丰台区云岗一个普通的知识分子家庭。1996年高圆圆被广告公司发掘，随后拍摄了大量广告，成为了广告圈中的模特。1997年高圆圆出演了她的第一部电影《爱情麻辣烫》，从此开始了她的演员生涯。2001年高圆圆参演的电影《十七岁的单车》获得柏林国际电影节最佳影片银熊奖。 23 |
    24 |
    25 | Exit 26 | Custom Save 27 |
    28 |     29 | ```` 30 | 31 | ````vue-script 32 | new Vue({ 33 | el: 'body', 34 | components: { 35 | modal: atui.Modal, 36 | vButton: atui.Button 37 | }, 38 | data () { 39 | return { 40 | show: false 41 | } 42 | } 43 | }) 44 | ```` 45 | -------------------------------------------------------------------------------- /src/components/Modal/demo/custom-size.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 自定义尺寸 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 显示弹窗 17 | 18 |
    19 |

    Custom Modal Title

    20 |
    21 |
    22 | 高圆圆，中国女演员，1979年10月5日出生于北京市丰台区云岗一个普通的知识分子家庭。1996年高圆圆被广告公司发掘，随后拍摄了大量广告，成为了广告圈中的模特。1997年高圆圆出演了她的第一部电影《爱情麻辣烫》，从此开始了她的演员生涯。2001年高圆圆参演的电影《十七岁的单车》获得柏林国际电影节最佳影片银熊奖。 23 |
    24 |
    25 | Exit 26 | Custom Save 27 |
    28 |     29 | ```` 30 | 31 | ````vue-script 32 | new Vue({ 33 | el: 'body', 34 | components: { 35 | modal: atui.Modal, 36 | vButton: atui.Button 37 | }, 38 | data () { 39 | return { 40 | show: false 41 | } 42 | } 43 | }) 44 | ```` 45 | -------------------------------------------------------------------------------- /src/components/Modal/demo/custom-style.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 自定义头和尾 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 可以自定义头部和尾部，使用slot填充即可 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 显示弹窗 17 | 18 |
    19 |

    自定义头

    20 |
    21 |
    22 | 高圆圆，中国女演员，1979年10月5日出生于北京市丰台区云岗一个普通的知识分子家庭。1996年高圆圆被广告公司发掘，随后拍摄了大量广告，成为了广告圈中的模特。1997年高圆圆出演了她的第一部电影《爱情麻辣烫》，从此开始了她的演员生涯。2001年高圆圆参演的电影《十七岁的单车》获得柏林国际电影节最佳影片银熊奖。 23 |
    24 |
    25 | 我是自定义尾部的按钮 26 |
    27 |     28 | ```` 29 | 30 | ````vue-script 31 | new Vue({ 32 | el: 'body', 33 | components: { 34 | modal: atui.Modal, 35 | vButton: atui.Button 36 | }, 37 | data () { 38 | return { 39 | show: false 40 | } 41 | } 42 | }) 43 | ```` 44 | -------------------------------------------------------------------------------- /src/components/Modal/demo/modal-comfirm.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 4 | zh-CN: Modal.confirm({title,content,onOk,btnOkText='确定',btnCancelText='取消'}) 显示确认对话框 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 可以使用atui.Modal.confirm方法方便的显示确认对话框,并在用户选择‘确认’执行回调函数 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 显示确认对话框 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | data () { 23 | return { 24 | } 25 | }, 26 | methods: { 27 | showConfirm () { 28 | atui.Modal.confirm({ 29 | title: '操作确认', 30 | content: '您确认要删除选择记录?', 31 | onOk () { 32 | console.log('您确认了删除操作') 33 | }, 34 | btnOkText: '删除', 35 | btnCancelText: '再想想' }) 36 | } 37 | }, 38 | components: { 39 | vButton: atui.Button 40 | } 41 | }) 42 | ```` 43 | -------------------------------------------------------------------------------- /src/components/Modal/demo/modal-success.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 4 | zh-CN: Modal.success({title,content,onOk}) 显示操作成功提示对话框 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 可以使用atui.Modal.success方法方便的显示确认操作成功提示对话框,并在用点击确认后执行回调函数 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 显示操作成功提示对话框 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | data () { 23 | return { 24 | } 25 | }, 26 | methods: { 27 | showSuccess () { 28 | atui.Modal.success({ 29 | title: '操作成功', 30 | content: '保存成功,点击确认返回列表页面?', 31 | onOk () { 32 | console.log('即将返回列表页面!') 33 | }}) 34 | } 35 | }, 36 | components: { 37 | vButton: atui.Button 38 | } 39 | }) 40 | ```` 41 | -------------------------------------------------------------------------------- /src/components/Modal/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Views 4 | title: Modal 5 | subtitle: 对话框 6 | --- 7 | 8 | 9 | ## 何时使用 10 | 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。 11 | 打开关闭弹窗可以通过控制show属性，注意父组件需要监听Modal的@close事件，在事件中把show属性置为false，也可以拿到Modal的引用，调用open() close()函数 12 | 另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 `atui.Modal.confirm()` 等方法。 13 | 14 | ## API 15 | 16 | 17 | 属性 | 说明 | 类型 | 默认值 18 | -----|-----|-----|------ 19 | title | 标题 | String | 20 | width | ( 例如: `80%` 或 `5em` 或`500px` ) 如果不填那么就是自动宽 | String | 21 | height | 最大高度目前设定的是500px | String | 22 | backdrop | 如果想点击弹窗后面的蒙层关闭弹窗，则设置为`true` | Boolean | false 23 | callback | 当点击主要按钮时触发的回调 | String | 24 | large | 大的弹窗 | Boolean | false 25 | small | 小的弹窗 | Boolean | false 26 | show | 是否显示 | Boolean | true 27 | 28 | ### atui.Modal.xxx() 29 | 30 | 包括： 31 | 32 | - Modal.info 33 | - Modal.success 34 | - Modal.error 35 | - Modal.confirm 36 | 37 | 以上均为一个函数，参数为 object，具体属性如下： 38 | 39 | 参数 | 说明 | 类型 | 默认值 40 | -----|-----|-----|-----| 41 | | title | 标题 | string | 无 | 42 | | content | 内容 | string | 无 | 43 | | onOk | 点击确定回调，参数为关闭函数 | function | 无 | 44 | | btnOkText | 确认按钮文字 | string | 确定 | 45 | | btnCancelText | 取消按钮文字 | string | 取消 | -------------------------------------------------------------------------------- /src/components/Pagination/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | components: { 23 | pagination: atui.Pagination 24 | }, 25 | data: function() { 26 | return { 27 | totalPage: 10, 28 | currPage: 2, 29 | total: 273 30 | } 31 | } 32 | }) 33 | ```` 34 | -------------------------------------------------------------------------------- /src/components/Pagination/demo/mini.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 迷你版 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | components: { 23 | pagination: atui.Pagination 24 | }, 25 | data: function() { 26 | return { 27 | totalPage: 10, 28 | currPage: 2, 29 | total: 273 30 | } 31 | } 32 | }) 33 | ```` 34 | -------------------------------------------------------------------------------- /src/components/Pagination/demo/show-size-changer.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 页码改变与跳转功能 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | components: { 23 | pagination: atui.Pagination 24 | }, 25 | data: function() { 26 | return { 27 | currPage: 3, 28 | total: 273, 29 | options: [ 30 | 15, 25, 35, 45 31 | ] 32 | } 33 | } 34 | }) 35 | ```` 36 | -------------------------------------------------------------------------------- /src/components/Pagination/demo/simple.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 简单版 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | components: { 23 | pagination: atui.Pagination 24 | }, 25 | data: function() { 26 | return { 27 | totalPage: 10, 28 | currPage: 2, 29 | total: 273 30 | } 31 | } 32 | }) 33 | ```` 34 | -------------------------------------------------------------------------------- /src/components/Pagination/index.js: -------------------------------------------------------------------------------- 1 | import Pagination from './Pagination.vue' 2 | // import Jumper from './Jumper.vue' 3 | 4 | // Pagination.Jumper = Jumper 5 | 6 | export default Pagination 7 | -------------------------------------------------------------------------------- /src/components/Pagination/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Navigation 4 | title: Pagination 5 | subtitle: 分页 6 | cols: 1 7 | --- 8 | 9 | 10 | ## 何时使用 11 | 12 | 13 | ## API 14 | 15 | 16 | ### Panation 17 | 18 | 属性 | 说明 | 类型 | 默认值 19 | -----|-----|-----|------ 20 | pageSize | 页码大小 | Number | 10 21 | total | 数据总条数 | Number | | 22 | currPage | 当前页 | Number | 1 23 | showJumper | 是否可跳转自定义页 | Boolean | false 24 | showSizeChanger | 是否可改变页码大小 | Boolean | false 25 | pageSizeOptions | 指定每页可以显示多少条 | Array | [10, 20, 30, 40] 26 | simple | 简单版 | Boolean | false 27 | mini | 迷你版 | Boolean | false 28 | @change | 当前页吗发生变化时触发 | Function(currPage) | | 29 | @size-change | pageSize变化时触发 | Function(pageSize) | | 30 | 31 | -------------------------------------------------------------------------------- /src/components/Pagination/test/pagination.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Pagination from '../' 3 | 4 | 5 | let vm = new Vue({ 6 | template: ` 7 |
    8 | 13 | 14 |
    15 | `, 16 | components: { Pagination }, 17 | data: { 18 | currPage: 5 19 | } 20 | }).$mount() 21 | 22 | describe('Pagination', () => { 23 | it('Pagination组件是否正常显示', () => { 24 | expect(vm.$el.querySelectorAll('.atui-pagination-items').length).to.equal(1) 25 | }) 26 | 27 | it('事件回调', () => { 28 | 29 | }) 30 | }) 31 | -------------------------------------------------------------------------------- /src/components/Popover/demo/always-show.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 默认显示，无法关闭 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 增加`always-show`属性，会默认一直显示，而不是点击或者hover时显示 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 22 | Popover always show 23 | 24 | ```` 25 | 26 | ````vue-script 27 | new Vue({ 28 | el: 'body', 29 | components: { 30 | popover: atui.Popover, 31 | vButton: atui.Button 32 | } 33 | }) 34 | ```` 35 | -------------------------------------------------------------------------------- /src/components/Popover/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 23 | Popover on bottom 24 | 25 | ```` 26 | 27 | ````vue-script 28 | new Vue({ 29 | el: 'body', 30 | components: { 31 | popover: atui.Popover, 32 | vButton: atui.Button 33 | } 34 | }) 35 | ```` 36 | -------------------------------------------------------------------------------- /src/components/Popover/demo/close.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 可以关闭的 5 | en-US: Close 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 使用 visible 属性控制浮层显示，在pop-change事件中同步visible的状态值 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 23 |
    24 |

    我是文字，我是文字，我是文字，我是文字，我是文字，我是文字，我是文字，

    25 | 点我关闭 26 |
    27 | Popover on bottom 28 |     29 | ```` 30 | 31 | ````vue-script 32 | new Vue({ 33 | el: 'body', 34 | components: { 35 | popover: atui.Popover, 36 | vButton: atui.Button 37 | }, 38 | data() { 39 | return { 40 | visible: false 41 | } 42 | } 43 | }) 44 | ```` 45 | -------------------------------------------------------------------------------- /src/components/Popover/index.js: -------------------------------------------------------------------------------- 1 | import Popover from './Popover.vue' 2 | 3 | export default Popover 4 | -------------------------------------------------------------------------------- /src/components/Popover/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Views 4 | title: Popover 5 | subtitle: 气泡卡片 6 | --- 7 | 8 | 9 | ## 何时使用 10 | 11 | 12 | ## API 13 | 14 | 15 | 按钮的属性说明如下： 16 | 17 | 属性 | 说明 | 类型 | 默认值 18 | -----|-----|-----|------ 19 | trigger | 触发事件 | String | click 20 | placement | 汽泡位置 | String | 参考Trigger组件 21 | title | 标题 | String | | 22 | content | 内容 | String | | 23 | visible | 用于手动控制浮层显隐 | Boolean | false 24 | showHeader | 是否显示标题 | Boolean | true 25 | alwaysShow | 是否一直显示 | Boolean | false 26 | popCls | 弹出层额外的class | String | | 27 | popZIndex | 弹出层的zindex | number | | 28 | @pop-change | pop弹出状态变化时派发pop-change事件，参数为true或false，表示是否展示 | Function | | -------------------------------------------------------------------------------- /src/components/Progress/Progress.vue: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliqin/atui/8be8e4289bbf4b93c73d0ee1856b1c7a45a1568c/src/components/Progress/Progress.vue -------------------------------------------------------------------------------- /src/components/Progress/index.js: -------------------------------------------------------------------------------- 1 | import Progress from './Progress.vue' 2 | 3 | export default Progress 4 | -------------------------------------------------------------------------------- /src/components/Searchbox/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | components: { 23 | searchbox: atui.Searchbox 24 | }, 25 | data: function() { 26 | return { 27 | defaultVal: '果', 28 | searchList: [ 29 | {name: '水果', value: '1'}, 30 | {name: '苹果', value: '2'}, 31 | {name: '香蕉', value: '3'}, 32 | {name: '人参果', value: '4'}, 33 | {name: '草莓', value: '5'}, 34 | {name: '芒果', value: '6'}, 35 | {name: '干果', value: '11'}, 36 | {name: '碧根果', value: '12'}, 37 | {name: '腰果', value: '13'}, 38 | {name: '核桃', value: '14'}, 39 | {name: '杏仁', value: '15'}, 40 | {name: '素材', value: '21'}, 41 | {name: '香菜', value: '22'} 42 | ] 43 | } 44 | }, 45 | methods: { 46 | valueChange (val) { 47 | console.log(val); 48 | }, 49 | valueCheck (item) { 50 | console.log(item); 51 | } 52 | } 53 | }) 54 | ```` 55 | -------------------------------------------------------------------------------- /src/components/Searchbox/index.js: -------------------------------------------------------------------------------- 1 | import Searchbox from './Searchbox.vue' 2 | 3 | export default Searchbox 4 | -------------------------------------------------------------------------------- /src/components/Searchbox/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Views 4 | title: Searchbox 5 | subtitle: 搜索条 6 | --- 7 | 8 | 9 | ## 何时使用 10 | ``` 11 | new Vue({ 12 | el: 'body', 13 | components: { 14 | searchbox: atui.Searchbox 15 | }, 16 | data: function() { 17 | return { 18 | defaultVal: '果', 19 | searchList: [ 20 | {name: '水果', value: '1'}, 21 | {name: '苹果', value: '2'}, 22 | {name: '香蕉', value: '3'}, 23 | {name: '人参果', value: '4'}, 24 | {name: '草莓', value: '5'}, 25 | {name: '芒果', value: '6'}, 26 | {name: '干果', value: '11'}, 27 | {name: '碧根果', value: '12'}, 28 | {name: '腰果', value: '13'}, 29 | {name: '核桃', value: '14'}, 30 | {name: '杏仁', value: '15'}, 31 | {name: '素材', value: '21'}, 32 | {name: '香菜', value: '22'} 33 | ] 34 | } 35 | }, 36 | methods: { 37 | valueChange (val) { 38 | console.log(val); 39 | }, 40 | valueCheck (item) { 41 | console.log(item); 42 | } 43 | } 44 | }) 45 | ``` 46 | 47 | ## API 48 | 49 | 50 | 按钮的属性说明如下： 51 | 52 | 属性 | 说明 | 类型 | 默认值 53 | -----|-----|-----|------ 54 | placeholder | 占位提示 | String | | 55 | searchList | 搜索候选提示列表 | Array | [] 56 | 57 | -------------------------------------------------------------------------------- /src/components/Searchbox/test/searchbox.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Searchbox from '../' 3 | 4 | let vm = new Vue({ 5 | template: ` 6 |
    7 | 8 | 9 |
    10 | `, 11 | components: { Searchbox }, 12 | data: { 13 | 14 | } 15 | }).$mount() 16 | 17 | describe('Searchbox', () => { 18 | it('SearchBox组件是否正常显示', () => { 19 | expect(vm.$el.querySelectorAll('.atui-searchbox-cont').length).to.equal(1) 20 | }) 21 | 22 | it('事件回调', () => { 23 | 24 | }) 25 | }) 26 | -------------------------------------------------------------------------------- /src/components/Select/demo/multiple.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 多选 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 多选下拉(只能选已有的) 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | AppleText 18 | BananaText 19 | CherryText 20 | OrangeText 21 | GrapeText 22 | 23 | ```` 24 | 25 | ````vue-script 26 | new Vue({ 27 | el: 'body', 28 | components: { 29 | vSelect: atui.Select, 30 | vOption: atui.Select.Option 31 | }, 32 | data: { 33 | selectedValue: ['Apple','Banana'] 34 | } 35 | }) 36 | ```` 37 | -------------------------------------------------------------------------------- /src/components/Select/demo/tag.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 标签 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | tags(输入回车时变成一个tag) 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 18 | Apple 19 | Banana 20 | Cherry 21 | Orange 22 | Grape 23 | 24 | ```` 25 | 26 | ````vue-script 27 | new Vue({ 28 | el: 'body', 29 | components: { 30 | vSelect: atui.Select, 31 | vOption: atui.Select.Option 32 | }, 33 | data() { 34 | return { 35 | single: '', 36 | selectedValue: 'Banana' 37 | } 38 | }, 39 | methods: { 40 | onSlectChange (obj) { 41 | this.single = obj.value; 42 | } 43 | } 44 | }) 45 | ```` 46 | -------------------------------------------------------------------------------- /src/components/Select/index.js: -------------------------------------------------------------------------------- 1 | import Select from './Select.vue' 2 | import Option from './Option.vue' 3 | 4 | Select.Option = Option 5 | 6 | export default Select 7 | -------------------------------------------------------------------------------- /src/components/Select/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Form Controls 4 | title: Select 5 | subtitle: 选择器 6 | --- 7 | 8 | 9 | ## 何时使用 10 | 可以使用v-model来绑定选中的值 11 | 12 | ## API 13 | `Select`组件包含子组件 `Option` 14 | 15 | ### Select 16 | 17 | 属性 | 说明 | 类型 | 默认值 18 | -----|-----|-----|------ 19 | value | 选中的值，当设置为多选时用Array | String / Array | | 20 | placeholder | 占位提示 | String | | 21 | multiple | 是否多选 | Boolean | false | 22 | selectedOptions | 多选时选中的options | [] | 23 | tags | 是否输入变Tag | Boolean | false | 24 | disabled | 是否禁用 | Boolean | false | 25 | dropdownClassName | 下拉菜单的class名 | String | | 26 | dropdownZIndex | 下拉菜单的zindex值 | Number | | 27 | 28 | ### Option 29 | 属性 | 说明 | 类型 | 默认值 30 | -----|-----|-----|------ 31 | value | 选项的值 | String | | 32 | disabled | 是否禁用 | Boolean | | 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/components/Slider/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | components: { 23 | slider: atui.Slider 24 | }, 25 | data () { 26 | return { 27 | value:30 28 | } 29 | } 30 | }) 31 | ```` 32 | -------------------------------------------------------------------------------- /src/components/Slider/demo/input.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 带有输入框的滑块 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ```` 25 | 26 | ````vue-script 27 | new Vue({ 28 | el: 'body', 29 | components: { 30 | slider: atui.Slider, 31 | vRow: atui.Layout.Row, 32 | vCol: atui.Layout.Col, 33 | vInput: atui.Input 34 | }, 35 | data: { 36 | sliderValue : 5 37 | } 38 | }) 39 | ```` 40 | -------------------------------------------------------------------------------- /src/components/Slider/demo/range.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 范围区间 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 18 | ```` 19 | 20 | ````vue-script 21 | new Vue({ 22 | el: 'body', 23 | components: { 24 | vSlider: atui.Slider 25 | }, 26 | data: { 27 | initRange:[20,50] 28 | } 29 | }) 30 | ```` 31 | -------------------------------------------------------------------------------- /src/components/Slider/index.js: -------------------------------------------------------------------------------- 1 | import Slider from './Slider.vue' 2 | 3 | export default Slider 4 | -------------------------------------------------------------------------------- /src/components/Slider/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Form Controls 4 | title: Slider 5 | subtitle: 滑动输入条 6 | --- 7 | 8 | 9 | ## 何时使用 10 | 11 | 12 | ## API 13 | 14 | 属性 | 说明 | 类型 | 默认值 15 | -----|-----|-----|------ 16 | value | 滑块的值，如果使用[5,10]或者['5','10']，表现为双滑块，也可以不指定value，直接绑定v-model | string or number or array | 0 17 | min | 滑块位置取值区间最小值 | string or number | 0 18 | max | 滑块位置取值区间最大值 | string or number | 100 19 | @change | 当值发生改变时触发的事件 | Function | | 20 | -------------------------------------------------------------------------------- /src/components/Slider/test/slider.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Slider from '../' 3 | 4 | describe('Slider组件单元测试', () => { 5 | let vm = new Vue({ 6 | components: { 7 | vSlider: Slider 8 | }, 9 | replace: false, 10 | template: ` 11 |
    12 | 13 | 14 | 15 |
    16 | `, 17 | data: { 18 | sliderValue: 5, 19 | initRange: [20, 50] 20 | } 21 | }).$mount() 22 | 23 | it('基础功能渲染', () => { 24 | expect(vm.$el.querySelectorAll('.atui-slider').length).to.be.equal(3) 25 | expect(vm.$el.querySelectorAll('.atui-slider-step').length).to.be.equal(3) 26 | expect(vm.$el.querySelectorAll('.atui-slider-mark').length).to.be.equal(3) 27 | }) 28 | 29 | it('改变范围', () => { 30 | vm.value = 0 31 | vm.sliderValue = 20 32 | // var e = document.createEvent('MouseEvents') 33 | // vm.change(e) 34 | vm.$nextTick(() => { 35 | 36 | }) 37 | }) 38 | }) 39 | -------------------------------------------------------------------------------- /src/components/Spin/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 要显示的时候show必须传，否则是不显示状态 10 | 11 | ## en-US 12 | 13 | 14 | ````jsx 15 | 16 |
    17 | 18 | ```` 19 | 20 | ````vue-script 21 | new Vue({ 22 | el: 'body', 23 | components: { 24 | spin: atui.Spin 25 | }, 26 | data () { 27 | return { show: false } 28 | } 29 | }) 30 | ```` 31 | -------------------------------------------------------------------------------- /src/components/Spin/demo/inside.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 容器 5 | --- 6 | 7 | ## zh-CN 8 | 放入一个容器中。 9 | 10 | 11 | ## en-US 12 | 13 | 14 | ````jsx 15 | 16 |
    17 | 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 18 | 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 19 |
    20 |     21 |
    22 | 23 | ```` 24 | 25 | ````vue-script 26 | new Vue({ 27 | el: 'body', 28 | components: { 29 | spin: atui.Spin 30 | }, 31 | data() { 32 | return { sping: true } 33 | } 34 | }) 35 | ```` 36 | -------------------------------------------------------------------------------- /src/components/Spin/demo/size.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 不同大小 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 不同大小的加载器，分为`small`,`large`，不传就是默认的中型大小 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 18 | 19 | 20 | 21 | ```` 22 | 23 | ````vue-script 24 | new Vue({ 25 | el: 'body', 26 | components: { 27 | spin: atui.Spin 28 | } 29 | }) 30 | ```` 31 | -------------------------------------------------------------------------------- /src/components/Spin/index.js: -------------------------------------------------------------------------------- 1 | import Spin from './Spin.vue' 2 | 3 | export default Spin 4 | -------------------------------------------------------------------------------- /src/components/Spin/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Other 4 | title: Spin 5 | subtitle: 加载中 6 | --- 7 | 8 | 9 | ## 何时使用 10 | 11 | 12 | ## API 13 | 14 | 属性 | 说明 | 类型 | 默认值 15 | -----|-----|-----|------ 16 | size | 大小 | string | default 17 | show | 是否显示 | boolean | false 18 | tip | 提示文字，在不支持animation的时候才会显示 | string | 加载中... 19 | sping | 是否加载中，只有在包裹元素时才可能用到 | boolean | false 20 | @toggle | 显示隐藏状态切换时派发的事件 | Function | | 21 | 22 | -------------------------------------------------------------------------------- /src/components/Spin/test/spin.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Spin from '../' 3 | 4 | let vm = new Vue({ 5 | template: ` 6 |
    7 | 8 | 9 |
    10 | `, 11 | components: { Spin }, 12 | data: { 13 | 14 | } 15 | }).$mount() 16 | 17 | describe('Spin', () => { 18 | it('Spin组件是否正常显示', () => { 19 | expect(vm.$el.querySelectorAll('.atui-spin').length).to.equal(1) 20 | }) 21 | 22 | it('事件回调', () => { 23 | 24 | }) 25 | }) 26 | -------------------------------------------------------------------------------- /src/components/Steps/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 指定第2步高亮，注意是从0开始 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 18 | 19 | 20 | 21 | 22 | ```` 23 | 24 | ````vue-script 25 | new Vue({ 26 | el: 'body', 27 | components: { 28 | vSteps: atui.Steps, 29 | vStep: atui.Steps.Step 30 | } 31 | }) 32 | ```` 33 | -------------------------------------------------------------------------------- /src/components/Steps/demo/description.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 描述功能 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 添加一些步骤描述 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | ```` 24 | 25 | ````vue-script 26 | new Vue({ 27 | el: 'body', 28 | components: { 29 | vSteps: atui.Steps, 30 | vStep: atui.Steps.Step 31 | } 32 | }) 33 | ```` 34 | -------------------------------------------------------------------------------- /src/components/Steps/index.js: -------------------------------------------------------------------------------- 1 | import Steps from './Steps.vue' 2 | import Step from './Step.vue' 3 | 4 | Steps.Step = Step 5 | 6 | export default Steps 7 | -------------------------------------------------------------------------------- /src/components/Steps/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Navigation 4 | title: Steps 5 | subtitle: 步骤条 6 | cols: 1 7 | --- 8 | 9 | 10 | ## 何时使用 11 | 12 | 13 | ## API 14 | 15 | ### Steps 16 | 17 | 属性 | 说明 | 类型 | 默认值 18 | -----|-----|-----|------ 19 | current | 当前步骤 | Number | 0 20 | 21 | ### Step 22 | 23 | 属性 | 说明 | 类型 | 默认值 24 | -----|-----|-----|------ 25 | title | 标题 | String | | 26 | description | 描述 | String | | 27 | -------------------------------------------------------------------------------- /src/components/Steps/test/steps.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Steps from '../' 3 | 4 | const {Step} = Steps 5 | 6 | describe('Steps组件单元测试', () => { 7 | let vm = new Vue({ 8 | data () { 9 | return { 10 | current: 0 11 | } 12 | }, 13 | components: { 14 | vSteps: Steps, 15 | vStep: Step 16 | }, 17 | replace: false, 18 | template: ` 19 |
    20 | 21 | 22 | 23 | 24 | 25 | 26 |
    27 | ` 28 | 29 | }).$mount() 30 | 31 | it('基本渲染功能', () => { 32 | expect(vm.$el.querySelectorAll('.atui-steps').length).to.be.equal(1) 33 | expect(vm.$el.querySelectorAll('.atui-step').length).to.be.equal(4) 34 | }) 35 | }) 36 | -------------------------------------------------------------------------------- /src/components/Switch/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 18 | 19 | ```` 20 | 21 | ````vue-script 22 | new Vue({ 23 | el: 'body', 24 | components: { 25 | vSwitch: atui.Switch 26 | } 27 | }) 28 | ```` 29 | -------------------------------------------------------------------------------- /src/components/Switch/demo/color.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 定义颜色 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 不同的大小定义和颜色定义 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | components: { 23 | vSwitch: atui.Switch 24 | } 25 | }) 26 | ```` 27 | -------------------------------------------------------------------------------- /src/components/Switch/demo/slot.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 自定义内容 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 自定义开关文字或图标 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 开 18 | 关 19 | 20 | 21 | 22 | 23 | 24 | 25 | ```` 26 | 27 | ````vue-script 28 | new Vue({ 29 | el: 'body', 30 | components: { 31 | vSwitch: atui.Switch, 32 | vIcon: atui.Icon 33 | }, 34 | data() { 35 | return { 36 | disabled: false 37 | } 38 | } 39 | }) 40 | ```` 41 | -------------------------------------------------------------------------------- /src/components/Switch/index.js: -------------------------------------------------------------------------------- 1 | import Switch from './Switch.vue' 2 | 3 | export default Switch 4 | -------------------------------------------------------------------------------- /src/components/Switch/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Form Controls 4 | title: Switch 5 | subtitle: 开关 6 | --- 7 | 8 | 按钮用于开始一个即时操作。 9 | 10 | ## 何时使用 11 | 12 | 13 | ## API 14 | 15 | 16 | 17 | 属性 | 说明 | 类型 | 默认值 18 | -----|-----|-----|------ 19 | checked | 是否选中 | Boolean | | 20 | small | 小型switch | Boolean | | 21 | disabled | 是否禁用 | Boolean | | 22 | color | 选中时的背景色 | String | | 23 | -------------------------------------------------------------------------------- /src/components/Switch/test/switch.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Switch from '../' 3 | 4 | 5 | describe('Switch组件单元测试', () => { 6 | let vm = new Vue({ 7 | components: { 8 | vSwitch: Switch 9 | }, 10 | template: ` 11 |
    12 | 13 |
    14 | ` 15 | }).$mount() 16 | 17 | it('基本渲染功能', () => { 18 | expect(vm.$el.querySelectorAll('.atui-switch-checked').length).to.be.equal(1) 19 | }) 20 | }) 21 | -------------------------------------------------------------------------------- /src/components/Table/index.js: -------------------------------------------------------------------------------- 1 | import Table from './Table.vue' 2 | 3 | export default Table 4 | -------------------------------------------------------------------------------- /src/components/Tabs/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 基本展示 10 | 11 | ## en-US 12 | 13 | 14 | ````jsx 15 | 16 | 17 | 系统短信签名内容 18 | 19 | 20 | 推广短信签名内容 21 | 22 | 23 | 24 | ```` 25 | 26 | ````vue-script 27 | new Vue({ 28 | el: 'body', 29 | components: { 30 | vTabs: atui.Tabs, 31 | vTab: atui.Tabs.Tab 32 | } 33 | }) 34 | ```` 35 | -------------------------------------------------------------------------------- /src/components/Tabs/demo/callback.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 回调 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 回调功能 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 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 | ````vue-script 47 | let Message = atui.Message 48 | new Vue({ 49 | el: 'body', 50 | components: { 51 | vTabs: atui.Tabs, 52 | vTab: atui.Tabs.Tab 53 | }, 54 | methods: { 55 | handleOnClick (index) { 56 | Message.info('这是第'+ index + '个Tab') 57 | } 58 | } 59 | }) 60 | ```` 61 | -------------------------------------------------------------------------------- /src/components/Tabs/demo/disabled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 禁用 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 禁用 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 18 |

    19 | 选项卡一内容 20 |

    21 |     22 | 23 |

    24 | 选项卡二内容 25 |

    26 |     27 | 28 | ... 29 | 30 |     31 | ```` 32 | 33 | ````vue-script 34 | new Vue({ 35 | el: 'body', 36 | components: { 37 | vTabs: atui.Tabs, 38 | vTab: atui.Tabs.Tab 39 | } 40 | }) 41 | ```` 42 | -------------------------------------------------------------------------------- /src/components/Tabs/demo/dynamic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 动态绑定 5 | en-US: dynamic 6 | --- 7 | 8 | ## zh-CN 9 | 如果需要动态增加或删除tab的话需要在最外层的tabs组件额外绑定headers属性 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 18 |

    19 | {{app.appname}} 20 |

    21 |     22 |     23 | 删除第二个tab 24 | 激活第三个tab 25 | ```` 26 | 27 | ````vue-script 28 | new Vue({ 29 | el: 'body', 30 | components: { 31 | vButton: atui.Button, 32 | vTabs: atui.Tabs, 33 | vTab: atui.Tabs.Tab 34 | }, 35 | data() { 36 | return { 37 | active: 0, 38 | apps: [ 39 | { 40 | appname: '大于' 41 | }, 42 | { 43 | appname: '直充' 44 | }, 45 | { 46 | appname: '网厅' 47 | } 48 | ] 49 | } 50 | }, 51 | methods: { 52 | deleteTab() { 53 | this.apps.splice(1,1) 54 | }, 55 | changeTab() { 56 | this.active = 2 57 | }, 58 | onTabChange(currIndex) { 59 | console.log(currIndex) 60 | } 61 | } 62 | }) 63 | ```` 64 | -------------------------------------------------------------------------------- /src/components/Tabs/demo/header.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 4 | zh-CN: 自定义头部 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 可以通过具名slot来自定义tab的头部展示 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 18 | 我是自定义的头部区域 19 | 系统短信签名内容 20 | 21 | 22 | 推广短信签名内容 23 | 24 | 25 | 26 | ```` 27 | 28 | ````vue-script 29 | new Vue({ 30 | el: 'body', 31 | components: { 32 | vTabs: atui.Tabs, 33 | vTab: atui.Tabs.Tab 34 | } 35 | }) 36 | ```` 37 | -------------------------------------------------------------------------------- /src/components/Tabs/demo/trigger.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: hover触发 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 支持hover事件 11 | 12 | 13 | ## en-US 14 | 15 | 16 | ````jsx 17 | 18 | 19 |

    20 | 选项卡一内容 21 |

    22 |     23 | 24 |

    25 | 选项卡二内容 26 |

    27 |     28 | 29 | ... 30 | 31 |     32 | ```` 33 | 34 | ````vue-script 35 | new Vue({ 36 | el: 'body', 37 | components: { 38 | vTabs: atui.Tabs, 39 | vTab: atui.Tabs.Tab 40 | } 41 | }) 42 | ```` 43 | -------------------------------------------------------------------------------- /src/components/Tabs/index.js: -------------------------------------------------------------------------------- 1 | import Tabs from './Tabset.vue' 2 | import Tab from './Tab.vue' 3 | 4 | Tabs.Tab = Tab 5 | 6 | export default Tabs 7 | -------------------------------------------------------------------------------- /src/components/Tabs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Navigation 4 | title: Tabs 5 | subtitle: 标签页 6 | cols: 1 7 | --- 8 | 9 | 10 | ## 何时使用 11 | 12 | 13 | ## API 14 | 15 | 16 | ### Tabs 17 | 18 | 属性 | 说明 | 类型 | 默认值 19 | -----|-----|-----|------ 20 | trigger | 触发事件类型 | String | click 21 | base | 是否为基本类型 | Boolean | false 22 | @change | 当前激活的tab发生变化时派发的事件 | Function(currActiveIndex) | | 23 | 24 | ### Tabs.Tab 25 | 26 | 属性 | 说明 | 类型 | 默认值 27 | -----|-----|-----|------ 28 | header | 标签头内容 | String | | 29 | disabled | 是否禁用 | Boolean | false 30 | -------------------------------------------------------------------------------- /src/components/Tabs/test/tab.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Tabs from '../' 3 | let Tab = Tabs.Tab 4 | 5 | let vm = new Vue({ 6 | data () { 7 | return { 8 | show: true 9 | } 10 | }, 11 | template: ` 12 |
    13 | 14 | 15 | 系统短信签名内容 16 | 17 | 18 | 推广短信签名内容 19 | 20 | 21 |
    22 | `, 23 | components: { 24 | vTabs: Tabs, 25 | vTab: Tab 26 | } 27 | }).$mount() 28 | 29 | describe('Tabs', () => { 30 | it('Tabs组件基础渲染', () => { 31 | vm.$nextTick(() => { 32 | expect(vm.$el.querySelectorAll('.atui-tab-header ul li').length).to.equal(2) 33 | expect(vm.$el.querySelectorAll('.atui-tab-pane').length).to.equal(2) 34 | }) 35 | }) 36 | }) 37 | -------------------------------------------------------------------------------- /src/components/Tag/Tag.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 52 | -------------------------------------------------------------------------------- /src/components/Tag/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 可以使用color属性展示想要显示的颜色，默认为#f2f2f2，href属性为跳转链接 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 标签一 17 | 淘宝 18 | 19 | ```` 20 | 21 | ````vue-script 22 | new Vue({ 23 | el: 'body', 24 | components: { 25 | vTag: atui.Tag 26 | } 27 | }) 28 | ```` 29 | -------------------------------------------------------------------------------- /src/components/Tag/demo/closable.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 可关闭的 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | closable属性会添加一个关闭按钮，点击关闭可触发一个close事件 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 标签（回调） 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | components: { 23 | vTag: atui.Tag 24 | }, 25 | methods: { 26 | closeTag () { 27 | alert('我要关闭了') 28 | } 29 | } 30 | }) 31 | ```` 32 | -------------------------------------------------------------------------------- /src/components/Tag/demo/color.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 不同颜色 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 绿色 17 | 红色 18 | #696969 19 | 20 | ```` 21 | 22 | ````vue-script 23 | new Vue({ 24 | el: 'body', 25 | components: { 26 | vTag: atui.Tag 27 | } 28 | }) 29 | ```` 30 | -------------------------------------------------------------------------------- /src/components/Tag/index.js: -------------------------------------------------------------------------------- 1 | import Tag from './Tag.vue' 2 | 3 | export default Tag 4 | -------------------------------------------------------------------------------- /src/components/Tag/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Views 4 | title: Tag 5 | subtitle: 标签 6 | --- 7 | 8 | 9 | ## 何时使用 10 | 11 | 12 | ## API 13 | 14 | 15 | 16 | 属性 | 说明 | 类型 | 默认值 17 | -----|-----|-----|------ 18 | closable | 是否可关闭 | Boolean | false 19 | color | 背景颜色 | String | #f2f2f2 20 | href | 点击跳转链接 | String | ｜ 21 | @close | tag关闭事件 | Function | | 22 | 23 | -------------------------------------------------------------------------------- /src/components/Tag/test/tag.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Tag from '../' 3 | 4 | let vm = new Vue({ 5 | template: ` 6 |
    7 | 标签一 8 | 淘宝 9 |
    10 | `, 11 | components: { 12 | vTag: Tag 13 | } 14 | }).$mount() 15 | 16 | describe('Tag', () => { 17 | it('Tag组件是否正常显示', () => { 18 | expect(vm.$el.querySelectorAll('.atui-tag').length).to.equal(2) 19 | }) 20 | }) 21 | -------------------------------------------------------------------------------- /src/components/Textarea/demo/auto-size.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 自动高度 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 设置`max-rows`和`min-rows`可限制最小和最大行数，超过会自动增加滚动条 10 | 11 | ## en-US 12 | 13 | 14 | ````jsx 15 | 16 | 17 | 18 | 19 | ```` 20 | 21 | ````vue-script 22 | new Vue({ 23 | el: 'body', 24 | components: { 25 | vTextarea: atui.Textarea 26 | } 27 | }) 28 | ```` 29 | -------------------------------------------------------------------------------- /src/components/Textarea/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 基础用法，给textarea绑定v-model，当输入框中的文本变化时会同步更新 10 | 11 | ## en-US 12 | 13 | 14 | ````jsx 15 | 16 | 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | components: { 23 | vTextarea: atui.Textarea, 24 | vButton: atui.Button 25 | }, 26 | data: { 27 | text: '' 28 | }, 29 | methods: { 30 | clear() { 31 | this.text = '' 32 | } 33 | } 34 | }) 35 | ```` 36 | -------------------------------------------------------------------------------- /src/components/Textarea/demo/limit-words.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 字数限制 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | components: { 23 | vTextarea: atui.Textarea 24 | } 25 | }) 26 | ```` 27 | -------------------------------------------------------------------------------- /src/components/Textarea/demo/words-count.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 字数统计 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 增加统计字数的功能 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | components: { 23 | vTextarea: atui.Textarea 24 | } 25 | }) 26 | ```` 27 | -------------------------------------------------------------------------------- /src/components/Textarea/index.js: -------------------------------------------------------------------------------- 1 | import Textarea from './Textarea.vue' 2 | 3 | export default Textarea 4 | -------------------------------------------------------------------------------- /src/components/Textarea/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Form Controls 4 | title: Textarea 5 | subtitle: 多行文本框 6 | --- 7 | 8 | 9 | ## 何时使用 10 | 11 | 12 | ## API 13 | 14 | 15 | 16 | 属性 | 说明 | 类型 | 默认值 17 | -----|-----|-----|------ 18 | placeholder | 占位提示文字 | String | | 19 | content | 内容 | String | | 20 | disabled | 是否禁用 | Boolean | false 21 | autosize | 是否自动高 | Boolean | false 22 | countTips | 统计字数的提示文字 | String | | 23 | wordsCount | 是否显示字数统计 | Boolean | false 24 | maxRows | 最大行数 | Number | | 25 | minRows | 最小行数 | Number | | 26 | 27 | -------------------------------------------------------------------------------- /src/components/Textarea/test/textarea.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Textarea from '../' 3 | 4 | let vm = new Vue({ 5 | template: ` 6 |
    7 | 8 | 9 |
    10 | `, 11 | components: { 12 | vTextarea: Textarea 13 | } 14 | }).$mount() 15 | 16 | describe('Textarea', () => { 17 | it('Textarea组件是否正常显示', () => { 18 | expect(vm.$el.querySelectorAll('.atui-textarea-box').length).to.equal(2) 19 | }) 20 | }) 21 | -------------------------------------------------------------------------------- /src/components/TimePicker/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | components: { 23 | vTimePicker: atui.TimePicker 24 | } 25 | }) 26 | ```` 27 | -------------------------------------------------------------------------------- /src/components/TimePicker/demo/disabled-range.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 禁用部分时间 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | components: { 23 | vTimePicker: atui.TimePicker 24 | }, 25 | methods: { 26 | disabledMinutes: function() { 27 | return [...Array(60).keys()].filter(value => value % 10 !== 0) 28 | }, 29 | disabledSeconds: function() { 30 | return [...Array(60).keys()].filter(value => value % 30 !== 0) 31 | }, 32 | timePickerChange: function(date,timeString) { 33 | console.log('timepicker',date, timeString) 34 | } 35 | } 36 | }) 37 | ```` 38 | -------------------------------------------------------------------------------- /src/components/TimePicker/demo/disabled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 完全禁用 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | components: { 23 | vTimePicker: atui.TimePicker 24 | } 25 | }) 26 | ```` 27 | -------------------------------------------------------------------------------- /src/components/TimePicker/index.js: -------------------------------------------------------------------------------- 1 | import TimePicker from './TimePicker.vue' 2 | 3 | export default TimePicker 4 | -------------------------------------------------------------------------------- /src/components/TimePicker/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Form Controls 4 | title: TimePicker 5 | subtitle: 时间选择器 6 | --- 7 | 8 | 用户时分秒的选择 9 | 10 | ## 何时使用 11 | 12 | 13 | ## API 14 | 15 | 16 | 属性 | 说明 | 类型 | 默认值 17 | -----|-----|-----|------ 18 | placeholder | 值为空时显示提示文字 | string | 请选择时间 19 | disabled | 是否禁用 | boolean | false 20 | disabledHours | 禁用的小时范围 | function | `function() { return [] }` 21 | disabledMinutes | 禁用的分钟范围 | function | `function() { return [] }` 22 | disabledSeconds | 禁用的秒钟范围 | function | `function() { return [] }` 23 | -------------------------------------------------------------------------------- /src/components/TimePicker/selection.js: -------------------------------------------------------------------------------- 1 | export default function createSelection (field, start, end) { 2 | if (field.createTextRange) { 3 | const selRange = field.createTextRange() 4 | selRange.collapse(true) 5 | selRange.moveStart('character', start) 6 | selRange.moveEnd('character', end) 7 | selRange.select() 8 | field.focus() 9 | } else if (field.setSelectionRange) { 10 | field.focus() 11 | field.setSelectionRange(start, end) 12 | } else if (typeof field.selectionStart !== 'undefined') { 13 | field.selectionStart = start 14 | field.selectionEnd = end 15 | field.focus() 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/components/TimePicker/test/timepicker.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import TimePicker from '../' 3 | new Vue({ 4 | template: ` 5 |
    6 | 7 | 8 |
    9 | `, 10 | components: { TimePicker } 11 | }).$mount() 12 | 13 | // timepicker组件测试用例,拉低了coverage summary统计数据 14 | describe('TimePicker', () => { 15 | it('TimePicker组件是否正常显示', () => { 16 | expect(document.body.querySelectorAll('.atui-time-picker-panel').length).above(2) 17 | }) 18 | }) 19 | -------------------------------------------------------------------------------- /src/components/Tooltip/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 通常情况下默认显示在上方，需要特别指定的话请指定placement属性 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 鼠标请移过来 18 | 19 | 20 | ```` 21 | 22 | ````vue-script 23 | new Vue({ 24 | el: 'body', 25 | components: { 26 | vTooltip: atui.Tooltip, 27 | vButton: atui.Button 28 | } 29 | }) 30 | ```` 31 | -------------------------------------------------------------------------------- /src/components/Tooltip/demo/trigger.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 触发事件 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 默认为hover事件，也可以使用其它dom事件，比如`click`,`focus` 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | 18 | 19 | ```` 20 | 21 | ````vue-script 22 | new Vue({ 23 | el: 'body', 24 | components: { 25 | vTooltip: atui.Tooltip, 26 | vInput: atui.Input 27 | } 28 | }) 29 | ```` 30 | -------------------------------------------------------------------------------- /src/components/Tooltip/index.js: -------------------------------------------------------------------------------- 1 | import Tooltip from './Tooltip.vue' 2 | 3 | export default Tooltip 4 | -------------------------------------------------------------------------------- /src/components/Tooltip/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Views 4 | title: Tooltip 5 | subtitle: 文字提示 6 | cols: 1 7 | --- 8 | 9 | 简单的文字提示气泡框。 10 | 11 | ## 何时使用 12 | 13 | 鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。 14 | 15 | 可用来代替系统默认的 `title` 提示，提供一个`按钮/文字/操作`的文案解释。 16 | 17 | ## API 18 | 19 | | 参数 | 说明 | 类型 | 默认值 | 20 | |-----------|------------------------------------------|------------|--------| 21 | | placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | `string` | top | 22 | | content | 提示文字 | `string` | 无 | 23 | | customPopupCls | 自定义popup的class名 | `string` | `''` | 24 | 25 | -------------------------------------------------------------------------------- /src/components/Tree/Tree.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 29 | -------------------------------------------------------------------------------- /src/components/Tree/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 | ```` 18 | 19 | ````vue-script 20 | let treeData = { 21 | name: 'My Tree', 22 | children: [ 23 | { name: 'hello' }, 24 | { name: 'wat' }, 25 | { 26 | name: 'child folder', 27 | children: [ 28 | { 29 | name: 'child folder', 30 | children: [ 31 | { name: 'hello' }, 32 | { name: 'wat' } 33 | ] 34 | }, 35 | { name: 'hello' }, 36 | { name: 'wat' }, 37 | { 38 | name: 'child folder', 39 | children: [ 40 | { name: 'hello' }, 41 | { name: 'wat' } 42 | ] 43 | } 44 | ] 45 | } 46 | ] 47 | } 48 | new Vue({ 49 | el: 'body', 50 | components: { 51 | vTree: atui.Tree 52 | }, 53 | data: { 54 | dataSource: treeData 55 | }, 56 | methods: { 57 | onExpand () { 58 | console.log(arguments) 59 | } 60 | } 61 | }) 62 | ```` 63 | -------------------------------------------------------------------------------- /src/components/Tree/index.js: -------------------------------------------------------------------------------- 1 | import Tree from './Tree.vue' 2 | import TreeNode from './TreeNode.vue' 3 | Tree.TreeNode = TreeNode 4 | 5 | export default Tree 6 | -------------------------------------------------------------------------------- /src/components/Tree/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Views 4 | title: Tree 5 | subtitle: 树形控件 6 | --- 7 | 8 | 9 | ## 何时使用 10 | 组件必须绑定数据，格式如下： 11 | ```js 12 | let treeData = { 13 | name: 'My Tree', 14 | children: [ 15 | { name: 'hello' }, 16 | { name: 'wat' }, 17 | { 18 | name: 'child folder', 19 | children: [ 20 | { 21 | name: 'child folder', 22 | children: [ 23 | { name: 'hello' }, 24 | { name: 'wat' } 25 | ] 26 | }, 27 | { name: 'hello' }, 28 | { name: 'wat' }, 29 | { 30 | name: 'child folder', 31 | children: [ 32 | { name: 'hello' }, 33 | { name: 'wat' } 34 | ] 35 | } 36 | ] 37 | } 38 | ] 39 | } 40 | 41 | new Vue({ 42 | el: 'body', 43 | components: { 44 | tree: atui.Tree 45 | }, 46 | data: { 47 | return { 48 | dataSource: treeData 49 | } 50 | } 51 | }) 52 | ``` 53 | 54 | ## API 55 | 56 | 57 | ### Tree 58 | 59 | 属性 | 说明 | 类型 | 默认值 60 | -----|-----|-----|------ 61 | dataSource | 数据源 | Object | | 62 | @expand | 展开/收起事件 | Function(status, model) | | 63 | 64 | 65 | -------------------------------------------------------------------------------- /src/components/Tree/test/tree.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Tree from '../' 3 | 4 | let treeData = { 5 | name: 'My Tree', 6 | children: [ 7 | { name: 'hello' }, 8 | { name: 'wat' }, 9 | { 10 | name: 'child folder', 11 | children: [ 12 | { 13 | name: 'child folder', 14 | children: [ 15 | { name: 'hello' }, 16 | { name: 'wat' } 17 | ] 18 | }, 19 | { name: 'hello' }, 20 | { name: 'wat' }, 21 | { 22 | name: 'child folder', 23 | children: [ 24 | { name: 'hello' }, 25 | { name: 'wat' } 26 | ] 27 | } 28 | ] 29 | } 30 | ] 31 | } 32 | let vm = new Vue({ 33 | template: ` 34 |
    35 | 36 |
    37 | `, 38 | components: { 39 | vTree: Tree 40 | }, 41 | data: { 42 | dataSource: treeData 43 | }, 44 | methods: { 45 | onExpand () { 46 | console.log(arguments) 47 | } 48 | } 49 | }).$mount() 50 | 51 | describe('Tree', () => { 52 | it('Tree组件是否正常显示', () => { 53 | expect(vm.$el.querySelectorAll('ul.atui-tree').length).to.equal(1) 54 | }) 55 | }) 56 | -------------------------------------------------------------------------------- /src/components/Trigger/demo/always-show.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 弹窗默认显示 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 配置props:`popupAlwaysShow=true`,默认展示 10 | 11 | ## en-US 12 | 13 | ````jsx 14 | 15 | 不需要触发 16 |
    我会永远展示
    17 |     18 | ```` 19 | 20 | ````vue-script 21 | new Vue({ 22 | el: 'body', 23 | components: { 24 | vTrigger: atui.Trigger, 25 | vButton: atui.Button 26 | } 27 | }) 28 | ```` 29 | -------------------------------------------------------------------------------- /src/components/Trigger/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | Trigger最基本的用法 10 | 11 | ## en-US 12 | 13 | ````jsx 14 | 15 | popup on bottom 16 |
    I'm a popup
    17 |     18 | 19 | 20 | popup on right 21 |
    I'm a popup
    22 |     23 | ```` 24 | 25 | ````vue-script 26 | new Vue({ 27 | el: 'body', 28 | components: { 29 | vTrigger: atui.Trigger, 30 | vButton: atui.Button 31 | } 32 | }) 33 | ```` 34 | -------------------------------------------------------------------------------- /src/components/Trigger/demo/offset.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 弹窗坐标偏移 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 配置props:`offset=[50, 0]`,向右偏移量50px 10 | 11 | ## en-US 12 | 13 | ````jsx 14 | 15 | 弹窗向右偏移50px 16 |
    我被偏移了...
    17 |     18 | ```` 19 | 20 | ````vue-script 21 | new Vue({ 22 | el: 'body', 23 | components: { 24 | vTrigger: atui.Trigger, 25 | vButton: atui.Button 26 | } 27 | }) 28 | ```` 29 | -------------------------------------------------------------------------------- /src/components/Trigger/demo/popup-in-popup.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: popup里继续trigger 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 高级用法: popup里继续trigger 10 | 11 | ## en-US 12 | 13 | ````jsx 14 | 15 | popup里继续trigger 16 |
    17 | 18 | hover to trigger 19 |
    I'm a hover popup
    20 |     21 |
    22 |     23 | ```` 24 | 25 | ````vue-script 26 | new Vue({ 27 | el: 'body', 28 | components: { 29 | vTrigger: atui.Trigger, 30 | vButton: atui.Button 31 | } 32 | }) 33 | ```` 34 | -------------------------------------------------------------------------------- /src/components/Trigger/demo/popup-multi.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 同时多个popup 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 高级用法: 同时多个popup 10 | 11 | ## en-US 12 | 13 | ````jsx 14 | 15 | 16 | 同时多个popup 17 |
    I'm popup-1
    18 |     19 |
    I'm popup-2
    20 |     21 | ```` 22 | 23 | ````vue-script 24 | new Vue({ 25 | el: 'body', 26 | components: { 27 | vTrigger: atui.Trigger, 28 | vButton: atui.Button 29 | } 30 | }) 31 | ```` 32 | -------------------------------------------------------------------------------- /src/components/Trigger/demo/trigger-focus.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 获取焦点的时候展示 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 配置props:`trigger=focus`,获取焦点的时候展示 10 | 11 | ## en-US 12 | 13 | ````jsx 14 | 15 | 16 |
    I'm a hover popup
    17 |     18 | ```` 19 | 20 | ````vue-script 21 | new Vue({ 22 | el: 'body', 23 | components: { 24 | vTrigger: atui.Trigger, 25 | vButton: atui.Button 26 | } 27 | }) 28 | ```` 29 | -------------------------------------------------------------------------------- /src/components/Trigger/demo/trigger-hover.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: hover展示 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 配置props:`trigger=hover`,hover展示 10 | 11 | ## en-US 12 | 13 | ````jsx 14 | 15 | hover to show 16 |
    I'm a hover popup
    17 |     18 | ```` 19 | 20 | ````vue-script 21 | new Vue({ 22 | el: 'body', 23 | components: { 24 | vTrigger: atui.Trigger, 25 | vButton: atui.Button 26 | } 27 | }) 28 | ```` 29 | -------------------------------------------------------------------------------- /src/components/Trigger/index.js: -------------------------------------------------------------------------------- 1 | import Trigger from './Trigger.vue' 2 | 3 | export default Trigger 4 | -------------------------------------------------------------------------------- /src/components/Trigger/test/trigger.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Trigger from '../' 3 | 4 | let vm = new Vue({ 5 | template: ` 6 |
    7 | 8 | popup on bottom 9 |
    I'm a popup
    10 |     11 | 12 | 13 | popup on right 14 |
    I'm a popup
    15 |     16 |
    17 | `, 18 | components: { vTrigger: Trigger } 19 | }).$mount() 20 | 21 | describe('Trigger', () => { 22 | it('Trigger组件是否正常显示', () => { 23 | expect(vm.$el.querySelectorAll('.atui-trigger').length).to.equal(2) 24 | }) 25 | }) 26 | -------------------------------------------------------------------------------- /src/components/Uploader/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 点击上传调用方式 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 | 17 |
    18 | 28 | 29 |
    30 | ```` 31 | 32 | ````vue-script 33 | new Vue({ 34 | el: 'body', 35 | components: { 36 | vUploader: atui.Uploader 37 | }, 38 | data: { 39 | ajaxUrl:'about:blank', 40 | multiple: false, 41 | fileList1: [] 42 | } 43 | }) 44 | ```` 45 | -------------------------------------------------------------------------------- /src/components/Uploader/demo/dragdrop.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 支持拖拽上传调用方式 11 | 12 | ## en-US 13 | 14 | 15 | ````jsx 16 |
    17 | 27 | 28 |
    29 | 30 | ```` 31 | 32 | ````vue-script 33 | new Vue({ 34 | el: 'body', 35 | components: { 36 | vUploader: atui.Uploader 37 | }, 38 | data: { 39 | ajaxUrl:'about:blank', 40 | multiple: false, 41 | fileList2: [], 42 | hideButton: false, 43 | autoSubmit: false 44 | } 45 | }) 46 | ```` 47 | -------------------------------------------------------------------------------- /src/components/Uploader/index.js: -------------------------------------------------------------------------------- 1 | import Uploader from './Uploader.vue' 2 | 3 | export default Uploader 4 | -------------------------------------------------------------------------------- /src/components/Uploader/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Form Controls 4 | title: Uploader 5 | subtitle: 上传 6 | --- 7 | 8 | 9 | ## 何时使用 10 | 11 | 12 | ## API 13 | 14 | 15 | 16 | 属性 | 说明 | 类型 | 默认值 17 | -----|-----|-----|------ 18 | 19 | -------------------------------------------------------------------------------- /src/components/_utils/EventListener.js: -------------------------------------------------------------------------------- 1 | const EventListener = { 2 | /** 3 | * Listen to DOM events during the bubble phase. 4 | * 5 | * @param {DOMEventTarget} target DOM element to register listener on. 6 | * @param {string} eventType Event type, e.g. 'click' or 'mouseover'. 7 | * @param {function} callback Callback function. 8 | * @return {object} Object with a `remove` method. 9 | */ 10 | listen (target, eventType, callback) { 11 | if (target.addEventListener) { 12 | target.addEventListener(eventType, callback, false) 13 | return { 14 | remove () { 15 | target.removeEventListener(eventType, callback, false) 16 | } 17 | } 18 | } else if (target.attachEvent) { 19 | target.attachEvent('on' + eventType, callback) 20 | return { 21 | remove () { 22 | target.detachEvent('on' + eventType, callback) 23 | } 24 | } 25 | } 26 | } 27 | } 28 | 29 | export default EventListener 30 | -------------------------------------------------------------------------------- /src/components/_utils/GlobalMixin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Global Mixin 3 | * @description 全局mixin 4 | */ 5 | 6 | const GlobalMixin = { 7 | props: { 8 | prefixCls: { 9 | type: String, 10 | default: 'atui' 11 | } 12 | } 13 | } 14 | 15 | export default GlobalMixin 16 | -------------------------------------------------------------------------------- /src/components/_utils/cssAnimationSupported.js: -------------------------------------------------------------------------------- 1 | var animation = false 2 | var domPrefixes = 'Webkit Moz O ms Khtml'.split(' ') 3 | var elm = document.createElement('div') 4 | 5 | if (elm.style.animationName !== undefined) { animation = true } 6 | 7 | if (animation === false) { 8 | for (var i = 0; i < domPrefixes.length; i++) { 9 | if (elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined) { 10 | animation = true 11 | break 12 | } 13 | } 14 | } 15 | 16 | export default animation 17 | -------------------------------------------------------------------------------- /src/components/_utils/getScroll.js: -------------------------------------------------------------------------------- 1 | // reffered from antd 2 | export default function getScroll (target, top) { 3 | if (typeof window === 'undefined') { 4 | return 0 5 | } 6 | 7 | const prop = top ? 'pageYOffset' : 'pageXOffset' 8 | const method = top ? 'scrollTop' : 'scrollLeft' 9 | const isWindow = target === window 10 | 11 | let ret = isWindow ? target[prop] : target[method] 12 | // ie6,7,8 standard mode 13 | if (isWindow && typeof ret !== 'number') { 14 | ret = window.document.documentElement[method] 15 | } 16 | 17 | return ret 18 | } 19 | -------------------------------------------------------------------------------- /src/components/_utils/getScrollBarWidth.js: -------------------------------------------------------------------------------- 1 | export default () => { 2 | if (document.documentElement.scrollHeight <= document.documentElement.clientHeight) { 3 | return 0 4 | } 5 | let inner = document.createElement('p') 6 | inner.style.width = '100%' 7 | inner.style.height = '200px' 8 | 9 | let outer = document.createElement('div') 10 | outer.style.position = 'absolute' 11 | outer.style.top = '0px' 12 | outer.style.left = '0px' 13 | outer.style.visibility = 'hidden' 14 | outer.style.width = '200px' 15 | outer.style.height = '150px' 16 | outer.style.overflow = 'hidden' 17 | outer.appendChild(inner) 18 | 19 | document.body.appendChild(outer) 20 | let w1 = inner.offsetWidth 21 | outer.style.overflow = 'scroll' 22 | let w2 = inner.offsetWidth 23 | if (w1 === w2) w2 = outer.clientWidth 24 | 25 | document.body.removeChild(outer) 26 | 27 | return (w1 - w2) 28 | } 29 | -------------------------------------------------------------------------------- /src/components/eventbus.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | let $event = new Vue() 4 | 5 | const eventBus = { 6 | beforeCreate () { 7 | this.$event = $event 8 | 9 | let parent = this.$parent 10 | while (parent && !this.$bus) { 11 | if (parent.$bus) { 12 | this.$bus = parent.$bus 13 | } else { 14 | parent = parent.$parent 15 | } 16 | } 17 | } 18 | } 19 | 20 | export default eventBus 21 | -------------------------------------------------------------------------------- /src/directives/scroll-load.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | Vue.directive('scroll-load', { 4 | bind () {}, 5 | update (value) { 6 | let timmer 7 | let me = this 8 | let el = me.el 9 | let lock = false 10 | this.scrollHandler = function () { 11 | clearTimeout(timmer) 12 | timmer = setTimeout(() => { 13 | if (lock) { 14 | return 15 | } 16 | let elH = el.clientHeight 17 | let elOffset = el.getBoundingClientRect() 18 | let scrollTop = document.documentElement.scrollTop 19 | let elBottomOffset = elOffset.top + elH - scrollTop 20 | if (elBottomOffset < (window.screen.height + 50)) { 21 | lock = true 22 | me.vm[me.expression](() => { 23 | lock = false 24 | }) 25 | } 26 | }, 16) 27 | } 28 | window.addEventListener('scroll', this.scrollHandler, false) 29 | }, 30 | unbind () { 31 | window.removeEventListener('scroll', this.scrollHandler) 32 | } 33 | }) 34 | 35 | module.exports = {} 36 | -------------------------------------------------------------------------------- /src/filters/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import phoneNumber from './phoneNumber' 3 | Vue.filter('phoneNumber', phoneNumber) 4 | 5 | module.exports = {} 6 | -------------------------------------------------------------------------------- /src/filters/phoneNumber.js: -------------------------------------------------------------------------------- 1 | // 13291895654 to 132 9189 5654 2 | export default function (number, searchKey) { 3 | var ret = '' 4 | number = '' + number 5 | number = number.replace(/[^\d]/g, '').substr(0, 11) 6 | // var keyIndex = number.indexOf(searchKey) 7 | for (var i = 0; i < number.length; i++) { 8 | if (i === 3 || i === 7) { 9 | ret += ' ' 10 | } 11 | ret += number[i] 12 | } 13 | if (searchKey) { 14 | ret = ret.replace(searchKey, '' + searchKey + '') 15 | } 16 | return ret 17 | } 18 | -------------------------------------------------------------------------------- /src/style.js: -------------------------------------------------------------------------------- 1 | require('src/styles/themes/greater-blue.less') 2 | require('src/styles/themes/tmall-red.less') 3 | require('src/styles/themes/tao-orange.less') 4 | -------------------------------------------------------------------------------- /src/styles/breadcrumbs.less: -------------------------------------------------------------------------------- 1 | // Breadcrumbs 2 | // -------------------------------------------------- 3 | @prefix-cls-breadcrumb: e("@{prefix-cls}-breadcrumb"); 4 | @prefix-cls-breadcrumbs: e("@{prefix-cls}-breadcrumbs"); 5 | 6 | @breadcrumb-link-color: #999999; 7 | @breadcrumb-last-link-color: #666; 8 | @breadcrumb-slash-color: #ccc; 9 | 10 | .@{prefix-cls-breadcrumbs} { 11 | .@{prefix-cls-breadcrumb} { 12 | padding: 0; 13 | background-color: #fff; 14 | .@{prefix-cls-breadcrumb}-link { 15 | padding: 0 16px; 16 | color: @breadcrumb-link-color; 17 | font-size: 12px; 18 | } 19 | } 20 | 21 | .@{prefix-cls-breadcrumb}:last-child .@{prefix-cls-breadcrumb}-link { 22 | color: @breadcrumb-last-link-color; 23 | } 24 | 25 | .@{prefix-cls-breadcrumb}-symbol { 26 | color: @breadcrumb-slash-color; 27 | font-size: 12px; 28 | } 29 | 30 | span:last-child .@{prefix-cls-breadcrumb}-symbol { 31 | display: none; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/styles/close.less: -------------------------------------------------------------------------------- 1 | // Close icons 2 | // -------------------------------------------------- 3 | @prefix-cls-close: e("@{prefix-cls}-close"); 4 | 5 | @close-font-weight: bold; 6 | @close-color: #000; 7 | @close-text-shadow: 0 1px 0 #fff; 8 | 9 | .@{prefix-cls-close} { 10 | float: right; 11 | font-size: (@font-size-base * 1.5); 12 | font-weight: @close-font-weight; 13 | line-height: 1; 14 | color: @close-color; 15 | text-shadow: @close-text-shadow; 16 | opacity: .2; 17 | 18 | &:hover, 19 | &:focus { 20 | color: @close-color; 21 | text-decoration: none; 22 | cursor: pointer; 23 | opacity: .5; 24 | } 25 | 26 | // Additional properties for button version 27 | // iOS requires the button element instead of an anchor tag. 28 | // If you want the anchor version, it requires `href="#"`. 29 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile 30 | button& { 31 | padding: 0; 32 | cursor: pointer; 33 | background: transparent; 34 | border: 0; 35 | appearance: none; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/styles/media.less: -------------------------------------------------------------------------------- 1 | .media { 2 | // Proper spacing between instances of .media 3 | margin-top: 15px; 4 | 5 | &:first-child { 6 | margin-top: 0; 7 | } 8 | } 9 | 10 | .media, 11 | .media-body { 12 | zoom: 1; 13 | overflow: hidden; 14 | } 15 | 16 | .media-body { 17 | width: 10000px; 18 | } 19 | 20 | .media-object { 21 | display: block; 22 | 23 | // Fix collapse in webkit from max-width: 100% and display: table-cell. 24 | &.img-thumbnail { 25 | max-width: none; 26 | } 27 | } 28 | 29 | .media-right, 30 | .media > .pull-right { 31 | padding-left: 10px; 32 | } 33 | 34 | .media-left, 35 | .media > .pull-left { 36 | padding-right: 10px; 37 | } 38 | 39 | .media-left, 40 | .media-right, 41 | .media-body { 42 | display: table-cell; 43 | vertical-align: top; 44 | } 45 | 46 | .media-middle { 47 | vertical-align: middle; 48 | } 49 | 50 | .media-bottom { 51 | vertical-align: bottom; 52 | } 53 | 54 | // Reset margins on headings for tighter default spacing 55 | .media-heading { 56 | margin-top: 0; 57 | margin-bottom: 5px; 58 | } 59 | 60 | // Media list variation 61 | // 62 | // Undo default ul/ol styles 63 | .media-list { 64 | padding-left: 0; 65 | list-style: none; 66 | } 67 | -------------------------------------------------------------------------------- /src/styles/mixins.less: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------------------------------- 3 | 4 | // Utilities 5 | // @import "mixins/hide-text.less"; 6 | // @import "mixins/opacity.less"; 7 | @import "mixins/image.less"; 8 | @import "mixins/labels.less"; 9 | @import "mixins/reset-filter.less"; 10 | @import "mixins/resize.less"; 11 | @import "mixins/responsive-visibility.less"; 12 | @import "mixins/size.less"; 13 | @import "mixins/tab-focus.less"; 14 | @import "mixins/reset-text.less"; 15 | @import "mixins/text-emphasis.less"; 16 | @import "mixins/text-overflow.less"; 17 | @import "mixins/vendor-prefixes.less"; 18 | 19 | // Components 20 | // @import "mixins/alerts.less"; 21 | // @import "mixins/buttons.less"; 22 | @import "mixins/panels.less"; 23 | @import "mixins/pagination.less"; 24 | @import "mixins/list-group.less"; 25 | @import "mixins/nav-divider.less"; 26 | @import "mixins/forms.less"; 27 | @import "mixins/progress-bar.less"; 28 | @import "mixins/table-row.less"; 29 | 30 | // Skins 31 | @import "mixins/background-variant.less"; 32 | @import "mixins/border-radius.less"; 33 | @import "mixins/gradients.less"; 34 | 35 | // Layout 36 | @import "mixins/clearfix.less"; 37 | @import "mixins/center-block.less"; 38 | @import "mixins/nav-vertical-align.less"; 39 | @import "mixins/grid-framework.less"; 40 | @import "mixins/grid.less"; 41 | -------------------------------------------------------------------------------- /src/styles/mixins/background-variant.less: -------------------------------------------------------------------------------- 1 | // Contextual backgrounds 2 | 3 | .bg-variant(@color) { 4 | background-color: @color; 5 | a&:hover, 6 | a&:focus { 7 | background-color: darken(@color, 10%); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/styles/mixins/border-radius.less: -------------------------------------------------------------------------------- 1 | // Single side border-radius 2 | 3 | .border-top-radius(@radius) { 4 | border-top-right-radius: @radius; 5 | border-top-left-radius: @radius; 6 | } 7 | .border-right-radius(@radius) { 8 | border-bottom-right-radius: @radius; 9 | border-top-right-radius: @radius; 10 | } 11 | .border-bottom-radius(@radius) { 12 | border-bottom-right-radius: @radius; 13 | border-bottom-left-radius: @radius; 14 | } 15 | .border-left-radius(@radius) { 16 | border-bottom-left-radius: @radius; 17 | border-top-left-radius: @radius; 18 | } 19 | -------------------------------------------------------------------------------- /src/styles/mixins/center-block.less: -------------------------------------------------------------------------------- 1 | // Center-align a block level element 2 | 3 | .center-block() { 4 | display: block; 5 | margin-left: auto; 6 | margin-right: auto; 7 | } 8 | -------------------------------------------------------------------------------- /src/styles/mixins/clearfix.less: -------------------------------------------------------------------------------- 1 | // Clearfix 2 | // 3 | // For modern browsers 4 | // 1. The space content is one way to avoid an Opera bug when the 5 | // contenteditable attribute is included anywhere else in the document. 6 | // Otherwise it causes space to appear at the top and bottom of elements 7 | // that are clearfixed. 8 | // 2. The use of `table` rather than `block` is only necessary if using 9 | // `:before` to contain the top-margins of child elements. 10 | // 11 | // Source: http://nicolasgallagher.com/micro-clearfix-hack/ 12 | 13 | .clearfix() { 14 | &:before, 15 | &:after { 16 | content: " "; // 1 17 | display: table; // 2 18 | } 19 | &:after { 20 | clear: both; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/styles/mixins/hide-text.less: -------------------------------------------------------------------------------- 1 | // CSS image replacement 2 | // 3 | // Heads up! v3 launched with only `.hide-text()`, but per our pattern for 4 | // mixins being reused as classes with the same name, this doesn't hold up. As 5 | // of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. 6 | // 7 | // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 8 | 9 | // Deprecated as of v3.0.1 (has been removed in v4) 10 | .hide-text() { 11 | font: ~"0/0" a; 12 | color: transparent; 13 | text-shadow: none; 14 | background-color: transparent; 15 | border: 0; 16 | } 17 | 18 | // New mixin to use as of v3.0.1 19 | .text-hide() { 20 | .hide-text(); 21 | } 22 | -------------------------------------------------------------------------------- /src/styles/mixins/image.less: -------------------------------------------------------------------------------- 1 | // Image Mixins 2 | // - Responsive image 3 | // - Retina image 4 | 5 | 6 | // Responsive image 7 | // 8 | // Keep images from scaling beyond the width of their parents. 9 | .img-responsive(@display: block) { 10 | display: @display; 11 | max-width: 100%; // Part 1: Set a maximum relative to the parent 12 | height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching 13 | } 14 | 15 | 16 | // Retina image 17 | // 18 | // Short retina mixin for setting background-image and -size. Note that the 19 | // spelling of `min--moz-device-pixel-ratio` is intentional. 20 | .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { 21 | background-image: url("@{file-1x}"); 22 | 23 | @media 24 | only screen and (-webkit-min-device-pixel-ratio: 2), 25 | only screen and (min--moz-device-pixel-ratio: 2), 26 | only screen and (-o-min-device-pixel-ratio: 2 / 1), 27 | only screen and (min-device-pixel-ratio: 2), 28 | only screen and (min-resolution: 192dpi), 29 | only screen and (min-resolution: 2dppx) { 30 | background-image: url("@{file-2x}"); 31 | background-size: @width-1x @height-1x; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/styles/mixins/labels.less: -------------------------------------------------------------------------------- 1 | // Labels 2 | 3 | .label-variant(@color) { 4 | background-color: @color; 5 | 6 | &[href] { 7 | &:hover, 8 | &:focus { 9 | background-color: darken(@color, 10%); 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/styles/mixins/list-group.less: -------------------------------------------------------------------------------- 1 | // List Groups 2 | 3 | .list-group-item-variant(@state; @background; @color) { 4 | .list-group-item-@{state} { 5 | color: @color; 6 | background-color: @background; 7 | 8 | a&, 9 | button& { 10 | color: @color; 11 | 12 | .list-group-item-heading { 13 | color: inherit; 14 | } 15 | 16 | &:hover, 17 | &:focus { 18 | color: @color; 19 | background-color: darken(@background, 5%); 20 | } 21 | &.active, 22 | &.active:hover, 23 | &.active:focus { 24 | color: #fff; 25 | background-color: @color; 26 | border-color: @color; 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/styles/mixins/nav-divider.less: -------------------------------------------------------------------------------- 1 | // Horizontal dividers 2 | // 3 | // Dividers (basically an hr) within dropdowns and nav lists 4 | 5 | .nav-divider(@color: #e5e5e5) { 6 | height: 1px; 7 | margin: ((@line-height-computed / 2) - 1) 0; 8 | overflow: hidden; 9 | background-color: @color; 10 | } 11 | -------------------------------------------------------------------------------- /src/styles/mixins/nav-vertical-align.less: -------------------------------------------------------------------------------- 1 | // Navbar vertical align 2 | // 3 | // Vertically center elements in the navbar. 4 | // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. 5 | 6 | .navbar-vertical-align(@element-height) { 7 | margin-top: ((@navbar-height - @element-height) / 2); 8 | margin-bottom: ((@navbar-height - @element-height) / 2); 9 | } 10 | -------------------------------------------------------------------------------- /src/styles/mixins/opacity.less: -------------------------------------------------------------------------------- 1 | // Opacity 2 | 3 | .opacity(@opacity) { 4 | opacity: @opacity; 5 | // IE8 filter 6 | @opacity-ie: (@opacity * 100); 7 | filter: ~"alpha(opacity=@{opacity-ie})"; 8 | } 9 | -------------------------------------------------------------------------------- /src/styles/mixins/pagination.less: -------------------------------------------------------------------------------- 1 | // Pagination 2 | 3 | .pagination-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { 4 | > li { 5 | > a, 6 | > span { 7 | padding: @padding-vertical @padding-horizontal; 8 | font-size: @font-size; 9 | line-height: @line-height; 10 | } 11 | &:first-child { 12 | > a, 13 | > span { 14 | .border-left-radius(@border-radius); 15 | } 16 | } 17 | &:last-child { 18 | > a, 19 | > span { 20 | .border-right-radius(@border-radius); 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/styles/mixins/panels.less: -------------------------------------------------------------------------------- 1 | @import "../themes/common"; 2 | 3 | // Panels 4 | // -------------------------------------------------- 5 | @prefix-cls-panel: e("@{prefix-cls}-panel"); 6 | 7 | .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) { 8 | border-color: @border; 9 | 10 | & > .@{prefix-cls-panel}-heading { 11 | color: @heading-text-color; 12 | background-color: @heading-bg-color; 13 | border-color: @heading-border; 14 | 15 | + .@{prefix-cls-panel}-collapse > .@{prefix-cls-panel}-body { 16 | border-top-color: @border; 17 | } 18 | .badge { 19 | color: @heading-bg-color; 20 | background-color: @heading-text-color; 21 | } 22 | } 23 | & > .@{prefix-cls-panel}-footer { 24 | + .@{prefix-cls-panel}-collapse > .@{prefix-cls-panel}-body { 25 | border-bottom-color: @border; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/styles/mixins/progress-bar.less: -------------------------------------------------------------------------------- 1 | // Progress bars 2 | 3 | .progress-bar-variant(@color) { 4 | background-color: @color; 5 | 6 | // Deprecated parent class requirement as of v3.2.0 7 | .progress-striped & { 8 | #gradient > .striped(); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/styles/mixins/reset-filter.less: -------------------------------------------------------------------------------- 1 | // Reset filters for IE 2 | // 3 | // When you need to remove a gradient background, do not forget to use this to reset 4 | // the IE filter for IE9 and below. 5 | 6 | .reset-filter() { 7 | filter: e("progid:DXImageTransform.Microsoft.gradient(enabled = false)"); 8 | } 9 | -------------------------------------------------------------------------------- /src/styles/mixins/reset-text.less: -------------------------------------------------------------------------------- 1 | .reset-text() { 2 | font-family: @font-family-base; 3 | // We deliberately do NOT reset font-size. 4 | font-style: normal; 5 | font-weight: normal; 6 | letter-spacing: normal; 7 | line-break: auto; 8 | line-height: @line-height-base; 9 | text-align: left; // Fallback for where `start` is not supported 10 | text-align: start; 11 | text-decoration: none; 12 | text-shadow: none; 13 | text-transform: none; 14 | white-space: normal; 15 | word-break: normal; 16 | word-spacing: normal; 17 | word-wrap: normal; 18 | } 19 | -------------------------------------------------------------------------------- /src/styles/mixins/resize.less: -------------------------------------------------------------------------------- 1 | // Resize anything 2 | 3 | .resizable(@direction) { 4 | resize: @direction; // Options: horizontal, vertical, both 5 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` 6 | } 7 | -------------------------------------------------------------------------------- /src/styles/mixins/responsive-visibility.less: -------------------------------------------------------------------------------- 1 | // Responsive utilities 2 | 3 | // 4 | // More easily include all the states for responsive-utilities.less. 5 | .responsive-visibility() { 6 | display: block !important; 7 | table& { 8 | display: table !important; 9 | } 10 | tr& { 11 | display: table-row !important; 12 | } 13 | th&, 14 | td& { 15 | display: table-cell !important; 16 | } 17 | } 18 | 19 | .responsive-invisibility() { 20 | display: none !important; 21 | } 22 | -------------------------------------------------------------------------------- /src/styles/mixins/size.less: -------------------------------------------------------------------------------- 1 | // Sizing shortcuts 2 | 3 | .size(@width; @height) { 4 | width: @width; 5 | height: @height; 6 | } 7 | 8 | .square(@size) { 9 | .size(@size; @size); 10 | } 11 | -------------------------------------------------------------------------------- /src/styles/mixins/tab-focus.less: -------------------------------------------------------------------------------- 1 | // WebKit-style focus 2 | 3 | .tab-focus() { 4 | // Default 5 | outline: thin dotted; 6 | // WebKit 7 | outline: 5px auto -webkit-focus-ring-color; 8 | outline-offset: -2px; 9 | } 10 | -------------------------------------------------------------------------------- /src/styles/mixins/table-row.less: -------------------------------------------------------------------------------- 1 | // Tables 2 | 3 | .table-row-variant(@state; @background) { 4 | // Exact selectors below required to override `.table-striped` and prevent 5 | // inheritance to nested tables. 6 | .table > thead > tr, 7 | .table > tbody > tr, 8 | .table > tfoot > tr { 9 | > td.@{state}, 10 | > th.@{state}, 11 | &.@{state} > td, 12 | &.@{state} > th { 13 | background-color: @background; 14 | } 15 | } 16 | 17 | // Hover states for `.table-hover` 18 | // Note: this is not available for cells or rows within `thead` or `tfoot`. 19 | .table-hover > tbody > tr { 20 | > td.@{state}:hover, 21 | > th.@{state}:hover, 22 | &.@{state}:hover > td, 23 | &:hover > .@{state}, 24 | &.@{state}:hover > th { 25 | background-color: darken(@background, 5%); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/styles/mixins/text-emphasis.less: -------------------------------------------------------------------------------- 1 | // Typography 2 | 3 | .text-emphasis-variant(@color) { 4 | color: @color; 5 | a&:hover, 6 | a&:focus { 7 | color: darken(@color, 10%); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/styles/mixins/text-overflow.less: -------------------------------------------------------------------------------- 1 | // Text overflow 2 | // Requires inline-block or block for proper styling 3 | 4 | .text-overflow() { 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | } 9 | -------------------------------------------------------------------------------- /src/styles/responsive-embed.less: -------------------------------------------------------------------------------- 1 | // Embeds responsive 2 | // 3 | // Credit: Nicolas Gallagher and SUIT CSS. 4 | 5 | .embed-responsive { 6 | position: relative; 7 | display: block; 8 | height: 0; 9 | padding: 0; 10 | overflow: hidden; 11 | 12 | .embed-responsive-item, 13 | iframe, 14 | embed, 15 | object, 16 | video { 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | bottom: 0; 21 | height: 100%; 22 | width: 100%; 23 | border: 0; 24 | } 25 | } 26 | 27 | // Modifier class for 16:9 aspect ratio 28 | .embed-responsive-16by9 { 29 | padding-bottom: 56.25%; 30 | } 31 | 32 | // Modifier class for 4:3 aspect ratio 33 | .embed-responsive-4by3 { 34 | padding-bottom: 75%; 35 | } 36 | -------------------------------------------------------------------------------- /src/styles/themes/greater-blue.less: -------------------------------------------------------------------------------- 1 | @import "./common.less"; 2 | 3 | // Variables 4 | // -------------------------------------------------- 5 | // 品牌色 6 | @primary-color: #0096e0; 7 | @normal-color: #0087e0; 8 | 9 | //checkbox & radio 10 | @checkbox-bg: @primary-color; 11 | @radio-bg: @checkbox-bg; 12 | 13 | // table 14 | @tr-hover-color:tint(@normal-color, 95%); 15 | @import "../bootstrap.less"; 16 | -------------------------------------------------------------------------------- /src/styles/themes/tao-orange.less: -------------------------------------------------------------------------------- 1 | @import "./common.less"; 2 | 3 | // Variables 4 | // -------------------------------------------------- 5 | // 品牌色 6 | @primary-color: #ff7500; 7 | 8 | //checkbox & radio 9 | @checkbox-bg: @primary-color; 10 | @radio-bg: @checkbox-bg; 11 | 12 | // table 13 | @tr-hover-color:#fff9f2; 14 | @import "../bootstrap.less"; 15 | -------------------------------------------------------------------------------- /src/styles/themes/tmall-red.less: -------------------------------------------------------------------------------- 1 | @import "./common.less"; 2 | 3 | // Variables 4 | // -------------------------------------------------- 5 | // 品牌色 6 | @primary-color: #e52e2e; 7 | 8 | //checkbox & radio 9 | @checkbox-bg: @primary-color; 10 | @radio-bg: @checkbox-bg; 11 | 12 | // table 13 | @tr-hover-color:#fff9f2; 14 | @import "../bootstrap.less"; 15 | -------------------------------------------------------------------------------- /src/styles/trigger.less: -------------------------------------------------------------------------------- 1 | // Trigger 2 | // -------------------------------------------------- 3 | @prefix-cls-trigger: e("@{prefix-cls}-trigger"); 4 | @prefix-cls-popup: e("@{prefix-cls}-popup"); 5 | 6 | .@{prefix-cls-trigger}-cont,.@{prefix-cls-trigger} { 7 | display: inline-block; 8 | } 9 | 10 | .@{prefix-cls-trigger}-disabled { 11 | color: #ccc; 12 | border-color: #e6e6e6; 13 | cursor: not-allowed; 14 | 15 | * { 16 | cursor: not-allowed !important; 17 | user-select: none; 18 | 19 | &:focus { 20 | box-shadow: none !important; 21 | } 22 | } 23 | } 24 | 25 | .@{prefix-cls-popup} { 26 | position: absolute; 27 | top: 0; 28 | left: 0; 29 | z-index: @zindex-popup; 30 | } 31 | -------------------------------------------------------------------------------- /src/styles/wells.less: -------------------------------------------------------------------------------- 1 | // 2 | // Wells 3 | // -------------------------------------------------- 4 | 5 | @well-bg: #f5f5f5; 6 | @well-border: darken(@well-bg, 7%); 7 | 8 | // Base class 9 | .well { 10 | min-height: 20px; 11 | padding: 19px; 12 | margin-bottom: 20px; 13 | background-color: @well-bg; 14 | border: 1px solid @well-border; 15 | border-radius: @border-radius-base; 16 | .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .05)); 17 | blockquote { 18 | border-color: #ddd; 19 | border-color: rgba(0, 0, 0, .15); 20 | } 21 | } 22 | 23 | // Sizes 24 | .well-lg { 25 | padding: 24px; 26 | border-radius: @border-radius-large; 27 | } 28 | 29 | .well-sm { 30 | padding: 9px; 31 | border-radius: @border-radius-small; 32 | } 33 | -------------------------------------------------------------------------------- /src/widgets/AddressSelect/demo/level2.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 省市选择 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 只可以选省和市，但这种情况推荐使用cascader组件 10 | 11 | ## en-US 12 | 13 | 14 | ````jsx 15 | 16 | ```` 17 | 18 | ````vue-script 19 | new Vue({ 20 | el: 'body', 21 | components: { 22 | addressSelect: atuiWidget.AddressSelect 23 | } 24 | }) 25 | ```` 26 | -------------------------------------------------------------------------------- /src/widgets/AddressSelect/demo/level3.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 省市区 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 选择省和市区 10 | 11 | ## en-US 12 | 13 | 14 | ````jsx 15 | {{addr.city}} 16 | 17 | ```` 18 | 19 | ````vue-script 20 | new Vue({ 21 | el: 'body', 22 | data () { 23 | return { 24 | addr:{ 25 | county: '', 26 | province: '', 27 | city: '' 28 | } 29 | } 30 | }, 31 | components: { 32 | addressSelect: atuiWidget.AddressSelect 33 | }, 34 | methods: { 35 | 'select-city': function(data) { 36 | this.addr.city = data.cityName 37 | }, 38 | 'select-province': function(data) { 39 | this.addr.province = data.provinceName 40 | }, 41 | 'select-county': function(data) { 42 | this.addr.county = data.countyName 43 | } 44 | } 45 | }) 46 | ```` 47 | -------------------------------------------------------------------------------- /src/widgets/AddressSelect/demo/level4.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 选择街道 5 | en-US: Type 6 | --- 7 | 8 | ## zh-CN 9 | 选择省和市 10 | 11 | ## en-US 12 | 13 | 14 | ````jsx 15 | 16 | ```` 17 | 18 | ````vue-script 19 | new Vue({ 20 | el: 'body', 21 | components: { 22 | addressSelect: atuiWidget.AddressSelect 23 | }, 24 | mounted() { 25 | // 获取当前地址 26 | console.log(this.selectAddr) 27 | } 28 | }) 29 | ```` 30 | -------------------------------------------------------------------------------- /src/widgets/AddressSelect/index.js: -------------------------------------------------------------------------------- 1 | import AddressSelect from './AddressSelect.vue' 2 | 3 | export default AddressSelect 4 | -------------------------------------------------------------------------------- /src/widgets/AddressSelect/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: 表单类 3 | title: AddressSelect 4 | subtitle: 地址选择器 5 | --- 6 | 7 | 地址选择器 8 | 9 | ## 何时使用 10 | 11 | 12 | 13 | ## API 14 | -------------------------------------------------------------------------------- /src/widgets/index.js: -------------------------------------------------------------------------------- 1 | import AddressSelect from './AddressSelect/' 2 | 3 | const VueWidget = { 4 | AddressSelect 5 | } 6 | // require.ensure([], function(require) { 7 | // VueWidget.AddressSelect = require('./AddressSelect/') 8 | // console.log(VueWidget.AddressSelect) 9 | // }) 10 | module.exports = VueWidget 11 | -------------------------------------------------------------------------------- /sync_doc.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | tempdir=`mktemp -d -t atui.XXXXXX` 3 | workDir=$PWD 4 | tempContent=$tempdir"/*" 5 | git clone https://github.com/aliqin/aliqin.github.io.git $tempdir 6 | 7 | cd $tempdir && rm -rf $tempContent 8 | cd $workDir 9 | cp -r ./_site/* $tempdir 10 | cd $tempdir 11 | git add -A 12 | git commit -m 'doc update' 13 | git push origin master 14 | rm -rf tempdir 15 | -------------------------------------------------------------------------------- /test/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jasmine": true 4 | }, 5 | "globals": { 6 | "$": true, 7 | "jQuery": true, 8 | "casper": true, 9 | "getWarnCount": true, 10 | "assert": true 11 | }, 12 | "rules": { 13 | "no-new": 0, 14 | "no-multi-str": 0, 15 | "standard/object-curly-even-spacing": 0 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /test/unit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | atui unit tests 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /test/unit/index.js: -------------------------------------------------------------------------------- 1 | // require all test files 2 | const testsContext = require.context('src', true, /\.test.js$/) 3 | testsContext.keys().forEach(testsContext) 4 | -------------------------------------------------------------------------------- /test/unit/lib/MIT.LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2008-2014 Pivotal Labs 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /test/unit/util.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 测试用例工具函数 3 | */ 4 | 5 | let util = { 6 | /* 7 | * @触发一个鼠标事件 8 | * @params options{Object} 9 | * @params options.target {DomElement} 在哪个 10 | * @params options.type {String} 11 | */ 12 | triggerEvent(options) { 13 | // ci上的phantomjs不支持new MouseEvent,本地的chrome是支持的 14 | /* 15 | let evt = new MouseEvent(options.type,{ 16 | 'view': window, 17 | 'bubbles': true, 18 | 'cancelable': true 19 | }) 20 | options.target.dispatchEvent(evt) 21 | */ 22 | let evt = document.createEvent('MouseEvent') 23 | evt.initEvent(options.type, true, true) 24 | options.target.dispatchEvent(evt) 25 | }, 26 | 27 | keyEvent(options) { 28 | const evt = document.createEvent('Events'); 29 | evt.initEvent(options.type, true, true); 30 | evt.keyCode = options.keyCode; 31 | options.target.dispatchEvent(evt); 32 | } 33 | } 34 | 35 | export default util --------------------------------------------------------------------------------