From 19fdda27ca82d8abd9453178b793efd8a6ad0d1f Mon Sep 17 00:00:00 2001
From: CIN <cin@cinlive.com>
Date: Thu, 20 Sep 2018 16:12:48 +0800
Subject: [PATCH] docs(color): add docs,demo for color

---
 examples/view/demos/color/demo-1.vue          |  35 +++
 examples/view/page/components/color/index.vue | 242 +++++++++++-------
 examples/view/router.js                       |   2 +-
 3 files changed, 184 insertions(+), 95 deletions(-)
 create mode 100644 examples/view/demos/color/demo-1.vue

diff --git a/examples/view/demos/color/demo-1.vue b/examples/view/demos/color/demo-1.vue
new file mode 100644
index 000000000..fbc35e28a
--- /dev/null
+++ b/examples/view/demos/color/demo-1.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <div class="color-demo blue"></div>
+    <div class="color-demo green"></div>
+    <div class="color-demo red"></div>
+    <div class="color-demo black-dark"></div>
+    <div class="color-demo generate-green-level-3"></div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import 'daoColor';
+
+.color-demo {
+  width: 15px;
+  height: 15px;
+  display: inline-block;
+}
+.blue {
+  background-color: $blue;
+}
+.green {
+  background-color: $green;
+}
+.red {
+  background-color: $red;
+}
+.black-dark {
+  background-color: $black-dark;
+}
+.generate-green-level-3 {
+  background-color: generate-color($green, -3);
+}
+</style>
+
diff --git a/examples/view/page/components/color/index.vue b/examples/view/page/components/color/index.vue
index a2cdbe3a0..88c57b834 100644
--- a/examples/view/page/components/color/index.vue
+++ b/examples/view/page/components/color/index.vue
@@ -1,99 +1,116 @@
 <template>
-  <div style="padding:0 50px;">
-  <h1 class="color-category">Color</h1>
-  <div :ref="'aaa'" v-if="true"></div>
-  <div class="color-demo-block" v-for="color in colors" ref="colors">
-    <span class="color-block" :class="color.name"></span>
-    <div class="info-block">
-      <p class="color-info">SCSS: ${{ color.name }}</p>
-      <p class="hex-info"><span class="name">HEX</span><span class="value">{{ color.hex }}</span></p>
-      <p class="rgb-info"><span class="name">RGB</span><span class="value">{{ color.rgb }}</span></p>
-    </div>
-  </div>
-  <h1 class="color-category">Grey</h1>
-  <div class="color-demo-block" v-for="color in greys">
-    <span class="color-block" :class="color"></span>
-    <div class="info-block">
-      <p class="color-info">SCSS: ${{ color }}</p>
-      <p class="hex-info"><span class="name">HEX</span><span class="value"></span></p>
-      <p class="rgb-info"><span class="name">RGB</span><span class="value"></span></p>
-    </div>
-  </div>
+  <div class="docs-color">
+    <docs-title :name="$t('color')" desc="dao-style 色彩库"></docs-title>
+    <docs-section>
+      <template slot="title">默认用法</template>
+      <template slot="content">
+        <demo-code>
+          <demo1 slot="demo"></demo1>
+          <code-reader slot="code" file="color/demo-1.vue"></code-reader>
+          <md-reader slot="desc">
+            `dao-color`是 dao-style 的色彩库，将 `dao-color.scss` 文件引入，你就可以轻松使用 `dao-color` scss 变量，还可以通过 `generate-color` scss 方法，生成更深或者更浅的颜色。
+          </md-reader>
+        </demo-code>
+      </template>
+    </docs-section>
+    <docs-section>
+      <template slot="title">
+        <docs-title
+          name="所有颜色"
+          desc="点击 SCSS 变量文字可以直接复制代码"
+          size="sm">
+        </docs-title>
+      </template>
+      <template slot="content">
+        <div>
+          <h1 class="color-category">Color</h1>
+          <div class="clearfix">
+            <div class="color-demo-block" v-for="color in colors">
+              <span class="color-block" :class="color"></span>
+              <div class="info-block">
+                <p class="color-info">
+                  <span class="scss-color"
+                    is="dao-clipboard"
+                    v-dao-select-all
+                    :content="`$${color}`">${{ color }}</span>
+                </p>
+                <p class="hex-info"><span class="name">HEX</span><span class="value"></span></p>
+                <p class="rgb-info"><span class="name">RGB</span><span class="value"></span></p>
+              </div>
+            </div>
+          </div>
+          <h1 class="color-category">Grey</h1>
+          <div class="clearfix">
+            <div class="color-demo-block" v-for="color in greys">
+              <span class="color-block" :class="color"></span>
+              <div class="info-block">
+                <p class="color-info">
+                  <span class="scss-color"
+                    is="dao-clipboard"
+                    v-dao-select-all
+                    :content="`$${color}`">${{ color }}</span>
+                </p>
+                <p class="hex-info"><span class="name">HEX</span><span class="value"></span></p>
+                <p class="rgb-info"><span class="name">RGB</span><span class="value"></span></p>
+              </div>
+            </div>
+          </div>
 
