add footer and demo-block

examples/app.vue

@@ -12,10 +12,14 @@
   }
 
   body {
-    font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
+    font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
     overflow: auto;
   }
 
+  .pure-g {
+    font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
+  }
+
   .pure-g [class *= "pure-u"] {
     font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
   }

examples/components/demo-block.vue

@@ -0,0 +1,165 @@
+<template>
+  <div
+    class="demo-block"
+    :class="[blockClass, { 'hover': hovering }]"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false">
+    <slot></slot>
+    <div class="demo-block-control" @click="isExpanded = !isExpanded">
+      <i :class="iconClass"></i>
+      <span v-show="hovering">{{ controlText }}</span>
+    </div>
+  </div>
+</template>
+
+<style>
+  .demo-block {
+    border: solid 1px #eaeefb;
+    border-radius: 4px;
+    transition: .2s;
+  
+    &.hover {
+      box-shadow: 0 6px 18px 0 rgba(232, 237, 250, .5);
+    }
+  
+    .source {
+      padding: 24px;
+    }
+    
+    .meta {
+      background-color: #fbfcfd;
+      border-top: solid 1px #eaeefb;
+      clear: both;
+      overflow: hidden;
+      height: 0;
+      transition: height .2s;
+    }
+
+    .description {
+      padding: 18px 24px;
+      width: 40%;
+      box-sizing: border-box;
+      border-left: solid 1px #eaeefb;
+      float: right;
+      font-size: 14px;
+      line-height: 1.5;
+      color: #5e6d82;
+      
+      p {
+        margin: 0;
+      }
+      
+      code {
+        background-color: #f4faff;
+        border: solid 1px #eaeefb;
+        margin: 0 4px;
+        padding: 0 4px;
+        font-size: 12px;
+      }
+    }
+    
+    .highlight {
+      width: 60%;
+      border-right: solid 1px #eaeefb;
+
+      pre {
+        margin: 0;
+      }
+      
+      code.hljs {
+        padding: 18px 24px;
+        margin: 0;
+        line-height: 1.4;
+        background-color: #fbfcfd;
+        border: none;
+        max-height: none;
+        border-radius: 0;
+      
+        &::before {
+          content: none;
+        }
+      }
+    }
+  
+    .demo-block-control {
+      border-top: solid 1px #eaeefb;
+      height: 36px;
+      box-sizing: border-box;
+      background-color: #fff;
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+      text-align: center;
+      margin-top: -1px;
+      color: #d3dce6;
+      cursor: pointer;
+      transition: .2s;
+
+      i {
+        font-size: 12px;
+        line-height: 36px;
+      }
+
+      span {
+        font-size: 14px;
+        line-height: 36px;
+      }
+      
+      &:hover {
+        color: #20a0ff;
+        background-color: rgba(32, 159, 255, .05);
+      }
+    }
+  }
+</style>
+
+<script type="text/babel">
+  export default {
+    data() {
+      return {
+        hovering: false,
+        isExpanded: false
+      };
+    },
+
+    computed: {
+      blockClass() {
+        return `demo-${ this.$router.currentRoute.path.split('/').pop() }`;
+      },
+
+      iconClass() {
+        return this.isExpanded ? 'el-icon-caret-top' : 'el-icon-caret-bottom';
+      },
+
+      controlText() {
+        return this.isExpanded ? '隐藏代码' : '显示代码';
+      },
+
+      codeArea() {
+        return this.$el.getElementsByClassName('meta')[0];
+      },
+
+      codeAreaHeight() {
+        if (this.$el.getElementsByClassName('description').length > 0) {
+          return Math.max(this.$el.getElementsByClassName('description')[0].clientHeight, this.$el.getElementsByClassName('highlight')[0].clientHeight);
+        }
+        return this.$el.getElementsByClassName('highlight')[0].clientHeight;
+      }
+    },
+
+    watch: {
+      isExpanded(val) {
+        this.codeArea.style.height = val ? `${ this.codeAreaHeight + 1 }px` : '0';
+      }
+    },
+
+    mounted() {
+      this.$nextTick(() => {
+        let highlight = this.$el.getElementsByClassName('highlight')[0];
+        if (this.$el.getElementsByClassName('description').length === 0) {
+          highlight.style.width = '100%';
+          highlight.borderRight = 'none';
+        }
+      });
+    }
+  };
+</script>

