Add ColorPicker component.

components.json

@@ -59,5 +59,6 @@
   "carousel-item": "./packages/carousel-item/index.js",
   "collapse": "./packages/collapse/index.js",
   "collapse-item": "./packages/collapse-item/index.js",
-  "cascader": "./packages/cascader/index.js"
+  "cascader": "./packages/cascader/index.js",
+  "color-picker": "./packages/color-picker/index.js"
 }

examples/docs/en-US/color-picker.md

@@ -0,0 +1,100 @@
+<script>
+  export default {
+    data() {
+      return {
+        color1: '#ff0',
+        color2: null,
+        color3: 'rgba(128, 33, 22, 0.8)',
+        color4: null
+      };
+    }
+  }
+</script>
+
+<style scoped>
+  .demo-box.demo-color-picker .source {
+    padding: 0;
+  }
+
+  .demo-box.demo-color-picker .block {
+    padding: 30px 24px;
+    overflow: hidden;
+    border-bottom: solid 1px #EFF2F6;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .demo-box.demo-color-picker .demonstration {
+    display: inline-block;
+    font-size: 14px;
+    width: 25%;
+    color: #8492a6;
+    line-height: 44px;
+  }
+</style>
+
+## ColorPicker
+
+ColorPicker is a color picker component that is used to solve the need to select a color in certain scenes.
+
+### Color
+
+:::demo ColorPicker usage is similar to DatePicker and requires v-model to bind a variable in a Vue instance. The bind variable's data type needs to be a string.
+```html
+<div class="block">
+  <span class="demonstration">Default value</span>
+  <el-color-picker v-model="color1"></el-color-picker>
+</div>
+<div class="block">
+  <span class="demonstration">Empty</span>
+  <el-color-picker v-model="color2"></el-color-picker>
+</div>
+
+<style>
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        color1: '#ff0',
+        color2: null
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Color and alpha
+
+:::demo ColorPicker supports normal colors, also supports alpha-channel colors, through the show-alpha attribute to control whether to support the use of transparency.
+```html
+<div class="block">
+  <span class="demonstration">Default value</span>
+  <el-color-picker v-model="color3" show-alpha></el-color-picker>
+</div>
+<div class="block">
+  <span class="demonstration">Empty</span>
+  <el-color-picker v-model="color4" show-alpha></el-color-picker>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        color3: 'rgba(128, 33, 22, 0.8)',
+        color4: null
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Attributes
+| Attribute | Description | Type | Accepted Values | Default |
+|---------- |-------- |---------- |-------------  |-------- |
+| show-alpha | Whether to display the alpha slider. | Boolean | — | false |
+| color-format | Write the v-model's color format. In the case of show-alpha is true, the default value is rgb, otherwise hex. | string | hsl, hsv, hex, rgb | hex |

examples/docs/zh-CN/color-picker.md

@@ -0,0 +1,100 @@
+<script>
+  export default {
+    data() {
+      return {
+        color1: '#ff0',
+        color2: null,
+        color3: 'rgba(128, 33, 22, 0.8)',
+        color4: null
+      };
+    }
+  }
+</script>
+
+<style scoped>
+  .demo-box.demo-color-picker .source {
+    padding: 0;
+  }
+
+  .demo-box.demo-color-picker .block {
+    padding: 30px 24px;
+    overflow: hidden;
+    border-bottom: solid 1px #EFF2F6;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .demo-box.demo-color-picker .demonstration {
+    display: inline-block;
+    font-size: 14px;
+    width: 25%;
+    color: #8492a6;
+    line-height: 44px;
+  }
+</style>
+
+## ColorPicker
+
+ColorPicker 是一个颜色选择器，该组件是用来解决某些场景下需要选择颜色的需求。
+
+### 选择颜色
+
+:::demo ColorPicker 用法与 DatePicker 类似，需要使用 v-model 来与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。
+```html
+<div class="block">
+  <span class="demonstration">有默认值</span>
+  <el-color-picker v-model="color1"></el-color-picker>
+</div>
+<div class="block">
+  <span class="demonstration">无默认值</span>
+  <el-color-picker v-model="color2"></el-color-picker>
+</div>
+
+<style>
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        color1: '#ff0',
+        color2: null
+      }
+    }
+  };
+</script>
+```
+:::
+
+### 选择颜色和透明度
+
+:::demo ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过 show-alpha 属性即可控制是否支持透明度的使用。
+```html
+<div class="block">
+  <span class="demonstration">有默认值</span>
+  <el-color-picker v-model="color3" show-alpha></el-color-picker>
+</div>
+<div class="block">
+  <span class="demonstration">无默认值</span>
+  <el-color-picker v-model="color4" show-alpha></el-color-picker>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        color3: 'rgba(128, 33, 22, 0.8)',
+        color4: null
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| show-alpha | 是否显示透明度 Slider。 | Boolean | — | false |
+| color-format | 写入 v-model 的颜色的格式。在 show-alpha 为 true 的情况下，默认值为 rgb，否则为 hex。 | string | hsl, hsv, hex, rgb | hex |

examples/nav.config.json

@@ -219,6 +219,10 @@
             {
               "path": "/collapse",
               "title": "Collapse 折叠面板"
+            },
+            {
+              "path": "/color-picker",
+              "title": "ColorPicker"
             }
           ]
         }
@@ -445,6 +449,10 @@
             {
               "path": "/collapse",
               "title": "Collapse"
+            },
+            {
+              "path": "/color-picker",
+              "title": "ColorPicker"
             }
           ]
         }

examples/play/component.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
-    <el-button>Test</el-button>
+    <el-button @click="value = '#fff'">Change Value</el-button>
+    <div>Value: {{ value }}</div>
+    <el-color-picker v-model="value"></el-color-picker>
+
+    <div>Value2: {{ value2 }}</div>
+    <el-color-picker v-model="value2" show-alpha></el-color-picker>
   </div>
 </template>
 
@@ -13,7 +18,10 @@
     },
 
     data() {
-      return {};
+      return {
+        value: '#bfcbd9',
+        value2: null
+      };
     }
   };
 </script>

packages/color-picker/cooking.conf.js

@@ -0,0 +1,6 @@
+var cooking = require('cooking');
+var gen = require('../../build/gen-single-config');
+
+cooking.set(gen(__dirname, 'ElColorPicker'));
+
+module.exports = cooking.resolve();

packages/color-picker/index.js

@@ -0,0 +1,8 @@
+import ColorPicker from './src/main';
+
+/* istanbul ignore next */
+ColorPicker.install = function(Vue) {
+  Vue.component(ColorPicker.name, ColorPicker);
+};
+
+export default ColorPicker;

packages/color-picker/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "element-color-picker",
+  "version": "0.0.0",
+  "description": "A color-picker component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/ElemeFE/element/tree/master/packages/color-picker",
+  "author": "elemefe",
+  "license": "MIT",
+  "dependencies": {}
+}