├── .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 └── workflows │ ├── preview-build.yml │ └── preview-deploy.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 │ ├── descriptions.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 │ ├── skeleton.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 │ │ ├── descriptions.md │ │ ├── dialog.md │ │ ├── divider.md │ │ ├── drawer.md │ │ ├── dropdown.md │ │ ├── empty.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 │ │ ├── result.md │ │ ├── select.md │ │ ├── skeleton.md │ │ ├── slider.md │ │ ├── statistic.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 │ │ ├── descriptions.md │ │ ├── dialog.md │ │ ├── divider.md │ │ ├── drawer.md │ │ ├── dropdown.md │ │ ├── empty.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 │ │ ├── result.md │ │ ├── select.md │ │ ├── skeleton.md │ │ ├── slider.md │ │ ├── statistic.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 │ │ ├── descriptions.md │ │ ├── dialog.md │ │ ├── divider.md │ │ ├── drawer.md │ │ ├── dropdown.md │ │ ├── empty.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 │ │ ├── result.md │ │ ├── select.md │ │ ├── skeleton.md │ │ ├── slider.md │ │ ├── statistic.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 │ │ ├── descriptions.md │ │ ├── dialog.md │ │ ├── divider.md │ │ ├── drawer.md │ │ ├── dropdown.md │ │ ├── empty.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 │ │ ├── result.md │ │ ├── select.md │ │ ├── skeleton.md │ │ ├── slider.md │ │ ├── statistic.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 ├── 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 ├── descriptions-item │ └── index.js ├── descriptions │ ├── index.js │ └── src │ │ ├── descriptions-item.js │ │ ├── descriptions-row.js │ │ └── index.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 ├── empty │ ├── index.js │ └── src │ │ ├── img-empty.vue │ │ └── index.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 ├── result │ ├── index.js │ └── src │ │ ├── icon-error.vue │ │ ├── icon-info.vue │ │ ├── icon-success.vue │ │ ├── icon-warning.vue │ │ └── index.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 ├── skeleton-item │ └── index.js ├── skeleton │ ├── index.js │ └── src │ │ ├── img-placeholder.vue │ │ ├── index.vue │ │ └── item.vue ├── slider │ ├── index.js │ └── src │ │ ├── button.vue │ │ ├── main.vue │ │ └── marker.js ├── spinner │ ├── index.js │ └── src │ │ └── spinner.vue ├── statistic │ ├── index.js │ └── src │ │ └── main.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-row.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 │ │ ├── descriptions-item.scss │ │ ├── descriptions.scss │ │ ├── dialog.scss │ │ ├── display.scss │ │ ├── divider.scss │ │ ├── drawer.scss │ │ ├── dropdown-item.scss │ │ ├── dropdown-menu.scss │ │ ├── dropdown.scss │ │ ├── empty.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 │ │ ├── result.scss │ │ ├── row.scss │ │ ├── scrollbar.scss │ │ ├── select-dropdown.scss │ │ ├── select.scss │ │ ├── skeleton-item.scss │ │ ├── skeleton.scss │ │ ├── slider.scss │ │ ├── spinner.scss │ │ ├── statistic.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 │ │ ├── az.js │ │ ├── bg.js │ │ ├── bn.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 │ │ ├── is.js │ │ ├── it.js │ │ ├── ja.js │ │ ├── kg.js │ │ ├── km.js │ │ ├── ko.js │ │ ├── ku.js │ │ ├── kz.js │ │ ├── lo-LA.js │ │ ├── lt.js │ │ ├── lv.js │ │ ├── mn.js │ │ ├── ms.js │ │ ├── nb-NO.js │ │ ├── nl.js │ │ ├── pl.js │ │ ├── pt-br.js │ │ ├── pt.js │ │ ├── ro.js │ │ ├── ru-RU.js │ │ ├── si.js │ │ ├── sk.js │ │ ├── sl.js │ │ ├── sr-Latn.js │ │ ├── sr.js │ │ ├── sv-SE.js │ │ ├── sw.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 │ ├── lodash.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 │ ├── descriptions.spec.js │ ├── dialog.spec.js │ ├── divider.spec.js │ ├── drawer.spec.js │ ├── dropdown.spec.js │ ├── empty.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 │ ├── result.spec.js │ ├── row.spec.js │ ├── select.spec.js │ ├── skeleton.spec.js │ ├── slider.spec.js │ ├── statistic.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 ├── descriptions-item.d.ts ├── descriptions.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 ├── empty.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 ├── result.d.ts ├── row.d.ts ├── select.d.ts ├── skeleton-item.d.ts ├── skeleton.d.ts ├── slider.d.ts ├── spinner.d.ts ├── statistic.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 ├── web-types.json └── 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 | src/utils/lodash.js 4 | examples/play 5 | *.sh 6 | node_modules 7 | lib 8 | coverage 9 | *.md 10 | *.scss 11 | *.woff 12 | *.ttf 13 | -------------------------------------------------------------------------------- /.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 | .history/ -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /build/bin/i18n.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var fs = require('fs'); 4 | var path = require('path'); 5 | var langConfig = require('../../examples/i18n/page.json'); 6 | 7 | langConfig.forEach(lang => { 8 | try { 9 | fs.statSync(path.resolve(__dirname, `../../examples/pages/${ lang.lang }`)); 10 | } catch (e) { 11 | fs.mkdirSync(path.resolve(__dirname, `../../examples/pages/${ lang.lang }`)); 12 | } 13 | 14 | Object.keys(lang.pages).forEach(page => { 15 | var templatePath = path.resolve(__dirname, `../../examples/pages/template/${ page }.tpl`); 16 | var outputPath = path.resolve(__dirname, `../../examples/pages/${ lang.lang }/${ page }.vue`); 17 | var content = fs.readFileSync(templatePath, 'utf8'); 18 | var pairs = lang.pages[page]; 19 | 20 | Object.keys(pairs).forEach(key => { 21 | content = content.replace(new RegExp(`<%=\\s*${ key }\\s*>`, 'g'), pairs[key]); 22 | }); 23 | 24 | fs.writeFileSync(outputPath, content); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /build/bin/iconInit.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var postcss = require('postcss'); 4 | var fs = require('fs'); 5 | var path = require('path'); 6 | var fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/theme-chalk/src/icon.scss'), 'utf8'); 7 | var nodes = postcss.parse(fontFile).nodes; 8 | var classList = []; 9 | 10 | nodes.forEach((node) => { 11 | var selector = node.selector || ''; 12 | var reg = new RegExp(/\.el-icon-([^:]+):before/); 13 | var arr = selector.match(reg); 14 | 15 | if (arr && arr[1]) { 16 | classList.push(arr[1]); 17 | } 18 | }); 19 | 20 | classList.reverse(); // 希望按 css 文件顺序倒序排列 21 | 22 | fs.writeFile(path.resolve(__dirname, '../../examples/icon.json'), JSON.stringify(classList), () => {}); 23 | -------------------------------------------------------------------------------- /build/bin/template.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const templates = path.resolve(process.cwd(), './examples/pages/template'); 3 | 4 | const chokidar = require('chokidar'); 5 | let watcher = chokidar.watch([templates]); 6 | 7 | watcher.on('ready', function() { 8 | watcher 9 | .on('change', function() { 10 | exec('npm run i18n'); 11 | }); 12 | }); 13 | 14 | function exec(cmd) { 15 | return require('child_process').execSync(cmd).toString().trim(); 16 | } 17 | -------------------------------------------------------------------------------- /build/bin/version.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var path = require('path'); 3 | var version = process.env.VERSION || require('../../package.json').version; 4 | 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' }; 5 | if (!content[version]) content[version] = '2.15'; 6 | fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content)); 7 | -------------------------------------------------------------------------------- /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 | var path = require('path'); 2 | var config = require('./config'); 3 | 4 | module.exports = function(context, moduleName, entry) { 5 | return { 6 | entry: { 7 | index: path.resolve(context, entry || 'index.js') 8 | }, 9 | dist: path.resolve(context, 'lib'), 10 | template: false, 11 | format: 'umd', 12 | moduleName: moduleName, 13 | extends: ['vue2'], 14 | alias: config.alias, 15 | externals: { vue: config.vue } 16 | }; 17 | }; 18 | -------------------------------------------------------------------------------- /build/git-release.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | git checkout dev 3 | 4 | if test -n "$(git status --porcelain)"; then 5 | echo 'Unclean working tree. Commit or stash changes first.' >&2; 6 | exit 128; 7 | fi 8 | 9 | if ! git fetch --quiet 2>/dev/null; then 10 | echo 'There was a problem fetching your branch. Run `git fetch` to see more...' >&2; 11 | exit 128; 12 | fi 13 | 14 | if test "0" != "$(git rev-list --count --left-only @'{u}'...HEAD)"; then 15 | echo 'Remote history differ. Please pull changes.' >&2; 16 | exit 128; 17 | fi 18 | 19 | echo 'No conflicts.' >&2; 20 | -------------------------------------------------------------------------------- /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/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/button-d-cn.png -------------------------------------------------------------------------------- /examples/assets/images/button-d-en.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/button-d-en.png -------------------------------------------------------------------------------- /examples/assets/images/button-l-cn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/button-l-cn.png -------------------------------------------------------------------------------- /examples/assets/images/button-l-en.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/button-l-en.png -------------------------------------------------------------------------------- /examples/assets/images/cloud-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/cloud-1.png -------------------------------------------------------------------------------- /examples/assets/images/cloud-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/cloud-2.png -------------------------------------------------------------------------------- /examples/assets/images/compo-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/compo-1.png -------------------------------------------------------------------------------- /examples/assets/images/compo-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/compo-2.png -------------------------------------------------------------------------------- /examples/assets/images/compo-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/compo-3.png -------------------------------------------------------------------------------- /examples/assets/images/component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/component.png -------------------------------------------------------------------------------- /examples/assets/images/consistency.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/consistency.png -------------------------------------------------------------------------------- /examples/assets/images/controllability.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/controllability.png -------------------------------------------------------------------------------- /examples/assets/images/dialog-close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/dialog-close.png -------------------------------------------------------------------------------- /examples/assets/images/efficiency.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/efficiency.png -------------------------------------------------------------------------------- /examples/assets/images/element-demo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/element-demo.jpeg -------------------------------------------------------------------------------- /examples/assets/images/feedback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/feedback.png -------------------------------------------------------------------------------- /examples/assets/images/figure-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/figure-1.png -------------------------------------------------------------------------------- /examples/assets/images/figure-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/figure-2.png -------------------------------------------------------------------------------- /examples/assets/images/guide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/guide.png -------------------------------------------------------------------------------- /examples/assets/images/hamburger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/hamburger.png -------------------------------------------------------------------------------- /examples/assets/images/icon-check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/icon-check.png -------------------------------------------------------------------------------- /examples/assets/images/icon-copy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/icon-copy.png -------------------------------------------------------------------------------- /examples/assets/images/icon-download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/icon-download.png -------------------------------------------------------------------------------- /examples/assets/images/icon-edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/icon-edit.png -------------------------------------------------------------------------------- /examples/assets/images/intro-theme-b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/intro-theme-b.png -------------------------------------------------------------------------------- /examples/assets/images/navbar_0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/navbar_0.png -------------------------------------------------------------------------------- /examples/assets/images/navbar_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/navbar_1.png -------------------------------------------------------------------------------- /examples/assets/images/navbar_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/navbar_2.png -------------------------------------------------------------------------------- /examples/assets/images/navbar_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/navbar_3.png -------------------------------------------------------------------------------- /examples/assets/images/plant-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/plant-1.png -------------------------------------------------------------------------------- /examples/assets/images/plant-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/plant-2.png -------------------------------------------------------------------------------- /examples/assets/images/qrcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/qrcode.png -------------------------------------------------------------------------------- /examples/assets/images/resource.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/resource.png -------------------------------------------------------------------------------- /examples/assets/images/term-arial.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/term-arial.png -------------------------------------------------------------------------------- /examples/assets/images/term-helvetica.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/term-helvetica.png -------------------------------------------------------------------------------- /examples/assets/images/term-hiragino.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/term-hiragino.png -------------------------------------------------------------------------------- /examples/assets/images/term-microsoft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/term-microsoft.png -------------------------------------------------------------------------------- /examples/assets/images/term-pingfang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/term-pingfang.png -------------------------------------------------------------------------------- /examples/assets/images/term-sf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/term-sf.png -------------------------------------------------------------------------------- /examples/assets/images/theme-index-blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/theme-index-blue.png -------------------------------------------------------------------------------- /examples/assets/images/theme-index-red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/theme-index-red.png -------------------------------------------------------------------------------- /examples/assets/images/theme-intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/theme-intro.png -------------------------------------------------------------------------------- /examples/assets/images/typography.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/typography.png -------------------------------------------------------------------------------- /examples/assets/images/web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/images/web.png -------------------------------------------------------------------------------- /examples/assets/styles/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/styles/fonts/icomoon.eot -------------------------------------------------------------------------------- /examples/assets/styles/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/assets/styles/fonts/icomoon.ttf -------------------------------------------------------------------------------- /examples/assets/styles/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/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 | production: 'https://element-api.ele.me/element/theme/' 9 | }; 10 | 11 | const host = hostList[process.env.FAAS_ENV] || hostList.production; 12 | 13 | export const getVars = () => { 14 | return get(`${host}getVariable?version=${version}`); 15 | }; 16 | 17 | export const updateVars = (data, cb) => { 18 | return post(`${host}updateVariable?version=${version}`, data, cb); 19 | }; 20 | -------------------------------------------------------------------------------- /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/descriptions.scss: -------------------------------------------------------------------------------- 1 | .demo-block.demo-descriptions { 2 | .margin-top { 3 | margin-top: 20px; 4 | } 5 | 6 | .my-label { 7 | background: #E1F3D8; 8 | } 9 | 10 | .my-content { 11 | background: #FDE2E2; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /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/skeleton.scss: -------------------------------------------------------------------------------- 1 | .demo-block.demo-skeleton { 2 | .el-card { 3 | margin-bottom: 16px; 4 | } 5 | 6 | .card-header { 7 | display: flex; 8 | justify-content: space-between; 9 | align-items: center; 10 | } 11 | 12 | .time { 13 | font-size: 13px; 14 | color: #999; 15 | } 16 | 17 | .bottom { 18 | margin-top: 13px; 19 | line-height: 12px; 20 | } 21 | 22 | .button { 23 | padding: 0; 24 | min-height: auto; 25 | } 26 | 27 | .image { 28 | &.multi-content { 29 | width: 400px; 30 | height: 267px; 31 | } 32 | 33 | width: 100%; 34 | display: block; 35 | } 36 | 37 | .clearfix:before, 38 | .clearfix:after { 39 | display: table; 40 | content: ''; 41 | } 42 | 43 | .clearfix:after { 44 | clear: both; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /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/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/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/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/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/examples/extension/src/editor/icon-close.png -------------------------------------------------------------------------------- /examples/extension/src/editor/icon-entrance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/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/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/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/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/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.14":"2.15"} -------------------------------------------------------------------------------- /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/descriptions-item/index.js: -------------------------------------------------------------------------------- 1 | import DescriptionsItem from '../descriptions/src/descriptions-item'; 2 | 3 | /* istanbul ignore next */ 4 | DescriptionsItem.install = function install(Vue) { 5 | Vue.component(DescriptionsItem.name, DescriptionsItem); 6 | }; 7 | 8 | export default DescriptionsItem; 9 | -------------------------------------------------------------------------------- /packages/descriptions/index.js: -------------------------------------------------------------------------------- 1 | import Descriptions from './src/index'; 2 | 3 | /* istanbul ignore next */ 4 | Descriptions.install = function install(Vue) { 5 | Vue.component(Descriptions.name, Descriptions); 6 | }; 7 | 8 | export default Descriptions; 9 | -------------------------------------------------------------------------------- /packages/descriptions/src/descriptions-item.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'ElDescriptionsItem', 3 | props: { 4 | label: { 5 | type: String, 6 | default: '' 7 | }, 8 | span: { 9 | type: Number, 10 | default: 1 11 | }, 12 | contentClassName: { 13 | type: String, 14 | default: '' 15 | }, 16 | contentStyle: { 17 | type: Object 18 | }, 19 | labelClassName: { 20 | type: String, 21 | default: '' 22 | }, 23 | labelStyle: { 24 | type: Object 25 | } 26 | }, 27 | render() { 28 | return null; 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /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/empty/index.js: -------------------------------------------------------------------------------- 1 | import Empty from './src/index.vue'; 2 | 3 | Empty.install = (Vue) => { 4 | Vue.component(Empty.name, Empty); 5 | }; 6 | 7 | export default Empty; 8 | -------------------------------------------------------------------------------- /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/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/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/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/result/index.js: -------------------------------------------------------------------------------- 1 | import Result from './src/index.vue'; 2 | 3 | /* istanbul ignore next */ 4 | Result.install = function(Vue) { 5 | Vue.component(Result.name, Result); 6 | }; 7 | 8 | export default Result; 9 | -------------------------------------------------------------------------------- /packages/result/src/icon-error.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /packages/result/src/icon-info.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /packages/result/src/icon-success.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /packages/result/src/icon-warning.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /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: String 18 | }, 19 | 20 | computed: { 21 | style() { 22 | const ret = {}; 23 | 24 | if (this.gutter) { 25 | ret.marginLeft = `-${this.gutter / 2}px`; 26 | ret.marginRight = ret.marginLeft; 27 | } 28 | 29 | return ret; 30 | } 31 | }, 32 | 33 | render(h) { 34 | return h(this.tag, { 35 | class: [ 36 | 'el-row', 37 | this.justify !== 'start' ? `is-justify-${this.justify}` : '', 38 | this.align ? `is-align-${this.align}` : '', 39 | { 'el-row--flex': this.type === 'flex' } 40 | ], 41 | style: this.style 42 | }, this.$slots.default); 43 | } 44 | }; 45 | -------------------------------------------------------------------------------- /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/skeleton-item/index.js: -------------------------------------------------------------------------------- 1 | import SkeletonItem from '../skeleton/src/item'; 2 | 3 | /* istanbul ignore next */ 4 | SkeletonItem.install = function(Vue) { 5 | Vue.component(SkeletonItem.name, SkeletonItem); 6 | }; 7 | 8 | export default SkeletonItem; 9 | -------------------------------------------------------------------------------- /packages/skeleton/index.js: -------------------------------------------------------------------------------- 1 | import Skeleton from './src/index.vue'; 2 | 3 | /* istanbul ignore next */ 4 | Skeleton.install = function(Vue) { 5 | Vue.component(Skeleton.name, Skeleton); 6 | }; 7 | 8 | export default Skeleton; 9 | -------------------------------------------------------------------------------- /packages/skeleton/src/img-placeholder.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | -------------------------------------------------------------------------------- /packages/skeleton/src/item.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /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/statistic/index.js: -------------------------------------------------------------------------------- 1 | import Statistic from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Statistic.install = function(Vue) { 5 | Vue.component(Statistic.name, Statistic); 6 | }; 7 | 8 | export default Statistic; 9 | -------------------------------------------------------------------------------- /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 | const { series, src, dest } = require('gulp'); 4 | const sass = require('gulp-sass'); 5 | const autoprefixer = require('gulp-autoprefixer'); 6 | const cssmin = require('gulp-cssmin'); 7 | 8 | function compile() { 9 | return src('./src/*.scss') 10 | .pipe(sass.sync()) 11 | .pipe(autoprefixer({ 12 | browsers: ['ie > 9', 'last 2 versions'], 13 | cascade: false 14 | })) 15 | .pipe(cssmin()) 16 | .pipe(dest('./lib')); 17 | } 18 | 19 | function copyfont() { 20 | return src('./src/fonts/**') 21 | .pipe(cssmin()) 22 | .pipe(dest('./lib/fonts')); 23 | } 24 | 25 | exports.build = series(compile, copyfont); 26 | -------------------------------------------------------------------------------- /packages/theme-chalk/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "element-theme-chalk", 3 | "version": "2.15.14", 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/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/packages/theme-chalk/src/breadcrumb-item.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/button-group.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/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/checkbox-button.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/packages/theme-chalk/src/checkbox-button.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/checkbox-group.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/packages/theme-chalk/src/checkbox-group.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/collapse-item.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/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/descriptions-item.scss: -------------------------------------------------------------------------------- 1 | @import 'mixins/mixins'; 2 | @import 'common/var'; 3 | 4 | @include b(descriptions-item) { 5 | vertical-align: top; 6 | 7 | @include e(container) { 8 | display: flex; 9 | 10 | .el-descriptions-item__label, 11 | .el-descriptions-item__content { 12 | display: inline-flex; 13 | align-items: baseline; 14 | } 15 | .el-descriptions-item__content { 16 | flex: 1; 17 | } 18 | } 19 | 20 | @include e(label) { 21 | &.has-colon { 22 | &::after { 23 | content: ':'; 24 | position: relative; 25 | top: -0.5px; 26 | } 27 | } 28 | &.is-bordered-label { 29 | font-weight: bold; 30 | color: $--color-text-secondary; 31 | background: $--descriptions-item-bordered-label-background; 32 | } 33 | &:not(.is-bordered-label) { 34 | margin-right: 10px; 35 | } 36 | } 37 | 38 | @include e(content) { 39 | word-break: break-word; 40 | overflow-wrap: break-word; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /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/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/packages/theme-chalk/src/dropdown-item.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/dropdown-menu.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/packages/theme-chalk/src/dropdown-menu.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/empty.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(empty) { 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | flex-direction: column; 9 | text-align: center; 10 | box-sizing: border-box; 11 | padding: $--empty-padding; 12 | 13 | @include e(image) { 14 | width: $--empty-image-width; 15 | 16 | img { 17 | user-select: none; 18 | width: 100%; 19 | height: 100%; 20 | vertical-align: top; 21 | object-fit: contain; 22 | } 23 | 24 | svg { 25 | fill: $--svg-monochrome-grey; 26 | width: 100%; 27 | height: 100%; 28 | vertical-align: top; 29 | } 30 | } 31 | 32 | @include e(description) { 33 | margin-top: $--empty-description-margin-top; 34 | 35 | p { 36 | margin: 0; 37 | font-size: $--font-size-base; 38 | color: $--color-text-secondary; 39 | } 40 | } 41 | 42 | @include e(bottom) { 43 | margin-top: $--empty-bottom-margin-top; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/fonts/element-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/packages/theme-chalk/src/fonts/element-icons.ttf -------------------------------------------------------------------------------- /packages/theme-chalk/src/fonts/element-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/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/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/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/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/packages/theme-chalk/src/infinite-scroll.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/infiniteScroll.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/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/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/packages/theme-chalk/src/menu-item-group.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/menu-item.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/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-top) { 31 | align-items: flex-start; 32 | } 33 | 34 | @include when(align-middle) { 35 | align-items: center; 36 | } 37 | @include when(align-bottom) { 38 | align-items: flex-end; 39 | } 40 | } 41 | 42 | } 43 | 44 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/skeleton.scss: -------------------------------------------------------------------------------- 1 | @import 'mixins/mixins'; 2 | @import 'common/var'; 3 | @import "./skeleton-item.scss"; 4 | 5 | @mixin skeleton-color() { 6 | background: linear-gradient( 7 | 90deg, 8 | $--skeleton-color 25%, 9 | $--skeleton-to-color 37%, 10 | $--skeleton-color 63% 11 | ); 12 | background-size: 400% 100%; 13 | animation: #{$namespace}-skeleton-loading 1.4s ease infinite; 14 | } 15 | 16 | @keyframes #{$namespace}-skeleton-loading { 17 | 0% { 18 | background-position: 100% 50%; 19 | } 20 | 100% { 21 | background-position: 0 50%; 22 | } 23 | } 24 | 25 | @include b(skeleton) { 26 | width: 100%; 27 | @each $unit in (first-line, paragraph) { 28 | @include e($unit) { 29 | height: 16px; 30 | margin-top: 16px; 31 | background: $--skeleton-color; 32 | } 33 | } 34 | 35 | @include when(animated) { 36 | .#{$namespace}-skeleton__item { 37 | @include skeleton-color(); 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /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/statistic.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(statistic) { 5 | $statistic-justify: center; 6 | $statistic-align: center; 7 | width: 100%; 8 | box-sizing: border-box; 9 | margin: 0; 10 | padding: 0; 11 | color: $--color-black; 12 | font-variant: tabular-nums; 13 | list-style: none; 14 | font-feature-settings: "tnum"; 15 | text-align: center; 16 | .head { 17 | margin-bottom: 4px; 18 | color: $--color-text-regular; 19 | font-size: $--font-size-small; 20 | } 21 | 22 | .con { 23 | font-family: Sans-serif; 24 | display: flex; 25 | justify-content: $statistic-justify; 26 | align-items: $statistic-align; 27 | color: $--color-text-primary; 28 | .number { 29 | font-size: $--font-size-extra-large; 30 | padding: 0 4px; 31 | } 32 | span { 33 | display: inline-block; 34 | margin: 0; 35 | line-height: 100%; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /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/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/packages/theme-chalk/src/submenu.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/tab-pane.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/element/c345bb453bf11badb4831a6a3f600c9372b3a336/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 | import { isMac } from 'element-ui/src/utils/util'; 3 | 4 | export default { 5 | bind(el, binding, vnode) { 6 | let interval = null; 7 | let startTime; 8 | const maxIntervals = isMac() ? 100 : 200; 9 | const handler = () => vnode.context[binding.expression].apply(); 10 | const clear = () => { 11 | if (Date.now() - startTime < maxIntervals) { 12 | handler(); 13 | } 14 | clearInterval(interval); 15 | interval = null; 16 | }; 17 | 18 | on(el, 'mousedown', (e) => { 19 | if (e.button !== 0) return; 20 | startTime = Date.now(); 21 | once(document, 'mouseup', clear); 22 | clearInterval(interval); 23 | interval = setInterval(handler, maxIntervals); 24 | }); 25 | } 26 | }; 27 | -------------------------------------------------------------------------------- /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/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/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/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 | -------------------------------------------------------------------------------- /test/unit/specs/statistic.spec.js: -------------------------------------------------------------------------------- 1 | import { createTest, destroyVM } from '../util'; 2 | import Statistic from 'packages/statistic'; 3 | 4 | describe('Statistic', () => { 5 | let vm; 6 | afterEach(() => { 7 | destroyVM(vm); 8 | }); 9 | 10 | it('create', () => { 11 | vm = createTest(Statistic, true); 12 | expect(vm.$el).to.exist; 13 | }); 14 | }); 15 | 16 | -------------------------------------------------------------------------------- /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/descriptions-item.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | import { VNode } from 'vue' 3 | 4 | interface ElDescriptionsItemSlots { 5 | /* label slot: custom label */ 6 | label: VNode[] 7 | 8 | /* default slot: custom content */ 9 | default: VNode[] 10 | 11 | [key: string]: VNode[] 12 | } 13 | 14 | /** description item. **/ 15 | export declare class ElDescriptionsItem extends ElementUIComponent { 16 | 17 | /* label text */ 18 | label: string 19 | 20 | /* the number of columns included */ 21 | span: number 22 | 23 | /* custom label class name */ 24 | labelClassName: string 25 | 26 | /* custom content class name */ 27 | contentClassName: string 28 | 29 | /* custom label style */ 30 | labelStyle: object 31 | 32 | /* custom content style */ 33 | contentStyle: object 34 | 35 | $slots: ElDescriptionsItemSlots 36 | 37 | } 38 | -------------------------------------------------------------------------------- /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/empty.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | import { VNode } from 'vue' 3 | 4 | interface ELEmptySlots { 5 | /* default slot: Custom bottom content */ 6 | default: VNode[] 7 | 8 | /* image slot: Custom image */ 9 | image: VNode[] 10 | 11 | /* description slot: Custom description */ 12 | description: VNode[] 13 | 14 | 15 | [key: string]: VNode[] 16 | } 17 | 18 | /** Placeholder hints for empty states. */ 19 | export declare class ElEmpty extends ElementUIComponent { 20 | /* image URL */ 21 | image: string 22 | 23 | /* image size (width) */ 24 | imageSize: number 25 | 26 | /* description */ 27 | description: string 28 | 29 | $slots: ELEmptySlots 30 | 31 | } 32 | -------------------------------------------------------------------------------- /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/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/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/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/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/result.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | import { VNode } from 'vue' 3 | 4 | interface ElResultSlots { 5 | /* title slot: custom title */ 6 | title: VNode[] 7 | 8 | /* icon slot: custom icon */ 9 | icon: VNode[] 10 | 11 | /* subTitle slot: custom sub title */ 12 | subTitle: VNode[] 13 | 14 | /* extra slot: custom extra area, display on the top right */ 15 | extra: VNode[] 16 | 17 | [key: string]: VNode[] 18 | } 19 | 20 | /** Used to give feedback on the result of user's operation or access exception. **/ 21 | export declare class ElResult extends ElementUIComponent { 22 | 23 | /* title */ 24 | title: string 25 | 26 | /* sub title */ 27 | subTitle: string 28 | 29 | /* icon type */ 30 | icon: 'success' | 'warning' | 'info' | 'error' 31 | 32 | $slots: ElResultSlots 33 | } 34 | -------------------------------------------------------------------------------- /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/skeleton-item.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Skeleton Item Component */ 4 | export declare class ElSkeletonItem extends ElementUIComponent { 5 | /** The current rendering skeleton type; default: text */ 6 | variant: 'p' | 'text' | 'h1' | 'h3' | 'text' | 'caption' | 'button' | 'image' | 'circle' | 'rect' 7 | } 8 | -------------------------------------------------------------------------------- /types/skeleton.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | import { VNode } from 'vue' 3 | 4 | interface ElSkeletonSlots { 5 | /* default slot: Real rendering DOM */ 6 | default: VNode[] 7 | 8 | /* template slot: Custom rendering skeleton template */ 9 | template: VNode[] 10 | 11 | [key: string]: VNode[] 12 | } 13 | 14 | /** When loading data, and you need a rich experience for visual and interactions for your end users */ 15 | export declare class ElSkeleton extends ElementUIComponent { 16 | /** whether showing the animation; default: false */ 17 | animated: boolean 18 | 19 | /** how many fake items to render to the DOM; default: 1 */ 20 | count: number 21 | 22 | /** whether showing the skeleton; default true */ 23 | loading: boolean 24 | 25 | /** numbers of the row, only useful when no template slot were given; default: 4 */ 26 | rows: boolean 27 | 28 | /** Rendering delay in millseconds; default: 0 */ 29 | throttle: number 30 | 31 | $slots: ElSkeletonSlots 32 | 33 | } 34 | -------------------------------------------------------------------------------- /types/spinner.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Spinner Component */ 4 | export declare class ElSpinner extends ElementUIComponent { 5 | /** The type of spinner */ 6 | type: string 7 | 8 | /** The radius of spinner */ 9 | radius: number 10 | 11 | /** The width of spinner */ 12 | strokeWidth: number 13 | 14 | /** The color of spinner */ 15 | strokeColor: string 16 | } 17 | -------------------------------------------------------------------------------- /types/statistic.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementUIComponent } from './component' 2 | 3 | /** Statistic Component */ 4 | export declare class ElStatistic extends ElementUIComponent { 5 | /** Set the decimal point */ 6 | decimalSeparator: string 7 | 8 | /** Sets the thousandth identifier */ 9 | groupSeparator: string 10 | 11 | /** numerical precision */ 12 | precision: number 13 | 14 | /** Numerical content */ 15 | value: string | number 16 | 17 | /** Title of numerical value */ 18 | title: string | number 19 | 20 | /** Whether to enable the countdown function */ 21 | timeIndices: boolean 22 | 23 | /** Sets the style of the value */ 24 | valueStyle: object 25 | 26 | /** Numeric content formatting countdown display */ 27 | format: string 28 | 29 | /** Set the ratio */ 30 | rate: number 31 | 32 | /** Set the suffix of the value */ 33 | suffix: string 34 | 35 | /** Set the prefix of the value */ 36 | prefix: string 37 | } 38 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------