7 | * ```
8 | */
9 | let handler;
10 |
11 | export default {
12 | bind(el, binding, vnode) {
13 | const expression = binding.expression;
14 | handler = function(e) {
15 | if (vnode.context && !el.contains(e.target)) {
16 | vnode.context[expression]();
17 | }
18 | };
19 | document.addEventListener('click', handler);
20 | },
21 |
22 | unbind() {
23 | document.removeEventListener('click', handler);
24 | },
25 |
26 | install(Vue) {
27 | Vue.directive('clickoutside', {
28 | bind: this.bind,
29 | unbind: this.unbind
30 | });
31 | }
32 | };
33 |
--------------------------------------------------------------------------------
/examples/index.template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Element
7 |
8 |
9 |
10 |
11 |
20 |
21 |
--------------------------------------------------------------------------------
/packages/date-picker/src/css/time-range-picker.css:
--------------------------------------------------------------------------------
1 | @import '../css/vars.css';
2 |
3 | @component-namespace el {
4 | @b time-range-picker {
5 | width: 354px;
6 | overflow: visible;
7 |
8 | @e content {
9 | position: relative;
10 | text-align: center;
11 | padding: 10px;
12 | display: flex;
13 | }
14 |
15 | @e cell {
16 | box-sizing: border-box;
17 | margin: 0;
18 | padding: 4px 7px 7px;
19 | flex: 1;
20 | }
21 |
22 | @e header {
23 | margin-bottom: 5px;
24 | text-align: center;
25 | font-size: 14px;
26 | }
27 |
28 | @e body {
29 | display: flex;
30 | border-radius:2px;
31 | border: 1px solid var(--datepicker-border-color);
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/select/src/option-group.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | - {{ label }}
4 | -
5 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/spinner/src/spinner.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
28 |
--------------------------------------------------------------------------------
/scripts/cooking.conf.js:
--------------------------------------------------------------------------------
1 | var cooking = require('cooking');
2 | var path = require('path');
3 |
4 | cooking.set({
5 | entry: './src/index.js',
6 | dist: './lib',
7 | clean: false,
8 | format: 'umd',
9 | moduleName: 'ELEMENT',
10 | extends: ['vue2'],
11 | alias: {
12 | main: path.join(__dirname, '../src'),
13 | packages: path.join(__dirname, '../packages'),
14 | examples: path.join(__dirname, '../examples')
15 | },
16 | externals: {
17 | vue: {
18 | root: 'Vue',
19 | commonjs: 'vue',
20 | commonjs2: 'vue',
21 | amd: 'vue'
22 | }
23 | }
24 | });
25 |
26 | cooking.add('output.filename', 'index.js');
27 | cooking.add('loader.js.exclude', /node_modules|utils\/popper\.js|util\/fecha.\js/);
28 | module.exports = cooking.resolve();
29 |
--------------------------------------------------------------------------------
/examples/docs/breadcrumb.md:
--------------------------------------------------------------------------------
1 | ## Breadcrumb 面包屑
2 | 显示当前页面的路径，快速返回之前的任意页面。
3 |
4 | ### 基础用法
5 |
6 | 适用广泛的基础用法。
7 |
8 | :::demo 在`el-breadcrumb`中使用`el-breadcrumb-item`标签表示从首页开始的每一级。Element 提供了一个`separator`属性，在`el-breadcrumb`标签中设置它来决定分隔符，它只能是字符串，默认为斜杠`/`。
9 |
10 | ```html
11 |
12 | 首页
13 | 活动管理
14 | 活动列表
15 | 活动详情
16 |
17 | ```
18 | :::
19 |
20 | ### Attributes
21 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
22 | |---------- |-------------- |---------- |-------------------------------- |-------- |
23 | | separator | 分隔符 | string | — | 斜杠'/' |
24 |
--------------------------------------------------------------------------------
/packages/badge/src/main.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
8 |
9 |
10 |
11 |
12 |
38 |
--------------------------------------------------------------------------------
/packages/theme-default/src/breadcrumb.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 |
6 | @b breadcrumb {
7 | font-size:13px;
8 | color:#475669;
9 | @utils-clearfix;
10 |
11 | @e separator {
12 | margin: 0 8px;
13 | color: #c0ccda;
14 | }
15 | @e item {
16 | float: left;
17 |
18 | &:not(:last-child) {
19 | .el-breadcrumb__item__text {
20 | transition: color .15s linear;
21 |
22 | &:hover {
23 | color: var(--color-primary);
24 | cursor: pointer;
25 | }
26 | }
27 | }
28 |
29 | &:last-child {
30 | color: #99a9bf;
31 |
32 | .el-breadcrumb__separator {
33 | display: none;
34 | }
35 | }
36 | }
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/packages/theme-default/src/col.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | .el-col-1, .el-col-2, .el-col-3, .el-col-4, .el-col-5, .el-col-6, .el-col-7, .el-col-8, .el-col-9, .el-col-10, .el-col-11, .el-col-12, .el-col-13, .el-col-14, .el-col-15, .el-col-16, .el-col-17, .el-col-18, .el-col-19, .el-col-20, .el-col-21, .el-col-22, .el-col-23, .el-col-24 {
5 | float: left;
6 | box-sizing: border-box;
7 | }
8 |
9 | @for $i from 1 to 24 {
10 | .el-col-$i {
11 | width: calc(1 / 24 * $(i) * 100)%;
12 | }
13 | .el-col-offset-$i {
14 | margin-left: calc(1 / 24 * $(i) * 100)%;
15 | }
16 | .el-col-pull-$i {
17 | position: relative;
18 | right: calc(1 / 24 * $(i) * 100)%;
19 | }
20 | .el-col-push-$i {
21 | position: relative;
22 | left: calc(1 / 24 * $(i) * 100)%;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/packages/date-picker/src/css/year-table.css:
--------------------------------------------------------------------------------
1 | @import "./vars.css";
2 |
3 | @component-namespace el {
4 | @b year-table {
5 | font-size: 12px;
6 | margin: -1px;
7 |
8 | .el-icon {
9 | color: var(--datepicker-icon-color);
10 | }
11 |
12 | td {
13 | text-align: center;
14 | padding: 20px 3px;
15 | cursor: pointer;
16 |
17 | .cell {
18 | width: 48px;
19 | height: 32px;
20 | display: block;
21 | line-height: 32px;
22 | color: var(--datepicker-color);
23 | }
24 |
25 | &.available .cell:hover {
26 | background-color: var(--datepicker-cell-hover-color);
27 | }
28 |
29 | &.current .cell {
30 | background-color: var(--datepicker-active-color) !important;
31 | color: #fff;
32 | }
33 | }
34 | }
35 | }
--------------------------------------------------------------------------------
/packages/cascader/src/menu.vue:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/steps/src/steps.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
45 |
--------------------------------------------------------------------------------
/packages/switch/README.md:
--------------------------------------------------------------------------------
1 | # el-switch
2 | > A el-switch component for Vue.js.
3 |
4 | ## Installation
5 | ```shell
6 | npm i el-switch -D
7 | ```
8 |
9 | ## Usage
10 | ```javascript
11 | import Vue from 'vue'
12 | import ElSwitch from 'el-switch'
13 | import 'element-theme-default'
14 |
15 | Vue.use(ElSwitch)
16 | ```
17 |
18 | or
19 |
20 | ```javascript
21 | import Vue from 'vue'
22 | import { ElSwitch } from 'el-switch'
23 |
24 | Vue.component('el-switch', ElSwitch)
25 | ```
26 |
27 |
28 | ## Options
29 |
30 | | name | description | type | default |
31 | |-------------|-------------|-------------|-------------|
32 | | | | | |
33 |
34 | ## Development
35 | ```shell
36 | make dev
37 |
38 | ## test
39 | make test
40 |
41 | ## build
42 | make build
43 | ```
44 |
45 | # License
46 | [MIT](https://opensource.org/licenses/MIT)
47 |
--------------------------------------------------------------------------------
/packages/theme-default/src/loading.css:
--------------------------------------------------------------------------------
1 | .el-loading-spinner {
2 | height: 12px;
3 | width: 60px;
4 | top: 50%;
5 | left: 50%;
6 | font-size: 0;
7 | text-align: center;
8 | margin-top: -6px;
9 | margin-left: -30px;
10 | z-index: 10001;
11 | }
12 |
13 | .el-loading-bubble {
14 | height: 12px;
15 | width: 12px;
16 | background-color: #fff;
17 | margin: 0 3px;
18 | border-radius: 50%;
19 | display: inline-block;
20 | animation: 1s cubic-bezier(.2,.68,.18,1.08) infinite both bubble-pulse;
21 | }
22 |
23 | .el-loading-bubble.bubble1 {
24 | animation-delay: .16s;
25 | }
26 |
27 | .el-loading-bubble.bubble2 {
28 | animation-delay: .32s;
29 | }
30 |
31 | .el-loading-bubble.bubble3 {
32 | animation-delay: .48s;
33 | }
34 |
35 | @keyframes bubble-pulse {
36 | 0%, 80% {
37 | transform: scale(1);
38 | opacity: 1;
39 | }
40 | 45% {
41 | transform: scale(0);
42 | opacity: 0;
43 | }
44 | }
--------------------------------------------------------------------------------
/packages/table/README.md:
--------------------------------------------------------------------------------
1 | # el-table
2 | > A el-table component for Vue.js.
3 |
4 | ## Demo
5 | http://element-component.github.io/el-table
6 |
7 | ## Installation
8 | ```shell
9 | npm i el-table -D
10 | ```
11 |
12 | ## Usage
13 | ```javascript
14 | import Vue from 'vue'
15 | import ElTable from 'el-table'
16 | import 'element-theme-default'
17 |
18 | Vue.use(ElTable)
19 | ```
20 |
21 | or
22 |
23 | ```javascript
24 | import Vue from 'vue'
25 | import { ElTable } from 'el-table'
26 |
27 | Vue.component('el-table', ElTable)
28 | ```
29 |
30 |
31 | ## Options
32 |
33 | | name | description | type | default |
34 | |-------------|-------------|-------------|-------------|
35 | | | | | |
36 |
37 | ## Development
38 | ```shell
39 | make dev
40 |
41 | ## test
42 | make test
43 |
44 | ## build
45 | make build
46 | ```
47 |
48 | # License
49 | [MIT](https://opensource.org/licenses/MIT)
50 |
--------------------------------------------------------------------------------
/packages/theme-default/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "element-theme-default",
3 | "version": "1.0.0",
4 | "description": "Element component default theme.",
5 | "main": "lib/index.css",
6 | "files": [
7 | "lib"
8 | ],
9 | "scripts": {
10 | "build": "postcss -c postcss.conf.js"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "git+https://github.com/element-component/element-theme-default.git"
15 | },
16 | "keywords": [
17 | "element",
18 | "theme"
19 | ],
20 | "author": "haiping.zeng
",
21 | "license": "MIT",
22 | "bugs": {
23 | "url": "https://github.com/element-component/element-theme-default/issues"
24 | },
25 | "homepage": "https://github.com/element-component/element-theme-default#readme",
26 | "devDependencies": {
27 | "gulp": "^3.9.1",
28 | "gulp-cssmin": "^0.1.7",
29 | "gulp-postcss": "^6.1.1",
30 | "postcss-salad": "^1.0.5"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/packages/theme-default/gulpfile.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const gulp = require('gulp');
4 | const postcss = require('gulp-postcss');
5 | const cssmin = require('gulp-cssmin');
6 |
7 | const salad = require('postcss-salad')({
8 | browser: ['ie > 9', 'last 2 version'],
9 | features: {
10 | 'bem': {
11 | 'shortcuts': {
12 | 'component': 'b',
13 | 'modifier': 'm',
14 | 'descendent': 'e'
15 | },
16 | 'separators': {
17 | 'descendent': '__',
18 | 'modifier': '--'
19 | }
20 | }
21 | }
22 | });
23 |
24 | gulp.task('compile', function() {
25 | return gulp.src('./src/*.css')
26 | .pipe(postcss([salad]))
27 | .pipe(cssmin())
28 | .pipe(gulp.dest('./lib'));
29 | });
30 |
31 | gulp.task('copyfont', function() {
32 | return gulp.src('./src/fonts/**')
33 | .pipe(cssmin())
34 | .pipe(gulp.dest('./lib/fonts'));
35 | });
36 |
37 | gulp.task('build', ['compile', 'copyfont']);
38 |
--------------------------------------------------------------------------------
/packages/dialog/README.md:
--------------------------------------------------------------------------------
1 | # el-dialog
2 | > A el-dialog component for Vue.js.
3 |
4 | ## Demo
5 | http://element-component.github.io/el-dialog
6 |
7 | ## Installation
8 | ```shell
9 | npm i el-dialog -D
10 | ```
11 |
12 | ## Usage
13 | ```javascript
14 | import Vue from 'vue'
15 | import ElDialog from 'el-dialog'
16 | import 'element-theme-default'
17 |
18 | Vue.use(ElDialog)
19 | ```
20 |
21 | or
22 |
23 | ```javascript
24 | import Vue from 'vue'
25 | import { ElDialog } from 'el-dialog'
26 |
27 | Vue.component('el-dialog', ElDialog)
28 | ```
29 |
30 |
31 | ## Options
32 |
33 | | name | description | type | default |
34 | |-------------|-------------|-------------|-------------|
35 | | | | | |
36 |
37 | ## Development
38 | ```shell
39 | make dev
40 |
41 | ## test
42 | make test
43 |
44 | ## build
45 | make build
46 | ```
47 |
48 | # License
49 | [MIT](https://opensource.org/licenses/MIT)
50 |
--------------------------------------------------------------------------------
/packages/theme-default/src/spinner.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 | @b time-spinner {
6 | display: flex;
7 | width: 100%;
8 | }
9 |
10 | @b spinner {
11 | display: inline-block;
12 | vertical-align: middle;
13 | }
14 | @b spinner-inner {
15 | animation: rotate 2s linear infinite;
16 | width: 50px;
17 | height: 50px;
18 |
19 | & .path {
20 | stroke: #ececec;
21 | stroke-linecap: round;
22 | animation: dash 1.5s ease-in-out infinite;
23 | }
24 |
25 | }
26 | }
27 | @keyframes rotate {
28 | 100% {
29 | transform: rotate(360deg);
30 | }
31 | }
32 |
33 | @keyframes dash {
34 | 0% {
35 | stroke-dasharray: 1, 150;
36 | stroke-dashoffset: 0;
37 | }
38 | 50% {
39 | stroke-dasharray: 90, 150;
40 | stroke-dashoffset: -35;
41 | }
42 | 100% {
43 | stroke-dasharray: 90, 150;
44 | stroke-dashoffset: -124;
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/packages/theme-default/src/rate.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 |
6 | @b rate {
7 | height: 20px;
8 | @e item {
9 | display: inline-block;
10 | position: relative;
11 | font-size: 0;
12 | vertical-align: middle;
13 | }
14 |
15 | @e icon {
16 | position: relative;
17 | display: inline-block;
18 | font-size: 18px;
19 | margin-right: 6px;
20 | color: #C6D1DE;
21 | transition: .3s;
22 | &.hover {
23 | transform: scale(1.15);
24 | }
25 |
26 | .path2 {
27 | position: absolute;
28 | left: 0;
29 | top: 0;
30 | }
31 | }
32 |
33 | @e decimal {
34 | position: absolute;
35 | top: 0;
36 | left: 0;
37 | display: inline-block;
38 | overflow: hidden;
39 | }
40 |
41 | @e text {
42 | font-size: 14px;
43 | vertical-align: middle;
44 | }
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/packages/col/src/col.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
14 |
15 |
47 |
--------------------------------------------------------------------------------
/packages/row/src/row.vue:
--------------------------------------------------------------------------------
1 |
2 |
13 |
14 |
15 |
16 |
47 |
--------------------------------------------------------------------------------
/packages/theme-default/src/time-select.css:
--------------------------------------------------------------------------------
1 | @import "../../date-picker/src/css/picker.css";
2 | @import "../../date-picker/src/css/date-picker.css";
3 | @import "../../date-picker/src/css/vars.css";
4 |
5 | .time-select {
6 | min-width: 200px;
7 | margin: 5px 0;
8 | width: 100%;
9 | }
10 |
11 | .time-select .el-picker-panel__content {
12 | max-height: 200px;
13 | overflow: hidden;
14 | margin: 0;
15 |
16 | &:hover {
17 | overflow-y: auto;
18 | }
19 | }
20 |
21 | .time-select-item {
22 | padding: 8px 10px;
23 | font-size: 14px;
24 | }
25 |
26 | .time-select-item.selected:not(.disabled) {
27 | background-color: var(--datepicker-active-color);
28 | color: #fff;
29 |
30 | &:hover {
31 | background-color: #1d8ce0;
32 | }
33 | }
34 |
35 | .time-select-item.disabled {
36 | color: var(--datepicker-border-color);
37 | cursor: not-allowed;
38 | }
39 |
40 | .time-select-item:hover {
41 | background-color: var(--datepicker-cell-hover-color);
42 | cursor: pointer;
43 | }
44 |
--------------------------------------------------------------------------------
/examples/entry.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import entry from './app';
3 | import VueRouter from 'vue-router';
4 | import configRouter from './route.config';
5 | import Element from 'main/index.js';
6 | import 'packages/theme-default/src/index.css';
7 | import demoBlock from './components/demo-block.vue';
8 | import MainFooter from './components/footer.vue';
9 | import MainHeader from './components/header.vue';
10 | import SideNav from './components/side-nav';
11 | import FooterNav from './components/footer-nav';
12 |
13 | Vue.use(Element);
14 | Vue.use(VueRouter);
15 | Vue.component('demo-block', demoBlock);
16 | Vue.component('main-footer', MainFooter);
17 | Vue.component('main-header', MainHeader);
18 | Vue.component('side-nav', SideNav);
19 | Vue.component('footer-nav', FooterNav);
20 |
21 | const router = new VueRouter({
22 | mode: 'hash',
23 | base: __dirname,
24 | routes: configRouter
25 | });
26 |
27 | new Vue({ // eslint-disable-line
28 | render: h => h(entry),
29 | router
30 | }).$mount('#app');
31 |
--------------------------------------------------------------------------------
/packages/dropdown/src/dropdown-menu.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
42 |
--------------------------------------------------------------------------------
/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;
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 |
--------------------------------------------------------------------------------
/packages/theme-default/src/option.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 |
6 | @b select-dropdown {
7 | @e item {
8 | font-size: 14px;
9 | padding: 8px 10px;
10 | position: relative;
11 | white-space: nowrap;
12 | overflow: hidden;
13 | text-overflow: ellipsis;
14 | color: #475669;
15 | height: 36px;
16 | line-height: 1.5;
17 | box-sizing: border-box;
18 | cursor: pointer;
19 |
20 | @when disabled {
21 | color: #c0ccda;
22 | cursor: not-allowed;
23 |
24 | &:hover {
25 | background-color: #fff;
26 | }
27 | }
28 |
29 | &.hover {
30 | background-color: #e5e9f2;
31 | }
32 |
33 | &.selected {
34 | color: #fff;
35 | background-color: #20A0FF;
36 |
37 | &.hover {
38 | background-color: #1D8CE0;
39 | }
40 | }
41 |
42 | & span {
43 | line-height: 1.5 !important;
44 | }
45 | }
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/packages/theme-default/src/badge.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 | @b badge {
6 | position: relative;
7 | vertical-align: middle;
8 | display: inline-block;
9 |
10 | @e content {
11 | background-color: var(--badge-fill);
12 | border-radius: var(--badge-radius);
13 | color: #fff;
14 | display: inline-block;
15 | font-size: var(--badge-font-size);
16 | height: var(--badge-size);
17 | line-height: var(--badge-size);
18 | padding: 0 var(--badge-padding);
19 | text-align: center;
20 | white-space: nowrap;
21 | border: 1px solid #fff;
22 |
23 | @when fixed {
24 | position: absolute 0 calc(var(--badge-size) / 2 + 1) * *;
25 | transform: translateY(-50%) translateX(100%);
26 |
27 | @when dot {
28 | right: 5px;
29 | }
30 | }
31 |
32 | @when dot {
33 | size: 8px 8px;
34 | padding: 0;
35 | right: 0;
36 | border-radius: 50%;
37 | }
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/packages/cascader/README.md:
--------------------------------------------------------------------------------
1 | # el-cascader
2 | > A el-cascader component for Vue.js.
3 |
4 | ## Installation
5 | ```shell
6 | npm i el-cascader -D
7 | ```
8 |
9 | ## Usage
10 | ```javascript
11 | import Vue from 'vue'
12 | import ElCascader from 'el-cascader'
13 | import 'theme-default/dist/cascader.css'
14 |
15 | Vue.use(ElCascader)
16 | ```
17 |
18 | or
19 |
20 | ```javascript
21 | import Vue from 'vue'
22 | import { ElCascader } from 'el-cascader'
23 |
24 | Vue.component('el-cascader', ElCascader)
25 | ```
26 |
27 |
28 | ## Options
29 |
30 | ### el-cascader
31 |
32 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
33 | |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
34 | |model| 绑定值| string | | |
35 | |placeholder| 占位符| string | | | |
36 |
37 |
38 | ## Development
39 | ```shell
40 | make dev
41 |
42 | ## test
43 | make test
44 |
45 | ## build
46 | make build
47 | ```
48 |
49 | # License
50 | [MIT](https://opensource.org/licenses/MIT)
51 |
--------------------------------------------------------------------------------
/examples/docs/development.md:
--------------------------------------------------------------------------------
1 | ## 开发指南
2 |
3 | 开发之前需要配置好 Node.js 和 npm 环境，其中 npm 需要 3.0 或以上版本。
4 |
5 | ### 目录结构
6 | ```text
7 | |- examples/ -------------- 文档及示例页
8 | |- docs/ -------------- 文档
9 | |- component/
10 | |- src/ --------------- 组件源码
11 | |- packages/ -------------- 组件
12 | |- scripts/ --------------- 打包配置
13 | |- src/ ------------------- 公用代码
14 | |- components.json -------- 组件列表
15 | ```
16 |
17 | ### 安装依赖
18 | 安装项目所需要的依赖以及子项目内的依赖。
19 | ```bash
20 | npm run bootstrap
21 | ```
22 |
23 | 如果网络不是很理想，可以用国内镜像下载。新建一个 `.npmrc` 文件在当前项目下，同时配置镜像地址，例如：
24 | ```text
25 | registry=https://registry.npm.taobao.org
26 | ```
27 |
28 | 然后再运行 `npm run bootstrap` 安装依赖。
29 |
30 | ### 启动开发环境
31 |
32 | 启动完成后浏览器访问 [http://localhost:8085](http://localhost:8085)
33 |
34 | ```bash
35 | npm run dev
36 | ```
37 |
38 | ### npm scripts
39 | ```bash
40 | npm run dev # 启动开发环境
41 | npm run dist # 打包组件
42 | npm run dist:all # 单独打包每个子项目
43 | npm run lint # 检测 js 代码风格
44 | node bin/new.js [组件名] # 创建新组件
45 | ```
46 |
47 | ### 贡献代码
48 |
49 | 参考 [贡献者文档](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.md)。
50 |
--------------------------------------------------------------------------------
/packages/date-picker/src/css/time-spinner.css:
--------------------------------------------------------------------------------
1 | @import "./vars.css";
2 |
3 | @component-namespace el {
4 | @b time-spinner {
5 | @e wrapper {
6 | height: 190px;
7 | overflow: hidden;
8 | flex: 1;
9 | vertical-align: top;
10 | position: relative;
11 |
12 | &:hover {
13 | overflow-y: auto;
14 | }
15 | }
16 |
17 | @e list {
18 | padding: 0;
19 | margin: 0;
20 | list-style: none;
21 | text-align: center;
22 |
23 | &::after,
24 | &::before {
25 | content: '';
26 | display: block;
27 | width: 100%;
28 | height: 80px;
29 | }
30 | }
31 |
32 | @e item {
33 | height: 32px;
34 | line-height: 32px;
35 | font-size: 12px;
36 |
37 | &:hover:not(.disabled):not(.active) {
38 | background: #E5E9F2;
39 | cursor: pointer;
40 | }
41 |
42 | &.active:not(.disabled) {
43 | color: #fff;
44 | }
45 |
46 | &.disabled {
47 | color: var(--datepicker-border-color);
48 | cursor: not-allowed;
49 | }
50 | }
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 element-ui
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/packages/input/README.md:
--------------------------------------------------------------------------------
1 | # el-input
2 | > A el-input component for Vue.js.
3 |
4 | # Demo
5 | http://element-component.github.io/el-input
6 |
7 | # Installation
8 | ```shell
9 | npm i el-input -D
10 | ```
11 |
12 | # Usage
13 | ```javascript
14 | import Vue from 'vue'
15 | import ElInput from 'el-input'
16 | import 'element-theme-default/dist/input.css'
17 |
18 | Vue.use(ElInput)
19 | ```
20 |
21 | or
22 |
23 | ```javascript
24 | import Vue from 'vue'
25 | import { ElInput } from 'el-input'
26 |
27 | Vue.component('el-input', ElInput)
28 | ```
29 |
30 | # Options
31 |
32 | | name | description | type | default |
33 | |-------------|-------------|-------------|-------------|
34 | | model | 绑定值，需双向绑定 | string|number ||
35 | | placeholder | 输入框占位文本 | string ||
36 | | suggestion | 输入建议 | string[] ||
37 | | disabled | 是否禁用 | boolean | false |
38 | | cache | 是否需要缓存 | boolean | false |
39 | | effect | 输入框效果，允许 text, number, special | string | text |
40 |
41 | # Development
42 | ```shell
43 | make dev
44 |
45 | # test
46 | make test
47 |
48 | # build
49 | make build
50 | ```
51 |
52 | # License
53 | [MIT](https://opensource.org/licenses/MIT)
54 |
--------------------------------------------------------------------------------
/packages/radio/README.md:
--------------------------------------------------------------------------------
1 | # el-radio
2 | > A el-radio component for Vue.js.
3 |
4 | ## Demo
5 | http://element-component.github.io/el-radio
6 |
7 | ## Installation
8 | ```shell
9 | npm i el-radio -D
10 | ```
11 |
12 | ## Usage
13 | ```javascript
14 | import Vue from 'vue'
15 | import ElRadio from 'el-radio'
16 | import 'element-theme-default/dist/radio.css'
17 |
18 | Vue.use(ElRadio)
19 | ```
20 |
21 | or
22 |
23 | ```javascript
24 | import Vue from 'vue'
25 | import { ElRadio } from 'el-radio'
26 |
27 | Vue.component('el-radio', ElRadio)
28 | ```
29 |
30 |
31 | ## Options
32 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
33 | |---------- |-------- |---------- |------------- |-------- |
34 | | model | 绑定值 | string | | |
35 | | value | 真实值 | string | | |
36 | | label | 显示值，默认显示 value | string | | |
37 | | disabled | 禁用 | boolean | true, false | false |
38 |
39 | ## Development
40 | ```shell
41 | make dev
42 |
43 | ## test
44 | make test
45 |
46 | ## build
47 | make build
48 | ```
49 |
50 | # License
51 | [MIT](https://opensource.org/licenses/MIT)
52 |
--------------------------------------------------------------------------------
/packages/theme-default/src/core/dropdown.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "../common/var.css";
3 | @import "./option.css";
4 |
5 | @component-namespace element {
6 |
7 | @b dropdown {
8 | background-color: var(--dropdown-fill);
9 | border: var(--dropdown-border);
10 | border-radius: var(--dropdown-radius);
11 | box-shadow: var(--dropdown-shadow);
12 | left: 0;
13 | list-style-type: none;
14 | margin: -var(--dropdown-border-width);
15 | margin-top: 5px;
16 | min-width: calc(var(--input-width) + 4);
17 | padding: 0;
18 | position: absolute;
19 | white-space: nowrap;
20 | z-index: var(--index-normal);
21 |
22 | @e empty {
23 | color: var(--dropdown-option-empty-color);
24 | font-size: var(--input-font-size);
25 | padding: 7px;
26 | text-align: center;
27 | }
28 |
29 | @e list {
30 | margin: 0;
31 | max-height: var(--cascader-height);
32 | overflow: auto;
33 | padding: 0;
34 | }
35 |
36 | @e option {
37 | max-height: 250px;
38 | overflow: auto;
39 | }
40 |
41 | &:empty {
42 | display: none;
43 | }
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/packages/input-number/README.md:
--------------------------------------------------------------------------------
1 | # el-input
2 | > A el-input component for Vue.js.
3 |
4 | # Demo
5 | http://element-component.github.io/el-input
6 |
7 | # Installation
8 | ```shell
9 | npm i el-input -D
10 | ```
11 |
12 | # Usage
13 | ```javascript
14 | import Vue from 'vue'
15 | import ElInput from 'el-input'
16 | import 'element-theme-default/dist/input.css'
17 |
18 | Vue.use(ElInput)
19 | ```
20 |
21 | or
22 |
23 | ```javascript
24 | import Vue from 'vue'
25 | import { ElInput } from 'el-input'
26 |
27 | Vue.component('el-input', ElInput)
28 | ```
29 |
30 | # Options
31 |
32 | | name | description | type | default |
33 | |-------------|-------------|-------------|-------------|
34 | | model | 绑定值，需双向绑定 | string|number ||
35 | | placeholder | 输入框占位文本 | string ||
36 | | suggestion | 输入建议 | string[] ||
37 | | disabled | 是否禁用 | boolean | false |
38 | | cache | 是否需要缓存 | boolean | false |
39 | | effect | 输入框效果，允许 text, number, special | string | text |
40 |
41 | # Development
42 | ```shell
43 | make dev
44 |
45 | # test
46 | make test
47 |
48 | # build
49 | make build
50 | ```
51 |
52 | # License
53 | [MIT](https://opensource.org/licenses/MIT)
54 |
--------------------------------------------------------------------------------
/packages/theme-default/src/index.css:
--------------------------------------------------------------------------------
1 | @import "./base.css";
2 | @import "./button.css";
3 | @import "./input.css";
4 | @import "./select.css";
5 | @import "./alert.css";
6 | @import "./notification.css";
7 | @import "./slider.css";
8 | @import "./checkbox.css";
9 | @import "./radio.css";
10 | @import "./switch.css";
11 | @import "./dropdown.css";
12 | @import "./loading.css";
13 | @import "./dialog.css";
14 | @import "./table.css";
15 | @import "./pagination.css";
16 | @import "./popover.css";
17 | @import "./tooltip.css";
18 | @import "./autocomplete.css";
19 | @import "./message.css";
20 | @import "./message-box.css";
21 | @import "./date-picker.css";
22 | @import "./time-picker.css";
23 | @import "./time-select.css";
24 | @import "./input-number.css";
25 | @import "./tag.css";
26 | @import "./breadcrumb.css";
27 | @import "./form.css";
28 | @import "./tabs.css";
29 | @import "./progress.css";
30 | @import "./tree.css";
31 | @import "./menu.css";
32 | @import "./upload.css";
33 | @import "./row.css";
34 | @import "./col.css";
35 | @import "./spinner.css";
36 | @import "./badge.css";
37 | @import "./card.css";
38 | @import "./rate.css";
39 | @import "./steps.css";
40 | @import "./step.css";
41 |
--------------------------------------------------------------------------------
/packages/theme-default/src/cascader.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./input.css";
3 | @import "./common/var.css";
4 | /*@import "./core/dropdown.css";*/
5 |
6 | @component-namespace element {
7 |
8 | @b cascader {
9 | display: inline-block;
10 | position: relative;
11 |
12 | @e dropdown {
13 | background-color: var(--cascader-menu-fill);
14 | border: var(--cascader-menu-border);
15 | border-radius: var(--cascader-menu-radius);
16 | box-shadow: var(--cascader-menu-submenu-shadow);
17 | margin-top: 5px;
18 | max-height: var(--cascader-height);
19 | position: absolute;
20 | white-space: nowrap;
21 | z-index: 10;
22 | }
23 |
24 | @e wrap {
25 | overflow: hidden;
26 | }
27 |
28 | @e menu {
29 | border: 0;
30 | box-shadow: none;
31 | display: inline-block;
32 | margin: 0;
33 | position: relative;
34 | vertical-align: top;
35 |
36 | &::before {
37 | border-left: var(--cascader-menu-border);
38 | content: " ";
39 | height: var(--cascader-height);
40 | left: 0;
41 | position: absolute;
42 | }
43 | }
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## 更新日志
2 |
3 | ### 1.0.0-rc.4（待发布）
4 |
5 | *2016-XX-XX*
6 |
7 | - 修复 Select 多选时选项变为空数组后 placeholder 不出现的问题
8 | - 修复 Time Picker 时间选择可滚动
9 | - 修复 Tooltip 有时会错位的问题
10 |
11 | #### 非兼容性更新
12 | - Select 组件样式的 `display` 属性默认值修改为 `block`
13 |
14 | ### 1.0.0-rc.3
15 |
16 | *2016-09-09*
17 |
18 | - 修复 Slider 存在输入框时，输入框与 Slider 的值不同步的问题
19 | - 修复 Steps 样式
20 | - 修复 无法安装的问题
21 |
22 | ### 1.0.0-rc.2
23 |
24 | *2016-09-09*
25 |
26 | - 修复 Upload 上传的问题，并增加上传成功和失败的钩子函数
27 | - Button 组件增加 `nativeType` 属性，用于组件内 `