├── .babelrc ├── .eslintignore ├── .eslintrc ├── .gitattributes ├── .github ├── CONTRIBUTING.en-US.md ├── CONTRIBUTING.es.md ├── CONTRIBUTING.fr-FR.md ├── CONTRIBUTING.zh-CN.md ├── ISSUE_TEMPLATE.md ├── ISSUE_TEMPLATE │ └── config.yml ├── PULL_REQUEST_TEMPLATE.md └── stale.yml ├── .gitignore ├── .travis.yml ├── CHANGELOG.en-US.md ├── CHANGELOG.es.md ├── CHANGELOG.fr-FR.md ├── CHANGELOG.zh-CN.md ├── FAQ.md ├── LICENSE ├── Makefile ├── README.md ├── build ├── bin │ ├── build-entry.js │ ├── build-locale.js │ ├── gen-cssfile.js │ ├── gen-indices.js │ ├── i18n.js │ ├── iconInit.js │ ├── new-lang.js │ ├── new.js │ ├── template.js │ └── version.js ├── config.js ├── deploy-ci.sh ├── deploy-faas.sh ├── gen-single-config.js ├── git-release.sh ├── md-loader │ ├── config.js │ ├── containers.js │ ├── fence.js │ ├── index.js │ └── util.js ├── release.sh ├── webpack.common.js ├── webpack.component.js ├── webpack.conf.js ├── webpack.demo.js ├── webpack.extension.js └── webpack.test.js ├── components.json ├── element_logo.svg ├── examples ├── app.vue ├── assets │ ├── images │ │ ├── Axure-Components.svg │ │ ├── Module.svg │ │ ├── Sketch-Template.svg │ │ ├── button-d-cn.png │ │ ├── button-d-en.png │ │ ├── button-l-cn.png │ │ ├── button-l-en.png │ │ ├── cloud-1.png │ │ ├── cloud-2.png │ │ ├── compo-1.png │ │ ├── compo-2.png │ │ ├── compo-3.png │ │ ├── component.png │ │ ├── consistency.png │ │ ├── controllability.png │ │ ├── dialog-close.png │ │ ├── efficiency.png │ │ ├── element-demo.jpeg │ │ ├── element-logo-small.svg │ │ ├── element-logo.svg │ │ ├── feedback.png │ │ ├── figure-1.png │ │ ├── figure-2.png │ │ ├── guide.png │ │ ├── hamburger.png │ │ ├── icon-check.png │ │ ├── icon-copy.png │ │ ├── icon-download.png │ │ ├── icon-edit.png │ │ ├── icon-redo.svg │ │ ├── icon-undo.svg │ │ ├── icon-upload.svg │ │ ├── intro-theme-b.png │ │ ├── navbar_0.png │ │ ├── navbar_1.png │ │ ├── navbar_2.png │ │ ├── navbar_3.png │ │ ├── plant-1.png │ │ ├── plant-2.png │ │ ├── qrcode.png │ │ ├── resource-placeholder.svg │ │ ├── resource.png │ │ ├── search-by-algolia.svg │ │ ├── term-arial.png │ │ ├── term-helvetica.png │ │ ├── term-hiragino.png │ │ ├── term-microsoft.png │ │ ├── term-pingfang.png │ │ ├── term-sf.png │ │ ├── theme-index-blue.png │ │ ├── theme-index-icon.svg │ │ ├── theme-index-red.png │ │ ├── theme-intro.png │ │ ├── typography.png │ │ └── web.png │ └── styles │ │ ├── common.css │ │ └── fonts │ │ ├── icomoon.eot │ │ ├── icomoon.svg │ │ ├── icomoon.ttf │ │ ├── icomoon.woff │ │ └── style.css ├── bus.js ├── color.js ├── components │ ├── demo-block.vue │ ├── footer-nav.vue │ ├── footer.vue │ ├── header.vue │ ├── search.vue │ ├── side-nav.vue │ ├── theme-configurator │ │ ├── action.vue │ │ ├── editor │ │ │ ├── borderRadius.vue │ │ │ ├── boxShadow.vue │ │ │ ├── color-picker │ │ │ │ ├── index.js │ │ │ │ └── src │ │ │ │ │ ├── color.js │ │ │ │ │ ├── components │ │ │ │ │ ├── alpha-slider.vue │ │ │ │ │ ├── color-list.vue │ │ │ │ │ ├── hue-slider.vue │ │ │ │ │ ├── picker-dropdown.vue │ │ │ │ │ ├── predefine.vue │ │ │ │ │ └── sv-panel.vue │ │ │ │ │ ├── draggable.js │ │ │ │ │ └── main.vue │ │ │ ├── color.vue │ │ │ ├── fontLineHeight.vue │ │ │ ├── fontSize.vue │ │ │ ├── fontWeight.vue │ │ │ ├── input.vue │ │ │ ├── mixin.vue │ │ │ └── simpleText.vue │ │ ├── index.vue │ │ ├── main.vue │ │ ├── shortcut.vue │ │ └── utils │ │ │ ├── boxShadow.js │ │ │ └── utils.js │ ├── theme-picker.vue │ └── theme │ │ ├── basic-tokens-preview.vue │ │ ├── components-preview.vue │ │ ├── constant.js │ │ ├── loader │ │ ├── ajax.js │ │ ├── api.js │ │ ├── docStyle.vue │ │ ├── index.vue │ │ └── loading │ │ │ ├── index.vue │ │ │ ├── progress.js │ │ │ └── progress.vue │ │ ├── localstorage.js │ │ ├── theme-card.vue │ │ ├── theme-list.js │ │ └── utils.js ├── demo-styles │ ├── alert.scss │ ├── avatar.scss │ ├── badge.scss │ ├── border.scss │ ├── button.scss │ ├── calendar.scss │ ├── card.scss │ ├── carousel.scss │ ├── cascader.scss │ ├── collapse.scss │ ├── color-picker.scss │ ├── color.scss │ ├── container.scss │ ├── date-picker.scss │ ├── datetime-picker.scss │ ├── dialog.scss │ ├── divider.scss │ ├── drawer.scss │ ├── dropdown.scss │ ├── form.scss │ ├── i18n.scss │ ├── icon.scss │ ├── image.scss │ ├── index.scss │ ├── infinite-scroll.scss │ ├── input-number.scss │ ├── input.scss │ ├── layout.scss │ ├── loading.scss │ ├── menu.scss │ ├── pagination.scss │ ├── popover.scss │ ├── progress.scss │ ├── rate.scss │ ├── select.scss │ ├── slider.scss │ ├── switch.scss │ ├── table.scss │ ├── tag.scss │ ├── time-picker.scss │ ├── timeline.scss │ ├── tooltip.scss │ ├── transfer.scss │ ├── transition.scss │ ├── tree.scss │ ├── typography.scss │ └── upload.scss ├── docs │ ├── en-US │ │ ├── alert.md │ │ ├── avatar.md │ │ ├── backtop.md │ │ ├── badge.md │ │ ├── border.md │ │ ├── breadcrumb.md │ │ ├── button.md │ │ ├── calendar.md │ │ ├── card.md │ │ ├── carousel.md │ │ ├── cascader.md │ │ ├── checkbox.md │ │ ├── collapse.md │ │ ├── color-picker.md │ │ ├── color.md │ │ ├── container.md │ │ ├── custom-theme.md │ │ ├── date-picker.md │ │ ├── datetime-picker.md │ │ ├── dialog.md │ │ ├── divider.md │ │ ├── drawer.md │ │ ├── dropdown.md │ │ ├── form.md │ │ ├── i18n.md │ │ ├── icon.md │ │ ├── image.md │ │ ├── infiniteScroll.md │ │ ├── input-number.md │ │ ├── input.md │ │ ├── installation.md │ │ ├── layout.md │ │ ├── link.md │ │ ├── loading.md │ │ ├── menu.md │ │ ├── message-box.md │ │ ├── message.md │ │ ├── notification.md │ │ ├── page-header.md │ │ ├── pagination.md │ │ ├── popconfirm.md │ │ ├── popover.md │ │ ├── progress.md │ │ ├── quickstart.md │ │ ├── radio.md │ │ ├── rate.md │ │ ├── select.md │ │ ├── slider.md │ │ ├── steps.md │ │ ├── switch.md │ │ ├── table.md │ │ ├── tabs.md │ │ ├── tag.md │ │ ├── time-picker.md │ │ ├── timeline.md │ │ ├── tooltip.md │ │ ├── transfer.md │ │ ├── transition.md │ │ ├── tree.md │ │ ├── typography.md │ │ └── upload.md │ ├── es │ │ ├── alert.md │ │ ├── avatar.md │ │ ├── backtop.md │ │ ├── badge.md │ │ ├── border.md │ │ ├── breadcrumb.md │ │ ├── button.md │ │ ├── calendar.md │ │ ├── card.md │ │ ├── carousel.md │ │ ├── cascader.md │ │ ├── checkbox.md │ │ ├── collapse.md │ │ ├── color-picker.md │ │ ├── color.md │ │ ├── container.md │ │ ├── custom-theme.md │ │ ├── date-picker.md │ │ ├── datetime-picker.md │ │ ├── dialog.md │ │ ├── divider.md │ │ ├── drawer.md │ │ ├── dropdown.md │ │ ├── form.md │ │ ├── i18n.md │ │ ├── icon.md │ │ ├── image.md │ │ ├── infiniteScroll.md │ │ ├── input-number.md │ │ ├── input.md │ │ ├── installation.md │ │ ├── layout.md │ │ ├── link.md │ │ ├── loading.md │ │ ├── menu.md │ │ ├── message-box.md │ │ ├── message.md │ │ ├── notification.md │ │ ├── page-header.md │ │ ├── pagination.md │ │ ├── popconfirm.md │ │ ├── popover.md │ │ ├── progress.md │ │ ├── quickstart.md │ │ ├── radio.md │ │ ├── rate.md │ │ ├── select.md │ │ ├── slider.md │ │ ├── steps.md │ │ ├── switch.md │ │ ├── table.md │ │ ├── tabs.md │ │ ├── tag.md │ │ ├── time-picker.md │ │ ├── timeline.md │ │ ├── tooltip.md │ │ ├── transfer.md │ │ ├── transition.md │ │ ├── tree.md │ │ ├── typography.md │ │ └── upload.md │ ├── fr-FR │ │ ├── alert.md │ │ ├── avatar.md │ │ ├── backtop.md │ │ ├── badge.md │ │ ├── border.md │ │ ├── breadcrumb.md │ │ ├── button.md │ │ ├── calendar.md │ │ ├── card.md │ │ ├── carousel.md │ │ ├── cascader.md │ │ ├── checkbox.md │ │ ├── collapse.md │ │ ├── color-picker.md │ │ ├── color.md │ │ ├── container.md │ │ ├── custom-theme.md │ │ ├── date-picker.md │ │ ├── datetime-picker.md │ │ ├── dialog.md │ │ ├── divider.md │ │ ├── drawer.md │ │ ├── dropdown.md │ │ ├── form.md │ │ ├── i18n.md │ │ ├── icon.md │ │ ├── image.md │ │ ├── infiniteScroll.md │ │ ├── input-number.md │ │ ├── input.md │ │ ├── installation.md │ │ ├── layout.md │ │ ├── link.md │ │ ├── loading.md │ │ ├── menu.md │ │ ├── message-box.md │ │ ├── message.md │ │ ├── notification.md │ │ ├── page-header.md │ │ ├── pagination.md │ │ ├── popconfirm.md │ │ ├── popover.md │ │ ├── progress.md │ │ ├── quickstart.md │ │ ├── radio.md │ │ ├── rate.md │ │ ├── select.md │ │ ├── slider.md │ │ ├── steps.md │ │ ├── switch.md │ │ ├── table.md │ │ ├── tabs.md │ │ ├── tag.md │ │ ├── time-picker.md │ │ ├── timeline.md │ │ ├── tooltip.md │ │ ├── transfer.md │ │ ├── transition.md │ │ ├── tree.md │ │ ├── typography.md │ │ └── upload.md │ └── zh-CN │ │ ├── alert.md │ │ ├── avatar.md │ │ ├── backtop.md │ │ ├── badge.md │ │ ├── border.md │ │ ├── breadcrumb.md │ │ ├── button.md │ │ ├── calendar.md │ │ ├── card.md │ │ ├── carousel.md │ │ ├── cascader.md │ │ ├── checkbox.md │ │ ├── collapse.md │ │ ├── color-picker.md │ │ ├── color.md │ │ ├── container.md │ │ ├── custom-theme.md │ │ ├── date-picker.md │ │ ├── datetime-picker.md │ │ ├── dialog.md │ │ ├── divider.md │ │ ├── drawer.md │ │ ├── dropdown.md │ │ ├── form.md │ │ ├── i18n.md │ │ ├── icon.md │ │ ├── image.md │ │ ├── infiniteScroll.md │ │ ├── input-number.md │ │ ├── input.md │ │ ├── installation.md │ │ ├── layout.md │ │ ├── link.md │ │ ├── loading.md │ │ ├── menu.md │ │ ├── message-box.md │ │ ├── message.md │ │ ├── notification.md │ │ ├── page-header.md │ │ ├── pagination.md │ │ ├── popconfirm.md │ │ ├── popover.md │ │ ├── progress.md │ │ ├── quickstart.md │ │ ├── radio.md │ │ ├── rate.md │ │ ├── select.md │ │ ├── slider.md │ │ ├── steps.md │ │ ├── switch.md │ │ ├── table.md │ │ ├── tabs.md │ │ ├── tag.md │ │ ├── time-picker.md │ │ ├── timeline.md │ │ ├── tooltip.md │ │ ├── transfer.md │ │ ├── transition.md │ │ ├── tree.md │ │ ├── typography.md │ │ └── upload.md ├── dom │ └── class.js ├── entry.js ├── extension │ ├── .gitignore │ └── src │ │ ├── app.js │ │ ├── background.js │ │ ├── editor │ │ ├── editor.vue │ │ ├── gallery.vue │ │ ├── icon-close.png │ │ ├── icon-entrance.png │ │ ├── index.vue │ │ └── utils.js │ │ ├── entry.js │ │ ├── icon.png │ │ └── manifest.json ├── favicon.ico ├── i18n │ ├── component.json │ ├── page.json │ ├── route.json │ ├── theme-editor.json │ └── title.json ├── icon.json ├── index.tpl ├── nav.config.json ├── pages │ └── template │ │ ├── changelog.tpl │ │ ├── component.tpl │ │ ├── design.tpl │ │ ├── guide.tpl │ │ ├── index.tpl │ │ ├── nav.tpl │ │ ├── resource.tpl │ │ ├── theme-nav.tpl │ │ ├── theme-preview.tpl │ │ └── theme.tpl ├── play.js ├── play │ └── index.vue ├── route.config.js ├── util.js └── versions.json ├── note.md ├── package-lock.json ├── package.json ├── packages ├── alert │ ├── index.js │ └── src │ │ └── main.vue ├── aside │ ├── index.js │ └── src │ │ └── main.vue ├── autocomplete │ ├── index.js │ └── src │ │ ├── autocomplete-suggestions.vue │ │ └── autocomplete.vue ├── avatar │ ├── index.js │ └── src │ │ └── main.vue ├── backtop │ ├── index.js │ └── src │ │ └── main.vue ├── badge │ ├── index.js │ └── src │ │ └── main.vue ├── breadcrumb-item │ └── index.js ├── breadcrumb │ ├── index.js │ └── src │ │ ├── breadcrumb-item.vue │ │ └── breadcrumb.vue ├── button-group │ └── index.js ├── button │ ├── index.js │ └── src │ │ ├── button-group.vue │ │ └── button.vue ├── calendar │ ├── index.js │ └── src │ │ ├── date-table.vue │ │ └── main.vue ├── card │ ├── index.js │ └── src │ │ └── main.vue ├── carousel-item │ └── index.js ├── carousel │ ├── index.js │ └── src │ │ ├── item.vue │ │ └── main.vue ├── cascader-panel │ ├── index.js │ └── src │ │ ├── cascader-menu.vue │ │ ├── cascader-node.vue │ │ ├── cascader-panel.vue │ │ ├── node.js │ │ └── store.js ├── cascader │ ├── index.js │ └── src │ │ └── cascader.vue ├── checkbox-button │ └── index.js ├── checkbox-group │ └── index.js ├── checkbox │ ├── index.js │ └── src │ │ ├── checkbox-button.vue │ │ ├── checkbox-group.vue │ │ └── checkbox.vue ├── col │ ├── index.js │ └── src │ │ └── col.js ├── collapse-item │ └── index.js ├── collapse │ ├── index.js │ └── src │ │ ├── collapse-item.vue │ │ └── collapse.vue ├── color-picker │ ├── index.js │ └── src │ │ ├── color.js │ │ ├── components │ │ ├── alpha-slider.vue │ │ ├── hue-slider.vue │ │ ├── picker-dropdown.vue │ │ ├── predefine.vue │ │ └── sv-panel.vue │ │ ├── draggable.js │ │ └── main.vue ├── container │ ├── index.js │ └── src │ │ └── main.vue ├── date-picker │ ├── index.js │ └── src │ │ ├── basic │ │ ├── date-table.vue │ │ ├── month-table.vue │ │ ├── time-spinner.vue │ │ └── year-table.vue │ │ ├── panel │ │ ├── date-range.vue │ │ ├── date.vue │ │ ├── month-range.vue │ │ ├── time-range.vue │ │ ├── time-select.vue │ │ └── time.vue │ │ ├── picker.vue │ │ └── picker │ │ ├── date-picker.js │ │ ├── time-picker.js │ │ └── time-select.js ├── dialog │ ├── index.js │ └── src │ │ └── component.vue ├── divider │ ├── index.js │ └── src │ │ └── main.vue ├── drawer │ ├── index.js │ └── src │ │ └── main.vue ├── dropdown-item │ └── index.js ├── dropdown-menu │ └── index.js ├── dropdown │ ├── index.js │ └── src │ │ ├── dropdown-item.vue │ │ ├── dropdown-menu.vue │ │ └── dropdown.vue ├── footer │ ├── index.js │ └── src │ │ └── main.vue ├── form-item │ └── index.js ├── form │ ├── index.js │ └── src │ │ ├── form-item.vue │ │ ├── form.vue │ │ └── label-wrap.vue ├── header │ ├── index.js │ └── src │ │ └── main.vue ├── icon │ ├── index.js │ └── src │ │ └── icon.vue ├── image │ ├── index.js │ └── src │ │ ├── image-viewer.vue │ │ └── main.vue ├── infinite-scroll │ ├── index.js │ └── src │ │ └── main.js ├── input-number │ ├── index.js │ └── src │ │ └── input-number.vue ├── input │ ├── index.js │ └── src │ │ ├── calcTextareaHeight.js │ │ └── input.vue ├── link │ ├── index.js │ └── src │ │ └── main.vue ├── loading │ ├── index.js │ └── src │ │ ├── directive.js │ │ ├── index.js │ │ └── loading.vue ├── main │ ├── index.js │ └── src │ │ └── main.vue ├── menu-item-group │ └── index.js ├── menu-item │ └── index.js ├── menu │ ├── index.js │ └── src │ │ ├── menu-item-group.vue │ │ ├── menu-item.vue │ │ ├── menu-mixin.js │ │ ├── menu.vue │ │ └── submenu.vue ├── message-box │ ├── index.js │ └── src │ │ ├── main.js │ │ └── main.vue ├── message │ ├── index.js │ └── src │ │ ├── main.js │ │ └── main.vue ├── notification │ ├── index.js │ └── src │ │ ├── main.js │ │ └── main.vue ├── option-group │ └── index.js ├── option │ └── index.js ├── page-header │ ├── index.js │ └── src │ │ └── main.vue ├── pagination │ ├── index.js │ └── src │ │ ├── pager.vue │ │ └── pagination.js ├── popconfirm │ ├── index.js │ └── src │ │ └── main.vue ├── popover │ ├── index.js │ └── src │ │ ├── directive.js │ │ └── main.vue ├── progress │ ├── index.js │ └── src │ │ └── progress.vue ├── radio-button │ └── index.js ├── radio-group │ └── index.js ├── radio │ ├── index.js │ └── src │ │ ├── radio-button.vue │ │ ├── radio-group.vue │ │ └── radio.vue ├── rate │ ├── index.js │ └── src │ │ └── main.vue ├── row │ ├── index.js │ └── src │ │ └── row.js ├── scrollbar │ ├── index.js │ └── src │ │ ├── bar.js │ │ ├── main.js │ │ └── util.js ├── select │ ├── index.js │ └── src │ │ ├── navigation-mixin.js │ │ ├── option-group.vue │ │ ├── option.vue │ │ ├── select-dropdown.vue │ │ └── select.vue ├── slider │ ├── index.js │ └── src │ │ ├── button.vue │ │ ├── main.vue │ │ └── marker.js ├── spinner │ ├── index.js │ └── src │ │ └── spinner.vue ├── step │ └── index.js ├── steps │ ├── README.md │ ├── index.js │ └── src │ │ ├── step.vue │ │ └── steps.vue ├── submenu │ └── index.js ├── switch │ ├── index.js │ └── src │ │ └── component.vue ├── tab-pane │ └── index.js ├── table-column │ └── index.js ├── table │ ├── index.js │ └── src │ │ ├── config.js │ │ ├── dropdown.js │ │ ├── filter-panel.vue │ │ ├── layout-observer.js │ │ ├── store │ │ ├── current.js │ │ ├── expand.js │ │ ├── helper.js │ │ ├── index.js │ │ ├── tree.js │ │ └── watcher.js │ │ ├── table-body.js │ │ ├── table-column.js │ │ ├── table-footer.js │ │ ├── table-header.js │ │ ├── table-layout.js │ │ ├── table.vue │ │ └── util.js ├── tabs │ ├── index.js │ └── src │ │ ├── tab-bar.vue │ │ ├── tab-nav.vue │ │ ├── tab-pane.vue │ │ └── tabs.vue ├── tag │ ├── index.js │ └── src │ │ └── tag.vue ├── theme-chalk │ ├── .gitignore │ ├── README.md │ ├── gulpfile.js │ ├── package.json │ └── src │ │ ├── alert.scss │ │ ├── aside.scss │ │ ├── autocomplete.scss │ │ ├── avatar.scss │ │ ├── backtop.scss │ │ ├── badge.scss │ │ ├── base.scss │ │ ├── breadcrumb-item.scss │ │ ├── breadcrumb.scss │ │ ├── button-group.scss │ │ ├── button.scss │ │ ├── calendar.scss │ │ ├── card.scss │ │ ├── carousel-item.scss │ │ ├── carousel.scss │ │ ├── cascader-panel.scss │ │ ├── cascader.scss │ │ ├── checkbox-button.scss │ │ ├── checkbox-group.scss │ │ ├── checkbox.scss │ │ ├── col.scss │ │ ├── collapse-item.scss │ │ ├── collapse.scss │ │ ├── color-picker.scss │ │ ├── common │ │ ├── popup.scss │ │ ├── transition.scss │ │ └── var.scss │ │ ├── container.scss │ │ ├── date-picker.scss │ │ ├── date-picker │ │ ├── date-picker.scss │ │ ├── date-range-picker.scss │ │ ├── date-table.scss │ │ ├── month-table.scss │ │ ├── picker-panel.scss │ │ ├── picker.scss │ │ ├── time-picker.scss │ │ ├── time-range-picker.scss │ │ ├── time-spinner.scss │ │ └── year-table.scss │ │ ├── dialog.scss │ │ ├── display.scss │ │ ├── divider.scss │ │ ├── drawer.scss │ │ ├── dropdown-item.scss │ │ ├── dropdown-menu.scss │ │ ├── dropdown.scss │ │ ├── fonts │ │ ├── element-icons.ttf │ │ └── element-icons.woff │ │ ├── footer.scss │ │ ├── form-item.scss │ │ ├── form.scss │ │ ├── header.scss │ │ ├── icon.scss │ │ ├── image.scss │ │ ├── index.scss │ │ ├── infinite-scroll.scss │ │ ├── infiniteScroll.scss │ │ ├── input-number.scss │ │ ├── input.scss │ │ ├── link.scss │ │ ├── loading.scss │ │ ├── main.scss │ │ ├── menu-item-group.scss │ │ ├── menu-item.scss │ │ ├── menu.scss │ │ ├── message-box.scss │ │ ├── message.scss │ │ ├── mixins │ │ ├── _button.scss │ │ ├── config.scss │ │ ├── function.scss │ │ ├── mixins.scss │ │ └── utils.scss │ │ ├── notification.scss │ │ ├── option-group.scss │ │ ├── option.scss │ │ ├── page-header.scss │ │ ├── pagination.scss │ │ ├── popconfirm.scss │ │ ├── popover.scss │ │ ├── popper.scss │ │ ├── progress.scss │ │ ├── radio-button.scss │ │ ├── radio-group.scss │ │ ├── radio.scss │ │ ├── rate.scss │ │ ├── reset.scss │ │ ├── row.scss │ │ ├── scrollbar.scss │ │ ├── select-dropdown.scss │ │ ├── select.scss │ │ ├── slider.scss │ │ ├── spinner.scss │ │ ├── step.scss │ │ ├── steps.scss │ │ ├── submenu.scss │ │ ├── switch.scss │ │ ├── tab-pane.scss │ │ ├── table-column.scss │ │ ├── table.scss │ │ ├── tabs.scss │ │ ├── tag.scss │ │ ├── time-picker.scss │ │ ├── time-select.scss │ │ ├── timeline-item.scss │ │ ├── timeline.scss │ │ ├── tooltip.scss │ │ ├── transfer.scss │ │ ├── tree.scss │ │ └── upload.scss ├── time-picker │ └── index.js ├── time-select │ └── index.js ├── timeline-item │ └── index.js ├── timeline │ ├── index.js │ └── src │ │ ├── item.vue │ │ └── main.vue ├── tooltip │ ├── index.js │ └── src │ │ └── main.js ├── transfer │ ├── index.js │ └── src │ │ ├── main.vue │ │ └── transfer-panel.vue ├── tree │ ├── index.js │ └── src │ │ ├── model │ │ ├── node.js │ │ ├── tree-store.js │ │ └── util.js │ │ ├── tree-node.vue │ │ └── tree.vue └── upload │ ├── index.js │ └── src │ ├── ajax.js │ ├── index.vue │ ├── upload-dragger.vue │ ├── upload-list.vue │ └── upload.vue ├── src ├── directives │ ├── mousewheel.js │ └── repeat-click.js ├── index.js ├── locale │ ├── format.js │ ├── index.js │ └── lang │ │ ├── af-ZA.js │ │ ├── ar.js │ │ ├── bg.js │ │ ├── ca.js │ │ ├── cs-CZ.js │ │ ├── da.js │ │ ├── de.js │ │ ├── ee.js │ │ ├── el.js │ │ ├── en.js │ │ ├── eo.js │ │ ├── es.js │ │ ├── eu.js │ │ ├── fa.js │ │ ├── fi.js │ │ ├── fr.js │ │ ├── he.js │ │ ├── hr.js │ │ ├── hu.js │ │ ├── hy-AM.js │ │ ├── id.js │ │ ├── it.js │ │ ├── ja.js │ │ ├── kg.js │ │ ├── km.js │ │ ├── ko.js │ │ ├── ku.js │ │ ├── kz.js │ │ ├── lt.js │ │ ├── lv.js │ │ ├── mn.js │ │ ├── nb-NO.js │ │ ├── nl.js │ │ ├── pl.js │ │ ├── pt-br.js │ │ ├── pt.js │ │ ├── ro.js │ │ ├── ru-RU.js │ │ ├── sk.js │ │ ├── sl.js │ │ ├── sr.js │ │ ├── sv-SE.js │ │ ├── ta.js │ │ ├── th.js │ │ ├── tk.js │ │ ├── tr-TR.js │ │ ├── ua.js │ │ ├── ug-CN.js │ │ ├── uz-UZ.js │ │ ├── vi.js │ │ ├── zh-CN.js │ │ └── zh-TW.js ├── mixins │ ├── emitter.js │ ├── focus.js │ ├── locale.js │ └── migrating.js ├── transitions │ └── collapse-transition.js └── utils │ ├── after-leave.js │ ├── aria-dialog.js │ ├── aria-utils.js │ ├── clickoutside.js │ ├── date-util.js │ ├── date.js │ ├── dom.js │ ├── menu │ ├── aria-menubar.js │ ├── aria-menuitem.js │ └── aria-submenu.js │ ├── merge.js │ ├── popper.js │ ├── popup │ ├── index.js │ └── popup-manager.js │ ├── resize-event.js │ ├── scroll-into-view.js │ ├── scrollbar-width.js │ ├── shared.js │ ├── types.js │ ├── util.js │ ├── vdom.js │ └── vue-popper.js ├── test ├── .eslintrc ├── ssr │ └── require.test.js └── unit │ ├── index.js │ ├── karma.conf.js │ ├── mocks │ └── uri.js │ ├── specs │ ├── alert.spec.js │ ├── autocomplete.spec.js │ ├── avatar.spec.js │ ├── backtop.spec.js │ ├── badge.spec.js │ ├── breadcrumb.spec.js │ ├── button.spec.js │ ├── calendar.spec.js │ ├── card.spec.js │ ├── carousel.spec.js │ ├── cascader-panel.spec.js │ ├── cascader.spec.js │ ├── checkbox.spec.js │ ├── col.spec.js │ ├── collapse.spec.js │ ├── color-picker.spec.js │ ├── container.spec.js │ ├── date-picker.spec.js │ ├── dialog.spec.js │ ├── divider.spec.js │ ├── drawer.spec.js │ ├── dropdown.spec.js │ ├── form.spec.js │ ├── image.spec.js │ ├── infiniteScroll.spec.js │ ├── input-number.spec.js │ ├── input.spec.js │ ├── link.spec.js │ ├── loading.spec.js │ ├── menu.spec.js │ ├── message-box.spec.js │ ├── message.spec.js │ ├── mixin.vue-popup.spec.js │ ├── notification.spec.js │ ├── page-header.spec.js │ ├── pagination.spec.js │ ├── popconfirm.spec.js │ ├── popover.spec.js │ ├── progress.spec.js │ ├── radio.spec.js │ ├── rate.spec.js │ ├── row.spec.js │ ├── select.spec.js │ ├── slider.spec.js │ ├── steps.spec.js │ ├── switch.spec.js │ ├── table.spec.js │ ├── tabs.spec.js │ ├── tag.spec.js │ ├── time-picker.spec.js │ ├── time-select.spec.js │ ├── timeline.spec.js │ ├── tooltip.spec.js │ ├── transfer.spec.js │ ├── tree.spec.js │ ├── upload.spec.js │ ├── util.clickoutside.spec.js │ └── util.vue-popper.spec.js │ └── util.js ├── types ├── alert.d.ts ├── aside.d.ts ├── autocomplete.d.ts ├── avatar.d.ts ├── backtop.d.ts ├── badge.d.ts ├── breadcrumb-item.d.ts ├── breadcrumb.d.ts ├── button-group.d.ts ├── button.d.ts ├── calendar.d.ts ├── card.d.ts ├── carousel-item.d.ts ├── carousel.d.ts ├── cascader-panel.d.ts ├── cascader.d.ts ├── checkbox-button.d.ts ├── checkbox-group.d.ts ├── checkbox.d.ts ├── col.d.ts ├── collapse-item.d.ts ├── collapse.d.ts ├── color-picker.d.ts ├── component.d.ts ├── container.d.ts ├── date-picker.d.ts ├── dialog.d.ts ├── divider.d.ts ├── drawer.d.ts ├── dropdown-item.d.ts ├── dropdown-menu.d.ts ├── dropdown.d.ts ├── element-ui.d.ts ├── footer.d.ts ├── form-item.d.ts ├── form.d.ts ├── header.d.ts ├── icon.d.ts ├── image.d.ts ├── index.d.ts ├── infinite-scroll.d.ts ├── input-number.d.ts ├── input.d.ts ├── link.d.ts ├── loading.d.ts ├── main.d.ts ├── menu-item-group.d.ts ├── menu-item.d.ts ├── menu.d.ts ├── message-box.d.ts ├── message.d.ts ├── notification.d.ts ├── option-group.d.ts ├── option.d.ts ├── page-header.d.ts ├── pagination.d.ts ├── popconfirm.d.ts ├── popover.d.ts ├── progress.d.ts ├── radio-button.d.ts ├── radio-group.d.ts ├── radio.d.ts ├── rate.d.ts ├── row.d.ts ├── select.d.ts ├── slider.d.ts ├── step.d.ts ├── steps.d.ts ├── submenu.d.ts ├── switch.d.ts ├── tab-pane.d.ts ├── table-column.d.ts ├── table.d.ts ├── tabs.d.ts ├── tag.d.ts ├── time-picker.d.ts ├── time-select.d.ts ├── timeline-item.d.ts ├── timeline.d.ts ├── tooltip.d.ts ├── transfer.d.ts ├── tree.d.ts └── upload.d.ts └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "loose": true, 7 | "modules": false, 8 | "targets": { 9 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 10 | } 11 | } 12 | ], 13 | "stage-2" 14 | ], 15 | "plugins": ["transform-vue-jsx"], 16 | "env": { 17 | "utils": { 18 | "presets": [ 19 | [ 20 | "env", 21 | { 22 | "loose": true, 23 | "modules": "commonjs", 24 | "targets": { 25 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 26 | } 27 | } 28 | ], 29 | ], 30 | "plugins": [ 31 | ["module-resolver", { 32 | "root": ["element-ui"], 33 | "alias": { 34 | "element-ui/src": "element-ui/lib" 35 | } 36 | }] 37 | ] 38 | }, 39 | "test": { 40 | "plugins": ["istanbul"] 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | src/utils/popper.js 2 | src/utils/date.js 3 | examples/play 4 | *.sh 5 | node_modules 6 | lib 7 | coverage 8 | *.md 9 | *.scss 10 | *.woff 11 | *.ttf 12 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "globals": { 3 | "ga": true, 4 | "chrome": true 5 | }, 6 | "plugins": ["html", "json"], 7 | "extends": "elemefe", 8 | "rules": { 9 | "no-restricted-globals": ["error", "event", "fdescribe"] 10 | }, 11 | "parserOptions": { 12 | "ecmaVersion": 6, 13 | "ecmaFeatures": { 14 | "jsx": true 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | test/**/*.js linguist-language=Vue 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: true 2 | contact_links: 3 | - name: Create new issue 4 | url: https://elementui.github.io/issue-generator 5 | about: The issue which is not created via https://elementui.github.io/issue-generator will be closed immediately. 6 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Please make sure these boxes are checked before submitting your PR, thank you! 2 | 3 | * [ ] Make sure you follow Element's contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md) | [Español](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.es.md) | [Français](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.fr-FR.md)). 4 | * [ ] Make sure you are merging your commits to `dev` branch. 5 | * [ ] Add some descriptions and refer relative issues for you PR. 6 | -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Number of days of inactivity before an issue becomes stale 2 | daysUntilStale: 365 3 | # Number of days of inactivity before a stale issue is closed 4 | daysUntilClose: 7 5 | # Issues with these labels will never be considered stale 6 | # exemptLabels: 7 | # - pinned 8 | # - security 9 | # Label to use when marking an issue as stale 10 | staleLabel: stale 11 | # Comment to post when marking an issue as stale. Set to `false` to disable 12 | markComment: > 13 | This issue has been automatically marked as stale because it has not had 14 | recent activity. It will be closed if no further activity occurs. Thank you 15 | for your contributions. 16 | # Comment to post when closing a stale issue. Set to `false` to disable 17 | closeComment: false -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | npm-debug.log 4 | yarn-debug.log 5 | yarn-error.log 6 | lerna-debug.log 7 | npm-debug.log.* 8 | yarn-debug.log.* 9 | yarn-error.log.* 10 | lerna-debug.log.* 11 | lib 12 | .idea 13 | .vscode 14 | examples/element-ui 15 | examples/pages/en-US 16 | examples/pages/zh-CN 17 | examples/pages/es 18 | examples/pages/fr-FR 19 | fe.element/element-ui 20 | .npmrc 21 | coverage 22 | waiter.config.js 23 | build/bin/algolia-key.js 24 | .envrc 25 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 10 4 | addons: 5 | chrome: stable 6 | before_install: 7 | - export TRAVIS_COMMIT_MSG="[deploy] $(git log --format='%h - %B' --no-merges -n 1)" 8 | - export TRAVIS_COMMIT_USER="$(git log --no-merges -n 1 --format=%an)" 9 | - export TRAVIS_COMMIT_EMAIL="$(git log --no-merges -n 1 --format=%ae)" 10 | after_success: 11 | - sh build/deploy-ci.sh 12 | - cat ./test/unit/coverage/lcov.info | ./node_modules/.bin/coveralls 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016-present ElemeFE 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 基本使用 2 | 3 | * 装包 4 | 5 | ```shel 6 | npm run bootstrap 7 | ``` 8 | 9 | * 运行官网 10 | 11 | ```shell 12 | npm run dev 13 | ``` 14 | 15 | * 运行普通示例 16 | 17 | ```shell 18 | npm run dev:play 19 | ``` 20 | 21 | * 打包 22 | 23 | ```shell 24 | npm run dist 25 | ``` 26 | 27 | # ElementUI 源码解读 28 | 29 | 详细讲解了 ElementUI 源码架构 30 | 31 | * 配套文章： 32 | 33 | * [掘金](https://juejin.cn/post/6935977815342841892) 34 | * [微信公众号](https://mp.weixin.qq.com/s?__biz=MzA3NTk4NjQ1OQ==&mid=2247484649&idx=1&sn=8ee67553193fda33e7c637568bb0a86f&chksm=9f69679da81eee8bba046776de07f8848ad9061e6c04ca781bf052fc9bcee70ea34a48c81864&token=1017613621&lang=zh_CN#rd) 35 | 36 | * 配套视频： 37 | 38 | * [B 站](https://www.bilibili.com/video/BV1pN41197t6?spm_id_from=333.999.0.0) 39 | 40 | # 框架依赖 41 | 42 | https://github.com/sass/node-sass/releases/tag/v4.14.1 43 | 44 | 很多人在本地跑 ElementUI 项目会报 node-sass 相关的错误，这里会涉及一个 node 版本兼容性的问题，我这边用的是 node@14 -------------------------------------------------------------------------------- /build/bin/iconInit.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * 根据 icon.scss 样式文件中的选择器，通过正则匹配的方式，匹配出所有的 icon 名称， 5 | * 然后将所有 icon 名组成的数组写入到 /examples/icon.json 文件中 6 | * 该文件在官网的 icon 图标页用来自动生成所有的 icon 图标 7 | */ 8 | var postcss = require('postcss'); 9 | var fs = require('fs'); 10 | var path = require('path'); 11 | // icon.scss 文件内容 12 | var fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/theme-chalk/src/icon.scss'), 'utf8'); 13 | // 得到样式节点 14 | var nodes = postcss.parse(fontFile).nodes; 15 | var classList = []; 16 | 17 | // 遍历所有的样式节点 18 | nodes.forEach((node) => { 19 | // 从选择器中匹配出 icon 名称，比如 el-icon-add，匹配得到 add 20 | var selector = node.selector || ''; 21 | var reg = new RegExp(/\.el-icon-([^:]+):before/); 22 | var arr = selector.match(reg); 23 | 24 | // 将 icon 名称写入数组, 25 | if (arr && arr[1]) { 26 | classList.push(arr[1]); 27 | } 28 | }); 29 | 30 | classList.reverse(); // 希望按 css 文件顺序倒序排列 31 | 32 | // 将 icon 名组成的数组写入 /examples/icon.json 文件 33 | fs.writeFile(path.resolve(__dirname, '../../examples/icon.json'), JSON.stringify(classList), () => {}); 34 | -------------------------------------------------------------------------------- /build/bin/template.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 监听 /examples/pages/template 目录下的所有模版文件，当模版文件发生改变时自动执行 npm run i18n， 3 | * 即执行 i18n.js 脚本，重新生成四种语言的 .vue 文件 4 | */ 5 | 6 | const path = require('path'); 7 | // 监听目录 8 | const templates = path.resolve(process.cwd(), './examples/pages/template'); 9 | 10 | // 负责监听的库 11 | const chokidar = require('chokidar'); 12 | // 监听模板目录 13 | let watcher = chokidar.watch([templates]); 14 | 15 | // 当目录下的文件发生改变时，自动执行 npm run i18n 16 | watcher.on('ready', function() { 17 | watcher 18 | .on('change', function() { 19 | exec('npm run i18n'); 20 | }); 21 | }); 22 | 23 | // 负责执行命令 24 | function exec(cmd) { 25 | return require('child_process').execSync(cmd).toString().trim(); 26 | } 27 | -------------------------------------------------------------------------------- /build/bin/version.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 根据 package.json 自动生成 /examples/version.json，用于记录组件库的版本信息 3 | * 这些版本信息在官网组件页面的头部导航栏会用到 4 | */ 5 | var fs = require('fs'); 6 | var path = require('path'); 7 | var version = process.env.VERSION || require('../../package.json').version; 8 | var content = { '1.4.13': '1.4', '2.0.11': '2.0', '2.1.0': '2.1', '2.2.2': '2.2', '2.3.9': '2.3', '2.4.11': '2.4', '2.5.4': '2.5', '2.6.3': '2.6', '2.7.2': '2.7', '2.8.2': '2.8', '2.9.2': '2.9', '2.10.1': '2.10', '2.11.1': '2.11', '2.12.0': '2.12', '2.13.2': '2.13', '2.14.1': '2.14' }; 9 | if (!content[version]) content[version] = '2.15'; 10 | fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content)); 11 | -------------------------------------------------------------------------------- /build/deploy-faas.sh: -------------------------------------------------------------------------------- 1 | #! /bin/sh 2 | set -ex 3 | mkdir temp_web 4 | npm run deploy:build 5 | cd temp_web 6 | git clone --depth 1 -b gh-pages --single-branch https://github.com/ElemeFE/element.git && cd element 7 | 8 | # build sub folder 9 | SUB_FOLDER='2.15' 10 | mkdir -p $SUB_FOLDER 11 | rm -rf *.js *.css *.map static 12 | rm -rf $SUB_FOLDER/** 13 | cp -rf ../../examples/element-ui/** . 14 | cp -rf ../../examples/element-ui/** $SUB_FOLDER/ 15 | cd ../.. 16 | 17 | # deploy domestic site 18 | faas deploy daily -P element 19 | rm -rf temp_web 20 | -------------------------------------------------------------------------------- /build/gen-single-config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 生成 webpack 基础配置骨架，但是没用 3 | */ 4 | 5 | var path = require('path'); 6 | var config = require('./config'); 7 | 8 | module.exports = function(context, moduleName, entry) { 9 | return { 10 | entry: { 11 | index: path.resolve(context, entry || 'index.js') 12 | }, 13 | dist: path.resolve(context, 'lib'), 14 | template: false, 15 | format: 'umd', 16 | moduleName: moduleName, 17 | extends: ['vue2'], 18 | alias: config.alias, 19 | externals: { vue: config.vue } 20 | }; 21 | }; 22 | -------------------------------------------------------------------------------- /build/git-release.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # 这里主要是和远程的 dev 分支做 diff 然后合并 4 | 5 | git checkout dev 6 | 7 | if test -n "$(git status --porcelain)"; then 8 | echo 'Unclean working tree. Commit or stash changes first.' >&2; 9 | exit 128; 10 | fi 11 | 12 | if ! git fetch --quiet 2>/dev/null; then 13 | echo 'There was a problem fetching your branch. Run `git fetch` to see more...' >&2; 14 | exit 128; 15 | fi 16 | 17 | if test "0" != "$(git rev-list --count --left-only @'{u}'...HEAD)"; then 18 | echo 'Remote history differ. Please pull changes.' >&2; 19 | exit 128; 20 | fi 21 | 22 | echo 'No conflicts.' >&2; 23 | -------------------------------------------------------------------------------- /build/md-loader/config.js: -------------------------------------------------------------------------------- 1 | const Config = require('markdown-it-chain'); 2 | const anchorPlugin = require('markdown-it-anchor'); 3 | const slugify = require('transliteration').slugify; 4 | const containers = require('./containers'); 5 | const overWriteFenceRule = require('./fence'); 6 | 7 | const config = new Config(); 8 | 9 | config 10 | .options.html(true).end() 11 | 12 | .plugin('anchor').use(anchorPlugin, [ 13 | { 14 | level: 2, 15 | slugify: slugify, 16 | permalink: true, 17 | permalinkBefore: true 18 | } 19 | ]).end() 20 | 21 | .plugin('containers').use(containers).end(); 22 | 23 | const md = config.toMd(); 24 | overWriteFenceRule(md); 25 | 26 | module.exports = md; 27 | -------------------------------------------------------------------------------- /build/md-loader/containers.js: -------------------------------------------------------------------------------- 1 | const mdContainer = require('markdown-it-container'); 2 | 3 | module.exports = md => { 4 | md.use(mdContainer, 'demo', { 5 | validate(params) { 6 | return params.trim().match(/^demo\s*(.*)$/); 7 | }, 8 | render(tokens, idx) { 9 | const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/); 10 | if (tokens[idx].nesting === 1) { 11 | const description = m && m.length > 1 ? m[1] : ''; 12 | const content = tokens[idx + 1].type === 'fence' ? tokens[idx + 1].content : ''; 13 | return ` 14 | ${description ? `
${md.render(description)}
` : ''} 15 | 16 | `; 17 | } 18 | return ''; 19 | } 20 | }); 21 | 22 | md.use(mdContainer, 'tip'); 23 | md.use(mdContainer, 'warning'); 24 | }; 25 | -------------------------------------------------------------------------------- /build/md-loader/fence.js: -------------------------------------------------------------------------------- 1 | // 覆盖默认的 fence 渲染策略 2 | module.exports = md => { 3 | const defaultRender = md.renderer.rules.fence; 4 | md.renderer.rules.fence = (tokens, idx, options, env, self) => { 5 | const token = tokens[idx]; 6 | // 判断该 fence 是否在 :::demo 内 7 | const prevToken = tokens[idx - 1]; 8 | const isInDemoContainer = prevToken && prevToken.nesting === 1 && prevToken.info.trim().match(/^demo\s*(.*)$/); 9 | if (token.info === 'html' && isInDemoContainer) { 10 | return ``; 11 | } 12 | return defaultRender(tokens, idx, options, env, self); 13 | }; 14 | }; 15 | -------------------------------------------------------------------------------- /examples/assets/images/button-d-cn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/button-d-cn.png -------------------------------------------------------------------------------- /examples/assets/images/button-d-en.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/button-d-en.png -------------------------------------------------------------------------------- /examples/assets/images/button-l-cn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/button-l-cn.png -------------------------------------------------------------------------------- /examples/assets/images/button-l-en.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/button-l-en.png -------------------------------------------------------------------------------- /examples/assets/images/cloud-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/cloud-1.png -------------------------------------------------------------------------------- /examples/assets/images/cloud-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/cloud-2.png -------------------------------------------------------------------------------- /examples/assets/images/compo-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/compo-1.png -------------------------------------------------------------------------------- /examples/assets/images/compo-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/compo-2.png -------------------------------------------------------------------------------- /examples/assets/images/compo-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/compo-3.png -------------------------------------------------------------------------------- /examples/assets/images/component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/component.png -------------------------------------------------------------------------------- /examples/assets/images/consistency.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/consistency.png -------------------------------------------------------------------------------- /examples/assets/images/controllability.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/controllability.png -------------------------------------------------------------------------------- /examples/assets/images/dialog-close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/dialog-close.png -------------------------------------------------------------------------------- /examples/assets/images/efficiency.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/efficiency.png -------------------------------------------------------------------------------- /examples/assets/images/element-demo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/element-demo.jpeg -------------------------------------------------------------------------------- /examples/assets/images/feedback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/feedback.png -------------------------------------------------------------------------------- /examples/assets/images/figure-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/figure-1.png -------------------------------------------------------------------------------- /examples/assets/images/figure-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/figure-2.png -------------------------------------------------------------------------------- /examples/assets/images/guide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/guide.png -------------------------------------------------------------------------------- /examples/assets/images/hamburger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/hamburger.png -------------------------------------------------------------------------------- /examples/assets/images/icon-check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/icon-check.png -------------------------------------------------------------------------------- /examples/assets/images/icon-copy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/icon-copy.png -------------------------------------------------------------------------------- /examples/assets/images/icon-download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/icon-download.png -------------------------------------------------------------------------------- /examples/assets/images/icon-edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/icon-edit.png -------------------------------------------------------------------------------- /examples/assets/images/intro-theme-b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/intro-theme-b.png -------------------------------------------------------------------------------- /examples/assets/images/navbar_0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/navbar_0.png -------------------------------------------------------------------------------- /examples/assets/images/navbar_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/navbar_1.png -------------------------------------------------------------------------------- /examples/assets/images/navbar_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/navbar_2.png -------------------------------------------------------------------------------- /examples/assets/images/navbar_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/navbar_3.png -------------------------------------------------------------------------------- /examples/assets/images/plant-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/plant-1.png -------------------------------------------------------------------------------- /examples/assets/images/plant-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/plant-2.png -------------------------------------------------------------------------------- /examples/assets/images/qrcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/qrcode.png -------------------------------------------------------------------------------- /examples/assets/images/resource.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/resource.png -------------------------------------------------------------------------------- /examples/assets/images/term-arial.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/term-arial.png -------------------------------------------------------------------------------- /examples/assets/images/term-helvetica.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/term-helvetica.png -------------------------------------------------------------------------------- /examples/assets/images/term-hiragino.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/term-hiragino.png -------------------------------------------------------------------------------- /examples/assets/images/term-microsoft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/term-microsoft.png -------------------------------------------------------------------------------- /examples/assets/images/term-pingfang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/term-pingfang.png -------------------------------------------------------------------------------- /examples/assets/images/term-sf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/term-sf.png -------------------------------------------------------------------------------- /examples/assets/images/theme-index-blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/theme-index-blue.png -------------------------------------------------------------------------------- /examples/assets/images/theme-index-red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/theme-index-red.png -------------------------------------------------------------------------------- /examples/assets/images/theme-intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/theme-intro.png -------------------------------------------------------------------------------- /examples/assets/images/typography.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/typography.png -------------------------------------------------------------------------------- /examples/assets/images/web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/images/web.png -------------------------------------------------------------------------------- /examples/assets/styles/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/styles/fonts/icomoon.eot -------------------------------------------------------------------------------- /examples/assets/styles/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/styles/fonts/icomoon.ttf -------------------------------------------------------------------------------- /examples/assets/styles/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/assets/styles/fonts/icomoon.woff -------------------------------------------------------------------------------- /examples/assets/styles/fonts/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src: url('icomoon.eot?h6xgdm'); 4 | src: url('icomoon.eot?h6xgdm#iefix') format('embedded-opentype'), 5 | url('icomoon.ttf?h6xgdm') format('truetype'), 6 | url('icomoon.woff?h6xgdm') format('woff'), 7 | url('icomoon.svg?h6xgdm#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], [class*=" icon-"] { 13 | /* use !important to prevent issues with browser extensions that change fonts */ 14 | font-family: 'icomoon' !important; 15 | speak: none; 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | 22 | /* Better Font Rendering =========== */ 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | 27 | .icon-rate-face-off:before { 28 | content: "\e900"; 29 | } 30 | .icon-rate-face-1:before { 31 | content: "\e901"; 32 | } 33 | .icon-rate-face-2:before { 34 | content: "\e902"; 35 | } 36 | .icon-rate-face-3:before { 37 | content: "\e903"; 38 | } 39 | 40 | -------------------------------------------------------------------------------- /examples/bus.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | export default new Vue(); 3 | -------------------------------------------------------------------------------- /examples/color.js: -------------------------------------------------------------------------------- 1 | export const tintColor = (c, tint) => { 2 | const color = c.replace('#', ''); 3 | let red = parseInt(color.slice(0, 2), 16); 4 | let green = parseInt(color.slice(2, 4), 16); 5 | let blue = parseInt(color.slice(4, 6), 16); 6 | 7 | if (tint === 0) { // when primary color is in its rgb space 8 | return [red, green, blue].join(','); 9 | } else { 10 | red += Math.round(tint * (255 - red)); 11 | green += Math.round(tint * (255 - green)); 12 | blue += Math.round(tint * (255 - blue)); 13 | red = red.toString(16); 14 | green = green.toString(16); 15 | blue = blue.toString(16); 16 | return `#${ red }${ green }${ blue }`; 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /examples/components/theme-configurator/editor/color-picker/index.js: -------------------------------------------------------------------------------- 1 | import ColorPicker from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | ColorPicker.install = function(Vue) { 5 | Vue.component(ColorPicker.name, ColorPicker); 6 | }; 7 | 8 | export default ColorPicker; 9 | -------------------------------------------------------------------------------- /examples/components/theme-configurator/editor/color-picker/src/draggable.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | let isDragging = false; 3 | 4 | export default function(element, options) { 5 | if (Vue.prototype.$isServer) return; 6 | const moveFn = function(event) { 7 | if (options.drag) { 8 | options.drag(event); 9 | } 10 | }; 11 | const upFn = function(event) { 12 | document.removeEventListener('mousemove', moveFn); 13 | document.removeEventListener('mouseup', upFn); 14 | document.onselectstart = null; 15 | document.ondragstart = null; 16 | 17 | isDragging = false; 18 | 19 | if (options.end) { 20 | options.end(event); 21 | } 22 | }; 23 | element.addEventListener('mousedown', function(event) { 24 | if (isDragging) return; 25 | document.onselectstart = function() { return false; }; 26 | document.ondragstart = function() { return false; }; 27 | 28 | document.addEventListener('mousemove', moveFn); 29 | document.addEventListener('mouseup', upFn); 30 | isDragging = true; 31 | 32 | if (options.start) { 33 | options.start(event); 34 | } 35 | }); 36 | } 37 | -------------------------------------------------------------------------------- /examples/components/theme-configurator/editor/input.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | -------------------------------------------------------------------------------- /examples/components/theme-configurator/editor/simpleText.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | -------------------------------------------------------------------------------- /examples/components/theme-configurator/shortcut.vue: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/components/theme/constant.js: -------------------------------------------------------------------------------- 1 | export const DEFAULT_THEME_CONFIG = { 2 | global: {}, 3 | local: {} 4 | }; 5 | 6 | export const ELEMENT_THEME_USER_CONFIG = 'ELEMENT_THEME_USER_CONFIG'; 7 | 8 | export const ELEMENT_THEME_PREVIEW_CONFIG = 'ELEMENT_THEME_PREVIEW_CONFIG'; 9 | 10 | export const ACTION_DOWNLOAD_THEME = 'ELEMENT_THEME_ACTION_DOWNLOAD'; 11 | 12 | export const ACTION_APPLY_THEME = 'ELEMENT_THEME_ACTION_ALLPY_CSS'; 13 | 14 | export const ACTION_COMPONECT_SELECT = 'ELEMENT_THEME_ACTION_COMPONECT_SELECT'; 15 | 16 | export const ACTION_USER_CONFIG_UPDATE = 'ELEMENT_THEME_USER_CONFIG_UPDATE'; 17 | -------------------------------------------------------------------------------- /examples/components/theme/loader/api.js: -------------------------------------------------------------------------------- 1 | import Element from 'main/index.js'; 2 | import { post, get } from './ajax'; 3 | 4 | const { version } = Element; 5 | 6 | const hostList = { 7 | local: 'http://localhost:3008/', 8 | alpha: 'https://element-api.ar.elenet.me/element/theme/', 9 | production: 'https://element-api.ele.me/element/theme/' 10 | }; 11 | 12 | const host = hostList[process.env.FAAS_ENV] || hostList.production; 13 | 14 | export const getVars = () => { 15 | return get(`${host}getVariable?version=${version}`); 16 | }; 17 | 18 | export const getTestEle = () => { 19 | return get(`${hostList.alpha}getVariable`); 20 | }; 21 | 22 | export const updateVars = (data, cb) => { 23 | return post(`${host}updateVariable?version=${version}`, data, cb); 24 | }; 25 | -------------------------------------------------------------------------------- /examples/components/theme/loader/loading/index.vue: -------------------------------------------------------------------------------- 1 | 10 | 36 | -------------------------------------------------------------------------------- /examples/components/theme/loader/loading/progress.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import ProgressBar from './progress.vue'; 3 | 4 | Vue.prototype.$bar = new Vue(ProgressBar).$mount(); 5 | 6 | document.body.appendChild(Vue.prototype.$bar.$el); 7 | -------------------------------------------------------------------------------- /examples/components/theme/localstorage.js: -------------------------------------------------------------------------------- 1 | import { 2 | ELEMENT_THEME_PREVIEW_CONFIG, 3 | ELEMENT_THEME_USER_CONFIG 4 | } from './constant'; 5 | 6 | export const saveToLocal = (key, value) => { 7 | localStorage.setItem(key, JSON.stringify(value)); 8 | }; 9 | 10 | export const loadFromLocal = (key) => { 11 | try { 12 | return JSON.parse(localStorage.getItem(key)); 13 | } catch (e) { 14 | console.error(e); 15 | return null; 16 | } 17 | }; 18 | 19 | export const savePreviewToLocal = (value) => { 20 | saveToLocal(ELEMENT_THEME_PREVIEW_CONFIG, value); 21 | }; 22 | 23 | export const loadPreviewFromLocal = () => { 24 | return loadFromLocal(ELEMENT_THEME_PREVIEW_CONFIG) || {}; 25 | }; 26 | 27 | export const removePreviewFromLocal = () => { 28 | return localStorage.removeItem(ELEMENT_THEME_PREVIEW_CONFIG); 29 | }; 30 | 31 | export const saveUserThemeToLocal = (value) => { 32 | saveToLocal(ELEMENT_THEME_USER_CONFIG, value); 33 | }; 34 | 35 | export const loadUserThemeFromLocal = () => { 36 | return loadFromLocal(ELEMENT_THEME_USER_CONFIG); 37 | }; 38 | 39 | -------------------------------------------------------------------------------- /examples/components/theme/utils.js: -------------------------------------------------------------------------------- 1 | export const isEmptyObject = (obj) => (JSON.stringify(obj) === '{}'); 2 | 3 | export const getThemeConfigObject = (config) => { 4 | try { 5 | const conf = JSON.parse(config); 6 | const { global, local } = conf; 7 | if (!isEmptyObject(global) || !isEmptyObject(local)) { 8 | return conf; 9 | } 10 | return false; 11 | } catch (e) { 12 | return false; 13 | } 14 | }; 15 | 16 | export const updateDomHeadStyle = (id, styleContent) => { 17 | let styleTag = document.getElementById(id); 18 | if (!styleTag) { 19 | styleTag = document.createElement('style'); 20 | styleTag.setAttribute('id', id); 21 | document.head.appendChild(styleTag); 22 | } 23 | styleTag.innerText = styleContent.replace(/@font-face{[^}]+}/, ''); 24 | }; 25 | -------------------------------------------------------------------------------- /examples/demo-styles/alert.scss: -------------------------------------------------------------------------------- 1 | .demo-block.demo-alert .el-alert { 2 | margin: 20px 0 0; 3 | } 4 | 5 | .demo-block.demo-alert .el-alert:first-child { 6 | margin: 0; 7 | } 8 | -------------------------------------------------------------------------------- /examples/demo-styles/badge.scss: -------------------------------------------------------------------------------- 1 | .demo-badge.demo-block .el-dropdown { 2 | vertical-align: middle; 3 | } 4 | .demo-badge.demo-block { 5 | .share-button { 6 | width: 36px; 7 | padding: 10px; 8 | } 9 | 10 | .mark { 11 | margin-top: 8px; 12 | line-height: 1; 13 | float: right; 14 | } 15 | 16 | .item { 17 | margin-right: 40px; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/demo-styles/border.scss: -------------------------------------------------------------------------------- 1 | .demo-border .text { 2 | width: 15%; 3 | } 4 | .demo-border .line { 5 | width: 70%; 6 | } 7 | .demo-border .line div { 8 | width: 100%; 9 | height: 0; 10 | border-top: 1px solid #eee; 11 | } 12 | .demo-border .line .dashed { 13 | border-top: 2px dashed #eee; 14 | } 15 | .demo-shadow { 16 | height: 100px; 17 | width: 50%; 18 | border: 1px solid #eee; 19 | } 20 | .demo-shadow-text { 21 | line-height: 50px; 22 | color: #666; 23 | font-size: 14px; 24 | } 25 | .demo-radius .title { 26 | color: #666; 27 | font-size: 18px; 28 | margin: 10px 0; 29 | } 30 | .demo-radius .value { 31 | color: #333; 32 | font-size: 16px; 33 | margin: 10px 0; 34 | } 35 | .demo-radius .radius { 36 | height: 60px; 37 | width: 70%; 38 | border: 1px solid #d7dae2; 39 | border-radius: 0; 40 | margin-top: 20px; 41 | } 42 | .demo-radius .radius-30 { 43 | border-radius: 30px; 44 | } 45 | -------------------------------------------------------------------------------- /examples/demo-styles/button.scss: -------------------------------------------------------------------------------- 1 | .demo-block.demo-button { 2 | .el-row { 3 | margin-bottom: 20px; 4 | 5 | &:last-child { 6 | margin-bottom: 0; 7 | } 8 | } 9 | .el-button + .el-button { 10 | margin-left: 10px; 11 | } 12 | .el-button-group { 13 | .el-button + .el-button { 14 | margin-left: 0; 15 | } 16 | 17 | & + .el-button-group { 18 | margin-left: 10px; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/demo-styles/calendar.scss: -------------------------------------------------------------------------------- 1 | .demo-calendar.demo-block { 2 | .is-selected { 3 | color: #1989FA; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /examples/demo-styles/card.scss: -------------------------------------------------------------------------------- 1 | .demo-block.demo-card { 2 | .text { 3 | font-size: 14px; 4 | } 5 | 6 | .time { 7 | font-size: 13px; 8 | color: #999; 9 | } 10 | 11 | .bottom { 12 | margin-top: 13px; 13 | line-height: 12px; 14 | } 15 | 16 | .item { 17 | margin-bottom: 18px; 18 | } 19 | 20 | .button { 21 | padding: 0; 22 | float: right; 23 | } 24 | 25 | .image { 26 | width: 100%; 27 | display: block; 28 | } 29 | 30 | .box-card { 31 | width: 480px; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /examples/demo-styles/carousel.scss: -------------------------------------------------------------------------------- 1 | .demo-carousel .block { 2 | padding: 30px; 3 | text-align: center; 4 | border-right: solid 1px #eff2f6; 5 | display: inline-block; 6 | width: 49%; 7 | box-sizing: border-box; 8 | &:last-child { 9 | border-right: none; 10 | } 11 | } 12 | 13 | .demo-carousel .demonstration { 14 | display: block; 15 | color: #8492a6; 16 | font-size: 14px; 17 | margin-bottom: 20px; 18 | } 19 | 20 | .demo-carousel .el-carousel__container { 21 | text-align: center; 22 | } 23 | 24 | .demo-carousel .el-carousel__item { 25 | h3 { 26 | color: #fff; 27 | font-size: 18px; 28 | line-height: 300px; 29 | margin: 0; 30 | &.small { 31 | font-size: 14px; 32 | line-height: 150px; 33 | } 34 | &.medium { 35 | font-size: 14px; 36 | line-height: 200px; 37 | } 38 | } 39 | &:nth-child(2n) { 40 | background-color: #99a9bf; 41 | } 42 | &:nth-child(2n + 1) { 43 | background-color: #d3dce6; 44 | } 45 | } 46 | 47 | -------------------------------------------------------------------------------- /examples/demo-styles/cascader.scss: -------------------------------------------------------------------------------- 1 | .demo-cascader { 2 | .el-cascader { 3 | width: 222px; 4 | } 5 | } 6 | .demo-cascader-size { 7 | .el-cascader { 8 | vertical-align: top; 9 | margin-right: 15px; 10 | } 11 | } 12 | .demo-cascader .source > div { 13 | display: flex; 14 | } 15 | .demo-cascader .block { 16 | padding: 30px 0; 17 | text-align: center; 18 | border-right: solid 1px #eff2f6; 19 | width: 50%; 20 | box-sizing: border-box; 21 | &:last-child { 22 | border-right: none; 23 | } 24 | } 25 | .demo-cascader .demonstration { 26 | display: block; 27 | color: #8492a6; 28 | font-size: 14px; 29 | margin-bottom: 20px; 30 | } 31 | -------------------------------------------------------------------------------- /examples/demo-styles/collapse.scss: -------------------------------------------------------------------------------- 1 | .demo-collapse { 2 | .el-collapse-item__header { 3 | .header-icon { 4 | margin-left: 5px; 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /examples/demo-styles/color-picker.scss: -------------------------------------------------------------------------------- 1 | .demo-color-picker .block { 2 | padding: 30px 0; 3 | text-align: center; 4 | border-right: solid 1px #eff2f6; 5 | display: inline-block; 6 | width: 50%; 7 | box-sizing: border-box; 8 | &:last-child { 9 | border-right: none; 10 | } 11 | } 12 | .demo-color-picker .demonstration { 13 | display: block; 14 | color: #8492a6; 15 | font-size: 14px; 16 | margin-bottom: 20px; 17 | } 18 | .demo-color-picker .el-color-picker + .el-color-picker { 19 | margin-left: 20px; 20 | } 21 | -------------------------------------------------------------------------------- /examples/demo-styles/container.scss: -------------------------------------------------------------------------------- 1 | .el-header, 2 | .el-footer { 3 | background-color: #b3c0d1; 4 | color: #333; 5 | line-height: 60px; 6 | } 7 | 8 | .el-aside { 9 | color: #333; 10 | } 11 | 12 | #chang-jian-ye-mian-bu-ju + .demo-container { 13 | .el-header, 14 | .el-footer { 15 | text-align: center; 16 | } 17 | 18 | .el-aside { 19 | background-color: #d3dce6; 20 | text-align: center; 21 | line-height: 200px; 22 | } 23 | 24 | .el-main { 25 | background-color: #e9eef3; 26 | color: #333; 27 | text-align: center; 28 | line-height: 160px; 29 | } 30 | 31 | & > .source > .el-container { 32 | margin-bottom: 40px; 33 | 34 | &:nth-child(5) .el-aside, 35 | &:nth-child(6) .el-aside { 36 | line-height: 260px; 37 | } 38 | 39 | &:nth-child(7) .el-aside { 40 | line-height: 320px; 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /examples/demo-styles/date-picker.scss: -------------------------------------------------------------------------------- 1 | .demo-block.demo-date-picker .source > div { 2 | padding: 0; 3 | display: flex; 4 | flex-wrap: wrap; 5 | } 6 | 7 | .demo-date-picker .block { 8 | padding: 30px 0; 9 | text-align: center; 10 | border-right: solid 1px #eff2f6; 11 | flex: 1; 12 | &:last-child { 13 | border-right: none; 14 | } 15 | } 16 | 17 | .demo-date-picker .container { 18 | flex: 1; 19 | border-right: solid 1px #eff2f6; 20 | .block { 21 | border-right: none; 22 | &:last-child { 23 | border-top: solid 1px #eff2f6; 24 | } 25 | } 26 | &:last-child { 27 | border-right: none; 28 | } 29 | } 30 | 31 | .demo-date-picker .demonstration { 32 | display: block; 33 | color: #8492a6; 34 | font-size: 14px; 35 | margin-bottom: 20px; 36 | } 37 | -------------------------------------------------------------------------------- /examples/demo-styles/datetime-picker.scss: -------------------------------------------------------------------------------- 1 | .demo-block.demo-datetime-picker .source > div { 2 | padding: 0; 3 | display: flex; 4 | } 5 | 6 | .demo-datetime-picker .block { 7 | padding: 30px 0; 8 | text-align: center; 9 | border-right: solid 1px #eff2f6; 10 | flex: 1; 11 | &:last-child { 12 | border-right: none; 13 | } 14 | } 15 | 16 | .demo-datetime-picker .demonstration { 17 | display: block; 18 | color: #8492a6; 19 | font-size: 14px; 20 | margin-bottom: 20px; 21 | } 22 | -------------------------------------------------------------------------------- /examples/demo-styles/dialog.scss: -------------------------------------------------------------------------------- 1 | .demo-block.demo-dialog { 2 | .dialog-footer button:first-child { 3 | margin-right: 10px; 4 | } 5 | .full-image { 6 | width: 100%; 7 | } 8 | .el-dialog__wrapper { 9 | margin: 0; 10 | } 11 | .el-select { 12 | width: 300px; 13 | } 14 | .el-input { 15 | width: 300px; 16 | } 17 | .el-button--text { 18 | margin-right: 15px; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/demo-styles/divider.scss: -------------------------------------------------------------------------------- 1 | .demo-divider-container-1 { 2 | display: inline-block; 3 | width: 33%; 4 | } 5 | 6 | .demo-divider-container-2 { 7 | display: inline-block; 8 | width: 50%; 9 | } -------------------------------------------------------------------------------- /examples/demo-styles/drawer.scss: -------------------------------------------------------------------------------- 1 | .demo-drawer { 2 | &__content { 3 | display: flex; 4 | flex-direction: column; 5 | height: 100%; 6 | form { 7 | flex: 1; 8 | } 9 | } 10 | 11 | &__footer { 12 | display: flex; 13 | button { 14 | flex: 1; 15 | } 16 | } 17 | } 18 | 19 | .el-drawer__body { 20 | padding: 20px; 21 | } 22 | -------------------------------------------------------------------------------- /examples/demo-styles/dropdown.scss: -------------------------------------------------------------------------------- 1 | .demo-block { 2 | .el-dropdown { 3 | vertical-align: top; 4 | 5 | & + .el-dropdown { 6 | margin-left: 15px; 7 | } 8 | } 9 | .el-dropdown-link { 10 | cursor: pointer; 11 | color: #409eff; 12 | } 13 | .el-icon-arrow-down { 14 | font-size: 12px; 15 | } 16 | } 17 | 18 | .block-col-2 { 19 | margin: -24px; 20 | 21 | .el-col { 22 | padding: 30px 0; 23 | text-align: center; 24 | border-right: 1px solid #eff2f6; 25 | 26 | &:last-child { 27 | border-right: 0; 28 | } 29 | } 30 | } 31 | 32 | .demo-dropdown .demonstration { 33 | display: block; 34 | color: #8492a6; 35 | font-size: 14px; 36 | margin-bottom: 20px; 37 | } 38 | -------------------------------------------------------------------------------- /examples/demo-styles/i18n.scss: -------------------------------------------------------------------------------- 1 | ul.language-list { 2 | color: #5e6d82; 3 | font-size: 14px; 4 | padding-left: 20px; 5 | li { 6 | line-height: 1.8; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /examples/demo-styles/infinite-scroll.scss: -------------------------------------------------------------------------------- 1 | .infinite-list { 2 | height: 300px; 3 | padding: 0; 4 | margin: 0; 5 | list-style: none; 6 | 7 | .infinite-list-item { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | height: 50px; 12 | background: #e8f3fe; 13 | margin: 10px; 14 | color: lighten(#1989fa, 20%); 15 | & + .list-item { 16 | margin-top: 10px 17 | } 18 | } 19 | } 20 | 21 | .infinite-list-wrapper { 22 | height: 300px; 23 | text-align: center; 24 | 25 | .list{ 26 | padding: 0; 27 | margin: 0; 28 | list-style: none; 29 | } 30 | 31 | 32 | .list-item{ 33 | display: flex; 34 | align-items: center; 35 | justify-content: center; 36 | height: 50px; 37 | background: #fff6f6; 38 | color: #ff8484; 39 | & + .list-item { 40 | margin-top: 10px 41 | } 42 | } 43 | } 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /examples/demo-styles/input-number.scss: -------------------------------------------------------------------------------- 1 | .demo-block.demo-input-number { 2 | .el-input-number + .el-input-number { 3 | margin-left: 10px; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /examples/demo-styles/layout.scss: -------------------------------------------------------------------------------- 1 | .demo-layout { 2 | .el-row { 3 | margin-bottom: 20px; 4 | &:last-child { 5 | margin-bottom: 0; 6 | } 7 | } 8 | .el-col { 9 | border-radius: 4px; 10 | } 11 | .bg-purple-dark { 12 | background: #99a9bf; 13 | } 14 | .bg-purple { 15 | background: #d3dce6; 16 | } 17 | .bg-purple-light { 18 | background: #e5e9f2; 19 | } 20 | .grid-content { 21 | border-radius: 4px; 22 | min-height: 36px; 23 | } 24 | .row-bg { 25 | padding: 10px 0; 26 | background-color: #f9fafc; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /examples/demo-styles/loading.scss: -------------------------------------------------------------------------------- 1 | .demo-loading .el-table { 2 | border: none; 3 | } 4 | -------------------------------------------------------------------------------- /examples/demo-styles/menu.scss: -------------------------------------------------------------------------------- 1 | .demo-block.demo-menu { 2 | .el-menu-demo { 3 | padding-left: 55px; 4 | } 5 | .el-menu-vertical-demo:not(.el-menu--collapse) { 6 | width: 240px; 7 | min-height: 400px; 8 | } 9 | .line { 10 | height: 1px; 11 | background-color: #e0e6ed; 12 | margin: 35px -24px; 13 | } 14 | h5 { 15 | font-size: 14px; 16 | color: #8492a6; 17 | margin-top: 10px; 18 | } 19 | .tac { 20 | text-align: center; 21 | 22 | .el-menu-vertical-demo { 23 | display: inline-block; 24 | text-align: left; 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/demo-styles/pagination.scss: -------------------------------------------------------------------------------- 1 | .demo-pagination .source.first { 2 | padding: 0; 3 | } 4 | 5 | .demo-pagination .first .block { 6 | padding: 30px 0; 7 | text-align: center; 8 | border-right: solid 1px #eff2f6; 9 | display: inline-block; 10 | width: 50%; 11 | box-sizing: border-box; 12 | 13 | &:last-child { 14 | border-right: none; 15 | } 16 | } 17 | 18 | .demo-pagination .first .demonstration { 19 | display: block; 20 | color: #8492a6; 21 | font-size: 14px; 22 | margin-bottom: 20px; 23 | } 24 | 25 | .demo-pagination .source.last { 26 | padding: 0; 27 | } 28 | 29 | .demo-pagination .last .block { 30 | padding: 30px 24px; 31 | border-bottom: solid 1px #eff2f6; 32 | &:last-child { 33 | border-bottom: none; 34 | } 35 | } 36 | 37 | .demo-pagination .last .demonstration { 38 | font-size: 14px; 39 | color: #8492a6; 40 | line-height: 44px; 41 | } 42 | 43 | .demo-pagination .last .demonstration + .el-pagination { 44 | width: 70%; 45 | margin: 5px 20px 0 0; 46 | } 47 | -------------------------------------------------------------------------------- /examples/demo-styles/popover.scss: -------------------------------------------------------------------------------- 1 | .demo-block.demo-popover { 2 | .el-popover + .el-popover { 3 | margin-left: 10px; 4 | } 5 | .el-input { 6 | width: 360px; 7 | } 8 | .el-button { 9 | margin-left: 10px; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/demo-styles/progress.scss: -------------------------------------------------------------------------------- 1 | .demo-block.demo-progress { 2 | .el-progress--line { 3 | margin-bottom: 15px; 4 | width: 350px; 5 | } 6 | .el-progress--circle { 7 | margin-right: 15px; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/demo-styles/rate.scss: -------------------------------------------------------------------------------- 1 | .demo-rate .block { 2 | padding: 30px 0; 3 | text-align: center; 4 | border-right: solid 1px #eff2f6; 5 | display: inline-block; 6 | width: 49%; 7 | box-sizing: border-box; 8 | &:last-child { 9 | border-right: none; 10 | } 11 | } 12 | 13 | .demo-rate .demonstration { 14 | display: block; 15 | color: #8492a6; 16 | font-size: 14px; 17 | margin-bottom: 20px; 18 | } 19 | -------------------------------------------------------------------------------- /examples/demo-styles/select.scss: -------------------------------------------------------------------------------- 1 | .demo-select .el-select { 2 | width: 240px; 3 | } 4 | -------------------------------------------------------------------------------- /examples/demo-styles/slider.scss: -------------------------------------------------------------------------------- 1 | .demo-block.demo-slider .source { 2 | padding: 0; 3 | } 4 | 5 | .demo-block.demo-slider .block { 6 | padding: 30px 24px; 7 | overflow: hidden; 8 | border-bottom: solid 1px #eff2f6; 9 | &:last-child { 10 | border-bottom: none; 11 | } 12 | } 13 | 14 | .demo-block.demo-slider .demonstration { 15 | font-size: 14px; 16 | color: #8492a6; 17 | line-height: 44px; 18 | } 19 | 20 | .demo-block.demo-slider .demonstration + .el-slider { 21 | float: right; 22 | width: 70%; 23 | margin-right: 20px; 24 | } 25 | -------------------------------------------------------------------------------- /examples/demo-styles/switch.scss: -------------------------------------------------------------------------------- 1 | .demo-block.demo-switch { 2 | .el-switch { 3 | margin: 20px 20px 20px 0; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /examples/demo-styles/table.scss: -------------------------------------------------------------------------------- 1 | .el-table .warning-row { 2 | background: oldlace; 3 | } 4 | 5 | .el-table .success-row { 6 | background: #f0f9eb; 7 | } 8 | 9 | .demo-table .name-wrapper { 10 | display: inline-block; 11 | } 12 | 13 | .demo-table .demo-table-expand { 14 | label { 15 | width: 90px; 16 | color: #99a9bf; 17 | } 18 | .el-form-item { 19 | margin-right: 0; 20 | margin-bottom: 0; 21 | width: 50%; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/demo-styles/tag.scss: -------------------------------------------------------------------------------- 1 | .demo-block.demo-tag { 2 | .el-tag + .el-tag { 3 | margin-left: 10px; 4 | } 5 | 6 | .button-new-tag { 7 | margin-left: 10px; 8 | height: 32px; 9 | line-height: 30px; 10 | padding-top: 0; 11 | padding-bottom: 0; 12 | } 13 | 14 | .input-new-tag { 15 | width: 90px; 16 | margin-left: 10px; 17 | vertical-align: bottom; 18 | } 19 | 20 | .tag-group { 21 | display: flex; 22 | align-items: center; 23 | 24 | &__title { 25 | width: 45px; 26 | font-size: 14px; 27 | color: #606266; 28 | } 29 | 30 | &+.tag-group { 31 | margin-top: 10px; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /examples/demo-styles/time-picker.scss: -------------------------------------------------------------------------------- 1 | .demo-block { 2 | .el-date-editor + .el-date-editor { 3 | margin-left: 10px; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /examples/demo-styles/timeline.scss: -------------------------------------------------------------------------------- 1 | .demo-timeline .source .radio { 2 | margin-bottom: 20px; 3 | } 4 | .demo-timeline .source .radio .el-radio-group { 5 | margin-left: 20px; 6 | } 7 | -------------------------------------------------------------------------------- /examples/demo-styles/tooltip.scss: -------------------------------------------------------------------------------- 1 | .demo-tooltip { 2 | .el-tooltip + .el-tooltip { 3 | margin-left: 15px; 4 | } 5 | .box { 6 | width: 400px; 7 | 8 | .top { 9 | text-align: center; 10 | } 11 | 12 | .left { 13 | float: left; 14 | width: 60px; 15 | } 16 | 17 | .right { 18 | float: right; 19 | width: 60px; 20 | } 21 | 22 | .bottom { 23 | clear: both; 24 | text-align: center; 25 | } 26 | 27 | .item { 28 | margin: 4px; 29 | } 30 | 31 | .left .el-tooltip__popper, 32 | .right .el-tooltip__popper { 33 | padding: 8px 10px; 34 | } 35 | .el-tooltip { 36 | margin-left: 0; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /examples/demo-styles/transfer.scss: -------------------------------------------------------------------------------- 1 | .demo-transfer { 2 | .transfer-footer { 3 | margin-left: 15px; 4 | padding: 6px 5px; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/demo-styles/transition.scss: -------------------------------------------------------------------------------- 1 | .demo-transition { 2 | .transition-box { 3 | margin-bottom: 10px; 4 | width: 200px; 5 | height: 100px; 6 | border-radius: 4px; 7 | background-color: #409EFF; 8 | text-align: center; 9 | color: #fff; 10 | padding: 40px 20px; 11 | margin-right: 20px; 12 | box-sizing: border-box; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/demo-styles/tree.scss: -------------------------------------------------------------------------------- 1 | .demo-tree { 2 | .leaf { 3 | width: 20px; 4 | background: #ddd; 5 | } 6 | 7 | .folder { 8 | width: 20px; 9 | background: #888; 10 | } 11 | 12 | .buttons { 13 | margin-top: 20px; 14 | } 15 | 16 | .filter-tree { 17 | margin-top: 20px; 18 | } 19 | 20 | .custom-tree-container { 21 | display: flex; 22 | margin: -24px; 23 | } 24 | 25 | .block { 26 | flex: 1; 27 | padding: 8px 24px 24px; 28 | 29 | &:first-child { 30 | border-right: solid 1px #eff2f6; 31 | } 32 | 33 | > p { 34 | text-align: center; 35 | margin: 0; 36 | line-height: 4; 37 | } 38 | } 39 | 40 | .custom-tree-node { 41 | flex: 1; 42 | display: flex; 43 | align-items: center; 44 | justify-content: space-between; 45 | font-size: 14px; 46 | padding-right: 8px; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /examples/demo-styles/typography.scss: -------------------------------------------------------------------------------- 1 | .demo-typo-size { 2 | .color-dark-light { 3 | color: #99a9bf; 4 | } 5 | } 6 | .demo-term-box img { 7 | width: 24%; 8 | margin: 0 4% 20px 0; 9 | } 10 | 11 | .lineH-left { 12 | display: inline-block; 13 | height: 80px; 14 | } 15 | .lineH-right { 16 | display: inline-block; 17 | list-style: none; 18 | padding: 0 0 0 90px; 19 | margin: 0; 20 | vertical-align: top; 21 | } 22 | .lineH-right li { 23 | font-size: 13px; 24 | color: #666; 25 | height: 20px; 26 | line-height: 20px; 27 | } 28 | .lineH-right li span { 29 | padding-left: 40px; 30 | } 31 | -------------------------------------------------------------------------------- /examples/demo-styles/upload.scss: -------------------------------------------------------------------------------- 1 | .upload-tip { 2 | color: #8492a6; 3 | font-size: 12px; 4 | margin-top: 7px; 5 | } 6 | .demo-block { 7 | margin-bottom: 24px; 8 | 9 | .upload-demo { 10 | width: 360px; 11 | } 12 | .avatar-uploader { 13 | .el-upload { 14 | border: 1px dashed #d9d9d9; 15 | border-radius: 6px; 16 | cursor: pointer; 17 | position: relative; 18 | overflow: hidden; 19 | 20 | &:hover, 21 | &:focus { 22 | border-color: #409eff; 23 | } 24 | } 25 | .avatar-uploader-icon { 26 | font-size: 28px; 27 | color: #8c939d; 28 | width: 178px; 29 | height: 178px; 30 | line-height: 178px; 31 | text-align: center; 32 | } 33 | .avatar { 34 | width: 178px; 35 | height: 178px; 36 | display: block; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /examples/docs/en-US/icon.md: -------------------------------------------------------------------------------- 1 | ## Icon 2 | 3 | Element provides a set of common icons. 4 | 5 | ### Basic usage 6 | 7 | Just assign the class name to `el-icon-iconName`. 8 | 9 | :::demo 10 | 11 | ```html 12 | 13 | 14 | 15 | Search 16 | 17 | ``` 18 | ::: 19 | 20 | ### Icons 21 | 22 | 30 | -------------------------------------------------------------------------------- /examples/docs/en-US/page-header.md: -------------------------------------------------------------------------------- 1 | ## PageHeader 2 | 3 | If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb. 4 | 5 | ### Basic 6 | 7 | :::demo 8 | ```html 9 | 10 | 11 | 12 | 21 | ``` 22 | ::: 23 | 24 | ### Attributes 25 | | Attribute | Description | Type | Accepted Values | Default | 26 | |---------- |-------------- |---------- |------------------------------ | ------ | 27 | | title | main title | string | — | Back | 28 | | content | content | string | — | — | 29 | 30 | ### Events 31 | | Event Name | Description | Parameters | 32 | |----------- |-------------- |----------- | 33 | | back | triggers when right side is clicked | — | 34 | 35 | ### Slots 36 | | slot | Description | 37 | |---------- | ---------------------- | 38 | | title | title content | 39 | | content | content | 40 | -------------------------------------------------------------------------------- /examples/docs/es/icon.md: -------------------------------------------------------------------------------- 1 | ## Icon 2 | 3 | Element proporciona un conjunto de iconos propios. 4 | 5 | ### Uso básico 6 | 7 | Simplemente asigna el nombre de la clase a `el-icon-iconName`. 8 | 9 | :::demo 10 | 11 | ```html 12 | 13 | 14 | 15 | Search 16 | 17 | ``` 18 | ::: 19 | 20 | ### Iconos 21 | 22 | 30 | -------------------------------------------------------------------------------- /examples/docs/es/page-header.md: -------------------------------------------------------------------------------- 1 | ## PageHeader 2 | 3 | Si la ruta de la página es simple, se recomienda utilizar PageHeader en lugar de Breadcrumb. 4 | 5 | ### Básico 6 | 7 | :::demo 8 | ```html 9 | 10 | 11 | 12 | 21 | ``` 22 | ::: 23 | 24 | ### Atributos 25 | | Atributos | Descripción | Tipo | Valores aceptados | Por defecto | 26 | |---------- |-------------- |---------- |------------------------------ | ------ | 27 | | title | titulo principal | string | — | Back | 28 | | content | contenido | string | — | — | 29 | 30 | ### Eventos 31 | | Nombre evento | Descripción | Parámetros | 32 | |----------- |-------------- |----------- | 33 | | back | se activa cuando se hace clic en el lado derecho | — | 34 | 35 | ### Slots 36 | | Nombre del slot | Descripción | 37 | | --------------- | ----------- | 38 | | title | titulo | 39 | | content | contenido | 40 | -------------------------------------------------------------------------------- /examples/docs/fr-FR/icon.md: -------------------------------------------------------------------------------- 1 | ## Icônes 2 | 3 | Element fournit un ensemble d'icônes basiques. 4 | 5 | ### Usage 6 | 7 | Il vous suffit d'assigner le nom de classe `el-icon-iconName` à une balise ``. 8 | 9 | :::demo 10 | 11 | ```html 12 | 13 | 14 | 15 | Chercher 16 | 17 | ``` 18 | ::: 19 | 20 | ### Icônes 21 | 22 | 30 | -------------------------------------------------------------------------------- /examples/docs/fr-FR/page-header.md: -------------------------------------------------------------------------------- 1 | ## PageHeader 2 | 3 | Si le chemin de la page est simple, il est recommandé d’utiliser PageHeader au lieu de Breadcrumb. 4 | 5 | ### Basic 6 | 7 | :::demo 8 | ```html 9 | 10 | 11 | 12 | 21 | ``` 22 | ::: 23 | 24 | ### Attributes 25 | | Attribute | Description | Type | Valeurs acceptées | Défaut | 26 | |---------- |-------------- |---------- |------------------------------ | ------ | 27 | | title | titre principal | string | — | Back | 28 | | content | contenu | string | — | — | 29 | 30 | ### Events 31 | | Event Name | Description | Parameters | 32 | |----------- |-------------- |----------- | 33 | | back | se déclenche lorsque vous cliquez sur le côté droit | — | 34 | 35 | ### Slots 36 | | slot | Description | 37 | |---------- | ---------------------- | 38 | | title | contenu du titre | 39 | | content | contenu | 40 | -------------------------------------------------------------------------------- /examples/docs/zh-CN/icon.md: -------------------------------------------------------------------------------- 1 | ## Icon 图标 2 | 3 | 提供了一套常用的图标集合。 4 | 5 | ### 使用方法 6 | 7 | 直接通过设置类名为 `el-icon-iconName` 来使用即可。例如： 8 | 9 | :::demo 10 | ```html 11 | 12 | 13 | 14 | 搜索 15 | 16 | ``` 17 | ::: 18 | 19 | ### 图标集合 20 | 21 | 29 | -------------------------------------------------------------------------------- /examples/docs/zh-CN/page-header.md: -------------------------------------------------------------------------------- 1 | ## PageHeader 页头 2 | 3 | 如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。 4 | 5 | ### 基础 6 | 7 | :::demo 8 | ```html 9 | 10 | 11 | 12 | 21 | ``` 22 | ::: 23 | 24 | ### Attributes 25 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 26 | |---------- |-------------- |---------- |------------------------------ | ------ | 27 | | title | 标题 | string | — | 返回 | 28 | | content | 内容 | string | — | — | 29 | 30 | 31 | ### Events 32 | | 事件名称 | 说明 | 回调参数 | 33 | |---------- |-------------- |---------- | 34 | | back | 点击左侧区域触发 | — | 35 | 36 | ### Slots 37 | | 事件名称 | 说明 | 38 | |---------- |------------- | 39 | | title | 标题内容 | 40 | | content | 内容 | 41 | -------------------------------------------------------------------------------- /examples/dom/class.js: -------------------------------------------------------------------------------- 1 | export const hasClass = function(obj, cls) { 2 | return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); 3 | }; 4 | 5 | export const addClass = function(obj, cls) { 6 | if (!hasClass(obj, cls)) obj.className += ' ' + cls; 7 | }; 8 | 9 | export const removeClass = function(obj, cls) { 10 | if (hasClass(obj, cls)) { 11 | const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); 12 | obj.className = obj.className.replace(reg, ' '); 13 | } 14 | }; 15 | 16 | export const toggleClass = function(obj, cls) { 17 | if (hasClass(obj, cls)) { 18 | removeClass(obj, cls); 19 | } else { 20 | addClass(obj, cls); 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /examples/extension/.gitignore: -------------------------------------------------------------------------------- 1 | dist -------------------------------------------------------------------------------- /examples/extension/src/app.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './editor/index'; 3 | import Element from 'main/index.js'; 4 | import 'packages/theme-chalk/src/index.scss'; 5 | 6 | export default () => { 7 | Vue.use(Element, { zIndex: 100000 }); 8 | const root = document.createElement('div'); 9 | document.body.appendChild(root); 10 | 11 | window.ga = function() { 12 | console.log(arguments); 13 | }; 14 | 15 | new Vue({ // eslint-disable-line 16 | render: h => h(App) 17 | }).$mount(root); 18 | }; 19 | -------------------------------------------------------------------------------- /examples/extension/src/background.js: -------------------------------------------------------------------------------- 1 | chrome.browserAction.onClicked.addListener(tab => { 2 | chrome.tabs.executeScript(tab.id, { 3 | file: 'entry.js' 4 | }); 5 | }) 6 | ; 7 | -------------------------------------------------------------------------------- /examples/extension/src/editor/icon-close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/extension/src/editor/icon-close.png -------------------------------------------------------------------------------- /examples/extension/src/editor/icon-entrance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/extension/src/editor/icon-entrance.png -------------------------------------------------------------------------------- /examples/extension/src/editor/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /examples/extension/src/editor/utils.js: -------------------------------------------------------------------------------- 1 | const ELEMENT_THEME_USER_CONFIG = 'ELEMENT_THEME_USER_CONFIG'; 2 | export const loadFromLocal = (key) => { 3 | return new window.Promise((resolve) => { 4 | chrome.storage.local.get([key], (result) => { 5 | resolve(result[key]); 6 | }); 7 | }); 8 | }; 9 | export const saveToLocal = (key, value) => { 10 | chrome.storage.local.set({[key]: value}); 11 | }; 12 | 13 | export const loadUserThemeFromLocal = () => { 14 | return loadFromLocal(ELEMENT_THEME_USER_CONFIG); 15 | }; 16 | export const saveUserThemeToLocal = (value) => { 17 | saveToLocal(ELEMENT_THEME_USER_CONFIG, value); 18 | }; 19 | -------------------------------------------------------------------------------- /examples/extension/src/entry.js: -------------------------------------------------------------------------------- 1 | import init from './app'; 2 | 3 | if (!window.ElementThemeRollerInit) { 4 | window.ElementThemeRollerInit = true; 5 | init(); 6 | } 7 | 8 | -------------------------------------------------------------------------------- /examples/extension/src/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/extension/src/icon.png -------------------------------------------------------------------------------- /examples/extension/src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Element Theme Roller", 3 | "version": "0.0.9", 4 | "description": "Customize all Design Tokens of Element UI and preview in real-time", 5 | "web_accessible_resources": ["entry.js"], 6 | "background": { 7 | "scripts": [ 8 | "background.js" 9 | ], 10 | "persistent": true 11 | }, 12 | "icons": { 13 | "128": "icon.png" 14 | }, 15 | "browser_action": { 16 | "default_icon": "icon.png", 17 | "default_title": "Element Theme Roller" 18 | }, 19 | "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", 20 | "manifest_version": 2, 21 | "permissions": [ 22 | "activeTab", 23 | "storage", 24 | "https://*.ele.me/", 25 | "https://*.elenet.me/" 26 | ] 27 | } -------------------------------------------------------------------------------- /examples/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/examples/favicon.ico -------------------------------------------------------------------------------- /examples/i18n/route.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "lang": "zh-CN" 4 | }, 5 | { 6 | "lang": "en-US" 7 | }, 8 | { 9 | "lang": "es" 10 | }, 11 | { 12 | "lang": "fr-FR" 13 | } 14 | ] 15 | -------------------------------------------------------------------------------- /examples/i18n/title.json: -------------------------------------------------------------------------------- 1 | { 2 | "zh-CN": { 3 | "home": "Element - 网站快速成型工具", 4 | "guide": "指南 | Element", 5 | "component": "组件 | Element", 6 | "resource": "资源 | Element" 7 | }, 8 | "en-US": { 9 | "home": "Element - A Desktop UI Toolkit for Web", 10 | "guide": "Guide | Element", 11 | "component": "Component | Element", 12 | "resource": "Resource | Element" 13 | }, 14 | "es": { 15 | "home": "Element - Un kit de interfaz de usuario para la web", 16 | "guide": "Guía | Element", 17 | "component": "Componentes | Element", 18 | "resource": "Recursos | Element" 19 | }, 20 | "fr-FR": { 21 | "home": "Element - Un kit de composants d'interface pour le web", 22 | "guide": "Guide | Element", 23 | "component": "Composants | Element", 24 | "resource": "Ressources | Element" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /examples/pages/template/theme-nav.tpl: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/play.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Element from 'main/index.js'; 3 | import App from './play/index.vue'; 4 | import 'packages/theme-chalk/src/index.scss'; 5 | 6 | Vue.use(Element); 7 | 8 | new Vue({ // eslint-disable-line 9 | render: h => h(App) 10 | }).$mount('#app'); 11 | -------------------------------------------------------------------------------- /examples/play/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /examples/util.js: -------------------------------------------------------------------------------- 1 | export function stripScript(content) { 2 | const result = content.match(/<(script)>([\s\S]+)<\/\1>/); 3 | return result && result[2] ? result[2].trim() : ''; 4 | } 5 | 6 | export function stripStyle(content) { 7 | const result = content.match(/<(style)\s*>([\s\S]+)<\/\1>/); 8 | return result && result[2] ? result[2].trim() : ''; 9 | } 10 | 11 | export function stripTemplate(content) { 12 | content = content.trim(); 13 | if (!content) { 14 | return content; 15 | } 16 | return content.replace(/<(script|style)[\s\S]+<\/\1>/g, '').trim(); 17 | } 18 | -------------------------------------------------------------------------------- /examples/versions.json: -------------------------------------------------------------------------------- 1 | {"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14","2.15.0":"2.15"} -------------------------------------------------------------------------------- /note.md: -------------------------------------------------------------------------------- 1 | 如何快速为团队打造自己的组件库？ 2 | 3 | -------------------------------------------------------------------------------- /packages/alert/index.js: -------------------------------------------------------------------------------- 1 | import Alert from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Alert.install = function(Vue) { 5 | Vue.component(Alert.name, Alert); 6 | }; 7 | 8 | export default Alert; 9 | -------------------------------------------------------------------------------- /packages/aside/index.js: -------------------------------------------------------------------------------- 1 | import Aside from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Aside.install = function(Vue) { 5 | Vue.component(Aside.name, Aside); 6 | }; 7 | 8 | export default Aside; 9 | -------------------------------------------------------------------------------- /packages/aside/src/main.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | -------------------------------------------------------------------------------- /packages/autocomplete/index.js: -------------------------------------------------------------------------------- 1 | import ElAutocomplete from './src/autocomplete'; 2 | 3 | /* istanbul ignore next */ 4 | ElAutocomplete.install = function(Vue) { 5 | Vue.component(ElAutocomplete.name, ElAutocomplete); 6 | }; 7 | 8 | export default ElAutocomplete; 9 | -------------------------------------------------------------------------------- /packages/avatar/index.js: -------------------------------------------------------------------------------- 1 | import Avatar from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Avatar.install = function(Vue) { 5 | Vue.component(Avatar.name, Avatar); 6 | }; 7 | 8 | export default Avatar; 9 | -------------------------------------------------------------------------------- /packages/backtop/index.js: -------------------------------------------------------------------------------- 1 | import Backtop from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Backtop.install = function(Vue) { 5 | Vue.component(Backtop.name, Backtop); 6 | }; 7 | 8 | export default Backtop; 9 | -------------------------------------------------------------------------------- /packages/badge/index.js: -------------------------------------------------------------------------------- 1 | import Badge from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Badge.install = function(Vue) { 5 | Vue.component(Badge.name, Badge); 6 | }; 7 | 8 | export default Badge; 9 | -------------------------------------------------------------------------------- /packages/breadcrumb-item/index.js: -------------------------------------------------------------------------------- 1 | import ElBreadcrumbItem from '../breadcrumb/src/breadcrumb-item'; 2 | 3 | /* istanbul ignore next */ 4 | ElBreadcrumbItem.install = function(Vue) { 5 | Vue.component(ElBreadcrumbItem.name, ElBreadcrumbItem); 6 | }; 7 | 8 | export default ElBreadcrumbItem; 9 | -------------------------------------------------------------------------------- /packages/breadcrumb/index.js: -------------------------------------------------------------------------------- 1 | import ElBreadcrumb from './src/breadcrumb'; 2 | 3 | /* istanbul ignore next */ 4 | ElBreadcrumb.install = function(Vue) { 5 | Vue.component(ElBreadcrumb.name, ElBreadcrumb); 6 | }; 7 | 8 | export default ElBreadcrumb; 9 | -------------------------------------------------------------------------------- /packages/breadcrumb/src/breadcrumb.vue: -------------------------------------------------------------------------------- 1 | 6 | 35 | -------------------------------------------------------------------------------- /packages/button-group/index.js: -------------------------------------------------------------------------------- 1 | import ElButtonGroup from '../button/src/button-group'; 2 | 3 | /* istanbul ignore next */ 4 | ElButtonGroup.install = function(Vue) { 5 | Vue.component(ElButtonGroup.name, ElButtonGroup); 6 | }; 7 | 8 | export default ElButtonGroup; 9 | -------------------------------------------------------------------------------- /packages/button/index.js: -------------------------------------------------------------------------------- 1 | import ElButton from './src/button'; 2 | 3 | /* istanbul ignore next */ 4 | ElButton.install = function(Vue) { 5 | Vue.component(ElButton.name, ElButton); 6 | }; 7 | 8 | export default ElButton; 9 | -------------------------------------------------------------------------------- /packages/button/src/button-group.vue: -------------------------------------------------------------------------------- 1 | 6 | 11 | -------------------------------------------------------------------------------- /packages/calendar/index.js: -------------------------------------------------------------------------------- 1 | import Calendar from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Calendar.install = function(Vue) { 5 | Vue.component(Calendar.name, Calendar); 6 | }; 7 | 8 | export default Calendar; 9 | -------------------------------------------------------------------------------- /packages/card/index.js: -------------------------------------------------------------------------------- 1 | import Card from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Card.install = function(Vue) { 5 | Vue.component(Card.name, Card); 6 | }; 7 | 8 | export default Card; 9 | -------------------------------------------------------------------------------- /packages/card/src/main.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 24 | -------------------------------------------------------------------------------- /packages/carousel-item/index.js: -------------------------------------------------------------------------------- 1 | import ElCarouselItem from '../carousel/src/item'; 2 | 3 | /* istanbul ignore next */ 4 | ElCarouselItem.install = function(Vue) { 5 | Vue.component(ElCarouselItem.name, ElCarouselItem); 6 | }; 7 | 8 | export default ElCarouselItem; 9 | -------------------------------------------------------------------------------- /packages/carousel/index.js: -------------------------------------------------------------------------------- 1 | import Carousel from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Carousel.install = function(Vue) { 5 | Vue.component(Carousel.name, Carousel); 6 | }; 7 | 8 | export default Carousel; 9 | -------------------------------------------------------------------------------- /packages/cascader-panel/index.js: -------------------------------------------------------------------------------- 1 | import CascaderPanel from './src/cascader-panel'; 2 | 3 | /* istanbul ignore next */ 4 | CascaderPanel.install = function(Vue) { 5 | Vue.component(CascaderPanel.name, CascaderPanel); 6 | }; 7 | 8 | export default CascaderPanel; 9 | -------------------------------------------------------------------------------- /packages/cascader/index.js: -------------------------------------------------------------------------------- 1 | import Cascader from './src/cascader'; 2 | 3 | /* istanbul ignore next */ 4 | Cascader.install = function(Vue) { 5 | Vue.component(Cascader.name, Cascader); 6 | }; 7 | 8 | export default Cascader; 9 | -------------------------------------------------------------------------------- /packages/checkbox-button/index.js: -------------------------------------------------------------------------------- 1 | import ElCheckboxButton from '../checkbox/src/checkbox-button.vue'; 2 | 3 | /* istanbul ignore next */ 4 | ElCheckboxButton.install = function(Vue) { 5 | Vue.component(ElCheckboxButton.name, ElCheckboxButton); 6 | }; 7 | 8 | export default ElCheckboxButton; 9 | -------------------------------------------------------------------------------- /packages/checkbox-group/index.js: -------------------------------------------------------------------------------- 1 | import ElCheckboxGroup from '../checkbox/src/checkbox-group.vue'; 2 | 3 | /* istanbul ignore next */ 4 | ElCheckboxGroup.install = function(Vue) { 5 | Vue.component(ElCheckboxGroup.name, ElCheckboxGroup); 6 | }; 7 | 8 | export default ElCheckboxGroup; 9 | -------------------------------------------------------------------------------- /packages/checkbox/index.js: -------------------------------------------------------------------------------- 1 | import ElCheckbox from './src/checkbox'; 2 | 3 | /* istanbul ignore next */ 4 | ElCheckbox.install = function(Vue) { 5 | Vue.component(ElCheckbox.name, ElCheckbox); 6 | }; 7 | 8 | export default ElCheckbox; 9 | -------------------------------------------------------------------------------- /packages/checkbox/src/checkbox-group.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 49 | -------------------------------------------------------------------------------- /packages/col/index.js: -------------------------------------------------------------------------------- 1 | import ElCol from './src/col'; 2 | 3 | /* istanbul ignore next */ 4 | ElCol.install = function(Vue) { 5 | Vue.component(ElCol.name, ElCol); 6 | }; 7 | 8 | export default ElCol; 9 | 10 | -------------------------------------------------------------------------------- /packages/collapse-item/index.js: -------------------------------------------------------------------------------- 1 | import ElCollapseItem from '../collapse/src/collapse-item.vue'; 2 | 3 | /* istanbul ignore next */ 4 | ElCollapseItem.install = function(Vue) { 5 | Vue.component(ElCollapseItem.name, ElCollapseItem); 6 | }; 7 | 8 | export default ElCollapseItem; 9 | -------------------------------------------------------------------------------- /packages/collapse/index.js: -------------------------------------------------------------------------------- 1 | import ElCollapse from './src/collapse'; 2 | 3 | /* istanbul ignore next */ 4 | ElCollapse.install = function(Vue) { 5 | Vue.component(ElCollapse.name, ElCollapse); 6 | }; 7 | 8 | export default ElCollapse; 9 | 10 | -------------------------------------------------------------------------------- /packages/color-picker/index.js: -------------------------------------------------------------------------------- 1 | import ColorPicker from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | ColorPicker.install = function(Vue) { 5 | Vue.component(ColorPicker.name, ColorPicker); 6 | }; 7 | 8 | export default ColorPicker; 9 | -------------------------------------------------------------------------------- /packages/color-picker/src/draggable.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | let isDragging = false; 3 | 4 | export default function(element, options) { 5 | if (Vue.prototype.$isServer) return; 6 | const moveFn = function(event) { 7 | if (options.drag) { 8 | options.drag(event); 9 | } 10 | }; 11 | const upFn = function(event) { 12 | document.removeEventListener('mousemove', moveFn); 13 | document.removeEventListener('mouseup', upFn); 14 | document.onselectstart = null; 15 | document.ondragstart = null; 16 | 17 | isDragging = false; 18 | 19 | if (options.end) { 20 | options.end(event); 21 | } 22 | }; 23 | element.addEventListener('mousedown', function(event) { 24 | if (isDragging) return; 25 | document.onselectstart = function() { return false; }; 26 | document.ondragstart = function() { return false; }; 27 | 28 | document.addEventListener('mousemove', moveFn); 29 | document.addEventListener('mouseup', upFn); 30 | isDragging = true; 31 | 32 | if (options.start) { 33 | options.start(event); 34 | } 35 | }); 36 | } 37 | -------------------------------------------------------------------------------- /packages/container/index.js: -------------------------------------------------------------------------------- 1 | import Container from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Container.install = function(Vue) { 5 | Vue.component(Container.name, Container); 6 | }; 7 | 8 | export default Container; 9 | -------------------------------------------------------------------------------- /packages/container/src/main.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 34 | -------------------------------------------------------------------------------- /packages/date-picker/index.js: -------------------------------------------------------------------------------- 1 | import DatePicker from './src/picker/date-picker'; 2 | 3 | /* istanbul ignore next */ 4 | DatePicker.install = function install(Vue) { 5 | Vue.component(DatePicker.name, DatePicker); 6 | }; 7 | 8 | export default DatePicker; 9 | -------------------------------------------------------------------------------- /packages/date-picker/src/picker/date-picker.js: -------------------------------------------------------------------------------- 1 | import Picker from '../picker'; 2 | import DatePanel from '../panel/date'; 3 | import DateRangePanel from '../panel/date-range'; 4 | import MonthRangePanel from '../panel/month-range'; 5 | 6 | const getPanel = function(type) { 7 | if (type === 'daterange' || type === 'datetimerange') { 8 | return DateRangePanel; 9 | } else if (type === 'monthrange') { 10 | return MonthRangePanel; 11 | } 12 | return DatePanel; 13 | }; 14 | 15 | export default { 16 | mixins: [Picker], 17 | 18 | name: 'ElDatePicker', 19 | 20 | props: { 21 | type: { 22 | type: String, 23 | default: 'date' 24 | }, 25 | timeArrowControl: Boolean 26 | }, 27 | 28 | watch: { 29 | type(type) { 30 | if (this.picker) { 31 | this.unmountPicker(); 32 | this.panel = getPanel(type); 33 | this.mountPicker(); 34 | } else { 35 | this.panel = getPanel(type); 36 | } 37 | } 38 | }, 39 | 40 | created() { 41 | this.panel = getPanel(this.type); 42 | } 43 | }; 44 | -------------------------------------------------------------------------------- /packages/date-picker/src/picker/time-picker.js: -------------------------------------------------------------------------------- 1 | import Picker from '../picker'; 2 | import TimePanel from '../panel/time'; 3 | import TimeRangePanel from '../panel/time-range'; 4 | 5 | export default { 6 | mixins: [Picker], 7 | 8 | name: 'ElTimePicker', 9 | 10 | props: { 11 | isRange: Boolean, 12 | arrowControl: Boolean 13 | }, 14 | 15 | data() { 16 | return { 17 | type: '' 18 | }; 19 | }, 20 | 21 | watch: { 22 | isRange(isRange) { 23 | if (this.picker) { 24 | this.unmountPicker(); 25 | this.type = isRange ? 'timerange' : 'time'; 26 | this.panel = isRange ? TimeRangePanel : TimePanel; 27 | this.mountPicker(); 28 | } else { 29 | this.type = isRange ? 'timerange' : 'time'; 30 | this.panel = isRange ? TimeRangePanel : TimePanel; 31 | } 32 | } 33 | }, 34 | 35 | created() { 36 | this.type = this.isRange ? 'timerange' : 'time'; 37 | this.panel = this.isRange ? TimeRangePanel : TimePanel; 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /packages/date-picker/src/picker/time-select.js: -------------------------------------------------------------------------------- 1 | import Picker from '../picker'; 2 | import Panel from '../panel/time-select'; 3 | 4 | export default { 5 | mixins: [Picker], 6 | 7 | name: 'ElTimeSelect', 8 | 9 | componentName: 'ElTimeSelect', 10 | 11 | props: { 12 | type: { 13 | type: String, 14 | default: 'time-select' 15 | } 16 | }, 17 | 18 | beforeCreate() { 19 | this.panel = Panel; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /packages/dialog/index.js: -------------------------------------------------------------------------------- 1 | import ElDialog from './src/component'; 2 | 3 | /* istanbul ignore next */ 4 | ElDialog.install = function(Vue) { 5 | Vue.component(ElDialog.name, ElDialog); 6 | }; 7 | 8 | export default ElDialog; 9 | -------------------------------------------------------------------------------- /packages/divider/index.js: -------------------------------------------------------------------------------- 1 | import Divider from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Divider.install = function(Vue) { 5 | Vue.component(Divider.name, Divider); 6 | }; 7 | 8 | export default Divider; 9 | -------------------------------------------------------------------------------- /packages/divider/src/main.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 38 | -------------------------------------------------------------------------------- /packages/drawer/index.js: -------------------------------------------------------------------------------- 1 | import Drawer from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Drawer.install = function(Vue) { 5 | Vue.component(Drawer.name, Drawer); 6 | }; 7 | 8 | export default Drawer; 9 | -------------------------------------------------------------------------------- /packages/dropdown-item/index.js: -------------------------------------------------------------------------------- 1 | import ElDropdownItem from '../dropdown/src/dropdown-item'; 2 | 3 | /* istanbul ignore next */ 4 | ElDropdownItem.install = function(Vue) { 5 | Vue.component(ElDropdownItem.name, ElDropdownItem); 6 | }; 7 | 8 | export default ElDropdownItem; 9 | -------------------------------------------------------------------------------- /packages/dropdown-menu/index.js: -------------------------------------------------------------------------------- 1 | import ElDropdownMenu from '../dropdown/src/dropdown-menu'; 2 | 3 | /* istanbul ignore next */ 4 | ElDropdownMenu.install = function(Vue) { 5 | Vue.component(ElDropdownMenu.name, ElDropdownMenu); 6 | }; 7 | 8 | export default ElDropdownMenu; 9 | -------------------------------------------------------------------------------- /packages/dropdown/index.js: -------------------------------------------------------------------------------- 1 | import ElDropdown from './src/dropdown'; 2 | 3 | /* istanbul ignore next */ 4 | ElDropdown.install = function(Vue) { 5 | Vue.component(ElDropdown.name, ElDropdown); 6 | }; 7 | 8 | export default ElDropdown; 9 | -------------------------------------------------------------------------------- /packages/dropdown/src/dropdown-item.vue: -------------------------------------------------------------------------------- 1 | 16 | 38 | -------------------------------------------------------------------------------- /packages/footer/index.js: -------------------------------------------------------------------------------- 1 | import Footer from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Footer.install = function(Vue) { 5 | Vue.component(Footer.name, Footer); 6 | }; 7 | 8 | export default Footer; 9 | -------------------------------------------------------------------------------- /packages/footer/src/main.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | -------------------------------------------------------------------------------- /packages/form-item/index.js: -------------------------------------------------------------------------------- 1 | import ElFormItem from '../form/src/form-item'; 2 | 3 | /* istanbul ignore next */ 4 | ElFormItem.install = function(Vue) { 5 | Vue.component(ElFormItem.name, ElFormItem); 6 | }; 7 | 8 | export default ElFormItem; 9 | -------------------------------------------------------------------------------- /packages/form/index.js: -------------------------------------------------------------------------------- 1 | import ElForm from './src/form'; 2 | 3 | /* istanbul ignore next */ 4 | ElForm.install = function(Vue) { 5 | Vue.component(ElForm.name, ElForm); 6 | }; 7 | 8 | export default ElForm; 9 | -------------------------------------------------------------------------------- /packages/header/index.js: -------------------------------------------------------------------------------- 1 | import Header from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Header.install = function(Vue) { 5 | Vue.component(Header.name, Header); 6 | }; 7 | 8 | export default Header; 9 | -------------------------------------------------------------------------------- /packages/header/src/main.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | -------------------------------------------------------------------------------- /packages/icon/index.js: -------------------------------------------------------------------------------- 1 | import ElIcon from './src/icon.vue'; 2 | 3 | /* istanbul ignore next */ 4 | ElIcon.install = function(Vue) { 5 | Vue.component(ElIcon.name, ElIcon); 6 | }; 7 | 8 | export default ElIcon; 9 | -------------------------------------------------------------------------------- /packages/icon/src/icon.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /packages/image/index.js: -------------------------------------------------------------------------------- 1 | import Image from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Image.install = function(Vue) { 5 | Vue.component(Image.name, Image); 6 | }; 7 | 8 | export default Image; 9 | -------------------------------------------------------------------------------- /packages/infinite-scroll/index.js: -------------------------------------------------------------------------------- 1 | import InfiniteScroll from './src/main.js'; 2 | 3 | /* istanbul ignore next */ 4 | InfiniteScroll.install = function(Vue) { 5 | Vue.directive(InfiniteScroll.name, InfiniteScroll); 6 | }; 7 | 8 | export default InfiniteScroll; 9 | -------------------------------------------------------------------------------- /packages/input-number/index.js: -------------------------------------------------------------------------------- 1 | import ElInputNumber from './src/input-number'; 2 | 3 | /* istanbul ignore next */ 4 | ElInputNumber.install = function(Vue) { 5 | Vue.component(ElInputNumber.name, ElInputNumber); 6 | }; 7 | 8 | export default ElInputNumber; 9 | -------------------------------------------------------------------------------- /packages/input/index.js: -------------------------------------------------------------------------------- 1 | import ElInput from './src/input'; 2 | 3 | /* istanbul ignore next */ 4 | ElInput.install = function(Vue) { 5 | Vue.component(ElInput.name, ElInput); 6 | }; 7 | 8 | export default ElInput; 9 | -------------------------------------------------------------------------------- /packages/link/index.js: -------------------------------------------------------------------------------- 1 | import Link from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Link.install = function(Vue) { 5 | Vue.component(Link.name, Link); 6 | }; 7 | 8 | export default Link; 9 | -------------------------------------------------------------------------------- /packages/link/src/main.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 54 | -------------------------------------------------------------------------------- /packages/loading/index.js: -------------------------------------------------------------------------------- 1 | import directive from './src/directive'; 2 | import service from './src/index'; 3 | 4 | export default { 5 | install(Vue) { 6 | Vue.use(directive); 7 | Vue.prototype.$loading = service; 8 | }, 9 | directive, 10 | service 11 | }; 12 | -------------------------------------------------------------------------------- /packages/loading/src/loading.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 42 | -------------------------------------------------------------------------------- /packages/main/index.js: -------------------------------------------------------------------------------- 1 | import Main from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Main.install = function(Vue) { 5 | Vue.component(Main.name, Main); 6 | }; 7 | 8 | export default Main; 9 | -------------------------------------------------------------------------------- /packages/main/src/main.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 13 | -------------------------------------------------------------------------------- /packages/menu-item-group/index.js: -------------------------------------------------------------------------------- 1 | import ElMenuItemGroup from '../menu/src/menu-item-group'; 2 | 3 | /* istanbul ignore next */ 4 | ElMenuItemGroup.install = function(Vue) { 5 | Vue.component(ElMenuItemGroup.name, ElMenuItemGroup); 6 | }; 7 | 8 | export default ElMenuItemGroup; 9 | -------------------------------------------------------------------------------- /packages/menu-item/index.js: -------------------------------------------------------------------------------- 1 | import ElMenuItem from '../menu/src/menu-item'; 2 | 3 | /* istanbul ignore next */ 4 | ElMenuItem.install = function(Vue) { 5 | Vue.component(ElMenuItem.name, ElMenuItem); 6 | }; 7 | 8 | export default ElMenuItem; 9 | -------------------------------------------------------------------------------- /packages/menu/index.js: -------------------------------------------------------------------------------- 1 | import ElMenu from './src/menu'; 2 | 3 | /* istanbul ignore next */ 4 | ElMenu.install = function(Vue) { 5 | Vue.component(ElMenu.name, ElMenu); 6 | }; 7 | 8 | export default ElMenu; 9 | -------------------------------------------------------------------------------- /packages/menu/src/menu-item-group.vue: -------------------------------------------------------------------------------- 1 | 12 | 45 | 46 | -------------------------------------------------------------------------------- /packages/message-box/index.js: -------------------------------------------------------------------------------- 1 | import MessageBox from './src/main.js'; 2 | export default MessageBox; 3 | -------------------------------------------------------------------------------- /packages/message/index.js: -------------------------------------------------------------------------------- 1 | import Message from './src/main.js'; 2 | export default Message; 3 | -------------------------------------------------------------------------------- /packages/notification/index.js: -------------------------------------------------------------------------------- 1 | import Notification from './src/main.js'; 2 | export default Notification; 3 | -------------------------------------------------------------------------------- /packages/option-group/index.js: -------------------------------------------------------------------------------- 1 | import ElOptionGroup from '../select/src/option-group'; 2 | 3 | /* istanbul ignore next */ 4 | ElOptionGroup.install = function(Vue) { 5 | Vue.component(ElOptionGroup.name, ElOptionGroup); 6 | }; 7 | 8 | export default ElOptionGroup; 9 | -------------------------------------------------------------------------------- /packages/option/index.js: -------------------------------------------------------------------------------- 1 | import ElOption from '../select/src/option'; 2 | 3 | /* istanbul ignore next */ 4 | ElOption.install = function(Vue) { 5 | Vue.component(ElOption.name, ElOption); 6 | }; 7 | 8 | export default ElOption; 9 | -------------------------------------------------------------------------------- /packages/page-header/index.js: -------------------------------------------------------------------------------- 1 | import PageHeader from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | PageHeader.install = function(Vue) { 5 | Vue.component(PageHeader.name, PageHeader); 6 | }; 7 | 8 | export default PageHeader; 9 | -------------------------------------------------------------------------------- /packages/page-header/src/main.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 31 | -------------------------------------------------------------------------------- /packages/pagination/index.js: -------------------------------------------------------------------------------- 1 | import Pagination from './src/pagination'; 2 | 3 | /* istanbul ignore next */ 4 | Pagination.install = function(Vue) { 5 | Vue.component(Pagination.name, Pagination); 6 | }; 7 | 8 | export default Pagination; 9 | -------------------------------------------------------------------------------- /packages/popconfirm/index.js: -------------------------------------------------------------------------------- 1 | import Popconfirm from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Popconfirm.install = function(Vue) { 5 | Vue.component(Popconfirm.name, Popconfirm); 6 | }; 7 | 8 | export default Popconfirm; 9 | -------------------------------------------------------------------------------- /packages/popover/index.js: -------------------------------------------------------------------------------- 1 | import Popover from './src/main'; 2 | import directive from './src/directive'; 3 | import Vue from 'vue'; 4 | 5 | Vue.directive('popover', directive); 6 | 7 | /* istanbul ignore next */ 8 | Popover.install = function(Vue) { 9 | Vue.directive('popover', directive); 10 | Vue.component(Popover.name, Popover); 11 | }; 12 | Popover.directive = directive; 13 | 14 | export default Popover; 15 | -------------------------------------------------------------------------------- /packages/popover/src/directive.js: -------------------------------------------------------------------------------- 1 | const getReference = (el, binding, vnode) => { 2 | const _ref = binding.expression ? binding.value : binding.arg; 3 | const popper = vnode.context.$refs[_ref]; 4 | if (popper) { 5 | if (Array.isArray(popper)) { 6 | popper[0].$refs.reference = el; 7 | } else { 8 | popper.$refs.reference = el; 9 | } 10 | } 11 | }; 12 | 13 | export default { 14 | bind(el, binding, vnode) { 15 | getReference(el, binding, vnode); 16 | }, 17 | inserted(el, binding, vnode) { 18 | getReference(el, binding, vnode); 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /packages/progress/index.js: -------------------------------------------------------------------------------- 1 | import ElProgress from './src/progress'; 2 | 3 | /* istanbul ignore next */ 4 | ElProgress.install = function(Vue) { 5 | Vue.component(ElProgress.name, ElProgress); 6 | }; 7 | 8 | export default ElProgress; 9 | -------------------------------------------------------------------------------- /packages/radio-button/index.js: -------------------------------------------------------------------------------- 1 | import RadioButton from '../radio/src/radio-button.vue'; 2 | 3 | /* istanbul ignore next */ 4 | RadioButton.install = function(Vue) { 5 | Vue.component(RadioButton.name, RadioButton); 6 | }; 7 | 8 | export default RadioButton; 9 | -------------------------------------------------------------------------------- /packages/radio-group/index.js: -------------------------------------------------------------------------------- 1 | import RadioGroup from '../radio/src/radio-group.vue'; 2 | 3 | /* istanbul ignore next */ 4 | RadioGroup.install = function(Vue) { 5 | Vue.component(RadioGroup.name, RadioGroup); 6 | }; 7 | 8 | export default RadioGroup; 9 | -------------------------------------------------------------------------------- /packages/radio/index.js: -------------------------------------------------------------------------------- 1 | import Radio from './src/radio'; 2 | 3 | /* istanbul ignore next */ 4 | Radio.install = function(Vue) { 5 | Vue.component(Radio.name, Radio); 6 | }; 7 | 8 | export default Radio; 9 | -------------------------------------------------------------------------------- /packages/rate/index.js: -------------------------------------------------------------------------------- 1 | import Rate from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Rate.install = function(Vue) { 5 | Vue.component(Rate.name, Rate); 6 | }; 7 | 8 | export default Rate; 9 | -------------------------------------------------------------------------------- /packages/row/index.js: -------------------------------------------------------------------------------- 1 | import Row from './src/row'; 2 | 3 | /* istanbul ignore next */ 4 | Row.install = function(Vue) { 5 | Vue.component(Row.name, Row); 6 | }; 7 | 8 | export default Row; 9 | 10 | -------------------------------------------------------------------------------- /packages/row/src/row.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'ElRow', 3 | 4 | componentName: 'ElRow', 5 | 6 | props: { 7 | tag: { 8 | type: String, 9 | default: 'div' 10 | }, 11 | gutter: Number, 12 | type: String, 13 | justify: { 14 | type: String, 15 | default: 'start' 16 | }, 17 | align: { 18 | type: String, 19 | default: 'top' 20 | } 21 | }, 22 | 23 | computed: { 24 | style() { 25 | const ret = {}; 26 | 27 | if (this.gutter) { 28 | ret.marginLeft = `-${this.gutter / 2}px`; 29 | ret.marginRight = ret.marginLeft; 30 | } 31 | 32 | return ret; 33 | } 34 | }, 35 | 36 | render(h) { 37 | return h(this.tag, { 38 | class: [ 39 | 'el-row', 40 | this.justify !== 'start' ? `is-justify-${this.justify}` : '', 41 | this.align !== 'top' ? `is-align-${this.align}` : '', 42 | { 'el-row--flex': this.type === 'flex' } 43 | ], 44 | style: this.style 45 | }, this.$slots.default); 46 | } 47 | }; 48 | -------------------------------------------------------------------------------- /packages/scrollbar/index.js: -------------------------------------------------------------------------------- 1 | import Scrollbar from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Scrollbar.install = function(Vue) { 5 | Vue.component(Scrollbar.name, Scrollbar); 6 | }; 7 | 8 | export default Scrollbar; 9 | -------------------------------------------------------------------------------- /packages/scrollbar/src/util.js: -------------------------------------------------------------------------------- 1 | export const BAR_MAP = { 2 | vertical: { 3 | offset: 'offsetHeight', 4 | scroll: 'scrollTop', 5 | scrollSize: 'scrollHeight', 6 | size: 'height', 7 | key: 'vertical', 8 | axis: 'Y', 9 | client: 'clientY', 10 | direction: 'top' 11 | }, 12 | horizontal: { 13 | offset: 'offsetWidth', 14 | scroll: 'scrollLeft', 15 | scrollSize: 'scrollWidth', 16 | size: 'width', 17 | key: 'horizontal', 18 | axis: 'X', 19 | client: 'clientX', 20 | direction: 'left' 21 | } 22 | }; 23 | 24 | export function renderThumbStyle({ move, size, bar }) { 25 | const style = {}; 26 | const translate = `translate${bar.axis}(${ move }%)`; 27 | 28 | style[bar.size] = size; 29 | style.transform = translate; 30 | style.msTransform = translate; 31 | style.webkitTransform = translate; 32 | 33 | return style; 34 | }; 35 | -------------------------------------------------------------------------------- /packages/select/index.js: -------------------------------------------------------------------------------- 1 | import Select from './src/select'; 2 | 3 | /* istanbul ignore next */ 4 | Select.install = function(Vue) { 5 | Vue.component(Select.name, Select); 6 | }; 7 | 8 | export default Select; 9 | -------------------------------------------------------------------------------- /packages/slider/index.js: -------------------------------------------------------------------------------- 1 | import Slider from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Slider.install = function(Vue) { 5 | Vue.component(Slider.name, Slider); 6 | }; 7 | 8 | export default Slider; 9 | -------------------------------------------------------------------------------- /packages/slider/src/marker.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'ElMarker', 3 | 4 | props: { 5 | mark: { 6 | type: [String, Object] 7 | } 8 | }, 9 | render() { 10 | let label = typeof this.mark === 'string' ? this.mark : this.mark.label; 11 | 12 | return ( 13 |
14 | { label } 15 |
16 | ); 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /packages/spinner/index.js: -------------------------------------------------------------------------------- 1 | import Spinner from './src/spinner'; 2 | 3 | /* istanbul ignore next */ 4 | Spinner.install = function(Vue) { 5 | Vue.component(Spinner.name, Spinner); 6 | }; 7 | 8 | export default Spinner; 9 | -------------------------------------------------------------------------------- /packages/spinner/src/spinner.vue: -------------------------------------------------------------------------------- 1 | 8 | 28 | -------------------------------------------------------------------------------- /packages/step/index.js: -------------------------------------------------------------------------------- 1 | import Step from '../steps/src/step'; 2 | 3 | /* istanbul ignore next */ 4 | Step.install = function(Vue) { 5 | Vue.component(Step.name, Step); 6 | }; 7 | 8 | export default Step; 9 | -------------------------------------------------------------------------------- /packages/steps/index.js: -------------------------------------------------------------------------------- 1 | import Steps from './src/steps'; 2 | 3 | /* istanbul ignore next */ 4 | Steps.install = function(Vue) { 5 | Vue.component(Steps.name, Steps); 6 | }; 7 | 8 | export default Steps; 9 | -------------------------------------------------------------------------------- /packages/submenu/index.js: -------------------------------------------------------------------------------- 1 | import ElSubmenu from '../menu/src/submenu'; 2 | 3 | /* istanbul ignore next */ 4 | ElSubmenu.install = function(Vue) { 5 | Vue.component(ElSubmenu.name, ElSubmenu); 6 | }; 7 | 8 | export default ElSubmenu; 9 | -------------------------------------------------------------------------------- /packages/switch/index.js: -------------------------------------------------------------------------------- 1 | import Switch from './src/component'; 2 | 3 | /* istanbul ignore next */ 4 | Switch.install = function(Vue) { 5 | Vue.component(Switch.name, Switch); 6 | }; 7 | 8 | export default Switch; 9 | 10 | -------------------------------------------------------------------------------- /packages/tab-pane/index.js: -------------------------------------------------------------------------------- 1 | import TabPane from '../tabs/src/tab-pane.vue'; 2 | 3 | /* istanbul ignore next */ 4 | TabPane.install = function(Vue) { 5 | Vue.component(TabPane.name, TabPane); 6 | }; 7 | 8 | export default TabPane; 9 | -------------------------------------------------------------------------------- /packages/table-column/index.js: -------------------------------------------------------------------------------- 1 | import ElTableColumn from '../table/src/table-column'; 2 | 3 | /* istanbul ignore next */ 4 | ElTableColumn.install = function(Vue) { 5 | Vue.component(ElTableColumn.name, ElTableColumn); 6 | }; 7 | 8 | export default ElTableColumn; 9 | -------------------------------------------------------------------------------- /packages/table/index.js: -------------------------------------------------------------------------------- 1 | import ElTable from './src/table'; 2 | 3 | /* istanbul ignore next */ 4 | ElTable.install = function(Vue) { 5 | Vue.component(ElTable.name, ElTable); 6 | }; 7 | 8 | export default ElTable; 9 | -------------------------------------------------------------------------------- /packages/table/src/dropdown.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | var dropdowns = []; 3 | 4 | !Vue.prototype.$isServer && document.addEventListener('click', function(event) { 5 | dropdowns.forEach(function(dropdown) { 6 | var target = event.target; 7 | if (!dropdown || !dropdown.$el) return; 8 | if (target === dropdown.$el || dropdown.$el.contains(target)) { 9 | return; 10 | } 11 | dropdown.handleOutsideClick && dropdown.handleOutsideClick(event); 12 | }); 13 | }); 14 | 15 | export default { 16 | open(instance) { 17 | if (instance) { 18 | dropdowns.push(instance); 19 | } 20 | }, 21 | 22 | close(instance) { 23 | var index = dropdowns.indexOf(instance); 24 | if (index !== -1) { 25 | dropdowns.splice(instance, 1); 26 | } 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /packages/tabs/index.js: -------------------------------------------------------------------------------- 1 | import ElTabs from './src/tabs'; 2 | 3 | /* istanbul ignore next */ 4 | ElTabs.install = function(Vue) { 5 | Vue.component(ElTabs.name, ElTabs); 6 | }; 7 | 8 | export default ElTabs; 9 | -------------------------------------------------------------------------------- /packages/tag/index.js: -------------------------------------------------------------------------------- 1 | import ElTag from './src/tag'; 2 | 3 | /* istanbul ignore next */ 4 | ElTag.install = function(Vue) { 5 | Vue.component(ElTag.name, ElTag); 6 | }; 7 | 8 | export default ElTag; 9 | -------------------------------------------------------------------------------- /packages/theme-chalk/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib 3 | npm-debug* 4 | -------------------------------------------------------------------------------- /packages/theme-chalk/README.md: -------------------------------------------------------------------------------- 1 | # element-theme-chalk 2 | > element component chalk theme. 3 | 4 | 5 | ## Installation 6 | ```shell 7 | npm i element-theme-chalk -S 8 | ``` 9 | 10 | ## Usage 11 | 12 | Use Sass import 13 | ```css 14 | @import 'element-theme-chalk'; 15 | ``` 16 | 17 | Or Use webpack 18 | ```javascript 19 | import 'element-theme-chalk'; 20 | ``` 21 | 22 | Or 23 | ```html 24 | 25 | ``` 26 | 27 | ## Import on demand 28 | ```javascript 29 | import 'element-theme-chalk/lib/input.css'; 30 | import 'element-theme-chalk/lib/select.css'; 31 | 32 | // ... 33 | ``` 34 | -------------------------------------------------------------------------------- /packages/theme-chalk/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // gulp 配置文件 4 | 5 | const { series, src, dest } = require('gulp'); 6 | const sass = require('gulp-sass'); 7 | const autoprefixer = require('gulp-autoprefixer'); 8 | const cssmin = require('gulp-cssmin'); 9 | 10 | // 将 scss 编译成 css 并压缩，最后输出到 ./lib 目录下 11 | function compile() { 12 | return src('./src/*.scss') 13 | .pipe(sass.sync()) 14 | .pipe(autoprefixer({ 15 | browsers: ['ie > 9', 'last 2 versions'], 16 | cascade: false 17 | })) 18 | .pipe(cssmin()) 19 | .pipe(dest('./lib')); 20 | } 21 | 22 | // 拷贝 ./src/fonts 到 ./lib/fonts 23 | function copyfont() { 24 | return src('./src/fonts/**') 25 | .pipe(cssmin()) 26 | .pipe(dest('./lib/fonts')); 27 | } 28 | 29 | exports.build = series(compile, copyfont); 30 | -------------------------------------------------------------------------------- /packages/theme-chalk/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "element-theme-chalk", 3 | "version": "2.15.0", 4 | "description": "Element component chalk theme.", 5 | "main": "lib/index.css", 6 | "style": "lib/index.css", 7 | "files": [ 8 | "lib", 9 | "src" 10 | ], 11 | "scripts": { 12 | "build": "gulp build" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/ElementUI/theme-chalk.git" 17 | }, 18 | "keywords": [ 19 | "element", 20 | "theme" 21 | ], 22 | "author": "yi.shyang@ele.me", 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/ElementUI/theme-chalk/issues" 26 | }, 27 | "homepage": "https://github.com/ElementUI/theme-chalk#readme", 28 | "devDependencies": { 29 | "gulp": "^3.9.1", 30 | "gulp-cssmin": "^0.1.7", 31 | "gulp-sass": "^3.1.0", 32 | "gulp-autoprefixer": "^4.0.0" 33 | }, 34 | "dependencies": {} 35 | } 36 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/aside.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | 3 | @include b(aside) { 4 | overflow: auto; 5 | box-sizing: border-box; 6 | flex-shrink: 0; 7 | } 8 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/backtop.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(backtop) { 5 | position: fixed; 6 | background-color: $--backtop-background-color; 7 | width: 40px; 8 | height: 40px; 9 | border-radius: 50%; 10 | color: $--backtop-font-color; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | font-size: 20px; 15 | box-shadow: 0 0 6px rgba(0,0,0, .12); 16 | cursor: pointer; 17 | z-index: 5; 18 | 19 | &:hover { 20 | background-color: $--backtop-hover-background-color 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/base.scss: -------------------------------------------------------------------------------- 1 | @import "common/transition.scss"; 2 | @import "icon.scss"; 3 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/breadcrumb-item.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/packages/theme-chalk/src/breadcrumb-item.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/button-group.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/packages/theme-chalk/src/button-group.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/card.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(card) { 5 | border-radius: $--card-border-radius; 6 | border: 1px solid $--card-border-color; 7 | background-color: $--color-white; 8 | overflow: hidden; 9 | color: $--color-text-primary; 10 | transition: 0.3s; 11 | 12 | @include when(always-shadow) { 13 | box-shadow: $--box-shadow-light; 14 | } 15 | 16 | @include when(hover-shadow) { 17 | &:hover, 18 | &:focus { 19 | box-shadow: $--box-shadow-light; 20 | } 21 | } 22 | 23 | @include e(header) { 24 | padding: #{$--card-padding - 2 $--card-padding}; 25 | border-bottom: 1px solid $--card-border-color; 26 | box-sizing: border-box; 27 | } 28 | 29 | @include e(body) { 30 | padding: $--card-padding; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/carousel-item.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(carousel) { 5 | @include e(item) { 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | width: 100%; 10 | height: 100%; 11 | display: inline-block; 12 | overflow: hidden; 13 | z-index: #{$--index-normal - 1}; 14 | 15 | @include when(active) { 16 | z-index: #{$--index-normal + 1}; 17 | } 18 | 19 | @include when(animating) { 20 | transition: transform .4s ease-in-out; 21 | } 22 | 23 | @include m(card) { 24 | width: 50%; 25 | transition: transform .4s ease-in-out; 26 | &.is-in-stage { 27 | cursor: pointer; 28 | z-index: $--index-normal; 29 | &:hover .el-carousel__mask, 30 | &.is-hover .el-carousel__mask { 31 | opacity: 0.12; 32 | } 33 | } 34 | &.is-active { 35 | z-index: #{$--index-normal + 1}; 36 | } 37 | } 38 | } 39 | 40 | @include e(mask) { 41 | position: absolute; 42 | width: 100%; 43 | height: 100%; 44 | top: 0; 45 | left: 0; 46 | background-color: $--color-white; 47 | opacity: 0.24; 48 | transition: .2s; 49 | } 50 | } -------------------------------------------------------------------------------- /packages/theme-chalk/src/checkbox-button.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/packages/theme-chalk/src/checkbox-button.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/checkbox-group.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/packages/theme-chalk/src/checkbox-group.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/collapse-item.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/packages/theme-chalk/src/collapse-item.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/common/popup.scss: -------------------------------------------------------------------------------- 1 | @import "./var.scss"; 2 | @import "../mixins/mixins"; 3 | 4 | .v-modal-enter { 5 | animation: v-modal-in .2s ease; 6 | } 7 | 8 | .v-modal-leave { 9 | animation: v-modal-out .2s ease forwards; 10 | } 11 | 12 | @keyframes v-modal-in { 13 | 0% { 14 | opacity: 0; 15 | } 16 | 100% { 17 | } 18 | } 19 | 20 | @keyframes v-modal-out { 21 | 0% { 22 | } 23 | 100% { 24 | opacity: 0; 25 | } 26 | } 27 | 28 | .v-modal { 29 | position: fixed; 30 | left: 0; 31 | top: 0; 32 | width: 100%; 33 | height: 100%; 34 | opacity: $--popup-modal-opacity; 35 | background: $--popup-modal-background-color; 36 | } 37 | 38 | @include b(popup-parent) { 39 | @include m(hidden) { 40 | overflow: hidden; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/container.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | 3 | @include b(container) { 4 | display: flex; 5 | flex-direction: row; 6 | flex: 1; 7 | flex-basis: auto; 8 | box-sizing: border-box; 9 | min-width: 0; 10 | 11 | @include when(vertical) { 12 | flex-direction: column; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/date-picker.scss: -------------------------------------------------------------------------------- 1 | @import "./date-picker/date-table.scss"; 2 | @import "./date-picker/month-table.scss"; 3 | @import "./date-picker/year-table.scss"; 4 | @import "./date-picker/time-spinner.scss"; 5 | @import "./date-picker/picker.scss"; 6 | @import "./date-picker/date-picker.scss"; 7 | @import "./date-picker/date-range-picker.scss"; 8 | @import "./date-picker/time-range-picker.scss"; 9 | @import "./date-picker/time-picker.scss"; 10 | @import "./input.scss"; 11 | @import "./scrollbar.scss"; 12 | @import "./popper"; -------------------------------------------------------------------------------- /packages/theme-chalk/src/date-picker/time-range-picker.scss: -------------------------------------------------------------------------------- 1 | @import "../common/var"; 2 | 3 | @include b(time-range-picker) { 4 | width: 354px; 5 | overflow: visible; 6 | 7 | @include e(content) { 8 | position: relative; 9 | text-align: center; 10 | padding: 10px; 11 | } 12 | 13 | @include e(cell) { 14 | box-sizing: border-box; 15 | margin: 0; 16 | padding: 4px 7px 7px; 17 | width: 50%; 18 | display: inline-block; 19 | } 20 | 21 | @include e(header) { 22 | margin-bottom: 5px; 23 | text-align: center; 24 | font-size: 14px; 25 | } 26 | 27 | @include e(body) { 28 | border-radius:2px; 29 | border: 1px solid $--datepicker-border-color; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/date-picker/year-table.scss: -------------------------------------------------------------------------------- 1 | @import "../common/var"; 2 | 3 | @include b(year-table) { 4 | font-size: 12px; 5 | margin: -1px; 6 | border-collapse: collapse; 7 | 8 | .el-icon { 9 | color: $--datepicker-icon-color; 10 | } 11 | 12 | td { 13 | text-align: center; 14 | padding: 20px 3px; 15 | cursor: pointer; 16 | 17 | &.today { 18 | .cell { 19 | color: $--color-primary; 20 | font-weight: bold; 21 | } 22 | } 23 | 24 | &.disabled .cell { 25 | background-color: $--background-color-base; 26 | cursor: not-allowed; 27 | color: $--color-text-placeholder; 28 | 29 | &:hover { 30 | color: $--color-text-placeholder; 31 | } 32 | } 33 | 34 | .cell { 35 | width: 48px; 36 | height: 32px; 37 | display: block; 38 | line-height: 32px; 39 | color: $--datepicker-font-color; 40 | margin: 0 auto; 41 | 42 | &:hover { 43 | color: $--datepicker-hover-font-color; 44 | } 45 | } 46 | 47 | &.current:not(.disabled) .cell { 48 | color: $--datepicker-active-color; 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/display.scss: -------------------------------------------------------------------------------- 1 | @import "common/var"; 2 | @import "mixins/mixins"; 3 | 4 | .hidden { 5 | @each $break-point-name, $value in $--breakpoints-spec { 6 | &-#{$break-point-name} { 7 | @include res($break-point-name, $--breakpoints-spec) { 8 | display: none !important; 9 | } 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/divider.scss: -------------------------------------------------------------------------------- 1 | @import "common/var"; 2 | @import "mixins/mixins"; 3 | 4 | @include b(divider) { 5 | background-color: $--border-color-base; 6 | position: relative; 7 | 8 | @include m(horizontal) { 9 | display: block; 10 | height: 1px; 11 | width: 100%; 12 | margin: 24px 0; 13 | } 14 | 15 | @include m(vertical) { 16 | display: inline-block; 17 | width: 1px; 18 | height: 1em; 19 | margin: 0 8px; 20 | vertical-align: middle; 21 | position: relative; 22 | } 23 | 24 | @include e(text) { 25 | position: absolute; 26 | background-color: $--color-white; 27 | padding: 0 20px; 28 | font-weight: 500; 29 | color: $--color-text-primary; 30 | font-size: 14px; 31 | 32 | @include when(left) { 33 | left: 20px; 34 | transform: translateY(-50%); 35 | } 36 | 37 | @include when(center) { 38 | left: 50%; 39 | transform: translateX(-50%) translateY(-50%); 40 | } 41 | 42 | @include when(right) { 43 | right: 20px; 44 | transform: translateY(-50%); 45 | } 46 | } 47 | } -------------------------------------------------------------------------------- /packages/theme-chalk/src/dropdown-item.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/packages/theme-chalk/src/dropdown-item.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/dropdown-menu.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/packages/theme-chalk/src/dropdown-menu.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/fonts/element-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/packages/theme-chalk/src/fonts/element-icons.ttf -------------------------------------------------------------------------------- /packages/theme-chalk/src/fonts/element-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/packages/theme-chalk/src/fonts/element-icons.woff -------------------------------------------------------------------------------- /packages/theme-chalk/src/footer.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(footer) { 5 | padding: $--footer-padding; 6 | box-sizing: border-box; 7 | flex-shrink: 0; 8 | } 9 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/form-item.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/packages/theme-chalk/src/form-item.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/header.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(header) { 5 | padding: $--header-padding; 6 | box-sizing: border-box; 7 | flex-shrink: 0; 8 | } 9 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/infinite-scroll.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/packages/theme-chalk/src/infinite-scroll.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/infiniteScroll.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/packages/theme-chalk/src/infiniteScroll.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/main.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(main) { 5 | // IE11 supports the
element partially https://caniuse.com/#search=main 6 | display: block; 7 | flex: 1; 8 | flex-basis: auto; 9 | overflow: auto; 10 | box-sizing: border-box; 11 | padding: $--main-padding; 12 | } 13 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/menu-item-group.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/packages/theme-chalk/src/menu-item-group.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/menu-item.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/packages/theme-chalk/src/menu-item.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/mixins/config.scss: -------------------------------------------------------------------------------- 1 | $namespace: 'el'; 2 | $element-separator: '__'; 3 | $modifier-separator: '--'; 4 | $state-prefix: 'is-'; 5 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/mixins/function.scss: -------------------------------------------------------------------------------- 1 | @import "config"; 2 | 3 | /* BEM support Func 4 | -------------------------- */ 5 | @function selectorToString($selector) { 6 | $selector: inspect($selector); 7 | $selector: str-slice($selector, 2, -2); 8 | @return $selector; 9 | } 10 | 11 | @function containsModifier($selector) { 12 | $selector: selectorToString($selector); 13 | 14 | @if str-index($selector, $modifier-separator) { 15 | @return true; 16 | } @else { 17 | @return false; 18 | } 19 | } 20 | 21 | @function containWhenFlag($selector) { 22 | $selector: selectorToString($selector); 23 | 24 | @if str-index($selector, '.' + $state-prefix) { 25 | @return true 26 | } @else { 27 | @return false 28 | } 29 | } 30 | 31 | @function containPseudoClass($selector) { 32 | $selector: selectorToString($selector); 33 | 34 | @if str-index($selector, ':') { 35 | @return true 36 | } @else { 37 | @return false 38 | } 39 | } 40 | 41 | @function hitAllSpecialNestRule($selector) { 42 | 43 | @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector); 44 | } 45 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/mixins/utils.scss: -------------------------------------------------------------------------------- 1 | @mixin utils-user-select($value) { 2 | -moz-user-select: $value; 3 | -webkit-user-select: $value; 4 | -ms-user-select: $value; 5 | } 6 | 7 | @mixin utils-clearfix { 8 | $selector: &; 9 | 10 | @at-root { 11 | #{$selector}::before, 12 | #{$selector}::after { 13 | display: table; 14 | content: ""; 15 | } 16 | #{$selector}::after { 17 | clear: both 18 | } 19 | } 20 | } 21 | 22 | @mixin utils-vertical-center { 23 | $selector: &; 24 | 25 | @at-root { 26 | #{$selector}::after { 27 | display: inline-block; 28 | content: ""; 29 | height: 100%; 30 | vertical-align: middle 31 | } 32 | } 33 | } 34 | 35 | @mixin utils-ellipsis { 36 | overflow: hidden; 37 | text-overflow: ellipsis; 38 | white-space: nowrap; 39 | } -------------------------------------------------------------------------------- /packages/theme-chalk/src/option-group.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(select-group) { 5 | $gap: 20px; 6 | 7 | margin: 0; 8 | padding: 0; 9 | 10 | @include e(wrap) { 11 | position: relative; 12 | list-style: none; 13 | margin: 0; 14 | padding: 0; 15 | 16 | &:not(:last-of-type) { 17 | padding-bottom: 24px; 18 | 19 | &::after { 20 | content: ''; 21 | position: absolute; 22 | display: block; 23 | left: $gap; 24 | right: $gap; 25 | bottom: 12px; 26 | height: 1px; 27 | background: $--border-color-light; 28 | } 29 | } 30 | } 31 | 32 | @include e(title) { 33 | padding-left: $gap; 34 | font-size: $--select-group-font-size; 35 | color: $--select-group-color; 36 | line-height: $--select-group-height; 37 | } 38 | 39 | & .el-select-dropdown__item { 40 | padding-left: $gap; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/option.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(select-dropdown) { 5 | @include e(item) { 6 | font-size: $--select-font-size; 7 | padding: 0 20px; 8 | position: relative; 9 | white-space: nowrap; 10 | overflow: hidden; 11 | text-overflow: ellipsis; 12 | color: $--select-option-color; 13 | height: $--select-option-height; 14 | line-height: $--select-option-height; 15 | box-sizing: border-box; 16 | cursor: pointer; 17 | 18 | @include when(disabled) { 19 | color: $--select-option-disabled-color; 20 | cursor: not-allowed; 21 | 22 | &:hover { 23 | background-color: $--color-white; 24 | } 25 | } 26 | 27 | &.hover, &:hover { 28 | background-color: $--select-option-hover-background; 29 | } 30 | 31 | &.selected { 32 | color: $--select-option-selected-font-color; 33 | font-weight: bold; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/page-header.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(page-header) { 5 | display: flex; 6 | line-height: 24px; 7 | 8 | @include e(left) { 9 | display: flex; 10 | cursor: pointer; 11 | margin-right: 40px; 12 | position: relative; 13 | 14 | &::after { 15 | content: ""; 16 | position: absolute; 17 | width: 1px; 18 | height: 16px; 19 | right: -20px; 20 | top: 50%; 21 | transform: translateY(-50%); 22 | background-color: $--border-color-base; 23 | } 24 | 25 | .el-icon-back { 26 | font-size: 18px; 27 | margin-right: 6px; 28 | align-self: center; 29 | } 30 | 31 | @include e(title) { 32 | font-size: 14px; 33 | font-weight: 500; 34 | } 35 | } 36 | 37 | @include e(content) { 38 | font-size: 18px; 39 | color: $--color-text-primary; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/popconfirm.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(popconfirm) { 5 | @include e(main) { 6 | display: flex; 7 | align-items: center; 8 | } 9 | @include e(icon) { 10 | margin-right: 5px; 11 | } 12 | @include e(action) { 13 | text-align: right; 14 | margin: 0 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/popover.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | @import "./popper"; 4 | 5 | @include b(popover) { 6 | position: absolute; 7 | background: $--popover-background-color; 8 | min-width: 150px; 9 | border-radius: 4px; 10 | border: 1px solid $--popover-border-color; 11 | padding: $--popover-padding; 12 | z-index: $--index-popper; 13 | color: $--color-text-regular; 14 | line-height: 1.4; 15 | text-align: justify; 16 | font-size: $--popover-font-size; 17 | box-shadow: $--box-shadow-light; 18 | word-break: break-all; 19 | 20 | @include m(plain) { 21 | padding: $--popover-padding-large; 22 | } 23 | 24 | @include e(title) { 25 | color: $--popover-title-font-color; 26 | font-size: $--popover-title-font-size; 27 | line-height: 1; 28 | margin-bottom: 12px; 29 | } 30 | 31 | @include e(reference) { 32 | &:focus:not(.focusing), &:focus:hover { 33 | outline-width: 0; 34 | } 35 | } 36 | 37 | &:focus:active, &:focus { 38 | outline-width: 0; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/radio-group.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(radio-group) { 5 | display: inline-block; 6 | line-height: 1; 7 | vertical-align: middle; 8 | font-size: 0; 9 | } 10 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/rate.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(rate) { 5 | height: $--rate-height; 6 | line-height: 1; 7 | 8 | &:focus, &:active { 9 | outline-width: 0; 10 | } 11 | 12 | @include e(item) { 13 | display: inline-block; 14 | position: relative; 15 | font-size: 0; 16 | vertical-align: middle; 17 | } 18 | 19 | @include e(icon) { 20 | position: relative; 21 | display: inline-block; 22 | font-size: $--rate-icon-size; 23 | margin-right: $--rate-icon-margin; 24 | color: $--rate-icon-color; 25 | transition: .3s; 26 | &.hover { 27 | transform: scale(1.15); 28 | } 29 | 30 | .path2 { 31 | position: absolute; 32 | left: 0; 33 | top: 0; 34 | } 35 | } 36 | 37 | @include e(decimal) { 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | display: inline-block; 42 | overflow: hidden; 43 | } 44 | 45 | @include e(text) { 46 | font-size: $--rate-font-size; 47 | vertical-align: middle; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/row.scss: -------------------------------------------------------------------------------- 1 | @import "common/var"; 2 | @import "mixins/mixins"; 3 | @import "mixins/utils"; 4 | 5 | @include b(row) { 6 | position: relative; 7 | box-sizing: border-box; 8 | @include utils-clearfix; 9 | 10 | @include m(flex) { 11 | display: flex; 12 | &:before, 13 | &:after { 14 | display: none; 15 | } 16 | 17 | @include when(justify-center) { 18 | justify-content: center; 19 | } 20 | @include when(justify-end) { 21 | justify-content: flex-end; 22 | } 23 | @include when(justify-space-between) { 24 | justify-content: space-between; 25 | } 26 | @include when(justify-space-around) { 27 | justify-content: space-around; 28 | } 29 | 30 | @include when(align-middle) { 31 | align-items: center; 32 | } 33 | @include when(align-bottom) { 34 | align-items: flex-end; 35 | } 36 | } 37 | 38 | } 39 | 40 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/spinner.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | 3 | @include b(time-spinner) { 4 | width: 100%; 5 | white-space: nowrap; 6 | } 7 | 8 | @include b(spinner) { 9 | display: inline-block; 10 | vertical-align: middle; 11 | } 12 | @include b(spinner-inner) { 13 | animation: rotate 2s linear infinite; 14 | width: 50px; 15 | height: 50px; 16 | 17 | & .path { 18 | stroke: #ececec; 19 | stroke-linecap: round; 20 | animation: dash 1.5s ease-in-out infinite; 21 | } 22 | 23 | } 24 | 25 | @keyframes rotate { 26 | 100% { 27 | transform: rotate(360deg); 28 | } 29 | } 30 | 31 | @keyframes dash { 32 | 0% { 33 | stroke-dasharray: 1, 150; 34 | stroke-dashoffset: 0; 35 | } 36 | 50% { 37 | stroke-dasharray: 90, 150; 38 | stroke-dashoffset: -35; 39 | } 40 | 100% { 41 | stroke-dasharray: 90, 150; 42 | stroke-dashoffset: -124; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/steps.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | 3 | @include b(steps) { 4 | display: flex; 5 | 6 | @include m(simple) { 7 | padding: 13px 8%; 8 | border-radius: 4px; 9 | background: $--background-color-base; 10 | } 11 | 12 | @include m(horizontal) { 13 | white-space: nowrap; 14 | } 15 | 16 | @include m(vertical) { 17 | height: 100%; 18 | flex-flow: column; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/submenu.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/packages/theme-chalk/src/submenu.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/tab-pane.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyongning/element-ui/9ebdb2dc73fe2bcc6235c12035f3b0a4325b1690/packages/theme-chalk/src/tab-pane.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/time-picker.scss: -------------------------------------------------------------------------------- 1 | @import "./date-picker/picker.scss"; 2 | @import "./date-picker/picker-panel.scss"; 3 | @import "./date-picker/time-spinner.scss"; 4 | @import "./date-picker/time-picker.scss"; 5 | @import "./date-picker/time-range-picker.scss"; 6 | @import "./input.scss"; 7 | @import "./scrollbar.scss"; 8 | @import "./popper"; 9 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/time-select.scss: -------------------------------------------------------------------------------- 1 | @import "common/var"; 2 | @import "./date-picker/picker.scss"; 3 | @import "./date-picker/date-picker.scss"; 4 | @import "./scrollbar.scss"; 5 | @import "./popper"; 6 | 7 | .time-select { 8 | margin: 5px 0; 9 | min-width: 0; 10 | } 11 | 12 | .time-select .el-picker-panel__content { 13 | max-height: 200px; 14 | margin: 0; 15 | } 16 | 17 | .time-select-item { 18 | padding: 8px 10px; 19 | font-size: 14px; 20 | line-height: 20px; 21 | } 22 | 23 | .time-select-item.selected:not(.disabled) { 24 | color: $--color-primary; 25 | font-weight: bold; 26 | } 27 | 28 | .time-select-item.disabled { 29 | color: $--datepicker-border-color; 30 | cursor: not-allowed; 31 | } 32 | 33 | .time-select-item:hover { 34 | background-color: $--background-color-base; 35 | font-weight: bold; 36 | cursor: pointer; 37 | } 38 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/timeline.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(timeline) { 5 | margin: 0; 6 | font-size: $--font-size-base; 7 | list-style: none; 8 | 9 | & .el-timeline-item:last-child { 10 | & .el-timeline-item__tail { 11 | display: none; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/time-picker/index.js: -------------------------------------------------------------------------------- 1 | import TimePicker from '../date-picker/src/picker/time-picker'; 2 | 3 | /* istanbul ignore next */ 4 | TimePicker.install = function(Vue) { 5 | Vue.component(TimePicker.name, TimePicker); 6 | }; 7 | 8 | export default TimePicker; 9 | -------------------------------------------------------------------------------- /packages/time-select/index.js: -------------------------------------------------------------------------------- 1 | import TimeSelect from '../date-picker/src/picker/time-select'; 2 | 3 | /* istanbul ignore next */ 4 | TimeSelect.install = function(Vue) { 5 | Vue.component(TimeSelect.name, TimeSelect); 6 | }; 7 | 8 | export default TimeSelect; 9 | -------------------------------------------------------------------------------- /packages/timeline-item/index.js: -------------------------------------------------------------------------------- 1 | import ElTimelineItem from '../timeline/src/item'; 2 | 3 | /* istanbul ignore next */ 4 | ElTimelineItem.install = function(Vue) { 5 | Vue.component(ElTimelineItem.name, ElTimelineItem); 6 | }; 7 | 8 | export default ElTimelineItem; 9 | -------------------------------------------------------------------------------- /packages/timeline/index.js: -------------------------------------------------------------------------------- 1 | import Timeline from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Timeline.install = function(Vue) { 5 | Vue.component(Timeline.name, Timeline); 6 | }; 7 | 8 | export default Timeline; 9 | -------------------------------------------------------------------------------- /packages/timeline/src/main.vue: -------------------------------------------------------------------------------- 1 | 34 | -------------------------------------------------------------------------------- /packages/tooltip/index.js: -------------------------------------------------------------------------------- 1 | import Tooltip from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Tooltip.install = function(Vue) { 5 | Vue.component(Tooltip.name, Tooltip); 6 | }; 7 | 8 | export default Tooltip; 9 | -------------------------------------------------------------------------------- /packages/transfer/index.js: -------------------------------------------------------------------------------- 1 | import Transfer from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Transfer.install = function(Vue) { 5 | Vue.component(Transfer.name, Transfer); 6 | }; 7 | 8 | export default Transfer; 9 | -------------------------------------------------------------------------------- /packages/tree/index.js: -------------------------------------------------------------------------------- 1 | import Tree from './src/tree.vue'; 2 | 3 | /* istanbul ignore next */ 4 | Tree.install = function(Vue) { 5 | Vue.component(Tree.name, Tree); 6 | }; 7 | 8 | export default Tree; 9 | -------------------------------------------------------------------------------- /packages/tree/src/model/util.js: -------------------------------------------------------------------------------- 1 | export const NODE_KEY = '$treeNodeId'; 2 | 3 | export const markNodeData = function(node, data) { 4 | if (!data || data[NODE_KEY]) return; 5 | Object.defineProperty(data, NODE_KEY, { 6 | value: node.id, 7 | enumerable: false, 8 | configurable: false, 9 | writable: false 10 | }); 11 | }; 12 | 13 | export const getNodeKey = function(key, data) { 14 | if (!key) return data[NODE_KEY]; 15 | return data[key]; 16 | }; 17 | 18 | export const findNearestComponent = (element, componentName) => { 19 | let target = element; 20 | while (target && target.tagName !== 'BODY') { 21 | if (target.__vue__ && target.__vue__.$options.name === componentName) { 22 | return target.__vue__; 23 | } 24 | target = target.parentNode; 25 | } 26 | return null; 27 | }; 28 | -------------------------------------------------------------------------------- /packages/upload/index.js: -------------------------------------------------------------------------------- 1 | import Upload from './src'; 2 | 3 | /* istanbul ignore next */ 4 | Upload.install = function(Vue) { 5 | Vue.component(Upload.name, Upload); 6 | }; 7 | 8 | export default Upload; 9 | -------------------------------------------------------------------------------- /src/directives/mousewheel.js: -------------------------------------------------------------------------------- 1 | import normalizeWheel from 'normalize-wheel'; 2 | 3 | const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1; 4 | 5 | const mousewheel = function(element, callback) { 6 | if (element && element.addEventListener) { 7 | element.addEventListener(isFirefox ? 'DOMMouseScroll' : 'mousewheel', function(event) { 8 | const normalized = normalizeWheel(event); 9 | callback && callback.apply(this, [event, normalized]); 10 | }); 11 | } 12 | }; 13 | 14 | export default { 15 | bind(el, binding) { 16 | mousewheel(el, binding.value); 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /src/directives/repeat-click.js: -------------------------------------------------------------------------------- 1 | import { once, on } from 'element-ui/src/utils/dom'; 2 | 3 | export default { 4 | bind(el, binding, vnode) { 5 | let interval = null; 6 | let startTime; 7 | const handler = () => vnode.context[binding.expression].apply(); 8 | const clear = () => { 9 | if (Date.now() - startTime < 100) { 10 | handler(); 11 | } 12 | clearInterval(interval); 13 | interval = null; 14 | }; 15 | 16 | on(el, 'mousedown', (e) => { 17 | if (e.button !== 0) return; 18 | startTime = Date.now(); 19 | once(document, 'mouseup', clear); 20 | clearInterval(interval); 21 | interval = setInterval(handler, 100); 22 | }); 23 | } 24 | }; 25 | -------------------------------------------------------------------------------- /src/locale/format.js: -------------------------------------------------------------------------------- 1 | import { hasOwn } from 'element-ui/src/utils/util'; 2 | 3 | const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g; 4 | /** 5 | * String format template 6 | * - Inspired: 7 | * https://github.com/Matt-Esch/string-template/index.js 8 | */ 9 | export default function(Vue) { 10 | 11 | /** 12 | * template 13 | * 14 | * @param {String} string 15 | * @param {Array} ...args 16 | * @return {String} 17 | */ 18 | 19 | function template(string, ...args) { 20 | if (args.length === 1 && typeof args[0] === 'object') { 21 | args = args[0]; 22 | } 23 | 24 | if (!args || !args.hasOwnProperty) { 25 | args = {}; 26 | } 27 | 28 | return string.replace(RE_NARGS, (match, prefix, i, index) => { 29 | let result; 30 | 31 | if (string[index - 1] === '{' && 32 | string[index + match.length] === '}') { 33 | return i; 34 | } else { 35 | result = hasOwn(args, i) ? args[i] : null; 36 | if (result === null || result === undefined) { 37 | return ''; 38 | } 39 | 40 | return result; 41 | } 42 | }); 43 | } 44 | 45 | return template; 46 | } 47 | -------------------------------------------------------------------------------- /src/mixins/emitter.js: -------------------------------------------------------------------------------- 1 | function broadcast(componentName, eventName, params) { 2 | this.$children.forEach(child => { 3 | var name = child.$options.componentName; 4 | 5 | if (name === componentName) { 6 | child.$emit.apply(child, [eventName].concat(params)); 7 | } else { 8 | broadcast.apply(child, [componentName, eventName].concat([params])); 9 | } 10 | }); 11 | } 12 | export default { 13 | methods: { 14 | dispatch(componentName, eventName, params) { 15 | var parent = this.$parent || this.$root; 16 | var name = parent.$options.componentName; 17 | 18 | while (parent && (!name || name !== componentName)) { 19 | parent = parent.$parent; 20 | 21 | if (parent) { 22 | name = parent.$options.componentName; 23 | } 24 | } 25 | if (parent) { 26 | parent.$emit.apply(parent, [eventName].concat(params)); 27 | } 28 | }, 29 | broadcast(componentName, eventName, params) { 30 | broadcast.call(this, componentName, eventName, params); 31 | } 32 | } 33 | }; 34 | -------------------------------------------------------------------------------- /src/mixins/focus.js: -------------------------------------------------------------------------------- 1 | export default function(ref) { 2 | return { 3 | methods: { 4 | focus() { 5 | this.$refs[ref].focus(); 6 | } 7 | } 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /src/mixins/locale.js: -------------------------------------------------------------------------------- 1 | import { t } from 'element-ui/src/locale'; 2 | 3 | export default { 4 | methods: { 5 | t(...args) { 6 | return t.apply(this, args); 7 | } 8 | } 9 | }; 10 | -------------------------------------------------------------------------------- /src/utils/after-leave.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Bind after-leave event for vue instance. Make sure after-leave is called in any browsers. 3 | * 4 | * @param {Vue} instance Vue instance. 5 | * @param {Function} callback callback of after-leave event 6 | * @param {Number} speed the speed of transition, default value is 300ms 7 | * @param {Boolean} once weather bind after-leave once. default value is false. 8 | */ 9 | export default function(instance, callback, speed = 300, once = false) { 10 | if (!instance || !callback) throw new Error('instance & callback is required'); 11 | let called = false; 12 | const afterLeaveCallback = function() { 13 | if (called) return; 14 | called = true; 15 | if (callback) { 16 | callback.apply(null, arguments); 17 | } 18 | }; 19 | if (once) { 20 | instance.$once('after-leave', afterLeaveCallback); 21 | } else { 22 | instance.$on('after-leave', afterLeaveCallback); 23 | } 24 | setTimeout(() => { 25 | afterLeaveCallback(); 26 | }, speed + 100); 27 | }; 28 | -------------------------------------------------------------------------------- /src/utils/menu/aria-menubar.js: -------------------------------------------------------------------------------- 1 | import MenuItem from './aria-menuitem'; 2 | 3 | const Menu = function(domNode) { 4 | this.domNode = domNode; 5 | this.init(); 6 | }; 7 | 8 | Menu.prototype.init = function() { 9 | let menuChildren = this.domNode.childNodes; 10 | [].filter.call(menuChildren, child => child.nodeType === 1).forEach(child => { 11 | new MenuItem(child); // eslint-disable-line 12 | }); 13 | }; 14 | export default Menu; 15 | -------------------------------------------------------------------------------- /src/utils/merge.js: -------------------------------------------------------------------------------- 1 | export default function(target) { 2 | for (let i = 1, j = arguments.length; i < j; i++) { 3 | let source = arguments[i] || {}; 4 | for (let prop in source) { 5 | if (source.hasOwnProperty(prop)) { 6 | let value = source[prop]; 7 | if (value !== undefined) { 8 | target[prop] = value; 9 | } 10 | } 11 | } 12 | } 13 | 14 | return target; 15 | }; 16 | -------------------------------------------------------------------------------- /src/utils/resize-event.js: -------------------------------------------------------------------------------- 1 | import ResizeObserver from 'resize-observer-polyfill'; 2 | 3 | const isServer = typeof window === 'undefined'; 4 | 5 | /* istanbul ignore next */ 6 | const resizeHandler = function(entries) { 7 | for (let entry of entries) { 8 | const listeners = entry.target.__resizeListeners__ || []; 9 | if (listeners.length) { 10 | listeners.forEach(fn => { 11 | fn(); 12 | }); 13 | } 14 | } 15 | }; 16 | 17 | /* istanbul ignore next */ 18 | export const addResizeListener = function(element, fn) { 19 | if (isServer) return; 20 | if (!element.__resizeListeners__) { 21 | element.__resizeListeners__ = []; 22 | element.__ro__ = new ResizeObserver(resizeHandler); 23 | element.__ro__.observe(element); 24 | } 25 | element.__resizeListeners__.push(fn); 26 | }; 27 | 28 | /* istanbul ignore next */ 29 | export const removeResizeListener = function(element, fn) { 30 | if (!element || !element.__resizeListeners__) return; 31 | element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1); 32 | if (!element.__resizeListeners__.length) { 33 | element.__ro__.disconnect(); 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /src/utils/scroll-into-view.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | export default function scrollIntoView(container, selected) { 4 | if (Vue.prototype.$isServer) return; 5 | 6 | if (!selected) { 7 | container.scrollTop = 0; 8 | return; 9 | } 10 | 11 | const offsetParents = []; 12 | let pointer = selected.offsetParent; 13 | while (pointer && container !== pointer && container.contains(pointer)) { 14 | offsetParents.push(pointer); 15 | pointer = pointer.offsetParent; 16 | } 17 | const top = selected.offsetTop + offsetParents.reduce((prev, curr) => (prev + curr.offsetTop), 0); 18 | const bottom = top + selected.offsetHeight; 19 | const viewRectTop = container.scrollTop; 20 | const viewRectBottom = viewRectTop + container.clientHeight; 21 | 22 | if (top < viewRectTop) { 23 | container.scrollTop = top; 24 | } else if (bottom > viewRectBottom) { 25 | container.scrollTop = bottom - container.clientHeight; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/utils/scrollbar-width.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | let scrollBarWidth; 4 | 5 | export default function() { 6 | if (Vue.prototype.$isServer) return 0; 7 | if (scrollBarWidth !== undefined) return scrollBarWidth; 8 | 9 | const outer = document.createElement('div'); 10 | outer.className = 'el-scrollbar__wrap'; 11 | outer.style.visibility = 'hidden'; 12 | outer.style.width = '100px'; 13 | outer.style.position = 'absolute'; 14 | outer.style.top = '-9999px'; 15 | document.body.appendChild(outer); 16 | 17 | const widthNoScroll = outer.offsetWidth; 18 | outer.style.overflow = 'scroll'; 19 | 20 | const inner = document.createElement('div'); 21 | inner.style.width = '100%'; 22 | outer.appendChild(inner); 23 | 24 | const widthWithScroll = inner.offsetWidth; 25 | outer.parentNode.removeChild(outer); 26 | scrollBarWidth = widthNoScroll - widthWithScroll; 27 | 28 | return scrollBarWidth; 29 | }; 30 | -------------------------------------------------------------------------------- /src/utils/shared.js: -------------------------------------------------------------------------------- 1 | export function isDef(val) { 2 | return val !== undefined && val !== null; 3 | } 4 | export function isKorean(text) { 5 | const reg = /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi; 6 | return reg.test(text); 7 | } 8 | -------------------------------------------------------------------------------- /src/utils/types.js: -------------------------------------------------------------------------------- 1 | export function isString(obj) { 2 | return Object.prototype.toString.call(obj) === '[object String]'; 3 | } 4 | 5 | export function isObject(obj) { 6 | return Object.prototype.toString.call(obj) === '[object Object]'; 7 | } 8 | 9 | export function isHtmlElement(node) { 10 | return node && node.nodeType === Node.ELEMENT_NODE; 11 | } 12 | 13 | export const isFunction = (functionToCheck) => { 14 | var getType = {}; 15 | return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]'; 16 | }; 17 | 18 | export const isUndefined = (val)=> { 19 | return val === void 0; 20 | }; 21 | 22 | export const isDefined = (val) => { 23 | return val !== undefined && val !== null; 24 | }; 25 | -------------------------------------------------------------------------------- /src/utils/vdom.js: -------------------------------------------------------------------------------- 1 | import { hasOwn } from 'element-ui/src/utils/util'; 2 | 3 | export function isVNode(node) { 4 | return node !== null && typeof node === 'object' && hasOwn(node, 'componentOptions'); 5 | }; 6 | -------------------------------------------------------------------------------- /test/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true, 4 | "es6": true 5 | }, 6 | "globals": { 7 | "expect": true, 8 | "sinon": true 9 | }, 10 | "parserOptions": { 11 | "ecmaVersion": 2017 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /test/ssr/require.test.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | try { 4 | process.env.VUE_ENV = 'server'; 5 | require(path.join(process.env.PWD, './lib/index')); 6 | console.log('SSR require test PASS'); 7 | } catch (e) { 8 | console.error('SSR require test error'); 9 | throw Error(e); 10 | } 11 | -------------------------------------------------------------------------------- /test/unit/index.js: -------------------------------------------------------------------------------- 1 | require('babel-regenerator-runtime'); // add regenerator support for async await 2 | require('packages/theme-chalk/lib/index.css'); 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 | srcContext.keys().forEach(srcContext); 13 | -------------------------------------------------------------------------------- /test/unit/karma.conf.js: -------------------------------------------------------------------------------- 1 | const webpackConfig = require('../../build/webpack.test'); 2 | 3 | module.exports = function(config) { 4 | const configuration = { 5 | browsers: ['ChromeHeadless'], 6 | frameworks: ['mocha', 'sinon-chai'], 7 | reporters: ['spec', 'coverage'], 8 | files: ['./index.js'], 9 | preprocessors: { 10 | './index.js': ['webpack', 'sourcemap'] 11 | }, 12 | webpack: webpackConfig, 13 | webpackMiddleware: { 14 | noInfo: true 15 | }, 16 | coverageReporter: { 17 | dir: './coverage', 18 | reporters: [ 19 | { type: 'lcov', subdir: '.' }, 20 | { type: 'text-summary' } 21 | ] 22 | }, 23 | client: { 24 | mocha: { 25 | timeout: 4000 26 | } 27 | } 28 | }; 29 | 30 | config.set(configuration); 31 | }; 32 | -------------------------------------------------------------------------------- /test/unit/specs/backtop.spec.js: -------------------------------------------------------------------------------- 1 | import { createVue, destroyVM, wait } from '../util'; 2 | 3 | describe('Backtop', () => { 4 | let vm; 5 | afterEach(() => { 6 | destroyVM(vm); 7 | }); 8 | 9 | it('create', async() => { 10 | vm = createVue({ 11 | template: ` 12 |
13 |
14 | 15 | test_up_text 16 | 17 |
18 |
19 | ` 20 | }, true); 21 | expect(vm.$el).to.exist; 22 | expect(vm.$el.innerText).to.be.equal(''); 23 | vm.$refs.scrollTarget.scrollTop = 2000; 24 | await wait(); 25 | expect(vm.$el.innerText).to.be.equal('test_up_text'); 26 | }); 27 | }); 28 | 29 | -------------------------------------------------------------------------------- /test/unit/specs/badge.spec.js: -------------------------------------------------------------------------------- 1 | import { createTest, createVue, destroyVM } from '../util'; 2 | import Badge from 'packages/badge'; 3 | 4 | describe('Badge', () => { 5 | let vm; 6 | afterEach(() => { 7 | destroyVM(vm); 8 | }); 9 | 10 | it('value', () => { 11 | vm = createTest(Badge, { value: 80 }); 12 | expect(vm.content).to.equal(80); 13 | }); 14 | 15 | it('is fixed', () => { 16 | vm = createVue(` 17 | 18 | 19 | 20 | `); 21 | 22 | expect(vm.$el.querySelector('.el-badge__content.is-fixed')).to.exist; 23 | }); 24 | 25 | it('is dot', () => { 26 | vm = createVue(` 27 | 28 | 29 | 30 | `); 31 | 32 | expect(vm.$el.querySelector('.el-badge__content.is-dot')).to.exist; 33 | }); 34 | 35 | it('max', () => { 36 | vm = createTest(Badge, { max: 100, value: 200 }); 37 | expect(vm.content).to.equal('100+'); 38 | vm = createTest(Badge, { max: 100, value: 80 }); 39 | expect(vm.content).to.equal(80); 40 | }); 41 | }); 42 | -------------------------------------------------------------------------------- /test/unit/specs/breadcrumb.spec.js: -------------------------------------------------------------------------------- 1 | import { createVue, destroyVM } from '../util'; 2 | 3 | describe('Breadcrumb', () => { 4 | let vm; 5 | afterEach(() => { 6 | destroyVM(vm); 7 | }); 8 | 9 | it('create', done => { 10 | vm = createVue(` 11 | 12 | 首页 13 | 活动管理 14 | 活动列表 15 | 活动详情 16 | 17 | `); 18 | vm.$nextTick(_ => { 19 | expect(vm.$el.querySelector('.el-breadcrumb__separator').innerText).to.equal('>'); 20 | done(); 21 | }); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /test/unit/specs/divider.spec.js: -------------------------------------------------------------------------------- 1 | import { createVue, destroyVM } from '../util'; 2 | 3 | describe('Divider', () => { 4 | let vm; 5 | afterEach(() => { 6 | destroyVM(vm); 7 | }); 8 | 9 | it('content', () => { 10 | vm = createVue({ 11 | template: ` 12 | 我是一条完美分割线！ 13 | ` 14 | }); 15 | 16 | expect(vm.$el).to.property('textContent').to.include('我是一条完美分割线！'); 17 | }); 18 | 19 | it('direction', () => { 20 | vm = createVue({ 21 | template: ` 22 | 我是一条完美分割线！ 23 | ` 24 | }); 25 | 26 | expect(vm.$el.className).to.include('el-divider--vertical'); 27 | }); 28 | 29 | it('apply class to divider', () => { 30 | vm = createVue({ 31 | template: ` 32 | 我是一条完美分割线！ 33 | ` 34 | }); 35 | expect(vm.$el.className).to.include('my-divider'); 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /test/unit/specs/page-header.spec.js: -------------------------------------------------------------------------------- 1 | import { createVue, destroyVM, waitImmediate } from '../util'; 2 | import PageHeader from 'packages/page-header'; 3 | 4 | describe('PageHeader', () => { 5 | let vm; 6 | afterEach(() => { 7 | destroyVM(vm); 8 | }); 9 | 10 | it('render well and trigger back event', async() => { 11 | vm = createVue(PageHeader, { 12 | content: 'content' 13 | }); 14 | expect(vm.$el).to.exist; 15 | const spy = sinon.spy(); 16 | vm.$on('back', spy); 17 | vm.$el.querySelector('.el-page-header__left').click(); 18 | 19 | await waitImmediate(); 20 | 21 | expect(spy.calledOnce).to.be.true; 22 | }); 23 | }); 24 | 25 | -------------------------------------------------------------------------------- /test/unit/specs/popconfirm.spec.js: -------------------------------------------------------------------------------- 1 | import { createVue, destroyVM } from '../util'; 2 | 3 | describe('Popconfirm', () => { 4 | let vm; 5 | afterEach(() => { 6 | destroyVM(vm); 7 | }); 8 | 9 | describe('trigger', () => { 10 | const createVM = () => { 11 | return createVue(` 12 |
13 | 16 | 17 | 18 |
19 | `, true); 20 | }; 21 | it('click', () => { 22 | vm = createVM(); 23 | vm.$el.querySelector('button').click(); 24 | document.body.click(); 25 | expect(document.body.querySelector('.el-popconfirm__action').style.display).to.equal(''); 26 | }); 27 | }); 28 | 29 | }); 30 | -------------------------------------------------------------------------------- /types/alert.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | export type AlertType = 'success' | 'warning' | 'info' | 'error' 4 | export type AlertEffect = 'dark' | 'light' 5 | 6 | /** Alert Component */ 7 | export declare class ElAlert extends ElementUIComponent { 8 | /** Title */ 9 | title: string 10 | 11 | /** Component type */ 12 | type: AlertType 13 | 14 | /** Descriptive text. Can also be passed with the default slot */ 15 | description: string 16 | 17 | /** If closable or not */ 18 | closable: boolean 19 | 20 | /** whether to center the text */ 21 | center: boolean 22 | 23 | /** Customized close button text */ 24 | closeText: string 25 | 26 | /** If a type icon is displayed */ 27 | showIcon: boolean 28 | 29 | /** Choose effect */ 30 | effect: AlertEffect 31 | } 32 | -------------------------------------------------------------------------------- /types/aside.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Aside Component */ 4 | export declare class ElAside extends ElementUIComponent { 5 | /** Width of the side section */ 6 | width: string 7 | } 8 | -------------------------------------------------------------------------------- /types/avatar.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Avatar Component */ 4 | export declare class ElAvatar extends ElementUIComponent { 5 | icon: string; 6 | 7 | size: string | number; 8 | 9 | shape: string; 10 | 11 | src: string; 12 | 13 | error: () => false; 14 | 15 | srcSet: string; 16 | 17 | alt: string; 18 | 19 | fit: string; 20 | } 21 | -------------------------------------------------------------------------------- /types/backtop.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Backtop Component */ 4 | export declare class ElBacktop extends ElementUIComponent { 5 | /** Backtop target */ 6 | target: string 7 | 8 | /** Backtop visibility height */ 9 | visibilityHeight: string | number 10 | 11 | /** Backtop right position */ 12 | right: string | number 13 | 14 | /** Backtop bottom position */ 15 | bottom: string | number 16 | } 17 | -------------------------------------------------------------------------------- /types/badge.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Badge Component */ 4 | export declare class ElBadge extends ElementUIComponent { 5 | /** Display value */ 6 | value: string | number 7 | 8 | /** Maximum value, shows '{max}+' when exceeded. Only works if `value` is a number */ 9 | max: number 10 | 11 | /** If a little dot is displayed */ 12 | isDot: boolean 13 | 14 | /** Hidden badge */ 15 | hidden: boolean 16 | } 17 | -------------------------------------------------------------------------------- /types/breadcrumb-item.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Breadcrumb Item Component */ 4 | export declare class ElBreadcrumbItem extends ElementUIComponent { 5 | /** Target route of the link, same as to of vue-router */ 6 | to: string | object 7 | 8 | /** If true, the navigation will not leave a history record */ 9 | replace: boolean 10 | } 11 | -------------------------------------------------------------------------------- /types/breadcrumb.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Displays the location of the current page, making it easier to browser back */ 4 | export declare class ElBreadcrumb extends ElementUIComponent { 5 | /** Separator character */ 6 | separator: string 7 | 8 | /** Class name of the icon separator */ 9 | separatorClass: string 10 | } 11 | -------------------------------------------------------------------------------- /types/button-group.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Button Group Component */ 4 | export declare class ElButtonGroup extends ElementUIComponent {} 5 | -------------------------------------------------------------------------------- /types/button.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent, ElementUIComponentSize } from './component' 2 | 3 | /** Button type */ 4 | export type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text' 5 | 6 | /** Same as native button's type */ 7 | export type ButtonNativeType = 'button' | 'submit' | 'reset' | 'menu' 8 | 9 | /** Button Component */ 10 | export declare class ElButton extends ElementUIComponent { 11 | /** Button size */ 12 | size: ElementUIComponentSize 13 | 14 | /** Button type */ 15 | type: ButtonType 16 | 17 | /** Determine whether it's a plain button */ 18 | plain: boolean 19 | 20 | /** Determine whether it's a round button */ 21 | round: boolean 22 | 23 | /** Determine whether it's loading */ 24 | loading: boolean 25 | 26 | /** Disable the button */ 27 | disabled: boolean 28 | 29 | /** Button icon, accepts an icon name of Element icon component */ 30 | icon: string 31 | 32 | /** Same as native button's autofocus */ 33 | autofocus: boolean 34 | 35 | /** Same as native button's type */ 36 | nativeType: ButtonNativeType 37 | } 38 | -------------------------------------------------------------------------------- /types/calendar.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | export type DateType = Date | String | Number 4 | 5 | /** Calendar Component */ 6 | export declare class ElCalendar extends ElementUIComponent { 7 | /** Binding value */ 8 | value: DateType 9 | 10 | /** Specify the display range of the calendar */ 11 | range: DateType[] 12 | 13 | /** First day of week */ 14 | firstDayOfWeek: number 15 | } 16 | -------------------------------------------------------------------------------- /types/card.d.ts: -------------------------------------------------------------------------------- 1 | import { VNode, VNodeDirective } from 'vue' 2 | import { ElementUIComponent } from './component' 3 | 4 | export interface CardSlots { 5 | /** Content of the card */ 6 | default: VNode[], 7 | 8 | /** Title of the card */ 9 | header: VNode[] 10 | 11 | [key: string]: VNode[] 12 | } 13 | 14 | /** Integrate information in a card container */ 15 | export declare class ElCard extends ElementUIComponent { 16 | /** Title of the card */ 17 | header: string 18 | 19 | /** CSS style of body */ 20 | bodyStyle: object 21 | 22 | /** When to show card shadows */ 23 | shadow: string 24 | 25 | $slots: CardSlots 26 | } 27 | -------------------------------------------------------------------------------- /types/carousel-item.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Carousel Item Component */ 4 | export declare class ElCarouselItem extends ElementUIComponent { 5 | /** Name of the item, can be used in setActiveItem */ 6 | name: string 7 | 8 | /** Text content for the corresponding indicator */ 9 | label: string 10 | } 11 | -------------------------------------------------------------------------------- /types/checkbox-button.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Checkbox Button Component */ 4 | export declare class ElCheckboxButton extends ElementUIComponent { 5 | /** Value of the checkbox when used inside a checkbox-group */ 6 | label: string | number | boolean 7 | 8 | /** Value of the checkbox if it's checked */ 9 | trueLabel: string | number 10 | 11 | /** Value of the checkbox if it's not checked */ 12 | falseLabel: string | number 13 | 14 | /** Native 'name' attribute */ 15 | name: string 16 | 17 | /** If the checkbox is disabled */ 18 | disabled: boolean 19 | 20 | /** If the checkbox is checked */ 21 | checked: boolean 22 | } 23 | -------------------------------------------------------------------------------- /types/checkbox-group.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent, ElementUIComponentSize } from './component' 2 | 3 | /** Checkbox Group Component */ 4 | export declare class ElCheckboxGroup extends ElementUIComponent { 5 | /** Size of checkbox buttons or bordered checkboxes */ 6 | size: ElementUIComponentSize 7 | 8 | /** Whether the nesting checkboxes are disabled */ 9 | disabled: boolean 10 | 11 | /** Minimum number of checkbox checked */ 12 | min: number 13 | 14 | /** Maximum number of checkbox checked */ 15 | max: number 16 | 17 | /** Font color when button is active */ 18 | textColor: string 19 | 20 | /** Border and background color when button is active */ 21 | fill: string 22 | } 23 | -------------------------------------------------------------------------------- /types/checkbox.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent, ElementUIComponentSize } from './component' 2 | 3 | /** Checkbox Component */ 4 | export declare class ElCheckbox extends ElementUIComponent { 5 | /** The form input value */ 6 | value: string | string[] 7 | 8 | /** Value of the checkbox when used inside a checkbox-group */ 9 | label: string | number | boolean 10 | 11 | /** Value of the checkbox if it's checked */ 12 | trueLabel: string | number 13 | 14 | /** Value of the checkbox if it's not checked */ 15 | falseLabel: string | number 16 | 17 | /** Native 'name' attribute */ 18 | name: string 19 | 20 | /** Whether to add a border around Checkbox */ 21 | border: boolean 22 | 23 | /** Size of the Checkbox, only works when border is true */ 24 | size: ElementUIComponentSize 25 | 26 | /** If the checkbox is disabled */ 27 | disabled: boolean 28 | 29 | /** If the checkbox is checked */ 30 | checked: boolean 31 | 32 | /** Same as indeterminate in native checkbox */ 33 | indeterminate: boolean 34 | } 35 | -------------------------------------------------------------------------------- /types/collapse-item.d.ts: -------------------------------------------------------------------------------- 1 | import { VNode } from 'vue' 2 | import { ElementUIComponent } from './component' 3 | 4 | export interface CollapseItemSlots { 5 | /** Content of the collapse item */ 6 | default: VNode[], 7 | 8 | /** Title of the collapse item */ 9 | title: VNode[] 10 | 11 | [key: string]: VNode[] 12 | } 13 | 14 | /** Collapse Item Component */ 15 | export declare class ElCollapseItem extends ElementUIComponent { 16 | /** Unique identification of the panel */ 17 | name: string | number 18 | 19 | /** Title of the panel */ 20 | title: string 21 | 22 | $slots: CollapseItemSlots 23 | 24 | /** Disable the collapse item */ 25 | disabled: boolean 26 | } 27 | -------------------------------------------------------------------------------- /types/collapse.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Use Collapse to store contents. */ 4 | export declare class ElCollapse extends ElementUIComponent { 5 | /** Whether to activate accordion mode */ 6 | accordion: boolean 7 | 8 | /** Currently active panel */ 9 | value: string | number | string[] | number[] 10 | } 11 | -------------------------------------------------------------------------------- /types/color-picker.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent, ElementUIComponentSize } from './component' 2 | 3 | export type ColorFormat = 'hsl' | 'hsv' | 'hex' | 'rgb' 4 | 5 | /** ColorPicker Component */ 6 | export declare class ElColorPicker extends ElementUIComponent { 7 | /** Whether to display the alpha slider */ 8 | showAlpha: boolean 9 | 10 | /** Whether to disable the ColorPicker */ 11 | disabled: boolean 12 | 13 | /** Size of ColorPicker */ 14 | size: ElementUIComponentSize 15 | 16 | /** Whether to display the alpha slider */ 17 | popperClass: string 18 | 19 | /** Custom class name for ColorPicker's dropdown */ 20 | colorFormat: ColorFormat 21 | } 22 | -------------------------------------------------------------------------------- /types/component.d.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | /** ElementUI component common definition */ 4 | export declare class ElementUIComponent extends Vue { 5 | /** Install component into Vue */ 6 | static install (vue: typeof Vue): void 7 | } 8 | 9 | /** Component size definition for button, input, etc */ 10 | export type ElementUIComponentSize = 'large' | 'medium' | 'small' | 'mini' 11 | 12 | /** Horizontal alignment */ 13 | export type ElementUIHorizontalAlignment = 'left' | 'center' | 'right' 14 | -------------------------------------------------------------------------------- /types/container.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Container Component */ 4 | export declare class ElContainer extends ElementUIComponent { 5 | /** Layout direction for child elements */ 6 | direction: 'horizontal' | 'vertical' 7 | } 8 | -------------------------------------------------------------------------------- /types/divider.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | export type ContentPosition = 'left' | 'center' | 'right' 4 | 5 | /** Divider Component */ 6 | export declare class ElDivider extends ElementUIComponent { 7 | /** enable vertical divider */ 8 | vertical: boolean 9 | 10 | /** customize the content on the divider line */ 11 | posiiton: ContentPosition 12 | } 13 | -------------------------------------------------------------------------------- /types/dropdown-item.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Toggleable menu for displaying lists of links and actions. */ 4 | export declare class ElDropdownItem extends ElementUIComponent { 5 | /** A command to be dispatched to Dropdown's command callback */ 6 | command: string | number | object 7 | 8 | /** Whether the item is disabled */ 9 | disabled: boolean 10 | 11 | /** Whether a divider is displayed */ 12 | divided: boolean 13 | 14 | /** Icon to show on left side of text */ 15 | icon: string 16 | } 17 | -------------------------------------------------------------------------------- /types/dropdown-menu.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Dropdown Menu Component */ 4 | export declare class ElDropdownMenu extends ElementUIComponent {} 5 | -------------------------------------------------------------------------------- /types/dropdown.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent, ElementUIComponentSize } from './component' 2 | import { ButtonType } from './button' 3 | 4 | export type DropdownMenuAlignment = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' 5 | export type DropdownMenuTrigger = 'hover' | 'click' 6 | 7 | /** Toggleable menu for displaying lists of links and actions */ 8 | export declare class ElDropdown extends ElementUIComponent { 9 | /** Menu button type. only works when split-button is true */ 10 | type: ButtonType 11 | 12 | /** Whether a button group is displayed */ 13 | splitButton: boolean 14 | 15 | /** menu size, also works on the split button */ 16 | size: ElementUIComponentSize 17 | 18 | /** Placement of the menu */ 19 | placement: DropdownMenuAlignment 20 | 21 | /** How to trigger */ 22 | trigger: DropdownMenuTrigger 23 | 24 | /** Whether to hide menu after clicking menu-item */ 25 | hideOnClick: boolean 26 | 27 | /** Delay time before show a dropdown */ 28 | showTimeout: number 29 | 30 | /** Delay time before hide a dropdown */ 31 | hideTimeout: number 32 | 33 | /** Dropdown tabindex */ 34 | tabindex: number 35 | } 36 | -------------------------------------------------------------------------------- /types/footer.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Footer Component */ 4 | export declare class ElFooter extends ElementUIComponent { 5 | /** Height of the footer */ 6 | height: string 7 | } 8 | -------------------------------------------------------------------------------- /types/form-item.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent, ElementUIComponentSize } from './component' 2 | 3 | /** FormItem Component */ 4 | export declare class ElFormItem extends ElementUIComponent { 5 | /** A key of `model` of the enclosing `el-form` component */ 6 | prop: string 7 | 8 | /** Label */ 9 | label: string 10 | 11 | /** Width of label, e.g. '50px' */ 12 | labelWidth: string 13 | 14 | /** Whether the field is required or not, will be determined by validation rules if omitted */ 15 | required: boolean 16 | 17 | /** Validation rules of form */ 18 | rules: object 19 | 20 | /** Field error message, set its value and the field will validate error and show this message immediately */ 21 | error: string 22 | 23 | /** Whether to show the error message */ 24 | showMessage: boolean 25 | 26 | /** Whether to display the error message inline with the form item */ 27 | inlineMessage: boolean 28 | 29 | /** Controls the size of components in this form */ 30 | size: ElementUIComponentSize 31 | 32 | /** Reset current field and remove validation result */ 33 | resetField (): void 34 | 35 | /** Remove validation status of the field */ 36 | clearValidate (): void 37 | } 38 | -------------------------------------------------------------------------------- /types/header.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Header Component */ 4 | export declare class ElHeader extends ElementUIComponent { 5 | /** Height of the header */ 6 | height: string 7 | } 8 | -------------------------------------------------------------------------------- /types/icon.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Icon Component */ 4 | export declare class ElIcon extends ElementUIComponent { 5 | /** Icon name */ 6 | name: string 7 | } 8 | -------------------------------------------------------------------------------- /types/image.d.ts: -------------------------------------------------------------------------------- 1 | import { VNode } from 'vue' 2 | import { ElementUIComponent } from './component' 3 | 4 | export type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' 5 | 6 | export interface ImageSlots { 7 | /** Placeholder content when image hasn't loaded yet */ 8 | placeholder: VNode[] 9 | 10 | /** Error content when error occurs to image load */ 11 | error: VNode[] 12 | 13 | [key: string]: VNode[] 14 | } 15 | 16 | /** Image Component */ 17 | export declare class ElImage extends ElementUIComponent { 18 | /** Image source */ 19 | src: string 20 | 21 | /** Indicate how the image should be resized to fit its container, same as native 'object-fit' */ 22 | fit: ObjectFit 23 | 24 | /** Whether to use lazy load */ 25 | lazy: boolean 26 | 27 | /** Scroll container that to add scroll listener when using lazy load */ 28 | scrollContainer: string | HTMLElement 29 | 30 | /** Native 'alt' attribute */ 31 | alt: string 32 | 33 | /** Native 'referrerPolicy' attribute */ 34 | referrerPolicy: string 35 | 36 | $slots: ImageSlots 37 | 38 | previewSrcList: string[] 39 | 40 | zIndex: number 41 | } 42 | -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from './element-ui' 2 | 3 | import * as ElementUI from './element-ui' 4 | export default ElementUI 5 | -------------------------------------------------------------------------------- /types/infinite-scroll.d.ts: -------------------------------------------------------------------------------- 1 | import { VNodeDirective } from 'vue' 2 | 3 | export interface ElInfiniteScroll extends VNodeDirective { 4 | name: 'infinite-scroll', 5 | value: Function 6 | } -------------------------------------------------------------------------------- /types/input-number.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | export type InputNumberSize = 'large' | 'small' 4 | 5 | /** InputNumber Component */ 6 | export declare class ElInputNumber extends ElementUIComponent { 7 | /** Binding value */ 8 | value: number 9 | 10 | /** The minimum allowed value */ 11 | min: number 12 | 13 | /** The maximum allowed value */ 14 | max: number 15 | 16 | /** Incremental step */ 17 | step: number 18 | 19 | /** Size of the component */ 20 | size: InputNumberSize 21 | 22 | /** Whether the component is disabled */ 23 | disabled: boolean 24 | 25 | /** Whether to enable the control buttons */ 26 | controls: boolean 27 | 28 | /** Debounce delay when typing, in milliseconds */ 29 | debounce: number 30 | 31 | /** Position of the control buttons */ 32 | controlsPosition: string 33 | 34 | /** Same as name in native input */ 35 | name: string 36 | 37 | /** Precision of input value */ 38 | precision: number 39 | 40 | /** whether input value can only be multiple of step */ 41 | stepStrictly: boolean 42 | 43 | /** 44 | * Focus the Input component 45 | */ 46 | focus (): void 47 | } 48 | -------------------------------------------------------------------------------- /types/link.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Button type */ 4 | export type LinkType = 'primary' | 'success' | 'warning' | 'danger' | 'info' 5 | 6 | /** Link Component */ 7 | export declare class ElLink extends ElementUIComponent { 8 | /** Link type */ 9 | type: LinkType 10 | 11 | /** Disable the link */ 12 | disabled: boolean 13 | 14 | /** Link underline */ 15 | underline: boolean 16 | 17 | /** Link icon, accepts an icon name of Element icon component */ 18 | icon: string 19 | 20 | /** Link href */ 21 | href: string 22 | 23 | /** Link target */ 24 | target: string 25 | } 26 | -------------------------------------------------------------------------------- /types/main.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Main Component */ 4 | export declare class ElMain extends ElementUIComponent {} 5 | -------------------------------------------------------------------------------- /types/menu-item-group.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Menu Item Group Component */ 4 | export declare class ElMenuItemGroup extends ElementUIComponent { 5 | /** Group title */ 6 | title: string 7 | } 8 | -------------------------------------------------------------------------------- /types/menu-item.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Menu Item Component */ 4 | export declare class ElMenuItem extends ElementUIComponent { 5 | /** Unique identification */ 6 | index: string 7 | 8 | /** Vue Router object */ 9 | route: object 10 | } 11 | -------------------------------------------------------------------------------- /types/option-group.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Dropdown Select Option Group Component */ 4 | export declare class ElOptionGroup extends ElementUIComponent { 5 | /** Name of the group */ 6 | label: string 7 | 8 | /** Whether to disable all options in this group */ 9 | disabled: boolean 10 | } 11 | -------------------------------------------------------------------------------- /types/option.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Dropdown Select Option Component */ 4 | export declare class ElOption extends ElementUIComponent { 5 | /** Value of option */ 6 | value: any 7 | 8 | /** Label of option, same as value if omitted */ 9 | label: string 10 | 11 | /** Whether option is disabled */ 12 | disabled: boolean 13 | } 14 | -------------------------------------------------------------------------------- /types/page-header.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** PageHeader Component */ 4 | export declare class ElPageHeader extends ElementUIComponent { 5 | /** title */ 6 | title: String 7 | 8 | /** content */ 9 | content: String 10 | } 11 | -------------------------------------------------------------------------------- /types/popconfirm.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | import { ElPopover } from './popover' 3 | 4 | /** Popconfirm Component */ 5 | export declare class ElPopconfirm extends ElPopover { 6 | /** Popconfirm title */ 7 | title: string 8 | 9 | /** Popconfirm ok text */ 10 | confirmButtonText: string 11 | 12 | /** Popconfirm cancel text */ 13 | cancelButtonText: string 14 | 15 | /** Popconfirm ok type */ 16 | confirmButtonType: string 17 | 18 | /** Popconfirm cancal type */ 19 | cancelButtonType: string 20 | 21 | /** Popconfirm icon */ 22 | icon: string 23 | 24 | /** Popconfirm icon color */ 25 | iconColor: string 26 | 27 | /** Popconfirm hide icon */ 28 | hideIcon: boolean 29 | } 30 | -------------------------------------------------------------------------------- /types/progress.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | export type ProgressType = 'line' | 'circle' 4 | export type ProgressStatus = 'success' | 'exception' 5 | 6 | /** Progress Component */ 7 | export declare class ElProgress extends ElementUIComponent { 8 | /** Percentage, required */ 9 | percentage: number 10 | 11 | /** The type of progress bar */ 12 | type: ProgressType 13 | 14 | /** The width of progress bar */ 15 | strokeWidth: number 16 | 17 | /** Circle progress bar stroke line cap */ 18 | strokeLinecap: string 19 | 20 | /** Whether to place the percentage inside progress bar, only works when type is 'line' */ 21 | textInside: boolean 22 | 23 | /** The current status of progress bar */ 24 | status: ProgressStatus 25 | 26 | /** Background color of progress bar. Overrides `status` prop */ 27 | color: string | Function | Array 28 | 29 | /** The canvas width of circle progress bar */ 30 | width: number 31 | 32 | /** Whether to show percentage */ 33 | showText: boolean 34 | 35 | /** Template function of the content */ 36 | format(percentage: number): string 37 | } 38 | -------------------------------------------------------------------------------- /types/radio-button.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Radio Button Component */ 4 | export declare class ElRadioButton extends ElementUIComponent { 5 | /** The form input value */ 6 | value: string 7 | 8 | /** The value of radio */ 9 | label: string | number 10 | 11 | /** Whether radio is disabled */ 12 | disabled: boolean 13 | 14 | /** Native 'name' attribute */ 15 | name: string 16 | } 17 | -------------------------------------------------------------------------------- /types/radio-group.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | export type RadioGroupSize = 'large' | 'small' 4 | 5 | /** Radio Group Component */ 6 | export declare class ElRadioGroup extends ElementUIComponent { 7 | /** The size of radio buttons */ 8 | size: RadioGroupSize 9 | 10 | /** Border and background color when button is active */ 11 | fill: string 12 | 13 | /** Whether the nesting radios are disabled */ 14 | disabled: boolean 15 | 16 | /** Font color when button is active */ 17 | textColor: string 18 | } 19 | -------------------------------------------------------------------------------- /types/radio.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Radio Component */ 4 | export declare class ElRadio extends ElementUIComponent { 5 | /** The form input value */ 6 | value: string 7 | 8 | /** The value of radio */ 9 | label: string | number | boolean 10 | 11 | /** Whether radio is disabled */ 12 | disabled: boolean 13 | 14 | /** Whether to add a border around Radio */ 15 | border: boolean 16 | 17 | /** Native 'name' attribute */ 18 | name: string 19 | } 20 | -------------------------------------------------------------------------------- /types/row.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Horizontal alignment of flex layout */ 4 | export type HorizontalAlignment = 'start' | 'end' | 'center' | 'space-around' | 'space-between' 5 | 6 | /** vertical alignment of flex layout */ 7 | export type VertialAlignment = 'top' | 'middle' | 'bottom' 8 | 9 | /** Row Layout Component */ 10 | export declare class ElRow extends ElementUIComponent { 11 | /** Grid spacing */ 12 | gutter: number 13 | 14 | /** Layout mode. You can use flex. Works in modern browsers */ 15 | type: string 16 | 17 | /** Horizontal alignment of flex layout */ 18 | justify: HorizontalAlignment 19 | 20 | /** Vertical alignment of flex layout */ 21 | align: VertialAlignment 22 | 23 | /** Custom element tag */ 24 | tag: string 25 | } 26 | -------------------------------------------------------------------------------- /types/step.d.ts: -------------------------------------------------------------------------------- 1 | import { VNode } from 'vue' 2 | import { ElementUIComponent } from './component' 3 | 4 | export type StepStatus = 'wait' | 'process' | 'finish' | 'error' | 'success' 5 | 6 | export interface StepRenderSlots { 7 | /** Custom icon */ 8 | icon: VNode[], 9 | 10 | /** Step title */ 11 | title: VNode[], 12 | 13 | /** Step description */ 14 | description: VNode[], 15 | 16 | [key: string]: VNode[] 17 | } 18 | 19 | /** Step Component */ 20 | export declare class ElStep extends ElementUIComponent { 21 | /** Step title */ 22 | title: string 23 | 24 | /** Step description */ 25 | description: string 26 | 27 | /** Step icon */ 28 | icon: string 29 | 30 | /** Current status. It will be automatically set by Steps if not configured. */ 31 | status: StepStatus 32 | 33 | readonly $slots: StepRenderSlots 34 | } 35 | -------------------------------------------------------------------------------- /types/steps.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | import { StepStatus } from './step' 3 | 4 | export type StepsDirection = 'vertical' | 'horizontal' 5 | 6 | /** Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2. */ 7 | export declare class ElSteps extends ElementUIComponent { 8 | /** The spacing of each step, will be responsive if omitted. Support percentage. */ 9 | space: number | string 10 | 11 | /** Display direction */ 12 | direction: StepsDirection 13 | 14 | /** Current activation step */ 15 | active: number 16 | 17 | /** Status of current step */ 18 | processStatus: StepStatus 19 | 20 | /** Status of end step */ 21 | finishStatus: StepStatus 22 | 23 | /** Whether step description is centered */ 24 | alignCenter: boolean 25 | 26 | /** Whether to apply simple theme */ 27 | simple: boolean 28 | } 29 | -------------------------------------------------------------------------------- /types/submenu.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Submenu Component */ 4 | export declare class ElSubmenu extends ElementUIComponent { 5 | /** Unique identification */ 6 | index: string | null 7 | 8 | /** Delay time before showing a sub-menu */ 9 | showTimeout: number 10 | 11 | /** Delay time before hiding a sub-menu */ 12 | hideTimeout: number 13 | 14 | /** Custom class name for the popup menu */ 15 | popperClass: string 16 | 17 | /** Whether the sub-menu is disabled */ 18 | disabled: boolean 19 | 20 | /** Whether to append the popper menu to body */ 21 | popperAppendToBody: boolean 22 | } 23 | -------------------------------------------------------------------------------- /types/tab-pane.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Tab Pane Component */ 4 | export declare class ElTabPane extends ElementUIComponent { 5 | /** Title of the tab */ 6 | label: string 7 | 8 | /** Whether Tab is disabled */ 9 | disabled: boolean 10 | 11 | /** Identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane */ 12 | name: string 13 | 14 | /** Whether Tab is closable */ 15 | closable: boolean 16 | 17 | /** Whether Tab is lazily rendered */ 18 | lazy: boolean 19 | } 20 | -------------------------------------------------------------------------------- /types/tabs.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | export type TabType = 'card' | 'border-card' 4 | export type TabPosition = 'top' | 'right' | 'bottom' | 'left' 5 | 6 | /** Divide data collections which are related yet belong to different types */ 7 | export declare class ElTabs extends ElementUIComponent { 8 | /** Type of Tab */ 9 | type: TabType 10 | 11 | /** Whether Tab is closable */ 12 | closable: boolean 13 | 14 | /** Whether Tab is addable */ 15 | addable: boolean 16 | 17 | /** Whether Tab is addable and closable */ 18 | editable: boolean 19 | 20 | /** Name of the selected tab */ 21 | value: string 22 | 23 | /** Position of tabs */ 24 | tabPosition: TabPosition 25 | 26 | /** Whether width of tab automatically fits its container */ 27 | stretch: Boolean 28 | 29 | /** Hook function before switching tab. If false or a Promise is returned and then is rejected, switching will be prevented */ 30 | beforeLeave: (activeName: string, oldActiveName: string) => boolean | Promise 31 | } 32 | -------------------------------------------------------------------------------- /types/tag.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent, ElementUIComponentSize } from './component' 2 | 3 | export type TagType = 'primary' | 'gray' | 'success' | 'warning' | 'danger' 4 | export type TagTheme = 'dark' | 'light' | 'plain' 5 | 6 | /** Tag Component */ 7 | export declare class ElTag extends ElementUIComponent { 8 | /** Tag type */ 9 | type: TagType 10 | 11 | /** Whether Tab can be removed */ 12 | closable: boolean 13 | 14 | /** Whether the removal animation is disabled */ 15 | disableTransitions: boolean 16 | 17 | /** Whether Tag has a highlighted border */ 18 | hit: boolean 19 | 20 | /** Background color of the tag */ 21 | color: string 22 | 23 | /** Tag size */ 24 | size: ElementUIComponentSize 25 | 26 | /** Tag theme */ 27 | effect: TagTheme 28 | } 29 | -------------------------------------------------------------------------------- /types/timeline-item.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | export type TimelineItemPlacement = 'top' | 'bottom' 4 | export type TimelineItemType = 'primary' | 'success' | 'warning' | 'danger' | 'info' 5 | export type TimelineItemSize = 'normal' | 'large' 6 | 7 | /** TimelineItem Component */ 8 | export declare class ElTimelineItem extends ElementUIComponent { 9 | timestamp: string 10 | 11 | hideTimestamp: boolean 12 | 13 | placement: TimelineItemPlacement 14 | 15 | type: TimelineItemType 16 | 17 | size: TimelineItemSize 18 | 19 | icon: string 20 | } 21 | -------------------------------------------------------------------------------- /types/timeline.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Timeline Component */ 4 | export declare class ElTimeline extends ElementUIComponent { 5 | reverse: boolean 6 | } 7 | --------------------------------------------------------------------------------