├── src ├── theme-chalk │ ├── src │ │ ├── submenu.scss │ │ ├── tab-pane.scss │ │ ├── button-group.scss │ │ ├── collapse-item.scss │ │ ├── dropdown-item.scss │ │ ├── dropdown-menu.scss │ │ ├── form-item.scss │ │ ├── menu-item.scss │ │ ├── breadcrumb-item.scss │ │ ├── checkbox-button.scss │ │ ├── checkbox-group.scss │ │ ├── infinite-scroll.scss │ │ ├── infiniteScroll.scss │ │ ├── menu-item-group.scss │ │ ├── base.scss │ │ ├── fonts │ │ │ ├── element-icons.ttf │ │ │ └── element-icons.woff │ │ ├── mixins │ │ │ ├── config.scss │ │ │ ├── utils.scss │ │ │ ├── function.scss │ │ │ └── _button.scss │ │ ├── aside.scss │ │ ├── footer.scss │ │ ├── header.scss │ │ ├── radio-group.scss │ │ ├── container.scss │ │ ├── timeline.scss │ │ ├── time-picker.scss │ │ ├── display.scss │ │ ├── main.scss │ │ ├── steps.scss │ │ ├── date-picker.scss │ │ ├── backtop.scss │ │ ├── date-picker │ │ │ ├── time-range-picker.scss │ │ │ ├── year-table.scss │ │ │ ├── month-table.scss │ │ │ ├── time-picker.scss │ │ │ ├── date-picker.scss │ │ │ ├── date-range-picker.scss │ │ │ ├── time-spinner.scss │ │ │ └── picker-panel.scss │ │ ├── common │ │ │ ├── popup.scss │ │ │ └── transition.scss │ │ ├── card.scss │ │ ├── time-select.scss │ │ ├── spinner.scss │ │ ├── row.scss │ │ ├── page-header.scss │ │ ├── option-group.scss │ │ ├── option.scss │ │ ├── popover.scss │ │ ├── rate.scss │ │ ├── divider.scss │ │ ├── carousel-item.scss │ │ ├── breadcrumb.scss │ │ ├── avatar.scss │ │ ├── reset.scss │ │ ├── badge.scss │ │ ├── scrollbar.scss │ │ ├── select-dropdown.scss │ │ ├── calendar.scss │ │ ├── autocomplete.scss │ │ ├── collapse.scss │ │ ├── link.scss │ │ ├── timeline-item.scss │ │ ├── loading.scss │ │ ├── table-column.scss │ │ ├── index.scss │ │ ├── notification.scss │ │ ├── cascader-panel.scss │ │ ├── popper.scss │ │ ├── dialog.scss │ │ ├── switch.scss │ │ ├── message.scss │ │ ├── tree.scss │ │ └── progress.scss │ ├── .gitignore │ ├── README.md │ ├── gulpfile.js │ └── package.json ├── mixins │ ├── focus.js │ ├── locale.js │ ├── emitter.js │ └── migrating.js ├── utils │ ├── vdom.js │ ├── shared.js │ ├── merge.js │ ├── menu │ │ ├── aria-menubar.js │ │ ├── aria-menuitem.js │ │ └── aria-submenu.js │ ├── types.js │ ├── scrollbar-width.js │ ├── scroll-into-view.js │ ├── after-leave.js │ ├── resize-event.js │ ├── clickoutside.js │ └── aria-dialog.js ├── directives │ ├── mousewheel.js │ └── repeat-click.js └── locale │ ├── format.js │ ├── index.js │ └── lang │ ├── zh-CN.js │ ├── ja.js │ ├── ko.js │ ├── zh-TW.js │ ├── hu.js │ ├── da.js │ ├── ar.js │ ├── en.js │ ├── tr-TR.js │ ├── km.js │ ├── sv-SE.js │ └── pt-br.js ├── .gitignore ├── example ├── logo.png ├── store │ └── index.js ├── assets │ └── css │ │ └── common.scss ├── views │ ├── Checked.vue │ ├── Select.vue │ ├── test.vue │ ├── Link.vue │ ├── Form.vue │ ├── InputNumber.vue │ ├── Layout.vue │ ├── Container.vue │ └── Button.vue ├── main.js ├── App.vue └── router │ └── index.js ├── public ├── favicon.ico └── index.html ├── index.html ├── .editorconfig ├── packages ├── link │ ├── index.js │ └── src │ │ └── main.vue ├── main │ ├── index.js │ └── src │ │ └── main.vue ├── test │ ├── index.js │ └── src │ │ ├── test.vue │ │ └── test2.vue ├── Popper │ ├── index.js │ └── src │ │ └── main.vue ├── tag │ ├── index.js │ └── src │ │ └── tag.vue ├── aside │ ├── index.js │ └── src │ │ └── main.vue ├── form │ └── index.js ├── radio │ └── index.js ├── row │ ├── index.js │ └── src │ │ └── row.js ├── footer │ ├── index.js │ └── src │ │ └── main.vue ├── header │ ├── index.js │ └── src │ │ └── main.vue ├── select │ ├── index.js │ └── src │ │ ├── option-group.vue │ │ ├── navigation-mixin.js │ │ └── select-dropdown.vue ├── col │ └── index.js ├── input │ ├── index.js │ └── src │ │ └── calcTextareaHeight.js ├── button │ ├── index.js │ └── src │ │ ├── button-group.vue │ │ └── button.vue ├── container │ ├── index.js │ └── src │ │ └── main.vue ├── scrollbar │ ├── index.js │ └── src │ │ └── util.js ├── option │ └── index.js ├── checkbox │ ├── index.js │ └── src │ │ └── checkbox-group.vue ├── form-item │ └── index.js ├── radio-group │ └── index.js ├── input-number │ └── index.js ├── radio-button │ └── index.js └── option-group │ └── index.js ├── history.md ├── README.md ├── .babelrc ├── test ├── specs │ ├── test.spec.js │ └── tag.spec.js ├── index.js └── jest.config.js ├── .eslintrc.js ├── _webpack.config.js └── package.json /src/theme-chalk/src/submenu.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/theme-chalk/src/tab-pane.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/theme-chalk/src/button-group.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/theme-chalk/src/collapse-item.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/theme-chalk/src/dropdown-item.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/theme-chalk/src/dropdown-menu.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/theme-chalk/src/form-item.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/theme-chalk/src/menu-item.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/theme-chalk/src/breadcrumb-item.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/theme-chalk/src/checkbox-button.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/theme-chalk/src/checkbox-group.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/theme-chalk/src/infinite-scroll.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/theme-chalk/src/infiniteScroll.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/theme-chalk/src/menu-item-group.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | .DS_Store 3 | node_modules 4 | -------------------------------------------------------------------------------- /src/theme-chalk/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib 3 | npm-debug* 4 | -------------------------------------------------------------------------------- /example/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hades-li/element-next/HEAD/example/logo.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hades-li/element-next/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/theme-chalk/src/base.scss: -------------------------------------------------------------------------------- 1 | @import "common/transition.scss"; 2 | @import "icon.scss"; 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | -------------------------------------------------------------------------------- /src/theme-chalk/src/fonts/element-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hades-li/element-next/HEAD/src/theme-chalk/src/fonts/element-icons.ttf -------------------------------------------------------------------------------- /src/theme-chalk/src/fonts/element-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hades-li/element-next/HEAD/src/theme-chalk/src/fonts/element-icons.woff -------------------------------------------------------------------------------- /src/theme-chalk/src/mixins/config.scss: -------------------------------------------------------------------------------- 1 | $namespace: 'el'; 2 | $element-separator: '__'; 3 | $modifier-separator: '--'; 4 | $state-prefix: 'is-'; 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /packages/link/index.js: -------------------------------------------------------------------------------- 1 | import Link from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Link.install = function(app) { 5 | app.component(Link.name, Link); 6 | }; 7 | 8 | export default Link; 9 | -------------------------------------------------------------------------------- /packages/main/index.js: -------------------------------------------------------------------------------- 1 | import Main from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Main.install = function(app) { 5 | app.component(Main.name, Main); 6 | }; 7 | 8 | export default Main; 9 | -------------------------------------------------------------------------------- /packages/test/index.js: -------------------------------------------------------------------------------- 1 | import Test from './src/test'; 2 | 3 | /* istanbul ignore next */ 4 | Test.install = function(app) { 5 | app.component(Test.name, Test); 6 | }; 7 | 8 | export default Test; 9 | -------------------------------------------------------------------------------- /packages/Popper/index.js: -------------------------------------------------------------------------------- 1 | import Main from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Main.install = function(app) { 5 | app.component(Main.name, Main); 6 | }; 7 | 8 | export default Main; 9 | -------------------------------------------------------------------------------- /packages/tag/index.js: -------------------------------------------------------------------------------- 1 | import ElTag from './src/tag'; 2 | 3 | /* istanbul ignore next */ 4 | ElTag.install = function(app) { 5 | app.component(ElTag.name, ElTag); 6 | }; 7 | 8 | export default ElTag; 9 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /src/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/aside/index.js: -------------------------------------------------------------------------------- 1 | import Aside from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Aside.install = function(app) { 5 | app.component(Aside.name, Aside); 6 | }; 7 | 8 | export default Aside; 9 | -------------------------------------------------------------------------------- /packages/form/index.js: -------------------------------------------------------------------------------- 1 | import ElForm from './src/form'; 2 | 3 | /* istanbul ignore next */ 4 | ElForm.install = function(app) { 5 | app.component(ElForm.name, ElForm); 6 | }; 7 | 8 | export default ElForm; 9 | -------------------------------------------------------------------------------- /packages/radio/index.js: -------------------------------------------------------------------------------- 1 | import Radio from './src/radio'; 2 | 3 | /* istanbul ignore next */ 4 | Radio.install = function(app) { 5 | app.component(Radio.name, Radio); 6 | }; 7 | 8 | export default Radio; 9 | -------------------------------------------------------------------------------- /packages/row/index.js: -------------------------------------------------------------------------------- 1 | import Row from './src/row'; 2 | 3 | /* istanbul ignore next */ 4 | Row.install = function(app) { 5 | app.component(Row.name, Row); 6 | }; 7 | 8 | export default Row; 9 | 10 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /example/store/index.js: -------------------------------------------------------------------------------- 1 | import Vuex from 'vuex' 2 | 3 | export default Vuex.createStore({ 4 | state: { 5 | }, 6 | mutations: { 7 | }, 8 | actions: { 9 | }, 10 | modules: { 11 | } 12 | }) 13 | -------------------------------------------------------------------------------- /packages/footer/index.js: -------------------------------------------------------------------------------- 1 | import Footer from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Footer.install = function(app) { 5 | app.component(Footer.name, Footer); 6 | }; 7 | 8 | export default Footer; 9 | -------------------------------------------------------------------------------- /packages/header/index.js: -------------------------------------------------------------------------------- 1 | import Header from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Header.install = function(app) { 5 | app.component(Header.name, Header); 6 | }; 7 | 8 | export default Header; 9 | -------------------------------------------------------------------------------- /packages/select/index.js: -------------------------------------------------------------------------------- 1 | import Select from './src/select'; 2 | 3 | /* istanbul ignore next */ 4 | Select.install = function(app) { 5 | app.component(Select.name, Select); 6 | }; 7 | 8 | export default Select; 9 | -------------------------------------------------------------------------------- /packages/test/src/test.vue: -------------------------------------------------------------------------------- 1 | 7 | 14 | -------------------------------------------------------------------------------- /packages/col/index.js: -------------------------------------------------------------------------------- 1 | import ElCol from './src/col'; 2 | 3 | /* istanbul ignore next */ 4 | ElCol.install = function(app) { 5 | app.component(ElCol.name, ElCol); 6 | }; 7 | 8 | export default ElCol; 9 | 10 | -------------------------------------------------------------------------------- /packages/input/index.js: -------------------------------------------------------------------------------- 1 | import ElInput from './src/input'; 2 | 3 | /* istanbul ignore next */ 4 | ElInput.install = function(app) { 5 | app.component(ElInput.name, ElInput); 6 | }; 7 | 8 | export default ElInput; 9 | -------------------------------------------------------------------------------- /packages/button/index.js: -------------------------------------------------------------------------------- 1 | import ElButton from './src/button'; 2 | 3 | /* istanbul ignore next */ 4 | ElButton.install = function(app) { 5 | app.component(ElButton.name, ElButton); 6 | }; 7 | 8 | export default ElButton; 9 | -------------------------------------------------------------------------------- /example/assets/css/common.scss: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | #app{ 4 | height: 100%; 5 | } 6 | .components-page { 7 | height: calc(100% - 24px); 8 | > .el-scrollbar__wrap { 9 | overflow-x: auto; 10 | } 11 | } 12 | 13 | -------------------------------------------------------------------------------- /packages/button/src/button-group.vue: -------------------------------------------------------------------------------- 1 | 6 | 11 | -------------------------------------------------------------------------------- /packages/container/index.js: -------------------------------------------------------------------------------- 1 | import Container from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Container.install = function(app) { 5 | app.component(Container.name, Container); 6 | }; 7 | 8 | export default Container; 9 | -------------------------------------------------------------------------------- /packages/scrollbar/index.js: -------------------------------------------------------------------------------- 1 | import Scrollbar from './src/main'; 2 | 3 | /* istanbul ignore next */ 4 | Scrollbar.install = function(app) { 5 | app.component(Scrollbar.name, Scrollbar); 6 | }; 7 | 8 | export default Scrollbar; 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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /example/views/Checked.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/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/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/main/src/main.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 13 | -------------------------------------------------------------------------------- /packages/radio-group/index.js: -------------------------------------------------------------------------------- 1 | import RadioGroup from '../radio/src/radio-group.vue'; 2 | 3 | /* istanbul ignore next */ 4 | RadioGroup.install = function(app) { 5 | app.component(RadioGroup.name, RadioGroup); 6 | }; 7 | 8 | export default RadioGroup; 9 | -------------------------------------------------------------------------------- /history.md: -------------------------------------------------------------------------------- 1 | # update history 2 | ### dev env 3 | add eslint 4 | 5 | ### components 6 | - Button: 100% 7 | - Row: 100% 8 | - Col: 100% 9 | - Radio: 100% 10 | - Radio-group: 100% 11 | - Input: 100% 12 | - Tag: 100% 13 | - Form: 50% 14 | - Form-item: 50% 15 | -------------------------------------------------------------------------------- /packages/input-number/index.js: -------------------------------------------------------------------------------- 1 | import ElInputNumber from './src/input-number'; 2 | 3 | /* istanbul ignore next */ 4 | ElInputNumber.install = function(app) { 5 | app.component(ElInputNumber.name, ElInputNumber); 6 | }; 7 | 8 | export default ElInputNumber; 9 | -------------------------------------------------------------------------------- /packages/radio-button/index.js: -------------------------------------------------------------------------------- 1 | import RadioButton from '../radio/src/radio-button.vue'; 2 | 3 | /* istanbul ignore next */ 4 | RadioButton.install = function(app) { 5 | app.component(RadioButton.name, RadioButton); 6 | }; 7 | 8 | export default RadioButton; 9 | -------------------------------------------------------------------------------- /example/views/Select.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 15 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # element-ui-next (alpha.1) 2 | 3 | > element-ui for Vue 3.0 4 | 5 | ## 介绍 6 | element-ui基于vue3.0的重构。 7 | 此项目并不是仅解决element-ui在vue3.0的兼容性问题。而是采用vue3.0的新特性composition api对所有组件进行重写。 8 | 9 | 因此，不会兼容vue2.x 10 | 11 | ## developer 12 | yarn run dev 13 | 14 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["@babel/preset-env", 4 | { 5 | "targets": { 6 | "node": "current" 7 | } 8 | } 9 | ] 10 | ], 11 | "plugins": [ 12 | [ 13 | "@ant-design-vue/babel-plugin-jsx" 14 | ] 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/Popper/src/main.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 21 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /test/specs/test.spec.js: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import Test from 'packages/test/src/test.vue' 3 | 4 | describe('Test', () => { 5 | it('create', () => { 6 | const wrapper = mount(Test, { 7 | slots: { 8 | default: 'hello' 9 | } 10 | }) 11 | // console.log(wrapper.html()) 12 | expect(wrapper.html()).toContain('div') 13 | }) 14 | }) 15 | -------------------------------------------------------------------------------- /packages/aside/src/main.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 24 | -------------------------------------------------------------------------------- /packages/footer/src/main.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 24 | -------------------------------------------------------------------------------- /packages/header/src/main.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 24 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true, 6 | es6: true 7 | }, 8 | parserOptions: { 9 | parser: "babel-eslint", 10 | sourceType: 'module' 11 | }, 12 | extends: [ 13 | // add more generic rulesets here, such as: 14 | // 'eslint:recommended', 15 | 'plugin:vue/vue3-recommended' 16 | ], 17 | rules: { 18 | // override/add rules settings here, such as: 19 | 'no-unused-vars': 'warn' 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /example/main.js: -------------------------------------------------------------------------------- 1 | import {createApp} from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import store from './store' 5 | import element from 'src/index' 6 | import './assets/css/normalize.css' 7 | import 'src/theme-chalk/src/index.scss' 8 | import './assets/css/common.scss' 9 | 10 | const app = createApp(App) 11 | 12 | app.use(router) 13 | .use(store) 14 | .use(element) 15 | .mount('#app') 16 | 17 | app.config.devtools = process.env.NODE_ENV === 'development' 18 | 19 | -------------------------------------------------------------------------------- /src/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"; -------------------------------------------------------------------------------- /test/specs/tag.spec.js: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import Tag from 'packages/tag' 3 | 4 | describe('Tag', () => { 5 | it('create', () => { 6 | const wrapper = mount(Tag, { 7 | slots: { 8 | default: () => 'tag' 9 | } 10 | }) 11 | const el = wrapper.find('.el-tag') 12 | expect(el.classes()).toContain('el-tag') 13 | expect(el.classes()).not.toContain('el-tag__close') 14 | expect(el.classes()).not.toContain('is-hit') 15 | expect(el.classes()).not.toContain('md-fade-center') 16 | }) 17 | }) 18 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= htmlWebpackPlugin.options.title %> 8 | 9 | 10 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | // import { describe, it } from 'mocha' 2 | import { mount } from '@vue/test-utils/dist/vue-test-utils.cjs' 3 | // import { expect } from 'chai' 4 | import Button from 'packages/button' 5 | // const { describe, it} = require('mocha') 6 | // const { mount } = require('@vue/test-utils/dist/vue-test-utils.esm-bundler') 7 | // const expect = require('chai').expect 8 | // const Button = require('packages/button') 9 | 10 | describe('A spec suite', function () { 11 | it('Button', function () { 12 | const wrapper = mount(Button) 13 | expect(wrapper.html()).to.be.include('button') 14 | }) 15 | }) 16 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /src/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/test/src/test2.vue: -------------------------------------------------------------------------------- 1 | 13 | 36 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/utils/types.js: -------------------------------------------------------------------------------- 1 | export function isString(obj) { 2 | return Object.prototype.toString.call(obj) === '[object String]'; 3 | } 4 | 5 | export function isObject(obj) { 6 | return Object.prototype.toString.call(obj) === '[object Object]'; 7 | } 8 | 9 | export function isHtmlElement(node) { 10 | return node && node.nodeType === Node.ELEMENT_NODE; 11 | } 12 | 13 | export const isFunction = (functionToCheck) => { 14 | var getType = {}; 15 | return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]'; 16 | }; 17 | 18 | export const isUndefined = (val)=> { 19 | return val === void 0; 20 | }; 21 | 22 | export const isDefined = (val) => { 23 | return val !== undefined && val !== null; 24 | }; 25 | -------------------------------------------------------------------------------- /test/jest.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | module.exports = { 3 | preset: 'ts-jest', 4 | rootDir: path.resolve(__dirname,'../'), 5 | globals: { 6 | __USE_BUILD__: process.argv.indexOf('-use-build') >= 0 7 | }, 8 | testEnvironment: 'jsdom', 9 | transform: { 10 | "^.+\\.vue$": "vue-jest", 11 | "^.+\\js$": "babel-jest", 12 | ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub" 13 | }, 14 | moduleNameMapper: { 15 | '^packages(.*)$': '/packages$1', 16 | '^src(.*)$': '/src$1' 17 | }, 18 | moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node'], 19 | testMatch: [ 20 | "/test/specs/*.spec.js" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /src/directives/repeat-click.js: -------------------------------------------------------------------------------- 1 | import { once, on } from 'src/utils/dom'; 2 | 3 | export default { 4 | beforeMount(el, binding) { 5 | let interval = null; 6 | let startTime; 7 | // const handler = () => vnode.context[binding.expression].apply(); 8 | const handler = () => binding.value.apply() 9 | const clear = () => { 10 | if (Date.now() - startTime < 100) { 11 | handler(); 12 | } 13 | clearInterval(interval); 14 | interval = null; 15 | }; 16 | 17 | on(el, 'mousedown', (e) => { 18 | if (e.button !== 0) return; 19 | startTime = Date.now(); 20 | once(document, 'mouseup', clear); 21 | clearInterval(interval); 22 | interval = setInterval(handler, 100); 23 | }); 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | } -------------------------------------------------------------------------------- /src/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/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/theme-chalk/src/row.scss: -------------------------------------------------------------------------------- 1 | @import "common/var"; 2 | @import "mixins/mixins"; 3 | @import "mixins/utils"; 4 | 5 | @include b(row) { 6 | position: relative; 7 | box-sizing: border-box; 8 | @include utils-clearfix; 9 | 10 | @include m(flex) { 11 | display: flex; 12 | &:before, 13 | &:after { 14 | display: none; 15 | } 16 | 17 | @include when(justify-center) { 18 | justify-content: center; 19 | } 20 | @include when(justify-end) { 21 | justify-content: flex-end; 22 | } 23 | @include when(justify-space-between) { 24 | justify-content: space-between; 25 | } 26 | @include when(justify-space-around) { 27 | justify-content: space-around; 28 | } 29 | 30 | @include when(align-middle) { 31 | align-items: center; 32 | } 33 | @include when(align-bottom) { 34 | align-items: flex-end; 35 | } 36 | } 37 | 38 | } 39 | 40 | -------------------------------------------------------------------------------- /example/views/test.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 47 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/theme-chalk/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "element-theme-chalk", 3 | "version": "2.11.1", 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 | -------------------------------------------------------------------------------- /src/utils/scrollbar-width.js: -------------------------------------------------------------------------------- 1 | // import Vue from 'vue'; 2 | const isServer = false 3 | let scrollBarWidth; 4 | 5 | export default function() { 6 | if (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/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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /src/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 | } -------------------------------------------------------------------------------- /src/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/checkbox/src/checkbox-group.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 53 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/utils/resize-event.js: -------------------------------------------------------------------------------- 1 | import ResizeObserver from 'resize-observer-polyfill'; 2 | 3 | const isServer = typeof window === 'undefined'; 4 | 5 | /* istanbul ignore next */ 6 | const resizeHandler = function(entries) { 7 | for (let entry of entries) { 8 | const listeners = entry.target.__resizeListeners__ || []; 9 | if (listeners.length) { 10 | listeners.forEach(fn => { 11 | fn(); 12 | }); 13 | } 14 | } 15 | }; 16 | 17 | /* istanbul ignore next */ 18 | export const addResizeListener = function(element, fn) { 19 | if (isServer) return; 20 | if (!element.__resizeListeners__) { 21 | element.__resizeListeners__ = []; 22 | element.__ro__ = new ResizeObserver(resizeHandler); 23 | element.__ro__.observe(element); 24 | } 25 | element.__resizeListeners__.push(fn); 26 | }; 27 | 28 | /* istanbul ignore next */ 29 | export const removeResizeListener = function(element, fn) { 30 | if (!element || !element.__resizeListeners__) return; 31 | element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1); 32 | if (!element.__resizeListeners__.length) { 33 | element.__ro__.disconnect(); 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /src/locale/format.js: -------------------------------------------------------------------------------- 1 | import { hasOwn } from 'element-ui/src/utils/util'; 2 | 3 | const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g; 4 | /** 5 | * String format template 6 | * - Inspired: 7 | * https://github.com/Matt-Esch/string-template/index.js 8 | */ 9 | export default function(Vue) { 10 | 11 | /** 12 | * template 13 | * 14 | * @param {String} string 15 | * @param {Array} ...args 16 | * @return {String} 17 | */ 18 | 19 | function template(string, ...args) { 20 | if (args.length === 1 && typeof args[0] === 'object') { 21 | args = args[0]; 22 | } 23 | 24 | if (!args || !args.hasOwnProperty) { 25 | args = {}; 26 | } 27 | 28 | return string.replace(RE_NARGS, (match, prefix, i, index) => { 29 | let result; 30 | 31 | if (string[index - 1] === '{' && 32 | string[index + match.length] === '}') { 33 | return i; 34 | } else { 35 | result = hasOwn(args, i) ? args[i] : null; 36 | if (result === null || result === undefined) { 37 | return ''; 38 | } 39 | 40 | return result; 41 | } 42 | }); 43 | } 44 | 45 | return template; 46 | } 47 | -------------------------------------------------------------------------------- /src/theme-chalk/src/carousel-item.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(carousel) { 5 | @include e(item) { 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | width: 100%; 10 | height: 100%; 11 | display: inline-block; 12 | overflow: hidden; 13 | z-index: #{$--index-normal - 1}; 14 | 15 | @include when(active) { 16 | z-index: #{$--index-normal + 1}; 17 | } 18 | 19 | @include when(animating) { 20 | transition: transform .4s ease-in-out; 21 | } 22 | 23 | @include m(card) { 24 | width: 50%; 25 | transition: transform .4s ease-in-out; 26 | &.is-in-stage { 27 | cursor: pointer; 28 | z-index: $--index-normal; 29 | &:hover .el-carousel__mask, 30 | &.is-hover .el-carousel__mask { 31 | opacity: 0.12; 32 | } 33 | } 34 | &.is-active { 35 | z-index: #{$--index-normal + 1}; 36 | } 37 | } 38 | } 39 | 40 | @include e(mask) { 41 | position: absolute; 42 | width: 100%; 43 | height: 100%; 44 | top: 0; 45 | left: 0; 46 | background-color: $--color-white; 47 | opacity: 0.24; 48 | transition: .2s; 49 | } 50 | } -------------------------------------------------------------------------------- /example/views/Link.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 36 | 37 | -------------------------------------------------------------------------------- /src/theme-chalk/src/breadcrumb.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "mixins/utils"; 3 | @import "common/var"; 4 | 5 | @include b(breadcrumb) { 6 | font-size: 14px; 7 | line-height: 1; 8 | @include utils-clearfix; 9 | 10 | @include e(separator) { 11 | margin: 0 9px; 12 | font-weight: bold; 13 | color: $--color-text-placeholder; 14 | 15 | &[class*=icon] { 16 | margin: 0 6px; 17 | font-weight: normal; 18 | } 19 | } 20 | 21 | @include e(item) { 22 | float: left; 23 | 24 | @include e(inner) { 25 | color: $--color-text-regular; 26 | 27 | &.is-link, & a { 28 | font-weight: bold; 29 | text-decoration: none; 30 | transition: $--color-transition-base; 31 | color: $--color-text-primary; 32 | 33 | &:hover { 34 | color: $--color-primary; 35 | cursor: pointer; 36 | } 37 | } 38 | } 39 | 40 | &:last-child { 41 | .el-breadcrumb__inner, 42 | .el-breadcrumb__inner a { 43 | &, &:hover { 44 | font-weight: normal; 45 | color: $--color-text-regular; 46 | cursor: text; 47 | } 48 | } 49 | 50 | .el-breadcrumb__separator { 51 | display: none; 52 | } 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/theme-chalk/src/avatar.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(avatar) { 5 | display: inline-block; 6 | box-sizing: border-box; 7 | text-align: center; 8 | overflow: hidden; 9 | color: $--avatar-font-color; 10 | background: $--avatar-background-color; 11 | width: $--avatar-large-size; 12 | height: $--avatar-large-size; 13 | line-height: $--avatar-large-size; 14 | font-size: $--avatar-text-font-size; 15 | 16 | >img { 17 | display: block; 18 | height: 100%; 19 | vertical-align: middle; 20 | } 21 | 22 | @include m(circle) { 23 | border-radius: 50%; 24 | } 25 | 26 | @include m(square) { 27 | border-radius: $--avatar-border-radius; 28 | } 29 | 30 | @include m(icon) { 31 | font-size: $--avatar-icon-font-size; 32 | } 33 | 34 | @include m(large) { 35 | width: $--avatar-large-size; 36 | height: $--avatar-large-size; 37 | line-height: $--avatar-large-size; 38 | } 39 | 40 | @include m(medium) { 41 | width: $--avatar-medium-size; 42 | height: $--avatar-medium-size; 43 | line-height: $--avatar-medium-size; 44 | } 45 | 46 | @include m(small) { 47 | width: $--avatar-small-size; 48 | height: $--avatar-small-size; 49 | line-height: $--avatar-small-size; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /example/views/Form.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 45 | 46 | 49 | -------------------------------------------------------------------------------- /example/views/InputNumber.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 50 | 51 | 54 | -------------------------------------------------------------------------------- /src/locale/index.js: -------------------------------------------------------------------------------- 1 | import defaultLang from 'element-ui/src/locale/lang/zh-CN'; 2 | import Vue from 'vue'; 3 | import deepmerge from 'deepmerge'; 4 | import Format from './format'; 5 | 6 | const format = Format(Vue); 7 | let lang = defaultLang; 8 | let merged = false; 9 | let i18nHandler = function() { 10 | const vuei18n = Object.getPrototypeOf(this || Vue).$t; 11 | if (typeof vuei18n === 'function' && !!Vue.locale) { 12 | if (!merged) { 13 | merged = true; 14 | Vue.locale( 15 | Vue.config.lang, 16 | deepmerge(lang, Vue.locale(Vue.config.lang) || {}, { clone: true }) 17 | ); 18 | } 19 | return vuei18n.apply(this, arguments); 20 | } 21 | }; 22 | 23 | export const t = function(path, options) { 24 | let value = i18nHandler.apply(this, arguments); 25 | if (value !== null && value !== undefined) return value; 26 | 27 | const array = path.split('.'); 28 | let current = lang; 29 | 30 | for (let i = 0, j = array.length; i < j; i++) { 31 | const property = array[i]; 32 | value = current[property]; 33 | if (i === j - 1) return format(value, options); 34 | if (!value) return ''; 35 | current = value; 36 | } 37 | return ''; 38 | }; 39 | 40 | export const use = function(l) { 41 | lang = l || lang; 42 | }; 43 | 44 | export const i18n = function(fn) { 45 | i18nHandler = fn || i18nHandler; 46 | }; 47 | 48 | export default { use, t, i18n }; 49 | -------------------------------------------------------------------------------- /packages/select/src/option-group.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 61 | -------------------------------------------------------------------------------- /src/utils/menu/aria-menuitem.js: -------------------------------------------------------------------------------- 1 | import Utils from '../aria-utils'; 2 | import SubMenu from './aria-submenu'; 3 | 4 | const MenuItem = function(domNode) { 5 | this.domNode = domNode; 6 | this.submenu = null; 7 | this.init(); 8 | }; 9 | 10 | MenuItem.prototype.init = function() { 11 | this.domNode.setAttribute('tabindex', '0'); 12 | let menuChild = this.domNode.querySelector('.el-menu'); 13 | if (menuChild) { 14 | this.submenu = new SubMenu(this, menuChild); 15 | } 16 | this.addListeners(); 17 | }; 18 | 19 | MenuItem.prototype.addListeners = function() { 20 | const keys = Utils.keys; 21 | this.domNode.addEventListener('keydown', event => { 22 | let prevDef = false; 23 | switch (event.keyCode) { 24 | case keys.down: 25 | Utils.triggerEvent(event.currentTarget, 'mouseenter'); 26 | this.submenu && this.submenu.gotoSubIndex(0); 27 | prevDef = true; 28 | break; 29 | case keys.up: 30 | Utils.triggerEvent(event.currentTarget, 'mouseenter'); 31 | this.submenu && this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1); 32 | prevDef = true; 33 | break; 34 | case keys.tab: 35 | Utils.triggerEvent(event.currentTarget, 'mouseleave'); 36 | break; 37 | case keys.enter: 38 | case keys.space: 39 | prevDef = true; 40 | event.currentTarget.click(); 41 | break; 42 | } 43 | if (prevDef) { 44 | event.preventDefault(); 45 | } 46 | }); 47 | }; 48 | 49 | export default MenuItem; 50 | -------------------------------------------------------------------------------- /packages/link/src/main.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 76 | -------------------------------------------------------------------------------- /src/theme-chalk/src/reset.scss: -------------------------------------------------------------------------------- 1 | @import 'common/var'; 2 | 3 | body { 4 | font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; 5 | font-weight: 400; 6 | font-size: $--font-size-base; 7 | color: $--color-black; 8 | -webkit-font-smoothing: antialiased; 9 | } 10 | 11 | a { 12 | color: $--color-primary; 13 | text-decoration: none; 14 | 15 | &:hover, 16 | &:focus { 17 | color: mix($--color-white, $--color-primary, $--button-hover-tint-percent); 18 | } 19 | 20 | &:active { 21 | color: mix($--color-black, $--color-primary, $--button-active-shade-percent); 22 | } 23 | } 24 | 25 | h1, h2, h3, h4, h5, h6 { 26 | color: $--color-text-regular; 27 | font-weight: inherit; 28 | 29 | &:first-child { 30 | margin-top: 0; 31 | } 32 | 33 | &:last-child { 34 | margin-bottom: 0; 35 | } 36 | } 37 | 38 | h1 { 39 | font-size: #{$--font-size-base + 6px}; 40 | } 41 | 42 | h2 { 43 | font-size: #{$--font-size-base + 4px}; 44 | } 45 | 46 | h3 { 47 | font-size: #{$--font-size-base + 2px}; 48 | } 49 | 50 | h4, h5, h6, p { 51 | font-size: inherit; 52 | } 53 | 54 | p { 55 | line-height: 1.8; 56 | 57 | &:first-child { 58 | margin-top: 0; 59 | } 60 | 61 | &:last-child { 62 | margin-bottom: 0; 63 | } 64 | } 65 | 66 | sup, sub { 67 | font-size: #{$--font-size-base - 1px}; 68 | } 69 | 70 | small { 71 | font-size: #{$--font-size-base - 2px}; 72 | } 73 | 74 | hr { 75 | margin-top: 20px; 76 | margin-bottom: 20px; 77 | border: 0; 78 | border-top: 1px solid #eeeeee; 79 | } 80 | -------------------------------------------------------------------------------- /packages/select/src/navigation-mixin.js: -------------------------------------------------------------------------------- 1 | export default { 2 | data() { 3 | return { 4 | hoverOption: -1 5 | }; 6 | }, 7 | 8 | computed: { 9 | optionsAllDisabled() { 10 | return this.options.filter(option => option.visible).every(option => option.disabled); 11 | } 12 | }, 13 | 14 | watch: { 15 | hoverIndex(val) { 16 | if (typeof val === 'number' && val > -1) { 17 | this.hoverOption = this.options[val] || {}; 18 | } 19 | this.options.forEach(option => { 20 | option.hover = this.hoverOption === option; 21 | }); 22 | } 23 | }, 24 | 25 | methods: { 26 | navigateOptions(direction) { 27 | if (!this.visible) { 28 | this.visible = true; 29 | return; 30 | } 31 | if (this.options.length === 0 || this.filteredOptionsCount === 0) return; 32 | if (!this.optionsAllDisabled) { 33 | if (direction === 'next') { 34 | this.hoverIndex++; 35 | if (this.hoverIndex === this.options.length) { 36 | this.hoverIndex = 0; 37 | } 38 | } else if (direction === 'prev') { 39 | this.hoverIndex--; 40 | if (this.hoverIndex < 0) { 41 | this.hoverIndex = this.options.length - 1; 42 | } 43 | } 44 | const option = this.options[this.hoverIndex]; 45 | if (option.disabled === true || 46 | option.groupDisabled === true || 47 | !option.visible) { 48 | this.navigateOptions(direction); 49 | } 50 | this.$nextTick(() => this.scrollToOption(this.hoverOption)); 51 | } 52 | } 53 | } 54 | }; 55 | -------------------------------------------------------------------------------- /src/theme-chalk/src/badge.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(badge) { 5 | position: relative; 6 | vertical-align: middle; 7 | display: inline-block; 8 | 9 | @include e(content) { 10 | background-color: $--badge-background-color; 11 | border-radius: $--badge-radius; 12 | color: $--color-white; 13 | display: inline-block; 14 | font-size: $--badge-font-size; 15 | height: $--badge-size; 16 | line-height: $--badge-size; 17 | padding: 0 $--badge-padding; 18 | text-align: center; 19 | white-space: nowrap; 20 | border: 1px solid $--color-white; 21 | 22 | @include when(fixed) { 23 | position: absolute; 24 | top: 0; 25 | right: #{1 + $--badge-size / 2}; 26 | transform: translateY(-50%) translateX(100%); 27 | 28 | @include when(dot) { 29 | right: 5px; 30 | } 31 | } 32 | 33 | @include when(dot) { 34 | height: 8px; 35 | width: 8px; 36 | padding: 0; 37 | right: 0; 38 | border-radius: 50%; 39 | } 40 | 41 | @each $type in (primary, success, warning, info, danger) { 42 | @include m($type) { 43 | @if $type == primary { 44 | background-color: $--color-primary; 45 | } @else if $type == success { 46 | background-color: $--color-success; 47 | } @else if $type == warning { 48 | background-color: $--color-warning; 49 | } @else if $type == info { 50 | background-color: $--color-info; 51 | } @else { 52 | background-color: $--color-danger; 53 | } 54 | } 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/theme-chalk/src/scrollbar.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(scrollbar) { 5 | overflow: hidden; 6 | position: relative; 7 | 8 | &:hover, 9 | &:active, 10 | &:focus { 11 | > .el-scrollbar__bar { 12 | opacity: 1; 13 | transition: opacity 340ms ease-out, width 340ms, height 340ms; 14 | } 15 | } 16 | 17 | @include e(wrap) { 18 | overflow: scroll; 19 | height: 100%; 20 | 21 | @include m(hidden-default) { 22 | &::-webkit-scrollbar { 23 | width: 0; 24 | height: 0; 25 | } 26 | } 27 | } 28 | 29 | @include e(thumb) { 30 | position: relative; 31 | display: block; 32 | width: 0; 33 | height: 0; 34 | cursor: pointer; 35 | border-radius: inherit; 36 | background-color: $--scrollbar-background-color; 37 | transition: .3s background-color; 38 | 39 | &:hover { 40 | background-color: $--scrollbar-hover-background-color; 41 | } 42 | } 43 | 44 | @include e(bar) { 45 | position: absolute; 46 | right: 2px; 47 | bottom: 2px; 48 | z-index: 1; 49 | border-radius: 4px; 50 | opacity: 0; 51 | transition: opacity 120ms ease-out; 52 | 53 | @include when(vertical) { 54 | width: 6px; 55 | top: 2px; 56 | 57 | > div { 58 | width: 100%; 59 | } 60 | &:hover { 61 | width: 17px; 62 | } 63 | } 64 | 65 | @include when(horizontal) { 66 | height: 6px; 67 | left: 2px; 68 | 69 | > div { 70 | height: 100%; 71 | } 72 | &:hover { 73 | height: 17px; 74 | } 75 | } 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/theme-chalk/src/select-dropdown.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | @import "./popper"; 4 | 5 | @include b(select-dropdown) { 6 | position: absolute; 7 | z-index: #{$--index-top + 1}; 8 | border: $--select-dropdown-border; 9 | border-radius: $--border-radius-base; 10 | background-color: $--select-dropdown-background; 11 | box-shadow: $--select-dropdown-shadow; 12 | box-sizing: border-box; 13 | margin: 5px 0; 14 | 15 | @include when(multiple) { 16 | & .el-select-dropdown__item.selected { 17 | color: $--select-option-selected-font-color; 18 | background-color: $--select-dropdown-background; 19 | 20 | &.hover { 21 | background-color: $--select-option-hover-background; 22 | } 23 | 24 | &::after { 25 | position: absolute; 26 | right: 20px; 27 | font-family: 'element-icons'; 28 | content: "\e6da"; 29 | font-size: 12px; 30 | font-weight: bold; 31 | -webkit-font-smoothing: antialiased; 32 | -moz-osx-font-smoothing: grayscale; 33 | } 34 | } 35 | } 36 | 37 | .el-scrollbar.is-empty .el-select-dropdown__list{ 38 | padding: 0; 39 | } 40 | } 41 | 42 | @include b(select-dropdown__empty) { 43 | padding: $--select-dropdown-empty-padding; 44 | margin: 0; 45 | text-align: center; 46 | color: $--select-dropdown-empty-color; 47 | font-size: $--select-font-size; 48 | } 49 | 50 | @include b(select-dropdown__wrap) { 51 | max-height: $--select-dropdown-max-height; 52 | } 53 | 54 | @include b(select-dropdown__list) { 55 | list-style: none; 56 | padding: $--select-dropdown-padding; 57 | margin: 0; 58 | box-sizing: border-box; 59 | } 60 | -------------------------------------------------------------------------------- /src/utils/menu/aria-submenu.js: -------------------------------------------------------------------------------- 1 | import Utils from '../aria-utils'; 2 | 3 | const SubMenu = function(parent, domNode) { 4 | this.domNode = domNode; 5 | this.parent = parent; 6 | this.subMenuItems = []; 7 | this.subIndex = 0; 8 | this.init(); 9 | }; 10 | 11 | SubMenu.prototype.init = function() { 12 | this.subMenuItems = this.domNode.querySelectorAll('li'); 13 | this.addListeners(); 14 | }; 15 | 16 | SubMenu.prototype.gotoSubIndex = function(idx) { 17 | if (idx === this.subMenuItems.length) { 18 | idx = 0; 19 | } else if (idx < 0) { 20 | idx = this.subMenuItems.length - 1; 21 | } 22 | this.subMenuItems[idx].focus(); 23 | this.subIndex = idx; 24 | }; 25 | 26 | SubMenu.prototype.addListeners = function() { 27 | const keys = Utils.keys; 28 | const parentNode = this.parent.domNode; 29 | Array.prototype.forEach.call(this.subMenuItems, el => { 30 | el.addEventListener('keydown', event => { 31 | let prevDef = false; 32 | switch (event.keyCode) { 33 | case keys.down: 34 | this.gotoSubIndex(this.subIndex + 1); 35 | prevDef = true; 36 | break; 37 | case keys.up: 38 | this.gotoSubIndex(this.subIndex - 1); 39 | prevDef = true; 40 | break; 41 | case keys.tab: 42 | Utils.triggerEvent(parentNode, 'mouseleave'); 43 | break; 44 | case keys.enter: 45 | case keys.space: 46 | prevDef = true; 47 | event.currentTarget.click(); 48 | break; 49 | } 50 | if (prevDef) { 51 | event.preventDefault(); 52 | event.stopPropagation(); 53 | } 54 | return false; 55 | }); 56 | }); 57 | }; 58 | 59 | export default SubMenu; 60 | -------------------------------------------------------------------------------- /src/theme-chalk/src/calendar.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(calendar) { 5 | background-color:#fff; 6 | 7 | @include e(header) { 8 | display: flex; 9 | justify-content: space-between; 10 | padding: 12px 20px; 11 | border-bottom: $--table-border; 12 | } 13 | 14 | @include e(title) { 15 | color: #000000; 16 | align-self: center; 17 | } 18 | 19 | @include e(body) { 20 | padding: 12px 20px 35px; 21 | } 22 | } 23 | 24 | @include b(calendar-table) { 25 | table-layout: fixed; 26 | width: 100%; 27 | 28 | thead th { 29 | padding: 12px 0; 30 | color: $--color-text-regular; 31 | font-weight: normal; 32 | } 33 | 34 | &:not(.is-range) { 35 | td.prev, 36 | td.next { 37 | color: $--color-text-placeholder; 38 | } 39 | } 40 | 41 | td { 42 | border-bottom: $--calendar-border; 43 | border-right: $--calendar-border; 44 | vertical-align: top; 45 | transition: background-color 0.2s ease; 46 | 47 | @include when(selected) { 48 | background-color: $--calendar-selected-background-color; 49 | } 50 | 51 | @include when(today) { 52 | color: $--color-primary; 53 | } 54 | } 55 | 56 | tr:first-child td { 57 | border-top: $--calendar-border; 58 | } 59 | 60 | tr td:first-child { 61 | border-left: $--calendar-border; 62 | } 63 | 64 | tr.el-calendar-table__row--hide-border td { 65 | border-top: none; 66 | } 67 | 68 | @include b(calendar-day) { 69 | box-sizing: border-box; 70 | padding: 8px; 71 | height: $--calendar-cell-width; 72 | &:hover { 73 | cursor: pointer; 74 | background-color: $--calendar-selected-background-color; 75 | } 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /_webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const { VueLoaderPlugin } = require('vue-loader') 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 4 | 5 | module.exports = (env = {}) => ({ 6 | mode: env.prod ? 'production' : 'development', 7 | devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map', 8 | entry: path.resolve(__dirname, './example/main.js'), 9 | output: { 10 | path: path.resolve(__dirname, './dist'), 11 | publicPath: '/dist/' 12 | }, 13 | resolve: { 14 | alias: { 15 | // this isn't technically needed, since the default `vue` entry for bundlers 16 | // is a simple `export * from '@vue/runtime-dom`. However having this 17 | // extra re-export somehow causes webpack to always invalidate the module 18 | // on the first HMR update and causes the page to reload. 19 | 'vue': '@vue/runtime-dom' 20 | } 21 | }, 22 | module: { 23 | rules: [ 24 | { 25 | test: /\.vue$/, 26 | use: 'vue-loader' 27 | }, 28 | { 29 | test: /\.png$/, 30 | use: { 31 | loader: 'url-loader', 32 | options: { limit: 8192 } 33 | } 34 | }, 35 | { 36 | test: /\.css$/, 37 | use: [ 38 | { 39 | loader: MiniCssExtractPlugin.loader, 40 | options: { hmr: !env.prod } 41 | }, 42 | 'css-loader' 43 | ] 44 | } 45 | ] 46 | }, 47 | plugins: [ 48 | new VueLoaderPlugin(), 49 | new MiniCssExtractPlugin({ 50 | filename: '[name].css' 51 | }) 52 | ], 53 | devServer: { 54 | inline: true, 55 | hot: true, 56 | stats: 'minimal', 57 | contentBase: __dirname, 58 | overlay: true 59 | } 60 | }) 61 | -------------------------------------------------------------------------------- /packages/select/src/select-dropdown.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 75 | -------------------------------------------------------------------------------- /packages/container/src/main.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 65 | -------------------------------------------------------------------------------- /src/mixins/migrating.js: -------------------------------------------------------------------------------- 1 | import { kebabCase } from 'src/utils/util'; 2 | /** 3 | * Show migrating guide in browser console. 4 | * 5 | * Usage: 6 | * import Migrating from 'element-ui/src/mixins/migrating'; 7 | * 8 | * mixins: [Migrating] 9 | * 10 | * add getMigratingConfig method for your component. 11 | * getMigratingConfig() { 12 | * return { 13 | * props: { 14 | * 'allow-no-selection': 'allow-no-selection is removed.', 15 | * 'selection-mode': 'selection-mode is removed.' 16 | * }, 17 | * events: { 18 | * selectionchange: 'selectionchange is renamed to selection-change.' 19 | * } 20 | * }; 21 | * }, 22 | */ 23 | export default { 24 | mounted() { 25 | if (process.env.NODE_ENV === 'production') return; 26 | if (!this.$vnode) return; 27 | const { props = {}, events = {} } = this.getMigratingConfig(); 28 | const { data, componentOptions } = this.$vnode; 29 | const definedProps = data.attrs || {}; 30 | const definedEvents = componentOptions.listeners || {}; 31 | 32 | for (let propName in definedProps) { 33 | propName = kebabCase(propName); // compatible with camel case 34 | if (props[propName]) { 35 | console.warn(`[Element Migrating][${this.$options.name}][Attribute]: ${props[propName]}`); 36 | } 37 | } 38 | 39 | for (let eventName in definedEvents) { 40 | eventName = kebabCase(eventName); // compatible with camel case 41 | if (events[eventName]) { 42 | console.warn(`[Element Migrating][${this.$options.name}][Event]: ${events[eventName]}`); 43 | } 44 | } 45 | }, 46 | methods: { 47 | getMigratingConfig() { 48 | return { 49 | props: {}, 50 | events: {} 51 | }; 52 | } 53 | } 54 | }; 55 | -------------------------------------------------------------------------------- /example/App.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 66 | 67 | 81 | -------------------------------------------------------------------------------- /src/theme-chalk/src/autocomplete.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "mixins/utils"; 3 | @import "common/var"; 4 | @import "./input.scss"; 5 | @import "./scrollbar.scss"; 6 | @import "./popper"; 7 | 8 | @include b(autocomplete) { 9 | position: relative; 10 | display: inline-block; 11 | } 12 | 13 | @include b(autocomplete-suggestion) { 14 | margin: 5px 0; 15 | box-shadow: $--box-shadow-light; 16 | border-radius: $--border-radius-base; 17 | border: 1px solid $--border-color-light; 18 | box-sizing: border-box; 19 | background-color: $--color-white; 20 | 21 | @include e(wrap) { 22 | max-height: 280px; 23 | padding: 10px 0; 24 | box-sizing: border-box; 25 | } 26 | 27 | @include e(list) { 28 | margin: 0; 29 | padding: 0; 30 | } 31 | 32 | & li { 33 | padding: 0 20px; 34 | margin: 0; 35 | line-height: 34px; 36 | cursor: pointer; 37 | color: $--color-text-regular; 38 | font-size: $--font-size-base; 39 | list-style: none; 40 | white-space: nowrap; 41 | overflow: hidden; 42 | text-overflow: ellipsis; 43 | 44 | &:hover { 45 | background-color: $--select-option-hover-background; 46 | } 47 | 48 | &.highlighted { 49 | background-color: $--select-option-hover-background; 50 | } 51 | 52 | &.divider { 53 | margin-top: 6px; 54 | border-top: 1px solid $--color-black; 55 | } 56 | 57 | &.divider:last-child { 58 | margin-bottom: -6px; 59 | } 60 | } 61 | 62 | @include when(loading) { 63 | li { 64 | text-align: center; 65 | height: 100px; 66 | line-height: 100px; 67 | font-size: 20px; 68 | color: #999; 69 | @include utils-vertical-center; 70 | 71 | &:hover { 72 | background-color: $--color-white; 73 | } 74 | } 75 | 76 | & .el-icon-loading { 77 | vertical-align: middle; 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/theme-chalk/src/collapse.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | @import "common/transition"; 4 | 5 | @include b(collapse) { 6 | border-top: 1px solid $--collapse-border-color; 7 | border-bottom: 1px solid $--collapse-border-color; 8 | } 9 | @include b(collapse-item) { 10 | @include when(disabled) { 11 | .el-collapse-item__header { 12 | color: $--font-color-disabled-base; 13 | cursor: not-allowed; 14 | } 15 | } 16 | @include e(header) { 17 | display: flex; 18 | align-items: center; 19 | height: $--collapse-header-height; 20 | line-height: $--collapse-header-height; 21 | background-color: $--collapse-header-background-color; 22 | color: $--collapse-header-font-color; 23 | cursor: pointer; 24 | border-bottom: 1px solid $--collapse-border-color; 25 | font-size: $--collapse-header-font-size; 26 | font-weight: 500; 27 | transition: border-bottom-color .3s; 28 | outline: none; 29 | @include e(arrow) { 30 | margin: 0 8px 0 auto; 31 | transition: transform .3s; 32 | font-weight: 300; 33 | @include when(active) { 34 | transform: rotate(90deg); 35 | } 36 | } 37 | &.focusing:focus:not(:hover){ 38 | color: $--color-primary; 39 | } 40 | @include when(active) { 41 | border-bottom-color: transparent; 42 | } 43 | } 44 | 45 | @include e(wrap) { 46 | will-change: height; 47 | background-color: $--collapse-content-background-color; 48 | overflow: hidden; 49 | box-sizing: border-box; 50 | border-bottom: 1px solid $--collapse-border-color; 51 | } 52 | 53 | @include e(content) { 54 | padding-bottom: 25px; 55 | font-size: $--collapse-content-font-size; 56 | color: $--collapse-content-font-color; 57 | line-height: 1.769230769230769; 58 | } 59 | 60 | &:last-child { 61 | margin-bottom: -1px; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /packages/row/src/row.js: -------------------------------------------------------------------------------- 1 | import {computed, h, provide, inject} from 'vue' 2 | 3 | // 常量 4 | const gutterSymbol = Symbol() 5 | 6 | export function useGutter() { 7 | return inject(gutterSymbol) 8 | } 9 | export default { 10 | name: 'ElRow', 11 | 12 | componentName: 'ElRow', 13 | 14 | props: { 15 | tag: { 16 | type: String, 17 | default: 'div' 18 | }, 19 | gutter: Number, 20 | type: String, 21 | justify: { 22 | type: String, 23 | default: 'start' 24 | }, 25 | align: { 26 | type: String, 27 | default: 'top' 28 | } 29 | }, 30 | setup(props, ctx) { 31 | const style = () => computed(() => { 32 | const ret = {} 33 | 34 | if (props.gutter) { 35 | ret.marginLeft = `-${props.gutter / 2}px` 36 | ret.marginRight = ret.marginLeft 37 | } 38 | 39 | return ret 40 | }) 41 | provide(gutterSymbol, props.gutter) 42 | 43 | return () => h(props.tag, { 44 | class: [ 45 | 'el-row', 46 | props.justify !== 'start' ? `is-justify-${props.justify}` : '', 47 | props.align !== 'top' ? `is-align-${props.align}` : '', 48 | { 'el-row--flex': props.type === 'flex' } 49 | ], 50 | style 51 | }, ctx.slots.default()); 52 | }, 53 | /*computed: { 54 | style() { 55 | const ret = {}; 56 | 57 | if (this.gutter) { 58 | ret.marginLeft = `-${this.gutter / 2}px`; 59 | ret.marginRight = ret.marginLeft; 60 | } 61 | 62 | return ret; 63 | } 64 | },*/ 65 | 66 | /*render() { 67 | return h(this.tag, { 68 | class: [ 69 | 'el-row', 70 | this.justify !== 'start' ? `is-justify-${this.justify}` : '', 71 | this.align !== 'top' ? `is-align-${this.align}` : '', 72 | { 'el-row--flex': this.type === 'flex' } 73 | ], 74 | style: this.style 75 | }, this.$slots.default); 76 | }*/ 77 | } 78 | -------------------------------------------------------------------------------- /src/theme-chalk/src/link.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | $typeMap: ( 5 | primary: $--link-primary-font-color, 6 | danger: $--link-danger-font-color, 7 | success: $--link-success-font-color, 8 | warning: $--link-warning-font-color, 9 | info: $--link-info-font-color); 10 | 11 | @include b(link) { 12 | display: inline-flex; 13 | flex-direction: row; 14 | align-items: center; 15 | justify-content: center; 16 | vertical-align: middle; 17 | position: relative; 18 | text-decoration: none; 19 | outline: none; 20 | cursor: pointer; 21 | padding: 0; 22 | font-size: $--link-font-size; 23 | font-weight: $--link-font-weight; 24 | 25 | @include when(underline) { 26 | &:hover:after { 27 | content: ""; 28 | position: absolute; 29 | left: 0; 30 | right: 0; 31 | height: 0; 32 | bottom: 0; 33 | border-bottom: 1px solid $--link-default-active-color 34 | } 35 | } 36 | 37 | @include when(disabled) { 38 | cursor: not-allowed; 39 | } 40 | 41 | & [class*="el-icon-"] { 42 | & + span { 43 | margin-left: 5px; 44 | } 45 | } 46 | 47 | 48 | &.el-link--default { 49 | color: $--link-default-font-color; 50 | &:hover { 51 | color: $--link-default-active-color 52 | } 53 | &:after { 54 | border-color: $--link-default-active-color 55 | } 56 | @include when(disabled) { 57 | color: $--link-disabled-font-color 58 | } 59 | } 60 | 61 | @each $type, $primaryColor in $typeMap { 62 | &.el-link--#{$type} { 63 | color: $primaryColor; 64 | &:hover { 65 | color: mix($primaryColor, $--color-white, 80%) 66 | } 67 | &:after { 68 | border-color: $primaryColor 69 | } 70 | @include when(disabled) { 71 | color: mix($primaryColor, $--color-white, 50%) 72 | } 73 | @include when(underline) { 74 | &:hover:after { 75 | border-color: $primaryColor 76 | } 77 | } 78 | } 79 | } 80 | 81 | } 82 | -------------------------------------------------------------------------------- /src/theme-chalk/src/date-picker/month-table.scss: -------------------------------------------------------------------------------- 1 | @import "../common/var"; 2 | 3 | @include b(month-table) { 4 | font-size: 12px; 5 | margin: -1px; 6 | border-collapse: collapse; 7 | 8 | td { 9 | text-align: center; 10 | padding: 8px 0px; 11 | cursor: pointer; 12 | & div { 13 | height: 48px; 14 | padding: 6px 0; 15 | box-sizing: border-box; 16 | } 17 | &.today { 18 | .cell { 19 | color: $--color-primary; 20 | font-weight: bold; 21 | } 22 | &.start-date .cell, 23 | &.end-date .cell { 24 | color: $--color-white; 25 | } 26 | } 27 | 28 | &.disabled .cell { 29 | background-color: $--background-color-base; 30 | cursor: not-allowed; 31 | color: $--color-text-placeholder; 32 | 33 | &:hover { 34 | color: $--color-text-placeholder; 35 | } 36 | } 37 | 38 | .cell { 39 | width: 60px; 40 | height: 36px; 41 | display: block; 42 | line-height: 36px; 43 | color: $--datepicker-font-color; 44 | margin: 0 auto; 45 | border-radius: 18px; 46 | &:hover { 47 | color: $--datepicker-hover-font-color; 48 | } 49 | } 50 | 51 | &.in-range div { 52 | background-color: $--datepicker-inrange-background-color; 53 | &:hover { 54 | background-color: $--datepicker-inrange-hover-background-color; 55 | } 56 | } 57 | &.start-date div, 58 | &.end-date div { 59 | color: $--color-white; 60 | } 61 | 62 | &.start-date .cell, 63 | &.end-date .cell { 64 | color: $--color-white; 65 | background-color: $--datepicker-active-color; 66 | } 67 | 68 | &.start-date div { 69 | border-top-left-radius: 24px; 70 | border-bottom-left-radius: 24px; 71 | } 72 | 73 | &.end-date div { 74 | border-top-right-radius: 24px; 75 | border-bottom-right-radius: 24px; 76 | } 77 | 78 | &.current:not(.disabled) .cell { 79 | color: $--datepicker-active-color; 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/theme-chalk/src/date-picker/time-picker.scss: -------------------------------------------------------------------------------- 1 | @import "../common/var"; 2 | 3 | @include b(time-panel) { 4 | margin: 5px 0; 5 | border: solid 1px $--datepicker-border-color; 6 | background-color: $--color-white; 7 | box-shadow: $--box-shadow-light; 8 | border-radius: 2px; 9 | position: absolute; 10 | width: 180px; 11 | left: 0; 12 | z-index: $--index-top; 13 | user-select: none; 14 | box-sizing: content-box; 15 | 16 | @include e(content) { 17 | font-size: 0; 18 | position: relative; 19 | overflow: hidden; 20 | 21 | &::after, &::before { 22 | content: ""; 23 | top: 50%; 24 | position: absolute; 25 | margin-top: -15px; 26 | height: 32px; 27 | z-index: -1; 28 | left: 0; 29 | right: 0; 30 | box-sizing: border-box; 31 | padding-top: 6px; 32 | text-align: left; 33 | border-top: 1px solid $--border-color-light; 34 | border-bottom: 1px solid $--border-color-light; 35 | } 36 | 37 | &::after { 38 | left: 50%; 39 | margin-left: 12%; 40 | margin-right: 12%; 41 | } 42 | 43 | &::before { 44 | padding-left: 50%; 45 | margin-right: 12%; 46 | margin-left: 12%; 47 | } 48 | 49 | &.has-seconds { 50 | &::after { 51 | left: calc(100% / 3 * 2); 52 | } 53 | 54 | &::before { 55 | padding-left: calc(100% / 3); 56 | } 57 | } 58 | } 59 | 60 | @include e(footer) { 61 | border-top: 1px solid $--datepicker-inner-border-color; 62 | padding: 4px; 63 | height: 36px; 64 | line-height: 25px; 65 | text-align: right; 66 | box-sizing: border-box; 67 | } 68 | 69 | @include e(btn) { 70 | border: none; 71 | line-height: 28px; 72 | padding: 0 5px; 73 | margin: 0 5px; 74 | cursor: pointer; 75 | background-color: transparent; 76 | outline: none; 77 | font-size: 12px; 78 | color: $--color-text-primary; 79 | 80 | &.confirm { 81 | font-weight: 800; 82 | color: $--datepicker-active-color; 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/theme-chalk/src/date-picker/date-picker.scss: -------------------------------------------------------------------------------- 1 | @import "../common/var"; 2 | @import "../mixins/mixins"; 3 | @import "./picker-panel.scss"; 4 | 5 | @include b(date-picker) { 6 | width: 322px; 7 | 8 | &.has-sidebar.has-time { 9 | width: 434px; 10 | } 11 | 12 | &.has-sidebar { 13 | width: 438px; 14 | } 15 | 16 | &.has-time .el-picker-panel__body-wrapper { 17 | position: relative; 18 | } 19 | 20 | .el-picker-panel__content { 21 | width: 292px; 22 | } 23 | 24 | table { 25 | table-layout: fixed; 26 | width: 100%; 27 | } 28 | 29 | @include e(editor-wrap) { 30 | position: relative; 31 | display: table-cell; 32 | padding: 0 5px; 33 | } 34 | 35 | @include e(time-header) { 36 | position: relative; 37 | border-bottom: 1px solid $--datepicker-inner-border-color; 38 | font-size: 12px; 39 | padding: 8px 5px 5px 5px; 40 | display: table; 41 | width: 100%; 42 | box-sizing: border-box; 43 | } 44 | 45 | @include e(header) { 46 | margin: 12px; 47 | text-align: center; 48 | 49 | @include m(bordered) { 50 | margin-bottom: 0; 51 | padding-bottom: 12px; 52 | border-bottom: solid 1px $--border-color-lighter; 53 | 54 | & + .el-picker-panel__content { 55 | margin-top: 0; 56 | } 57 | } 58 | } 59 | 60 | @include e(header-label) { 61 | font-size: 16px; 62 | font-weight: 500; 63 | padding: 0 5px; 64 | line-height: 22px; 65 | text-align: center; 66 | cursor: pointer; 67 | color: $--color-text-regular; 68 | 69 | &:hover { 70 | color: $--datepicker-hover-font-color; 71 | } 72 | 73 | &.active { 74 | color: $--datepicker-active-color; 75 | } 76 | } 77 | 78 | @include e(prev-btn) { 79 | float: left; 80 | } 81 | 82 | @include e(next-btn) { 83 | float: right; 84 | } 85 | 86 | @include e(time-wrap) { 87 | padding: 10px; 88 | text-align: center; 89 | } 90 | 91 | @include e(time-label) { 92 | float: left; 93 | cursor: pointer; 94 | line-height: 30px; 95 | margin-left: 10px; 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /src/theme-chalk/src/timeline-item.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(timeline-item) { 5 | position: relative; 6 | padding-bottom: 20px; 7 | 8 | @include e(wrapper) { 9 | position: relative; 10 | padding-left: 28px; 11 | top: -3px; 12 | } 13 | 14 | @include e(tail) { 15 | position: absolute; 16 | left: 4px; 17 | height: 100%; 18 | border-left: 2px solid $--timeline-node-color; 19 | } 20 | 21 | @include e(icon) { 22 | color: $--color-white; 23 | font-size: $--font-size-small; 24 | } 25 | 26 | @include e(node) { 27 | position: absolute; 28 | background-color: $--timeline-node-color; 29 | border-radius: 50%; 30 | display: flex; 31 | justify-content: center; 32 | align-items: center; 33 | 34 | @include m(normal) { 35 | left: -1px; 36 | width: $--timeline-node-size-normal; 37 | height: $--timeline-node-size-normal; 38 | } 39 | @include m(large) { 40 | left: -2px; 41 | width: $--timeline-node-size-large; 42 | height: $--timeline-node-size-large; 43 | } 44 | 45 | @include m(primary) { 46 | background-color: $--color-primary; 47 | } 48 | @include m(success) { 49 | background-color: $--color-success; 50 | } 51 | @include m(warning) { 52 | background-color: $--color-warning; 53 | } 54 | @include m(danger) { 55 | background-color: $--color-danger; 56 | } 57 | @include m(info) { 58 | background-color: $--color-info; 59 | } 60 | } 61 | 62 | @include e(dot) { 63 | position: absolute; 64 | display: flex; 65 | justify-content: center; 66 | align-items: center; 67 | } 68 | 69 | @include e(content) { 70 | color: $--color-text-primary; 71 | } 72 | 73 | @include e(timestamp) { 74 | color: $--color-text-secondary; 75 | line-height: 1; 76 | font-size: $--font-size-small; 77 | 78 | @include when(top) { 79 | margin-bottom: 8px; 80 | padding-top: 4px; 81 | } 82 | @include when(bottom) { 83 | margin-top: 8px; 84 | } 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/theme-chalk/src/loading.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(loading-parent) { 5 | @include m(relative) { 6 | position: relative !important; 7 | } 8 | 9 | @include m(hidden) { 10 | overflow: hidden !important; 11 | } 12 | } 13 | 14 | @include b(loading-mask) { 15 | position: absolute; 16 | z-index: 2000; 17 | background-color: rgba(255, 255, 255, .9); 18 | margin: 0; 19 | top: 0; 20 | right: 0; 21 | bottom: 0; 22 | left: 0; 23 | transition: opacity 0.3s; 24 | 25 | @include when(fullscreen) { 26 | position: fixed; 27 | 28 | .el-loading-spinner { 29 | margin-top: #{- $--loading-fullscreen-spinner-size / 2}; 30 | 31 | .circular { 32 | height: $--loading-fullscreen-spinner-size; 33 | width: $--loading-fullscreen-spinner-size; 34 | } 35 | } 36 | } 37 | } 38 | 39 | @include b(loading-spinner) { 40 | top: 50%; 41 | margin-top: #{- $--loading-spinner-size / 2}; 42 | width: 100%; 43 | text-align: center; 44 | position: absolute; 45 | 46 | .el-loading-text { 47 | color: $--color-primary; 48 | margin: 3px 0; 49 | font-size: 14px; 50 | } 51 | 52 | .circular { 53 | height: $--loading-spinner-size; 54 | width: $--loading-spinner-size; 55 | animation: loading-rotate 2s linear infinite; 56 | } 57 | 58 | .path { 59 | animation: loading-dash 1.5s ease-in-out infinite; 60 | stroke-dasharray: 90, 150; 61 | stroke-dashoffset: 0; 62 | stroke-width: 2; 63 | stroke: $--color-primary; 64 | stroke-linecap: round; 65 | } 66 | 67 | i { 68 | color: $--color-primary; 69 | } 70 | } 71 | 72 | .el-loading-fade-enter, 73 | .el-loading-fade-leave-active { 74 | opacity: 0; 75 | } 76 | 77 | @keyframes loading-rotate { 78 | 100% { 79 | transform: rotate(360deg); 80 | } 81 | } 82 | 83 | @keyframes loading-dash { 84 | 0% { 85 | stroke-dasharray: 1, 200; 86 | stroke-dashoffset: 0; 87 | } 88 | 50% { 89 | stroke-dasharray: 90, 150; 90 | stroke-dashoffset: -40px; 91 | } 92 | 100% { 93 | stroke-dasharray: 90, 150; 94 | stroke-dashoffset: -120px; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /example/router/index.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from 'vue-router' 2 | import Button from '../views/Button.vue' 3 | // const Button = require('../views/Button') 4 | 5 | const routes = [ 6 | { 7 | path: '/button', 8 | name: 'button', 9 | component: Button 10 | }, 11 | { 12 | path: '/layout', 13 | name: 'Layout', 14 | // route level code-splitting 15 | // this generates a separate chunk (about.[hash].js) for this route 16 | // which is lazy-loaded when the route is visited. 17 | component: () => import(/* webpackChunkName: "layout" */ '../views/Layout.vue') 18 | }, 19 | { 20 | path: '/container', 21 | name: 'Container', 22 | component: () => import(/* webpackChunkName: "container" */ '../views/Container.vue') 23 | }, 24 | { 25 | path: '/link', 26 | name: 'Link', 27 | component: () => import(/* webpackChunkName: "link" */ '../views/Link.vue') 28 | }, 29 | { 30 | path: '/radio', 31 | name: 'Radio', 32 | component: () => import(/* webpackChunkName: "link" */ '../views/Radio.vue') 33 | }, 34 | { 35 | path: '/checked', 36 | name: 'Check', 37 | component: () => import(/* webpackChunkName: "link" */ '../views/Checked.vue') 38 | }, 39 | { 40 | path: '/form', 41 | name: 'Form', 42 | component: () => import(/* webpackChunkName: "link" */ '../views/Form.vue') 43 | }, 44 | { 45 | path: '/input', 46 | name: 'Input', 47 | component: () => import(/* webpackChunkName: "link" */ '../views/Input.vue') 48 | }, 49 | { 50 | path: '/inputNumber', 51 | name: 'inputNumber', 52 | component: () => import(/* webpackChunkName: "link" */ '../views/InputNumber.vue') 53 | }, 54 | { 55 | path: '/Select', 56 | name: 'Select', 57 | component: () => import('../views/Select') 58 | }, 59 | { 60 | path: '/Tag', 61 | name: 'tag', 62 | component: () => import('../views/Tag') 63 | }, 64 | { 65 | path: '/test', 66 | name: 'test', 67 | component: () => import('../views/test') 68 | }, 69 | 70 | ] 71 | 72 | const router = createRouter({ 73 | history: createWebHistory(process.env.BASE_URL), 74 | routes 75 | }) 76 | 77 | export default router 78 | -------------------------------------------------------------------------------- /src/theme-chalk/src/table-column.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "checkbox"; 3 | @import "tag"; 4 | @import "common/var"; 5 | 6 | @include b(table-column) { 7 | @include m(selection) { 8 | .cell { 9 | padding-left: 14px; 10 | padding-right: 14px; 11 | } 12 | } 13 | } 14 | 15 | @include b(table-filter) { 16 | border: solid 1px $--border-color-lighter; 17 | border-radius: 2px; 18 | background-color: $--color-white; 19 | box-shadow: $--dropdown-menu-box-shadow; 20 | box-sizing: border-box; 21 | margin: 2px 0; 22 | 23 | /** used for dropdown mode */ 24 | @include e(list) { 25 | padding: 5px 0; 26 | margin: 0; 27 | list-style: none; 28 | min-width: 100px; 29 | } 30 | 31 | @include e(list-item) { 32 | line-height: 36px; 33 | padding: 0 10px; 34 | cursor: pointer; 35 | font-size: $--font-size-base; 36 | 37 | &:hover { 38 | background-color: $--dropdown-menuItem-hover-fill; 39 | color: $--dropdown-menuItem-hover-color; 40 | } 41 | 42 | @include when(active) { 43 | background-color: $--color-primary; 44 | color: $--color-white; 45 | } 46 | } 47 | 48 | @include e(content) { 49 | min-width: 100px; 50 | } 51 | 52 | @include e(bottom) { 53 | border-top: 1px solid $--border-color-lighter; 54 | padding: 8px; 55 | 56 | button { 57 | background: transparent; 58 | border: none; 59 | color: $--color-text-regular; 60 | cursor: pointer; 61 | font-size: $--font-size-small; 62 | padding: 0 3px; 63 | 64 | &:hover { 65 | color: $--color-primary; 66 | } 67 | 68 | &:focus { 69 | outline: none; 70 | } 71 | 72 | &.is-disabled { 73 | color: $--disabled-color-base; 74 | cursor: not-allowed; 75 | } 76 | } 77 | } 78 | 79 | @include e(wrap) { 80 | max-height: 280px; 81 | } 82 | 83 | @include e(checkbox-group) { 84 | padding: 10px; 85 | 86 | label.el-checkbox { 87 | display: block; 88 | margin-right: 5px; 89 | margin-bottom: 8px; 90 | margin-left: 5px; 91 | } 92 | 93 | .el-checkbox:last-child { 94 | margin-bottom: 0; 95 | } 96 | } 97 | } -------------------------------------------------------------------------------- /src/theme-chalk/src/date-picker/date-range-picker.scss: -------------------------------------------------------------------------------- 1 | @import "../common/var"; 2 | 3 | @include b(date-range-picker) { 4 | width: 646px; 5 | 6 | &.has-sidebar { 7 | width: 756px; 8 | } 9 | 10 | table { 11 | table-layout: fixed; 12 | width: 100%; 13 | } 14 | 15 | .el-picker-panel__body { 16 | min-width: 513px; 17 | } 18 | 19 | .el-picker-panel__content { 20 | margin: 0; 21 | } 22 | 23 | @include e(header) { 24 | position: relative; 25 | text-align: center; 26 | height: 28px; 27 | 28 | [class*=arrow-left] { 29 | float: left; 30 | } 31 | 32 | [class*=arrow-right] { 33 | float: right; 34 | } 35 | 36 | div { 37 | font-size: 16px; 38 | font-weight: 500; 39 | margin-right: 50px; 40 | } 41 | } 42 | 43 | @include e(content) { 44 | float: left; 45 | width: 50%; 46 | box-sizing: border-box; 47 | margin: 0; 48 | padding: 16px; 49 | 50 | @include when(left) { 51 | border-right: 1px solid $--datepicker-inner-border-color; 52 | } 53 | .el-date-range-picker__header { 54 | 55 | div { 56 | margin-left: 50px; 57 | margin-right: 50px; 58 | } 59 | } 60 | } 61 | 62 | @include e(editors-wrap) { 63 | box-sizing: border-box; 64 | display: table-cell; 65 | 66 | @include when(right) { 67 | text-align: right; 68 | } 69 | } 70 | 71 | @include e(time-header) { 72 | position: relative; 73 | border-bottom: 1px solid $--datepicker-inner-border-color; 74 | font-size: 12px; 75 | padding: 8px 5px 5px 5px; 76 | display: table; 77 | width: 100%; 78 | box-sizing: border-box; 79 | 80 | > .el-icon-arrow-right { 81 | font-size: 20px; 82 | vertical-align: middle; 83 | display: table-cell; 84 | color: $--datepicker-icon-color; 85 | } 86 | } 87 | 88 | @include e(time-picker-wrap) { 89 | position: relative; 90 | display: table-cell; 91 | padding: 0 5px; 92 | 93 | .el-picker-panel { 94 | position: absolute; 95 | top: 13px; 96 | right: 0; 97 | z-index: 1; 98 | background: $--color-white; 99 | } 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /src/utils/clickoutside.js: -------------------------------------------------------------------------------- 1 | import { on } from 'src/utils/dom'; 2 | // import {resolveDirective, withDirectives} from 'vue' 3 | const nodeList = []; 4 | const ctx = '@@clickoutsideContext'; 5 | 6 | let startClick; 7 | let seed = 0; 8 | const isServer = false 9 | 10 | !isServer && on(document, 'mousedown', e => { 11 | return (startClick = e) 12 | }); 13 | 14 | !isServer && on(document, 'mouseup', e => { 15 | nodeList.forEach(node => { 16 | node[ctx].documentHandler(e, startClick) 17 | }); 18 | }); 19 | 20 | function createDocumentHandler(el, binding, vnode) { 21 | return function(mouseup = {}, mousedown = {}) { 22 | const instance = binding.instance 23 | const popperEl = instance.suggestionsComponent?.$el 24 | if (!vnode || 25 | !instance || 26 | !mouseup.target || 27 | !mousedown.target || 28 | el.contains(mouseup.target) || 29 | el.contains(mousedown.target) || 30 | el === mouseup.target || 31 | (popperEl && 32 | (popperEl.contains(mouseup.target) || 33 | popperEl.contains(mousedown.target)))) return; 34 | 35 | if (binding.value && 36 | el[ctx].methodName && 37 | instance[el[ctx].methodName]) { 38 | instance[el[ctx].methodName](); 39 | } else { 40 | el[ctx].bindingFn && el[ctx].bindingFn(); 41 | } 42 | }; 43 | } 44 | 45 | /** 46 | * v-clickoutside 47 | * @desc 点击元素外面才会触发的事件 48 | * @example 49 | * ```vue 50 | *
51 | * ``` 52 | */ 53 | export default { 54 | beforeMount(el, binding, vnode) { 55 | // console.log(binding) 56 | nodeList.push(el); 57 | const id = seed++; 58 | el[ctx] = { 59 | id, 60 | documentHandler: createDocumentHandler(el, binding, vnode), 61 | methodName: binding.value.name, 62 | bindingFn: binding.value 63 | }; 64 | console.log('v-clickout:', el[ctx]) 65 | }, 66 | 67 | updated(el, binding, vnode) { 68 | el[ctx].documentHandler = createDocumentHandler(el, binding, vnode); 69 | el[ctx].methodName = binding.value.name; 70 | el[ctx].bindingFn = binding.value; 71 | }, 72 | 73 | unmounted(el) { 74 | let len = nodeList.length; 75 | 76 | for (let i = 0; i < len; i++) { 77 | if (nodeList[i][ctx].id === el[ctx].id) { 78 | nodeList.splice(i, 1); 79 | break; 80 | } 81 | } 82 | delete el[ctx]; 83 | } 84 | }; 85 | -------------------------------------------------------------------------------- /src/theme-chalk/src/mixins/_button.scss: -------------------------------------------------------------------------------- 1 | @import "../common/var"; 2 | @mixin button-plain($color) { 3 | color: $color; 4 | background: mix($--color-white, $color, 90%); 5 | border-color: mix($--color-white, $color, 60%); 6 | 7 | &:hover, 8 | &:focus { 9 | background: $color; 10 | border-color: $color; 11 | color: $--color-white; 12 | } 13 | 14 | &:active { 15 | background: mix($--color-black, $color, $--button-active-shade-percent); 16 | border-color: mix($--color-black, $color, $--button-active-shade-percent); 17 | color: $--color-white; 18 | outline: none; 19 | } 20 | 21 | &.is-disabled { 22 | &, 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | color: mix($--color-white, $color, 40%); 27 | background-color: mix($--color-white, $color, 90%); 28 | border-color: mix($--color-white, $color, 80%); 29 | } 30 | } 31 | } 32 | 33 | @mixin button-variant($color, $background-color, $border-color) { 34 | color: $color; 35 | background-color: $background-color; 36 | border-color: $border-color; 37 | 38 | &:hover, 39 | &:focus { 40 | background: mix($--color-white, $background-color, $--button-hover-tint-percent); 41 | border-color: mix($--color-white, $border-color, $--button-hover-tint-percent); 42 | color: $color; 43 | } 44 | 45 | &:active { 46 | background: mix($--color-black, $background-color, $--button-active-shade-percent); 47 | border-color: mix($--color-black, $border-color, $--button-active-shade-percent); 48 | color: $color; 49 | outline: none; 50 | } 51 | 52 | &.is-active { 53 | background: mix($--color-black, $background-color, $--button-active-shade-percent); 54 | border-color: mix($--color-black, $border-color, $--button-active-shade-percent); 55 | color: $color; 56 | } 57 | 58 | &.is-disabled { 59 | &, 60 | &:hover, 61 | &:focus, 62 | &:active { 63 | color: $--color-white; 64 | background-color: mix($background-color, $--color-white); 65 | border-color: mix($border-color, $--color-white); 66 | } 67 | } 68 | 69 | &.is-plain { 70 | @include button-plain($background-color); 71 | } 72 | } 73 | 74 | @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) { 75 | padding: $padding-vertical $padding-horizontal; 76 | font-size: $font-size; 77 | border-radius: $border-radius; 78 | &.is-round { 79 | padding: $padding-vertical $padding-horizontal; 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /src/theme-chalk/src/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base.scss"; 2 | @import "./pagination.scss"; 3 | @import "./dialog.scss"; 4 | @import "./autocomplete.scss"; 5 | @import "./dropdown.scss"; 6 | @import "./dropdown-menu.scss"; 7 | @import "./dropdown-item.scss"; 8 | @import "./menu.scss"; 9 | @import "./submenu.scss"; 10 | @import "./menu-item.scss"; 11 | @import "./menu-item-group.scss"; 12 | @import "./input.scss"; 13 | @import "./input-number.scss"; 14 | @import "./radio.scss"; 15 | @import "./radio-group.scss"; 16 | @import "./radio-button.scss"; 17 | @import "./checkbox.scss"; 18 | @import "./checkbox-button.scss"; 19 | @import "./checkbox-group.scss"; 20 | @import "./switch.scss"; 21 | @import "./select.scss"; 22 | @import "./button.scss"; 23 | @import "./button-group.scss"; 24 | @import "./table.scss"; 25 | @import "./table-column.scss"; 26 | @import "./date-picker.scss"; 27 | @import "./time-select.scss"; 28 | @import "./time-picker.scss"; 29 | @import "./popover.scss"; 30 | @import "./tooltip.scss"; 31 | @import "./message-box.scss"; 32 | @import "./breadcrumb.scss"; 33 | @import "./breadcrumb-item.scss"; 34 | @import "./form.scss"; 35 | @import "./form-item.scss"; 36 | @import "./tabs.scss"; 37 | @import "./tab-pane.scss"; 38 | @import "./tag.scss"; 39 | @import "./tree.scss"; 40 | @import "./alert.scss"; 41 | @import "./notification.scss"; 42 | @import "./slider.scss"; 43 | @import "./loading.scss"; 44 | @import "./row.scss"; 45 | @import "./col.scss"; 46 | @import "./upload.scss"; 47 | @import "./progress.scss"; 48 | @import "./spinner.scss"; 49 | @import "./message.scss"; 50 | @import "./badge.scss"; 51 | @import "./card.scss"; 52 | @import "./rate.scss"; 53 | @import "./steps.scss"; 54 | @import "./step.scss"; 55 | @import "./carousel.scss"; 56 | @import "./scrollbar.scss"; 57 | @import "./carousel-item.scss"; 58 | @import "./collapse.scss"; 59 | @import "./collapse-item.scss"; 60 | @import "./cascader.scss"; 61 | @import "./color-picker.scss"; 62 | @import "./transfer.scss"; 63 | @import "./container.scss"; 64 | @import "./header.scss"; 65 | @import "./aside.scss"; 66 | @import "./main.scss"; 67 | @import "./footer.scss"; 68 | @import "./timeline.scss"; 69 | @import "./timeline-item.scss"; 70 | @import "./link.scss"; 71 | @import "./divider.scss"; 72 | @import "./image.scss"; 73 | @import "./calendar.scss"; 74 | @import "./backtop.scss"; 75 | @import "./infinite-scroll.scss"; 76 | @import "./page-header.scss"; 77 | @import "./cascader-panel.scss"; 78 | @import "./avatar.scss"; 79 | @import "./drawer.scss"; 80 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.dev.js", 5 | "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.prd.js", 6 | "test:jest": "jest --config test/jest.config.js", 7 | "org_dev": "webpack-dev-server --env.prod" 8 | }, 9 | "dependencies": { 10 | "@popperjs/core": "^2.4.3", 11 | "async-validator": "^3.3.0", 12 | "core-js": "^3.6.5", 13 | "deepmerge": "^4.2.2", 14 | "lodash": "^4.17.15", 15 | "resize-observer-polyfill": "^1.5.1", 16 | "vue": "^3.0.0-rc.5", 17 | "vue-router": "^4.0.0-beta.2", 18 | "vuex": "^4.0.0-beta.4" 19 | }, 20 | "devDependencies": { 21 | "@ant-design-vue/babel-helper-vue-transform-on": "^1.0.1", 22 | "@ant-design-vue/babel-plugin-jsx": "^1.0.0-rc.1", 23 | "@babel/core": "^7.10.2", 24 | "@babel/preset-env": "^7.11.0", 25 | "@babel/preset-react": "^7.10.1", 26 | "@babel/preset-typescript": "^7.10.1", 27 | "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0", 28 | "@vue/babel-preset-app": "^4.4.4", 29 | "@vue/compiler-sfc": "^3.0.0-rc.5", 30 | "@vue/test-utils": "^2.0.0-beta.2", 31 | "babel-eslint": "^10.1.0", 32 | "babel-jest": "26.2.2", 33 | "babel-loader": "^8.1.0", 34 | "case-sensitive-paths-webpack-plugin": "^2.3.0", 35 | "chai": "^4.2.0", 36 | "clean-webpack-plugin": "^3.0.0", 37 | "copy-webpack-plugin": "^5.1.1", 38 | "cross-env": "^7.0.2", 39 | "css-loader": "^3.4.2", 40 | "eslint": "^7.3.1", 41 | "eslint-loader": "^4.0.2", 42 | "eslint-plugin-vue": "^7.0.0-beta.1", 43 | "file-loader": "^6.0.0", 44 | "fork-ts-checker-webpack-plugin": "^4.1.3", 45 | "friendly-errors-webpack-plugin": "^1.7.0", 46 | "html-webpack-plugin": "^4.2.1", 47 | "jest": "^26.2.2", 48 | "jest-transform-stub": "^2.0.0", 49 | "jsdom": "^16.3.0", 50 | "mini-css-extract-plugin": "^0.9.0", 51 | "mocha": "^8.0.1", 52 | "sass": "^1.26.5", 53 | "sass-loader": "^8.0.2", 54 | "terser-webpack-plugin": "^3.0.1", 55 | "ts-loader": "^7.0.4", 56 | "typescript": "~3.7.5", 57 | "url-loader": "^4.0.0", 58 | "vue-jest": "^5.0.0-alpha.2", 59 | "vue-loader": "^16.0.0-beta.4", 60 | "vue-style-loader": "^4.1.2", 61 | "webpack": "^4.43.0", 62 | "webpack-bundle-analyzer": "^3.8.0", 63 | "webpack-cli": "^3.3.11", 64 | "webpack-dev-server": "^3.10.3", 65 | "webpack-merge": "^4.2.2" 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/theme-chalk/src/notification.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(notification) { 5 | display: flex; 6 | width: $--notification-width; 7 | padding: $--notification-padding; 8 | border-radius: $--notification-radius; 9 | box-sizing: border-box; 10 | border: 1px solid $--notification-border-color; 11 | position: fixed; 12 | background-color: $--color-white; 13 | box-shadow: $--notification-shadow; 14 | transition: opacity .3s, transform .3s, left .3s, right .3s, top 0.4s, bottom .3s; 15 | overflow: hidden; 16 | 17 | &.right { 18 | right: 16px; 19 | } 20 | 21 | &.left { 22 | left: 16px; 23 | } 24 | 25 | @include e(group) { 26 | margin-left: $--notification-group-margin-left; 27 | margin-right: $--notification-group-margin-right; 28 | } 29 | 30 | @include e(title) { 31 | font-weight: bold; 32 | font-size: $--notification-title-font-size; 33 | color: $--notification-title-color; 34 | margin: 0; 35 | } 36 | 37 | @include e(content) { 38 | font-size: $--notification-content-font-size; 39 | line-height: 21px; 40 | margin: 6px 0 0 0; 41 | color: $--notification-content-color; 42 | text-align: justify; 43 | 44 | p { 45 | margin: 0; 46 | } 47 | } 48 | 49 | @include e(icon) { 50 | height: $--notification-icon-size; 51 | width: $--notification-icon-size; 52 | font-size: $--notification-icon-size; 53 | } 54 | 55 | @include e(closeBtn) { 56 | position: absolute; 57 | top: 18px; 58 | right: 15px; 59 | cursor: pointer; 60 | color: $--notification-close-color; 61 | font-size: $--notification-close-font-size; 62 | 63 | &:hover { 64 | color: $--notification-close-hover-color; 65 | } 66 | } 67 | 68 | .el-icon-success { 69 | color: $--notification-success-icon-color; 70 | } 71 | 72 | .el-icon-error { 73 | color: $--notification-danger-icon-color; 74 | } 75 | 76 | .el-icon-info { 77 | color: $--notification-info-icon-color; 78 | } 79 | 80 | .el-icon-warning { 81 | color: $--notification-warning-icon-color; 82 | } 83 | } 84 | 85 | .el-notification-fade-enter { 86 | &.right { 87 | right: 0; 88 | transform: translateX(100%); 89 | } 90 | 91 | &.left { 92 | left: 0; 93 | transform: translateX(-100%); 94 | } 95 | } 96 | 97 | .el-notification-fade-leave-active { 98 | opacity: 0; 99 | } 100 | -------------------------------------------------------------------------------- /example/views/Layout.vue: -------------------------------------------------------------------------------- 1 | 64 | 92 | -------------------------------------------------------------------------------- /src/theme-chalk/src/date-picker/time-spinner.scss: -------------------------------------------------------------------------------- 1 | @import "../common/var"; 2 | 3 | @include b(time-spinner) { 4 | &.has-seconds { 5 | .el-time-spinner__wrapper { 6 | width: 33.3%; 7 | } 8 | } 9 | 10 | @include e(wrapper) { 11 | max-height: 190px; 12 | overflow: auto; 13 | display: inline-block; 14 | width: 50%; 15 | vertical-align: top; 16 | position: relative; 17 | 18 | & .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) { 19 | padding-bottom: 15px; 20 | } 21 | 22 | @include when(arrow) { 23 | box-sizing: border-box; 24 | text-align: center; 25 | overflow: hidden; 26 | 27 | .el-time-spinner__list { 28 | transform: translateY(-32px); 29 | } 30 | 31 | .el-time-spinner__item:hover:not(.disabled):not(.active) { 32 | background: $--color-white; 33 | cursor: default; 34 | } 35 | } 36 | } 37 | 38 | @include e(arrow) { 39 | font-size: 12px; 40 | color: $--color-text-secondary; 41 | position: absolute; 42 | left: 0; 43 | width: 100%; 44 | z-index: $--index-normal; 45 | text-align: center; 46 | height: 30px; 47 | line-height: 30px; 48 | cursor: pointer; 49 | 50 | &:hover { 51 | color: $--color-primary; 52 | } 53 | 54 | &.el-icon-arrow-up { 55 | top: 10px; 56 | } 57 | 58 | &.el-icon-arrow-down { 59 | bottom: 10px; 60 | } 61 | } 62 | 63 | @include e(input) { 64 | &.el-input { 65 | width: 70%; 66 | 67 | .el-input__inner { 68 | padding: 0; 69 | text-align: center; 70 | } 71 | } 72 | } 73 | 74 | @include e(list) { 75 | padding: 0; 76 | margin: 0; 77 | list-style: none; 78 | text-align: center; 79 | 80 | &::after, 81 | &::before { 82 | content: ''; 83 | display: block; 84 | width: 100%; 85 | height: 80px; 86 | } 87 | } 88 | 89 | @include e(item) { 90 | height: 32px; 91 | line-height: 32px; 92 | font-size: 12px; 93 | color: $--color-text-regular; 94 | 95 | &:hover:not(.disabled):not(.active) { 96 | background: $--background-color-base; 97 | cursor: pointer; 98 | } 99 | 100 | &.active:not(.disabled) { 101 | color: $--color-text-primary; 102 | font-weight: bold; 103 | } 104 | 105 | &.disabled { 106 | color: $--color-text-placeholder; 107 | cursor: not-allowed; 108 | } 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /example/views/Container.vue: -------------------------------------------------------------------------------- 1 | 59 | 60 | 67 | 68 | 103 | -------------------------------------------------------------------------------- /src/theme-chalk/src/cascader-panel.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | @import "./checkbox"; 4 | @import "./radio"; 5 | @import "./scrollbar"; 6 | 7 | @include b(cascader-panel) { 8 | display: flex; 9 | border-radius: $--cascader-menu-radius; 10 | font-size: $--cascader-menu-font-size; 11 | 12 | @include when(bordered) { 13 | border: $--cascader-menu-border; 14 | border-radius: $--cascader-menu-radius; 15 | } 16 | } 17 | 18 | @include b(cascader-menu) { 19 | min-width: 180px; 20 | box-sizing: border-box; 21 | color: $--cascader-menu-font-color; 22 | border-right: $--cascader-menu-border; 23 | 24 | &:last-child { 25 | border-right: none; 26 | .el-cascader-node { 27 | padding-right: 20px; 28 | } 29 | } 30 | 31 | @include e(wrap) { 32 | height: 204px; 33 | } 34 | 35 | @include e(list) { 36 | position: relative; 37 | min-height: 100%; 38 | margin: 0; 39 | padding: 6px 0; 40 | list-style: none; 41 | box-sizing: border-box; 42 | } 43 | 44 | @include e(hover-zone) { 45 | position: absolute; 46 | top: 0; 47 | left: 0; 48 | width: 100%; 49 | height: 100%; 50 | pointer-events: none; 51 | } 52 | 53 | @include e(empty-text) { 54 | position: absolute; 55 | top: 50%; 56 | left: 50%; 57 | transform: translate(-50%, -50%); 58 | text-align: center; 59 | color: $--cascader-color-empty; 60 | } 61 | } 62 | 63 | @include b(cascader-node) { 64 | position: relative; 65 | display: flex; 66 | align-items: center; 67 | padding: 0 30px 0 20px; 68 | height: 34px; 69 | line-height: 34px; 70 | outline: none; 71 | 72 | &.is-selectable.in-active-path { 73 | color: $--cascader-menu-font-color; 74 | } 75 | 76 | &.in-active-path, 77 | &.is-selectable.in-checked-path, 78 | &.is-active { 79 | color: $--cascader-menu-selected-font-color; 80 | font-weight: bold; 81 | } 82 | 83 | &:not(.is-disabled) { 84 | cursor: pointer; 85 | &:hover, &:focus { 86 | background: $--cascader-node-background-hover; 87 | } 88 | } 89 | 90 | @include when(disabled) { 91 | color: $--cascader-node-color-disabled; 92 | cursor: not-allowed; 93 | } 94 | 95 | @include e(prefix) { 96 | position: absolute; 97 | left: 10px; 98 | } 99 | 100 | @include e(postfix) { 101 | position: absolute; 102 | right: 10px; 103 | } 104 | 105 | @include e(label) { 106 | flex: 1; 107 | padding: 0 10px; 108 | white-space: nowrap; 109 | overflow: hidden; 110 | text-overflow: ellipsis; 111 | } 112 | 113 | > .el-checkbox { 114 | margin-right: 0; 115 | } 116 | 117 | > .el-radio { 118 | margin-right: 0; 119 | 120 | .el-radio__label { 121 | padding-left: 0; 122 | } 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /src/theme-chalk/src/popper.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(popper) { 5 | .popper__arrow, 6 | .popper__arrow::after { 7 | position: absolute; 8 | display: block; 9 | width: 0; 10 | height: 0; 11 | border-color: transparent; 12 | border-style: solid; 13 | } 14 | 15 | .popper__arrow { 16 | border-width: $--popover-arrow-size; 17 | filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)) 18 | } 19 | 20 | .popper__arrow::after { 21 | content: " "; 22 | border-width: $--popover-arrow-size; 23 | } 24 | 25 | &[x-placement^="top"] { 26 | margin-bottom: #{$--popover-arrow-size + 6}; 27 | } 28 | 29 | &[x-placement^="top"] .popper__arrow { 30 | bottom: -$--popover-arrow-size; 31 | left: 50%; 32 | margin-right: #{$--tooltip-arrow-size / 2}; 33 | border-top-color: $--popover-border-color; 34 | border-bottom-width: 0; 35 | 36 | &::after { 37 | bottom: 1px; 38 | margin-left: -$--popover-arrow-size; 39 | border-top-color: $--popover-background-color; 40 | border-bottom-width: 0; 41 | } 42 | } 43 | 44 | &[x-placement^="bottom"] { 45 | margin-top: #{$--popover-arrow-size + 6}; 46 | } 47 | 48 | &[x-placement^="bottom"] .popper__arrow { 49 | top: -$--popover-arrow-size; 50 | left: 50%; 51 | margin-right: #{$--tooltip-arrow-size / 2}; 52 | border-top-width: 0; 53 | border-bottom-color: $--popover-border-color; 54 | 55 | &::after { 56 | top: 1px; 57 | margin-left: -$--popover-arrow-size; 58 | border-top-width: 0; 59 | border-bottom-color: $--popover-background-color; 60 | } 61 | } 62 | 63 | &[x-placement^="right"] { 64 | margin-left: #{$--popover-arrow-size + 6}; 65 | } 66 | 67 | &[x-placement^="right"] .popper__arrow { 68 | top: 50%; 69 | left: -$--popover-arrow-size; 70 | margin-bottom: #{$--tooltip-arrow-size / 2}; 71 | border-right-color: $--popover-border-color; 72 | border-left-width: 0; 73 | 74 | &::after { 75 | bottom: -$--popover-arrow-size; 76 | left: 1px; 77 | border-right-color: $--popover-background-color; 78 | border-left-width: 0; 79 | } 80 | } 81 | 82 | &[x-placement^="left"] { 83 | margin-right: #{$--popover-arrow-size + 6}; 84 | } 85 | 86 | &[x-placement^="left"] .popper__arrow { 87 | top: 50%; 88 | right: -$--popover-arrow-size; 89 | margin-bottom: #{$--tooltip-arrow-size / 2}; 90 | border-right-width: 0; 91 | border-left-color: $--popover-border-color; 92 | 93 | &::after { 94 | right: 1px; 95 | bottom: -$--popover-arrow-size; 96 | margin-left: -$--popover-arrow-size; 97 | border-right-width: 0; 98 | border-left-color: $--popover-background-color; 99 | } 100 | } 101 | } -------------------------------------------------------------------------------- /src/theme-chalk/src/dialog.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "mixins/utils"; 3 | @import "common/var"; 4 | @import "common/popup"; 5 | 6 | @include b(dialog) { 7 | position: relative; 8 | margin: 0 auto 50px; 9 | background: $--dialog-background-color; 10 | border-radius: $--border-radius-small; 11 | box-shadow: $--dialog-box-shadow; 12 | box-sizing: border-box; 13 | width: 50%; 14 | 15 | @include when(fullscreen) { 16 | width: 100%; 17 | margin-top: 0; 18 | margin-bottom: 0; 19 | height: 100%; 20 | overflow: auto; 21 | } 22 | 23 | @include e(wrapper) { 24 | position: fixed; 25 | top: 0; 26 | right: 0; 27 | bottom: 0; 28 | left: 0; 29 | overflow: auto; 30 | margin: 0; 31 | } 32 | 33 | @include e(header) { 34 | padding: $--dialog-padding-primary; 35 | padding-bottom: 10px; 36 | } 37 | 38 | @include e(headerbtn) { 39 | position: absolute; 40 | top: $--dialog-padding-primary; 41 | right: $--dialog-padding-primary; 42 | padding: 0; 43 | background: transparent; 44 | border: none; 45 | outline: none; 46 | cursor: pointer; 47 | font-size: $--message-close-size; 48 | 49 | .el-dialog__close { 50 | color: $--color-info; 51 | } 52 | 53 | &:focus, &:hover { 54 | .el-dialog__close { 55 | color: $--color-primary; 56 | } 57 | } 58 | } 59 | 60 | @include e(title) { 61 | line-height: $--dialog-font-line-height; 62 | font-size: $--dialog-title-font-size; 63 | color: $--color-text-primary; 64 | } 65 | 66 | @include e(body) { 67 | padding: 30px 20px; 68 | color: $--color-text-regular; 69 | font-size: $--dialog-content-font-size; 70 | word-break: break-all; 71 | } 72 | 73 | @include e(footer) { 74 | padding: $--dialog-padding-primary; 75 | padding-top: 10px; 76 | text-align: right; 77 | box-sizing: border-box; 78 | } 79 | 80 | // 内容居中布局 81 | @include m(center) { 82 | text-align: center; 83 | 84 | @include e(body) { 85 | text-align: initial; 86 | padding: 25px ($--dialog-padding-primary + 5px) 30px; 87 | } 88 | 89 | @include e(footer) { 90 | text-align: inherit; 91 | } 92 | } 93 | } 94 | 95 | .dialog-fade-enter-active { 96 | animation: dialog-fade-in .3s; 97 | } 98 | 99 | .dialog-fade-leave-active { 100 | animation: dialog-fade-out .3s; 101 | } 102 | 103 | @keyframes dialog-fade-in { 104 | 0% { 105 | transform: translate3d(0, -20px, 0); 106 | opacity: 0; 107 | } 108 | 100% { 109 | transform: translate3d(0, 0, 0); 110 | opacity: 1; 111 | } 112 | } 113 | 114 | @keyframes dialog-fade-out { 115 | 0% { 116 | transform: translate3d(0, 0, 0); 117 | opacity: 1; 118 | } 119 | 100% { 120 | transform: translate3d(0, -20px, 0); 121 | opacity: 0; 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /src/locale/lang/zh-CN.js: -------------------------------------------------------------------------------- 1 | export default { 2 | el: { 3 | colorpicker: { 4 | confirm: '确定', 5 | clear: '清空' 6 | }, 7 | datepicker: { 8 | now: '此刻', 9 | today: '今天', 10 | cancel: '取消', 11 | clear: '清空', 12 | confirm: '确定', 13 | selectDate: '选择日期', 14 | selectTime: '选择时间', 15 | startDate: '开始日期', 16 | startTime: '开始时间', 17 | endDate: '结束日期', 18 | endTime: '结束时间', 19 | prevYear: '前一年', 20 | nextYear: '后一年', 21 | prevMonth: '上个月', 22 | nextMonth: '下个月', 23 | year: '年', 24 | month1: '1 月', 25 | month2: '2 月', 26 | month3: '3 月', 27 | month4: '4 月', 28 | month5: '5 月', 29 | month6: '6 月', 30 | month7: '7 月', 31 | month8: '8 月', 32 | month9: '9 月', 33 | month10: '10 月', 34 | month11: '11 月', 35 | month12: '12 月', 36 | // week: '周次', 37 | weeks: { 38 | sun: '日', 39 | mon: '一', 40 | tue: '二', 41 | wed: '三', 42 | thu: '四', 43 | fri: '五', 44 | sat: '六' 45 | }, 46 | months: { 47 | jan: '一月', 48 | feb: '二月', 49 | mar: '三月', 50 | apr: '四月', 51 | may: '五月', 52 | jun: '六月', 53 | jul: '七月', 54 | aug: '八月', 55 | sep: '九月', 56 | oct: '十月', 57 | nov: '十一月', 58 | dec: '十二月' 59 | } 60 | }, 61 | select: { 62 | loading: '加载中', 63 | noMatch: '无匹配数据', 64 | noData: '无数据', 65 | placeholder: '请选择' 66 | }, 67 | cascader: { 68 | noMatch: '无匹配数据', 69 | loading: '加载中', 70 | placeholder: '请选择', 71 | noData: '暂无数据' 72 | }, 73 | pagination: { 74 | goto: '前往', 75 | pagesize: '条/页', 76 | total: '共 {total} 条', 77 | pageClassifier: '页' 78 | }, 79 | messagebox: { 80 | title: '提示', 81 | confirm: '确定', 82 | cancel: '取消', 83 | error: '输入的数据不合法!' 84 | }, 85 | upload: { 86 | deleteTip: '按 delete 键可删除', 87 | delete: '删除', 88 | preview: '查看图片', 89 | continue: '继续上传' 90 | }, 91 | table: { 92 | emptyText: '暂无数据', 93 | confirmFilter: '筛选', 94 | resetFilter: '重置', 95 | clearFilter: '全部', 96 | sumText: '合计' 97 | }, 98 | tree: { 99 | emptyText: '暂无数据' 100 | }, 101 | transfer: { 102 | noMatch: '无匹配数据', 103 | noData: '无数据', 104 | titles: ['列表 1', '列表 2'], 105 | filterPlaceholder: '请输入搜索内容', 106 | noCheckedFormat: '共 {total} 项', 107 | hasCheckedFormat: '已选 {checked}/{total} 项' 108 | }, 109 | image: { 110 | error: '加载失败' 111 | }, 112 | pageHeader: { 113 | title: '返回' 114 | }, 115 | popconfirm: { 116 | confirmButtonText: '确定', 117 | cancelButtonText: '取消' 118 | } 119 | } 120 | }; 121 | -------------------------------------------------------------------------------- /src/theme-chalk/src/switch.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(switch) { 5 | display: inline-flex; 6 | align-items: center; 7 | position: relative; 8 | font-size: $--switch-font-size; 9 | line-height: $--switch-height; 10 | height: $--switch-height; 11 | vertical-align: middle; 12 | @include when(disabled) { 13 | & .el-switch__core, 14 | & .el-switch__label { 15 | cursor: not-allowed; 16 | } 17 | } 18 | 19 | @include e(label) { 20 | transition: .2s; 21 | height: $--switch-height; 22 | display: inline-block; 23 | font-size: $--switch-font-size; 24 | font-weight: 500; 25 | cursor: pointer; 26 | vertical-align: middle; 27 | color: $--color-text-primary; 28 | 29 | @include when(active) { 30 | color: $--color-primary; 31 | } 32 | 33 | @include m(left) { 34 | margin-right: 10px; 35 | } 36 | @include m(right) { 37 | margin-left: 10px; 38 | } 39 | & * { 40 | line-height: 1; 41 | font-size: $--switch-font-size; 42 | display: inline-block; 43 | } 44 | } 45 | 46 | @include e(input) { 47 | position: absolute; 48 | width: 0; 49 | height: 0; 50 | opacity: 0; 51 | margin: 0; 52 | } 53 | 54 | @include e(core) { 55 | margin: 0; 56 | display: inline-block; 57 | position: relative; 58 | width: $--switch-width; 59 | height: $--switch-height; 60 | border: 1px solid $--switch-off-color; 61 | outline: none; 62 | border-radius: $--switch-core-border-radius; 63 | box-sizing: border-box; 64 | background: $--switch-off-color; 65 | cursor: pointer; 66 | transition: border-color .3s, background-color .3s; 67 | vertical-align: middle; 68 | 69 | &:after { 70 | content: ""; 71 | position: absolute; 72 | top: 1px; 73 | left: 1px; 74 | border-radius: $--border-radius-circle; 75 | transition: all .3s; 76 | width: $--switch-button-size; 77 | height: $--switch-button-size; 78 | background-color: $--color-white; 79 | } 80 | } 81 | 82 | @include when(checked) { 83 | .el-switch__core { 84 | border-color: $--switch-on-color; 85 | background-color: $--switch-on-color; 86 | &::after { 87 | left: 100%; 88 | margin-left: -$--switch-button-size - 1px; 89 | } 90 | } 91 | } 92 | 93 | @include when(disabled) { 94 | opacity: 0.6; 95 | } 96 | 97 | @include m(wide) { 98 | .el-switch__label { 99 | &.el-switch__label--left { 100 | span { 101 | left: 10px; 102 | } 103 | } 104 | &.el-switch__label--right { 105 | span { 106 | right: 10px; 107 | } 108 | } 109 | } 110 | } 111 | 112 | & .label-fade-enter, 113 | & .label-fade-leave-active { 114 | opacity: 0; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /packages/button/src/button.vue: -------------------------------------------------------------------------------- 1 | 31 | 115 | -------------------------------------------------------------------------------- /src/theme-chalk/src/date-picker/picker-panel.scss: -------------------------------------------------------------------------------- 1 | @import "../common/var"; 2 | 3 | @include b(picker-panel) { 4 | color: $--color-text-regular; 5 | border: 1px solid $--datepicker-border-color; 6 | box-shadow: $--box-shadow-light; 7 | background: $--color-white; 8 | border-radius: $--border-radius-base; 9 | line-height: 30px; 10 | margin: 5px 0; 11 | 12 | @include e((body, body-wrapper)) { 13 | &::after { 14 | content: ""; 15 | display: table; 16 | clear: both; 17 | } 18 | } 19 | 20 | @include e(content) { 21 | position: relative; 22 | margin: 15px; 23 | } 24 | 25 | @include e(footer) { 26 | border-top: 1px solid $--datepicker-inner-border-color; 27 | padding: 4px; 28 | text-align: right; 29 | background-color: $--color-white; 30 | position: relative; 31 | font-size: 0; 32 | } 33 | 34 | @include e(shortcut) { 35 | display: block; 36 | width: 100%; 37 | border: 0; 38 | background-color: transparent; 39 | line-height: 28px; 40 | font-size: 14px; 41 | color: $--datepicker-font-color; 42 | padding-left: 12px; 43 | text-align: left; 44 | outline: none; 45 | cursor: pointer; 46 | 47 | &:hover { 48 | color: $--datepicker-hover-font-color; 49 | } 50 | 51 | &.active { 52 | background-color: #e6f1fe; 53 | color: $--datepicker-active-color; 54 | } 55 | } 56 | 57 | @include e(btn) { 58 | border: 1px solid #dcdcdc; 59 | color: #333; 60 | line-height: 24px; 61 | border-radius: 2px; 62 | padding: 0 20px; 63 | cursor: pointer; 64 | background-color: transparent; 65 | outline: none; 66 | font-size: 12px; 67 | 68 | &[disabled] { 69 | color: #cccccc; 70 | cursor: not-allowed; 71 | } 72 | } 73 | 74 | @include e(icon-btn) { 75 | font-size: 12px; 76 | color: $--datepicker-icon-color; 77 | border: 0; 78 | background: transparent; 79 | cursor: pointer; 80 | outline: none; 81 | margin-top: 8px; 82 | 83 | &:hover { 84 | color: $--datepicker-hover-font-color; 85 | } 86 | 87 | @include when(disabled) { 88 | color: $--font-color-disabled-base; 89 | 90 | &:hover { 91 | cursor: not-allowed; 92 | } 93 | } 94 | } 95 | 96 | @include e(link-btn) { 97 | vertical-align: middle; 98 | } 99 | } 100 | 101 | .el-picker-panel *[slot=sidebar], 102 | .el-picker-panel__sidebar { 103 | position: absolute; 104 | top: 0; 105 | bottom: 0; 106 | width: 110px; 107 | border-right: 1px solid $--datepicker-inner-border-color; 108 | box-sizing: border-box; 109 | padding-top: 6px; 110 | background-color: $--color-white; 111 | overflow: auto; 112 | } 113 | 114 | .el-picker-panel *[slot=sidebar] + .el-picker-panel__body, 115 | .el-picker-panel__sidebar + .el-picker-panel__body { 116 | margin-left: 110px; 117 | } 118 | -------------------------------------------------------------------------------- /src/theme-chalk/src/message.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(message) { 5 | min-width: $--message-min-width; 6 | box-sizing: border-box; 7 | border-radius: $--border-radius-base; 8 | border-width: $--border-width-base; 9 | border-style: $--border-style-base; 10 | border-color: $--border-color-lighter; 11 | position: fixed; 12 | left: 50%; 13 | top: 20px; 14 | transform: translateX(-50%); 15 | background-color: $--message-background-color; 16 | transition: opacity 0.3s, transform .4s, top 0.4s; 17 | overflow: hidden; 18 | padding: $--message-padding; 19 | display: flex; 20 | align-items: center; 21 | 22 | @include when(center) { 23 | justify-content: center; 24 | } 25 | 26 | @include when(closable) { 27 | .el-message__content { 28 | padding-right: 16px; 29 | } 30 | } 31 | 32 | p { 33 | margin: 0; 34 | } 35 | 36 | @include m(info) { 37 | .el-message__content { 38 | color: $--message-info-font-color; 39 | } 40 | } 41 | 42 | @include m(success) { 43 | background-color: $--color-success-lighter; 44 | border-color: $--color-success-light; 45 | 46 | .el-message__content { 47 | color: $--message-success-font-color; 48 | } 49 | } 50 | 51 | @include m(warning) { 52 | background-color: $--color-warning-lighter; 53 | border-color: $--color-warning-light; 54 | 55 | .el-message__content { 56 | color: $--message-warning-font-color; 57 | } 58 | } 59 | 60 | @include m(error) { 61 | background-color: $--color-danger-lighter; 62 | border-color: $--color-danger-light; 63 | 64 | .el-message__content { 65 | color: $--message-danger-font-color; 66 | } 67 | } 68 | 69 | @include e(icon) { 70 | margin-right: 10px; 71 | } 72 | 73 | @include e(content) { 74 | padding: 0; 75 | font-size: 14px; 76 | line-height: 1; 77 | &:focus { 78 | outline-width: 0; 79 | } 80 | } 81 | 82 | @include e(closeBtn) { 83 | position: absolute; 84 | top: 50%; 85 | right: 15px; 86 | transform: translateY(-50%); 87 | cursor: pointer; 88 | color: $--message-close-icon-color; 89 | font-size: $--message-close-size; 90 | 91 | &:focus { 92 | outline-width: 0; 93 | } 94 | &:hover { 95 | color: $--message-close-hover-color; 96 | } 97 | } 98 | 99 | & .el-icon-success { 100 | color: $--message-success-font-color; 101 | } 102 | 103 | & .el-icon-error { 104 | color: $--message-danger-font-color; 105 | } 106 | 107 | & .el-icon-info { 108 | color: $--message-info-font-color; 109 | } 110 | 111 | & .el-icon-warning { 112 | color: $--message-warning-font-color; 113 | } 114 | } 115 | 116 | .el-message-fade-enter, 117 | .el-message-fade-leave-active { 118 | opacity: 0; 119 | transform: translate(-50%, -100%); 120 | } 121 | -------------------------------------------------------------------------------- /src/utils/aria-dialog.js: -------------------------------------------------------------------------------- 1 | import Utils from './aria-utils'; 2 | 3 | /** 4 | * @constructor 5 | * @desc Dialog object providing modal focus management. 6 | * 7 | * Assumptions: The element serving as the dialog container is present in the 8 | * DOM and hidden. The dialog container has role='dialog'. 9 | * 10 | * @param dialogId 11 | * The ID of the element serving as the dialog container. 12 | * @param focusAfterClosed 13 | * Either the DOM node or the ID of the DOM node to focus when the 14 | * dialog closes. 15 | * @param focusFirst 16 | * Optional parameter containing either the DOM node or the ID of the 17 | * DOM node to focus when the dialog opens. If not specified, the 18 | * first focusable element in the dialog will receive focus. 19 | */ 20 | var aria = aria || {}; 21 | var tabEvent; 22 | 23 | aria.Dialog = function(dialog, focusAfterClosed, focusFirst) { 24 | this.dialogNode = dialog; 25 | if (this.dialogNode === null || this.dialogNode.getAttribute('role') !== 'dialog') { 26 | throw new Error('Dialog() requires a DOM element with ARIA role of dialog.'); 27 | } 28 | 29 | if (typeof focusAfterClosed === 'string') { 30 | this.focusAfterClosed = document.getElementById(focusAfterClosed); 31 | } else if (typeof focusAfterClosed === 'object') { 32 | this.focusAfterClosed = focusAfterClosed; 33 | } else { 34 | this.focusAfterClosed = null; 35 | } 36 | 37 | if (typeof focusFirst === 'string') { 38 | this.focusFirst = document.getElementById(focusFirst); 39 | } else if (typeof focusFirst === 'object') { 40 | this.focusFirst = focusFirst; 41 | } else { 42 | this.focusFirst = null; 43 | } 44 | 45 | if (this.focusFirst) { 46 | this.focusFirst.focus(); 47 | } else { 48 | Utils.focusFirstDescendant(this.dialogNode); 49 | } 50 | 51 | this.lastFocus = document.activeElement; 52 | tabEvent = (e) => { 53 | this.trapFocus(e); 54 | }; 55 | this.addListeners(); 56 | }; 57 | 58 | aria.Dialog.prototype.addListeners = function() { 59 | document.addEventListener('focus', tabEvent, true); 60 | }; 61 | 62 | aria.Dialog.prototype.removeListeners = function() { 63 | document.removeEventListener('focus', tabEvent, true); 64 | }; 65 | 66 | aria.Dialog.prototype.closeDialog = function() { 67 | this.removeListeners(); 68 | if (this.focusAfterClosed) { 69 | setTimeout(() => { 70 | this.focusAfterClosed.focus(); 71 | }); 72 | } 73 | }; 74 | 75 | aria.Dialog.prototype.trapFocus = function(event) { 76 | if (Utils.IgnoreUtilFocusChanges) { 77 | return; 78 | } 79 | if (this.dialogNode.contains(event.target)) { 80 | this.lastFocus = event.target; 81 | } else { 82 | Utils.focusFirstDescendant(this.dialogNode); 83 | if (this.lastFocus === document.activeElement) { 84 | Utils.focusLastDescendant(this.dialogNode); 85 | } 86 | this.lastFocus = document.activeElement; 87 | } 88 | }; 89 | 90 | export default aria.Dialog; 91 | -------------------------------------------------------------------------------- /src/theme-chalk/src/tree.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | @import "common/transition"; 4 | @import "checkbox"; 5 | 6 | @include b(tree) { 7 | position: relative; 8 | cursor: default; 9 | background: $--color-white; 10 | color: $--tree-font-color; 11 | 12 | @include e(empty-block) { 13 | position: relative; 14 | min-height: 60px; 15 | text-align: center; 16 | width: 100%; 17 | height: 100%; 18 | } 19 | 20 | @include e(empty-text) { 21 | position: absolute; 22 | left: 50%; 23 | top: 50%; 24 | transform: translate(-50%, -50%); 25 | color: $--color-text-secondary; 26 | } 27 | 28 | @include e(drop-indicator) { 29 | position: absolute; 30 | left: 0; 31 | right: 0; 32 | height: 1px; 33 | background-color: $--color-primary; 34 | } 35 | } 36 | 37 | @include b(tree-node) { 38 | white-space: nowrap; 39 | outline: none; 40 | &:focus { /* focus */ 41 | > .el-tree-node__content { 42 | background-color: $--tree-node-hover-background-color; 43 | } 44 | } 45 | 46 | @include when(drop-inner) { 47 | > .el-tree-node__content .el-tree-node__label { 48 | background-color: $--color-primary; 49 | color: #fff; 50 | } 51 | } 52 | 53 | @include e(content) { 54 | display: flex; 55 | align-items: center; 56 | height: 26px; 57 | cursor: pointer; 58 | 59 | & > .el-tree-node__expand-icon { 60 | padding: 6px; 61 | } 62 | & > .el-checkbox { 63 | margin-right: 8px; 64 | } 65 | &:hover { 66 | background-color: $--tree-node-hover-background-color; 67 | } 68 | 69 | .el-tree.is-dragging & { 70 | cursor: move; 71 | 72 | & * { 73 | pointer-events: none; 74 | } 75 | } 76 | 77 | .el-tree.is-dragging.is-drop-not-allow & { 78 | cursor: not-allowed; 79 | } 80 | } 81 | 82 | @include e(expand-icon) { 83 | cursor: pointer; 84 | color: $--tree-expand-icon-color; 85 | font-size: 12px; 86 | 87 | transform: rotate(0deg); 88 | transition: transform 0.3s ease-in-out; 89 | 90 | &.expanded { 91 | transform: rotate(90deg); 92 | } 93 | 94 | &.is-leaf { 95 | color: transparent; 96 | cursor: default; 97 | } 98 | } 99 | 100 | @include e(label) { 101 | font-size: $--font-size-base; 102 | } 103 | 104 | @include e(loading-icon) { 105 | margin-right: 8px; 106 | font-size: $--font-size-base; 107 | color: $--tree-expand-icon-color; 108 | } 109 | 110 | & > .el-tree-node__children { 111 | overflow: hidden; 112 | background-color: transparent; 113 | } 114 | 115 | &.is-expanded > .el-tree-node__children { 116 | display: block; 117 | } 118 | } 119 | 120 | .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { 121 | background-color: mix($--color-white, $--color-primary, 92%); 122 | } 123 | -------------------------------------------------------------------------------- /example/views/Button.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 80 | -------------------------------------------------------------------------------- /src/locale/lang/ja.js: -------------------------------------------------------------------------------- 1 | export default { 2 | el: { 3 | colorpicker: { 4 | confirm: 'OK', 5 | clear: 'クリア' 6 | }, 7 | datepicker: { 8 | now: '現在', 9 | today: '今日', 10 | cancel: 'キャンセル', 11 | clear: 'クリア', 12 | confirm: 'OK', 13 | selectDate: '日付を選択', 14 | selectTime: '時間を選択', 15 | startDate: '開始日', 16 | startTime: '開始時間', 17 | endDate: '終了日', 18 | endTime: '終了時間', 19 | prevYear: '前年', 20 | nextYear: '翌年', 21 | prevMonth: '前月', 22 | nextMonth: '翌月', 23 | year: '年', 24 | month1: '1月', 25 | month2: '2月', 26 | month3: '3月', 27 | month4: '4月', 28 | month5: '5月', 29 | month6: '6月', 30 | month7: '7月', 31 | month8: '8月', 32 | month9: '9月', 33 | month10: '10月', 34 | month11: '11月', 35 | month12: '12月', 36 | // week: '週次', 37 | weeks: { 38 | sun: '日', 39 | mon: '月', 40 | tue: '火', 41 | wed: '水', 42 | thu: '木', 43 | fri: '金', 44 | sat: '土' 45 | }, 46 | months: { 47 | jan: '1月', 48 | feb: '2月', 49 | mar: '3月', 50 | apr: '4月', 51 | may: '5月', 52 | jun: '6月', 53 | jul: '7月', 54 | aug: '8月', 55 | sep: '9月', 56 | oct: '10月', 57 | nov: '11月', 58 | dec: '12月' 59 | } 60 | }, 61 | select: { 62 | loading: 'ロード中', 63 | noMatch: 'データなし', 64 | noData: 'データなし', 65 | placeholder: '選択してください' 66 | }, 67 | cascader: { 68 | noMatch: 'データなし', 69 | loading: 'ロード中', 70 | placeholder: '選択してください', 71 | noData: 'データなし' 72 | }, 73 | pagination: { 74 | goto: '', 75 | pagesize: '件/ページ', 76 | total: '総計 {total} 件', 77 | pageClassifier: 'ページ目へ' 78 | }, 79 | messagebox: { 80 | title: 'メッセージ', 81 | confirm: 'OK', 82 | cancel: 'キャンセル', 83 | error: '正しくない入力' 84 | }, 85 | upload: { 86 | deleteTip: 'Delキーを押して削除する', 87 | delete: '削除する', 88 | preview: 'プレビュー', 89 | continue: '続行する' 90 | }, 91 | table: { 92 | emptyText: 'データなし', 93 | confirmFilter: '確認', 94 | resetFilter: '初期化', 95 | clearFilter: 'すべて', 96 | sumText: '合計' 97 | }, 98 | tree: { 99 | emptyText: 'データなし' 100 | }, 101 | transfer: { 102 | noMatch: 'データなし', 103 | noData: 'データなし', 104 | titles: ['リスト 1', 'リスト 2'], 105 | filterPlaceholder: 'キーワードを入力', 106 | noCheckedFormat: '総計 {total} 件', 107 | hasCheckedFormat: '{checked}/{total} を選択した' 108 | }, 109 | image: { 110 | error: 'FAILED' // to be translated 111 | }, 112 | pageHeader: { 113 | title: 'Back' // to be translated 114 | }, 115 | popconfirm: { 116 | confirmButtonText: 'Yes', // to be translated 117 | cancelButtonText: 'No' // to be translated 118 | } 119 | } 120 | }; 121 | -------------------------------------------------------------------------------- /src/locale/lang/ko.js: -------------------------------------------------------------------------------- 1 | export default { 2 | el: { 3 | colorpicker: { 4 | confirm: '확인', 5 | clear: '초기화' 6 | }, 7 | datepicker: { 8 | now: '지금', 9 | today: '오늘', 10 | cancel: '취소', 11 | clear: '초기화', 12 | confirm: '확인', 13 | selectDate: '날짜 선택', 14 | selectTime: '시간 선택', 15 | startDate: '시작 날짜', 16 | startTime: '시작 시간', 17 | endDate: '종료 날짜', 18 | endTime: '종료 시간', 19 | prevYear: '지난해', 20 | nextYear: '다음해', 21 | prevMonth: '지난달', 22 | nextMonth: '다음달', 23 | year: '년', 24 | month1: '1월', 25 | month2: '2월', 26 | month3: '3월', 27 | month4: '4월', 28 | month5: '5월', 29 | month6: '6월', 30 | month7: '7월', 31 | month8: '8월', 32 | month9: '9월', 33 | month10: '10월', 34 | month11: '11월', 35 | month12: '12월', 36 | // week: 'week', 37 | weeks: { 38 | sun: '일', 39 | mon: '월', 40 | tue: '화', 41 | wed: '수', 42 | thu: '목', 43 | fri: '금', 44 | sat: '토' 45 | }, 46 | months: { 47 | jan: '1월', 48 | feb: '2월', 49 | mar: '3월', 50 | apr: '4월', 51 | may: '5월', 52 | jun: '6월', 53 | jul: '7월', 54 | aug: '8월', 55 | sep: '9월', 56 | oct: '10월', 57 | nov: '11월', 58 | dec: '12월' 59 | } 60 | }, 61 | select: { 62 | loading: '불러오는 중', 63 | noMatch: '맞는 데이터가 없습니다', 64 | noData: '데이터 없음', 65 | placeholder: '선택' 66 | }, 67 | cascader: { 68 | noMatch: '맞는 데이터가 없습니다', 69 | loading: '불러오는 중', 70 | placeholder: '선택', 71 | noData: '데이터 없음' 72 | }, 73 | pagination: { 74 | goto: '이동', 75 | pagesize: '/page', 76 | total: '총 {total}', 77 | pageClassifier: '' 78 | }, 79 | messagebox: { 80 | title: '메시지', 81 | confirm: '확인', 82 | cancel: '취소', 83 | error: '올바르지 않은 입력' 84 | }, 85 | upload: { 86 | deleteTip: '클릭시 삭제됩니다', 87 | delete: '삭제', 88 | preview: '미리보기', 89 | continue: '계속하기' 90 | }, 91 | table: { 92 | emptyText: '데이터 없음', 93 | confirmFilter: '확인', 94 | resetFilter: '초기화', 95 | clearFilter: '전체', 96 | sumText: '합' 97 | }, 98 | tree: { 99 | emptyText: '데이터 없음' 100 | }, 101 | transfer: { 102 | noMatch: '맞는 데이터가 없습니다', 103 | noData: '데이터 없음', 104 | titles: ['리스트 1', '리스트 2'], 105 | filterPlaceholder: ' 입력하세요', 106 | noCheckedFormat: '{total} 항목', 107 | hasCheckedFormat: '{checked}/{total} 선택됨' 108 | }, 109 | image: { 110 | error: 'FAILED' // to be translated 111 | }, 112 | pageHeader: { 113 | title: 'Back' // to be translated 114 | }, 115 | popconfirm: { 116 | confirmButtonText: 'Yes', // to be translated 117 | cancelButtonText: 'No' // to be translated 118 | } 119 | } 120 | }; 121 | -------------------------------------------------------------------------------- /src/locale/lang/zh-TW.js: -------------------------------------------------------------------------------- 1 | export default { 2 | el: { 3 | colorpicker: { 4 | confirm: '確認', 5 | clear: '清空' 6 | }, 7 | datepicker: { 8 | now: '現在', 9 | today: '今天', 10 | cancel: '取消', 11 | clear: '清空', 12 | confirm: '確認', 13 | selectDate: '選擇日期', 14 | selectTime: '選擇時間', 15 | startDate: '開始日期', 16 | startTime: '開始時間', 17 | endDate: '結束日期', 18 | endTime: '結束時間', 19 | prevYear: '前一年', 20 | nextYear: '後一年', 21 | prevMonth: '上個月', 22 | nextMonth: '下個月', 23 | year: '年', 24 | month1: '1 月', 25 | month2: '2 月', 26 | month3: '3 月', 27 | month4: '4 月', 28 | month5: '5 月', 29 | month6: '6 月', 30 | month7: '7 月', 31 | month8: '8 月', 32 | month9: '9 月', 33 | month10: '10 月', 34 | month11: '11 月', 35 | month12: '12 月', 36 | // week: '周次', 37 | weeks: { 38 | sun: '日', 39 | mon: '一', 40 | tue: '二', 41 | wed: '三', 42 | thu: '四', 43 | fri: '五', 44 | sat: '六' 45 | }, 46 | months: { 47 | jan: '一月', 48 | feb: '二月', 49 | mar: '三月', 50 | apr: '四月', 51 | may: '五月', 52 | jun: '六月', 53 | jul: '七月', 54 | aug: '八月', 55 | sep: '九月', 56 | oct: '十月', 57 | nov: '十一月', 58 | dec: '十二月' 59 | } 60 | }, 61 | select: { 62 | loading: '加載中', 63 | noMatch: '無匹配資料', 64 | noData: '無資料', 65 | placeholder: '請選擇' 66 | }, 67 | cascader: { 68 | noMatch: '無匹配資料', 69 | loading: '加載中', 70 | placeholder: '請選擇', 71 | noData: '無資料' 72 | }, 73 | pagination: { 74 | goto: '前往', 75 | pagesize: '項/頁', 76 | total: '共 {total} 項', 77 | pageClassifier: '頁' 78 | }, 79 | messagebox: { 80 | title: '提示', 81 | confirm: '確定', 82 | cancel: '取消', 83 | error: '輸入的資料不符規定!' 84 | }, 85 | upload: { 86 | deleteTip: '按 delete 鍵可刪除', 87 | delete: '刪除', 88 | preview: '查看圖片', 89 | continue: '繼續上傳' 90 | }, 91 | table: { 92 | emptyText: '暫無資料', 93 | confirmFilter: '篩選', 94 | resetFilter: '重置', 95 | clearFilter: '全部', 96 | sumText: 'Sum' // to be translated 97 | }, 98 | tree: { 99 | emptyText: '暫無資料' 100 | }, 101 | transfer: { 102 | noMatch: '無匹配資料', 103 | noData: '無資料', 104 | titles: ['List 1', 'List 2'], // to be translated 105 | filterPlaceholder: 'Enter keyword', // to be translated 106 | noCheckedFormat: '{total} items', // to be translated 107 | hasCheckedFormat: '{checked}/{total} checked' // to be translated 108 | }, 109 | image: { 110 | error: '加載失敗' 111 | }, 112 | pageHeader: { 113 | title: '返回' 114 | }, 115 | popconfirm: { 116 | confirmButtonText: 'Yes', // to be translated 117 | cancelButtonText: 'No' // to be translated 118 | } 119 | } 120 | }; 121 | -------------------------------------------------------------------------------- /src/theme-chalk/src/common/transition.scss: -------------------------------------------------------------------------------- 1 | @import "var"; 2 | 3 | .fade-in-linear-enter-active, 4 | .fade-in-linear-leave-active { 5 | transition: $--fade-linear-transition; 6 | } 7 | .fade-in-linear-enter-from, 8 | .fade-in-linear-leave-from, 9 | .fade-in-linear-leave-active { 10 | opacity: 0; 11 | } 12 | 13 | .el-fade-in-linear-enter-active, 14 | .el-fade-in-linear-leave-active { 15 | transition: $--fade-linear-transition; 16 | } 17 | .el-fade-in-linear-enter-from, 18 | .el-fade-in-linear-leave-from, 19 | .el-fade-in-linear-leave-active { 20 | opacity: 0; 21 | } 22 | 23 | .el-fade-in-enter-active, 24 | .el-fade-in-leave-active { 25 | transition: all .3s cubic-bezier(.55,0,.1,1); 26 | } 27 | .el-fade-in-enter-from, 28 | .el-fade-in-leave-active { 29 | opacity: 0; 30 | } 31 | 32 | .el-fade-in-top-enter-from, 33 | .el-fade-in-top-leave-to{ 34 | opacity: 0; 35 | transform: translate3d(0, -10%, 0); 36 | } 37 | .el-fade-in-top-enter-active, 38 | .el-fade-in-top-leave-active { 39 | transition: $--md-fade-transition; 40 | } 41 | .el-fade-in-top-enter-to, 42 | .el-fade-in-top-leave-from{ 43 | opacity: 1; 44 | transform: translate3d(0, 0, 0); 45 | } 46 | 47 | .el-zoom-in-center-enter-active, 48 | .el-zoom-in-center-leave-active { 49 | transition: all .3s cubic-bezier(.55,0,.1,1); 50 | } 51 | .el-zoom-in-center-enter-from, 52 | .el-zoom-in-center-leave-active { 53 | opacity: 0; 54 | transform: scaleX(0); 55 | } 56 | 57 | .el-zoom-in-top-enter-active, 58 | .el-zoom-in-top-leave-active { 59 | opacity: 1; 60 | transform: scaleY(1); 61 | transition: $--md-fade-transition; 62 | transform-origin: center top; 63 | } 64 | .el-zoom-in-top-enter-from, 65 | .el-zoom-in-top-leave-active { 66 | opacity: 0; 67 | transform: scaleY(0); 68 | } 69 | 70 | .el-zoom-in-bottom-enter-active, 71 | .el-zoom-in-bottom-leave-active { 72 | opacity: 1; 73 | transform: scaleY(1); 74 | transition: $--md-fade-transition; 75 | transform-origin: center bottom; 76 | } 77 | .el-zoom-in-bottom-enter-from, 78 | .el-zoom-in-bottom-leave-active { 79 | opacity: 0; 80 | transform: scaleY(0); 81 | } 82 | 83 | .el-zoom-in-left-enter-active, 84 | .el-zoom-in-left-leave-active { 85 | opacity: 1; 86 | transform: scale(1, 1); 87 | transition: $--md-fade-transition; 88 | transform-origin: top left; 89 | } 90 | .el-zoom-in-left-enter-from, 91 | .el-zoom-in-left-leave-active { 92 | opacity: 0; 93 | transform: scale(.45, .45); 94 | } 95 | 96 | .collapse-transition { 97 | transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; 98 | } 99 | .horizontal-collapse-transition { 100 | transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out; 101 | } 102 | 103 | .el-list-enter-active, 104 | .el-list-leave-active { 105 | transition: all 1s; 106 | } 107 | .el-list-enter-from, .el-list-leave-active { 108 | opacity: 0; 109 | transform: translateY(-30px); 110 | } 111 | 112 | .el-opacity-transition { 113 | transition: opacity .3s cubic-bezier(.55,0,.1,1); 114 | } 115 | -------------------------------------------------------------------------------- /packages/tag/src/tag.vue: -------------------------------------------------------------------------------- 1 | 101 | -------------------------------------------------------------------------------- /packages/input/src/calcTextareaHeight.js: -------------------------------------------------------------------------------- 1 | let hiddenTextarea; 2 | 3 | const HIDDEN_STYLE = ` 4 | height:0 !important; 5 | visibility:hidden !important; 6 | overflow:hidden !important; 7 | position:absolute !important; 8 | z-index:-1000 !important; 9 | top:0 !important; 10 | right:0 !important 11 | `; 12 | 13 | const CONTEXT_STYLE = [ 14 | 'letter-spacing', 15 | 'line-height', 16 | 'padding-top', 17 | 'padding-bottom', 18 | 'font-family', 19 | 'font-weight', 20 | 'font-size', 21 | 'text-rendering', 22 | 'text-transform', 23 | 'width', 24 | 'text-indent', 25 | 'padding-left', 26 | 'padding-right', 27 | 'border-width', 28 | 'box-sizing' 29 | ]; 30 | 31 | function calculateNodeStyling(targetElement) { 32 | const style = window.getComputedStyle(targetElement); 33 | 34 | const boxSizing = style.getPropertyValue('box-sizing'); 35 | 36 | const paddingSize = ( 37 | parseFloat(style.getPropertyValue('padding-bottom')) + 38 | parseFloat(style.getPropertyValue('padding-top')) 39 | ); 40 | 41 | const borderSize = ( 42 | parseFloat(style.getPropertyValue('border-bottom-width')) + 43 | parseFloat(style.getPropertyValue('border-top-width')) 44 | ); 45 | 46 | const contextStyle = CONTEXT_STYLE 47 | .map(name => `${name}:${style.getPropertyValue(name)}`) 48 | .join(';'); 49 | 50 | return { contextStyle, paddingSize, borderSize, boxSizing }; 51 | } 52 | 53 | export default function calcTextareaHeight( 54 | targetElement, 55 | minRows = 1, 56 | maxRows = null 57 | ) { 58 | if (!hiddenTextarea) { 59 | hiddenTextarea = document.createElement('textarea'); 60 | document.body.appendChild(hiddenTextarea); 61 | } 62 | 63 | let { 64 | paddingSize, 65 | borderSize, 66 | boxSizing, 67 | contextStyle 68 | } = calculateNodeStyling(targetElement); 69 | 70 | hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`); 71 | hiddenTextarea.value = targetElement.value || targetElement.placeholder || ''; 72 | 73 | let height = hiddenTextarea.scrollHeight; 74 | const result = {}; 75 | 76 | if (boxSizing === 'border-box') { 77 | height = height + borderSize; 78 | } else if (boxSizing === 'content-box') { 79 | height = height - paddingSize; 80 | } 81 | 82 | hiddenTextarea.value = ''; 83 | let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize; 84 | 85 | if (minRows !== null) { 86 | let minHeight = singleRowHeight * minRows; 87 | if (boxSizing === 'border-box') { 88 | minHeight = minHeight + paddingSize + borderSize; 89 | } 90 | height = Math.max(minHeight, height); 91 | result.minHeight = `${ minHeight }px`; 92 | } 93 | if (maxRows !== null) { 94 | let maxHeight = singleRowHeight * maxRows; 95 | if (boxSizing === 'border-box') { 96 | maxHeight = maxHeight + paddingSize + borderSize; 97 | } 98 | height = Math.min(maxHeight, height); 99 | } 100 | result.height = `${ height }px`; 101 | hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea); 102 | hiddenTextarea = null; 103 | return result; 104 | }; 105 | -------------------------------------------------------------------------------- /src/theme-chalk/src/progress.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "mixins/utils"; 3 | @import "common/var"; 4 | 5 | @include b(progress) { 6 | position: relative; 7 | line-height: 1; 8 | 9 | @include e(text) { 10 | font-size:14px; 11 | color: $--color-text-regular; 12 | display: inline-block; 13 | vertical-align: middle; 14 | margin-left: 10px; 15 | line-height: 1; 16 | 17 | i { 18 | vertical-align: middle; 19 | display: block; 20 | } 21 | } 22 | 23 | @include m((circle,dashboard)) { 24 | display: inline-block; 25 | 26 | .el-progress__text { 27 | position: absolute; 28 | top: 50%; 29 | left: 0; 30 | width: 100%; 31 | text-align: center; 32 | margin: 0; 33 | transform: translate(0, -50%); 34 | 35 | i { 36 | vertical-align: middle; 37 | display: inline-block; 38 | } 39 | } 40 | } 41 | 42 | 43 | @include m(without-text) { 44 | .el-progress__text { 45 | display: none; 46 | } 47 | 48 | .el-progress-bar { 49 | padding-right: 0; 50 | margin-right: 0; 51 | display: block; 52 | } 53 | } 54 | 55 | @include m(text-inside) { 56 | .el-progress-bar { 57 | padding-right: 0; 58 | margin-right: 0; 59 | } 60 | } 61 | 62 | @include when(success) { 63 | .el-progress-bar__inner { 64 | background-color: $--color-success; 65 | } 66 | 67 | .el-progress__text { 68 | color: $--color-success; 69 | } 70 | } 71 | 72 | @include when(warning) { 73 | .el-progress-bar__inner { 74 | background-color: $--color-warning; 75 | } 76 | 77 | .el-progress__text { 78 | color: $--color-warning; 79 | } 80 | } 81 | 82 | @include when(exception) { 83 | .el-progress-bar__inner { 84 | background-color: $--color-danger; 85 | } 86 | 87 | .el-progress__text { 88 | color: $--color-danger; 89 | } 90 | } 91 | } 92 | 93 | @include b(progress-bar) { 94 | padding-right: 50px; 95 | display: inline-block; 96 | vertical-align: middle; 97 | width: 100%; 98 | margin-right: -55px; 99 | box-sizing: border-box; 100 | 101 | @include e(outer) { 102 | height: 6px; 103 | border-radius: 100px; 104 | background-color: $--border-color-lighter; 105 | overflow: hidden; 106 | position: relative; 107 | vertical-align: middle; 108 | } 109 | @include e(inner) { 110 | position: absolute; 111 | left: 0; 112 | top: 0; 113 | height: 100%; 114 | background-color: $--color-primary; 115 | text-align: right; 116 | border-radius: 100px; 117 | line-height: 1; 118 | white-space: nowrap; 119 | transition: width 0.6s ease; 120 | 121 | @include utils-vertical-center; 122 | } 123 | 124 | @include e(innerText) { 125 | display: inline-block; 126 | vertical-align: middle; 127 | color: $--color-white; 128 | font-size: 12px; 129 | margin: 0 5px; 130 | } 131 | } 132 | 133 | @keyframes progress { 134 | 0% { 135 | background-position: 0 0; 136 | } 137 | 138 | 100% { 139 | background-position: 32px 0; 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /src/locale/lang/hu.js: -------------------------------------------------------------------------------- 1 | export default { 2 | el: { 3 | colorpicker: { 4 | confirm: 'OK', 5 | clear: 'Törlés' 6 | }, 7 | datepicker: { 8 | now: 'Most', 9 | today: 'Ma', 10 | cancel: 'Mégse', 11 | clear: 'Törlés', 12 | confirm: 'OK', 13 | selectDate: 'Dátum', 14 | selectTime: 'Időpont', 15 | startDate: 'Dátum-tól', 16 | startTime: 'Időpont-tól', 17 | endDate: 'Dátum-ig', 18 | endTime: 'Időpont-ig', 19 | prevYear: 'Előző év', 20 | nextYear: 'Következő év', 21 | prevMonth: 'Előző hónap', 22 | nextMonth: 'Következő hónap', 23 | year: '', 24 | month1: 'Január', 25 | month2: 'Február', 26 | month3: 'Március', 27 | month4: 'Április', 28 | month5: 'Május', 29 | month6: 'Június', 30 | month7: 'Július', 31 | month8: 'Augusztus', 32 | month9: 'Szeptember', 33 | month10: 'Október', 34 | month11: 'November', 35 | month12: 'December', 36 | weeks: { 37 | sun: 'Vas', 38 | mon: 'Hét', 39 | tue: 'Ked', 40 | wed: 'Sze', 41 | thu: 'Csü', 42 | fri: 'Pén', 43 | sat: 'Szo' 44 | }, 45 | months: { 46 | jan: 'Jan', 47 | feb: 'Feb', 48 | mar: 'Már', 49 | apr: 'Ápr', 50 | may: 'Máj', 51 | jun: 'Jún', 52 | jul: 'Júl', 53 | aug: 'Aug', 54 | sep: 'Szep', 55 | oct: 'Okt', 56 | nov: 'Nov', 57 | dec: 'Dec' 58 | } 59 | }, 60 | select: { 61 | loading: 'Betöltés', 62 | noMatch: 'Nincs találat', 63 | noData: 'Nincs adat', 64 | placeholder: 'Válassz' 65 | }, 66 | cascader: { 67 | noMatch: 'Nincs találat', 68 | loading: 'Betöltés', 69 | placeholder: 'Válassz', 70 | noData: 'Nincs adat' 71 | }, 72 | pagination: { 73 | goto: 'Ugrás', 74 | pagesize: '/oldal', 75 | total: 'Össz {total}', 76 | pageClassifier: '' 77 | }, 78 | messagebox: { 79 | title: 'Üzenet', 80 | confirm: 'OK', 81 | cancel: 'Mégse', 82 | error: 'Hibás adat' 83 | }, 84 | upload: { 85 | deleteTip: 'kattints a törléshez', 86 | delete: 'Törlés', 87 | preview: 'Előnézet', 88 | continue: 'Tovább' 89 | }, 90 | table: { 91 | emptyText: 'Nincs adat', 92 | confirmFilter: 'Megerősít', 93 | resetFilter: 'Alaphelyet', 94 | clearFilter: 'Mind', 95 | sumText: 'Összeg' 96 | }, 97 | tree: { 98 | emptyText: 'Nincs adat' 99 | }, 100 | transfer: { 101 | noMatch: 'Nincs találat', 102 | noData: 'Nincs adat', 103 | titles: ['Lista 1', 'Lista 2'], 104 | filterPlaceholder: 'Kulcsszó', 105 | noCheckedFormat: '{total} elem', 106 | hasCheckedFormat: '{checked}/{total} kiválasztva' 107 | }, 108 | image: { 109 | error: 'FAILED' // to be translated 110 | }, 111 | pageHeader: { 112 | title: 'Back' // to be translated 113 | }, 114 | popconfirm: { 115 | confirmButtonText: 'Yes', // to be translated 116 | cancelButtonText: 'No' // to be translated 117 | } 118 | } 119 | }; 120 | -------------------------------------------------------------------------------- /src/locale/lang/da.js: -------------------------------------------------------------------------------- 1 | export default { 2 | el: { 3 | colorpicker: { 4 | confirm: 'OK', 5 | clear: 'Ryd' 6 | }, 7 | datepicker: { 8 | now: 'Nu', 9 | today: 'I dag', 10 | cancel: 'Annuller', 11 | clear: 'Ryd', 12 | confirm: 'OK', 13 | selectDate: 'Vælg dato', 14 | selectTime: 'Vælg tidspunkt', 15 | startDate: 'Startdato', 16 | startTime: 'Starttidspunkt', 17 | endDate: 'Slutdato', 18 | endTime: 'Sluttidspunkt', 19 | prevYear: 'Forrige år', 20 | nextYear: 'Næste år', 21 | prevMonth: 'Forrige måned', 22 | nextMonth: 'Næste måned', 23 | year: '', 24 | month1: 'Januar', 25 | month2: 'Februar', 26 | month3: 'Marts', 27 | month4: 'April', 28 | month5: 'Maj', 29 | month6: 'Juni', 30 | month7: 'Juli', 31 | month8: 'August', 32 | month9: 'September', 33 | month10: 'Oktober', 34 | month11: 'November', 35 | month12: 'December', 36 | week: 'uge', 37 | weeks: { 38 | sun: 'Søn', 39 | mon: 'Man', 40 | tue: 'Tir', 41 | wed: 'Ons', 42 | thu: 'Tor', 43 | fri: 'Fre', 44 | sat: 'Lør' 45 | }, 46 | months: { 47 | jan: 'Jan', 48 | feb: 'Feb', 49 | mar: 'Mar', 50 | apr: 'Apr', 51 | may: 'Maj', 52 | jun: 'Jun', 53 | jul: 'Jul', 54 | aug: 'Aug', 55 | sep: 'Sep', 56 | oct: 'Okt', 57 | nov: 'Nov', 58 | dec: 'Dec' 59 | } 60 | }, 61 | select: { 62 | loading: 'Henter', 63 | noMatch: 'Ingen matchende data', 64 | noData: 'Ingen data', 65 | placeholder: 'Vælg' 66 | }, 67 | cascader: { 68 | noMatch: 'Ingen matchende data', 69 | loading: 'Henter', 70 | placeholder: 'Vælg', 71 | noData: 'Ingen data' 72 | }, 73 | pagination: { 74 | goto: 'Gå til', 75 | pagesize: '/side', 76 | total: 'Total {total}', 77 | pageClassifier: '' 78 | }, 79 | messagebox: { 80 | confirm: 'OK', 81 | cancel: 'Annuller', 82 | error: 'Ugyldig input' 83 | }, 84 | upload: { 85 | deleteTip: 'tryk slet for at fjerne', 86 | delete: 'Slet', 87 | preview: 'Forhåndsvisning', 88 | continue: 'Fortsæt' 89 | }, 90 | table: { 91 | emptyText: 'Ingen data', 92 | confirmFilter: 'Bekræft', 93 | resetFilter: 'Nulstil', 94 | clearFilter: 'Alle', 95 | sumText: 'Sum' 96 | }, 97 | tree: { 98 | emptyText: 'Ingen data' 99 | }, 100 | transfer: { 101 | noMatch: 'Ingen matchende data', 102 | noData: 'Ingen data', 103 | titles: ['Liste 1', 'Liste 2'], 104 | filterPlaceholder: 'Indtast søgeord', 105 | noCheckedFormat: '{total} emner', 106 | hasCheckedFormat: '{checked}/{total} valgt' 107 | }, 108 | image: { 109 | error: 'FAILED' // to be translated 110 | }, 111 | pageHeader: { 112 | title: 'Back' // to be translated 113 | }, 114 | popconfirm: { 115 | confirmButtonText: 'Yes', // to be translated 116 | cancelButtonText: 'No' // to be translated 117 | } 118 | } 119 | }; 120 | -------------------------------------------------------------------------------- /src/locale/lang/ar.js: -------------------------------------------------------------------------------- 1 | export default { 2 | el: { 3 | colorpicker: { 4 | confirm: 'موافق', 5 | clear: 'إزالة' 6 | }, 7 | datepicker: { 8 | now: 'الآن', 9 | today: 'اليوم', 10 | cancel: 'إلغاء', 11 | clear: 'إزالة', 12 | confirm: 'موافق', 13 | selectDate: 'إختر التاريخ', 14 | selectTime: 'إختر الوقت', 15 | startDate: 'تاريخ البدء', 16 | startTime: 'وقت البدء', 17 | endDate: 'تاريخ الإنتهاء', 18 | endTime: 'وقت الإنتهاء', 19 | prevYear: 'السنة السابقة', 20 | nextYear: 'السنة التالية', 21 | prevMonth: 'الشهر السابق', 22 | nextMonth: 'الشهر التالي', 23 | year: 'سنة', 24 | month1: 'يناير', 25 | month2: 'فبراير', 26 | month3: 'مارس', 27 | month4: 'ابريل', 28 | month5: 'مايو', 29 | month6: 'يونيو', 30 | month7: 'يوليو', 31 | month8: 'أغسطس', 32 | month9: 'سبتمبر', 33 | month10: 'أكتوبر', 34 | month11: 'نوفمبر', 35 | month12: 'ديسمبر', 36 | week: 'أسبوع', 37 | weeks: { 38 | sun: 'الأحد', 39 | mon: 'الأثنين', 40 | tue: 'الثلاثاء', 41 | wed: 'الأربعاء', 42 | thu: 'الخميس', 43 | fri: 'الجمعة', 44 | sat: 'السبت' 45 | }, 46 | months: { 47 | jan: 'يناير', 48 | feb: 'فبراير', 49 | mar: 'مارس', 50 | apr: 'أبريل', 51 | may: 'مايو', 52 | jun: 'يونيو', 53 | jul: 'يوليو', 54 | aug: 'أغسطس', 55 | sep: 'سبتمبر', 56 | oct: 'أكتوبر', 57 | nov: 'نوفمبر', 58 | dec: 'ديسمبر' 59 | } 60 | }, 61 | select: { 62 | loading: 'جار التحميل', 63 | noMatch: 'لايوجد بيانات مطابقة', 64 | noData: 'لايوجد بيانات', 65 | placeholder: 'إختر' 66 | }, 67 | cascader: { 68 | noMatch: 'لايوجد بيانات مطابقة', 69 | loading: 'جار التحميل', 70 | placeholder: 'إختر', 71 | noData: 'لايوجد بيانات' 72 | }, 73 | pagination: { 74 | goto: 'أذهب إلى', 75 | pagesize: '/صفحة', 76 | total: 'الكل {total}', 77 | pageClassifier: '' 78 | }, 79 | messagebox: { 80 | title: 'العنوان', 81 | confirm: 'موافق', 82 | cancel: 'إلغاء', 83 | error: 'مدخل غير صحيح' 84 | }, 85 | upload: { 86 | delete: 'حذف', 87 | preview: 'عرض', 88 | continue: 'إستمرار' 89 | }, 90 | table: { 91 | emptyText: 'لايوجد بيانات', 92 | confirmFilter: 'تأكيد', 93 | resetFilter: 'حذف', 94 | clearFilter: 'الكل', 95 | sumText: 'المجموع' 96 | }, 97 | tree: { 98 | emptyText: 'لايوجد بيانات' 99 | }, 100 | transfer: { 101 | noMatch: 'لايوجد بيانات مطابقة', 102 | noData: 'لايوجد بيانات', 103 | titles: ['قائمة 1', 'قائمة 2'], 104 | filterPlaceholder: 'ادخل كلمة', 105 | noCheckedFormat: '{total} عناصر', 106 | hasCheckedFormat: '{checked}/{total} مختار' 107 | }, 108 | image: { 109 | error: 'فشل' 110 | }, 111 | pageHeader: { 112 | title: 'عودة' 113 | }, 114 | popconfirm: { 115 | confirmButtonText: 'Yes', // to be translated 116 | cancelButtonText: 'No' // to be translated 117 | } 118 | } 119 | }; 120 | -------------------------------------------------------------------------------- /src/locale/lang/en.js: -------------------------------------------------------------------------------- 1 | export default { 2 | el: { 3 | colorpicker: { 4 | confirm: 'OK', 5 | clear: 'Clear' 6 | }, 7 | datepicker: { 8 | now: 'Now', 9 | today: 'Today', 10 | cancel: 'Cancel', 11 | clear: 'Clear', 12 | confirm: 'OK', 13 | selectDate: 'Select date', 14 | selectTime: 'Select time', 15 | startDate: 'Start Date', 16 | startTime: 'Start Time', 17 | endDate: 'End Date', 18 | endTime: 'End Time', 19 | prevYear: 'Previous Year', 20 | nextYear: 'Next Year', 21 | prevMonth: 'Previous Month', 22 | nextMonth: 'Next Month', 23 | year: '', 24 | month1: 'January', 25 | month2: 'February', 26 | month3: 'March', 27 | month4: 'April', 28 | month5: 'May', 29 | month6: 'June', 30 | month7: 'July', 31 | month8: 'August', 32 | month9: 'September', 33 | month10: 'October', 34 | month11: 'November', 35 | month12: 'December', 36 | week: 'week', 37 | weeks: { 38 | sun: 'Sun', 39 | mon: 'Mon', 40 | tue: 'Tue', 41 | wed: 'Wed', 42 | thu: 'Thu', 43 | fri: 'Fri', 44 | sat: 'Sat' 45 | }, 46 | months: { 47 | jan: 'Jan', 48 | feb: 'Feb', 49 | mar: 'Mar', 50 | apr: 'Apr', 51 | may: 'May', 52 | jun: 'Jun', 53 | jul: 'Jul', 54 | aug: 'Aug', 55 | sep: 'Sep', 56 | oct: 'Oct', 57 | nov: 'Nov', 58 | dec: 'Dec' 59 | } 60 | }, 61 | select: { 62 | loading: 'Loading', 63 | noMatch: 'No matching data', 64 | noData: 'No data', 65 | placeholder: 'Select' 66 | }, 67 | cascader: { 68 | noMatch: 'No matching data', 69 | loading: 'Loading', 70 | placeholder: 'Select', 71 | noData: 'No data' 72 | }, 73 | pagination: { 74 | goto: 'Go to', 75 | pagesize: '/page', 76 | total: 'Total {total}', 77 | pageClassifier: '' 78 | }, 79 | messagebox: { 80 | title: 'Message', 81 | confirm: 'OK', 82 | cancel: 'Cancel', 83 | error: 'Illegal input' 84 | }, 85 | upload: { 86 | deleteTip: 'press delete to remove', 87 | delete: 'Delete', 88 | preview: 'Preview', 89 | continue: 'Continue' 90 | }, 91 | table: { 92 | emptyText: 'No Data', 93 | confirmFilter: 'Confirm', 94 | resetFilter: 'Reset', 95 | clearFilter: 'All', 96 | sumText: 'Sum' 97 | }, 98 | tree: { 99 | emptyText: 'No Data' 100 | }, 101 | transfer: { 102 | noMatch: 'No matching data', 103 | noData: 'No data', 104 | titles: ['List 1', 'List 2'], // to be translated 105 | filterPlaceholder: 'Enter keyword', // to be translated 106 | noCheckedFormat: '{total} items', // to be translated 107 | hasCheckedFormat: '{checked}/{total} checked' // to be translated 108 | }, 109 | image: { 110 | error: 'FAILED' 111 | }, 112 | pageHeader: { 113 | title: 'Back' // to be translated 114 | }, 115 | popconfirm: { 116 | confirmButtonText: 'Yes', 117 | cancelButtonText: 'No' 118 | } 119 | } 120 | }; 121 | -------------------------------------------------------------------------------- /src/locale/lang/tr-TR.js: -------------------------------------------------------------------------------- 1 | export default { 2 | el: { 3 | colorpicker: { 4 | confirm: 'Onayla', 5 | clear: 'Temizle' 6 | }, 7 | datepicker: { 8 | now: 'Şimdi', 9 | today: 'Bugün', 10 | cancel: 'İptal', 11 | clear: 'Temizle', 12 | confirm: 'Onayla', 13 | selectDate: 'Tarih seç', 14 | selectTime: 'Saat seç', 15 | startDate: 'Başlangıç Tarihi', 16 | startTime: 'Başlangıç Saati', 17 | endDate: 'Bitiş Tarihi', 18 | endTime: 'Bitiş Saati', 19 | prevYear: 'Önceki Yıl', 20 | nextYear: 'Sonraki Yıl', 21 | prevMonth: 'Önceki Ay', 22 | nextMonth: 'Sonraki Ay', 23 | year: '', 24 | month1: 'Ocak', 25 | month2: 'Şubat', 26 | month3: 'Mart', 27 | month4: 'Nisan', 28 | month5: 'Mayıs', 29 | month6: 'Haziran', 30 | month7: 'Temmuz', 31 | month8: 'Ağustos', 32 | month9: 'Eylül', 33 | month10: 'Ekim', 34 | month11: 'Kasım', 35 | month12: 'Aralık', 36 | // week: 'week', 37 | weeks: { 38 | sun: 'Paz', 39 | mon: 'Pzt', 40 | tue: 'Sal', 41 | wed: 'Çar', 42 | thu: 'Per', 43 | fri: 'Cum', 44 | sat: 'Cmt' 45 | }, 46 | months: { 47 | jan: 'Oca', 48 | feb: 'Şub', 49 | mar: 'Mar', 50 | apr: 'Nis', 51 | may: 'May', 52 | jun: 'Haz', 53 | jul: 'Tem', 54 | aug: 'Ağu', 55 | sep: 'Eyl', 56 | oct: 'Eki', 57 | nov: 'Kas', 58 | dec: 'Ara' 59 | } 60 | }, 61 | select: { 62 | loading: 'Yükleniyor', 63 | noMatch: 'Eşleşen veri bulunamadı', 64 | noData: 'Veri yok', 65 | placeholder: 'Seç' 66 | }, 67 | cascader: { 68 | noMatch: 'Eşleşen veri bulunamadı', 69 | loading: 'Yükleniyor', 70 | placeholder: 'Seç', 71 | noData: 'Veri yok' 72 | }, 73 | pagination: { 74 | goto: 'Git', 75 | pagesize: '/sayfa', 76 | total: 'Toplam {total}', 77 | pageClassifier: '' 78 | }, 79 | messagebox: { 80 | title: 'Mesaj', 81 | confirm: 'Onayla', 82 | cancel: 'İptal', 83 | error: 'İllegal giriş' 84 | }, 85 | upload: { 86 | deleteTip: 'kaldırmak için delete tuşuna bas', 87 | delete: 'Sil', 88 | preview: 'Görüntüle', 89 | continue: 'Devam' 90 | }, 91 | table: { 92 | emptyText: 'Veri yok', 93 | confirmFilter: 'Onayla', 94 | resetFilter: 'Sıfırla', 95 | clearFilter: 'Hepsi', 96 | sumText: 'Sum' 97 | }, 98 | tree: { 99 | emptyText: 'Veri yok' 100 | }, 101 | transfer: { 102 | noMatch: 'Eşleşen veri bulunamadı', 103 | noData: 'Veri yok', 104 | titles: ['Liste 1', 'Liste 2'], 105 | filterPlaceholder: 'Anahtar kelimeleri gir', 106 | noCheckedFormat: '{total} adet', 107 | hasCheckedFormat: '{checked}/{total} seçildi' 108 | }, 109 | image: { 110 | error: 'FAILED' // to be translated 111 | }, 112 | pageHeader: { 113 | title: 'Back' // to be translated 114 | }, 115 | popconfirm: { 116 | confirmButtonText: 'Yes', // to be translated 117 | cancelButtonText: 'No' // to be translated 118 | } 119 | } 120 | }; 121 | -------------------------------------------------------------------------------- /src/locale/lang/km.js: -------------------------------------------------------------------------------- 1 | export default { 2 | el: { 3 | colorpicker: { 4 | confirm: 'យល់ព្រម', 5 | clear: 'លុប' 6 | }, 7 | datepicker: { 8 | now: 'ឥឡូវ​នេះ', 9 | today: 'ថ្ងៃនេះ', 10 | cancel: 'បោះបង់', 11 | clear: 'លុប', 12 | confirm: 'យល់ព្រម', 13 | selectDate: 'ជ្រើសរើសថ្ងៃ', 14 | selectTime: 'ជ្រើសរើសម៉ោង', 15 | startDate: 'ថ្ងៃចាប់ផ្តើម', 16 | startTime: 'ម៉ោងចាប់ផ្តើម', 17 | endDate: 'ថ្ងៃបញ្ចប់', 18 | endTime: 'ម៉ោងបញ្ចប់', 19 | prevYear: 'ឆ្នាំមុន', 20 | nextYear: 'ឆ្នាំក្រោយ', 21 | prevMonth: 'ខែមុន', 22 | nextMonth: 'ខែក្រោយ', 23 | year: 'ឆ្នាំ', 24 | month1: 'មករា', 25 | month2: 'កុម្ភៈ', 26 | month3: 'មីនា', 27 | month4: 'មេសា', 28 | month5: 'ឧសភា', 29 | month6: 'មិថុនា', 30 | month7: 'កក្កដា', 31 | month8: 'សីហា', 32 | month9: 'កញ្ញា', 33 | month10: 'តុលា', 34 | month11: 'វិច្ឆកា', 35 | month12: 'ធ្នូ', 36 | // week: 'week', 37 | weeks: { 38 | sun: 'អាទិត្យ', 39 | mon: 'Mon', 40 | tue: 'អង្គារ', 41 | wed: 'ពុធ', 42 | thu: 'ព្រ.ហ', 43 | fri: 'សុក្រ', 44 | sat: 'សៅរ៏' 45 | }, 46 | months: { 47 | jan: 'មករា', 48 | feb: 'កុម្ភៈ', 49 | mar: 'មីនា', 50 | apr: 'មេសា', 51 | may: 'ឧសភា', 52 | jun: 'មិថុនា', 53 | jul: 'កក្កដា', 54 | aug: 'សីហា', 55 | sep: 'កញ្ញា', 56 | oct: 'តុលា', 57 | nov: 'វិច្ឆកា', 58 | dec: 'ធ្នូ' 59 | } 60 | }, 61 | select: { 62 | loading: 'កំពុងផ្ទុក', 63 | noMatch: 'គ្មានទិន្ន័យដូច', 64 | noData: 'គ្មានទិន្ន័យ', 65 | placeholder: 'ជ្រើសរើស' 66 | }, 67 | cascader: { 68 | noMatch: 'គ្មានទិន្ន័យដូច', 69 | loading: 'កំពុងផ្ទុក', 70 | placeholder: 'ជ្រើសរើស', 71 | noData: 'គ្មានទិន្ន័យ' 72 | }, 73 | pagination: { 74 | goto: 'ទៅកាន់', 75 | pagesize: '/ទំព័រ', 76 | total: 'សរុប {total}', 77 | pageClassifier: '' 78 | }, 79 | messagebox: { 80 | title: 'សារ', 81 | confirm: 'យល់ព្រម', 82 | cancel: 'បោះបង់', 83 | error: 'ការបញ្ចូលមិនអនុញ្ញាត' 84 | }, 85 | upload: { 86 | deleteTip: 'ចុចលុបដើម្បីដកចេញ', 87 | delete: 'លុប', 88 | preview: 'មើល', 89 | continue: 'បន្ត' 90 | }, 91 | table: { 92 | emptyText: 'គ្មានទិន្ន័យ', 93 | confirmFilter: 'យល់ព្រម', 94 | resetFilter: 'កំណត់ឡើងវិញ', 95 | clearFilter: 'ទាំងអស់', 96 | sumText: 'បូក' 97 | }, 98 | tree: { 99 | emptyText: 'គ្មានទិន្ន័យ' 100 | }, 101 | transfer: { 102 | noMatch: 'គ្មានទិន្ន័យដូច', 103 | noData: 'គ្មានទិន្ន័យ', 104 | titles: ['បញ្ជី ១', 'បញ្ជី ២'], 105 | filterPlaceholder: 'បញ្ចូលពាក្យ', 106 | noCheckedFormat: '{total} ធាតុ', 107 | hasCheckedFormat: '{checked}/{total} បានគូសធីក' 108 | }, 109 | image: { 110 | error: 'FAILED' // to be translated 111 | }, 112 | pageHeader: { 113 | title: 'Back' // to be translated 114 | }, 115 | popconfirm: { 116 | confirmButtonText: 'Yes', // to be translated 117 | cancelButtonText: 'No' // to be translated 118 | } 119 | } 120 | }; 121 | -------------------------------------------------------------------------------- /src/locale/lang/sv-SE.js: -------------------------------------------------------------------------------- 1 | export default { 2 | el: { 3 | colorpicker: { 4 | confirm: 'OK', 5 | clear: 'Töm' 6 | }, 7 | datepicker: { 8 | now: 'Nu', 9 | today: 'Idag', 10 | cancel: 'Avbryt', 11 | clear: 'Töm', 12 | confirm: 'OK', 13 | selectDate: 'Välj datum', 14 | selectTime: 'Välj tid', 15 | startDate: 'Startdatum', 16 | startTime: 'Starttid', 17 | endDate: 'Slutdatum', 18 | endTime: 'Sluttid', 19 | prevYear: 'Föregående år', 20 | nextYear: 'Nästa år', 21 | prevMonth: 'Föregående månad', 22 | nextMonth: 'Nästa månad', 23 | year: '', 24 | month1: 'Januari', 25 | month2: 'Februari', 26 | month3: 'Mars', 27 | month4: 'April', 28 | month5: 'Maj', 29 | month6: 'Juni', 30 | month7: 'Juli', 31 | month8: 'Augusti', 32 | month9: 'September', 33 | month10: 'Oktober', 34 | month11: 'November', 35 | month12: 'December', 36 | // week: 'week', 37 | weeks: { 38 | sun: 'Sön', 39 | mon: 'Mån', 40 | tue: 'Tis', 41 | wed: 'Ons', 42 | thu: 'Tor', 43 | fri: 'Fre', 44 | sat: 'Lör' 45 | }, 46 | months: { 47 | jan: 'Jan', 48 | feb: 'Feb', 49 | mar: 'Mar', 50 | apr: 'Apr', 51 | may: 'Maj', 52 | jun: 'Jun', 53 | jul: 'Jul', 54 | aug: 'Aug', 55 | sep: 'Sep', 56 | oct: 'Okt', 57 | nov: 'Nov', 58 | dec: 'Dec' 59 | } 60 | }, 61 | select: { 62 | loading: 'Laddar', 63 | noMatch: 'Hittade inget', 64 | noData: 'Ingen data', 65 | placeholder: 'Välj' 66 | }, 67 | cascader: { 68 | noMatch: 'Hittade inget', 69 | loading: 'Laddar', 70 | placeholder: 'Välj', 71 | noData: 'Ingen data' 72 | }, 73 | pagination: { 74 | goto: 'Gå till', 75 | pagesize: '/sida', 76 | total: 'Totalt {total}', 77 | pageClassifier: '' 78 | }, 79 | messagebox: { 80 | title: 'Meddelande', 81 | confirm: 'OK', 82 | cancel: 'Avbryt', 83 | error: 'Felaktig inmatning' 84 | }, 85 | upload: { 86 | deleteTip: 'press delete to remove', // to be translated 87 | delete: 'Radera', 88 | preview: 'Förhandsvisa', 89 | continue: 'Fortsätt' 90 | }, 91 | table: { 92 | emptyText: 'Inga Data', 93 | confirmFilter: 'Bekräfta', 94 | resetFilter: 'Återställ', 95 | clearFilter: 'Alla', 96 | sumText: 'Summa' 97 | }, 98 | tree: { 99 | emptyText: 'Ingen data' 100 | }, 101 | transfer: { 102 | noMatch: 'Hittade inget', 103 | noData: 'Ingen data', 104 | titles: ['List 1', 'List 2'], // to be translated 105 | filterPlaceholder: 'Enter keyword', // to be translated 106 | noCheckedFormat: '{total} items', // to be translated 107 | hasCheckedFormat: '{checked}/{total} checked' // to be translated 108 | }, 109 | image: { 110 | error: 'FAILED' // to be translated 111 | }, 112 | pageHeader: { 113 | title: 'Bakåt' // to be translated 114 | }, 115 | popconfirm: { 116 | confirmButtonText: 'Ja', 117 | cancelButtonText: 'Nej' 118 | } 119 | } 120 | }; 121 | -------------------------------------------------------------------------------- /src/locale/lang/pt-br.js: -------------------------------------------------------------------------------- 1 | export default { 2 | el: { 3 | colorpicker: { 4 | confirm: 'Confirmar', 5 | clear: 'Limpar' 6 | }, 7 | datepicker: { 8 | now: 'Agora', 9 | today: 'Hoje', 10 | cancel: 'Cancelar', 11 | clear: 'Limpar', 12 | confirm: 'Confirmar', 13 | selectDate: 'Selecione a data', 14 | selectTime: 'Selecione a hora', 15 | startDate: 'Data inicial', 16 | startTime: 'Hora inicial', 17 | endDate: 'Data final', 18 | endTime: 'Hora final', 19 | prevYear: 'Ano anterior', 20 | nextYear: 'Próximo ano', 21 | prevMonth: 'Mês anterior', 22 | nextMonth: 'Próximo mês', 23 | year: '', 24 | month1: 'Janeiro', 25 | month2: 'Fevereiro', 26 | month3: 'Março', 27 | month4: 'Abril', 28 | month5: 'Maio', 29 | month6: 'Junho', 30 | month7: 'Julho', 31 | month8: 'Agosto', 32 | month9: 'Setembro', 33 | month10: 'Outubro', 34 | month11: 'Novembro', 35 | month12: 'Dezembro', 36 | // week: 'semana', 37 | weeks: { 38 | sun: 'Dom', 39 | mon: 'Seg', 40 | tue: 'Ter', 41 | wed: 'Qua', 42 | thu: 'Qui', 43 | fri: 'Sex', 44 | sat: 'Sab' 45 | }, 46 | months: { 47 | jan: 'Jan', 48 | feb: 'Fev', 49 | mar: 'Mar', 50 | apr: 'Abr', 51 | may: 'Mai', 52 | jun: 'Jun', 53 | jul: 'Jul', 54 | aug: 'Ago', 55 | sep: 'Set', 56 | oct: 'Out', 57 | nov: 'Nov', 58 | dec: 'Dez' 59 | } 60 | }, 61 | select: { 62 | loading: 'Carregando', 63 | noMatch: 'Sem resultados', 64 | noData: 'Sem dados', 65 | placeholder: 'Selecione' 66 | }, 67 | cascader: { 68 | noMatch: 'Sem resultados', 69 | loading: 'Carregando', 70 | placeholder: 'Selecione', 71 | noData: 'Sem dados' 72 | }, 73 | pagination: { 74 | goto: 'Ir para', 75 | pagesize: '/página', 76 | total: 'Total {total}', 77 | pageClassifier: '' 78 | }, 79 | messagebox: { 80 | title: 'Mensagem', 81 | confirm: 'Confirmar', 82 | cancel: 'Cancelar', 83 | error: 'Erro!' 84 | }, 85 | upload: { 86 | deleteTip: 'aperte delete para apagar', 87 | delete: 'Apagar', 88 | preview: 'Pré-visualizar', 89 | continue: 'Continuar' 90 | }, 91 | table: { 92 | emptyText: 'Sem dados', 93 | confirmFilter: 'Confirmar', 94 | resetFilter: 'Limpar', 95 | clearFilter: 'Todos', 96 | sumText: 'Total' 97 | }, 98 | tree: { 99 | emptyText: 'Sem dados' 100 | }, 101 | transfer: { 102 | noMatch: 'Sem resultados', 103 | noData: 'Sem dados', 104 | titles: ['Lista 1', 'Lista 2'], 105 | filterPlaceholder: 'Digite uma palavra-chave', 106 | noCheckedFormat: '{total} itens', 107 | hasCheckedFormat: '{checked}/{total} selecionados' 108 | }, 109 | image: { 110 | error: 'Erro ao carregar imagem' 111 | }, 112 | pageHeader: { 113 | title: 'Voltar' 114 | }, 115 | popconfirm: { 116 | confirmButtonText: 'Yes', // to be translated 117 | cancelButtonText: 'No' // to be translated 118 | } 119 | } 120 | }; 121 | --------------------------------------------------------------------------------