examples/components/footer.vue

@@ -0,0 +1,133 @@
+<template>
+  <footer class="footer">
+    <div class="container">
+       <div class="footer-main">
+         <p class="footer-main-title">Element 1.0 Hydrogen</p>
+         <span class="footer-main-link">反馈建议</span>
+         <span class="footer-main-link"><router-link to="/changelog">更新日志</router-link></span>
+       </div>
+      <div class="footer-social">
+        <el-popover
+          ref="weixin"
+          placement="top"
+          width="120"
+          class="footer-popover"
+          trigger="hover">
+          <div class="footer-popover-title">饿了么 UED</div>
+          <img src="../assets/images/qrcode.png" alt="">
+        </el-popover>
+        <i class="doc-icon-weixin elementdoc" v-popover:weixin></i>
+        <a href="//github.com/elemefe" target="_blank">
+          <i class="doc-icon-github elementdoc"></i>
+        </a>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style>
+  .footer {
+    height: 120px;
+    background-color: #324057;
+    color: #fff;
+    width: 100%;
+    z-index: 1000;
+  
+    * {
+      word-spacing: 0;
+    }
+
+    .container {
+      height: 100%;
+    }
+    
+    .footer-main {
+      font-size: 0;
+      padding-top: 40px;
+      display: inline-block;
+      
+      .footer-main-title {
+        line-height: 1;
+        font-size: 22px;
+        margin: 0;
+      }
+      
+      .footer-main-link {
+        display: inline-block;
+        margin: 12px 18px 0 0;
+        line-height: 1;
+        font-size: 12px;
+        color: #8492a6;
+
+        a {
+          color: #8492a6;
+          text-decoration: none;
+        }
+      }
+    }
+  
+    .footer-social {
+      float: right;
+      line-height: 120px;
+    
+      .footer-popover {
+        padding: 0;
+        min-width: 120px;
+        line-height: normal;
+        box-shadow: 0 0 11px 0 rgba(174, 187, 211, 0.24);
+
+        .footer-popover-title {
+          border-bottom: solid 1px #eaeefb;
+          height: 30px;
+          line-height: 30px;
+          text-align: center;
+          color: #99a9bf;
+          background-color: #f8f9fe;
+        }
+        
+        img {
+          size: 100px;
+          margin: 10px;
+        }
+      }
+      
+      .elementdoc {
+        transition: .3s;
+        display: inline-block;
+        line-height: 32px;
+        text-align: center;
+        color: #324057;
+        background-color: #fff;
+        size: 32px;
+        border-radius: 50%;
+        font-size: 22px;
+        &:hover {
+           color: #fff;
+           transform: scale(1.2);
+        }
+      }
+  
+      .doc-icon-weixin {
+        margin-right: 36px;
+        &:hover {
+          background-color: #26CB72;
+        }
+      }
+
+      .doc-icon-github {
+        margin-right: 0;
+        transform: translateY(8px);
+        position: relative;
+        &::before {
+          position: absolute;
+          left: 4px;
+          bottom: -6px;
+        }
+        &:hover {
+           transform: translateY(8px) scale(1.2);
+           background-color: #437AC0;
+        }
+      }
+    }
+  }
+</style>

examples/docs/alert.md

@@ -11,124 +11,146 @@
   .demo-box.demo-alert .el-alert {
     margin: 20px 0 0;
   }
+  
+  .demo-box.demo-alert .el-alert:first-child {
+    margin: 0;
+  }
 </style>
 
 ## 基本用法
 
-Alert 组件提供四种主题，由`type`属性指定，默认值为`info`，下面的示例展示了四种不同的主题。
-
-<div class="demo-box demo-alert">
-  <el-alert title="成功提示的文案" type="success"></el-alert>
-  <el-alert title="消息提示的文案" type="info"></el-alert>
-  <el-alert title="警告提示的文案" type="warning"></el-alert>
-  <el-alert title="错误提示的文案" type="error"></el-alert>
-</div>
-
+::: demo Alert 组件提供四种主题，由 `type` 属性指定，默认值为 `info`。
 ```html
-<el-alert title="成功提示的文案" type="success"></el-alert>
-<el-alert title="消息提示的文案" type="info"></el-alert>
-<el-alert title="警告提示的文案" type="warning"></el-alert>
-<el-alert title="错误提示的文案" type="error"></el-alert>
+<template>
+  <el-alert
+    title="成功提示的文案"
+    type="success">
+  </el-alert>
+  <el-alert
+    title="消息提示的文案"
+    type="info">
+  </el-alert>
+  <el-alert
+    title="警告提示的文案"
+    type="warning">
+  </el-alert>
+  <el-alert
+    title="错误提示的文案"
+    type="error">
+  </el-alert>
+</template>
 ```