-  <h1>Color Palette</h1>
-  <table class="color-palette">
-    <tr class="color-block" :class="color.name" v-for="color in colors">
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-    </tr>
-    <tr class="pure-color-line">
-      <td colspan="7"></td>
-    </tr>
-    <tr class="transparent-color-line">
-      <td colspan="7"></td>
-    </tr>
-  </table>
-  <pre class="scss">@function generate-color($base-color, $level) {
-    @if $level == -3 {
-      @return desaturate(lighten($base-color, 36), 15);
-    } @else if $level == -2 {
-      @return desaturate(lighten($base-color, 25), 25);
-    } @else if $level == -1 {
-      @return lighten($base-color, 4);
-    } @else if $level == 1 {
-      @return desaturate(darken($base-color, 7), 11);
-    } @else if $level == 2 {
-      @return desaturate(darken($base-color, 13), 7);
-    } @else if $level == 3 {
-      @return desaturate(darken($base-color, 19), 9);
-    } @else {
-      @return $base-color;
-    }
-  }</pre>
-</div>
+          <h1>Color Palette</h1>
+          <div class="color-category-desc">点击颜色块可以直接复制代码</div>
+          <table class="color-palette">
+            <tr class="color-block" :class="color" v-for="color in colors">
+              <td v-for="num in [-3, -2, -1, 0, 1, 2, 3]">
+                <div class="color-palette-clipboard"
+                  is="dao-clipboard"
+                  v-dao-select-all
+                  :content="getColorPaletteCopyContent(color, num)"></div>
+              </td>
+            </tr>
+            <tr class="pure-color-line">
+              <td colspan="7"></td>
+            </tr>
+            <tr class="transparent-color-line">
+              <td colspan="7"></td>
+            </tr>
+          </table>
+          <pre class="scss">
+          @function generate-color($base-color, $level) {
+            @if $level == -3 {
+              @return desaturate(lighten($base-color, 36), 15);
+            } @else if $level == -2 {
+              @return desaturate(lighten($base-color, 25), 25);
+            } @else if $level == -1 {
+              @return lighten($base-color, 4);
+            } @else if $level == 1 {
+              @return desaturate(darken($base-color, 7), 11);
+            } @else if $level == 2 {
+              @return desaturate(darken($base-color, 13), 7);
+            } @else if $level == 3 {
+              @return desaturate(darken($base-color, 19), 9);
+            } @else {
+              @return $base-color;
+            }
+          }</pre>
+        </div>
+      </template>
+    </docs-section>
+  </div>
 </template>
 
 <script>
