├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .gitattributes ├── .github ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .inscode ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── assets ├── iview.png ├── iview2.png ├── logo.png ├── logo.svg └── pay.png ├── build ├── .eslintrc.json ├── build-style.js ├── locale.js ├── webpack.base.config.js ├── webpack.dev.config.js ├── webpack.dist.dev.config.js ├── webpack.dist.locale.config.js ├── webpack.dist.prod.config.js └── webpack.test.config.js ├── dist ├── iview.js ├── iview.js.map ├── iview.min.js ├── iview.min.js.gz ├── iview.min.js.map ├── locale │ ├── ar-EG.js │ ├── ar-EG.js.map │ ├── ar-SA.js │ ├── ar-SA.js.map │ ├── cs-CZ.js │ ├── cs-CZ.js.map │ ├── da-DK.js │ ├── da-DK.js.map │ ├── de-DE.js │ ├── de-DE.js.map │ ├── el-GR.js │ ├── el-GR.js.map │ ├── en-US.js │ ├── en-US.js.map │ ├── es-ES.js │ ├── es-ES.js.map │ ├── fa-IR.js │ ├── fa-IR.js.map │ ├── fi-FI.js │ ├── fi-FI.js.map │ ├── fr-FR.js │ ├── fr-FR.js.map │ ├── hi-IN.js │ ├── hi-IN.js.map │ ├── id-ID.js │ ├── id-ID.js.map │ ├── it-IT.js │ ├── it-IT.js.map │ ├── ja-JP.js │ ├── ja-JP.js.map │ ├── ko-KR.js │ ├── ko-KR.js.map │ ├── mn-MN.js │ ├── mn-MN.js.map │ ├── mn-TR.js │ ├── mn-TR.js.map │ ├── nb-NO.js │ ├── nb-NO.js.map │ ├── nl-NL.js │ ├── nl-NL.js.map │ ├── pl-PL.js │ ├── pl-PL.js.map │ ├── pt-BR.js │ ├── pt-BR.js.map │ ├── pt-PT.js │ ├── pt-PT.js.map │ ├── ro-RO.js │ ├── ro-RO.js.map │ ├── ru-RU.js │ ├── ru-RU.js.map │ ├── si_LK.js │ ├── si_LK.js.map │ ├── sv-SE.js │ ├── sv-SE.js.map │ ├── th-TH.js │ ├── th-TH.js.map │ ├── tr-TR.js │ ├── tr-TR.js.map │ ├── uk-UA.js │ ├── uk-UA.js.map │ ├── vi-VN.js │ ├── vi-VN.js.map │ ├── zh-CN.js │ ├── zh-CN.js.map │ ├── zh-TW.js │ ├── zh-TW.js.map │ ├── zh-UG.js │ └── zh-UG.js.map └── styles │ ├── fonts │ ├── ionicons.svg │ ├── ionicons.ttf │ ├── ionicons.woff │ └── ionicons.woff2 │ └── iview.css ├── examples ├── app.vue ├── components │ ├── table.vue │ ├── tableExpand.vue │ ├── test.vue │ └── wrapper.vue ├── index.html ├── main.js └── routers │ ├── affix.vue │ ├── alert.vue │ ├── anchor.vue │ ├── auto-complete.vue │ ├── avatar.vue │ ├── back-top.vue │ ├── badge.vue │ ├── breadcrumb.vue │ ├── button.vue │ ├── card.vue │ ├── carousel.vue │ ├── cascader.vue │ ├── cell.vue │ ├── checkbox.vue │ ├── circle.vue │ ├── collapse.vue │ ├── color-picker.vue │ ├── custem-menu-item.vue │ ├── date.vue │ ├── divider.vue │ ├── drawer.vue │ ├── dropdown.vue │ ├── form.vue │ ├── grid.vue │ ├── icon.vue │ ├── input-number.vue │ ├── input.vue │ ├── layout.vue │ ├── list.vue │ ├── loading-bar.vue │ ├── menu.vue │ ├── message.vue │ ├── modal.vue │ ├── more.vue │ ├── notice.vue │ ├── page.vue │ ├── poptip.vue │ ├── progress.vue │ ├── radio.vue │ ├── rate.vue │ ├── scroll.vue │ ├── select.vue │ ├── slider.vue │ ├── spin.vue │ ├── split.vue │ ├── steps.vue │ ├── switch.vue │ ├── table.vue │ ├── tabs.vue │ ├── tag.vue │ ├── time.vue │ ├── timeline.vue │ ├── tooltip.vue │ ├── transfer.vue │ ├── tree.vue │ └── upload.vue ├── package-lock.json ├── package.json ├── src ├── components │ ├── affix │ │ ├── affix.vue │ │ └── index.js │ ├── alert │ │ ├── alert.vue │ │ └── index.js │ ├── anchor-link │ │ └── index.js │ ├── anchor │ │ ├── anchor-link.vue │ │ ├── anchor.vue │ │ └── index.js │ ├── auto-complete │ │ ├── auto-complete.vue │ │ └── index.js │ ├── avatar │ │ ├── avatar.vue │ │ └── index.js │ ├── back-top │ │ ├── back-top.vue │ │ └── index.js │ ├── badge │ │ ├── badge.vue │ │ └── index.js │ ├── base │ │ ├── collapse-transition.js │ │ ├── notification │ │ │ ├── index.js │ │ │ ├── notice.vue │ │ │ └── notification.vue │ │ ├── popper.js │ │ └── render.js │ ├── breadcrumb-item │ │ └── index.js │ ├── breadcrumb │ │ ├── breadcrumb-item.vue │ │ ├── breadcrumb.vue │ │ └── index.js │ ├── button-group │ │ └── index.js │ ├── button │ │ ├── button-group.vue │ │ ├── button.vue │ │ └── index.js │ ├── card │ │ ├── card.vue │ │ └── index.js │ ├── carousel-item │ │ └── index.js │ ├── carousel │ │ ├── carousel-item.vue │ │ ├── carousel.vue │ │ └── index.js │ ├── cascader │ │ ├── cascader.vue │ │ ├── casitem.vue │ │ ├── caspanel.vue │ │ └── index.js │ ├── cell-group │ │ └── index.js │ ├── cell │ │ ├── cell-group.vue │ │ ├── cell-item.vue │ │ ├── cell.vue │ │ └── index.js │ ├── checkbox-group │ │ └── index.js │ ├── checkbox │ │ ├── checkbox-group.vue │ │ ├── checkbox.vue │ │ └── index.js │ ├── circle │ │ ├── circle.vue │ │ └── index.js │ ├── col │ │ └── index.js │ ├── collapse │ │ ├── collapse.vue │ │ ├── index.js │ │ └── panel.vue │ ├── color-picker │ │ ├── alpha.vue │ │ ├── color-picker.vue │ │ ├── handleEscapeMixin.js │ │ ├── hsaMixin.js │ │ ├── hue.vue │ │ ├── index.js │ │ ├── prefixMixin.js │ │ ├── recommend-colors.vue │ │ ├── saturation.vue │ │ └── utils.js │ ├── content │ │ └── index.js │ ├── date-picker │ │ ├── base │ │ │ ├── confirm.vue │ │ │ ├── date-table.vue │ │ │ ├── mixin.js │ │ │ ├── month-table.vue │ │ │ ├── prefixCls.js │ │ │ ├── time-spinner.vue │ │ │ └── year-table.vue │ │ ├── index.js │ │ ├── panel │ │ │ ├── Date │ │ │ │ ├── date-panel-label.vue │ │ │ │ ├── date-panel-mixin.js │ │ │ │ ├── date-range.vue │ │ │ │ └── date.vue │ │ │ ├── Time │ │ │ │ ├── time-range.vue │ │ │ │ └── time.vue │ │ │ └── panel-mixin.js │ │ ├── picker.vue │ │ ├── picker │ │ │ ├── date-picker.js │ │ │ └── time-picker.js │ │ ├── time-mixins.js │ │ └── util.js │ ├── divider │ │ ├── divider.vue │ │ └── index.js │ ├── drawer │ │ ├── drawer.vue │ │ └── index.js │ ├── dropdown-item │ │ └── index.js │ ├── dropdown-menu │ │ └── index.js │ ├── dropdown │ │ ├── dropdown-item.vue │ │ ├── dropdown-menu.vue │ │ ├── dropdown.vue │ │ └── index.js │ ├── footer │ │ └── index.js │ ├── form-item │ │ └── index.js │ ├── form │ │ ├── form-item.vue │ │ ├── form.vue │ │ └── index.js │ ├── grid │ │ ├── col.vue │ │ ├── index.js │ │ └── row.vue │ ├── header │ │ └── index.js │ ├── i18n │ │ └── index.js │ ├── icon │ │ ├── icon.vue │ │ └── index.js │ ├── input-number │ │ ├── index.js │ │ └── input-number.vue │ ├── input │ │ ├── index.js │ │ └── input.vue │ ├── layout │ │ ├── content.vue │ │ ├── footer.vue │ │ ├── header.vue │ │ ├── index.js │ │ ├── layout.vue │ │ └── sider.vue │ ├── list │ │ ├── index.js │ │ ├── list-item-meta.vue │ │ ├── list-item.vue │ │ └── list.vue │ ├── loading-bar │ │ ├── index.js │ │ ├── loading-bar.js │ │ └── loading-bar.vue │ ├── locale │ │ └── index.js │ ├── menu-group │ │ └── index.js │ ├── menu-item │ │ └── index.js │ ├── menu │ │ ├── index.js │ │ ├── menu-group.vue │ │ ├── menu-item.vue │ │ ├── menu.vue │ │ ├── mixin.js │ │ └── submenu.vue │ ├── message │ │ └── index.js │ ├── modal │ │ ├── confirm.js │ │ ├── index.js │ │ ├── mixins-scrollbar.js │ │ └── modal.vue │ ├── notice │ │ └── index.js │ ├── option-group │ │ └── index.js │ ├── option │ │ └── index.js │ ├── options │ │ └── index.js │ ├── page │ │ ├── index.js │ │ ├── options.vue │ │ └── page.vue │ ├── panel │ │ └── index.js │ ├── poptip │ │ ├── index.js │ │ └── poptip.vue │ ├── progress │ │ ├── index.js │ │ └── progress.vue │ ├── radio-group │ │ └── index.js │ ├── radio │ │ ├── index.js │ │ ├── radio-group.vue │ │ └── radio.vue │ ├── rate │ │ ├── index.js │ │ └── rate.vue │ ├── row │ │ └── index.js │ ├── scroll │ │ ├── index.js │ │ ├── loading-component.vue │ │ └── scroll.vue │ ├── select │ │ ├── dropdown.vue │ │ ├── functional-options.vue │ │ ├── index.js │ │ ├── option-group.vue │ │ ├── option.vue │ │ ├── select-head.vue │ │ ├── select.vue │ │ └── utils.js │ ├── sider │ │ └── index.js │ ├── slider │ │ ├── index.js │ │ ├── marker.js │ │ └── slider.vue │ ├── spin │ │ ├── index.js │ │ ├── spin.js │ │ └── spin.vue │ ├── split │ │ ├── index.js │ │ ├── split.vue │ │ └── trigger.vue │ ├── step │ │ └── index.js │ ├── steps │ │ ├── index.js │ │ ├── step.vue │ │ └── steps.vue │ ├── submenu │ │ └── index.js │ ├── switch │ │ ├── index.js │ │ └── switch.vue │ ├── tab-pane │ │ └── index.js │ ├── table │ │ ├── cell.vue │ │ ├── expand.js │ │ ├── export-csv.js │ │ ├── header.js │ │ ├── index.js │ │ ├── mixin.js │ │ ├── slot.js │ │ ├── summary.vue │ │ ├── table-body.vue │ │ ├── table-head.vue │ │ ├── table-tr.vue │ │ ├── table.vue │ │ └── util.js │ ├── tabs │ │ ├── index.js │ │ ├── pane.vue │ │ └── tabs.vue │ ├── tag │ │ ├── index.js │ │ └── tag.vue │ ├── time-picker │ │ └── index.js │ ├── time │ │ ├── index.js │ │ ├── time.js │ │ └── time.vue │ ├── timeline-item │ │ └── index.js │ ├── timeline │ │ ├── index.js │ │ ├── timeline-item.vue │ │ └── timeline.vue │ ├── tooltip │ │ ├── index.js │ │ └── tooltip.vue │ ├── transfer │ │ ├── index.js │ │ ├── list.vue │ │ ├── operation.vue │ │ ├── search.vue │ │ └── transfer.vue │ ├── tree │ │ ├── index.js │ │ ├── node.vue │ │ ├── render.js │ │ └── tree.vue │ └── upload │ │ ├── ajax.js │ │ ├── index.js │ │ ├── upload-list.vue │ │ └── upload.vue ├── directives │ ├── clickoutside.js │ ├── transfer-dom.js │ └── v-click-outside-x.js ├── index.js ├── locale │ ├── format.js │ ├── index.js │ ├── lang.js │ └── lang │ │ ├── ar-EG.js │ │ ├── ar-SA.js │ │ ├── cs-CZ.js │ │ ├── da-DK.js │ │ ├── de-DE.js │ │ ├── el-GR.js │ │ ├── en-US.js │ │ ├── es-ES.js │ │ ├── fa-IR.js │ │ ├── fi-FI.js │ │ ├── fr-FR.js │ │ ├── hi-IN.js │ │ ├── id-ID.js │ │ ├── it-IT.js │ │ ├── ja-JP.js │ │ ├── ko-KR.js │ │ ├── mn-MN.js │ │ ├── mn-TR.js │ │ ├── nb-NO.js │ │ ├── nl-NL.js │ │ ├── pl-PL.js │ │ ├── pt-BR.js │ │ ├── pt-PT.js │ │ ├── ro-RO.js │ │ ├── ru-RU.js │ │ ├── si_LK.js │ │ ├── sv-SE.js │ │ ├── th-TH.js │ │ ├── tr-TR.js │ │ ├── uk-UA.js │ │ ├── vi-VN.js │ │ ├── zh-CN.js │ │ ├── zh-TW.js │ │ └── zh-UG.js ├── mixins │ ├── emitter.js │ ├── form.js │ ├── link.js │ └── locale.js ├── styles │ ├── README.md │ ├── animation │ │ ├── ease.less │ │ ├── fade.less │ │ ├── index.less │ │ ├── move.less │ │ └── slide.less │ ├── color │ │ ├── bezierEasing.less │ │ ├── colorPalette.less │ │ ├── colors.less │ │ └── tinyColor.less │ ├── common │ │ ├── article.less │ │ ├── base.less │ │ ├── iconfont │ │ │ ├── _ionicons-font.less │ │ │ ├── _ionicons-icons.less │ │ │ ├── _ionicons-variables.less │ │ │ ├── fonts │ │ │ │ ├── ionicons.svg │ │ │ │ ├── ionicons.ttf │ │ │ │ ├── ionicons.woff │ │ │ │ └── ionicons.woff2 │ │ │ └── ionicons.less │ │ ├── index.less │ │ ├── layout.less │ │ └── normalize.less │ ├── components │ │ ├── affix.less │ │ ├── alert.less │ │ ├── anchor.less │ │ ├── auto-complete.less │ │ ├── avatar.less │ │ ├── back-top.less │ │ ├── badge.less │ │ ├── breadcrumb.less │ │ ├── button.less │ │ ├── card.less │ │ ├── carousel.less │ │ ├── cascader.less │ │ ├── cell.less │ │ ├── checkbox.less │ │ ├── circle.less │ │ ├── collapse.less │ │ ├── color-picker.less │ │ ├── date-picker.less │ │ ├── divider.less │ │ ├── drawer.less │ │ ├── dropdown.less │ │ ├── form.less │ │ ├── index.less │ │ ├── input-number.less │ │ ├── input.less │ │ ├── layout.less │ │ ├── list.less │ │ ├── loading-bar.less │ │ ├── menu.less │ │ ├── message.less │ │ ├── modal.less │ │ ├── notice.less │ │ ├── page.less │ │ ├── poptip.less │ │ ├── progress.less │ │ ├── radio.less │ │ ├── rate.less │ │ ├── scroll.less │ │ ├── select-dropdown.less │ │ ├── select.less │ │ ├── slider.less │ │ ├── spin.less │ │ ├── split.less │ │ ├── steps.less │ │ ├── switch.less │ │ ├── table.less │ │ ├── tabs.less │ │ ├── tag.less │ │ ├── time-picker.less │ │ ├── time.less │ │ ├── timeline.less │ │ ├── tooltip.less │ │ ├── transfer.less │ │ ├── tree.less │ │ └── upload.less │ ├── copyright.less │ ├── custom.less │ ├── index.less │ └── mixins │ │ ├── button.less │ │ ├── caret.less │ │ ├── checkbox.less │ │ ├── clearfix.less │ │ ├── close.less │ │ ├── common.less │ │ ├── content.less │ │ ├── index.less │ │ ├── input.less │ │ ├── layout.less │ │ ├── loading.less │ │ ├── mask.less │ │ ├── select.less │ │ ├── size.less │ │ └── tooltip.less └── utils │ ├── assist.js │ ├── calcTextareaHeight.js │ ├── csv.js │ ├── date.js │ ├── dom.js │ ├── random_str.js │ └── transfer-queue.js ├── test ├── .eslintrc.json └── unit │ ├── index.js │ ├── karma.conf.js │ ├── specs │ ├── affix.spec.js │ ├── assets │ │ ├── locale-expects.js │ │ └── table │ │ │ └── csvData.js │ ├── breadcrumb.spec.js │ ├── button.spec.js │ ├── date-picker-utils.spec.js │ ├── date-picker.spec.js │ ├── message.spec.js │ ├── select.spec.js │ ├── table.spec.js │ └── time-spinner.spec.js │ └── util.js ├── tsconfig.json ├── tslint.json ├── types ├── affix.d.ts ├── alert.d.ts ├── anchor.d.ts ├── auto-complete.d.ts ├── avatar.d.ts ├── back-top.d.ts ├── badge.d.ts ├── breadcrumb.d.ts ├── button.d.ts ├── card.d.ts ├── carousel.d.ts ├── cascader.d.ts ├── cell.d.ts ├── checkbox.d.ts ├── circle.d.ts ├── collapse.d.ts ├── color-picker.d.ts ├── content.d.ts ├── date-picker.d.ts ├── divider.d.ts ├── drawer.d.ts ├── dropdown.d.ts ├── footer.d.ts ├── form.d.ts ├── grid.d.ts ├── header.d.ts ├── icon.d.ts ├── index.d.ts ├── input-number.d.ts ├── input.d.ts ├── iview.components.d.ts ├── iview.d.ts ├── layout.d.ts ├── loading-bar.d.ts ├── menu.d.ts ├── message.d.ts ├── modal.d.ts ├── notice.d.ts ├── page.d.ts ├── poptip.d.ts ├── progress.d.ts ├── radio.d.ts ├── rate.d.ts ├── scroll.d.ts ├── select.d.ts ├── sider.d.ts ├── slider.d.ts ├── spin.d.ts ├── split.d.ts ├── steps.d.ts ├── switch.d.ts ├── table.d.ts ├── tabs.d.ts ├── tag.d.ts ├── time-picker.d.ts ├── time.d.ts ├── timeline.d.ts ├── tooltip.d.ts ├── transfer.d.ts ├── tree.d.ts └── upload.d.ts └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "loose": false, 5 | "modules": "commonjs", 6 | "spec": true, 7 | "targets": { 8 | "browsers": [ 9 | "last 3 Chrome versions", 10 | "last 3 Firefox versions", 11 | "Safari >= 10", 12 | "Explorer >= 11", 13 | "Edge >= 12", 14 | "iOS >= 10", 15 | "Android >= 6" 16 | ] 17 | }, 18 | "useBuiltIns": "usage", 19 | "debug": false 20 | }], 21 | "stage-3" 22 | ], 23 | "plugins": [ 24 | "dynamic-import-node", 25 | "transform-class-properties", 26 | "transform-es5-property-mutators", 27 | "transform-object-rest-spread", 28 | "transform-runtime", 29 | "transform-vue-jsx" 30 | ], 31 | "comments": false 32 | } 33 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | 4 | # top-most EditorConfig file 5 | root = true 6 | 7 | # every file 8 | [*] 9 | charset = utf-8 10 | end_of_line = lf 11 | indent_size = 4 12 | indent_style = space 13 | insert_final_newline = true 14 | trim_trailing_whitespace = true 15 | 16 | # 4 space indentation 17 | [*.py] 18 | indent_size = 4 19 | 20 | # Tab indentation (no size specified) 21 | [Makefile] 22 | indent_style = tab 23 | 24 | [*.md] 25 | trim_trailing_whitespace = false 26 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | src/directives 2 | src/utils/throttle.js -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parserOptions": { 4 | "ecmaFeatures": { 5 | "experimentalObjectRestSpread": true 6 | }, 7 | "ecmaVersion": 6, 8 | "sourceType": "module" 9 | }, 10 | "env": { 11 | "browser": true, 12 | "commonjs": true, 13 | "es6": true 14 | }, 15 | "extends": "eslint:recommended", 16 | "plugins": ["vue"], 17 | "rules": { 18 | "indent": ["error", 4, { "SwitchCase": 1 }], 19 | "quotes": ["error", "single"], 20 | "semi": ["error", "always"], 21 | "vue/jsx-uses-vars": 2, 22 | "no-console": ["error"] 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | src/styles/**/* linguist-vendored=false -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 12 | 19 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .idea 3 | .ipr 4 | .iws 5 | *.diff 6 | *.patch 7 | *.bak 8 | .DS_Store 9 | node_modules/ 10 | node_modules2/ 11 | .project 12 | .settings 13 | npm-debug.log 14 | .*proj 15 | .svn/ 16 | *.swp 17 | *.swo 18 | *.log 19 | examples/dist/ 20 | yarn-error.log 21 | test/unit/coverage 22 | .vscode -------------------------------------------------------------------------------- /.inscode: -------------------------------------------------------------------------------- 1 | run = "npm i && npm run dev" 2 | 3 | [env] 4 | PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}" 5 | XDG_CONFIG_HOME = "/root/.config" 6 | npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global" -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .* 2 | *.md 3 | *.yml 4 | build/ 5 | node_modules/ 6 | test/ 7 | gulpfile.js 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: required 2 | language: node_js 3 | node_js: 4 | - '8' 5 | script: 6 | - 'npm run test' 7 | before_script: 8 | - 'sudo chown root /opt/google/chrome/chrome-sandbox' 9 | - 'sudo chmod 4755 /opt/google/chrome/chrome-sandbox' 10 | -------------------------------------------------------------------------------- /assets/iview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/view-design/ViewUI/5619a557d035748d554fe4fbff6f66b0f1bf75b3/assets/iview.png -------------------------------------------------------------------------------- /assets/iview2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/view-design/ViewUI/5619a557d035748d554fe4fbff6f66b0f1bf75b3/assets/iview2.png -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/view-design/ViewUI/5619a557d035748d554fe4fbff6f66b0f1bf75b3/assets/logo.png -------------------------------------------------------------------------------- /assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/pay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/view-design/ViewUI/5619a557d035748d554fe4fbff6f66b0f1bf75b3/assets/pay.png -------------------------------------------------------------------------------- /build/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "../.eslintrc.json" 4 | ], 5 | "env": { 6 | "node": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /build/build-style.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const cleanCSS = require('gulp-clean-css'); 3 | const less = require('gulp-less'); 4 | const rename = require('gulp-rename'); 5 | const autoprefixer = require('gulp-autoprefixer'); 6 | 7 | // 编译less 8 | gulp.task('css', function () { 9 | gulp.src('../src/styles/index.less') 10 | .pipe(less()) 11 | .pipe(autoprefixer({ 12 | browsers: ['last 2 versions', 'ie > 8'] 13 | })) 14 | .pipe(cleanCSS()) 15 | .pipe(rename('iview.css')) 16 | .pipe(gulp.dest('../dist/styles')); 17 | }); 18 | 19 | // 拷贝字体文件 20 | gulp.task('fonts', function () { 21 | gulp.src('../src/styles/common/iconfont/fonts/*.*') 22 | .pipe(gulp.dest('../dist/styles/fonts')); 23 | }); 24 | 25 | gulp.task('default', ['css', 'fonts']); 26 | -------------------------------------------------------------------------------- /build/locale.js: -------------------------------------------------------------------------------- 1 | const readDir = require('fs').readdirSync; 2 | const files = readDir('./src/locale/lang'); 3 | const entry = {}; 4 | files.forEach(file => { 5 | const name = file.split('.')[0]; 6 | entry[name] = './src/locale/lang/' + file; 7 | }); 8 | module.exports = entry; 9 | -------------------------------------------------------------------------------- /build/webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 本地预览 3 | */ 4 | 5 | const path = require('path'); 6 | const webpack = require('webpack'); 7 | // const ExtractTextPlugin = require('extract-text-webpack-plugin'); 8 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 9 | const merge = require('webpack-merge'); 10 | const webpackBaseConfig = require('./webpack.base.config.js'); 11 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin'); 12 | 13 | 14 | module.exports = merge(webpackBaseConfig, { 15 | devtool: 'eval-source-map', 16 | 17 | // 入口 18 | entry: { 19 | main: './examples/main', 20 | vendors: ['vue', 'vue-router'] 21 | }, 22 | // 输出 23 | output: { 24 | path: path.join(__dirname, '../examples/dist'), 25 | publicPath: '', 26 | filename: '[name].js', 27 | chunkFilename: '[name].chunk.js' 28 | }, 29 | resolve: { 30 | alias: { 31 | iview: '../../src/index', 32 | vue: 'vue/dist/vue.esm.js' 33 | // vue: 'vue/dist/vue.runtime.js' 34 | } 35 | }, 36 | plugins: [ 37 | new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendor.bundle.js' }), 38 | new HtmlWebpackPlugin({ 39 | inject: true, 40 | filename: path.join(__dirname, '../examples/dist/index.html'), 41 | template: path.join(__dirname, '../examples/index.html') 42 | }), 43 | new FriendlyErrorsPlugin() 44 | ] 45 | }); 46 | -------------------------------------------------------------------------------- /build/webpack.dist.dev.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const merge = require('webpack-merge'); 4 | const webpackBaseConfig = require('./webpack.base.config.js'); 5 | 6 | process.env.NODE_ENV = 'production'; 7 | 8 | module.exports = merge(webpackBaseConfig, { 9 | devtool: 'source-map', 10 | 11 | entry: { 12 | main: './src/index.js' 13 | }, 14 | output: { 15 | path: path.resolve(__dirname, '../dist'), 16 | publicPath: '/dist/', 17 | filename: 'iview.js', 18 | library: 'iview', 19 | libraryTarget: 'umd', 20 | umdNamedDefine: true 21 | }, 22 | externals: { 23 | vue: { 24 | root: 'Vue', 25 | commonjs: 'vue', 26 | commonjs2: 'vue', 27 | amd: 'vue' 28 | } 29 | }, 30 | plugins: [ 31 | // @todo 32 | new webpack.DefinePlugin({ 33 | 'process.env': { 34 | NODE_ENV: '"production"' 35 | } 36 | }) 37 | ] 38 | }); 39 | -------------------------------------------------------------------------------- /build/webpack.dist.locale.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const entry = require('./locale'); 4 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 5 | 6 | process.env.NODE_ENV = 'production'; 7 | 8 | module.exports = { 9 | devtool: 'source-map', 10 | entry, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.js$/, 15 | loader: 'babel-loader', 16 | options: { 17 | sourceMap: true, 18 | }, 19 | exclude: /node_modules/ 20 | } 21 | ] 22 | }, 23 | output: { 24 | path: path.resolve(__dirname, '../dist/locale'), 25 | publicPath: '/dist/locale/', 26 | filename: '[name].js', 27 | library: 'iview/locale', 28 | libraryTarget: 'umd', 29 | umdNamedDefine: true 30 | }, 31 | externals: { 32 | vue: { 33 | root: 'Vue', 34 | commonjs: 'vue', 35 | commonjs2: 'vue', 36 | amd: 'vue' 37 | } 38 | }, 39 | plugins: [ 40 | new webpack.DefinePlugin({ 41 | 'process.env': { 42 | NODE_ENV: '"production"' 43 | } 44 | }), 45 | new UglifyJsPlugin({ 46 | parallel: true, 47 | sourceMap: true, 48 | }) 49 | ] 50 | }; 51 | -------------------------------------------------------------------------------- /build/webpack.dist.prod.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const merge = require('webpack-merge'); 4 | const webpackBaseConfig = require('./webpack.base.config.js'); 5 | const CompressionPlugin = require('compression-webpack-plugin'); 6 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 7 | 8 | process.env.NODE_ENV = 'production'; 9 | 10 | module.exports = merge(webpackBaseConfig, { 11 | devtool: 'source-map', 12 | entry: { 13 | main: './src/index.js' 14 | }, 15 | output: { 16 | path: path.resolve(__dirname, '../dist'), 17 | publicPath: '/dist/', 18 | filename: 'iview.min.js', 19 | library: 'iview', 20 | libraryTarget: 'umd', 21 | umdNamedDefine: true 22 | }, 23 | externals: { 24 | vue: { 25 | root: 'Vue', 26 | commonjs: 'vue', 27 | commonjs2: 'vue', 28 | amd: 'vue' 29 | } 30 | }, 31 | plugins: [ 32 | // @todo 33 | new webpack.DefinePlugin({ 34 | 'process.env.NODE_ENV': '"production"' 35 | }), 36 | new UglifyJsPlugin({ 37 | parallel: true, 38 | sourceMap: true 39 | }), 40 | new CompressionPlugin({ 41 | asset: '[path].gz[query]', 42 | algorithm: 'gzip', 43 | test: /\.(js|css)$/, 44 | threshold: 10240, 45 | minRatio: 0.8 46 | }) 47 | ] 48 | }); 49 | -------------------------------------------------------------------------------- /build/webpack.test.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 用于单元测试 3 | */ 4 | 5 | const webpack = require('webpack'); 6 | const merge = require('webpack-merge'); 7 | const webpackBaseConfig = require('./webpack.base.config.js'); 8 | 9 | 10 | const webpackConfig = merge(webpackBaseConfig, { 11 | devtool: 'eval-source-map', 12 | plugins: [ 13 | new webpack.DefinePlugin({ 14 | 'process.env': { 15 | NODE_ENV: '"testing"' 16 | } 17 | }) 18 | ] 19 | }); 20 | 21 | // no need for app entry during tests 22 | delete webpackConfig.entry; 23 | 24 | module.exports = webpackConfig; 25 | -------------------------------------------------------------------------------- /dist/iview.min.js.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/view-design/ViewUI/5619a557d035748d554fe4fbff6f66b0f1bf75b3/dist/iview.min.js.gz -------------------------------------------------------------------------------- /dist/styles/fonts/ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/view-design/ViewUI/5619a557d035748d554fe4fbff6f66b0f1bf75b3/dist/styles/fonts/ionicons.ttf -------------------------------------------------------------------------------- /dist/styles/fonts/ionicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/view-design/ViewUI/5619a557d035748d554fe4fbff6f66b0f1bf75b3/dist/styles/fonts/ionicons.woff -------------------------------------------------------------------------------- /dist/styles/fonts/ionicons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/view-design/ViewUI/5619a557d035748d554fe4fbff6f66b0f1bf75b3/dist/styles/fonts/ionicons.woff2 -------------------------------------------------------------------------------- /examples/components/tableExpand.vue: -------------------------------------------------------------------------------- 1 | 6 | 38 | -------------------------------------------------------------------------------- /examples/components/test.vue: -------------------------------------------------------------------------------- 1 | 33 | -------------------------------------------------------------------------------- /examples/components/wrapper.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | iView test page 6 | 7 | 8 | 9 | 10 |
11 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/routers/affix.vue: -------------------------------------------------------------------------------- 1 | 12 | 20 | 34 | -------------------------------------------------------------------------------- /examples/routers/back-top.vue: -------------------------------------------------------------------------------- 1 | 6 | 11 | 23 | -------------------------------------------------------------------------------- /examples/routers/breadcrumb.vue: -------------------------------------------------------------------------------- 1 | 7 | 32 | -------------------------------------------------------------------------------- /examples/routers/carousel.vue: -------------------------------------------------------------------------------- 1 | 11 | 30 | 44 | -------------------------------------------------------------------------------- /examples/routers/cell.vue: -------------------------------------------------------------------------------- 1 | 29 | 43 | -------------------------------------------------------------------------------- /examples/routers/circle.vue: -------------------------------------------------------------------------------- 1 | 24 | 29 | -------------------------------------------------------------------------------- /examples/routers/color-picker.vue: -------------------------------------------------------------------------------- 1 | 4 | 14 | -------------------------------------------------------------------------------- /examples/routers/custem-menu-item.vue: -------------------------------------------------------------------------------- 1 | 12 | 33 | -------------------------------------------------------------------------------- /examples/routers/loading-bar.vue: -------------------------------------------------------------------------------- 1 | 8 | 30 | -------------------------------------------------------------------------------- /examples/routers/menu.vue: -------------------------------------------------------------------------------- 1 | 32 | 46 | -------------------------------------------------------------------------------- /examples/routers/more.vue: -------------------------------------------------------------------------------- 1 | 17 | 40 | 68 | -------------------------------------------------------------------------------- /examples/routers/notice.vue: -------------------------------------------------------------------------------- 1 | 15 | 49 | -------------------------------------------------------------------------------- /examples/routers/poptip.vue: -------------------------------------------------------------------------------- 1 | 17 | 22 | -------------------------------------------------------------------------------- /examples/routers/progress.vue: -------------------------------------------------------------------------------- 1 | 25 | 35 | -------------------------------------------------------------------------------- /examples/routers/rate.vue: -------------------------------------------------------------------------------- 1 | 20 | 37 | -------------------------------------------------------------------------------- /examples/routers/scroll.vue: -------------------------------------------------------------------------------- 1 | 10 | 39 | 57 | -------------------------------------------------------------------------------- /examples/routers/slider.vue: -------------------------------------------------------------------------------- 1 | 8 | 29 | -------------------------------------------------------------------------------- /examples/routers/time.vue: -------------------------------------------------------------------------------- 1 | 14 | 34 | -------------------------------------------------------------------------------- /examples/routers/timeline.vue: -------------------------------------------------------------------------------- 1 | 10 | 57 | 62 | -------------------------------------------------------------------------------- /examples/routers/upload.vue: -------------------------------------------------------------------------------- 1 | 13 | 18 | -------------------------------------------------------------------------------- /src/components/affix/index.js: -------------------------------------------------------------------------------- 1 | import Affix from './affix.vue'; 2 | export default Affix; -------------------------------------------------------------------------------- /src/components/alert/index.js: -------------------------------------------------------------------------------- 1 | import Alert from './alert.vue'; 2 | export default Alert; -------------------------------------------------------------------------------- /src/components/anchor-link/index.js: -------------------------------------------------------------------------------- 1 | import AnchorLink from '../anchor/anchor-link.vue'; 2 | export default AnchorLink; 3 | -------------------------------------------------------------------------------- /src/components/anchor/anchor-link.vue: -------------------------------------------------------------------------------- 1 | 7 | 60 | -------------------------------------------------------------------------------- /src/components/anchor/index.js: -------------------------------------------------------------------------------- 1 | import Anchor from './anchor.vue'; 2 | export default Anchor; 3 | -------------------------------------------------------------------------------- /src/components/auto-complete/index.js: -------------------------------------------------------------------------------- 1 | import AutoComplete from './auto-complete.vue'; 2 | export default AutoComplete; -------------------------------------------------------------------------------- /src/components/avatar/index.js: -------------------------------------------------------------------------------- 1 | import Avatar from './avatar.vue'; 2 | export default Avatar; -------------------------------------------------------------------------------- /src/components/back-top/index.js: -------------------------------------------------------------------------------- 1 | import BackTop from './back-top.vue'; 2 | export default BackTop; -------------------------------------------------------------------------------- /src/components/badge/index.js: -------------------------------------------------------------------------------- 1 | import Badge from './badge.vue'; 2 | export default Badge; -------------------------------------------------------------------------------- /src/components/base/notification/index.js: -------------------------------------------------------------------------------- 1 | import Notification from './notification.vue'; 2 | import Vue from 'vue'; 3 | 4 | Notification.newInstance = properties => { 5 | const _props = properties || {}; 6 | 7 | const Instance = new Vue({ 8 | render (h) { 9 | return h(Notification, { 10 | props: _props 11 | }); 12 | } 13 | }); 14 | 15 | const component = Instance.$mount(); 16 | document.body.appendChild(component.$el); 17 | const notification = Instance.$children[0]; 18 | 19 | return { 20 | notice (noticeProps) { 21 | notification.add(noticeProps); 22 | }, 23 | remove (name) { 24 | notification.close(name); 25 | }, 26 | component: notification, 27 | destroy (element) { 28 | notification.closeAll(); 29 | setTimeout(function() { 30 | document.body.removeChild(document.getElementsByClassName(element)[0]); 31 | }, 500); 32 | } 33 | }; 34 | }; 35 | 36 | export default Notification; 37 | -------------------------------------------------------------------------------- /src/components/base/render.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'RenderCell', 3 | functional: true, 4 | props: { 5 | render: Function 6 | }, 7 | render: (h, ctx) => { 8 | return ctx.props.render(h); 9 | } 10 | }; -------------------------------------------------------------------------------- /src/components/breadcrumb-item/index.js: -------------------------------------------------------------------------------- 1 | import BreadcrumbItem from '../breadcrumb/breadcrumb-item.vue'; 2 | 3 | export default BreadcrumbItem; -------------------------------------------------------------------------------- /src/components/breadcrumb/breadcrumb-item.vue: -------------------------------------------------------------------------------- 1 | 22 | 51 | -------------------------------------------------------------------------------- /src/components/breadcrumb/breadcrumb.vue: -------------------------------------------------------------------------------- 1 | 6 | 44 | -------------------------------------------------------------------------------- /src/components/breadcrumb/index.js: -------------------------------------------------------------------------------- 1 | import Breadcrumb from './breadcrumb.vue'; 2 | import BreadcrumbItem from './breadcrumb-item.vue'; 3 | 4 | Breadcrumb.Item = BreadcrumbItem; 5 | export default Breadcrumb; -------------------------------------------------------------------------------- /src/components/button-group/index.js: -------------------------------------------------------------------------------- 1 | import ButtonGroup from '../button/button-group.vue'; 2 | 3 | export default ButtonGroup; -------------------------------------------------------------------------------- /src/components/button/button-group.vue: -------------------------------------------------------------------------------- 1 | 6 | 46 | -------------------------------------------------------------------------------- /src/components/button/index.js: -------------------------------------------------------------------------------- 1 | import Button from './button.vue'; 2 | import ButtonGroup from './button-group.vue'; 3 | 4 | Button.Group = ButtonGroup; 5 | export default Button; -------------------------------------------------------------------------------- /src/components/card/index.js: -------------------------------------------------------------------------------- 1 | import Card from './card.vue'; 2 | export default Card; -------------------------------------------------------------------------------- /src/components/carousel-item/index.js: -------------------------------------------------------------------------------- 1 | import CarouselItem from '../carousel/carousel-item.vue'; 2 | 3 | export default CarouselItem; -------------------------------------------------------------------------------- /src/components/carousel/carousel-item.vue: -------------------------------------------------------------------------------- 1 | 4 | 51 | -------------------------------------------------------------------------------- /src/components/carousel/index.js: -------------------------------------------------------------------------------- 1 | import Carousel from './carousel.vue'; 2 | import CarouselItem from './carousel-item.vue'; 3 | 4 | Carousel.Item = CarouselItem; 5 | export default Carousel; -------------------------------------------------------------------------------- /src/components/cascader/index.js: -------------------------------------------------------------------------------- 1 | import Cascader from './cascader.vue'; 2 | export default Cascader; -------------------------------------------------------------------------------- /src/components/cell-group/index.js: -------------------------------------------------------------------------------- 1 | import CellGroup from '../cell/cell-group.vue'; 2 | export default CellGroup; -------------------------------------------------------------------------------- /src/components/cell/cell-group.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/components/cell/cell-item.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /src/components/cell/index.js: -------------------------------------------------------------------------------- 1 | import Cell from './cell.vue'; 2 | import CellGroup from './cell-group.vue'; 3 | 4 | Cell.Group = CellGroup; 5 | export default Cell; -------------------------------------------------------------------------------- /src/components/checkbox-group/index.js: -------------------------------------------------------------------------------- 1 | import CheckboxGroup from '../checkbox/checkbox-group.vue'; 2 | 3 | export default CheckboxGroup; -------------------------------------------------------------------------------- /src/components/checkbox/index.js: -------------------------------------------------------------------------------- 1 | import Checkbox from './checkbox.vue'; 2 | import CheckboxGroup from './checkbox-group.vue'; 3 | 4 | Checkbox.Group = CheckboxGroup; 5 | export default Checkbox; -------------------------------------------------------------------------------- /src/components/circle/index.js: -------------------------------------------------------------------------------- 1 | import Circle from './circle.vue'; 2 | export default Circle; -------------------------------------------------------------------------------- /src/components/col/index.js: -------------------------------------------------------------------------------- 1 | import Col from '../grid/col.vue'; 2 | 3 | export default Col; -------------------------------------------------------------------------------- /src/components/collapse/index.js: -------------------------------------------------------------------------------- 1 | import Collapse from './collapse.vue'; 2 | import Panel from './panel.vue'; 3 | 4 | Collapse.Panel = Panel; 5 | export default Collapse; -------------------------------------------------------------------------------- /src/components/color-picker/handleEscapeMixin.js: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: { 3 | handleEscape(e) { 4 | this.dispatch('ColorPicker', 'on-escape-keydown', e); 5 | }, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /src/components/color-picker/index.js: -------------------------------------------------------------------------------- 1 | import ColorPicker from './color-picker.vue'; 2 | 3 | export default ColorPicker; 4 | -------------------------------------------------------------------------------- /src/components/color-picker/prefixMixin.js: -------------------------------------------------------------------------------- 1 | export default { 2 | data() { 3 | return { 4 | prefixCls: 'ivu-color-picker', 5 | inputPrefixCls: 'ivu-input', 6 | iconPrefixCls: 'ivu-icon', 7 | transferPrefixCls: 'ivu-transfer', 8 | }; 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /src/components/content/index.js: -------------------------------------------------------------------------------- 1 | import Content from '../layout/content.vue'; 2 | 3 | export default Content; -------------------------------------------------------------------------------- /src/components/date-picker/base/mixin.js: -------------------------------------------------------------------------------- 1 | 2 | import {clearHours} from '../util'; 3 | 4 | export default { 5 | name: 'PanelTable', 6 | props: { 7 | tableDate: { 8 | type: Date, 9 | required: true 10 | }, 11 | disabledDate: { 12 | type: Function 13 | }, 14 | selectionMode: { 15 | type: String, 16 | required: true 17 | }, 18 | value: { 19 | type: Array, 20 | required: true 21 | }, 22 | rangeState: { 23 | type: Object, 24 | default: () => ({ 25 | from: null, 26 | to: null, 27 | selecting: false 28 | }) 29 | }, 30 | focusedDate: { 31 | type: Date, 32 | required: true, 33 | } 34 | }, 35 | computed: { 36 | dates(){ 37 | const {selectionMode, value, rangeState} = this; 38 | const rangeSelecting = selectionMode === 'range' && rangeState.selecting; 39 | return rangeSelecting ? [rangeState.from] : value; 40 | }, 41 | }, 42 | methods: { 43 | handleClick (cell, e) { 44 | e.stopPropagation(); 45 | 46 | if (cell.disabled || cell.type === 'weekLabel') return; 47 | const newDate = new Date(clearHours(cell.date)); 48 | 49 | this.$emit('on-pick', newDate); 50 | this.$emit('on-pick-click'); 51 | }, 52 | handleMouseMove (cell) { 53 | if (!this.rangeState.selecting) return; 54 | if (cell.disabled) return; 55 | const newDate = cell.date; 56 | this.$emit('on-change-range', newDate); 57 | }, 58 | } 59 | }; 60 | -------------------------------------------------------------------------------- /src/components/date-picker/base/prefixCls.js: -------------------------------------------------------------------------------- 1 | 2 | export default 'ivu-date-picker-cells'; -------------------------------------------------------------------------------- /src/components/date-picker/index.js: -------------------------------------------------------------------------------- 1 | import DatePicker from './picker/date-picker'; 2 | 3 | export default DatePicker; -------------------------------------------------------------------------------- /src/components/date-picker/panel/Date/date-panel-label.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 26 | -------------------------------------------------------------------------------- /src/components/date-picker/panel/Date/date-panel-mixin.js: -------------------------------------------------------------------------------- 1 | 2 | import { oneOf } from '../../../../utils/assist'; 3 | import {initTimeDate } from '../../util'; 4 | 5 | 6 | export default { 7 | props: { 8 | showTime: { 9 | type: Boolean, 10 | default: false 11 | }, 12 | format: { 13 | type: String, 14 | default: 'yyyy-MM-dd' 15 | }, 16 | selectionMode: { 17 | type: String, 18 | validator (value) { 19 | return oneOf(value, ['year', 'month', 'date', 'time']); 20 | }, 21 | default: 'date' 22 | }, 23 | shortcuts: { 24 | type: Array, 25 | default: () => [] 26 | }, 27 | disabledDate: { 28 | type: Function, 29 | default: () => false 30 | }, 31 | value: { 32 | type: Array, 33 | default: () => [initTimeDate(), initTimeDate()] 34 | }, 35 | timePickerOptions: { 36 | default: () => ({}), 37 | type: Object, 38 | }, 39 | showWeekNumbers: { 40 | type: Boolean, 41 | default: false 42 | }, 43 | startDate: { 44 | type: Date 45 | }, 46 | pickerType: { 47 | type: String, 48 | require: true 49 | }, 50 | focusedDate: { 51 | type: Date, 52 | required: true, 53 | } 54 | }, 55 | computed: { 56 | isTime(){ 57 | return this.currentView === 'time'; 58 | } 59 | }, 60 | methods: { 61 | handleToggleTime(){ 62 | this.currentView = this.currentView === 'time' ? 'date' : 'time'; 63 | }, 64 | } 65 | }; 66 | -------------------------------------------------------------------------------- /src/components/date-picker/picker/date-picker.js: -------------------------------------------------------------------------------- 1 | import Picker from '../picker.vue'; 2 | import DatePickerPanel from '../panel/Date/date.vue'; 3 | import RangeDatePickerPanel from '../panel/Date/date-range.vue'; 4 | 5 | import { oneOf } from '../../../utils/assist'; 6 | 7 | export default { 8 | name: 'CalendarPicker', 9 | mixins: [Picker], 10 | props: { 11 | type: { 12 | validator (value) { 13 | return oneOf(value, ['year', 'month', 'date', 'daterange', 'datetime', 'datetimerange']); 14 | }, 15 | default: 'date' 16 | }, 17 | }, 18 | components: { DatePickerPanel, RangeDatePickerPanel }, 19 | computed: { 20 | panel(){ 21 | const isRange = this.type === 'daterange' || this.type === 'datetimerange'; 22 | return isRange ? 'RangeDatePickerPanel' : 'DatePickerPanel'; 23 | }, 24 | ownPickerProps(){ 25 | return this.options; 26 | } 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /src/components/date-picker/picker/time-picker.js: -------------------------------------------------------------------------------- 1 | import Picker from '../picker.vue'; 2 | import TimePickerPanel from '../panel/Time/time.vue'; 3 | import RangeTimePickerPanel from '../panel/Time/time-range.vue'; 4 | import Options from '../time-mixins'; 5 | 6 | import { findComponentsDownward, oneOf } from '../../../utils/assist'; 7 | 8 | export default { 9 | mixins: [Picker, Options], 10 | components: { TimePickerPanel, RangeTimePickerPanel }, 11 | props: { 12 | type: { 13 | validator (value) { 14 | return oneOf(value, ['time', 'timerange']); 15 | }, 16 | default: 'time' 17 | }, 18 | }, 19 | computed: { 20 | panel(){ 21 | const isRange = this.type === 'timerange'; 22 | return isRange ? 'RangeTimePickerPanel' : 'TimePickerPanel'; 23 | }, 24 | ownPickerProps(){ 25 | return { 26 | disabledHours: this.disabledHours, 27 | disabledMinutes: this.disabledMinutes, 28 | disabledSeconds: this.disabledSeconds, 29 | hideDisabledOptions: this.hideDisabledOptions 30 | }; 31 | } 32 | }, 33 | watch: { 34 | visible(visible){ 35 | if (visible) { 36 | this.$nextTick(() => { 37 | const spinners = findComponentsDownward(this, 'TimeSpinner'); 38 | spinners.forEach(instance => instance.updateScroll()); 39 | }); 40 | } 41 | } 42 | } 43 | }; 44 | -------------------------------------------------------------------------------- /src/components/date-picker/time-mixins.js: -------------------------------------------------------------------------------- 1 | export default { 2 | props: { 3 | disabledHours: { 4 | type: Array, 5 | default () { 6 | return []; 7 | } 8 | }, 9 | disabledMinutes: { 10 | type: Array, 11 | default () { 12 | return []; 13 | } 14 | }, 15 | disabledSeconds: { 16 | type: Array, 17 | default () { 18 | return []; 19 | } 20 | }, 21 | hideDisabledOptions: { 22 | type: Boolean, 23 | default: false 24 | } 25 | } 26 | }; -------------------------------------------------------------------------------- /src/components/divider/index.js: -------------------------------------------------------------------------------- 1 | import Divider from './divider.vue'; 2 | 3 | export default Divider; -------------------------------------------------------------------------------- /src/components/drawer/index.js: -------------------------------------------------------------------------------- 1 | import Drawer from './drawer.vue'; 2 | 3 | export default Drawer; -------------------------------------------------------------------------------- /src/components/dropdown-item/index.js: -------------------------------------------------------------------------------- 1 | import DropdownItem from '../dropdown/dropdown-item.vue'; 2 | 3 | export default DropdownItem; -------------------------------------------------------------------------------- /src/components/dropdown-menu/index.js: -------------------------------------------------------------------------------- 1 | import DropdownMenu from '../dropdown/dropdown-menu.vue'; 2 | 3 | export default DropdownMenu; -------------------------------------------------------------------------------- /src/components/dropdown/dropdown-item.vue: -------------------------------------------------------------------------------- 1 | 4 | 56 | -------------------------------------------------------------------------------- /src/components/dropdown/dropdown-menu.vue: -------------------------------------------------------------------------------- 1 | 4 | 9 | -------------------------------------------------------------------------------- /src/components/dropdown/index.js: -------------------------------------------------------------------------------- 1 | import Dropdown from './dropdown.vue'; 2 | import DropdownMenu from './dropdown-menu.vue'; 3 | import DropdownItem from './dropdown-item.vue'; 4 | 5 | Dropdown.Menu = DropdownMenu; 6 | Dropdown.Item = DropdownItem; 7 | export default Dropdown; -------------------------------------------------------------------------------- /src/components/footer/index.js: -------------------------------------------------------------------------------- 1 | import Footer from '../layout/footer.vue'; 2 | 3 | export default Footer; -------------------------------------------------------------------------------- /src/components/form-item/index.js: -------------------------------------------------------------------------------- 1 | import FormItem from '../form/form-item.vue'; 2 | 3 | export default FormItem; -------------------------------------------------------------------------------- /src/components/form/index.js: -------------------------------------------------------------------------------- 1 | import Form from './form.vue'; 2 | import FormItem from './form-item.vue'; 3 | 4 | Form.Item = FormItem; 5 | export default Form; -------------------------------------------------------------------------------- /src/components/grid/index.js: -------------------------------------------------------------------------------- 1 | import Row from './row.vue'; 2 | import Col from './col.vue'; 3 | 4 | export { Row, Col }; -------------------------------------------------------------------------------- /src/components/header/index.js: -------------------------------------------------------------------------------- 1 | import Header from '../layout/header.vue'; 2 | 3 | export default Header; -------------------------------------------------------------------------------- /src/components/i18n/index.js: -------------------------------------------------------------------------------- 1 | import locale from '../../locale/index'; 2 | 3 | export default locale.i18n; -------------------------------------------------------------------------------- /src/components/icon/icon.vue: -------------------------------------------------------------------------------- 1 | 4 | 52 | -------------------------------------------------------------------------------- /src/components/icon/index.js: -------------------------------------------------------------------------------- 1 | import Icon from './icon.vue'; 2 | export default Icon; -------------------------------------------------------------------------------- /src/components/input-number/index.js: -------------------------------------------------------------------------------- 1 | import InputNumber from './input-number.vue'; 2 | export default InputNumber; -------------------------------------------------------------------------------- /src/components/input/index.js: -------------------------------------------------------------------------------- 1 | import Input from './input.vue'; 2 | export default Input; -------------------------------------------------------------------------------- /src/components/layout/content.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/components/layout/footer.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/components/layout/header.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/components/layout/index.js: -------------------------------------------------------------------------------- 1 | import Layout from './layout.vue'; 2 | import Header from './header.vue'; 3 | import Sider from './sider.vue'; 4 | import Content from './content.vue'; 5 | import Footer from './footer.vue'; 6 | 7 | Layout.Header = Header; 8 | Layout.Sider = Sider; 9 | Layout.Content = Content; 10 | Layout.Footer = Footer; 11 | 12 | export default Layout; -------------------------------------------------------------------------------- /src/components/layout/layout.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/components/list/index.js: -------------------------------------------------------------------------------- 1 | import List from './list.vue'; 2 | import ListItem from './list-item.vue'; 3 | import ListItemMeta from './list-item-meta.vue'; 4 | 5 | List.Item = ListItem; 6 | List.Item.Meta = ListItemMeta; 7 | 8 | export default List; 9 | -------------------------------------------------------------------------------- /src/components/list/list-item-meta.vue: -------------------------------------------------------------------------------- 1 | 14 | 36 | -------------------------------------------------------------------------------- /src/components/loading-bar/loading-bar.js: -------------------------------------------------------------------------------- 1 | import LoadingBar from './loading-bar.vue'; 2 | import Vue from 'vue'; 3 | 4 | LoadingBar.newInstance = properties => { 5 | const _props = properties || {}; 6 | 7 | const Instance = new Vue({ 8 | data: _props, 9 | render (h) { 10 | return h(LoadingBar, { 11 | props: _props 12 | }); 13 | } 14 | }); 15 | 16 | const component = Instance.$mount(); 17 | document.body.appendChild(component.$el); 18 | const loading_bar = Instance.$children[0]; 19 | 20 | return { 21 | update (options) { 22 | if ('percent' in options) { 23 | loading_bar.percent = options.percent; 24 | } 25 | if (options.status) { 26 | loading_bar.status = options.status; 27 | } 28 | if ('show' in options) { 29 | loading_bar.show = options.show; 30 | } 31 | }, 32 | component: loading_bar, 33 | destroy () { 34 | document.body.removeChild(document.getElementsByClassName('ivu-loading-bar')[0]); 35 | } 36 | }; 37 | }; 38 | 39 | export default LoadingBar; 40 | -------------------------------------------------------------------------------- /src/components/locale/index.js: -------------------------------------------------------------------------------- 1 | import locale from '../../locale/index'; 2 | 3 | export default locale.use; -------------------------------------------------------------------------------- /src/components/menu-group/index.js: -------------------------------------------------------------------------------- 1 | import MenuGroup from '../menu/menu-group.vue'; 2 | 3 | export default MenuGroup; -------------------------------------------------------------------------------- /src/components/menu-item/index.js: -------------------------------------------------------------------------------- 1 | import MenuItem from '../menu/menu-item.vue'; 2 | 3 | export default MenuItem; -------------------------------------------------------------------------------- /src/components/menu/index.js: -------------------------------------------------------------------------------- 1 | import Menu from './menu.vue'; 2 | import MenuGroup from './menu-group.vue'; 3 | import MenuItem from './menu-item.vue'; 4 | import Submenu from './submenu.vue'; 5 | 6 | Menu.Group = MenuGroup; 7 | Menu.Item = MenuItem; 8 | Menu.Sub = Submenu; 9 | 10 | export default Menu; -------------------------------------------------------------------------------- /src/components/menu/menu-group.vue: -------------------------------------------------------------------------------- 1 | 7 | 34 | -------------------------------------------------------------------------------- /src/components/menu/mixin.js: -------------------------------------------------------------------------------- 1 | import { findComponentUpward, findComponentsUpward } from '../../utils/assist'; 2 | export default { 3 | data () { 4 | return { 5 | menu: findComponentUpward(this, 'Menu') 6 | }; 7 | }, 8 | computed: { 9 | hasParentSubmenu () { 10 | return !!findComponentUpward(this, 'Submenu'); 11 | }, 12 | parentSubmenuNum () { 13 | return findComponentsUpward(this, 'Submenu').length; 14 | }, 15 | mode () { 16 | return this.menu.mode; 17 | } 18 | } 19 | }; 20 | -------------------------------------------------------------------------------- /src/components/modal/index.js: -------------------------------------------------------------------------------- 1 | import Modal from './confirm'; 2 | 3 | let modalInstance; 4 | 5 | function getModalInstance (render = undefined, lockScroll = true) { 6 | modalInstance = modalInstance || Modal.newInstance({ 7 | closable: false, 8 | maskClosable: false, 9 | footerHide: true, 10 | render: render, 11 | lockScroll 12 | }); 13 | 14 | return modalInstance; 15 | } 16 | 17 | function confirm (options) { 18 | const render = ('render' in options) ? options.render : undefined; 19 | const lockScroll = ('lockScroll' in options) ? options.lockScroll : true; 20 | let instance = getModalInstance(render, lockScroll); 21 | 22 | options.onRemove = function () { 23 | modalInstance = null; 24 | }; 25 | 26 | instance.show(options); 27 | } 28 | 29 | Modal.info = function (props = {}) { 30 | props.icon = 'info'; 31 | props.showCancel = false; 32 | return confirm(props); 33 | }; 34 | 35 | Modal.success = function (props = {}) { 36 | props.icon = 'success'; 37 | props.showCancel = false; 38 | return confirm(props); 39 | }; 40 | 41 | Modal.warning = function (props = {}) { 42 | props.icon = 'warning'; 43 | props.showCancel = false; 44 | return confirm(props); 45 | }; 46 | 47 | Modal.error = function (props = {}) { 48 | props.icon = 'error'; 49 | props.showCancel = false; 50 | return confirm(props); 51 | }; 52 | 53 | Modal.confirm = function (props = {}) { 54 | props.icon = 'confirm'; 55 | props.showCancel = true; 56 | return confirm(props); 57 | }; 58 | 59 | Modal.remove = function () { 60 | if (!modalInstance) { // at loading status, remove after Cancel 61 | return false; 62 | } 63 | 64 | const instance = getModalInstance(); 65 | 66 | instance.remove(); 67 | }; 68 | 69 | export default Modal; 70 | -------------------------------------------------------------------------------- /src/components/modal/mixins-scrollbar.js: -------------------------------------------------------------------------------- 1 | // used for Modal & $Spin & Drawer 2 | import { getScrollBarSize } from '../../utils/assist'; 3 | export default { 4 | props: { 5 | lockScroll: { 6 | type: Boolean, 7 | default: true 8 | } 9 | }, 10 | methods: { 11 | checkScrollBar () { 12 | let fullWindowWidth = window.innerWidth; 13 | if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8 14 | const documentElementRect = document.documentElement.getBoundingClientRect(); 15 | fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left); 16 | } 17 | this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth; 18 | if (this.bodyIsOverflowing) { 19 | this.scrollBarWidth = getScrollBarSize(); 20 | } 21 | }, 22 | checkMaskInVisible () { 23 | let masks = document.getElementsByClassName('ivu-modal-mask') || []; 24 | return Array.from(masks).every(m => m.style.display === 'none' || m.classList.contains('fade-leave-to')); 25 | }, 26 | setScrollBar () { 27 | if (this.bodyIsOverflowing && this.scrollBarWidth !== undefined) { 28 | document.body.style.paddingRight = `${this.scrollBarWidth}px`; 29 | } 30 | }, 31 | resetScrollBar () { 32 | document.body.style.paddingRight = ''; 33 | }, 34 | addScrollEffect () { 35 | if (!this.lockScroll) return; 36 | this.checkScrollBar(); 37 | this.setScrollBar(); 38 | document.body.style.overflow = 'hidden'; 39 | }, 40 | removeScrollEffect() { 41 | if (!this.lockScroll) return; 42 | if (this.checkMaskInVisible()) { 43 | document.body.style.overflow = ''; 44 | this.resetScrollBar(); 45 | } 46 | } 47 | } 48 | }; 49 | -------------------------------------------------------------------------------- /src/components/option-group/index.js: -------------------------------------------------------------------------------- 1 | import OptionGroup from '../select/option-group.vue'; 2 | 3 | export default OptionGroup; -------------------------------------------------------------------------------- /src/components/option/index.js: -------------------------------------------------------------------------------- 1 | import Option from '../select/option.vue'; 2 | 3 | export default Option; -------------------------------------------------------------------------------- /src/components/options/index.js: -------------------------------------------------------------------------------- 1 | import Options from '../page/options.vue'; 2 | export default Options; -------------------------------------------------------------------------------- /src/components/page/index.js: -------------------------------------------------------------------------------- 1 | import Page from './page.vue'; 2 | export default Page; -------------------------------------------------------------------------------- /src/components/panel/index.js: -------------------------------------------------------------------------------- 1 | import Panel from '../collapse/panel.vue'; 2 | 3 | export default Panel; -------------------------------------------------------------------------------- /src/components/poptip/index.js: -------------------------------------------------------------------------------- 1 | import Poptip from './poptip.vue'; 2 | 3 | export default Poptip; -------------------------------------------------------------------------------- /src/components/progress/index.js: -------------------------------------------------------------------------------- 1 | import Progress from './progress.vue'; 2 | export default Progress; -------------------------------------------------------------------------------- /src/components/radio-group/index.js: -------------------------------------------------------------------------------- 1 | import RadioGroup from '../radio/radio-group.vue'; 2 | 3 | export default RadioGroup; -------------------------------------------------------------------------------- /src/components/radio/index.js: -------------------------------------------------------------------------------- 1 | import Radio from './radio.vue'; 2 | import RadioGroup from './radio-group.vue'; 3 | 4 | Radio.Group = RadioGroup; 5 | export default Radio; -------------------------------------------------------------------------------- /src/components/rate/index.js: -------------------------------------------------------------------------------- 1 | import Rate from './rate.vue'; 2 | export default Rate; -------------------------------------------------------------------------------- /src/components/row/index.js: -------------------------------------------------------------------------------- 1 | import Row from '../grid/row.vue'; 2 | 3 | export default Row; -------------------------------------------------------------------------------- /src/components/scroll/index.js: -------------------------------------------------------------------------------- 1 | import Scroll from './scroll.vue'; 2 | 3 | export default Scroll; 4 | -------------------------------------------------------------------------------- /src/components/scroll/loading-component.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 43 | -------------------------------------------------------------------------------- /src/components/select/functional-options.vue: -------------------------------------------------------------------------------- 1 | 33 | -------------------------------------------------------------------------------- /src/components/select/index.js: -------------------------------------------------------------------------------- 1 | import Select from './select.vue'; 2 | import Option from './option.vue'; 3 | import OptionGroup from './option-group.vue'; 4 | 5 | export { Select, Option, OptionGroup }; 6 | 7 | export default Select; -------------------------------------------------------------------------------- /src/components/select/option-group.vue: -------------------------------------------------------------------------------- 1 | 9 | 52 | -------------------------------------------------------------------------------- /src/components/select/utils.js: -------------------------------------------------------------------------------- 1 | export function debounce(fn) { 2 | let waiting; 3 | return function() { 4 | if (waiting) return; 5 | waiting = true; 6 | const context = this, 7 | args = arguments; 8 | const later = function() { 9 | waiting = false; 10 | fn.apply(context, args); 11 | }; 12 | this.$nextTick(later); 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /src/components/sider/index.js: -------------------------------------------------------------------------------- 1 | import Sider from '../layout/sider.vue'; 2 | 3 | export default Sider; -------------------------------------------------------------------------------- /src/components/slider/index.js: -------------------------------------------------------------------------------- 1 | import Slider from './slider.vue'; 2 | 3 | export default Slider; -------------------------------------------------------------------------------- /src/components/slider/marker.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'SliderMarker', 3 | props: { 4 | mark: { 5 | type: [String, Object] 6 | } 7 | }, 8 | render (h) { 9 | let label = typeof this.mark === 'string' ? this.mark : [this.mark.label]; 10 | 11 | return h('div', { 12 | class: 'ivu-slider-marks-item', 13 | style: this.mark.style || {} 14 | }, label); 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /src/components/spin/index.js: -------------------------------------------------------------------------------- 1 | import Spin from './spin.js'; 2 | 3 | let spinInstance; 4 | 5 | function getSpinInstance (render = undefined) { 6 | spinInstance = spinInstance || Spin.newInstance({ 7 | render: render 8 | }); 9 | 10 | return spinInstance; 11 | } 12 | 13 | function loading (options) { 14 | const render = ('render' in options) ? options.render : undefined; 15 | let instance = getSpinInstance(render); 16 | 17 | instance.show(options); 18 | } 19 | 20 | Spin.show = function (props = {}) { 21 | return loading(props); 22 | }; 23 | Spin.hide = function () { 24 | if (!spinInstance) return false; 25 | 26 | const instance = getSpinInstance(); 27 | 28 | instance.remove(() => { 29 | spinInstance = null; 30 | }); 31 | }; 32 | 33 | export default Spin; -------------------------------------------------------------------------------- /src/components/split/index.js: -------------------------------------------------------------------------------- 1 | import Split from './split.vue'; 2 | export default Split; 3 | -------------------------------------------------------------------------------- /src/components/split/trigger.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 40 | -------------------------------------------------------------------------------- /src/components/step/index.js: -------------------------------------------------------------------------------- 1 | import Step from '../steps/step.vue'; 2 | 3 | export default Step; -------------------------------------------------------------------------------- /src/components/steps/index.js: -------------------------------------------------------------------------------- 1 | import Steps from './steps.vue'; 2 | import Step from './step.vue'; 3 | 4 | Steps.Step = Step; 5 | export default Steps; -------------------------------------------------------------------------------- /src/components/submenu/index.js: -------------------------------------------------------------------------------- 1 | import Submenu from '../menu/submenu.vue'; 2 | 3 | export default Submenu; -------------------------------------------------------------------------------- /src/components/switch/index.js: -------------------------------------------------------------------------------- 1 | import Switch from './switch.vue'; 2 | export default Switch; -------------------------------------------------------------------------------- /src/components/tab-pane/index.js: -------------------------------------------------------------------------------- 1 | import TabPane from '../tabs/pane.vue'; 2 | 3 | export default TabPane; -------------------------------------------------------------------------------- /src/components/table/expand.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'TableExpand', 3 | functional: true, 4 | props: { 5 | row: Object, 6 | render: Function, 7 | index: Number, 8 | column: { 9 | type: Object, 10 | default: null 11 | } 12 | }, 13 | render: (h, ctx) => { 14 | const params = { 15 | row: ctx.props.row, 16 | index: ctx.props.index 17 | }; 18 | if (ctx.props.column) params.column = ctx.props.column; 19 | return ctx.props.render(h, params); 20 | } 21 | }; -------------------------------------------------------------------------------- /src/components/table/header.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'TableRenderHeader', 3 | functional: true, 4 | props: { 5 | render: Function, 6 | column: Object, 7 | index: Number 8 | }, 9 | render: (h, ctx) => { 10 | const params = { 11 | column: ctx.props.column, 12 | index: ctx.props.index 13 | }; 14 | return ctx.props.render(h, params); 15 | } 16 | }; -------------------------------------------------------------------------------- /src/components/table/index.js: -------------------------------------------------------------------------------- 1 | import Table from './table.vue'; 2 | export default Table; -------------------------------------------------------------------------------- /src/components/table/mixin.js: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: { 3 | alignCls (column, row = {}) { 4 | let cellClassName = ''; 5 | if (row.cellClassName && column.key && row.cellClassName[column.key]) { 6 | cellClassName = row.cellClassName[column.key]; 7 | } 8 | return [ 9 | `${this.prefixCls}-column-${column.__id}`, 10 | { 11 | [`${cellClassName}`]: cellClassName, // cell className 12 | [`${column.className}`]: column.className, // column className 13 | [`${this.prefixCls}-column-${column.align}`]: column.align, 14 | [`${this.prefixCls}-hidden`]: (this.fixed === 'left' && column.fixed !== 'left') || (this.fixed === 'right' && column.fixed !== 'right') || (!this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right')) 15 | } 16 | ]; 17 | }, 18 | isPopperShow (column) { 19 | return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right')); 20 | }, 21 | setCellWidth (column) { 22 | let width = ''; 23 | if (column.width) { 24 | width = column.width; 25 | } else if (this.columnsWidth[column._index]) { 26 | width = this.columnsWidth[column._index].width; 27 | } 28 | if (width === '0') width = ''; 29 | return width; 30 | } 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /src/components/table/slot.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'TableSlot', 3 | functional: true, 4 | inject: ['tableRoot'], 5 | props: { 6 | row: Object, 7 | index: Number, 8 | column: { 9 | type: Object, 10 | default: null 11 | }, 12 | display: { 13 | type: String, 14 | default: 'block' 15 | } 16 | }, 17 | render: (h, ctx) => { 18 | return h('div', { 19 | 'class': { 20 | 'ivu-table-cell-slot': true, 21 | 'ivu-table-cell-slot-inline': ctx.props.display === 'inline', 22 | 'ivu-table-cell-slot-inline-block': ctx.props.display === 'inline-block' 23 | } 24 | }, ctx.injections.tableRoot.$scopedSlots[ctx.props.column.slot]({ 25 | row: ctx.props.row, 26 | column: ctx.props.column, 27 | index: ctx.props.index 28 | })); 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /src/components/table/summary.vue: -------------------------------------------------------------------------------- 1 | 19 | 47 | -------------------------------------------------------------------------------- /src/components/table/table-tr.vue: -------------------------------------------------------------------------------- 1 | 5 | 47 | -------------------------------------------------------------------------------- /src/components/tabs/index.js: -------------------------------------------------------------------------------- 1 | import Tabs from './tabs.vue'; 2 | import Pane from './pane.vue'; 3 | 4 | Tabs.Pane = Pane; 5 | export default Tabs; -------------------------------------------------------------------------------- /src/components/tag/index.js: -------------------------------------------------------------------------------- 1 | import Tag from './tag.vue'; 2 | export default Tag; -------------------------------------------------------------------------------- /src/components/time-picker/index.js: -------------------------------------------------------------------------------- 1 | import TimePicker from '../date-picker/picker/time-picker'; 2 | export default TimePicker; -------------------------------------------------------------------------------- /src/components/time/index.js: -------------------------------------------------------------------------------- 1 | import Time from './time.vue'; 2 | export default Time; -------------------------------------------------------------------------------- /src/components/timeline-item/index.js: -------------------------------------------------------------------------------- 1 | import TimelineItem from '../timeline/timeline-item.vue'; 2 | 3 | export default TimelineItem; -------------------------------------------------------------------------------- /src/components/timeline/index.js: -------------------------------------------------------------------------------- 1 | import Timeline from './timeline.vue'; 2 | import TimelineItem from './timeline-item.vue'; 3 | 4 | Timeline.Item = TimelineItem; 5 | export default Timeline; -------------------------------------------------------------------------------- /src/components/timeline/timeline.vue: -------------------------------------------------------------------------------- 1 | 6 | 29 | -------------------------------------------------------------------------------- /src/components/tooltip/index.js: -------------------------------------------------------------------------------- 1 | import Tooltip from './tooltip.vue'; 2 | 3 | export default Tooltip; -------------------------------------------------------------------------------- /src/components/transfer/index.js: -------------------------------------------------------------------------------- 1 | import Transfer from './transfer.vue'; 2 | export default Transfer; -------------------------------------------------------------------------------- /src/components/transfer/operation.vue: -------------------------------------------------------------------------------- 1 | 21 | 45 | -------------------------------------------------------------------------------- /src/components/transfer/search.vue: -------------------------------------------------------------------------------- 1 | 11 | 49 | -------------------------------------------------------------------------------- /src/components/tree/index.js: -------------------------------------------------------------------------------- 1 | import Tree from './tree.vue'; 2 | export default Tree; -------------------------------------------------------------------------------- /src/components/tree/render.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'RenderCell', 3 | functional: true, 4 | props: { 5 | render: Function, 6 | data: Object, 7 | node: Array 8 | }, 9 | render: (h, ctx) => { 10 | const params = { 11 | root: ctx.props.node[0], 12 | node: ctx.props.node[1], 13 | data: ctx.props.data 14 | }; 15 | return ctx.props.render(h, params); 16 | } 17 | }; -------------------------------------------------------------------------------- /src/components/upload/index.js: -------------------------------------------------------------------------------- 1 | import Upload from './upload.vue'; 2 | 3 | export default Upload; -------------------------------------------------------------------------------- /src/directives/clickoutside.js: -------------------------------------------------------------------------------- 1 | export default { 2 | bind (el, binding, vnode) { 3 | function documentHandler (e) { 4 | if (el.contains(e.target)) { 5 | return false; 6 | } 7 | if (binding.expression) { 8 | binding.value(e); 9 | } 10 | } 11 | el.__vueClickOutside__ = documentHandler; 12 | document.addEventListener('click', documentHandler); 13 | }, 14 | update () { 15 | 16 | }, 17 | unbind (el, binding) { 18 | document.removeEventListener('click', el.__vueClickOutside__); 19 | delete el.__vueClickOutside__; 20 | } 21 | }; -------------------------------------------------------------------------------- /src/locale/format.js: -------------------------------------------------------------------------------- 1 | /** 2 | * String format template 3 | * - Inspired: 4 | * https://github.com/Matt-Esch/string-template/index.js 5 | */ 6 | 7 | const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g; 8 | 9 | export default function() { 10 | // const { hasOwn } = Vue.util; 11 | function hasOwn (obj, key) { 12 | return Object.prototype.hasOwnProperty.call(obj, key); 13 | } 14 | 15 | /** 16 | * template 17 | * 18 | * @param {String} string 19 | * @param {Array} ...args 20 | * @return {String} 21 | */ 22 | 23 | function template(string, ...args) { 24 | if (args.length === 1 && typeof args[0] === 'object') { 25 | args = args[0]; 26 | } 27 | 28 | if (!args || !args.hasOwnProperty) { 29 | args = {}; 30 | } 31 | 32 | return string.replace(RE_NARGS, (match, prefix, i, index) => { 33 | let result; 34 | 35 | if (string[index - 1] === '{' && 36 | string[index + match.length] === '}') { 37 | return i; 38 | } else { 39 | result = hasOwn(args, i) ? args[i] : null; 40 | if (result === null || result === undefined) { 41 | return ''; 42 | } 43 | 44 | return result; 45 | } 46 | }); 47 | } 48 | 49 | return template; 50 | } 51 | -------------------------------------------------------------------------------- /src/locale/index.js: -------------------------------------------------------------------------------- 1 | import defaultLang from './lang/zh-CN'; 2 | import Vue from 'vue'; 3 | import deepmerge from 'deepmerge'; 4 | import Format from './format'; 5 | 6 | const format = Format(Vue); 7 | let lang = defaultLang; 8 | let merged = false; 9 | let i18nHandler = function() { 10 | const vuei18n = Object.getPrototypeOf(this || Vue).$t; 11 | if (typeof vuei18n === 'function' && !!Vue.locale) { 12 | if (!merged) { 13 | merged = true; 14 | Vue.locale( 15 | Vue.config.lang, 16 | deepmerge(lang, Vue.locale(Vue.config.lang) || {}, { clone: true }) 17 | ); 18 | } 19 | return vuei18n.apply(this, arguments); 20 | } 21 | }; 22 | 23 | export const t = function(path, options) { 24 | let value = i18nHandler.apply(this, arguments); 25 | if (value !== null && value !== undefined) return value; 26 | 27 | const array = path.split('.'); 28 | let current = lang; 29 | 30 | for (let i = 0, j = array.length; i < j; i++) { 31 | const property = array[i]; 32 | value = current[property]; 33 | if (i === j - 1) return format(value, options); 34 | if (!value) return ''; 35 | current = value; 36 | } 37 | return ''; 38 | }; 39 | 40 | export const use = function(l) { 41 | lang = l || lang; 42 | }; 43 | 44 | export const i18n = function(fn) { 45 | i18nHandler = fn || i18nHandler; 46 | }; 47 | 48 | export default { use, t, i18n }; -------------------------------------------------------------------------------- /src/locale/lang.js: -------------------------------------------------------------------------------- 1 | // using with vue-i18n in CDN 2 | /*eslint-disable */ 3 | import Vue from 'vue'; 4 | const isServer = Vue.prototype.$isServer; 5 | 6 | export default function (lang) { 7 | if (!isServer) { 8 | if (typeof window.iview !== 'undefined') { 9 | if (!('langs' in iview)) { 10 | iview.langs = {}; 11 | } 12 | iview.langs[lang.i.locale] = lang; 13 | } 14 | } 15 | }; 16 | /*eslint-enable */ -------------------------------------------------------------------------------- /src/mixins/emitter.js: -------------------------------------------------------------------------------- 1 | function broadcast(componentName, eventName, params) { 2 | this.$children.forEach(child => { 3 | const name = child.$options.name; 4 | 5 | if (name === componentName) { 6 | child.$emit.apply(child, [eventName].concat(params)); 7 | } else { 8 | // todo 如果 params 是空数组，接收到的会是 undefined 9 | broadcast.apply(child, [componentName, eventName].concat([params])); 10 | } 11 | }); 12 | } 13 | export default { 14 | methods: { 15 | dispatch(componentName, eventName, params) { 16 | let parent = this.$parent || this.$root; 17 | let name = parent.$options.name; 18 | 19 | while (parent && (!name || name !== componentName)) { 20 | parent = parent.$parent; 21 | 22 | if (parent) { 23 | name = parent.$options.name; 24 | } 25 | } 26 | if (parent) { 27 | parent.$emit.apply(parent, [eventName].concat(params)); 28 | } 29 | }, 30 | broadcast(componentName, eventName, params) { 31 | broadcast.call(this, componentName, eventName, params); 32 | } 33 | } 34 | }; -------------------------------------------------------------------------------- /src/mixins/form.js: -------------------------------------------------------------------------------- 1 | export default { 2 | inject: { 3 | FormInstance: { 4 | default: '' 5 | } 6 | }, 7 | computed: { 8 | itemDisabled () { 9 | let state = this.disabled; 10 | if (!state && this.FormInstance) state = this.FormInstance.disabled; 11 | return state; 12 | } 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /src/mixins/locale.js: -------------------------------------------------------------------------------- 1 | import { t } from '../locale'; 2 | 3 | export default { 4 | methods: { 5 | t(...args) { 6 | return t.apply(this, args); 7 | } 8 | } 9 | }; 10 | -------------------------------------------------------------------------------- /src/styles/README.md: -------------------------------------------------------------------------------- 1 | # 样式库说明 2 | 3 | ## 目录 4 | 5 | |-- animation (动画) 6 | 7 | |-- common (全局样式) 8 | 9 | |-- components (组件样式) 10 | 11 | |-- mixins (混入) 12 | -------------------------------------------------------------------------------- /src/styles/animation/ease.less: -------------------------------------------------------------------------------- 1 | .ease-motion(@className, @keyframeName) { 2 | .make-motion(@className, @keyframeName); 3 | .@{className}-enter-active, .@{className}-appear { 4 | opacity: 0; 5 | animation-timing-function: linear; 6 | animation-duration: @transition-time; 7 | } 8 | .@{className}-leave-active { 9 | animation-timing-function: linear; 10 | animation-duration: @transition-time; 11 | } 12 | } 13 | 14 | .ease-motion(ease, ivuEase); 15 | 16 | @keyframes ivuEaseIn { 17 | 0% { 18 | opacity: 0; 19 | transform: scale(0.9); 20 | } 21 | 100% { 22 | opacity: 1; 23 | transform: scale(1); 24 | } 25 | } 26 | 27 | @keyframes ivuEaseOut { 28 | 0% { 29 | opacity: 1; 30 | transform: scale(1); 31 | } 32 | 100% { 33 | opacity: 0; 34 | transform: scale(0.9); 35 | } 36 | } -------------------------------------------------------------------------------- /src/styles/animation/fade.less: -------------------------------------------------------------------------------- 1 | .fade-motion(@className, @keyframeName) { 2 | .make-motion(@className, @keyframeName, @animation-time-quick); 3 | .@{className}-enter-active, .@{className}-appear { 4 | opacity: 0; 5 | animation-timing-function: linear; 6 | } 7 | .@{className}-leave-active { 8 | animation-timing-function: linear; 9 | } 10 | } 11 | 12 | .fade-motion(fade, ivuFade); 13 | 14 | @keyframes ivuFadeIn { 15 | 0% { 16 | opacity: 0; 17 | } 18 | 100% { 19 | opacity: 1; 20 | } 21 | } 22 | 23 | @keyframes ivuFadeOut { 24 | 0% { 25 | opacity: 1; 26 | } 27 | 100% { 28 | opacity: 0; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/styles/animation/index.less: -------------------------------------------------------------------------------- 1 | .motion-common(@time) { 2 | animation-duration: @time; 3 | animation-fill-mode: both; 4 | } 5 | 6 | .make-motion(@className, @keyframeName, @time: @animation-time) { 7 | .@{className}-enter-active, .@{className}-appear { 8 | .motion-common(@time); 9 | animation-play-state: paused; 10 | } 11 | .@{className}-leave-active { 12 | .motion-common(@time); 13 | animation-play-state: paused; 14 | } 15 | .@{className}-enter-active, .@{className}-appear { 16 | animation-name: ~"@{keyframeName}In"; 17 | animation-play-state: running; 18 | } 19 | .@{className}-leave-active { 20 | animation-name: ~"@{keyframeName}Out"; 21 | animation-play-state: running; 22 | } 23 | } 24 | 25 | @import "fade"; 26 | @import "move"; 27 | @import "ease"; 28 | @import "slide"; 29 | 30 | .collapse-transition { 31 | transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out, @transition-time padding-bottom ease-in-out; 32 | } 33 | -------------------------------------------------------------------------------- /src/styles/common/article.less: -------------------------------------------------------------------------------- 1 | .ivu-article { 2 | h1{ 3 | font-size: 26px; 4 | font-weight: normal; 5 | } 6 | h2{ 7 | font-size: 20px; 8 | font-weight: normal; 9 | } 10 | h3{ 11 | font-size: 16px; 12 | font-weight: normal; 13 | } 14 | h4{ 15 | font-size: 14px; 16 | font-weight: normal; 17 | } 18 | h5{ 19 | font-size: 12px; 20 | font-weight: normal; 21 | } 22 | h6{ 23 | font-size: 12px; 24 | font-weight: normal; 25 | } 26 | 27 | blockquote{ 28 | padding: 5px 5px 3px 10px; 29 | line-height: 1.5; 30 | border-left: 4px solid #ddd; 31 | margin-bottom: 20px; 32 | color: #666; 33 | font-size: 14px; 34 | } 35 | 36 | ul:not([class^="ivu-"]){ 37 | padding-left: 40px; 38 | list-style-type: disc; 39 | } 40 | li:not([class^="ivu-"]){ 41 | margin-bottom: 5px; 42 | font-size: 14px; 43 | } 44 | ul ul:not([class^="ivu-"]), ol ul:not([class^="ivu-"]){ 45 | list-style-type: circle; 46 | } 47 | 48 | p{ 49 | margin: 5px; 50 | font-size: 14px; 51 | } 52 | 53 | a:not([class^="ivu-"])[target="_blank"]:after{ 54 | content: "\F3F2"; 55 | font-family: Ionicons; 56 | color: #aaa; 57 | margin-left: 3px; 58 | } 59 | } -------------------------------------------------------------------------------- /src/styles/common/base.less: -------------------------------------------------------------------------------- 1 | @import "normalize"; 2 | 3 | * { 4 | box-sizing: border-box; 5 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 6 | } 7 | 8 | *:before, 9 | *:after { 10 | box-sizing: border-box; 11 | } 12 | 13 | body { 14 | font-family: @font-family; 15 | font-size: @font-size-base; 16 | line-height: @line-height-base; 17 | color: @text-color; 18 | background-color: @body-background; 19 | -webkit-font-smoothing: antialiased; 20 | -moz-osx-font-smoothing: grayscale; 21 | } 22 | 23 | body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 24 | margin: 0; 25 | padding: 0; 26 | } 27 | 28 | button, input, select, textarea { 29 | font-family: inherit; 30 | font-size: inherit; 31 | line-height: inherit; 32 | } 33 | 34 | input::-ms-clear, input::-ms-reveal { 35 | display: none; 36 | } 37 | 38 | a { 39 | color: @link-color; 40 | background: transparent; 41 | text-decoration: none; 42 | outline: none; 43 | cursor: pointer; 44 | transition: color @transition-time ease; 45 | 46 | &:hover { 47 | color: @link-hover-color; 48 | } 49 | 50 | &:active { 51 | color: @link-active-color; 52 | } 53 | 54 | &:active, 55 | &:hover { 56 | outline: 0; 57 | text-decoration: none; 58 | } 59 | 60 | &[disabled] { 61 | color: #ccc; 62 | cursor: @cursor-disabled; 63 | pointer-events: none; 64 | } 65 | } 66 | 67 | code, 68 | kbd, 69 | pre, 70 | samp { 71 | font-family: @code-family; 72 | } 73 | -------------------------------------------------------------------------------- /src/styles/common/iconfont/_ionicons-font.less: -------------------------------------------------------------------------------- 1 | // Ionicons Font Path 2 | // -------------------------- 3 | 4 | @font-face { 5 | font-family: @ionicons-font-family; 6 | src: url("@{ionicons-font-path}/ionicons.woff2?v=@{ionicons-version}") format("woff2"), 7 | url("@{ionicons-font-path}/ionicons.woff?v=@{ionicons-version}") format("woff"), 8 | url("@{ionicons-font-path}/ionicons.ttf?v=@{ionicons-version}") format("truetype"), 9 | url("@{ionicons-font-path}/ionicons.svg?v=@{ionicons-version}#Ionicons") format("svg"); 10 | font-weight: normal; 11 | font-style: normal; 12 | } 13 | 14 | .ivu-icon() { 15 | display: inline-block; 16 | font-family: @ionicons-font-family; 17 | speak: none; 18 | font-style: normal; 19 | font-weight: normal; 20 | font-variant: normal; 21 | text-transform: none; 22 | text-rendering: optimizeLegibility; 23 | line-height: 1; 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | vertical-align: -0.125em; 27 | text-align: center; 28 | } 29 | 30 | .ivu-icon { 31 | .ivu-icon(); 32 | } 33 | -------------------------------------------------------------------------------- /src/styles/common/iconfont/_ionicons-variables.less: -------------------------------------------------------------------------------- 1 | /* 2 | Ionicons, v2.0.0 3 | Created by Ben Sperry for the Ionic Framework, http://ionicons.com/ 4 | https://twitter.com/benjsperry https://twitter.com/ionicframework 5 | MIT License: https://github.com/driftyco/ionicons 6 | */ 7 | // Ionicons Variables 8 | // -------------------------- 9 | 10 | @ionicons-font-path: "./fonts"; 11 | @ionicons-font-family: "Ionicons"; 12 | @ionicons-version: "3.0.0"; 13 | @ionicons-prefix: ivu-icon-; 14 | -------------------------------------------------------------------------------- /src/styles/common/iconfont/fonts/ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/view-design/ViewUI/5619a557d035748d554fe4fbff6f66b0f1bf75b3/src/styles/common/iconfont/fonts/ionicons.ttf -------------------------------------------------------------------------------- /src/styles/common/iconfont/fonts/ionicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/view-design/ViewUI/5619a557d035748d554fe4fbff6f66b0f1bf75b3/src/styles/common/iconfont/fonts/ionicons.woff -------------------------------------------------------------------------------- /src/styles/common/iconfont/fonts/ionicons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/view-design/ViewUI/5619a557d035748d554fe4fbff6f66b0f1bf75b3/src/styles/common/iconfont/fonts/ionicons.woff2 -------------------------------------------------------------------------------- /src/styles/common/iconfont/ionicons.less: -------------------------------------------------------------------------------- 1 | @import "_ionicons-variables"; 2 | @import "_ionicons-font"; 3 | @import "_ionicons-icons"; 4 | -------------------------------------------------------------------------------- /src/styles/common/index.less: -------------------------------------------------------------------------------- 1 | @import "base"; 2 | @import "iconfont/ionicons"; 3 | @import "layout"; 4 | @import "article"; -------------------------------------------------------------------------------- /src/styles/components/affix.less: -------------------------------------------------------------------------------- 1 | .ivu-affix { 2 | position: fixed; 3 | z-index: @zindex-affix; 4 | } 5 | -------------------------------------------------------------------------------- /src/styles/components/auto-complete.less: -------------------------------------------------------------------------------- 1 | @auto-complete-prefix-cls: ~"@{css-prefix}auto-complete"; 2 | 3 | .@{auto-complete-prefix-cls} { 4 | .@{select-prefix-cls} { 5 | &-not-found{ 6 | display: none; 7 | } 8 | } 9 | .@{icon-prefix-cls}-ios-close-circle{ 10 | display: none; 11 | font-size: @font-size-base; 12 | } 13 | &:hover .@{icon-prefix-cls}-ios-close-circle{ 14 | display: inline-block; 15 | } 16 | &.@{select-dropdown-prefix-cls} { 17 | max-height: none; 18 | } 19 | &:focus, & div{ 20 | outline: none; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/styles/components/avatar.less: -------------------------------------------------------------------------------- 1 | @avatar-prefix-cls: ~"@{css-prefix}avatar"; 2 | 3 | .@{avatar-prefix-cls} { 4 | display: inline-block; 5 | text-align: center; 6 | background: @avatar-bg; 7 | color: @avatar-color; 8 | white-space: nowrap; 9 | position: relative; 10 | overflow: hidden; 11 | vertical-align: middle; 12 | 13 | &-image{ 14 | background: transparent; 15 | } 16 | 17 | .ivu-icon{ 18 | position: relative; 19 | top: -1px; 20 | } 21 | 22 | .avatar-size(@avatar-size-base, @avatar-font-size-base); 23 | 24 | &-large { 25 | .avatar-size(@avatar-size-lg, @avatar-font-size-lg); 26 | .ivu-icon{ 27 | position: relative; 28 | top: -2px; 29 | } 30 | } 31 | 32 | &-small { 33 | .avatar-size(@avatar-size-sm, @avatar-font-size-sm); 34 | } 35 | 36 | &-square { 37 | border-radius: @avatar-border-radius; 38 | } 39 | 40 | & > img { 41 | width: 100%; 42 | height: 100%; 43 | } 44 | } 45 | 46 | .avatar-size(@size, @font-size) { 47 | width: @size; 48 | height: @size; 49 | line-height: @size; 50 | border-radius: 50%; 51 | 52 | //& > * { 53 | // line-height: @size; 54 | //} 55 | 56 | &.@{avatar-prefix-cls}-icon { 57 | font-size: @font-size; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/styles/components/back-top.less: -------------------------------------------------------------------------------- 1 | @backtop-prefix-cls: ~"@{css-prefix}back-top"; 2 | 3 | .@{backtop-prefix-cls} { 4 | z-index: @zindex-back-top; 5 | position: fixed; 6 | cursor: pointer; 7 | display: none; 8 | 9 | &.@{backtop-prefix-cls}-show { 10 | display: block; 11 | } 12 | 13 | &-inner { 14 | background-color: rgba(0,0,0,.6); 15 | border-radius: 2px; 16 | box-shadow: 0 1px 3px rgba(0,0,0,.2); 17 | transition: all @transition-time @ease-in-out; 18 | 19 | &:hover { 20 | background-color: rgba(0,0,0,.7); 21 | } 22 | } 23 | 24 | i{ 25 | color: #fff; 26 | font-size: 24px; 27 | padding: 8px 12px; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/styles/components/breadcrumb.less: -------------------------------------------------------------------------------- 1 | @breadcrumb-prefix-cls: ~"@{css-prefix}breadcrumb"; 2 | 3 | .@{breadcrumb-prefix-cls} { 4 | color: #999; 5 | font-size: @font-size-base; 6 | 7 | a { 8 | color: @text-color; 9 | transition: color @transition-time @ease-in-out; 10 | &:hover { 11 | color: tint(@primary-color, 20%); 12 | } 13 | } 14 | 15 | & > span:last-child { 16 | font-weight: bold; 17 | color: @text-color; 18 | } 19 | 20 | & > span:last-child &-item-separator { 21 | display: none; 22 | } 23 | 24 | &-item-separator { 25 | margin: 0 8px; 26 | color: @border-color-base; 27 | } 28 | 29 | &-item-link { 30 | > .ivu-icon + span { 31 | margin-left: 4px; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/styles/components/card.less: -------------------------------------------------------------------------------- 1 | @card-prefix-cls: ~"@{css-prefix}card"; 2 | 3 | .@{card-prefix-cls}{ 4 | display: block; 5 | background: #fff; 6 | border-radius: @border-radius-small; 7 | font-size: @font-size-base; 8 | position: relative; 9 | //overflow: hidden; 10 | transition: all @transition-time @ease-in-out; 11 | 12 | &-bordered { 13 | border: 1px solid @border-color-base; 14 | border-color: @border-color-split; 15 | } 16 | 17 | &-shadow{ 18 | box-shadow: @shadow-card; 19 | } 20 | 21 | &:hover { 22 | box-shadow: @shadow-base; 23 | border-color: #eee; 24 | } 25 | &&-dis-hover:hover{ 26 | box-shadow: none; 27 | border-color: transparent; 28 | } 29 | 30 | &&-dis-hover&-bordered:hover{ 31 | border-color: @border-color-split; 32 | } 33 | 34 | &&-shadow:hover{ 35 | box-shadow: @shadow-card; 36 | } 37 | 38 | &-head { 39 | .content-header; 40 | } 41 | 42 | &-extra { 43 | position: absolute; 44 | right: 16px; 45 | top: 14px; 46 | } 47 | 48 | &-body { 49 | padding: 16px; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/styles/components/cell.less: -------------------------------------------------------------------------------- 1 | @cell-prefix-cls: ~"@{css-prefix}cell"; 2 | 3 | 4 | .@{cell-prefix-cls} { 5 | position: relative; 6 | overflow: hidden; 7 | 8 | &-link, &-link:hover, &-link:active{ 9 | color: inherit; 10 | } 11 | 12 | &-icon{ 13 | display: inline-block; 14 | margin-right: 4px; 15 | font-size: @font-size-base; 16 | vertical-align: middle; 17 | &:empty{ 18 | display: none 19 | } 20 | } 21 | &-main{ 22 | display: inline-block; 23 | vertical-align: middle; 24 | } 25 | &-title{ 26 | line-height: 24px; 27 | font-size: @font-size-base; 28 | } 29 | &-label{ 30 | line-height: 1.2; 31 | font-size: @font-size-small; 32 | color: @subsidiary-color; 33 | } 34 | &-selected &-label{ 35 | color: inherit; 36 | } 37 | 38 | &-selected, &&-selected:hover{ 39 | background: ~`colorPalette("@{primary-color}", 1)`; 40 | } 41 | 42 | &-footer{ 43 | display: inline-block; 44 | position: absolute; 45 | transform: translateY(-50%); 46 | top: 50%; 47 | right: 16px; 48 | color: @text-color; 49 | } 50 | &-with-link &-footer{ 51 | right: 32px; 52 | } 53 | &-selected &-footer{ 54 | color: inherit; 55 | } 56 | 57 | &-arrow{ 58 | display: inline-block; 59 | position: absolute; 60 | transform: translateY(-50%); 61 | top: 50%; 62 | right: 16px; 63 | font-size: @font-size-base; 64 | } 65 | 66 | &:focus{ 67 | background: @background-color-select-hover; 68 | outline: none; 69 | } 70 | &-selected:focus{ 71 | background: shade(@selected-color, 10%); 72 | } 73 | } 74 | .select-item(@cell-prefix-cls, @cell-prefix-cls); -------------------------------------------------------------------------------- /src/styles/components/checkbox.less: -------------------------------------------------------------------------------- 1 | @checkbox-prefix-cls: ~"@{css-prefix}checkbox"; 2 | .checkboxFn(); -------------------------------------------------------------------------------- /src/styles/components/circle.less: -------------------------------------------------------------------------------- 1 | @circle-prefix-cls: ~"@{css-prefix}chart-circle"; 2 | 3 | .@{circle-prefix-cls}{ 4 | display: inline-block; 5 | position: relative; 6 | 7 | &-inner { 8 | width: 100%; 9 | text-align: center; 10 | position: absolute; 11 | left: 0; 12 | top: 50%; 13 | transform: translateY(-50%); 14 | line-height: 1; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/styles/components/collapse.less: -------------------------------------------------------------------------------- 1 | @collapse-prefix-cls: ~"@{css-prefix}collapse"; 2 | 3 | .@{collapse-prefix-cls}{ 4 | background-color: @background-color-base; 5 | border-radius: 3px; 6 | border: 1px solid @border-color-base; 7 | 8 | &-simple{ 9 | border-left: none; 10 | border-right: none; 11 | background-color: #fff; 12 | border-radius: 0; 13 | } 14 | 15 | & > &-item{ 16 | border-top: 1px solid @border-color-base; 17 | &:first-child { 18 | border-top: 0; 19 | } 20 | 21 | > .@{collapse-prefix-cls}-header{ 22 | height: 38px; 23 | line-height: 38px; 24 | padding-left: 16px; 25 | color: #666; 26 | cursor: pointer; 27 | position: relative; 28 | border-bottom: 1px solid transparent; 29 | transition: all @transition-time @ease-in-out; 30 | 31 | > i{ 32 | transition: transform @transition-time @ease-in-out; 33 | margin-right: 14px; 34 | } 35 | } 36 | } 37 | & > &-item&-item-active > &-header{ 38 | border-bottom: 1px solid @border-color-base; 39 | } 40 | &-simple > &-item&-item-active > &-header{ 41 | border-bottom: 1px solid transparent; 42 | } 43 | & > &-item&-item-active > &-header > i{ 44 | transform: rotate(90deg); 45 | } 46 | 47 | &-content{ 48 | //display: none; 49 | //overflow: hidden; 50 | color: @text-color; 51 | padding: 0 16px; 52 | background-color: #fff; 53 | 54 | & > &-box { 55 | padding-top: 16px; 56 | padding-bottom: 16px; 57 | } 58 | } 59 | &-simple > &-item > &-content > &-content-box{ 60 | padding-top: 0; 61 | } 62 | &-item-active > &-content{ 63 | //display: block; 64 | } 65 | &-item:last-child { 66 | > .@{collapse-prefix-cls}-content { 67 | border-radius: 0 0 3px 3px; 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/styles/components/dropdown.less: -------------------------------------------------------------------------------- 1 | @dropdown-prefix-cls: ~"@{css-prefix}dropdown"; 2 | @dropdown-item-prefix-cls: ~"@{dropdown-prefix-cls}-item"; 3 | 4 | .@{dropdown-prefix-cls} { 5 | display: inline-block; 6 | //position: relative; 7 | 8 | .@{select-dropdown-prefix-cls} { 9 | overflow: visible; 10 | max-height: none; 11 | } 12 | .@{dropdown-prefix-cls} { 13 | width: 100%; 14 | } 15 | 16 | &-rel{ 17 | //display: inline-block; 18 | position: relative; 19 | &-user-select-none{ 20 | -webkit-user-select: none; 21 | -moz-user-select: none; 22 | user-select: none; 23 | } 24 | } 25 | 26 | &-menu{ 27 | min-width: 100px; 28 | } 29 | 30 | &-transfer{ 31 | width: auto; 32 | } 33 | &-item-selected, &-item&-item-selected:hover{ 34 | background: ~`colorPalette("@{primary-color}", 1)`; 35 | } 36 | } 37 | 38 | .select-item(@dropdown-prefix-cls, @dropdown-item-prefix-cls); -------------------------------------------------------------------------------- /src/styles/components/index.less: -------------------------------------------------------------------------------- 1 | @import "button"; 2 | @import "affix"; 3 | @import "back-top"; 4 | @import "badge"; 5 | @import "circle"; 6 | @import "spin"; 7 | @import "alert"; 8 | @import "collapse"; 9 | @import "card"; 10 | @import "message"; 11 | @import "notice"; 12 | @import "radio"; 13 | @import "checkbox"; 14 | @import "switch"; 15 | @import "input-number"; 16 | @import "scroll"; 17 | @import "tag"; 18 | @import "layout"; 19 | @import "loading-bar"; 20 | @import "progress"; 21 | @import "timeline"; 22 | @import "page"; 23 | @import "steps"; 24 | @import "modal"; 25 | @import "select"; 26 | @import "select-dropdown"; 27 | @import "split"; 28 | @import "tooltip"; 29 | @import "poptip"; 30 | @import "input"; 31 | @import "slider"; 32 | @import "cascader"; 33 | @import "transfer"; 34 | @import "table"; 35 | @import "dropdown"; 36 | @import "tabs"; 37 | @import "menu"; 38 | @import "date-picker"; 39 | @import "time-picker"; 40 | @import "form"; 41 | @import "carousel"; 42 | @import "rate"; 43 | @import "upload"; 44 | @import "tree"; 45 | @import "avatar"; 46 | @import "color-picker"; 47 | @import "auto-complete"; 48 | @import "divider"; 49 | @import "anchor"; 50 | @import "time"; 51 | @import "cell"; 52 | @import "drawer"; 53 | @import "breadcrumb"; 54 | @import "list"; 55 | -------------------------------------------------------------------------------- /src/styles/components/loading-bar.less: -------------------------------------------------------------------------------- 1 | @loading-bar-prefix-cls: ~"@{css-prefix}loading-bar"; 2 | 3 | .@{loading-bar-prefix-cls} { 4 | width: 100%; 5 | position: fixed; 6 | top: 0; 7 | left: 0; 8 | right: 0; 9 | z-index: @zindex-loading-bar; 10 | 11 | &-inner { 12 | transition: width @transition-time linear; 13 | 14 | &-color-primary { 15 | background-color: @primary-color; 16 | } 17 | 18 | &-failed-color-error { 19 | background-color: @error-color; 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/styles/components/scroll.less: -------------------------------------------------------------------------------- 1 | @scroll-prefix-cls: ~"@{css-prefix}scroll"; 2 | 3 | .@{scroll-prefix-cls} { 4 | &-wrapper { 5 | width: auto; 6 | margin: 0 auto; 7 | position: relative; 8 | outline: none; 9 | } 10 | 11 | &-container { 12 | overflow-y: scroll; 13 | } 14 | 15 | @keyframes ani-stop-slide { 16 | from { 17 | overflow-y: hidden; 18 | tansform:translateZ(0); 19 | } 20 | to { 21 | overflow-y: scroll; 22 | tansform:translateZ(0); 23 | } 24 | } 25 | 26 | &-container-loading { 27 | animation: ani-stop-slide 1.5s; 28 | } 29 | 30 | &-content { 31 | opacity: 1; 32 | transition: opacity 0.5s; 33 | } 34 | 35 | &-content-loading { 36 | opacity: 0.5; 37 | } 38 | 39 | &-loader { 40 | text-align: center; 41 | padding: 0; 42 | transition: padding 0.5s; 43 | } 44 | } 45 | 46 | .@{scroll-prefix-cls}-loader-wrapper { 47 | padding: 5px 0; 48 | height: 0; 49 | background-color: inherit; 50 | transform: scale(0); 51 | transition: opacity .3s, transform .5s, height .5s; 52 | 53 | &-active { 54 | height: 40px; 55 | transform: scale(1); 56 | } 57 | 58 | @keyframes ani-demo-spin { 59 | from { 60 | transform: rotate(0deg); 61 | } 62 | 50% { 63 | transform: rotate(180deg); 64 | } 65 | to { 66 | transform: rotate(360deg); 67 | } 68 | } 69 | 70 | .@{scroll-prefix-cls}-spinner { 71 | position: relative; 72 | } 73 | 74 | .@{scroll-prefix-cls}-spinner-icon { 75 | animation: ani-demo-spin 1s linear infinite; 76 | } 77 | } 78 | 79 | @media (max-width: @screen-sm) { 80 | .@{scroll-prefix-cls} { 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/styles/components/select-dropdown.less: -------------------------------------------------------------------------------- 1 | @select-dropdown-prefix-cls: ~"@{css-prefix}select-dropdown"; 2 | @transfer-no-max-height: ~"@{css-prefix}transfer-no-max-height"; 3 | 4 | .@{select-dropdown-prefix-cls} { 5 | width: inherit; 6 | max-height: 200px; 7 | overflow: auto; 8 | margin: 5px 0; 9 | padding: 5px 0; 10 | background-color: #fff; 11 | box-sizing: border-box; 12 | //border: 1px solid @border-color-split; 13 | border-radius: @btn-border-radius; 14 | //box-shadow: 0 1px 3px rgba(0,0,0,.2); 15 | box-shadow: @shadow-base; 16 | position: absolute; 17 | z-index: @zindex-select; 18 | &-transfer{ 19 | z-index: @zindex-transfer; 20 | width: auto; 21 | } 22 | &.@{transfer-no-max-height} { 23 | max-height: none; 24 | } 25 | } 26 | .@{modal-prefix-cls} { 27 | .@{select-dropdown-prefix-cls} { 28 | position: absolute !important; 29 | } 30 | } -------------------------------------------------------------------------------- /src/styles/components/time.less: -------------------------------------------------------------------------------- 1 | @time-prefix-cls: ~"@{css-prefix}time"; 2 | 3 | .@{time-prefix-cls} { 4 | &-with-hash{ 5 | cursor: pointer; 6 | &:hover{ 7 | text-decoration: underline; 8 | } 9 | } 10 | } -------------------------------------------------------------------------------- /src/styles/copyright.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * iView 3 | * Web: https://www.iviewui.com 4 | * Github: https://github.com/iview/iview 5 | * Author: Aresn 6 | */ -------------------------------------------------------------------------------- /src/styles/index.less: -------------------------------------------------------------------------------- 1 | @import "./custom"; 2 | @import "./mixins/index"; 3 | @import "./common/index"; 4 | @import "./animation/index"; 5 | @import "./components/index"; 6 | -------------------------------------------------------------------------------- /src/styles/mixins/caret.less: -------------------------------------------------------------------------------- 1 | // sortable 2 | .sortable() { 3 | display: inline-block; 4 | width: 14px; 5 | height: 12px; 6 | margin-top: -1px; 7 | vertical-align: middle; 8 | overflow: hidden; 9 | cursor: pointer; 10 | position: relative; 11 | 12 | i { 13 | display: block; 14 | height: 6px; 15 | line-height: 6px; 16 | overflow: hidden; 17 | position: absolute; 18 | color: @btn-disable-color; 19 | transition: color @transition-time @ease-in-out; 20 | font-size: @font-size-large; 21 | 22 | &:hover{ 23 | color: inherit; 24 | } 25 | 26 | &.on{ 27 | color: @primary-color; 28 | } 29 | 30 | &:first-child{ 31 | top: 0; 32 | } 33 | &:last-child{ 34 | bottom: 0; 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /src/styles/mixins/clearfix.less: -------------------------------------------------------------------------------- 1 | .clearfix() { 2 | zoom: 1; 3 | &:before, 4 | &:after { 5 | content: ""; 6 | display: table; 7 | } 8 | &:after { 9 | clear: both; 10 | visibility: hidden; 11 | font-size: 0; 12 | height: 0; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/styles/mixins/close.less: -------------------------------------------------------------------------------- 1 | .close-base(@top: 0, @icon-font-size: 22px) { 2 | font-size: @icon-font-size; 3 | color: @legend-color; 4 | transition: color @transition-time ease; 5 | position: relative; 6 | top: @top; 7 | &:hover { 8 | color: #444; 9 | } 10 | } -------------------------------------------------------------------------------- /src/styles/mixins/common.less: -------------------------------------------------------------------------------- 1 | .placeholder(@color: @input-placeholder-color) { 2 | // Firefox 3 | &::-moz-placeholder { 4 | color: @color; 5 | opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 6 | } 7 | // Internet Explorer 10+ 8 | &:-ms-input-placeholder { 9 | color: @color; 10 | } 11 | // Safari and Chrome 12 | &::-webkit-input-placeholder { 13 | color: @color; 14 | } 15 | } 16 | 17 | // for select and input like component's arrow 18 | .inner-arrow() { 19 | position: absolute; 20 | top: 50%; 21 | right: 8px; 22 | line-height: 1; 23 | transform: translateY(-50%); 24 | font-size: @font-size-base; 25 | color: @subsidiary-color; 26 | transition: all @transition-time @ease-in-out; 27 | } 28 | 29 | .reset-component() { 30 | font-family: @font-family; 31 | font-size: @font-size-base; 32 | line-height: @line-height-base; 33 | color: @text-color; 34 | box-sizing: border-box; 35 | margin: 0; 36 | padding: 0; 37 | list-style: none; 38 | } -------------------------------------------------------------------------------- /src/styles/mixins/content.less: -------------------------------------------------------------------------------- 1 | @icon-prefix-cls: ~"@{css-prefix}icon"; 2 | 3 | .content-header() { 4 | border-bottom: 1px solid @border-color-split; 5 | padding: 14px 16px; 6 | line-height: 1; 7 | 8 | p, 9 | &-inner 10 | { 11 | display: inline-block; 12 | width: 100%; 13 | height: 20px; 14 | line-height: 20px; 15 | font-size: @font-size-large; 16 | color: @title-color; 17 | font-weight: 500; 18 | overflow: hidden; 19 | text-overflow: ellipsis; 20 | white-space: nowrap; 21 | } 22 | p i, p span{ 23 | //vertical-align: middle; 24 | } 25 | } 26 | 27 | .content-close(@top: 0, @icon-font-size: 22px) { 28 | font-size: @font-size-small; 29 | position: absolute; 30 | right: 8px; 31 | top: 8px; 32 | overflow: hidden; 33 | cursor: pointer; 34 | 35 | .@{icon-prefix-cls}-ios-close { 36 | .close-base(@top, @icon-font-size); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/styles/mixins/index.less: -------------------------------------------------------------------------------- 1 | @import "common"; 2 | @import "clearfix"; 3 | @import "button"; 4 | @import "layout"; 5 | @import "size"; 6 | @import "loading"; 7 | @import "close"; 8 | @import "checkbox"; 9 | @import "input"; 10 | @import "mask"; 11 | @import "content"; // card、modal 12 | @import "tooltip"; 13 | @import "select"; 14 | @import "caret"; -------------------------------------------------------------------------------- /src/styles/mixins/layout.less: -------------------------------------------------------------------------------- 1 | @row-prefix-cls: ~"@{css-prefix}row"; 2 | @col-prefix-cls: ~"@{css-prefix}col"; 3 | 4 | // mixins for grid system 5 | 6 | .loop-grid-columns(@index, @class) when (@index > 0) { 7 | .@{col-prefix-cls}-span@{class}-@{index} { 8 | display: block; 9 | flex: 0 0 percentage((@index / @grid-columns)); 10 | max-width: percentage((@index / @grid-columns)); 11 | } 12 | .@{col-prefix-cls}@{class}-push-@{index} { 13 | left: percentage((@index / @grid-columns)); 14 | } 15 | .@{col-prefix-cls}@{class}-pull-@{index} { 16 | right: percentage((@index / @grid-columns)); 17 | } 18 | .@{col-prefix-cls}@{class}-offset-@{index} { 19 | margin-left: percentage((@index / @grid-columns)); 20 | } 21 | .@{col-prefix-cls}@{class}-order-@{index} { 22 | order: @index; 23 | } 24 | .loop-grid-columns((@index - 1), @class); 25 | } 26 | 27 | .loop-grid-columns(@index, @class) when (@index = 0) { 28 | .@{col-prefix-cls}-span@{class}-@{index} { 29 | display: none; 30 | } 31 | .@{col-prefix-cls}-push-@{index} { 32 | left: auto; 33 | } 34 | .@{col-prefix-cls}-pull-@{index} { 35 | right: auto; 36 | } 37 | .@{col-prefix-cls}@{class}-push-@{index} { 38 | left: auto; 39 | } 40 | .@{col-prefix-cls}@{class}-pull-@{index} { 41 | right: auto; 42 | } 43 | .@{col-prefix-cls}@{class}-offset-@{index} { 44 | margin-left: 0; 45 | } 46 | .@{col-prefix-cls}@{class}-order-@{index} { 47 | order: 0; 48 | } 49 | } 50 | 51 | .make-grid(@class: ~'') { 52 | .loop-grid-columns(@grid-columns, @class); 53 | } 54 | -------------------------------------------------------------------------------- /src/styles/mixins/loading.less: -------------------------------------------------------------------------------- 1 | // Loading for loop 2 | .ivu-load-loop{ 3 | animation: ani-load-loop 1s linear infinite; 4 | } 5 | 6 | @keyframes ani-load-loop { 7 | from { transform: rotate(0deg);} 8 | 50% { transform: rotate(180deg);} 9 | to { transform: rotate(360deg);} 10 | } 11 | -------------------------------------------------------------------------------- /src/styles/mixins/mask.less: -------------------------------------------------------------------------------- 1 | .mask() { 2 | position: fixed; 3 | top: 0; 4 | bottom: 0; 5 | left: 0; 6 | right: 0; 7 | background-color: rgba(55, 55, 55, 0.6); 8 | height: 100%; 9 | z-index: @zindex-modal; 10 | 11 | &-hidden { 12 | display: none; 13 | } 14 | } -------------------------------------------------------------------------------- /src/styles/mixins/size.less: -------------------------------------------------------------------------------- 1 | .size(@width; @height) { 2 | width: @width; 3 | height: @height; 4 | } 5 | 6 | .square(@size) { 7 | .size(@size; @size); 8 | } 9 | 10 | // fix chrome 12px bug, support ie 11 | .iconfont-size-under-12px(@size, @rotate: 0deg) { 12 | display: inline-block; 13 | @font-scale: unit(@size / @font-size-base); 14 | font-size: @font-size-base; 15 | font-size: ~"@{size} \9"; // ie8-9 16 | transform: scale(@font-scale) rotate(@rotate); 17 | :root & { 18 | font-size: @font-size-base; // reset ie9 and above 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/utils/csv.js: -------------------------------------------------------------------------------- 1 | /* 2 | inspired by https://www.npmjs.com/package/react-csv-downloader 3 | now removed from Github 4 | */ 5 | 6 | const newLine = '\r\n'; 7 | const appendLine = (content, row, { separator, quoted }) => { 8 | const line = row.map(data => { 9 | if (!quoted) return data; 10 | // quote data 11 | data = typeof data === 'string' ? data.replace(/"/g, '"') : data; 12 | return `"${data}"`; 13 | }); 14 | content.push(line.join(separator)); 15 | }; 16 | 17 | const defaults = { 18 | separator: ',', 19 | quoted: false 20 | }; 21 | 22 | export default function csv(columns, datas, options, noHeader = false) { 23 | options = Object.assign({}, defaults, options); 24 | let columnOrder; 25 | const content = []; 26 | const column = []; 27 | 28 | if (columns) { 29 | columnOrder = columns.map(v => { 30 | if (typeof v === 'string') return v; 31 | if (!noHeader) { 32 | column.push(typeof v.title !== 'undefined' ? v.title : v.key); 33 | } 34 | return v.key; 35 | }); 36 | if (column.length > 0) appendLine(content, column, options); 37 | } else { 38 | columnOrder = []; 39 | datas.forEach(v => { 40 | if (!Array.isArray(v)) { 41 | columnOrder = columnOrder.concat(Object.keys(v)); 42 | } 43 | }); 44 | if (columnOrder.length > 0) { 45 | columnOrder = columnOrder.filter((value, index, self) => self.indexOf(value) === index); 46 | if (!noHeader) appendLine(content, columnOrder, options); 47 | } 48 | } 49 | 50 | if (Array.isArray(datas)) { 51 | datas.forEach(row => { 52 | if (!Array.isArray(row)) { 53 | row = columnOrder.map(k => (typeof row[k] !== 'undefined' ? row[k] : '')); 54 | } 55 | appendLine(content, row, options); 56 | }); 57 | } 58 | return content.join(newLine); 59 | } 60 | -------------------------------------------------------------------------------- /src/utils/dom.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | const isServer = Vue.prototype.$isServer; 3 | 4 | /* istanbul ignore next */ 5 | export const on = (function() { 6 | if (!isServer && document.addEventListener) { 7 | return function(element, event, handler, useCapture = false) { 8 | if (element && event && handler) { 9 | element.addEventListener(event, handler, useCapture); 10 | } 11 | }; 12 | } else { 13 | return function(element, event, handler) { 14 | if (element && event && handler) { 15 | element.attachEvent('on' + event, handler); 16 | } 17 | }; 18 | } 19 | })(); 20 | 21 | /* istanbul ignore next */ 22 | export const off = (function() { 23 | if (!isServer && document.removeEventListener) { 24 | return function(element, event, handler, useCapture = false) { 25 | if (element && event) { 26 | element.removeEventListener(event, handler, useCapture); 27 | } 28 | }; 29 | } else { 30 | return function(element, event, handler) { 31 | if (element && event) { 32 | element.detachEvent('on' + event, handler); 33 | } 34 | }; 35 | } 36 | })(); 37 | -------------------------------------------------------------------------------- /src/utils/random_str.js: -------------------------------------------------------------------------------- 1 | // 生成随机字符串 2 | export default function (len = 32) { 3 | const $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'; 4 | const maxPos = $chars.length; 5 | let str = ''; 6 | for (let i = 0; i < len; i++) { 7 | str += $chars.charAt(Math.floor(Math.random() * maxPos)); 8 | } 9 | return str; 10 | } 11 | -------------------------------------------------------------------------------- /src/utils/transfer-queue.js: -------------------------------------------------------------------------------- 1 | let transferIndex = 0; 2 | let lastVisibleIndex = 0; 3 | 4 | function transferIncrease() { 5 | transferIndex++; 6 | } 7 | 8 | function lastVisibleIncrease() { 9 | lastVisibleIndex++; 10 | } 11 | 12 | export { transferIndex, transferIncrease, lastVisibleIndex, lastVisibleIncrease }; -------------------------------------------------------------------------------- /test/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "../.eslintrc.json" 4 | ], 5 | "globals": { 6 | "expect": true 7 | }, 8 | "env": { 9 | "node": true, 10 | "mocha": true 11 | }, 12 | "rules": { 13 | "indent": ["error",2, { "SwitchCase": 1 }] 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /test/unit/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | Vue.config.productionTip = false; 3 | 4 | // require all test files (files that ends with .spec.js) 5 | const testsContext = require.context('./specs', true, /\.spec$/); 6 | testsContext.keys().forEach(testsContext); 7 | 8 | // require all src files except main.js for coverage. 9 | // you can also change this to match only the subset of files that 10 | // you want coverage for. 11 | // const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/); 12 | // @todo 13 | const srcContext = require.context('../../src/components/breadcrumb', true, /^\.\/(?!styles.*?(\.less)?$)/); 14 | srcContext.keys().forEach(srcContext); 15 | -------------------------------------------------------------------------------- /test/unit/karma.conf.js: -------------------------------------------------------------------------------- 1 | // This is a karma config file. For more details see 2 | // http://karma-runner.github.io/0.13/config/configuration-file.html 3 | // we are also using it with karma-webpack 4 | // https://github.com/webpack/karma-webpack 5 | 6 | var webpackConfig = require('../../build/webpack.test.config.js'); 7 | 8 | module.exports = function (config) { 9 | config.set({ 10 | // to run in additional browsers: 11 | // 1. install corresponding karma launcher 12 | // http://karma-runner.github.io/0.13/config/browsers.html 13 | // 2. add it to the `browsers` array below. 14 | browsers: ['ChromeHeadless'], 15 | frameworks: ['mocha', 'sinon-chai'], 16 | reporters: ['spec', 'coverage'], 17 | files: ['./index.js'], 18 | preprocessors: { 19 | './index.js': ['webpack', 'sourcemap'] 20 | }, 21 | webpack: webpackConfig, 22 | webpackMiddleware: { 23 | noInfo: true, 24 | }, 25 | coverageReporter: { 26 | dir: './coverage', 27 | reporters: [ 28 | { type: 'lcov', subdir: '.' }, 29 | { type: 'text-summary' }, 30 | ] 31 | }, 32 | }); 33 | }; 34 | -------------------------------------------------------------------------------- /test/unit/specs/assets/locale-expects.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'de-DE': 'Oktober 2030', 3 | 'en-US': 'October 2030', 4 | 'es-ES': 'octubre 2030', 5 | 'fi-FI': 'lokakuu 2030', 6 | 'fr-FR': 'octobre 2030', 7 | 'id-ID': 'Oktober 2030', 8 | 'ja-JP': '2030年 10月', 9 | 'ko-KR': '2030년 10월', 10 | 'pt-BR': 'outubro de 2030', 11 | 'pt-PT': 'outubro de 2030', 12 | 'ru-RU': 'Октябрь 2030', 13 | 'sv-SE': 'oktober 2030', 14 | 'tr-TR': 'Ekim 2030', 15 | 'vi-VN': 'Tháng 10/2030', 16 | 'zh-CN': '2030年 10月', 17 | 'zh-TW': '2030年 10月' 18 | }; 19 | -------------------------------------------------------------------------------- /test/unit/specs/breadcrumb.spec.js: -------------------------------------------------------------------------------- 1 | import { createVue, destroyVM } from '../util'; 2 | 3 | describe('Breadcrumb.vue', () => { 4 | let vm; 5 | afterEach(() => { 6 | destroyVM(vm); 7 | }); 8 | it('create', done => { 9 | vm = createVue(` 10 | 11 | Home4 12 | Components 13 | Breadcrumb 14 | 15 | `); 16 | expect(vm.$el.querySelectorAll('.ivu-breadcrumb-item-link').length).to.equal(3); 17 | 18 | vm.$nextTick(_ => { 19 | // console.log(vm.$el.querySelector('.ivu-breadcrumb-item-separator').innerHTML); 20 | expect(vm.$el.querySelector('.ivu-breadcrumb-item-separator').innerHTML).to.equal('=>'); 21 | done(); 22 | }); 23 | }); 24 | }); -------------------------------------------------------------------------------- /test/unit/specs/table.spec.js: -------------------------------------------------------------------------------- 1 | import { createVue, destroyVM } from '../util'; 2 | import { csvA, csvB } from './assets/table/csvData.js'; 3 | 4 | const cleanCSV = (str) => str.split('\n').map(s => s.trim()).filter(Boolean).join('\n'); 5 | 6 | describe('Table.vue', () => { 7 | let vm; 8 | afterEach(() => { 9 | destroyVM(vm); 10 | }); 11 | 12 | describe('CSV export', () => { 13 | it('should export simple data to CSV - test A', done => { 14 | vm = createVue({ 15 | template: '
', 16 | data() { 17 | return csvA; 18 | }, 19 | mounted() { 20 | this.$refs.tableA.exportCsv({callback: data => { 21 | expect(cleanCSV(data)).to.equal(cleanCSV(this.expected)); 22 | expect(cleanCSV(data).length > 0).to.equal(true); 23 | done(); 24 | }}); 25 | } 26 | }); 27 | }); 28 | 29 | it('should export data with commas and line breaks to CSV - test B', done => { 30 | vm = createVue({ 31 | template: '
', 32 | data() { 33 | return csvB; 34 | }, 35 | mounted() { 36 | this.$refs.tableB.exportCsv({separator: ';', quoted: true, callback: data => { 37 | expect(cleanCSV(data)).to.equal(cleanCSV(this.expected)); 38 | expect(cleanCSV(data).length > 0).to.equal(true); 39 | done(); 40 | }}); 41 | } 42 | }); 43 | }); 44 | 45 | }); 46 | 47 | }); 48 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "experimentalDecorators": true, 10 | "esModuleInterop": true, 11 | "allowSyntheticDefaultImports": true, 12 | "sourceMap": true, 13 | "baseUrl": ".", 14 | "paths": { 15 | "@/*": ["src/*"] 16 | }, 17 | "lib": ["esnext", "dom", "dom.iterable", "scripthost"] 18 | }, 19 | "include": [ 20 | "types/*.ts", 21 | ], 22 | "exclude": ["node_modules"] 23 | } 24 | -------------------------------------------------------------------------------- /types/affix.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue from 'vue'; 6 | 7 | export declare class Affix extends Vue { 8 | /** 9 | * 距离窗口顶部达到指定偏移量后触发 10 | * @default 0 11 | */ 12 | 'offset-top'?: number; 13 | /** 14 | * 距离窗口底部达到指定偏移量后触发 15 | */ 16 | 'offset-bottom'?: number; 17 | /** 18 | * 在固定状态发生改变时触发 19 | * @param value true | false 20 | */ 21 | $emit(eventName: 'on-change', value: boolean): this; 22 | } -------------------------------------------------------------------------------- /types/alert.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Alert extends Vue { 8 | /** 9 | * 警告提示样式，可选值为info、success、warning、error 10 | * @default info 11 | */ 12 | type?: 'info' | 'success' | 'warning' | 'error'; 13 | /** 14 | * 是否可关闭 15 | * @default false 16 | */ 17 | closable?: boolean; 18 | /** 19 | * 是否显示图标 20 | * @default false 21 | */ 22 | 'show-icon'?: boolean; 23 | /** 24 | * 关闭时触发 25 | */ 26 | $emit(eventName: 'on-close', event: HTMLElement): this; 27 | /** 28 | * slot插槽对象 29 | */ 30 | $slots: { 31 | /** 32 | * 警告提示内容 33 | */ 34 | '': VNode[]; 35 | /** 36 | * 警告提示辅助性文字介绍 37 | */ 38 | desc: VNode[]; 39 | /** 40 | * 自定义图标内容 41 | */ 42 | icon: VNode[]; 43 | /** 44 | * 自定义关闭内容 45 | */ 46 | close: VNode[]; 47 | }; 48 | } -------------------------------------------------------------------------------- /types/anchor.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue from 'vue'; 6 | 7 | export declare class Anchor extends Vue { 8 | /** 9 | * 固定模式 10 | * @default true 11 | */ 12 | affix?: boolean; 13 | /** 14 | * 距离窗口顶部达到指定偏移量后触发 15 | * @default 0 16 | */ 17 | 'offset-top'?: number; 18 | /** 19 | * 距离窗口底部达到指定偏移量后触发 20 | */ 21 | 'offset-bottom'?: number; 22 | /** 23 | * 锚点区域边界，单位：px 24 | * @default 5 25 | */ 26 | bounds?: number; 27 | /** 28 | * 点击滚动的额外距离 29 | * @default 0 30 | */ 31 | 'scroll-offset'?: number; 32 | /** 33 | * 指定滚动的容器 34 | */ 35 | container?: string | HTMLElement; 36 | /** 37 | * 是否显示小圆点 38 | * @default false 39 | */ 40 | 'show-ink'?: boolean; 41 | /** 42 | * 点击锚点时触发，返回链接 43 | */ 44 | $emit(eventName: 'on-select', href: string): this; 45 | /** 46 | * 链接改变时触发，返回新链接和旧链接 47 | */ 48 | $emit(eventName: 'on-change', []): this; 49 | } 50 | 51 | export declare class AnchorLink extends Vue { 52 | /** 53 | * 锚点链接 54 | * @default 55 | */ 56 | href?: string; 57 | /** 58 | * 文字内容 59 | * @default 60 | */ 61 | title?: string; 62 | /** 63 | * 点击滚动的额外距离 64 | * @default 0 65 | */ 66 | 'scroll-offset'?: number; 67 | } -------------------------------------------------------------------------------- /types/auto-complete.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class AutoComplete extends Vue { 8 | /** 9 | * 绑定的值，可使用 v-model 双向绑定 10 | */ 11 | value?: string | number; 12 | /** 13 | * 自动完成的数据源 14 | * @default [] 15 | */ 16 | data?: string[] | number[]; 17 | /** 18 | * 是否可以清空选项 19 | * @default false 20 | */ 21 | clearable?: boolean; 22 | /** 23 | * 是否禁用 24 | * @default false 25 | */ 26 | disabled?: boolean; 27 | /** 28 | * 占位文本 29 | */ 30 | placeholder?: string; 31 | /** 32 | * 输入框尺寸，可选值为 large、small、default 或者不设置 33 | */ 34 | size?: '' | 'large' | 'small' | 'default'; 35 | /** 36 | * 输入框尾部图标 37 | */ 38 | icon?: string; 39 | /** 40 | * 是否根据输入项进行筛选。当其为一个函数时，会接收 value 和 option 两个参数， 41 | * 当 option 符合筛选条件时，应返回 true，反之则返回 false, 42 | * @default false 43 | */ 44 | 'filter-method'?: boolean | (() => boolean); 45 | /** 46 | * 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时， 47 | * 建议添加此属性，它将不受父级样式影响，从而达到更好的效果, 48 | * @default false 49 | */ 50 | transfer?: boolean; 51 | /** 52 | * 给表单元素设置 id，详见 Form 用法。 53 | */ 54 | 'element-id'?: string; 55 | /** 56 | * 选中 option，或 input 的 value 变化时，调用此函数 57 | */ 58 | $emit(eventName: 'on-change', value: string | number): this; 59 | /** 60 | * 被选中时调用，参数为选中项的 value 值 61 | */ 62 | $emit(eventName: 'on-select', value: string | number): this; 63 | /** 64 | * 搜索补全项的时候调用 65 | */ 66 | $emit(eventName: 'on-search', query: string): this; 67 | /** 68 | * 搜索补全项的时候调用 69 | */ 70 | $emit(eventName: 'on-focus', event: KeyboardEvent): this; 71 | /** 72 | * 搜索补全项的时候调用 73 | */ 74 | $emit(eventName: 'on-blur', event: KeyboardEvent): this; 75 | /** 76 | * 清空时触发 77 | */ 78 | $emit(eventName: 'on-clear'): this; 79 | } 80 | -------------------------------------------------------------------------------- /types/avatar.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue from 'vue'; 6 | 7 | export declare class Avatar extends Vue { 8 | /** 9 | * 指定头像的形状，可选值为 circle、square 10 | * @default circle 11 | */ 12 | shape?: 'circle' | 'square'; 13 | /** 14 | * 设置头像的大小，可选值为 large、small、default 15 | * @default default 16 | */ 17 | size?: 'large'|'small'|'default'; 18 | /** 19 | * 图片类头像的资源地址 20 | */ 21 | src?: string; 22 | /** 23 | * 设置头像的图标类型，参考 Icon 组件 24 | */ 25 | icon?: string; 26 | /** 27 | * 自定义图标 28 | */ 29 | 'custom-icon'?: string; 30 | /** 31 | * 在设置 src 且图片加载不成功时触发 32 | */ 33 | $emit(eventName: 'on-error', event: Event): this; 34 | } -------------------------------------------------------------------------------- /types/back-top.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue from 'vue'; 6 | 7 | export declare class BackTop extends Vue { 8 | /** 9 | * 页面滚动高度达到该值时才显示BackTop组件 10 | * @default 400 11 | */ 12 | height?: number; 13 | /** 14 | * 组件距离底部的距离 15 | * @default 30 16 | */ 17 | bottom?: number; 18 | /** 19 | * 组件距离右部的距离 20 | * @default 30 21 | */ 22 | right?: number; 23 | /** 24 | * 滚动动画持续时间，单位 毫秒 25 | * @default 1000 26 | */ 27 | duration?: number; 28 | /** 29 | * 点击按钮时触发 30 | */ 31 | $emit(eventName: 'on-click'): this; 32 | } 33 | -------------------------------------------------------------------------------- /types/badge.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue from 'vue'; 6 | 7 | export declare class Badge extends Vue { 8 | /** 9 | * 显示的数字，大于overflowCount时，显示${overflowCount}+，为 0 时隐藏 10 | */ 11 | count?: number | string; 12 | /** 13 | * 展示封顶的数字值 14 | * @default 99 15 | */ 16 | 'overflow-count'?: number | string; 17 | /** 18 | * 不展示数字，只有一个小红点，如需隐藏 dot ，需要设置count为 0 19 | * @default false 20 | */ 21 | dot?: boolean 22 | /** 23 | * 自定义的class名称，dot 模式下无效 24 | */ 25 | 'class-name'?: string; 26 | /** 27 | * 使用预设的颜色，可选值为 success、primary、normal、error、warning、info 28 | */ 29 | type?: 'success' | 'primary' | 'normal' | 'error' | 'warning' | 'info'; 30 | /** 31 | * 当数值为 0 时，是否展示 Badge 32 | * @default false 33 | */ 34 | 'show-zero'?: boolean; 35 | /** 36 | * 设置 Badge 为状态点，可选值为 success、processing、default、error、warning 37 | */ 38 | status?: 'success' | 'processing' | 'default' | 'error' | 'warning'; 39 | /** 40 | * 自定义内容，如果设置了 status，则为状态点的文本 41 | */ 42 | text?: string; 43 | /** 44 | * 设置状态点的位置偏移，格式为 [x, y] 45 | */ 46 | offset?: number[]; 47 | } -------------------------------------------------------------------------------- /types/breadcrumb.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Breadcrumb extends Vue { 8 | /** 9 | * 自定义分隔符 10 | * @default / 11 | */ 12 | separator?: string; 13 | } 14 | 15 | export declare class BreadcrumbItem extends Vue { 16 | /** 17 | * 链接，不传则没有链接 18 | */ 19 | to?: string | object; 20 | /** 21 | * 路由跳转时，开启 replace 将不会向 history 添加新记录 22 | * @default false 23 | */ 24 | replace?: boolean; 25 | /** 26 | * 相当于 a 链接的 target 属性 27 | * @default _self 28 | */ 29 | target?: '_blank' | '_self' | '_parent' | '_top'; 30 | /** 31 | * 同 vue-router append 32 | * @default false 33 | */ 34 | append?: boolean; 35 | } -------------------------------------------------------------------------------- /types/card.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Card extends Vue { 8 | /** 9 | * 是否显示边框，建议在灰色背景下使用 10 | * @default true 11 | */ 12 | 'bordered'?: boolean; 13 | /** 14 | * 禁用鼠标悬停显示阴影 15 | * @default false 16 | */ 17 | 'dis-hover'?: boolean; 18 | /** 19 | * 卡片阴影，建议在灰色背景下使用 20 | * @default false 21 | */ 22 | 'shadow'?: boolean; 23 | /** 24 | * 卡片内部间距，单位 px 25 | * @default 16 26 | */ 27 | 'padding'?: number; 28 | /** 29 | * 标题，2.12.0 新增 30 | */ 31 | title?: string; 32 | /** 33 | * 标题前的图标，2.12.0 新增 34 | */ 35 | icon?: string; 36 | /** 37 | * slot插槽对象 38 | */ 39 | $slots: { 40 | /** 41 | * 自定义卡片标题，如果是简单文字，可以使用

标签包裹 42 | */ 43 | title: VNode[]; 44 | /** 45 | * 额外显示的内容，默认位置在右上角 46 | */ 47 | extra: VNode[]; 48 | /** 49 | * 卡片主体内容 50 | */ 51 | '': VNode[]; 52 | }; 53 | } -------------------------------------------------------------------------------- /types/carousel.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue from 'vue'; 6 | 7 | export declare class Carousel extends Vue { 8 | /** 9 | * 幻灯片的索引，从 0 开始，可以使用 v-model 双向绑定数据 10 | * @default 0 11 | */ 12 | value?: number; 13 | /** 14 | * 走马灯的高度，可填 auto 或具体高度数值，单位 px 15 | * @default auto 16 | */ 17 | height?: string | number; 18 | /** 19 | * 是否开启循环 20 | * @default false 21 | */ 22 | loop?: boolean; 23 | /** 24 | * 是否自动切换 25 | */ 26 | autoplay?: boolean; 27 | /** 28 | * 自动切换的时间间隔，单位为毫秒 29 | * @default 2000 30 | */ 31 | 'autoplay-speed'?: number; 32 | /** 33 | * 指示器的位置，可选值为 inside （内部），outside（外部），none（不显示） 34 | * @default inside 35 | */ 36 | dots?: 'inside' | 'outside' | 'none'; 37 | /** 38 | * 是否显示圆形指示器 39 | * @default false 40 | */ 41 | 'radius-dot'?: boolean; 42 | /** 43 | * 指示器的触发方式，可选值为 click（点击），hover（悬停） 44 | * @default click 45 | */ 46 | trigger?: 'click' | 'hover'; 47 | /** 48 | * 切换箭头的显示时机，可选值为 hover（悬停），always（一直显示），never（不显示） 49 | * @default hover 50 | */ 51 | arrow?: 'hover' | 'always' | 'never'; 52 | /** 53 | * 动画效果 54 | * @default ease 55 | */ 56 | easing?: string; 57 | /** 58 | * 幻灯片切换时触发，目前激活的幻灯片的索引，原幻灯片的索引 59 | */ 60 | $emit(eventName: 'on-change', oldValue: number, value: number): this; 61 | } 62 | 63 | export declare class CarouselItem extends Vue { 64 | 65 | } -------------------------------------------------------------------------------- /types/cascader.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue from 'vue'; 6 | 7 | export declare class Cascader extends Vue { 8 | /** 9 | * 可选项的数据源，格式参照示例说明 10 | * @default [] 11 | */ 12 | data?: object[]; 13 | /** 14 | * 当前已选项的数据，格式参照示例说明 15 | * @default [] 16 | */ 17 | value?: object[]; 18 | /** 19 | * 选择后展示的函数，用于自定义显示格式 20 | * @default label => label.join(' / ') 21 | */ 22 | 'render-format'?: (label?: string[]) => string 23 | /** 24 | * 是否禁用选择器 25 | * @default false 26 | */ 27 | disabled?: boolean; 28 | /** 29 | * 是否支持清除 30 | * @default true 31 | */ 32 | clearable?: boolean; 33 | /** 34 | * 输入框占位符 35 | * @default 请选择 36 | */ 37 | placeholder?: string; 38 | /** 39 | * 次级菜单展开方式，可选值为 click 或 hover 40 | * @default click 41 | */ 42 | trigger?: 'click' | 'hover'; 43 | /** 44 | * 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的示例 45 | * @default false 46 | */ 47 | 'change-on-select'?: boolean; 48 | /** 49 | * 输入框大小，可选值为large和small或者不填 50 | */ 51 | size?: '' | 'large' | 'small'; 52 | /** 53 | * 动态获取数据，数据源需标识 loading 54 | */ 55 | 'load-data'?: () => void; 56 | /** 57 | * 是否支持搜索 58 | * @default false 59 | */ 60 | filterable?: boolean; 61 | /** 62 | * 当搜索列表为空时显示的内容 63 | * @default 无匹配数据 64 | */ 65 | 'not-found-text'?: string; 66 | /** 67 | * 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时， 68 | * 建议添加此属性，它将不受父级样式影响，从而达到更好的效果 69 | * @default false 70 | */ 71 | transfer?: boolean; 72 | /** 73 | * 给表单元素设置 id，详见 Form 用法。 74 | */ 75 | 'element-id'?: string; 76 | /** 77 | * 选择完成后的回调，返回值 value 即已选值 value，selectedData 为已选项的具体数据 78 | */ 79 | $emit(eventName: 'on-change', value: object, selectedData: object[]): this; 80 | /** 81 | * 展开和关闭弹窗时触发 82 | */ 83 | $emit(eventName: 'on-visible-change', status: boolean): this; 84 | } -------------------------------------------------------------------------------- /types/cell.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Cell extends Vue { 8 | /** 9 | * 用来标识这一项 10 | */ 11 | name?: string | number; 12 | /** 13 | * 左侧标题 14 | */ 15 | title?: string; 16 | /** 17 | * 标题下方的描述信息 18 | */ 19 | label?: string; 20 | /** 21 | * 右侧额外内容 22 | */ 23 | extra?: string; 24 | /** 25 | * 禁用该项 26 | * @default false 27 | */ 28 | disabled?: boolean; 29 | /** 30 | * 标记该项为选中状态 31 | * @default false 32 | */ 33 | selected?: boolean; 34 | /** 35 | * 跳转的链接，支持 vue-router 对象 36 | */ 37 | to?: string | object; 38 | /** 39 | * 路由跳转时，开启 replace 将不会向 history 添加新记录 40 | * @default false 41 | */ 42 | replace?: boolean; 43 | /** 44 | * 相当于 a 链接的 target 属性 45 | * @default _self 46 | */ 47 | target?: '_blank' | '_self' | '_parent' | '_top'; 48 | /** 49 | * 同 vue-router append 50 | * @default false 51 | */ 52 | append?: boolean; 53 | /** 54 | * slot插槽对象 55 | */ 56 | $slots: { 57 | /** 58 | * 相当于 title 59 | */ 60 | '': VNode[]; 61 | /** 62 | * 标题前的 Icon 63 | */ 64 | icon: VNode[]; 65 | /** 66 | * 相当于 label 67 | */ 68 | label: VNode[]; 69 | /** 70 | * 相当于 extra 71 | */ 72 | extra: VNode[]; 73 | /** 74 | * 有链接时，可自定义右侧箭头 75 | */ 76 | arrow: VNode[]; 77 | } 78 | } 79 | 80 | export declare class CellGroup extends Vue { 81 | /** 82 | * 点击单元格时触发 83 | * 84 | */ 85 | $emit(eventName: 'on-click', name: string): this; 86 | } -------------------------------------------------------------------------------- /types/checkbox.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Checkbox extends Vue { 8 | /** 9 | * 只在单独使用时有效。可以使用 v-model 双向绑定数据 10 | * @default false 11 | */ 12 | value?: boolean; 13 | /** 14 | * 只在组合使用时有效。指定当前选项的 value 值，组合会自动判断是否选中 15 | */ 16 | label?: string | number | boolean; 17 | /** 18 | * 是否禁用当前项 19 | * @default false 20 | */ 21 | disabled?: boolean; 22 | /** 23 | * 设置 indeterminate 状态，只负责样式控制 24 | * @default false 25 | */ 26 | indeterminate?: boolean; 27 | /** 28 | * 多选框的尺寸，可选值为 large、small、default 或者不设置 29 | */ 30 | size?: '' | 'large' | 'small' | 'default'; 31 | /** 32 | * 选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用 33 | * @default true 34 | */ 35 | 'true-value'?: string | number | boolean; 36 | /** 37 | * 没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用 38 | * @default false 39 | */ 40 | 'false-value'?: string | number | boolean; 41 | /** 42 | * 只在单独使用时有效。在选项状态发生改变时触发，通过修改外部的数据改变时不会触发 43 | */ 44 | $emit(eventName: 'on-change', value: boolean): this; 45 | } 46 | 47 | export declare class CheckboxGroup extends Vue { 48 | /** 49 | * 指定选中项目的集合，可以使用 v-model 双向绑定数据 50 | * @default [] 51 | */ 52 | value?: string[] | number[] | boolean[]; 53 | /** 54 | * 多选框组的尺寸，可选值为 large、small、default 或者不设置 55 | */ 56 | size?: '' | 'large' | 'small' | 'default'; 57 | /** 58 | * 在选项状态发生改变时触发，返回已选中的数组。通过修改外部的数据改变时不会触发 59 | */ 60 | $emit(eventName: 'on-change', values: Array): this; 61 | } -------------------------------------------------------------------------------- /types/circle.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Circle extends Vue { 8 | /** 9 | * 百分比 10 | * @default 0 11 | */ 12 | percent?: number; 13 | /** 14 | * 图表的宽度和高度，单位 px 15 | * @default 120 16 | */ 17 | size?: number; 18 | /** 19 | * 进度环顶端的形状，可选值为square（方）和round（圆） 20 | * @default round 21 | */ 22 | 'stroke-linecap'?: 'square' | 'round'; 23 | /** 24 | * 进度环的线宽，单位 px 25 | * @default 6 26 | */ 27 | 'stroke-width'?: number; 28 | /** 29 | * 进度环的颜色 30 | * @default #2db7f5 31 | */ 32 | 'stroke-color'?: string 33 | /** 34 | * 进度环背景的线宽，单位 px 35 | * @default 5 36 | */ 37 | 'trail-width'?: number; 38 | /** 39 | * 进度环背景的颜色 40 | * @default #eaeef2 41 | */ 42 | 'trail-color'?: string; 43 | /** 44 | * 是否显示为仪表盘 45 | * @default false 46 | */ 47 | dashboard?: boolean; 48 | /** 49 | * slot插槽对象 50 | */ 51 | $slots: { 52 | /** 53 | * 自定义显示中间内容，内容默认垂直居中 54 | */ 55 | '': VNode[]; 56 | }; 57 | } -------------------------------------------------------------------------------- /types/collapse.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Collapse extends Vue { 8 | /** 9 | * 当前激活的面板的 name，可以使用 v-model 双向绑定 10 | */ 11 | value?: string[] | string; 12 | /** 13 | * 是否开启手风琴模式，开启后每次至多展开一个面板 14 | * @default false 15 | */ 16 | accordion?: boolean; 17 | /** 18 | * 是否开启简洁模式 19 | * @default false 20 | */ 21 | simple?: boolean; 22 | /** 23 | * 切换面板时触发，返回当前已展开的面板的 key，格式为数组 24 | * @default [] 25 | */ 26 | $emit(eventName: 'on-change', []): this; 27 | } 28 | 29 | export declare class CollapsePanel extends Vue { 30 | /** 31 | * 当前面板的 name，与 Collapse的value对应，不填为索引值 32 | * @default index的值 33 | */ 34 | name?: string; 35 | /** 36 | * 隐藏箭头 37 | * @default false 38 | */ 39 | 'hide-arrow'?: boolean; 40 | /** 41 | * slot插槽对象 42 | */ 43 | $slots: { 44 | /** 45 | * 面板头内容 46 | */ 47 | '': VNode[]; 48 | /** 49 | * 描素内容 50 | */ 51 | content: VNode[]; 52 | }; 53 | } -------------------------------------------------------------------------------- /types/color-picker.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class ColorPicker extends Vue { 8 | /** 9 | * 绑定的值，可使用 v-model 双向绑定 10 | */ 11 | value?: string; 12 | /** 13 | * 是否禁用 14 | * @default false 15 | */ 16 | disabled?: boolean; 17 | /** 18 | * 是否可以输入色值 19 | * @default false 20 | */ 21 | editable?: boolean; 22 | /** 23 | * 是否支持透明度选择 24 | * @default false 25 | */ 26 | alpha?: boolean; 27 | /** 28 | * 是否支持色彩选择 29 | * @default true 30 | */ 31 | hue?: boolean; 32 | /** 33 | * 是否支持透明度选择 34 | * @default false 35 | */ 36 | recommend?: boolean; 37 | /** 38 | * 自定义颜色预设 39 | */ 40 | colors?: string[]; 41 | /** 42 | * 颜色的格式，可选值为 hsl、hsv、hex、rgb 43 | * @default 开启 alpha 时为 rgb，其它为 hex 44 | */ 45 | format?: 'hsl' | 'hsv' | 'hex' | 'rgb'; 46 | /** 47 | * 尺寸，可选值为large、small、default或者不设置 48 | */ 49 | size?: '' | 'large' | 'small' | 'default'; 50 | /** 51 | * 当绑定值变化时触发 52 | * @default 当前值 53 | */ 54 | $emit(eventName: 'on-change', value: string): this; 55 | /** 56 | * 面板中当前显示的颜色发生改变时触发 57 | * @default 当前显示的颜色值 58 | */ 59 | $emit(eventName: 'on-active-change', value: string): this; 60 | /** 61 | * 下拉框展开或收起时触发 62 | */ 63 | $emit(eventName: 'on-open-change', value: boolean): this; 64 | } -------------------------------------------------------------------------------- /types/content.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue from 'vue'; 6 | 7 | export declare class Content extends Vue { 8 | } -------------------------------------------------------------------------------- /types/divider.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue from 'vue'; 6 | 7 | export declare class Divider extends Vue { 8 | /** 9 | * 水平还是垂直类型，可选值为 horizontal 或 vertical 10 | * @default horizontal 11 | */ 12 | type?: 'horizontal' | 'vertical'; 13 | /** 14 | * 分割线标题的位置，可选值为 left、right 或 center 15 | * @default center 16 | */ 17 | orientation?: 'left' | 'right' | 'center'; 18 | /** 19 | * 是否虚线 20 | * @default false 21 | */ 22 | dashed?: boolean; 23 | /** 24 | * 尺寸，可选值为 small 或 default 25 | * @default default 26 | */ 27 | size?: string; 28 | } -------------------------------------------------------------------------------- /types/footer.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue from 'vue'; 6 | 7 | export declare class Footer extends Vue { 8 | } -------------------------------------------------------------------------------- /types/grid.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Row extends Vue { 8 | /** 9 | * 栅格间距，单位 px，左右平分 10 | * @default 0 11 | */ 12 | gutter?: number; 13 | /** 14 | * 布局模式，可选值为flex或不选，在现代浏览器下有效 15 | */ 16 | type?: string; 17 | /** 18 | * lex 布局下的垂直对齐方式，可选值为top、middle、bottom 19 | */ 20 | align?: 'top'|'middle'|'bottom'; 21 | /** 22 | * flex 布局下的水平排列方式，可选值为start、end、center、space-around、space-between 23 | */ 24 | justify?: 'start'|'end'|'center'|'space-around'|'space-between'; 25 | /** 26 | * 自定义的class名称 27 | */ 28 | 'class-name'?: string; 29 | } 30 | 31 | export declare class Col extends Vue { 32 | /** 33 | * 栅格的占位格数，可选值为0~24的整数，为 0 时，相当于display:none 34 | */ 35 | span?: number | string; 36 | /** 37 | * 栅格的顺序，在flex布局模式下有效 38 | */ 39 | order?: number | string; 40 | /** 41 | * 栅格左侧的间隔格数，间隔内不可以有栅格 42 | */ 43 | offset?: number | string; 44 | /** 45 | * 栅格向右移动格数 46 | */ 47 | push?: number | string; 48 | /** 49 | * 栅格向左移动格数 50 | */ 51 | pull?: number | string; 52 | /** 53 | * 自定义的class名称 54 | */ 55 | 'class-name'?: string; 56 | /** 57 | * <576px 响应式栅格，可为栅格数或一个包含其他属性的对象 58 | */ 59 | xs?: number | object; 60 | /** 61 | * ≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象 62 | */ 63 | sm?: number | object; 64 | /** 65 | * ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象 66 | */ 67 | md?: number | object; 68 | /** 69 | * ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象 70 | */ 71 | lg?: number | object; 72 | /** 73 | * ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象 74 | */ 75 | xl?: number | object; 76 | /** 77 | * ≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象 78 | */ 79 | xxl?: number | object; 80 | } 81 | -------------------------------------------------------------------------------- /types/header.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue from 'vue'; 6 | 7 | export declare class Header extends Vue { 8 | } -------------------------------------------------------------------------------- /types/icon.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue from 'vue'; 6 | 7 | export declare class Icon extends Vue { 8 | /** 9 | * 图标的名称 10 | */ 11 | type?: string; 12 | /** 13 | * 图标的大小，单位是 px 14 | */ 15 | size?: number | string; 16 | /** 17 | * 图标的颜色 18 | */ 19 | color?: string; 20 | } -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import iView from './iview'; 6 | 7 | export default iView; 8 | export as namespace iView; 9 | 10 | export * from './iview.components'; -------------------------------------------------------------------------------- /types/input-number.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue from 'vue'; 6 | 7 | export declare class InputNumber extends Vue { 8 | /** 9 | * 最大值，默认值Infinity 10 | */ 11 | max?: number; 12 | /** 13 | * 最小值，默认值-Infinity 14 | */ 15 | min?: number; 16 | /** 17 | * 当前值，可以使用 v-model 双向绑定数据，默认值1 18 | */ 19 | value?: number; 20 | /** 21 | * 每次改变的步伐，可以是小数，默认值1 22 | */ 23 | step?: number; 24 | /** 25 | * 输入框尺寸，可选值为large、small、default或者不填 26 | */ 27 | size?: '' | 'large' | 'small' | 'default'; 28 | /** 29 | * 设置禁用状态，默认值false 30 | */ 31 | disabled?: boolean; 32 | /** 33 | * 输入框占位符 34 | * @default 请选择 35 | */ 36 | placeholder?: string; 37 | /** 38 | * 指定输入框展示值的格式 39 | */ 40 | formatter?: () => void; 41 | /** 42 | * 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用 43 | */ 44 | parser?: () => void; 45 | /** 46 | * 是否设置为只读 47 | * @default false 48 | */ 49 | readonly?: boolean; 50 | /** 51 | * 是否可编辑 52 | * @default true 53 | */ 54 | editable?: boolean; 55 | /** 56 | * 数值精度 57 | */ 58 | precision?: number; 59 | /** 60 | * 给表单元素设置 id，详见 Form 用法。 61 | */ 62 | 'element-id'?: string; 63 | /** 64 | * 是否实时响应数据，设置为 false 时，只会在失焦时更改数据 65 | * @default true 66 | */ 67 | 'active-change'?: boolean; 68 | /** 69 | * 数值改变时的回调，返回当前值，默认值当前值 70 | */ 71 | $emit(eventName: 'on-change', value: number): this; 72 | /** 73 | * 聚焦时触发 74 | */ 75 | $emit(eventName: 'on-focus', event: KeyboardEvent): this; 76 | /** 77 | * 失焦时触发 78 | */ 79 | $emit(eventName: 'on-blur', event: KeyboardEvent): this; 80 | } -------------------------------------------------------------------------------- /types/iview.d.ts: -------------------------------------------------------------------------------- 1 | import { PluginFunction } from 'vue'; 2 | 3 | interface IView extends PluginFunction {} 4 | 5 | declare const iView: IView; 6 | export default iView; 7 | -------------------------------------------------------------------------------- /types/layout.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Layout extends Vue { 8 | /** 9 | * 触发响应式布局的断点，可选值为xs,sm,md,lg,xl或xxl，若不设此属性则不会触发响应式布局。 10 | * { 11 | * xs: '480px', 12 | * sm: '576px', 13 | * md: '768px', 14 | * lg: '992px', 15 | * xl: '1200px', 16 | * xxl: '1600px' 17 | * } 18 | */ 19 | breakpoint?: string; 20 | /** 21 | * 侧边栏是否收起，可使用 v-model 双向绑定数据。 22 | * @default false 23 | */ 24 | value?: boolean; 25 | /** 26 | * 宽度 27 | * @default 200 28 | */ 29 | width?: number; 30 | /** 31 | * 是否可收起，设为false后，默认触发器会隐藏，且响应式布局不会触发 32 | * @default false 33 | */ 34 | collapsible?: boolean; 35 | /** 36 | * 收缩宽度，设置为 0 会出现特殊 trigger 37 | * @default 64 38 | */ 39 | 'collapsed-width'?: number; 40 | /** 41 | * 隐藏默认触发器 42 | * @default false 43 | */ 44 | 'hide-trigger'?: boolean; 45 | /** 46 | * 是否默认收起，设置了collapsible后设置此属性侧边栏仍会收起。 47 | * @default false 48 | */ 49 | 'default-collapsed'?: boolean; 50 | /** 51 | * 改变侧边栏触发器箭头方向，和改变侧边栏收起方向，当Sider在右边时可以使用。 52 | * @default false 53 | */ 54 | 'reverse-arrow'?: boolean; 55 | /** 56 | * 展开-收起时的回调true/false 57 | */ 58 | $emit(eventName: 'on-collapse', []): this; 59 | /** 60 | * slot插槽对象 61 | */ 62 | $slots: { 63 | /** 64 | * 自定义触发器 65 | * @default 66 | */ 67 | trigger: VNode[]; 68 | }; 69 | /** 70 | * methods, 改变Sider展开-收起状态。 71 | */ 72 | toggleCollapse(): void; 73 | } -------------------------------------------------------------------------------- /types/loading-bar.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue from 'vue'; 6 | 7 | export const LoadingBar: LoadingBarClass; 8 | 9 | export declare class LoadingBarClass extends Vue { 10 | /** 11 | * 开始从 0 显示进度条，并自动加载进度 12 | */ 13 | start(): void; 14 | /** 15 | * 结束进度条，自动补全剩余进度 16 | */ 17 | finish(): void; 18 | /** 19 | * 以错误的类型结束进度条，自动补全剩余进度 20 | */ 21 | error(): void; 22 | /** 23 | * 精确加载到指定的进度 24 | * @param percent 指定的进度百分比 25 | */ 26 | update(percent?: number): void; 27 | /** 28 | * 全局配置 29 | * @param options 配置对象 30 | */ 31 | config(options?: LoadingBarConfig): void; 32 | /** 33 | * 全局销毁 34 | */ 35 | destroy(): void; 36 | } 37 | 38 | export declare class LoadingBarConfig { 39 | /** 40 | * 进度条的颜色，默认为 iView 主色 41 | * @default primary 42 | */ 43 | color?: string; 44 | /** 45 | * 失败时的进度条颜色，默认为 iView 主色 46 | * @default error 47 | */ 48 | failedColor?: string; 49 | /** 50 | * 进度条高度，单位 px 51 | * @default 2 52 | */ 53 | height?: number; 54 | /** 55 | * 自动消失的延时, 默认为800ms 56 | * @default 800 57 | */ 58 | duration?: number; 59 | } 60 | 61 | declare module 'vue/types/vue' { 62 | interface Vue { 63 | /** 64 | * 加载进度条 65 | */ 66 | $Loading: LoadingBarClass; 67 | } 68 | } -------------------------------------------------------------------------------- /types/progress.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Progress extends Vue { 8 | /** 9 | * 百分比 10 | * @default 0 11 | */ 12 | percent?: number; 13 | /** 14 | * 状态，可选值为normal、active、wrong、success 15 | * @default normal 16 | */ 17 | status?: 'normal'|'active'|'wrong'|'success'; 18 | /** 19 | * 进度条的线宽，单位 px 20 | * @default 10 21 | */ 22 | 'stroke-width'?: number; 23 | /** 24 | * 隐藏数值或状态图标 25 | * @default false 26 | */ 27 | 'hide-info'?: boolean; 28 | /** 29 | * 是否在垂直方向显示 30 | * @default false 31 | */ 32 | vertical?: boolean; 33 | /** 34 | * 已完成的分段百分比 35 | * @default 0 36 | */ 37 | 'success-percent'?: number; 38 | /** 39 | * 进度条的颜色 40 | */ 41 | 'stroke-color'?: string; 42 | /** 43 | * slot插槽对象 44 | */ 45 | $slots: { 46 | /** 47 | * 自定义显示状态内容 48 | */ 49 | '': VNode[]; 50 | }; 51 | } 52 | -------------------------------------------------------------------------------- /types/radio.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Radio extends Vue { 8 | /** 9 | * 只在单独使用时有效。可以使用 v-model 双向绑定数据 10 | * @default false 11 | */ 12 | value?: boolean; 13 | /** 14 | * 只在组合使用时有效。指定当前选项的 value 值，组合会自动判断当前选择的项目 15 | */ 16 | label?: string | number; 17 | /** 18 | * 是否禁用当前项 19 | * @default false 20 | */ 21 | disabled?: boolean; 22 | /** 23 | * 单选框的尺寸，可选值为 large、small、default 或者不设置 24 | */ 25 | size?: '' | 'large' | 'small' | 'default'; 26 | /** 27 | * 选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用 28 | * @default true 29 | */ 30 | 'true-value'?: string | number | boolean; 31 | /** 32 | * 没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用 33 | * @default false 34 | */ 35 | 'false-value'?: string | number | boolean; 36 | /** 37 | * 在选项状态发生改变时触发，返回当前状态。通过修改外部的数据改变时不会触发 38 | */ 39 | $emit(eventName: 'on-change', arg: string | number | boolean): this; 40 | } 41 | 42 | export declare class RadioGroup extends Vue { 43 | /** 44 | * 指定当前选中的项目数据。可以使用 v-model 双向绑定数据 45 | */ 46 | value?: string | number; 47 | /** 48 | * 可选值为 button 或不填，为 button 时使用按钮样式 49 | */ 50 | type?: string; 51 | /** 52 | * 尺寸，可选值为large、small、default或者不设置 53 | */ 54 | size?: '' | 'large' | 'small' | 'default'; 55 | /** 56 | * 是否垂直排列，按钮样式下无效 57 | * @default false 58 | */ 59 | vertical?: boolean; 60 | /** 61 | * 在选项状态发生改变时触发，返回当前选中的项。通过修改外部的数据改变时不会触发 62 | */ 63 | $emit(eventName: 'on-change', ...args: Array): this; 64 | } 65 | -------------------------------------------------------------------------------- /types/rate.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Rate extends Vue { 8 | /** 9 | * star总数 10 | * @default 5 11 | */ 12 | count?: number; 13 | /** 14 | * 当前 star 数，可以使用 v-model 双向绑定数据 15 | * @default 0 16 | */ 17 | value?: number; 18 | /** 19 | * 是否允许半选 20 | * @default false 21 | */ 22 | 'allow-half'?: boolean; 23 | /** 24 | * 是否只读，无法进行交互 25 | * @default false 26 | */ 27 | disabled?: boolean; 28 | /** 29 | * 是否显示提示文字 30 | * @default false 31 | */ 32 | 'show-text'?: boolean; 33 | /** 34 | * 是否可以取消选择 35 | * @default false 36 | */ 37 | clearable?: boolean; 38 | /** 39 | * 自定义字符 40 | */ 41 | character?: string; 42 | /** 43 | * 使用图标 44 | */ 45 | icon?: string; 46 | /** 47 | * 使用自定义图标 48 | */ 49 | 'custom-icon'?: string; 50 | /** 51 | * 评分改变时触发 52 | */ 53 | $emit(eventName: 'on-change', value: number): this; 54 | } -------------------------------------------------------------------------------- /types/scroll.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Scroll extends Vue { 8 | /** 9 | * 滚动区域的高度，单位像素 10 | * @default 300 11 | */ 12 | height?: string | number; 13 | /** 14 | * 加载中的文案 15 | * @default 加载中 16 | */ 17 | 'loading-text'?: string; 18 | /** 19 | * 滚动至顶部时触发，需返回Promise 20 | */ 21 | 'on-reach-top'?: () => void; 22 | /** 23 | * 滚动至底部时触发，需返回Promise 24 | */ 25 | 'on-reach-bottom'?: () => void; 26 | /** 27 | * 滚动至顶部或底部时触发，需返回Promise 28 | */ 29 | 'on-reach-edge'?: () => void; 30 | /** 31 | * 从边缘到触发回调的距离。如果是负的，回调将在到达边缘之前触发。值最好在 24 以下。 32 | * @default [20, 20] 33 | */ 34 | 'distance-to-edge'?: number | number[]; 35 | } -------------------------------------------------------------------------------- /types/sider.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Sider extends Vue { 8 | } -------------------------------------------------------------------------------- /types/slider.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Slider extends Vue { 8 | /** 9 | * 滑块选定的值，可以使用 v-model 双向绑定数据。普通模式下，数据格式为数字， 10 | * 在双滑块模式下，数据格式为长度是2的数组，且每项都为数字, 11 | * @default 0 12 | */ 13 | value?: number | number[]; 14 | /** 15 | * 最小值 16 | * @default 0 17 | */ 18 | min?: number; 19 | /** 20 | * 最大值 21 | * @default 100 22 | */ 23 | max?: number; 24 | /** 25 | * 步长，取值建议能被（max - min）整除 26 | * @default 1 27 | */ 28 | step?: number; 29 | /** 30 | * 是否禁用滑块 31 | * @default false 32 | */ 33 | disabled?: boolean; 34 | /** 35 | * 是否开启双滑块模式 36 | * @default false 37 | */ 38 | range?: boolean; 39 | /** 40 | * 是否显示数字输入框，仅在单滑块模式下有效 41 | * @default false 42 | */ 43 | 'show-input'?: boolean; 44 | /** 45 | * 是否显示间断点，建议在 step 不密集时使用 46 | * @default false 47 | */ 48 | 'show-stops'?: boolean; 49 | /** 50 | * 提示的显示控制，可选值为 hover（悬停，默认）、always（总是可见）、never（不可见） 51 | * @default false 52 | */ 53 | 'show-tip'?: boolean; 54 | /** 55 | * 会把当前值传给 tip-format，并在 Tooltip 中显示 tip-format 的返回值，若为 null，则隐藏 Tooltip 56 | */ 57 | 'tip-format'?: (value?: number | number[]) => void; 58 | /** 59 | * 数字输入框的尺寸，可选值为large、small、default或者不填，仅在开启 show-input 时有效 60 | */ 61 | 'input-size'?: '' | 'large' | 'small' | 'default'; 62 | /** 63 | * 同 InputNumber 的 active-change 64 | * @default true 65 | */ 66 | 'active-change'?: boolean; 67 | /** 68 | * 在松开滑动时触发，返回当前的选值，在滑动过程中不会触发 69 | */ 70 | $emit(eventName: 'on-change', value: number | number[]): this; 71 | /** 72 | * 滑动条数据变化时触发，返回当前的选值，在滑动过程中实时触发 73 | */ 74 | $emit(eventName: 'on-input', value: number | number[]): this; 75 | } -------------------------------------------------------------------------------- /types/spin.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Spin extends Vue { 8 | /** 9 | * Spin尺寸，可选值为large和small或者不设置 10 | */ 11 | size?: 'large' | 'small'; 12 | /** 13 | * 是否固定，需要父级有relative或absolute 14 | * @default false 15 | */ 16 | fix?: boolean; 17 | /** 18 | * slot插槽对象 19 | */ 20 | $slots: { 21 | /** 22 | * 自定义 Spin 的内容，设置slot后，默认的样式不生效 23 | */ 24 | '': VNode[]; 25 | }; 26 | } 27 | 28 | declare module 'vue/types/vue' { 29 | interface Vue { 30 | /** 31 | * 32 | */ 33 | $Spin: Spin; 34 | } 35 | } -------------------------------------------------------------------------------- /types/split.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Split extends Vue { 8 | /** 9 | * 面板位置，可以是 0~1 代表百分比，或具体数值的像素，可用 v-model 双向绑定 10 | * @default 0.5 11 | */ 12 | value?: number | string; 13 | /** 14 | * 类型，可选值为 horizontal 或 vertical 15 | * @default horizontal 16 | */ 17 | mode?: 'horizontal' | 'vertical'; 18 | /** 19 | * 最小阈值 20 | * @default 40px 21 | */ 22 | min?: number | string; 23 | /** 24 | * 最大阈值 25 | * @default 40px 26 | */ 27 | max?: number | string; 28 | /** 29 | * 拖拽开始 - 30 | * @default false 31 | */ 32 | $emit(eventName: 'on-move-start', []): this; 33 | /** 34 | * 拖拽中 35 | */ 36 | $emit(eventName: 'on-moving', []): this; 37 | /** 38 | * 拖拽结束 39 | * @default false 40 | */ 41 | $emit(eventName: 'on-move-end', []): this; 42 | /** 43 | * slot插槽对象 44 | */ 45 | $slots: { 46 | /** 47 | * mode 为 horizontal 时可用，左边面板 48 | * @default false 49 | */ 50 | left: VNode[]; 51 | /** 52 | * mode 为 horizontal 时可用，右边面板 53 | */ 54 | right: VNode[]; 55 | /** 56 | * mode 为 vertical 时可用，上边面板 57 | */ 58 | top: VNode[]; 59 | /** 60 | * mode 为 vertical 时可用，下边面板 61 | */ 62 | bottom: VNode[]; 63 | /** 64 | * 自定义分割拖拽节点 65 | */ 66 | trigger: VNode[]; 67 | } 68 | } -------------------------------------------------------------------------------- /types/steps.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue from 'vue'; 6 | 7 | export declare class Steps extends Vue { 8 | /** 9 | * 当前步骤，从 0 开始计数 10 | * @default 0 11 | */ 12 | current?: number; 13 | /** 14 | * 当前步骤的状态，可选值为wait、process、finish、error 15 | * @default process 16 | */ 17 | status?: 'wait' | 'process' | 'finish' | 'error'; 18 | /** 19 | * 步骤条的尺寸，可选值为small或者不写 20 | */ 21 | size?: '' | 'small'; 22 | /** 23 | * 步骤条的方向，可选值为horizontal（水平）或vertical（垂直） 24 | * @default horizontal 25 | */ 26 | direction?: 'horizontal' | 'vertical'; 27 | } 28 | 29 | export declare class StepsStep extends Vue { 30 | /** 31 | * 步骤的状态，可选值为wait、process、finish、error，不设置时自动判断 32 | * @default process 33 | */ 34 | status?: 'wait' | 'process' | 'finish' | 'error'; 35 | /** 36 | * 标题 37 | * @default 空 38 | */ 39 | title?: string; 40 | /** 41 | * 步骤的详细描述，可选 42 | */ 43 | content?: string; 44 | /** 45 | * 步骤的图标，可选 46 | */ 47 | icon?: string; 48 | } -------------------------------------------------------------------------------- /types/switch.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Switch extends Vue { 8 | /** 9 | * 指定当前是否选中，可以使用 v-model 双向绑定数据 10 | * @default false 11 | */ 12 | value?: boolean; 13 | /** 14 | * 开关的尺寸，可选值为large、small、default或者不写。建议开关如果使用了2个汉字的文字，使用 large。 15 | */ 16 | size?: '' | 'large' | 'small' | 'default'; 17 | /** 18 | * 禁用开关 19 | * @default false 20 | */ 21 | disabled?: boolean; 22 | /** 23 | * 选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用 24 | * @default true 25 | */ 26 | 'true-value'?: string | number | boolean; 27 | /** 28 | * 没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用 29 | * @default false 30 | */ 31 | 'false-value'?: string | number | boolean; 32 | /** 33 | * 加载中的开关 34 | * @default false 35 | */ 36 | loading?: boolean; 37 | /** 38 | * 开关变化时触发，返回当前的状态 39 | */ 40 | $emit(eventName: 'on-change', value: boolean): this; 41 | /** 42 | * slot插槽对象 43 | */ 44 | $slots: { 45 | /** 46 | * 自定义显示打开时的内容 47 | */ 48 | open: VNode[]; 49 | /** 50 | * 自定义显示关闭时的内容 51 | */ 52 | close: VNode[]; 53 | }; 54 | } -------------------------------------------------------------------------------- /types/tag.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Tag extends Vue { 8 | /** 9 | * 标签是否可以关闭 10 | * @default false 11 | */ 12 | closable?: boolean 13 | /** 14 | * 标签是否可以选择 15 | * @default false 16 | */ 17 | checkable?: boolean; 18 | /** 19 | * 标签的选中状态 20 | * @default true 21 | */ 22 | checked?: boolean; 23 | /** 24 | * 标签的样式类型，可选值为border、dot或不填 25 | */ 26 | type?: '' | 'border' | 'dot'; 27 | /** 28 | * 标签颜色，预设颜色值为 29 | * default、primary、success、warning、error、blue、green、 30 | * red、yellow、pink、magenta、volcano、orange、gold、 31 | * lime、cyan、geekblue、purple 32 | * 你也可以自定义颜色值。 33 | */ 34 | color?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'blue' | 'green' | 'red' | 'yellow' | 'pink' | 'magenta' | 'volcano' | 'orange' | 'gold' | 'lime' | 'cyan' | 'geekblue' | 'purple'; 35 | /** 36 | * 当前标签的名称，使用 v-for，并支持关闭时，会比较有用 37 | */ 38 | name?: string | number; 39 | /** 40 | * 是否在出现和消失时使用渐变的动画，动画时长可能会引起占位的闪烁 41 | * @default true 42 | */ 43 | fade?: boolean; 44 | /** 45 | * 关闭时触发 46 | */ 47 | $emit(eventName: 'on-close', event: object, name: string): this; 48 | } -------------------------------------------------------------------------------- /types/time.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue from 'vue'; 6 | 7 | export declare class Time extends Vue { 8 | /** 9 | * 需要对比的时间，可以是时间戳或 Date 类型 10 | */ 11 | time?: number |Date |string; 12 | /** 13 | * 类型，可选值为 relative、date 或 datetime 14 | * @default relative 15 | */ 16 | type?: 'relative'|'date'|'datetime'; 17 | /** 18 | * 自动更新的间隔，单位：秒 19 | * @default 60 20 | */ 21 | interval?: number; 22 | /** 23 | * 填写该值，点击会定位锚点 24 | * @default false 25 | */ 26 | hash?: string; 27 | } -------------------------------------------------------------------------------- /types/timeline.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Timeline extends Vue { 8 | /** 9 | * 指定是否最后一个节点为幽灵节点 10 | * @default false 11 | */ 12 | pending?: boolean; 13 | } 14 | 15 | export declare class TimelineItem extends Vue { 16 | /** 17 | * 圆圈颜色，可选值为blue、red、green，或自定义色值 18 | * @default blue 19 | */ 20 | color?: 'blue' | 'red' | 'green' | string; 21 | /** 22 | * slot插槽对象 23 | */ 24 | $slots: { 25 | /** 26 | * 基本内容 27 | */ 28 | '': VNode[]; 29 | /** 30 | * 自定义时间轴点内容 31 | */ 32 | dot: VNode[]; 33 | }; 34 | } -------------------------------------------------------------------------------- /types/transfer.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for iview 3.3.1 2 | // Project: https://github.com/iview/iview 3 | // Definitions by: yangdan 4 | // Definitions: https://github.com/yangdan8/iview.git 5 | import Vue, { VNode } from 'vue'; 6 | 7 | export declare class Transfer extends Vue { 8 | /** 9 | * 数据源，其中的数据将会被渲染到左边一栏中，targetKeys 中指定的除外。 10 | * @default [] 11 | */ 12 | data?: object[]; 13 | /** 14 | * 显示在右侧框数据的key集合 15 | * @default [] 16 | */ 17 | targetKeys?: string[]; 18 | /** 19 | * 每行数据渲染函数，该函数的入参为 data 中的项 20 | * value?: 默认显示label，没有时显示key 21 | */ 22 | 'render-format'?: (value?: string) => void; 23 | /** 24 | * 设置哪些项应该被选中 25 | * @default [] 26 | */ 27 | 'selected-keys'?: string[]; 28 | /** 29 | * 两个穿梭框的自定义样式 30 | * @default {} 31 | */ 32 | 'list-style'?: object; 33 | /** 34 | * 标题集合，顺序从左至右 Array 35 | * @default ['源列表', '目的列表'] 36 | */ 37 | titles?: string[]; 38 | /** 39 | * 操作文案集合，顺序从上至下 40 | * @default [] 41 | */ 42 | operations?: object[]; 43 | /** 44 | * 是否显示搜索框 45 | * @default false 46 | */ 47 | filterable?: object[]; 48 | /** 49 | * 搜索框的占位 50 | * @default 请输入搜索内容 51 | */ 52 | 'filter-placeholder'?: string; 53 | /** 54 | * 自定义搜索函数，入参为 data 和 query，data 为项，query 为当前输入的搜索词 55 | * 默认搜索label 56 | */ 57 | 'filter-method'?: (value?: string) => void; 58 | /** 59 | * 当列表为空时显示的内容 60 | * @default 列表为空 61 | */ 62 | 'not-found-text'?: string; 63 | /** 64 | * 选项在两栏之间转移时的回调函数 65 | */ 66 | $emit(eventName: 'on-change', targetKeys: string[], direction: string, moveKeys: string[]): this; 67 | /** 68 | * 选项在两栏之间转移时的回调函数 69 | */ 70 | $emit(eventName: 'on-selected-change', sourceSelectedKeys: string[], targetSelectedKeys: string[]): this; 71 | /** 72 | * slot插槽对象 73 | */ 74 | $slots: { 75 | /** 76 | * 自定义底部内容 77 | */ 78 | '': VNode[]; 79 | }; 80 | } --------------------------------------------------------------------------------