+:::
 
 ## 自定义关闭按钮
 
-在alert组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。
-
-`closable`属性决定是否可关闭，接受`boolean`，默认为`true`。
-
-你可以设置`close-text`属性来代替右侧的关闭图标，注意：`close-text`必须为文本。
-
-设置`close`事件来设置关闭时的回调。
-
-下面的示例展示了上述三种情况：
-
-<div class="demo-box demo-alert">
-  <el-alert title="不可关闭的alert" type="success" :closable="false"></el-alert>
-  <el-alert title="自定义close-text" type="info" close-text="知道了"></el-alert>
-  <el-alert title="设置了回调的alert" type="warning" @close="hello"></el-alert>
-</div>
-
+::: demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable` 属性决定是否可关闭，接受 `boolean`，默认为 `true`。你可以设置 `close-text` 属性来代替右侧的关闭图标，注意：`close-text` 必须为文本。设置 `close` 事件来设置关闭时的回调。
 ```html
-<el-alert title="不可关闭" type="success" :closable="false"></el-alert>
-<el-alert title="自定义close-text" type="info" close-text="知道了"></el-alert>
-<el-alert title="设置了回调的alert" type="warning" @close="hello"></el-alert>
+<template>
+  <el-alert
+    title="不可关闭的 alert"
+    type="success"
+    :closable="false">
+  </el-alert>
+  <el-alert
+    title="自定义 close-text"
+    type="info"
+    close-text="知道了">
+  </el-alert>
+  <el-alert
+    title="设置了回调的 alert"
+    type="warning"
+    @close="hello">
+  </el-alert>
+</template>
+
+<script>
+  export default {
+    methods: {
+      hello() {
+        alert('Hello World!');
+      }
+    }
+  }
+</script>
 ```
+:::
 
 ## 带有 icon
 
-通过设置`show-icon`属性来显示alert的icon，这能更有效的向用户展示你的显示意图。
-
-<div class="demo-box demo-alert">
-  <el-alert title="成功提示的文案" type="success" show-icon></el-alert>
-  <el-alert title="消息提示的文案" type="info" show-icon></el-alert>
-  <el-alert title="警告提示的文案" type="warning" show-icon></el-alert>
-  <el-alert title="错误提示的文案" type="error" show-icon></el-alert>
-</div>
-
+::: demo 通过设置 `show-icon` 属性来显示 Alert 的 icon，这能更有效的向用户展示你的显示意图。
 ```html
-<el-alert title="成功提示的文案" type="success" show-icon></el-alert>
-<el-alert title="消息提示的文案" type="info" show-icon></el-alert>
-<el-alert title="警告提示的文案" type="warning" show-icon></el-alert>
-<el-alert title="错误提示的文案" type="error" show-icon></el-alert>
+<template>
+  <el-alert
+    title="成功提示的文案"
+    type="success"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="消息提示的文案"
+    type="info"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="警告提示的文案"
+    type="warning"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="错误提示的文案"
+    type="error"
+    show-icon>
+  </el-alert>
+</template>
 ```
+:::
 
 ## 带有辅助性文字介绍
 
-除了必填的`title`属性外，你可以设置`description`属性来帮助你更好的介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
-
-<div class="demo-box demo-alert">
-  <el-alert title="带辅助性文字介绍" type="success" description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"></el-alert>
-</div>
-
+::: demo 除了必填的 `title` 属性外，你可以设置 `description` 属性来帮助你更好的介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
 ```html