+import Demo1 from '@demos/color/demo-1';
 
 export default {
-  name: 'DaoColorDemo',
+  name: 'DocsColor',
   data() {
     const colors = [
-      {
-        name: 'blue',
-        hex: '',
-        rgb: '',
-      },
-      {
-        name: 'green',
-        hex: '',
-        rgb: '',
-      },
-      {
-        name: 'yellow',
-        hex: '',
-        rgb: '',
-      },
-      {
-        name: 'orange',
-        hex: '',
-        rgb: '',
-      },
-      {
-        name: 'red',
-        hex: '',
-        rgb: '',
-      },
-      {
-        name: 'purple',
-        hex: '',
-        rgb: '',
-      },
+      'blue',
+      'green',
+      'yellow',
+      'orange',
+      'red',
+      'purple',
     ];
     const greys = [
       'black-dark',
@@ -112,16 +129,25 @@ export default {
       greys,
     };
   },
+  methods: {
+    getColorPaletteCopyContent(color, level) {
+      return `generate-color($${color}, ${level})`;
+    },
+  },
+  components: {
+    Demo1,
+  },
 };
 
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 @import 'daoColor';
 
 @function getColor($value) {
   @return 'rgb('+red($value)+', '+green($value)+', '+blue($value)+')';
 }
+
 @mixin hover-card($generate-color) {
   background-color: $generate-color;
   $content: 'HEX: '+$generate-color + ' RGB: '+getColor($generate-color);
@@ -138,19 +164,39 @@ export default {
     white-space: pre;
   }
 }
-// @import './mixins.scss';
+
 $colors: ( 'blue': $blue, 'green': $green, 'yellow': $yellow, 'orange': $orange, 'red': $red, 'purple': $purple, );
-$greys: ( 'black-dark': $black-dark, 'black-darker': $black-darker, 'black-light': $black-light, 'grey-dark': $grey-dark, 'grey-light': $grey-light, 'white-dark': $white-dark, 'white-dark-lighter': $white-dark-lighter, 'white-light': $white-light, 'white-lighter': $white-lighter, 'white': $white, );
+$greys: ( 'black-dark': $black-dark, 'black-darker': $black-darker, 'black-light': $black-light, 'grey-dark': $grey-dark, 'grey-light': $grey-light, 'white-dark': $white-dark, 'white-dark-lighter': $white-dark-lighter, 'white-light': $white-light, 'white-lighter': $white-lighter, 'white': $white );
+
+.clearfix {
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+    clear: both;
+  }
+}
+
 .color-category {
   font-size: 30px;
   font-weight: 400;
   color: $black-dark;
+  padding-bottom: 10px;
+}
+
+.color-category-desc {
+  font-size: 14px;
+  font-weight: 400;
+  color: $grey-dark;
+  padding-bottom: 10px;
 }
 
 .color-demo-block {
-  margin-bottom: 45px;
+  margin-bottom: 30px;
+  float: left;
+  width: 180px;
   .color-block {
-    display: inline-block;
+    display: block;
     width: 60px;
     height: 60px;
     border-radius: 4px;
@@ -168,19 +214,23 @@ $greys: ( 'black-dark': $black-dark, 'black-darker': $black-darker, 'black-light
           @at-root &+.info-block .rgb-info .name:after {
             content: getColor($value);
             padding-left: 10px;
+            user-select: text!important;
           }
         }
       }
     }
   }
   .info-block {
-    display: inline-block;
+    display: block;
     font-size: 14px;
     line-height: 1;
-    margin-left: 30px;
+    margin-top: 10px;
     vertical-align: top;
     .color-info {
       margin: 0 0 12px;
+      .scss-color:before {
+        content: 'SCSS: ';
+      }
     }
     .hex-info,
     .rgb-info {
@@ -202,6 +252,10 @@ $greys: ( 'black-dark': $black-dark, 'black-darker': $black-darker, 'black-light
       width: 60px;
       height: 50px;
     }
+    .color-palette-clipboard {
+      width: 100%;
+      height: 100%;
+    }
     @each $key,
     $value in $colors {
       &.#{$key} td {
diff --git a/examples/view/router.js b/examples/view/router.js
index 0cc999f4d..9c0a5b356 100644
--- a/examples/view/router.js
+++ b/examples/view/router.js
@@ -284,7 +284,7 @@ const components = [
     path: 'color',
     meta: {
       available: true,
-      docs: false,
+      docs: true,
       test: false,
     },
   },