-<el-alert
-  title="带辅助性文字介绍"
-  type="success"
-  description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
-</el-alert>
+<template>
+  <el-alert
+    title="带辅助性文字介绍"
+    type="success"
+    description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
+  </el-alert>
+</template>
 ```
+:::
 
 ## 带有 icon 和辅助性文字介绍
 
-最后，这是一个同时具有 icon 和辅助性文字的样例。
-
-<div class="demo-box demo-alert">
-  <el-alert title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
-  <el-alert title="消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
-  <el-alert title="警告提示的文案" type="warning" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
-  <el-alert title="错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
-</div>
-
+::: demo 最后，这是一个同时具有 icon 和辅助性文字的样例。
 ```html
-<el-alert
-  title="成功提示的文案"
-  type="success"
-  description="文字说明文字说明文字说明文字说明文字说明文字说明"
-  show-icon>
-</el-alert>
-
-<el-alert
-  title="消息提示的文案"
-  type="info"
-  description="文字说明文字说明文字说明文字说明文字说明文字说明"
-  show-icon>
-</el-alert>
-
-<el-alert
-  title="警告提示的文案"
-  type="warning"
-  description="文字说明文字说明文字说明文字说明文字说明文字说明"
-  show-icon>
-</el-alert>
-
-<el-alert
-  title="错误提示的文案"
-  type="error"
-  description="文字说明文字说明文字说明文字说明文字说明文字说明"
-  show-icon>
-</el-alert>
+<template>
+  <el-alert
+    title="成功提示的文案"
+    type="success"
+    description="文字说明文字说明文字说明文字说明文字说明文字说明"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="消息提示的文案"
+    type="info"
+    description="文字说明文字说明文字说明文字说明文字说明文字说明"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="警告提示的文案"
+    type="warning"
+    description="文字说明文字说明文字说明文字说明文字说明文字说明"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="错误提示的文案"
+    type="error"
+    description="文字说明文字说明文字说明文字说明文字说明文字说明"
+    show-icon>
+  </el-alert>
+</template>
 ```
+:::
 
 ## Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

examples/docs/notification.md

@@ -73,15 +73,14 @@
 
 ## 基本用法
 
-Notification 组件提供通知功能，Element 注册了`$notify`方法，接收一个`options`字面量参数，最简单的条件下，你可以设置`title`字段和`message`字段，用于设置通知的标题和正文，下面是一个最简单的情况的样例：
-
-<div class="demo-box demo-notification">
-  <el-button :plain="true" @click.native="open">点击展示 Notification</el-button>
-</div>
-
+::: demo Notification 组件提供通知功能，Element 注册了 `$notify` 方法，接收一个 `options` 字面量参数，在最简单的情况下，你可以设置 `title` 字段和 `message` 字段，用于设置通知的标题和正文。
 ```html
 <template>
-  <el-button :plain="true" @click.native="open">点击展示 Notification</el-button>
+  <el-button
+    plain
+    @click.native="open">
+    点击展示 Notification
+  </el-button>
 </template>
 
 <script>
@@ -97,26 +96,33 @@ Notification 组件提供通知功能，Element 注册了`$notify`方法，接
   }
 </script>
 ```
+:::
 
 ## 带有 icon
 
-Element 也为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。
-
-通过`type`字段来设置，除此以外的值将被忽略，下面是四种类型的样例：
-
-<div class="demo-box demo-notification">
-  <el-button :plain="true" @click.native="open2">成功</el-button>
-  <el-button :plain="true" @click.native="open3">警告</el-button>
-  <el-button :plain="true" @click.native="open4">消息</el-button>
-  <el-button :plain="true" @click.native="open5">错误</el-button>
-</div>
-
+::: demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过 `type` 字段来设置，除此以外的值将被忽略。
 ```html
 <template>
-  <el-button :plain="true" @click.native="open2">成功</el-button>
-  <el-button :plain="true" @click.native="open3">警告</el-button>
-  <el-button :plain="true" @click.native="open4">消息</el-button>
-  <el-button :plain="true" @click.native="open5">错误</el-button>
+  <el-button
+    plain
+    @click.native="open2">
+    成功
+  </el-button>
+  <el-button
+    plain
+    @click.native="open3">
+    警告
+  </el-button>
+  <el-button
+    plain
+    @click.native="open4">
+    消息
+  </el-button>
+  <el-button
+    plain
+    @click.native="open5">
+    错误
+  </el-button>
 </template>
 
 <script>
@@ -157,20 +163,18 @@ Element 也为 Notification 组件准备了四种通知类型：`success`, `warn
   }
 </script>
 ```
+:::
 
 ## 不会自动关闭
 
-默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置 `duration`，可以控制关闭的时间间隔，特别的是，如果设置为`0`，则不会自动关闭，下面是一个不会自动关闭的样例：
-
-注意：`duration`接收一个`Number`，单位为毫秒，默认为`4500`。
-
-<div class="demo-box demo-notification">
-  <el-button :plain="true" @click.native="open6">不会自动关闭的 Notification</el-button>
-</div>
-
+::: demo 默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置 `duration`，可以控制关闭的时间间隔，特别的是，如果设置为 `0`，则不会自动关闭。注意：`duration` 接收一个 `Number`，单位为毫秒，默认为 `4500`。
 ```html
 <template>
-  <el-button :plain="true" @click.native="open6">不会自动关闭的 Notification</el-button>
+  <el-button
+    plain
+    @click.native="open6">
+    不会自动关闭的 Notification
+  </el-button>
 </template>
 
 <script>
@@ -187,18 +191,18 @@ Element 也为 Notification 组件准备了四种通知类型：`success`, `warn
   }
 </script>
 ```
+:::
 
 ## 回调函数
 
-Element 为关闭操作设置了回调函数，在关闭时会触发`onClose`，你可以通过设置`onClose`参数来处理后续操作，它是一个`Function`，下面是一个样例，会在控制台输出：Notification 已关闭。
-
-<div class="demo-box demo-notification">
-  <el-button :plain="true" @click.native="open7">带有回调函数的 Notification</el-button>
-</div>
-
+::: demo Element 为关闭操作设置了回调函数，在关闭时会触发 `onClose`，你可以通过设置 `onClose` 参数来处理后续操作，它是一个 `Function`。本例会在控制台输出：Notification 已关闭。
 ```html
 <template>
-  <el-button :plain="true" @click.native="open7">带有回调函数的 Notification</el-button>
+  <el-button
+    plain
+    @click.native="open7">
+    带有回调函数的 Notification
+  </el-button>
 </template>
 
 <script>
@@ -219,6 +223,7 @@ Element 为关闭操作设置了回调函数，在关闭时会触发`onClose`，
   }
 </script>
 ```
+:::
 
 ## 全局方法
 

examples/entry.js

@@ -4,9 +4,11 @@ import VueRouter from 'vue-router';
 import configRouter from './route.config';
 import Element from 'main/index.js';
 import 'packages/theme-default/src/index.css';
+import demoBlock from './components/demo-block.vue';
 
 Vue.use(Element);
 Vue.use(VueRouter);
+Vue.component('demo-block', demoBlock);
 
 const router = new VueRouter({
   base: __dirname,

examples/index.template.html

@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_1471936010_8874195.css">
     <title>ELEMENT</title>
   </head>
   <body>

scripts/cooking.demo.js

@@ -4,6 +4,13 @@ var md = require('markdown-it')();
 var Components = require('../components.json');
 var striptags = require('strip-tags');
 
+function convert(str){
+  str = str.replace(/(&#x)(\w{4});/gi,function($0){
+    return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g,"$2"),16));
+  });
+  return str;
+}
+
 cooking.set({
   entry: {
     app: './examples/entry.js',
@@ -56,27 +63,24 @@ cooking.add('vueMarkdown', {
     }],
     [require('markdown-it-container'), 'demo', {
       validate: function(params) {
-        return params.trim().match(/^demo\s+(.*)$/);
+        return params.trim().match(/^demo\s*(.*)$/);
       },
 
       render: function (tokens, idx) {
-        var m = tokens[idx].info.trim().match(/^demo\s+(.*)$/);
-
+        var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
         if (tokens[idx].nesting === 1) {
           var description = (m && m.length > 1) ? m[1] : '';
-          var html = striptags(tokens[idx + 1].content, 'script');
-
+          var html = convert(striptags(tokens[idx + 1].content, 'script'));
           var descriptionHTML = description
             ? '<div class="description">' + md.render(description) + '</div>'
             : '';
-
-          return `<section class="demo">
+          return `<demo-block class="demo-box">
                     <div class="source">${html}</div>
                     <div class="meta">
                       ${descriptionHTML}
                       <div class="highlight">`;
         }
-        return '</section>\n';
+        return '</div></div></demo-block>\n';
       }
     }]
   ],