Chore: speeding up doc building (#14510)

CHANGELOG.fr-FR.md

@@ -870,4 +870,4 @@
   - Les paramètres de la méthode `row-class-name` et `row-style` sont maintenant un objet
 
 ##
-<i><sup><sup>*</sup> Rendre du HTML arbitraire de façon dynamique sur votre site Web peut être très dangereux car cela peut facilement mener à[des attaques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Donc quand `dangerouslyUseHTMLString' est activé, assurez-vous que le contenu du `message' est fiable, et **ne jamais** assigner `message` au contenu fourni par l'utilisateur.</i>.
+<i><sup>*</sup> Rendre du HTML arbitraire de façon dynamique sur votre site Web peut être très dangereux car cela peut facilement mener à[des attaques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Donc quand `dangerouslyUseHTMLString' est activé, assurez-vous que le contenu du `message' est fiable, et **ne jamais** assigner `message` au contenu fourni par l'utilisateur.</i>.

build/md-loader/config.js

@@ -0,0 +1,26 @@
+const Config = require('markdown-it-chain');
+const anchorPlugin = require('markdown-it-anchor');
+const slugify = require('transliteration').slugify;
+const containers = require('./containers');
+const overWriteFenceRule = require('./fence');
+
+const config = new Config();
+
+config
+  .options.html(true).end()
+
+  .plugin('anchor').use(anchorPlugin, [
+    {
+      level: 2,
+      slugify: slugify,
+      permalink: true,
+      permalinkBefore: true
+    }
+  ]).end()
+
+  .plugin('containers').use(containers).end();
+
+const md = config.toMd();
+overWriteFenceRule(md);
+
+module.exports = md;

build/md-loader/containers.js

@@ -0,0 +1,24 @@
+const mdContainer = require('markdown-it-container');
+
+module.exports = md => {
+  md.use(mdContainer, 'demo', {
+    validate(params) {
+      return params.trim().match(/^demo\s*(.*)$/);
+    },
+    render(tokens, idx) {
+      const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
+      if (tokens[idx].nesting === 1) {
+        const description = m && m.length > 1 ? m[1] : '';
+        const content = tokens[idx + 1].type === 'fence' ? tokens[idx + 1].content : '';
+        return `<demo-block>
+        <div>${md.render(description)}</div>
+        <!--element-demo: ${content}:element-demo-->
+        `;
+      }
+      return '</demo-block>';
+    }
+  });
+
+  md.use(mdContainer, 'tip');
+  md.use(mdContainer, 'warning');
+};

build/md-loader/fence.js

@@ -0,0 +1,14 @@
+// 覆盖默认的 fence 渲染策略
+module.exports = md => {
+  const defaultRender = md.renderer.rules.fence;
+  md.renderer.rules.fence = (tokens, idx, options, env, self) => {
+    const token = tokens[idx];
+    // 判断该 fence 是否在 :::demo 内
+    const prevToken = tokens[idx - 1];
+    const isInDemoContainer = prevToken && prevToken.nesting === 1 && prevToken.info.trim().match(/^demo\s*(.*)$/);
+    if (token.info === 'html' && isInDemoContainer) {
+      return `<template slot="highlight"><pre v-pre><code class="html">${md.utils.escapeHtml(token.content)}</code></pre></template>`;
+    }
+    return defaultRender(tokens, idx, options, env, self);
+  };
+};

build/md-loader/index.js

@@ -0,0 +1,67 @@
+const {
+  stripScript,
+  stripTemplate,
+  genInlineComponentText
+} = require('./util');
+const md = require('./config');
+
+module.exports = function(source) {
+  const content = md.render(source);
+
+  const startTag = '<!--element-demo:';
+  const startTagLen = startTag.length;
+  const endTag = ':element-demo-->';
+  const endTagLen = endTag.length;
+
+  let componenetsString = '';
+  let id = 0; // demo 的 id
+  let output = []; // 输出的内容
+  let start = 0; // 字符串开始位置
+
+  let commentStart = content.indexOf(startTag);
+  let commentEnd = content.indexOf(endTag, commentStart + startTagLen);
+  while (commentStart !== -1 && commentEnd !== -1) {
+    output.push(content.slice(start, commentStart));
+
+    const commentContent = content.slice(commentStart + startTagLen, commentEnd);
+    const html = stripTemplate(commentContent);
+    const script = stripScript(commentContent);
+    let demoComponentContent = genInlineComponentText(html, script);
+    const demoComponentName = `element-demo${id}`;
+    output.push(`<${demoComponentName} slot="source" />`);
+    componenetsString += `${JSON.stringify(demoComponentName)}: ${demoComponentContent},`;
+
+    // 重新计算下一次的位置
+    id++;
+    start = commentEnd + endTagLen;
+    commentStart = content.indexOf(startTag, start);
+    commentEnd = content.indexOf(endTag, commentStart + startTagLen);
+  }
+
+  // 仅允许在 demo 不存在时，才可以在 Markdown 中写 script 标签
+  // todo: 优化这段逻辑
+  let pageScript = '';
+  if (componenetsString) {
+    pageScript = `<script>
+      export default {
+        name: 'component-doc',
+        components: {
+          ${componenetsString}
+        }
+      }
+    </script>`;
+  } else if (content.indexOf('<script>') === 0) { // 硬编码，有待改善
+    start = content.indexOf('</script>') + '</script>'.length;
+    pageScript = content.slice(0, start);
+  }
+
+  output.push(content.slice(start));
+  return `
+    <template>
+      <section class="content element-doc">
+        ${output.join('')}
+      </section>
+    </template>
+    ${pageScript}
+  `;
+};

build/md-loader/util.js

@@ -0,0 +1,79 @@
+const { compileTemplate } = require('@vue/component-compiler-utils');
+const compiler = require('vue-template-compiler');
+
+function stripScript(content) {
+  const result = content.match(/<(script)>([\s\S]+)<\/\1>/);
+  return result && result[2] ? result[2].trim() : '';
+}
+
+function stripStyle(content) {
+  const result = content.match(/<(style)\s*>([\s\S]+)<\/\1>/);
+  return result && result[2] ? result[2].trim() : '';
+}
+
+// 编写例子时不一定有 template。所以采取的方案是剔除其他的内容
+function stripTemplate(content) {
+  content = content.trim();
+  if (!content) {
+    return content;
+  }
+  return content.replace(/<(script|style)[\s\S]+<\/\1>/g, '').trim();
+}
+
+function pad(source) {
+  return source
+    .split(/\r?\n/)
+    .map(line => `  ${line}`)
+    .join('\n');
+}
+
+function genInlineComponentText(template, script) {
+  // https://github.com/vuejs/vue-loader/blob/master/lib/loaders/templateLoader.js#L29
+  const finalOptions = {
+    source: `<div>${template}</div>`,
+    filename: 'inline-component', // TODO：这里有待调整
+    compiler
+  };
+  const compiled = compileTemplate(finalOptions);
+  // tips
+  if (compiled.tips && compiled.tips.length) {
+    compiled.tips.forEach(tip => {
+      console.warn(tip);
+    });
+  }
+  // errors
+  if (compiled.errors && compiled.errors.length) {
+    console.error(
+      `\n  Error compiling template:\n${pad(compiled.source)}\n` +
+        compiled.errors.map(e => `  - ${e}`).join('\n') +
+        '\n'
+    );
+  }
+  let demoComponentContent = `
+    ${compiled.code}
+  `;
+  // todo: 这里采用了硬编码有待改进
+  script = script.trim();
+  if (script) {
+    script = script.replace(/export\s+default/, 'const democomponentExport =');
+  } else {
+    script = 'const democomponentExport = {}';
+  }
+  demoComponentContent = `(function demo() {
+    ${demoComponentContent}
+    ${script}
+    return {
+      ...democomponentExport,
+      render,
+      staticRenderFns
+    }
+  })()`;
+  return demoComponentContent;
+}
+
+module.exports = {
+  stripScript,
+  stripStyle,
+  stripTemplate,
+  genInlineComponentText
+};

build/strip-tags.js

@@ -1,34 +0,0 @@
-/*!
- * strip-tags <https://github.com/jonschlinkert/strip-tags>
- *
- * Copyright (c) 2015 Jon Schlinkert, contributors.
- * Licensed under the MIT license.
- */
-
-'use strict';
-
-var cheerio = require('cheerio');
-
-exports.strip = function(str, tags) {
-  var $ = cheerio.load(str, {decodeEntities: false});
-
-  if (!tags || tags.length === 0) {
-    return str;
-  }
-
-  tags = !Array.isArray(tags) ? [tags] : tags;
-  var len = tags.length;
-
-  while (len--) {
-    $(tags[len]).remove();
-  }
-
-  return $.html();
-};
-
-exports.fetch = function(str, tag) {
-  var $ = cheerio.load(str, {decodeEntities: false});
-  if (!tag) return str;
-
-  return $(tag).html();
-};

build/webpack.demo.js

@@ -7,30 +7,12 @@ const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-const md = require('markdown-it')();
-const slugify = require('transliteration').slugify;
 
-const striptags = require('./strip-tags');
 const config = require('./config');
 
 const isProd = process.env.NODE_ENV === 'production';
 const isPlay = !!process.env.PLAY_ENV;
 
-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;
-}
-
-function wrap(render) {
-  return function() {
-    return render.apply(this, arguments)
-      .replace('<code v-pre class="', '<code class="hljs ')
-      .replace('<code>', '<code class="hljs">');
-  };
-}
-
 const webpackConfig = {
   mode: process.env.NODE_ENV,
   entry: isProd ? {
@@ -93,67 +75,24 @@ const webpackConfig = {
       },
       {
         test: /\.md$/,
-        loaders: [
-          {
-            loader: 'vue-loader'
-          },
+        use: [
           {
-            loader: 'vue-markdown-loader/lib/markdown-compiler',
+            loader: 'vue-loader',
             options: {
-              preventExtract: true,
-              raw: true,
-              preprocess: function(MarkdownIt, source) {
-                MarkdownIt.renderer.rules.table_open = function() {
-                  return '<table class="table">';
-                };
-                MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
-                return source;
-              },
-              use: [
-                [require('markdown-it-anchor'), {
-                  level: 2,
-                  slugify: slugify,
-                  permalink: true,
-                  permalinkBefore: true
-                }],
-                [require('markdown-it-container'), 'demo', {
-                  validate: function(params) {
-                    return params.trim().match(/^demo\s*(.*)$/);
-                  },
-
-                  render: function(tokens, idx) {
-                    var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
-                    if (tokens[idx].nesting === 1) {
-                      var description = (m && m.length > 1) ? m[1] : '';
-                      var content = tokens[idx + 1].content;
-                      var html = convert(striptags.strip(content, ['script', 'style'])).replace(/(<[^>]*)=""(?=.*>)/g, '$1');
-                      var script = striptags.fetch(content, 'script');
-                      var style = striptags.fetch(content, 'style');
-                      var jsfiddle = { html: html, script: script, style: style };
-                      var descriptionHTML = description
-                        ? md.render(description)
-                        : '';
-
-                      jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle));
-
-                      return `<demo-block class="demo-box" :jsfiddle="${jsfiddle}">
-                                <div class="source" slot="source">${html}</div>
-                                ${descriptionHTML}
-                                <div class="highlight" slot="highlight">`;
-                    }
-                    return '</div></demo-block>\n';
-                  }
-                }],
-                [require('markdown-it-container'), 'tip'],
-                [require('markdown-it-container'), 'warning']
-              ]
+              compilerOptions: {
+                preserveWhitespace: false
+              }
             }
+          },
+          {
+            loader: path.resolve(__dirname, './md-loader/index.js')
           }
         ]
       },
       {
         test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
         loader: 'url-loader',
+        // todo: 这种写法有待调整
         query: {
           limit: 10000,
           name: path.posix.join('static', '[name].[hash:7].[ext]')
@@ -189,6 +128,11 @@ const webpackConfig = {
 };
 
 if (isProd) {
+  webpackConfig.externals = {
+    vue: 'Vue',
+    'vue-router': 'VueRouter',
+    'highlight.js': 'hljs'
+  };
   webpackConfig.plugins.push(
     new MiniCssExtractPlugin({
       filename: '[name].[contenthash:7].css'

examples/components/demo-block.vue

@@ -4,12 +4,16 @@
     :class="[blockClass, { 'hover': hovering }]"
     @mouseenter="hovering = true"
     @mouseleave="hovering = false">
-    <slot name="source"></slot>
+    <div class="source">
+      <slot name="source"></slot>
+    </div>
     <div class="meta" ref="meta">
       <div class="description" v-if="$slots.default">
         <slot></slot>
       </div>
-      <slot name="highlight"></slot>
+      <div class="highlight">
+        <slot name="highlight"></slot>
+      </div>
     </div>
     <div
       class="demo-block-control"
@@ -179,11 +183,17 @@
 <script type="text/babel">
   import compoLang from '../i18n/component.json';
   import Element from 'main/index.js';
+  import { stripScript, stripStyle, stripTemplate } from '../util';
   const { version } = Element;
 
   export default {
     data() {
       return {
+        jsfiddle: {
+          script: '',
+          html: '',
+          style: ''
+        },
         hovering: false,
         isExpanded: false,
         fixedControl: false,
@@ -191,13 +201,6 @@
       };
     },
 
-    props: {
-      jsfiddle: Object,
-      default() {
-        return {};
-      }
-    },
-
     methods: {
       goJsfiddle() {
         const { script, html, style } = this.jsfiddle;
@@ -299,6 +302,25 @@
       }
     },
 
+    created() {
+      const highlight = this.$slots.highlight;
+      if (highlight && highlight[0]) {
+        let code = '';
+        let cur = highlight[0];
+        if (cur.tag === 'pre' && (cur.children && cur.children[0])) {
+          cur = cur.children[0];
+          if (cur.tag === 'code') {
+            code = cur.children[0].text;
+          }
+        }
+        if (code) {
+          this.jsfiddle.html = stripTemplate(code);
+          this.jsfiddle.script = stripScript(code);
+          this.jsfiddle.style = stripStyle(code);
+        }
+      }
+    },
+
     mounted() {
       this.$nextTick(() => {
         let highlight = this.$el.getElementsByClassName('highlight')[0];

examples/components/header.vue

@@ -55,9 +55,15 @@
       height: 100%;
       line-height: 80px;
       background: transparent;
-      @utils-clearfix;
       padding: 0;
       margin: 0;
+      &::before, &::after {
+        display: table;
+        content: "";
+      }
+      &::after {
+        clear: both;
+      }
     }
 
     .nav-gap {

examples/demo-styles/alert.scss

@@ -0,0 +1,7 @@
+.demo-block.demo-alert .el-alert {
+  margin: 20px 0 0;
+}
+
+.demo-block.demo-alert .el-alert:first-child {
+  margin: 0;
+}

examples/demo-styles/badge.scss

@@ -0,0 +1,19 @@
+.demo-badge.demo-block .el-dropdown {
+  vertical-align: middle;
+}
+.demo-badge.demo-block {
+  .share-button {
+    width: 36px;
+    padding: 10px;
+  }
+
+  .mark {
+    margin-top: 8px;
+    line-height: 1;
+    float: right;
+  }
+
+  .item {
+    margin-right: 40px;
+  }
+}

examples/demo-styles/border.scss

@@ -0,0 +1,44 @@
+.demo-border .text {
+  width: 15%;
+}
+.demo-border .line {
+  width: 70%;
+}
+.demo-border .line div {
+  width: 100%;
+  height: 0;
+  border: 1px solid #eee;
+}
+.demo-border .line .dashed {
+  border: 2px dashed #eee;
+}
+.demo-shadow {
+  height: 100px;
+  width: 50%;
+  border: 1px solid #eee;
+}
+.demo-shadow-text {
+  line-height: 50px;
+  color: #666;
+  font-size: 14px;
+}
+.demo-radius .title {
+  color: #666;
+  font-size: 18px;
+  margin: 10px 0;
+}
+.demo-radius .value {
+  color: #333;
+  font-size: 16px;
+  margin: 10px 0;
+}
+.demo-radius .radius {
+  height: 60px;
+  width: 70%;
+  border: 1px solid #d7dae2;
+  border-radius: 0;
+  margin-top: 20px;
+}
+.demo-radius .radius-30 {
+  border-radius: 30px;
+}

examples/demo-styles/button.scss

@@ -0,0 +1,21 @@
+.demo-block.demo-button {
+  .el-row {
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-button + .el-button {
+    margin-left: 10px;
+  }
+  .el-button-group {
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+
+    & + .el-button-group {
+      margin-left: 10px;
+    }
+  }
+}

examples/demo-styles/card.scss

@@ -0,0 +1,33 @@
+.demo-block.demo-card {
+  .text {
+    font-size: 14px;
+  }
+
+  .time {
+    font-size: 13px;
+    color: #999;
+  }
+
+  .bottom {
+    margin-top: 13px;
+    line-height: 12px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+  }
+
+  .box-card {
+    width: 480px;
+  }
+}

examples/demo-styles/carousel.scss

@@ -0,0 +1,47 @@
+.demo-carousel .block {
+  padding: 30px;
+  text-align: center;
+  border-right: solid 1px #eff2f6;
+  display: inline-block;
+  width: 50%;
+  box-sizing: border-box;
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.demo-carousel .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.demo-carousel .el-carousel__container {
+  text-align: center;
+}
+
+.demo-carousel .el-carousel__item {
+  h3 {
+    color: #fff;
+    font-size: 18px;
+    line-height: 300px;
+    margin: 0;
+  }
+  &:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  &:nth-child(2n + 1) {
+    background-color: #d3dce6;
+  }
+}
+
+.demo-carousel .small h3 {
+  font-size: 14px;
+  line-height: 150px;
+}
+
+.demo-carousel .medium h3 {
+  font-size: 14px;
+  line-height: 200px;
+}

examples/demo-styles/cascader.scss

@@ -0,0 +1,28 @@
+.demo-cascader {
+  .el-cascader {
+    width: 222px;
+  }
+}
+.demo-cascader-size {
+  .el-cascader {
+    vertical-align: top;
+    margin-right: 15px;
+  }
+}
+.demo-cascader .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px #eff2f6;
+  display: inline-block;
+  width: 50%;
+  box-sizing: border-box;
+  &:last-child {
+    border-right: none;
+  }
+}
+.demo-cascader .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}

examples/demo-styles/collapse.scss

@@ -0,0 +1,7 @@
+.demo-collapse {
+  .el-collapse-item__header {
+    .header-icon {
+      margin-left: 5px;
+    }
+  }
+}

examples/demo-styles/color-picker.scss

@@ -0,0 +1,20 @@
+.demo-color-picker .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px #eff2f6;
+  display: inline-block;
+  width: 50%;
+  box-sizing: border-box;
+  &:last-child {
+    border-right: none;
+  }
+}
+.demo-color-picker .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+.demo-color-picker .el-color-picker + .el-color-picker {
+  margin-left: 20px;
+}

examples/demo-styles/color.scss

@@ -0,0 +1,72 @@
+.demo-color-box {
+  position: relative;
+  border-radius: 4px;
+  padding: 20px;
+  margin: 5px 0;
+  height: 114px;
+  box-sizing: border-box;
+  color: #fff;
+  font-size: 14px;
+
+  & .value {
+    font-size: 12px;
+    opacity: 0.69;
+    line-height: 24px;
+  }
+}
+.demo-color-box-other {
+  height: 74px;
+  margin: 10px 0 !important;
+  border-radius: 4px 4px 4px 4px !important;
+  padding: 15px 20px;
+}
+.demo-color-box-group {
+  .demo-color-box {
+    border-radius: 0;
+    margin: 0;
+  }
+  .demo-color-box:first-child {
+    border-radius: 4px 4px 0 0;
+  }
+  .demo-color-box:last-child {
+    border-radius: 0 0 4px 4px;
+  }
+}
+.bg-color-sub {
+  width: 100%;
+  height: 40px;
+  left: 0;
+  bottom: 0;
+  position: absolute;
+  border-radius: 0 0 4px 4px;
+}
+.bg-blue-sub-item {
+  width: 11.1111111%;
+  height: 100%;
+  display: inline-block;
+}
+.bg-blue-sub-item:first-child {
+  border-radius: 0 0 0 4px;
+}
+.bg-success-sub-item {
+  width: 50%;
+  height: 100%;
+  display: inline-block;
+}
+.bg-success-sub-item:first-child {
+  border-radius: 0 0 0 4px;
+}
+.bg-success-sub-item:last-child {
+  border-radius: 0 0 4px 0;
+}
+.bg-transparent {
+  border: 1px solid #fcc3c3;
+  color: #303133;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 98 L100 0 L100 1 L1 98' fill='%23FCC3C3' /></svg>");
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 100% 100%, auto;
+}
+.demo-color-box-lite {
+  color: #303133;
+}

examples/demo-styles/container.scss

@@ -0,0 +1,43 @@
+.el-header,
+.el-footer {
+  background-color: #b3c0d1;
+  color: #333;
+  line-height: 60px;
+}
+
+.el-aside {
+  color: #333;
+}
+
+#chang-jian-ye-mian-bu-ju + .demo-container {
+  .el-header,
+  .el-footer {
+    text-align: center;
+  }
+
+  .el-aside {
+    background-color: #d3dce6;
+    text-align: center;
+    line-height: 200px;
+  }
+
+  .el-main {
+    background-color: #e9eef3;
+    color: #333;
+    text-align: center;
+    line-height: 160px;
+  }
+
+  & > .source > .el-container {
+    margin-bottom: 40px;
+
+    &:nth-child(5) .el-aside,
+    &:nth-child(6) .el-aside {
+      line-height: 260px;
+    }
+
+    &:nth-child(7) .el-aside {
+      line-height: 320px;
+    }
+  }
+}

examples/demo-styles/date-picker.scss

@@ -0,0 +1,36 @@
+.demo-block.demo-date-picker .source > div {
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.demo-date-picker .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px #eff2f6;
+  flex: 1;
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.demo-date-picker .container {
+  flex: 1;
+  border-right: solid 1px #eff2f6;
+  .block {
+    border-right: none;
+    &:last-child {
+      border-top: solid 1px #eff2f6;
+    }
+  }
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.demo-date-picker .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}

examples/demo-styles/datetime-picker.scss

@@ -0,0 +1,21 @@
+.demo-block.demo-datetime-picker .source {
+  padding: 0;
+  display: flex;
+}
+
+.demo-datetime-picker .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px #eff2f6;
+  flex: 1;
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.demo-datetime-picker .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}

examples/demo-styles/dialog.scss

@@ -0,0 +1,20 @@
+.demo-block.demo-dialog {
+  .dialog-footer button:first-child {
+    margin-right: 10px;
+  }
+  .full-image {
+    width: 100%;
+  }
+  .el-dialog__wrapper {
+    margin: 0;
+  }
+  .el-select {
+    width: 300px;
+  }
+  .el-input {
+    width: 300px;
+  }
+  .el-button--text {
+    margin-right: 15px;
+  }
+}

examples/demo-styles/dropdown.scss

@@ -0,0 +1,37 @@
+.demo-block {
+  .el-dropdown {
+    vertical-align: top;
+
+    & + .el-dropdown {
+      margin-left: 15px;
+    }
+  }
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409eff;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+}
+
+.block-col-2 {
+  margin: -24px;
+
+  .el-col {
+    padding: 30px 0;
+    text-align: center;
+    border-right: 1px solid #eff2f6;
+
+    &:last-child {
+      border-right: 0;
+    }
+  }
+}
+
+.demo-dropdown .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}

examples/demo-styles/form.scss

@@ -0,0 +1,73 @@
+.demo-form.demo-zh-CN {
+  .el-select .el-input {
+    width: 380px;
+  }
+  .el-form {
+    width: 460px;
+  }
+
+  .line {
+    text-align: center;
+  }
+
+  .el-checkbox-group {
+    width: 320px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    &:after,
+    &:before {
+      content: " ";
+      display: table;
+    }
+    &:after {
+      clear: both;
+      visibility: hidden;
+      font-size: 0;
+      height: 0;
+    }
+
+    .el-checkbox {
+      float: left;
+      width: 160px;
+      padding-right: 20px;
+      margin: 0;
+      padding: 0;
+
+      + .el-checkbox {
+        margin-left: 0;
+      }
+    }
+  }
+  .demo-form-normal {
+    width: 460px;
+  }
+  .demo-form-inline {
+    width: auto;
+
+    .el-input {
+      width: 150px;
+    }
+    > * {
+      margin-right: 10px;
+    }
+  }
+  .demo-ruleForm {
+    width: 460px;
+
+    .el-select .el-input {
+      width: 360px;
+    }
+  }
+  .demo-dynamic {
+    .el-input {
+      margin-right: 10px;
+      width: 270px;
+      vertical-align: top;
+    }
+  }
+  .fr {
+    float: right;
+  }
+}

examples/demo-styles/i18n.scss

@@ -0,0 +1,8 @@
+ul.language-list {
+  color: #5e6d82;
+  font-size: 14px;
+  padding-left: 20px;
+  li {
+    line-height: 1.8;
+  }
+}

examples/demo-styles/icon.scss

@@ -0,0 +1,69 @@
+.demo-icon .source > div > i {
+  color: #606266;
+  margin: 0 20px;
+  font-size: 1.5em;
+  vertical-align: middle;
+}
+
+.demo-icon .source button {
+  margin: 0 20px;
+}
+
+.page-component .content > ul.icon-list {
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  border: solid 1px #eaeefb;
+  border-radius: 4px;
+}
+.icon-list li {
+  float: left;
+  width: 16.66%;
+  text-align: center;
+  height: 120px;
+  line-height: 120px;
+  color: #666;
+  font-size: 13px;
+  border-right: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+  margin-right: -1px;
+  margin-bottom: -1px;
+
+  &::after {
+    display: inline-block;
+    content: "";
+    height: 100%;
+    vertical-align: middle;
+  }
+
+  span {
+    display: inline-block;
+    line-height: normal;
+    vertical-align: middle;
+    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+      "Microsoft YaHei", SimSun, sans-serif;
+    color: #99a9bf;
+    transition: color 0.15s linear;
+  }
+
+  i {
+    display: block;
+    font-size: 32px;
+    margin-bottom: 15px;
+    color: #606266;
+    transition: color 0.15s linear;
+  }
+
+  .icon-name {
+    display: inline-block;
+    padding: 0 3px;
+    height: 1em;
+  }
+
+  &:hover {
+    span,
+    i {
+      color: rgb(92, 182, 255);
+    }
+  }
+}

examples/demo-styles/index.scss

@@ -0,0 +1,40 @@
+@import "./alert.scss";
+@import "./badge.scss";
+@import "./border.scss";
+@import "./button.scss";
+@import "./card.scss";
+@import "./carousel.scss";
+@import "./cascader.scss";
+@import "./collapse.scss";
+@import "./color-picker.scss";
+@import "./color.scss";
+@import "./container.scss";
+@import "./date-picker.scss";
+@import "./datetime-picker.scss";
+@import "./dialog.scss";
+@import "./dropdown.scss";
+@import "./form.scss";
+@import "./i18n.scss";
+@import "./icon.scss";
+@import "./input-number.scss";
+@import "./input.scss";
+@import "./layout.scss";
+@import "./loading.scss";
+@import "./menu.scss";
+@import "./pagination.scss";
+@import "./popover.scss";
+@import "./progress.scss";
+@import "./rate.scss";
+@import "./select.scss";
+@import "./slider.scss";
+@import "./switch.scss";
+@import "./table.scss";
+@import "./tag.scss";
+@import "./time-picker.scss";
+@import "./timeline.scss";
+@import "./tooltip.scss";
+@import "./transition.scss";
+@import "./transfer.scss";
+@import "./tree.scss";
+@import "./typography.scss";
+@import "./upload.scss";

examples/demo-styles/input-number.scss

@@ -0,0 +1,5 @@
+.demo-block.demo-input-number {
+  .el-input-number + .el-input-number {
+    margin-left: 10px;
+  }
+}

examples/demo-styles/input.scss

@@ -0,0 +1,65 @@
+.demo-input.demo-zh-CN {
+  .el-select .el-input {
+    width: 130px;
+  }
+  .el-input {
+    width: 180px;
+  }
+  .el-textarea {
+    width: 414px;
+  }
+  .el-input-group {
+    width: 100%;
+  }
+  .demo-input-size {
+    .el-input {
+      vertical-align: top;
+      margin: 0 10px 10px 0;
+    }
+  }
+  .input-with-select .el-input-group__prepend {
+    background-color: #fff;
+  }
+  .demo-autocomplete {
+    text-align: center;
+
+    .sub-title {
+      margin-bottom: 10px;
+      font-size: 14px;
+      color: #8492a6;
+    }
+
+    .el-col:not(:last-child) {
+      border-right: 1px solid rgba(224, 230, 237, 0.5);
+    }
+
+    .el-autocomplete {
+      text-align: left;
+    }
+  }
+}
+.el-autocomplete-suggestion.my-autocomplete {
+  li {
+    line-height: normal;
+    padding-top: 7px;
+    padding-bottom: 7px;
+
+    .name {
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+    .addr {
+      font-size: 12px;
+      color: #b4b4b4;
+    }
+    .highlighted .addr {
+      color: #ddd;
+    }
+  }
+}
+.demo-input-suffix {
+  margin-bottom: 15px;
+  .el-input {
+    margin-right: 15px;
+  }
+}

examples/demo-styles/layout.scss

@@ -0,0 +1,28 @@
+.demo-layout {
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+}

examples/demo-styles/loading.scss

@@ -0,0 +1,3 @@
+.demo-loading .el-table {
+  border: none;
+}

examples/demo-styles/menu.scss

@@ -0,0 +1,27 @@
+.demo-block.demo-menu {
+  .el-menu-demo {
+    padding-left: 55px;
+  }
+  .el-menu-vertical-demo:not(.el-menu--collapse) {
+    width: 240px;
+    min-height: 400px;
+  }
+  .line {
+    height: 1px;
+    background-color: #e0e6ed;
+    margin: 35px -24px;
+  }
+  h5 {
+    font-size: 14px;
+    color: #8492a6;
+    margin-top: 10px;
+  }
+  .tac {
+    text-align: center;
+
+    .el-menu-vertical-demo {
+      display: inline-block;
+      text-align: left;
+    }
+  }
+}

examples/demo-styles/pagination.scss

@@ -0,0 +1,46 @@
+.demo-pagination .source.first {
+  padding: 0;
+}
+
+.demo-pagination .first .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px #eff2f6;
+  display: inline-block;
+  width: 50%;
+  box-sizing: border-box;
+
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.demo-pagination .first .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.demo-pagination .source.last {
+  padding: 0;
+}
+
+.demo-pagination .last .block {
+  padding: 30px 24px;
+  border-bottom: solid 1px #eff2f6;
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.demo-pagination .last .demonstration {
+  font-size: 14px;
+  color: #8492a6;
+  line-height: 44px;
+}
+
+.demo-pagination .last .demonstration + .el-pagination {
+  width: 70%;
+  margin: 5px 20px 0 0;
+}

examples/demo-styles/popover.scss

@@ -0,0 +1,11 @@
+.demo-block.demo-popover {
+  .el-popover + .el-popover {
+    margin-left: 10px;
+  }
+  .el-input {
+    width: 360px;
+  }
+  .el-button {
+    margin-left: 10px;
+  }
+}

examples/demo-styles/progress.scss

@@ -0,0 +1,9 @@
+.demo-block.demo-progress {
+  .el-progress--line {
+    margin-bottom: 15px;
+    width: 350px;
+  }
+  .el-progress--circle {
+    margin-right: 15px;
+  }
+}

examples/demo-styles/rate.scss

@@ -0,0 +1,18 @@
+.demo-rate .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px #eff2f6;
+  display: inline-block;
+  width: 50%;
+  box-sizing: border-box;
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.demo-rate .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}

examples/demo-styles/select.scss

@@ -0,0 +1,3 @@
+.demo-select .el-select {
+  width: 240px;
+}

examples/demo-styles/slider.scss

@@ -0,0 +1,24 @@
+.demo-block.demo-slider .source {
+  padding: 0;
+}
+
+.demo-block.demo-slider .block {
+  padding: 30px 24px;
+  overflow: hidden;
+  border-bottom: solid 1px #eff2f6;
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.demo-block.demo-slider .demonstration {
+  font-size: 14px;
+  color: #8492a6;
+  line-height: 44px;
+}
+
+.demo-block.demo-slider .demonstration + .el-slider {
+  float: right;
+  width: 70%;
+  margin-right: 20px;
+}

examples/demo-styles/switch.scss

@@ -0,0 +1,5 @@
+.demo-block.demo-switch {
+  .el-switch {
+    margin: 20px 20px 20px 0;
+  }
+}

examples/demo-styles/table.scss

@@ -0,0 +1,23 @@
+.el-table .warning-row {
+  background: oldlace;
+}
+
+.el-table .success-row {
+  background: #f0f9eb;
+}
+
+.demo-table .name-wrapper {
+  display: inline-block;
+}
+
+.demo-table .demo-table-expand {
+  label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+}

examples/demo-styles/tag.scss

@@ -0,0 +1,17 @@
+.demo-block.demo-tag {
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+}

examples/demo-styles/time-picker.scss

@@ -0,0 +1,5 @@
+.demo-block {
+  .el-date-editor + .el-date-editor {
+    margin-left: 10px;
+  }
+}

examples/demo-styles/timeline.scss

@@ -0,0 +1,6 @@
+.demo-timeline .source .radio {
+  margin-bottom: 20px;
+}
+.demo-timeline .source .radio .el-radio-group {
+  margin-left: 20px;
+}

examples/demo-styles/tooltip.scss

@@ -0,0 +1,39 @@
+.demo-tooltip {
+  .el-tooltip + .el-tooltip {
+    margin-left: 15px;
+  }
+  .box {
+    width: 400px;
+
+    .top {
+      text-align: center;
+    }
+
+    .left {
+      float: left;
+      width: 60px;
+    }
+
+    .right {
+      float: right;
+      width: 60px;
+    }
+
+    .bottom {
+      clear: both;
+      text-align: center;
+    }
+
+    .item {
+      margin: 4px;
+    }
+
+    .left .el-tooltip__popper,
+    .right .el-tooltip__popper {
+      padding: 8px 10px;
+    }
+    .el-tooltip {
+      margin-left: 0;
+    }
+  }
+}

examples/demo-styles/transfer.scss

@@ -0,0 +1,6 @@
+.demo-transfer {
+  .transfer-footer {
+    margin-left: 15px;
+    padding: 6px 5px;
+  }
+}

examples/demo-styles/transition.scss

@@ -0,0 +1,14 @@
+.demo-transition {
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #409EFF;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    margin-right: 20px;
+    box-sizing: border-box;
+  }
+}

examples/demo-styles/tree.scss

@@ -0,0 +1,48 @@
+.demo-tree {
+  .leaf {
+    width: 20px;
+    background: #ddd;
+  }
+
+  .folder {
+    width: 20px;
+    background: #888;
+  }
+
+  .buttons {
+    margin-top: 20px;
+  }
+
+  .filter-tree {
+    margin-top: 20px;
+  }
+
+  .custom-tree-container {
+    display: flex;
+    margin: -24px;
+  }
+
+  .block {
+    flex: 1;
+    padding: 8px 24px 24px;
+
+    &:first-child {
+      border-right: solid 1px #eff2f6;
+    }
+
+    > p {
+      text-align: center;
+      margin: 0;
+      line-height: 4;
+    }
+  }
+
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+}

examples/demo-styles/typography.scss

@@ -0,0 +1,30 @@
+.demo-typo-size {
+  .color-dark-light {
+    color: #99a9bf;
+  }
+}
+.demo-term-box img {
+  width: 24%;
+  margin: 0 4% 20px 0;
+}
+
+.lineH-left {
+  display: inline-block;
+  height: 80px;
+}
+.lineH-right {
+  display: inline-block;
+  list-style: none;
+  padding: 0 0 0 90px;
+  margin: 0;
+  vertical-align: top;
+}
+.lineH-right li {
+  font-size: 13px;
+  color: #666;
+  height: 20px;
+  line-height: 20px;
+}
+.lineH-right li span {
+  padding-left: 40px;
+}

examples/demo-styles/upload.scss

@@ -0,0 +1,39 @@
+.upload-tip {
+  color: #8492a6;
+  font-size: 12px;
+  margin-top: 7px;
+}
+.demo-block {
+  margin-bottom: 24px;
+
+  .upload-demo {
+    width: 360px;
+  }
+  .avatar-uploader {
+    .el-upload {
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+
+      &:hover,
+      &:focus {
+        border-color: #409eff;
+      }
+    }
+    .avatar-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 178px;
+      height: 178px;
+      line-height: 178px;
+      text-align: center;
+    }
+    .avatar {
+      width: 178px;
+      height: 178px;
+      display: block;
+    }
+  }
+}

examples/docs/en-US/alert.md

@@ -1,22 +1,3 @@
-<script>
-  export default {
-    methods: {
-      hello() {
-        alert('Hello World!');
-      }
-    }
-  }
-</script>
-<style>
-  .demo-box.demo-alert .el-alert {
-    margin: 20px 0 0;
-  }
-
-  .demo-box.demo-alert .el-alert:first-child {
-    margin: 0;
-  }
-</style>
-
 ## Alert
 
 Displays important alert messages.

examples/docs/en-US/badge.md

@@ -114,27 +114,6 @@ Use a red dot to mark content that needs to be noticed.
 ```
 :::
 
-<style scoped>
-  .share-button {
-    width: 36px;
-    padding: 10px;
-  }
-
-  .mark {
-    margin-top: 8px;
-    line-height: 1;
-    float: right;
-  }
-
-  .clearfix {
-    @utils-clearfix;
-  }
-
-  .item {
-    margin-right: 40px;
-  }
-</style>
-
 ### Attributes
 | Attribute     | Description     | Type            | Accepted Values       | Default |
 |-------------  |---------------- |---------------- |---------------------- |-------- |

examples/docs/en-US/border.md

@@ -52,53 +52,6 @@
   }
 </script>
 
-<style>
-.demo-border .text {
-  width: 15%;
-}
-.demo-border .line {
-  width: 70%;
-}
-.demo-border .line div{
-  width: 100%;
-  height: 0;
-  border: 1px solid #EEE;
-}
-.demo-border .line .dashed{ 
-  border: 2px dashed #EEE;
-}
-.demo-shadow {
-  height: 100px;
-  width: 50%;
-  border: 1px solid #eee;
-}
-.demo-shadow-text {
-  line-height: 50px;
-  color: #666;
-  font-size: 14px;
-}
-.demo-radius .title{
-  color: #666;
-  font-size: 18px;
-  margin: 10px 0;
-}
-.demo-radius .value{
-  color: #333;
-  font-size: 16px;
-  margin: 10px 0;
-}
-.demo-radius .radius {
-  height: 60px;
-  width: 70%;
-  border: 1px solid #D7DAE2;
-  border-radius: 0;
-  margin-top: 20px;
-}
-.demo-radius .radius-30 {
-  border-radius: 30px;
-}
-</style>
-
 ## Border
 
 We standardize the borders that can be used in buttons, cards, pop-ups and other components.

examples/docs/en-US/button.md

@@ -1,27 +1,3 @@
-<style>
-  .demo-box.demo-button {
-    .el-row {
-      margin-bottom: 20px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-    .el-button + .el-button {
-      margin-left: 10px;
-    }
-    .el-button-group {
-      .el-button + .el-button {
-        margin-left: 0;
-      }
-
-      & + .el-button-group {
-        margin-left: 10px;
-      }
-    }
-  }
-</style>
-
 ## Button
 
 Commonly used button.

examples/docs/en-US/card.md

@@ -1,51 +1,3 @@
-<script>
-  import dateUtil from 'main/utils/date'
-  export default {
-    data() {
-      return {
-        currentDate: dateUtil.format(new Date(), 'yyyy-MM-dd HH:mm')
-      };
-    }
-  }
-</script>
-
-<style scoped>
-  .text {
-    font-size: 14px;
-  }
-
-  .time {
-    font-size: 13px;
-    color: #999;
-  }
-
-  .bottom {
-    margin-top: 13px;
-    line-height: 12px;
-  }
-
-  .item {
-    margin-bottom: 18px;
-  }
-
-  .button {
-    padding: 0;
-    float: right;
-  }
-
-  .image {
-    width: 100%;
-    display: block;
-  }
-
-  .clearfix {
-    @utils-clearfix;
-  }
-
-  .box-card {
-    width: 480px;
-  }
-</style>
 ## Card
 Integrate information in a card container.
 

examples/docs/en-US/carousel.md

@@ -1,64 +1,3 @@
-<script>
-  export default {
-    mounted() {
-      this.$nextTick(() => {
-        const demos = document.querySelectorAll('.source');
-        demos[0].style.padding = '0';
-        demos[0].className += ' small';
-        demos[3].className += ' medium';
-      });
-    }
-  }
-</script>
-<style>
-  .demo-carousel .block {
-    padding: 30px;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-carousel .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-
-  .demo-carousel .el-carousel__container {
-    text-align: center;
-  }
-
-  .demo-carousel .el-carousel__item {
-    h3 {
-      color: #fff;
-      font-size: 18px;
-      line-height: 300px;
-      margin: 0;
-    }
-    &:nth-child(2n) {
-      background-color: #99a9bf;
-    }
-    &:nth-child(2n+1) {
-      background-color: #d3dce6;
-    }
-  }
-
-  .demo-carousel .small h3 {
-    font-size: 14px;
-    line-height: 150px;
-  }
-
-  .demo-carousel .medium h3 {
-    font-size: 14px;
-    line-height: 200px;
-  }
-</style>
 ## Carousel
 
 Loop a series of images or texts in a limited space

examples/docs/en-US/cascader.md

@@ -1,283 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        options2: [{
-          label: 'California',
-          cities: []
-        }, {
-          label: 'Florida',
-          cities: []
-        }],
-        props: {
-          value: 'label',
-          children: 'cities'
-        },
-        options: [{
-          value: 'guide',
-          label: 'Guide',
-          children: [{
-            value: 'disciplines',
-            label: 'Disciplines',
-            children: [{
-              value: 'consistency',
-              label: 'Consistency'
-            }, {
-              value: 'feedback',
-              label: 'Feedback'
-            }, {
-              value: 'efficiency',
-              label: 'Efficiency'
-            }, {
-              value: 'controllability',
-              label: 'Controllability'
-            }]
-          }, {
-            value: 'navigation',
-            label: 'Navigation',
-            children: [{
-              value: 'side nav',
-              label: 'Side Navigation'
-            }, {
-              value: 'top nav',
-              label: 'Top Navigation'
-            }]
-          }]
-        }, {
-          value: 'component',
-          label: 'Component',
-          children: [{
-            value: 'basic',
-            label: 'Basic',
-            children: [{
-              value: 'layout',
-              label: 'Layout'
-            }, {
-              value: 'color',
-              label: 'Color'
-            }, {
-              value: 'typography',
-              label: 'Typography'
-            }, {
-              value: 'icon',
-              label: 'Icon'
-            }, {
-              value: 'button',
-              label: 'Button'
-            }]
-          }, {
-            value: 'form',
-            label: 'Form',
-            children: [{
-              value: 'radio',
-              label: 'Radio'
-            }, {
-              value: 'checkbox',
-              label: 'Checkbox'
-            }, {
-              value: 'input',
-              label: 'Input'
-            }, {
-              value: 'input-number',
-              label: 'InputNumber'
-            }, {
-              value: 'select',
-              label: 'Select'
-            }, {
-              value: 'cascader',
-              label: 'Cascader'
-            }, {
-              value: 'switch',
-              label: 'Switch'
-            }, {
-              value: 'slider',
-              label: 'Slider'
-            }, {
-              value: 'time-picker',
-              label: 'TimePicker'
-            }, {
-              value: 'date-picker',
-              label: 'DatePicker'
-            }, {
-              value: 'datetime-picker',
-              label: 'DateTimePicker'
-            }, {
-              value: 'upload',
-              label: 'Upload'
-            }, {
-              value: 'rate',
-              label: 'Rate'
-            }, {
-              value: 'form',
-              label: 'Form'
-            }]
-          }, {
-            value: 'data',
-            label: 'Data',
-            children: [{
-              value: 'table',
-              label: 'Table'
-            }, {
-              value: 'tag',
-              label: 'Tag'
-            }, {
-              value: 'progress',
-              label: 'Progress'
-            }, {
-              value: 'tree',
-              label: 'Tree'
-            }, {
-              value: 'pagination',
-              label: 'Pagination'
-            }, {
-              value: 'badge',
-              label: 'Badge'
-            }]
-          }, {
-            value: 'notice',
-            label: 'Notice',
-            children: [{
-              value: 'alert',
-              label: 'Alert'
-            }, {
-              value: 'loading',
-              label: 'Loading'
-            }, {
-              value: 'message',
-              label: 'Message'
-            }, {
-              value: 'message-box',
-              label: 'MessageBox'
-            }, {
-              value: 'notification',
-              label: 'Notification'
-            }]
-          }, {
-            value: 'navigation',
-            label: 'Navigation',
-            children: [{
-              value: 'menu',
-              label: 'NavMenu'
-            }, {
-              value: 'tabs',
-              label: 'Tabs'
-            }, {
-              value: 'breadcrumb',
-              label: 'Breadcrumb'
-            }, {
-              value: 'dropdown',
-              label: 'Dropdown'
-            }, {
-              value: 'steps',
-              label: 'Steps'
-            }]
-          }, {
-            value: 'others',
-            label: 'Others',
-            children: [{
-              value: 'dialog',
-              label: 'Dialog'
-            }, {
-              value: 'tooltip',
-              label: 'Tooltip'
-            }, {
-              value: 'popover',
-              label: 'Popover'
-            }, {
-              value: 'card',
-              label: 'Card'
-            }, {
-              value: 'carousel',
-              label: 'Carousel'
-            }, {
-              value: 'collapse',
-              label: 'Collapse'
-            }]
-          }]
-        }, {
-          value: 'resource',
-          label: 'Resource',
-          children: [{
-            value: 'axure',
-            label: 'Axure Components'
-          }, {
-            value: 'sketch',
-            label: 'Sketch Templates'
-          }, {
-            value: 'docs',
-            label: 'Design Documentation'
-          }]
-        }],
-        optionsWithDisabled: [],
-        selectedOptions: [],
-        selectedOptions2: [],
-        selectedOptions3: ['component', 'data', 'tag']
-      };
-    },
-    created() {
-      this.optionsWithDisabled = JSON.parse(JSON.stringify(this.options));
-      this.optionsWithDisabled[0].disabled = true;
-    },
-    mounted() {
-      this.$nextTick(() => {
-        const demos = document.querySelectorAll('.source');
-        demos[0].style.padding = '0';
-        demos[demos.length - 1].style.padding = '0';
-      });
-    },
-    methods: {
-      handleItemChange(val) {
-        console.log('active item:', val);
-        setTimeout(_ => {
-          if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {
-            this.options2[0].cities = [{
-              label: 'Los Angeles'
-            }];
-          } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {
-            this.options2[1].cities = [{
-              label: 'Orlando'
-            }];
-          }
-        }, 300);
-      },
-      handleChange(value) {
-        console.log(value);
-      }
-    }
-  };
-</script>
-
-<style>
-  .demo-cascader {
-    .el-cascader {
-      width: 222px;
-    }
-  }
-  .demo-cascader-size {
-    .el-cascader {
-      vertical-align: top;
-      margin-right: 15px;
-    }
-  }
-  .demo-cascader .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-    &:last-child {
-      border-right: none;
-    }
-  }
-  .demo-cascader .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-</style>
-
 ## Cascader
 
 If the options have a clear hierarchical structure, Cascader can be used to view and select them.

examples/docs/en-US/checkbox.md

@@ -1,48 +1,3 @@
-<script>
-  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
-  module.exports = {
-    data() {
-      return {
-        checkList: ['selected and disabled','Option A'],
-        // checkList2: ['Option A'],
-        checked: true,
-        checked1: false,
-        checked2: true,
-        checked3: true,
-        checked4: false,
-        checked5: false,
-        checked6: true,
-        isValid: 'valid',
-        checkAll: false,
-        cities: cityOptions,
-        checkedCities: ['Shanghai', 'Beijing'],
-        checkedCities1: ['Shanghai', 'Beijing'],
-        isIndeterminate: true,
-        checkboxGroup1: ['Shanghai'],
-        checkboxGroup2: ['Shanghai'],
-        checkboxGroup3: ['Shanghai'],
-        checkboxGroup4: ['Shanghai'],
-        checkboxGroup5: [],
-        checkboxGroup6: []
-      };
-    },
-    methods: {
-      handleChange(ev) {
-        console.log(ev);
-      },
-      handleCheckAllChange(val) {
-        this.checkedCities = val ? cityOptions : [];
-        this.isIndeterminate = false;
-      },
-      handleCheckedCitiesChange(value) {
-        let checkedCount = value.length;
-        this.checkAll = checkedCount === this.cities.length;
-        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
-      }
-    }
-  };
-</script>
-
 ## Checkbox
 
 A group of options for multiple choices.

examples/docs/en-US/collapse.md

@@ -1,29 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        activeNames: ['1'],
-        activeName: '1'
-      };
-    },
-    methods: {
-      handleChange(val) {
-        console.log(val);
-      }
-    }
-  }
-</script>
-
-<style>
-  .demo-collapse {
-    .el-collapse-item__header {
-      .header-icon {
-        margin-left: 5px;
-      }
-    }
-  }
-</style>
-
 ## Collapse
 
 Use Collapse to store contents.

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

@@ -1,62 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        color1: '#409EFF',
-        color2: null,
-        color3: 'rgba(19, 206, 102, 0.8)',
-        color4: '#409EFF',
-        color5: 'rgba(255, 69, 0, 0.68)',
-        predefineColors: [
-          '#ff4500',
-          '#ff8c00',
-          '#ffd700',
-          '#90ee90',
-          '#00ced1',
-          '#1e90ff',
-          '#c71585',
-          'rgba(255, 69, 0, 0.68)',
-          'rgb(255, 120, 0)',
-          'hsv(51, 100, 98)',
-          'hsva(120, 40, 94, 0.5)',
-          'hsl(181, 100%, 37%)',
-          'hsla(209, 100%, 56%, 0.73)',
-          '#c7158577'
-        ]
-      };
-    },
-    mounted() {
-      this.$nextTick(() => {
-        const demos = document.querySelectorAll('.source');
-        demos[0].style.padding = '0';
-      });
-    },
-  }
-</script>
-
-<style>
-  .demo-color-picker .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-    &:last-child {
-      border-right: none;
-    }
-  }
-  .demo-color-picker .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-  .demo-color-picker .el-color-picker + .el-color-picker {
-    margin-left: 20px;
-  }
-</style>
-
 ## ColorPicker
 
 ColorPicker is a color selector supporting multiple color formats.

examples/docs/en-US/color.md

@@ -89,81 +89,6 @@
   }
 </script>
 
-<style>
-  .demo-color-box {
-    position: relative;
-    border-radius: 4px;
-    padding: 20px;
-    margin: 5px 0;
-    height: 114px;
-    box-sizing: border-box;
-    color: #fff;
-    font-size: 14px;
-
-    & .value {
-      font-size: 12px;
-      opacity: 0.69;
-      line-height: 24px;
-    }
-  }
-  .demo-color-box-other {
-    height: 74px;
-    margin: 10px 0!important;
-    border-radius: 4px 4px 4px 4px!important;
-    padding: 15px 20px;
-  }
-  .demo-color-box-group {
-    .demo-color-box {
-      border-radius: 0;
-      margin: 0;
-    }
-    .demo-color-box:first-child {
-      border-radius: 4px 4px 0 0;
-    }
-    .demo-color-box:last-child {
-      border-radius: 0 0 4px 4px;
-    }
-  }
-  .bg-color-sub {
-    width: 100%;
-    height: 40px;
-    left: 0;
-    bottom: 0;
-    position: absolute;
-    border-radius: 0 0 4px 4px;
-  }
-  .bg-blue-sub-item {
-    width: 11.1111111%;
-    height: 100%;
-    display: inline-block;
-  }
-  .bg-blue-sub-item:first-child {
-    border-radius: 0 0 0 4px;
-  }
-  .bg-success-sub-item {
-    width: 50%;
-    height: 100%;
-    display: inline-block;
-  }
-  .bg-success-sub-item:first-child {
-    border-radius: 0 0 0 4px;
-  }
-  .bg-success-sub-item:last-child {
-    border-radius: 0 0 4px 0;
-  }
-  .bg-transparent {
-    border: 1px solid #FCC3C3;
-    color: #303133;
-    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 98 L100 0 L100 1 L1 98' fill='%23FCC3C3' /></svg>");
-    background-repeat:no-repeat;
-    background-position:center center;
-    background-size: 100% 100%, auto;
-  }
-  .demo-color-box-lite {
-    color: #303133;
-  }
-</style>
-
 ## Color
 
 Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.
@@ -191,6 +116,7 @@ The main color of Element is bright and friendly blue.
         >
     </div>
     </div>
+    </div>
   </el-col>
 </el-row>
 
@@ -318,6 +244,7 @@ Neutral colors are for text, background and border colors. You can use different
       :style="{ background: white, color: '#303133', border: '1px solid #eee' }"
       >Basic White<div class="value">{{white}}</div></div>
       <div class="demo-color-box demo-color-box-other bg-transparent">Transparent<div class="value">Transparent</div>
+      </div>
     </div>
   </el-col>
 </el-row>

examples/docs/en-US/container.md

@@ -1,62 +1,3 @@
-<style>
-  .el-header, .el-footer {
-    background-color: #B3C0D1;
-    color: #333;
-    line-height: 60px;
-  }
-  
-  .el-aside {
-    color: #333;
-  }
-  
-  #common-layouts + .demo-container {
-    .el-header, .el-footer {
-      text-align: center;
-    }
-    
-    .el-aside {
-      background-color: #D3DCE6;
-      text-align: center;
-      line-height: 200px;
-    }
-    
-    .el-main {
-      background-color: #E9EEF3;
-      color: #333;
-      text-align: center;
-      line-height: 160px;
-    }
-    
-    & > .source > .el-container {
-      margin-bottom: 40px;
-    
-      &:nth-child(5) .el-aside,
-      &:nth-child(6) .el-aside {
-        line-height: 260px;
-      }
-    
-     &:nth-child(7) .el-aside {
-       line-height: 320px;
-      }
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      const item = {
-        date: '2016-05-02',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles'
-      };
-      return {
-        tableData: Array(20).fill(item)
-      }
-    }
-  };
-</script>
-
 ## Container
 Container components for scaffolding basic structure of the page:
 

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

@@ -1,116 +1,3 @@
-<script>
-  module.exports = {
-    data() {
-      return {
-        pickerOptions1: {
-          disabledDate(time) {
-            return time.getTime() > Date.now();
-          },
-          shortcuts: [{
-            text: 'Today',
-            onClick(picker) {
-              picker.$emit('pick', new Date());
-            }
-          }, {
-            text: 'Yesterday',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24);
-              picker.$emit('pick', date);
-            }
-          }, {
-            text: 'A week ago',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', date);
-            }
-          }]
-        },
-        pickerOptions2: {
-          shortcuts: [{
-            text: 'Last week',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Last month',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Last 3 months',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
-            }
-          }]
-        },
-        value1: '',
-        value2: '',
-        value3: '',
-        value4: '',
-        value5: '',
-        value6: '',
-        value7: '',
-        value8: '',
-        value9: '',
-        value10: '',
-        value11: '',
-        value12: '',
-        value13: '',
-        value14: ''
-      };
-    }
-  };
-</script>
-
-<style>
-  .demo-block.demo-date-picker .source {
-    padding: 0;
-    display: flex;
-  }
-
-  .demo-date-picker .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    flex: 1;
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-date-picker .container {
-    flex: 1;
-    border-right: solid 1px #EFF2F6;
-    .block {
-      border-right: none;
-      &:last-child {
-        border-top: solid 1px #EFF2F6;
-      }
-    }
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-date-picker .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-</style>
-
 ## DatePicker
 
 Use Date Picker for date input.

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

@@ -1,92 +1,3 @@
-<script>
-  module.exports = {
-    data() {
-      return {
-        pickerOptions1: {
-          shortcuts: [{
-            text: 'Today',
-            onClick(picker) {
-              picker.$emit('pick', new Date());
-            }
-          }, {
-            text: 'Yesterday',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24);
-              picker.$emit('pick', date);
-            }
-          }, {
-            text: 'A week ago',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', date);
-            }
-          }]
-        },
-        pickerOptions2: {
-          shortcuts: [{
-            text: 'Last week',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Last month',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Last 3 months',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
-            }
-          }]
-        },
-        value1: '',
-        value2: '',
-        value3: '',
-        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
-        value5: '',
-        value6: '',
-        value7: ''
-      };
-    }
-  };
-</script>
-
-<style>
-.demo-block.demo-datetime-picker .source {
-    padding: 0;
-    display: flex;
-  }
-
-  .demo-datetime-picker .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    flex: 1;
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-datetime-picker .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-</style>
-
 ## DateTimePicker
 
 Select date and time in one picker.

examples/docs/en-US/dialog.md

@@ -1,78 +1,3 @@
-<script>
-  module.exports = {
-    data() {
-      return {
-        gridData: [{
-          date: '2016-05-02',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }, {
-          date: '2016-05-04',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }, {
-          date: '2016-05-01',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }, {
-          date: '2016-05-03',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }],
-        dialogVisible: false,
-        dialogTableVisible: false,
-        dialogFormVisible: false,
-        outerVisible: false,
-        innerVisible: false,
-        centerDialogVisible: false,
-        form: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        },
-        formLabelWidth: '120px'
-      };
-    },
-    methods: {
-      handleClose(done) {
-        this.$confirm('Are you sure to close this dialog?')
-          .then(_ => {
-            done();
-          })
-          .catch(_ => {});
-      }
-    }
-  };
-</script>
-
-<style>
-  .demo-box.demo-dialog {
-    .dialog-footer button:first-child {
-      margin-right: 10px;
-    }
-    .full-image {
-      width: 100%;
-    }
-    .el-dialog__wrapper {
-      margin: 0;
-    }
-    .el-select {
-      width: 300px;
-    }
-    .el-input {
-      width: 300px;
-    }
-    .el-button--text {
-      margin-right: 15px;
-    }
-  }
-</style>
-
 ## Dialog
 
 Informs users while preserving the current page state.

examples/docs/en-US/dropdown.md

@@ -1,55 +1,3 @@
-<style>
-  .demo-box {
-    .el-dropdown {
-      vertical-align: top;
-
-      & + .el-dropdown {
-        margin-left: 15px;
-      }
-    }
-    .el-dropdown-link {
-      cursor: pointer;
-      color: #409EFF;
-    }
-    .el-icon-arrow-down {
-      font-size: 12px;
-    }
-  }
-
-  .block-col-2 {
-    margin: -24px;
-
-    .el-col {
-      padding: 30px 0;
-      text-align: center;
-      border-right: 1px solid #eff2f6;
-
-      &:last-child {
-        border-right: 0;
-      }
-    }
-  }
-
- .demo-dropdown .demonstration {
-   display: block;
-   color: #8492a6;
-   font-size: 14px;
-   margin-bottom: 20px;
- }
-</style>
-
-<script>
-  export default {
-    methods: {
-      handleClick() {
-        alert('button click');
-      },
-      handleCommand(command) {
-        this.$message('click on item ' + command);
-      }
-    }
-  }
-</script>
 ## Dropdown
 Toggleable menu for displaying lists of links and actions.
 

examples/docs/en-US/form.md

@@ -1,250 +1,3 @@
-<script>
-  export default {
-    data() {
-      var checkAge = (rule, value, callback) => {
-        if (!value) {
-          return callback(new Error('Please input the age'));
-        }
-        setTimeout(() => {
-          if (!Number.isInteger(value)) {
-            callback(new Error('Please input digits'));
-          } else {
-            if (value < 18) {
-              callback(new Error('Age must be greater than 18'));
-            } else {
-              callback();
-            }
-          }
-        }, 1000);
-      };
-      var validatePass = (rule, value, callback) => {
-        if (value === '') {
-          callback(new Error('Please input the password'));
-        } else {
-          if (this.ruleForm2.checkPass !== '') {
-            this.$refs.ruleForm2.validateField('checkPass');
-          }
-          callback();
-        }
-      };
-      var validatePass2 = (rule, value, callback) => {
-        if (value === '') {
-          callback(new Error('Please input the password again'));
-        } else if (value !== this.ruleForm2.pass) {
-          callback(new Error('Two inputs don\'t match!'));
-        } else {
-          callback();
-        }
-      };
-      return {
-        form: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        },
-        sizeForm: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        },
-        formInline: {
-          user: '',
-          region: ''
-        },
-        labelPosition: 'right',
-        formLabelAlign: {
-          name: '',
-          region: '',
-          type: ''
-        },
-        ruleForm: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        },
-        ruleForm2: {
-          pass: '',
-          checkPass: '',
-          age: ''
-        },
-        formLabelWidth: '80px',
-        options: [
-        ],
-        rules: {
-          name: [
-            { required: true, message: 'Please input Activity name', trigger: 'blur' },
-            { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
-          ],
-          region: [
-            { required: true, message: 'Please select Activity zone', trigger: 'change' }
-          ],
-          date1: [
-            { type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }
-          ],
-          date2: [
-            { type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }
-          ],
-          type: [
-            { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }
-          ],
-          resource: [
-            { required: true, message: 'Please select activity resource', trigger: 'change' }
-          ],
-          desc: [
-            { required: true, message: 'Please input activity form', trigger: 'blur' }
-          ]
-        },
-        rules2: {
-          pass: [
-            { validator: validatePass, trigger: 'blur' }
-          ],
-          checkPass: [
-            { validator: validatePass2, trigger: 'blur' }
-          ],
-          age: [
-            { validator: checkAge, trigger: 'blur' }
-          ]
-        },
-        dynamicValidateForm: {
-          domains: [{
-            key: Date.now(),
-            value: ''
-          }],
-          email: ''
-        },
-        numberValidateForm: {
-          age: ''
-        }
-      };
-    },
-    methods: {
-      onSubmit() {
-        console.log('submit!');
-      },
-      onRuleFormSubmit() {
-        console.log('onRuleFormSubmit');
-      },
-      submitForm(formName) {
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            alert('submit!');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
-      },
-      resetForm(formName) {
-        this.$refs[formName].resetFields();
-      },
-      removeDomain(item) {
-        var index = this.dynamicValidateForm.domains.indexOf(item)
-        if (index !== -1) {
-          this.dynamicValidateForm.domains.splice(index, 1)
-        }
-      },
-      addDomain() {
-        this.dynamicValidateForm.domains.push({
-          key: Date.now(),
-          value: ''
-        });
-      }
-    }
-  }
-</script>
-
-<style>
-  .demo-form.demo-en-US {
-    .el-select .el-input {
-      width: 360px;
-    }
-    .el-form {
-      width: 480px;
-    }
-
-    .line {
-      text-align: center;
-    }
-
-    .el-checkbox-group {
-      width: 320px;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-
-      &:after, &:before {
-        content: ' ';
-        display: table;
-      }
-      &:after {
-        clear: both;
-        visibility: hidden;
-        font-size: 0;
-        height: 0;
-      }
-
-      .el-checkbox {
-        float: left;
-        width: 160px;
-        padding-right: 20px;
-        margin: 0;
-        padding: 0;
-
-        + .el-checkbox {
-          margin-left: 0;
-        }
-      }
-    }
-    .demo-form-normal {
-      width: 480px;
-    }
-    .demo-form-inline {
-      width: auto;
-
-      .el-input {
-        width: 150px;
-      }
-      > * {
-        margin-right: 10px;
-      }
-    }
-    .demo-ruleForm {
-      width: 480px;
-
-      .el-select .el-input {
-        width: 360px;
-      }
-    }
-    .demo-dynamic {
-      width: 500px;
-
-      .el-input {
-        margin-right: 10px;
-        width: 270px;
-        vertical-align: top;
-      }
-    }
-    .fr {
-      float: right;
-    }
-  }
-</style>
-
 ## Form
 
 Form consists of `input`, `radio`, `select`, `checkbox` and so on. With form, you can collect, verify and submit data.

examples/docs/en-US/icon.md

@@ -1,75 +1,3 @@
-<script>
-  var iconList = require('examples/icon.json');
-
-  export default {
-    data() {
-      return {
-        icons: iconList
-      };
-    }
-  }
-</script>
-
-<style>
-  .demo-icon .source > i {
-    color: #606266;
-    margin: 0 20px;
-    font-size: 1.5em;
-    vertical-align: middle;
-  }
-
-  .demo-icon .source > button {
-    margin: 0 20px;
-  }
-
-  .page-component .content > ul.icon-list {
-    overflow: hidden;
-    list-style: none;
-    padding: 0;
-    border: solid 1px #eaeefb;
-    border-radius: 4px;
-  }
-  .icon-list li {
-    float: left;
-    width: 16.66%;
-    text-align: center;
-    height: 120px;
-    line-height: 120px;
-    color: #666;
-    font-size: 13px;
-    border-right: 1px solid #eee;
-    border-bottom: 1px solid #eee;
-    margin-right: -1px;
-    margin-bottom: -1px;
-
-    @utils-vertical-center;
-
-    span {
-      display: inline-block;
-      line-height: normal;
-      vertical-align: middle;
-      font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
-      color: #99a9bf;
-    }
-    i {
-      display: block;
-      font-size: 32px;
-      margin-bottom: 15px;
-      color: #606266;
-      transition: color .15s linear;
-    }
-    .icon-name {
-      display: inline-block;
-      padding: 0 3px;
-      height: 1em;
-      transition: color .15s linear;
-    }
-    &:hover {
-      i,span{color: rgb(92, 182, 255);}
-    }
-  }
-</style>
-
 ## Icon
 
 Element provides a set of common icons.
@@ -92,7 +20,7 @@ Just assign the class name to `el-icon-iconName`.
 ### Icons
 
 <ul class="icon-list">
-  <li v-for="name in icons" :key="name">
+  <li v-for="name in ['info','error','success','warning','question','back','arrow-left','arrow-down','arrow-right','arrow-up','caret-left','caret-bottom','caret-top','caret-right','d-arrow-left','d-arrow-right','minus','plus','remove','circle-plus','remove-outline','circle-plus-outline','close','check','circle-close','circle-check','circle-close-outline','circle-check-outline','zoom-out','zoom-in','d-caret','sort','sort-down','sort-up','tickets','document','goods','sold-out','news','message','date','printer','time','bell','mobile-phone','service','view','menu','more','more-outline','star-on','star-off','location','location-outline','phone','phone-outline','picture','picture-outline','delete','search','edit','edit-outline','rank','refresh','share','setting','upload','upload2','download','loading']" :key="name">
     <span>
       <i :class="'el-icon-' + name"></i>
       <span class="icon-name">{{'el-icon-' + name}}</span>

examples/docs/en-US/input-number.md

@@ -1,34 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        num1: 1,
-        num2: 1,
-        num3: 5,
-        num4: 1,
-        num5: 1,
-        num6: 1,
-        num7: 1,
-        num8: 1,
-        num9: 1
-      }
-    },
-    methods: {
-      handleChange(value) {
-        console.log(value);
-      }
-    }
-  };
-</script>
-
-<style>
-  .demo-box.demo-input-number {
-    .el-input-number + .el-input-number {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 ## InputNumber
 
 Input numerical values with a customizable range.

examples/docs/en-US/input.md

@@ -1,150 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        links: [],
-        input: '',
-        input1: '',
-        input2: '',
-        input21: '',
-        input22: '',
-        input23: '',
-        input3: '',
-        input4: '',
-        input5: '',
-        input6: '',
-        input7: '',
-        input8: '',
-        input9: '',
-        input10: '',
-        input11: '',
-        textarea: '',
-        textarea2: '',
-        textarea3: '',
-        select: '',
-        state1: '',
-        state2: '',
-        state3: '',
-        state4: ''
-      };
-    },
-    methods: {
-      loadAll() {
-        return [
-          { "value": "vue", "link": "https://github.com/vuejs/vue" },
-          { "value": "element", "link": "https://github.com/ElemeFE/element" },
-          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
-          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
-          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
-          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
-          { "value": "babel", "link": "https://github.com/babel/babel" }
-        ];
-      },
-      querySearch(queryString, cb) {
-        var links = this.links;
-        var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
-
-        cb(results);
-      },
-      querySearchAsync(queryString, cb) {
-        var links = this.links;
-        var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
-
-        clearTimeout(this.timeout);
-        this.timeout = setTimeout(() => {
-          cb(results);
-        }, 3000 * Math.random());
-      },
-      createStateFilter(queryString) {
-        return (state) => {
-          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
-        };
-      },
-      handleSelect(item) {
-        console.log(item);
-      },
-      handleIconClick(ev) {
-        console.log(ev);
-      }
-    },
-    mounted() {
-      this.links = this.loadAll();
-    }
-  };
-</script>
-
-<style>
-  .demo-input.demo-en-US {
-    .el-select .el-input {
-      width: 130px;
-    }
-    .el-input {
-      width: 180px;
-    }
-    .el-textarea {
-      width: 414px;
-    }
-    .el-input-group {
-      width: 100%;
-    }
-    .demo-input-size {
-      .el-input {
-        vertical-align: top;
-        margin: 0 10px 10px 0;
-      }
-    }
-    .demo-input-suffix {
-      padding: 10px;
-    }
-    .demo-input-suffix .el-input {
-      margin-right: 15px;
-    }
-    .demo-input-label {
-      display: inline-block;
-      width: 130px;
-    }
-    .input-with-select .el-input-group__prepend {
-      background-color: #fff;
-    }
-    .demo-autocomplete {
-      text-align: center;
-
-      .sub-title {
-        margin-bottom: 10px;
-        font-size: 14px;
-        color: #8492a6;
-      }
-
-      .el-col:not(:last-child) {
-        border-right: 1px solid rgba(224,230,237,0.50);
-      }
-
-      .el-autocomplete {
-        text-align: left;
-      }
-    }
-  }
-  .el-autocomplete-suggestion.my-autocomplete {
-    li {
-      line-height: normal;
-      padding-top: 7px;
-      padding-bottom: 7px;
-
-      .name {
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-      .addr {
-        font-size: 12px;
-        color: #b4b4b4;
-      }
-      .highlighted .addr {
-        color: #ddd;
-      }
-    }
-  }
-</style>
-
 ## Input
 
 Input data using mouse or keyboard.

examples/docs/en-US/layout.md

@@ -1,34 +1,3 @@
-<style>
-  .demo-layout {
-    .el-row {
-      margin-bottom: 20px;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-    .el-col {
-      border-radius: 4px;
-    }
-    .bg-purple-dark {
-      background: #99a9bf;
-    }
-    .bg-purple {
-      background: #d3dce6;
-    }
-    .bg-purple-light {
-      background: #e5e9f2;
-    }
-    .grid-content {
-      border-radius: 4px;
-      min-height: 36px;
-    }
-    .row-bg {
-      padding: 10px 0;
-      background-color: #f9fafc;
-    }
-  }
-</style>
-
 ## Layout
 
 Quickly and easily create layouts with the basic 24-column.

examples/docs/en-US/loading.md

@@ -1,54 +1,3 @@
-<style>
-  .demo-loading .el-table {
-    border: none;
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        tableData: [{
-          date: '2016-05-02',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }, {
-          date: '2016-05-04',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }, {
-          date: '2016-05-01',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }],
-        loading: true,
-        loading2: true,
-        fullscreenLoading: false
-      }
-    },
-
-    methods: {
-      openFullScreen() {
-        this.fullscreenLoading = true;
-        setTimeout(() => {
-          this.fullscreenLoading = false;
-        }, 2000);
-      },
-      openFullScreen2() {
-        const loading = this.$loading({
-          lock: true,
-          text: 'Loading',
-          spinner: 'el-icon-loading',
-          background: 'rgba(0, 0, 0, 0.7)'
-        });
-        setTimeout(() => {
-          loading.close();
-        }, 2000);
-      }
-    }
-  }
-</script>
-
 ## Loading
 
 Show animation while loading data.

examples/docs/en-US/menu.md

@@ -1,56 +1,3 @@
-<style>
-  .demo-box.demo-menu {
-    .el-menu-demo {
-      padding-left: 55px;
-    }
-    .el-menu-vertical-demo:not(.el-menu--collapse) {
-      width: 240px;
-      min-height: 400px;
-    }
-    .line {
-      height: 1px;
-      background-color: #e0e6ed;
-      margin: 35px -24px;
-    }
-    h5 {
-      font-size: 14px;
-      color: #8492a6;
-      margin-top: 10px;
-    }
-    .tac {
-      text-align: center;
-
-      .el-menu-vertical-demo {
-        display: inline-block;
-        text-align: left;
-      }
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        activeIndex: '1',
-        activeIndex2: '1',
-        isCollapse: true
-      };
-    },
-    methods: {
-      handleOpen(key, keyPath) {
-        console.log(key, keyPath);
-      },
-      handleClose(key, keyPath) {
-        console.log(key, keyPath);
-      },
-      handleSelect(key, keyPath) {
-        console.log(key, keyPath);
-      }
-    }
-  }
-</script>
-
 ## NavMenu
 
 Menu that provides navigation for your website.

examples/docs/en-US/message-box.md

@@ -1,148 +1,3 @@
-<script>
-  export default {
-    methods: {
-      open() {
-        this.$alert('This is a message', 'Title', {
-          confirmButtonText: 'OK',
-          callback: action => {
-            this.$message({
-              type: 'info',
-              message: `action: ${ action }`
-            });
-          }
-        });
-      },
-
-      open2() {
-        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
-          confirmButtonText: 'OK',
-          cancelButtonText: 'Cancel',
-          type: 'warning'
-        }).then(() => {
-          setTimeout(() => {
-            this.$message({
-              message: 'Delete completed',
-              type: 'success'
-            });
-          }, 200);
-        }).catch(() => {
-          setTimeout(() => {
-            this.$message({
-              message: 'Delete canceled',
-              type: 'info'
-            });  
-          }, 200);
-        });
-      },
-
-      open3() {
-        this.$prompt('Please input your email', 'Tips', {
-          confirmButtonText: 'OK',
-          cancelButtonText: 'Cancel',
-          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
-          inputErrorMessage: 'Invalid Email'
-        }).then(({ value }) => {
-          setTimeout(() => {
-            this.$message({
-              type: 'success',
-              message: 'Your email is:' + value
-            });
-          }, 200);
-        }).catch(() => {
-          setTimeout(() => {
-            this.$message({
-              type: 'info',
-              message: 'Input canceled'
-            });
-          }, 200);
-        });
-      },
-
-      open4() {
-        const h = this.$createElement;
-        this.$msgbox({
-          title: 'Message',
-          message: h('p', null, [
-            h('span', null, 'Message can be '),
-            h('i', { style: 'color: teal' }, 'VNode')
-          ]),
-          showCancelButton: true,
-          confirmButtonText: 'OK',
-          cancelButtonText: 'Cancel',
-          beforeClose: (action, instance, done) => {
-            if (action === 'confirm') {
-              instance.confirmButtonLoading = true;
-              instance.confirmButtonText = 'Loading...';
-              setTimeout(() => {
-                done();
-                setTimeout(() => {
-                  instance.confirmButtonLoading = false;
-                }, 300);
-              }, 3000);
-            } else {
-              done();
-            }
-          }
-        }).then(action => {
-          setTimeout(() => {
-            this.$message({
-              type: 'info',
-              message: 'action: ' + action
-            });
-          }, 200);
-        });
-      },
-
-      open5() {
-        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
-          dangerouslyUseHTMLString: true
-        });
-      },
-
-      open6() {
-        this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
-          distinguishCancelAndClose: true,
-          confirmButtonText: 'Save',
-          cancelButtonText: 'Discard Changes'
-        })
-          .then(() => {
-            this.$message({
-              type: 'info',
-              message: 'Changes saved. Proceeding to a new route.'
-            });
-          })
-          .catch(action => {
-            this.$message({
-              type: 'info',
-              message: action === 'cancel'
-                ? 'Changes discarded. Proceeding to a new route.'
-                : 'Stay in the current route'
-            })
-          });
-      },
-
-      open7() {
-        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
-          confirmButtonText: 'OK',
-          cancelButtonText: 'Cancel',
-          type: 'warning',
-          center: true
-        }).then(() => {
-          this.$message({
-            type: 'success',
-            message: 'Delete completed'
-          });
-        }).catch(() => {
-          this.$message({
-            type: 'info',
-            message: 'Delete canceled'
-          });
-        });
-      }
-    }
-  };
-</script>
-
 ## MessageBox
 
 A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.

examples/docs/en-US/message.md

@@ -1,86 +1,3 @@
-<script>
-  module.exports = {
-    methods: {
-      open() {
-        this.$message('This is a message.');
-      },
-
-      openVn() {
-        const h = this.$createElement;
-        this.$message({
-          message: h('p', null, [
-            h('span', null, 'Message can be '),
-            h('i', { style: 'color: teal' }, 'VNode')
-          ])
-        });
-      },
-
-      open2() {
-        this.$message({
-          message: 'Congrats, this is a success message.',
-          type: 'success'
-        });
-      },
-
-      open3() {
-        this.$message({
-          message: 'Warning, this is a warning message.',
-          type: 'warning'
-        });
-      },
-
-      open4() {
-        this.$message.error('Oops, this is a error message.');
-      },
-
-      open5() {
-        this.$message({
-          showClose: true,
-          message: 'This is a message.'
-        });
-      },
-
-      open6() {
-        this.$message({
-          showClose: true,
-          message: 'Congrats, this is a success message.',
-          type: 'success'
-        });
-      },
-
-      open7() {
-        this.$message({
-          showClose: true,
-          message: 'Warning, this is a warning message.',
-          type: 'warning'
-        });
-      },
-
-      open8() {
-        this.$message({
-          showClose: true,
-          message: 'Oops, this is a error message.',
-          type: 'error'
-        });
-      },
-
-      openCenter() {
-        this.$message({
-          message: 'Centered text',
-          center: true
-        });
-      },
-
-      openHTML() {
-        this.$message({
-          dangerouslyUseHTMLString: true,
-          message: '<strong>This is <i>HTML</i> string</strong>'
-        });
-      }
-    }
-  };
-</script>
-
 ## Message
 
 Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.

examples/docs/en-US/notification.md

@@ -1,115 +1,3 @@
-<script>
-  module.exports = {
-    methods: {
-      open() {
-        const h = this.$createElement;
-
-        this.$notify({
-          title: 'Title',
-          message: h('i', { style: 'color: teal' }, 'This is a reminder')
-        });
-      },
-
-      open2() {
-        this.$notify({
-          title: 'Prompt',
-          message: 'This is a message that does not automatically close',
-          duration: 0
-        });
-      },
-
-      open3() {
-        this.$notify({
-          title: 'Success',
-          message: 'This is a success message',
-          type: 'success'
-        });
-      },
-
-      open4() {
-        this.$notify({
-          title: 'Warning',
-          message: 'This is a warning message',
-          type: 'warning'
-        });
-      },
-
-      open5() {
-        this.$notify.info({
-          title: 'Info',
-          message: 'This is an info message'
-        });
-      },
-
-      open6() {
-        this.$notify.error({
-          title: 'Error',
-          message: 'This is an error message'
-        });
-      },
-
-      open7() {
-        this.$notify({
-          title: 'Custom Position',
-          message: 'I\'m at the top right corner'
-        });
-      },
-
-      open8() {
-        this.$notify({
-          title: 'Custom Position',
-          message: 'I\'m at the bottom right corner',
-          position: 'bottom-right'
-        });
-      },
-
-      open9() {
-        this.$notify({
-          title: 'Custom Position',
-          message: 'I\'m at the bottom left corner',
-          position: 'bottom-left'
-        });
-      },
-
-      open10() {
-        this.$notify({
-          title: 'Custom Position',
-          message: 'I\'m at the top left corner',
-          position: 'top-left'
-        });
-      },
-
-      open11() {
-        this.$notify.success({
-          title: 'Success',
-          message: 'This is a success message',
-          offset: 100
-        });
-      },
-
-      open12() {
-        this.$notify({
-          title: 'HTML String',
-          dangerouslyUseHTMLString: true,
-          message: '<strong>This is <i>HTML</i> string</strong>'
-        });
-      },
-      
-      open13() {
-        this.$notify.success({
-          title: 'Info',
-          message: 'This is a message without close button',
-          showClose: false
-        });
-      },
-
-      onClose() {
-        console.log('Notification is closed');
-      }
-    }
-  };
-</script>
-
 ## Notification
 
 Displays a global notification message at a corner of the page.

examples/docs/en-US/pagination.md

@@ -1,52 +1,3 @@
-<style>
-  .demo-pagination .source.first {
-    padding: 0;
-  }
-
-  .demo-pagination .first .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-pagination .first .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-
-  .demo-pagination .source.last {
-    padding: 0;
-  }
-
-  .demo-pagination .last .block {
-    padding: 30px 24px;
-    border-bottom: solid 1px #EFF2F6;
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  .demo-pagination .last .demonstration {
-    font-size: 14px;
-    color: #8492a6;
-    line-height: 44px;
-  }
-
-  .demo-pagination .last .demonstration + .el-pagination {
-    width: 70%;
-    margin: 5px 20px 0 0;
-  }
-</style>
-
 ## Pagination
 
 If you have too much data to display in one page, use pagination.
@@ -188,36 +139,6 @@ Add more modules based on your scenario.
 </script>
 ```
 :::
-<script>
-  import { addClass } from 'element-ui/src/utils/dom';
-  export default {
-    data() {
-      return {
-        currentPage1: 5,
-        currentPage2: 5,
-        currentPage3: 5,
-        currentPage4: 4
-      };
-    },
-    methods: {
-      handleSizeChange(val) {
-        console.log(`${val} items per page`);
-      },
-      handleCurrentChange(val) {
-        console.log(`current page: ${val}`);
-      }
-    },
-    mounted() {
-      this.$nextTick(() => {
-        let demos = document.querySelectorAll('.source');
-        let firstDemo = demos[0];
-        let lastDemo = demos[demos.length - 1];
-        addClass(firstDemo, 'first');
-        addClass(lastDemo, 'last');
-      });
-    }
-  }
-</script>
 
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |

examples/docs/en-US/popover.md

@@ -1,100 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        visible: false,
-        visible2: false,
-        gridData: [{
-          date: '2016-05-02',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          date: '2016-05-04',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          date: '2016-05-01',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          date: '2016-05-03',
-          name: 'Jack',
-          address: 'New York City'
-        }],
-        gridData2: [{
-          date: '2016-05-02',
-          name: 'Jack',
-          address: 'New York City',
-        }, {
-          date: '2016-05-04',
-          name: 'Jack',
-          address: 'New York City',
-          $info: true
-        }, {
-          date: '2016-05-01',
-          name: 'Jack',
-          address: 'New York City',
-        }, {
-          date: '2016-05-03',
-          name: 'Jack',
-          address: 'New York City',
-          $positive: true
-        }],
-        gridData3: [{
-          tag: 'Home',
-          date: '2016-05-03',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Company',
-          date: '2016-05-02',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Company',
-          date: '2016-05-04',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Home',
-          date: '2016-05-01',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Company',
-          date: '2016-05-08',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Home',
-          date: '2016-05-06',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Company',
-          date: '2016-05-07',
-          name: 'Jack',
-          address: 'New York City'
-        }]
-      };
-    }
-  };
-</script>
-
-<style>
-  .demo-box.demo-popover {
-    .el-popover + .el-popover {
-      margin-left: 10px;
-    }
-    .el-input {
-      width: 360px;
-    }
-    .el-button {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 ## Popover
 
 ### Basic usage

examples/docs/en-US/progress.md

@@ -1,14 +1,3 @@
-<style>
-  .demo-box.demo-progress {
-    .el-progress--line {
-      margin-bottom: 15px;
-      width: 350px;
-    }
-    .el-progress--circle {
-      margin-right: 15px;
-    }
-  }
-</style>
 ## Progress
 
 Progress is used to show the progress of current operation, and inform the user the current status.

examples/docs/en-US/radio.md

@@ -1,23 +1,3 @@
-<script>
-  module.exports = {
-    data() {
-      return {
-        radio: '1',
-        radio1: 'selected and disabled',
-        radio2: 3,
-        radio3: 'New York',
-        radio4: 'New York',
-        radio5: 'New York',
-        radio6: 'New York',
-        radio7: '1',
-        radio8: '1',
-        radio9: '1',
-        radio10: '1'
-      };
-    }
-  };
-</script>
-
 ## Radio
 
 Single selection among multiple options.

examples/docs/en-US/rate.md

@@ -1,44 +1,3 @@
-<style>
-  .demo-rate .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-rate .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        value1: null,
-        value2: null,
-        value3: null,
-        value4: null,
-        value5: 3.7
-      };
-    },
-    mounted() {
-      this.$nextTick(() => {
-        let firstDemo = document.querySelector('.source');
-        firstDemo.style.padding = '0';
-      });
-    }
-  }
-</script>
-
 ## Rate
 
 Used for rating

examples/docs/en-US/select.md

@@ -1,138 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        list: null,
-        options: [{
-          value: 'Option1',
-          label: 'Option1'
-        }, {
-          value: 'Option2',
-          label: 'Option2'
-        }, {
-          value: 'Option3',
-          label: 'Option3'
-        }, {
-          value: 'Option4',
-          label: 'Option4'
-        }, {
-          value: 'Option5',
-          label: 'Option5'
-        }],
-        options2: [{
-          value: 'Option1',
-          label: 'Option1'
-        }, {
-          value: 'Option2',
-          label: 'Option2',
-          disabled: true
-        }, {
-          value: 'Option3',
-          label: 'Option3'
-        }, {
-          value: 'Option4',
-          label: 'Option4'
-        }, {
-          value: 'Option5',
-          label: 'Option5'
-        }],
-        options3: [{
-          label: 'Popular cities',
-          options: [{
-            value: 'Shanghai',
-            label: 'Shanghai'
-          }, {
-            value: 'Beijing',
-            label: 'Beijing'
-          }]
-        }, {
-          label: 'City Name',
-          options: [{
-            value: 'Chengdu',
-            label: 'Chengdu'
-          }, {
-            value: 'Shenzhen',
-            label: 'Shenzhen'
-          }, {
-            value: 'Guangzhou',
-            label: 'Guangzhou'
-          }, {
-            value: 'Dalian',
-            label: 'Dalian'
-          }]
-        }],
-        options4: [],
-        options5: [{
-          value: 'HTML',
-          label: 'HTML'
-        }, {
-          value: 'CSS',
-          label: 'CSS'
-        }, {
-          value: 'JavaScript',
-          label: 'JavaScript'
-        }],
-        cities: [{
-          value: 'Beijing',
-          label: 'Beijing'
-        }, {
-          value: 'Shanghai',
-          label: 'Shanghai'
-        }, {
-          value: 'Nanjing',
-          label: 'Nanjing'
-        }, {
-          value: 'Chengdu',
-          label: 'Chengdu'
-        }, {
-          value: 'Shenzhen',
-          label: 'Shenzhen'
-        }, {
-          value: 'Guangzhou',
-          label: 'Guangzhou'
-        }],
-        value: '',
-        value2: '',
-        value3: '',
-        value4: '',
-        value5: [],
-        value6: '',
-        value7: '',
-        value8: '',
-        value9: [],
-        value10: [],
-        value11: [],
-        loading: false,
-        states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
-      };
-    },
-
-    mounted() {
-      this.list = this.states.map(item => { return { value: item, label: item }; });
-    },
-
-    methods: {
-      remoteMethod(query) {
-        if (query !== '') {
-          this.loading = true;
-          setTimeout(() => {
-            this.loading = false;
-            this.options4 = this.list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
-          }, 200);
-        } else {
-          this.options4 = [];
-        }
-      }
-    }
-  };
-</script>
-
-<style>
-  .demo-select .el-select {
-    width: 240px;
-  }
-</style>
-
 ## Select
 
 When there are plenty of options, use a drop-down menu to display and select desired ones.

examples/docs/en-US/slider.md

@@ -1,54 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        value1: 0,
-        value2: 50,
-        value3: 36,
-        value4: 48,
-        value5: 42,
-        value6: 0,
-        value7: 0,
-        value8: 0,
-        value9: [4, 8],
-        value10: 0
-      };
-    },
-    methods: {
-      formatTooltip(val) {
-        return val / 100;
-      }
-    }
-  }
-</script>
-
-<style>
-  .demo-box.demo-slider .source {
-    padding: 0;
-  }
-  
-  .demo-box.demo-slider .block {
-    padding: 30px 24px;
-    overflow: hidden;
-    border-bottom: solid 1px #EFF2F6;
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-  
-  .demo-box.demo-slider .demonstration {
-    font-size: 14px;
-    color: #8492a6;
-    line-height: 44px;
-  }
-  
-  .demo-box.demo-slider .demonstration + .el-slider {
-    float: right;
-    width: 70%;
-    margin-right: 20px;
-  }
-</style>
-
 ## Slider
 
 Drag the slider within a fixed range.

examples/docs/en-US/steps.md

@@ -1,19 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        active: 0
-      };
-    },
-
-    methods: {
-      next() {
-        if (this.active++ > 2) this.active = 0;
-      }
-    }
-  }
-</script>
-
 ## Steps
 
 Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.

examples/docs/en-US/switch.md

@@ -1,27 +1,3 @@
-<style>
-  .demo-box.demo-switch {
-    .el-switch {
-      margin: 20px 20px 20px 0;
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        value1: true,
-        value2: true,
-        value3: true,
-        value4: true,
-        value5: '100',
-        value6: true,
-        value7: false
-      }
-    }
-  };
-</script>
-
 ## Switch
 
 Switch is used for switching between two opposing states.

examples/docs/en-US/table.md

@@ -1,372 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office'
-        }],
-        tableData2: [{
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles',
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles',
-          $info: true
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles',
-        }, {
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles',
-          $positive: true
-        }],
-        tableData3: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-08',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-06',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-07',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }],
-        tableData4: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-08',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-06',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-07',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }],
-        tableData6: [{
-          id: '12987122',
-          name: 'Tom',
-          amount1: '234',
-          amount2: '3.2',
-          amount3: 10
-        }, {
-          id: '12987123',
-          name: 'Tom',
-          amount1: '165',
-          amount2: '4.43',
-          amount3: 12
-        }, {
-          id: '12987124',
-          name: 'Tom',
-          amount1: '324',
-          amount2: '1.9',
-          amount3: 9
-        }, {
-          id: '12987125',
-          name: 'Tom',
-          amount1: '621',
-          amount2: '2.2',
-          amount3: 17
-        }, {
-          id: '12987126',
-          name: 'Tom',
-          amount1: '539',
-          amount2: '4.1',
-          amount3: 15
-        }],
-        tableData7: [{
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles',
-        }, {
-          date: '2016-05-04',
-          name: 'John',
-          address: 'No. 189, Grove St, Los Angeles',
-        }, {
-          date: '2016-05-01',
-          name: 'Morgan',
-          address: 'No. 189, Grove St, Los Angeles',
-        }, {
-          date: '2016-05-03',
-          name: 'Jessy',
-          address: 'No. 189, Grove St, Los Angeles',
-        }],
-        currentRow: null,
-        multipleSelection: [],
-        search: '',
-      };
-    },
-
-    methods: {
-      getSummaries(param) {
-        const { columns, data } = param;
-        const sums = [];
-        columns.forEach((column, index) => {
-          if (index === 0) {
-            sums[index] = 'Total Cost';
-            return;
-          }
-          const values = data.map(item => Number(item[column.property]));
-          if (!values.every(value => isNaN(value))) {
-            sums[index] = '$ ' + values.reduce((prev, curr) => {
-              const value = Number(curr);
-              if (!isNaN(value)) {
-                return prev + curr;
-              } else {
-                return prev;
-              }
-            }, 0);
-          } else {
-            sums[index] = 'N/A';
-          }
-        });
-
-        return sums;
-      },
-
-      resetDateFilter() {
-        this.$refs.filterTable.clearFilter('date');
-      },
-      clearFilter() {
-        this.$refs.filterTable.clearFilter();
-      },
-
-      setCurrent(row) {
-        this.$refs.singleTable.setCurrentRow(row);
-      },
-
-      toggleSelection(rows) {
-        if (rows) {
-          rows.forEach(row => {
-            this.$refs.multipleTable.toggleRowSelection(row);
-          });
-        } else {
-          this.$refs.multipleTable.clearSelection();
-        }
-      },
-
-      handleClick() {
-        console.log('click');
-      },
-
-      handleEdit(index, row) {
-        console.log(index, row);
-      },
-
-      handleDelete(index, row) {
-        console.log(index, row);
-      },
-
-      handleSelectionChange(val) {
-        this.multipleSelection = val;
-      },
-
-      handleCurrentChange(val) {
-        this.currentRow = val;
-      },
-
-      formatter(row, column) {
-        return row.address;
-      },
-
-      filterTag(value, row) {
-        return row.tag === value;
-      },
-
-      filterHandler(value, row, column) {
-        const property = column['property'];
-        return row[property] === value;
-      },
-
-      tableRowClassName({row, rowIndex}) {
-        if (rowIndex === 1) {
-          return 'warning-row';
-        } else if (rowIndex === 3) {
-          return 'success-row';
-        }
-        return '';
-      },
-
-      deleteRow(index, rows) {
-        rows.splice(index, 1);
-      },
-
-      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
-        if (rowIndex % 2 === 0) {
-          if (columnIndex === 0) {
-            return [1, 2];
-          } else if (columnIndex === 1) {
-            return [0, 0];
-          }
-        }
-      },
-
-      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-        if (columnIndex === 0) {
-          if (rowIndex % 2 === 0) {
-            return {
-              rowspan: 2,
-              colspan: 1
-            };
-          } else {
-            return {
-              rowspan: 0,
-              colspan: 0
-            };
-          }
-        }
-      },
-
-      indexMethod(index) {
-        return index * 2;
-      }
-    },
-
-    watch: {
-      multipleSelection(val) {
-        console.log('selection: ', val);
-      }
-    }
-  };
-</script>
-
-<style>
-  .el-table .warning-row {
-    background: oldlace;
-  }
-
-  .el-table .success-row {
-    background: #f0f9eb;
-  }
-
-  .demo-table .name-wrapper {
-    display: inline-block;
-  }
-
-  .demo-table .demo-table-expand {
-    label {
-      width: 90px;
-      color: #99a9bf;
-    }
-    .el-form-item {
-      margin-right: 0;
-      margin-bottom: 0;
-      width: 50%;
-    }
-  }
-</style>
-
 ## Table
 
 Display multiple data with similar format. You can sort, filter, compare your data in a table.
@@ -1977,7 +1608,7 @@ Configuring rowspan and colspan allows you to merge cells
 ### Custom index
 
 You can customize row index in `type=index` columns.
-:::demo To customize row indices, use `index` attribute on <el-table-column> with `type=index`. If it is assigned to a number, all indices will have an offset of that number. It also accepts a method with each index (starting from `0`) as parameter, and the returned value will be displayed as index.
+:::demo To customize row indices, use `index` attribute on `el-table-column` with `type=index`. If it is assigned to a number, all indices will have an offset of that number. It also accepts a method with each index (starting from `0`) as parameter, and the returned value will be displayed as index.
 
 ```html
 <template>

examples/docs/en-US/tabs.md

@@ -1,95 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        activeName: 'second',
-        activeName2: 'first',
-        editableTabsValue: '2',
-        editableTabsValue2: '2',
-        editableTabs: [{
-          title: 'Tab 1',
-          name: '1',
-          content: 'Tab 1 content'
-        }, {
-          title: 'Tab 2',
-          name: '2',
-          content: 'Tab 2 content'
-        }],
-        editableTabs2: [{
-          title: 'Tab 1',
-          name: '1',
-          content: 'Tab 1 content'
-        }, {
-          title: 'Tab 2',
-          name: '2',
-          content: 'Tab 2 content'
-        }],
-        tabIndex: 2,
-        tabPosition: 'top'
-      }
-    },
-    methods: {
-      handleClick(tab, event) {
-        console.log(tab, event);
-      },
-      handleTabsEdit(targetName, action) {
-        if (action === 'add') {
-          let newTabName = ++this.tabIndex + '';
-          this.editableTabs.push({
-            title: 'New Tab',
-            name: newTabName,
-            content: 'New Tab content'
-          });
-          this.editableTabsValue = newTabName;
-        }
-        if (action === 'remove') {
-          let tabs = this.editableTabs;
-          let activeName = this.editableTabsValue;
-          if (activeName === targetName) {
-            tabs.forEach((tab, index) => {
-              if (tab.name === targetName) {
-                let nextTab = tabs[index + 1] || tabs[index - 1];
-                if (nextTab) {
-                  activeName = nextTab.name;
-                }
-              }
-            });
-          }
-          
-          this.editableTabsValue = activeName;
-          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
-        }
-      },
-      addTab(targetName) {
-        let newTabName = ++this.tabIndex + '';
-        this.editableTabs2.push({
-          title: 'New Tab',
-          name: newTabName,
-          content: 'New Tab content'
-        });
-        this.editableTabsValue2 = newTabName;
-      },
-      removeTab(targetName) {
-        let tabs = this.editableTabs2;
-        let activeName = this.editableTabsValue2;
-        if (activeName === targetName) {
-          tabs.forEach((tab, index) => {
-            if (tab.name === targetName) {
-              let nextTab = tabs[index + 1] || tabs[index - 1];
-              if (nextTab) {
-                activeName = nextTab.name;
-              }
-            }
-          });
-        }
-        
-        this.editableTabsValue2 = activeName;
-        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
-      }
-    }
-  }
-</script>
-
 ## Tabs
 
 Divide data collections which are related yet belong to different types.

examples/docs/en-US/tag.md

@@ -1,63 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        tags: [
-          { name: 'Tag 1', type: '' },
-          { name: 'Tag 2', type: 'success' },
-          { name: 'Tag 3', type: 'info' },
-          { name: 'Tag 4', type: 'warning' },
-          { name: 'Tag 5', type: 'danger' }
-        ],
-        dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
-        inputVisible: false,
-        inputValue: ''
-      };
-    },
-    methods: {
-      handleClose(tag) {
-        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
-      },
-
-      showInput() {
-        this.inputVisible = true;
-        this.$nextTick(_ => {
-          this.$refs.saveTagInput.$refs.input.focus();
-        });
-      },
-
-      handleInputConfirm() {
-        let inputValue = this.inputValue;
-        if (inputValue) {
-          this.dynamicTags.push(inputValue);
-        }
-        this.inputVisible = false;
-        this.inputValue = '';
-      }
-    }
-  }
-</script>
-
-<style>
-  .demo-box.demo-tag {
-    .el-tag + .el-tag {
-      margin-left: 10px;
-    }
-    .button-new-tag {
-      margin-left: 10px;
-      height: 32px;
-      line-height: 30px;
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-    .input-new-tag {
-      width: 90px;
-      margin-left: 10px;
-      vertical-align: bottom;
-    }
-  }
-</style>
-
 ## Tag
 
 Used for marking and selection.

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

@@ -1,11 +1,3 @@
-<style>
-  .demo-box {
-    .el-date-editor + .el-date-editor {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 ## TimePicker
 
 Use Time Picker for time input.
@@ -154,22 +146,6 @@ Can pick an arbitrary time range.
 ```
 :::
 
-<script>
-  export default {
-    data() {
-      return {
-        value1: '',
-        value2: new Date(2016, 9, 10, 18, 40),
-        value3: new Date(2016, 9, 10, 18, 40),
-        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
-        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
-        startTime: '',
-        endTime: ''
-      };
-    }
-  }
-</script>
-
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |

examples/docs/en-US/timeline.md

@@ -1,49 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        reverse: true,
-        activities: [{
-          content: 'Event start',
-          timestamp: '2018-04-15'
-        }, {
-          content: 'Approved',
-          timestamp: '2018-04-13'
-        }, {
-          content: 'Success',
-          timestamp: '2018-04-11'
-        }],
-        activities2: [{
-          content: 'Custom icon',
-          timestamp: '2018-04-12 20:46',
-          size: 'large',
-          type: 'primary',
-          icon: 'el-icon-more'
-        }, {
-          content: 'Custom color',
-          timestamp: '2018-04-03 20:46',
-          color: '#0bbd87'
-        }, {
-          content: 'Custom size',
-          timestamp: '2018-04-03 20:46',
-          size: 'large'
-        }, {
-          content: 'Default node',
-          timestamp: '2018-04-03 20:46'
-        }]
-      };
-    }
-  };
-</script>
-<style>
-  .demo-timeline .source .radio {
-    margin-bottom: 20px;
-  }
-  .demo-timeline .source .radio .el-radio-group {
-    margin-left: 20px;
-  }
-</style>
-
 ## Timeline
 
 Visually display timeline.

examples/docs/en-US/tooltip.md

@@ -1,60 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        disabled: false
-      };
-    }
-  };
-</script>
-
-<style>
-  .demo-tooltip.demo-en-US {
-    &:first-of-type .source {
-      .el-button {
-        width: 110px;
-      }
-    }
-    .el-tooltip + .el-tooltip {
-      margin-left: 15px;
-    }
-    .box {
-      width: 400px;
-    
-      .top {
-        text-align: center;
-      }
-      
-      .left {
-        float: left;
-        width: 110px;
-      }
-      
-      .right {
-        float: right;
-        width: 110px;
-      }
-      
-      .bottom {
-        clear: both;
-        text-align: center;
-      }
-      
-      .item {
-        margin: 4px;
-      }
-      
-      .left .el-tooltip__popper,
-      .right .el-tooltip__popper {
-        padding: 8px 10px;
-      }
-      .el-tooltip {
-        margin-left: 0;
-      }
-    }
-  }
-</style>
-
 ## Tooltip
 
 Display prompt information for mouse hover.

examples/docs/en-US/transfer.md

@@ -1,76 +1,3 @@
-<style>
-  .demo-transfer {
-    .transfer-footer {
-      margin-left: 15px;
-      padding: 6px 5px;
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      const generateData = _ => {
-        const data = [];
-        for (let i = 1; i <= 15; i++) {
-          data.push({
-            key: i,
-            label: `Option ${ i }`,
-            disabled: i % 4 === 0
-          });
-        }
-        return data;
-      };
-      const generateData2 = _ => {
-        const data = [];
-        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
-        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
-        states.forEach((city, index) => {
-          data.push({
-            label: city,
-            key: index,
-            initial: initials[index]
-          });
-        });
-        return data;
-      };
-      const generateData3 = _ => {
-        const data = [];
-        for (let i = 1; i <= 15; i++) {
-          data.push({
-            value: i,
-            desc: `Option ${ i }`,
-            disabled: i % 4 === 0
-          });
-        }
-        return data;
-      };
-      return {
-        data: generateData(),
-        data2: generateData2(),
-        data3: generateData3(),
-        value1: [1, 4],
-        value2: [],
-        value3: [1],
-        value4: [1],
-        value5: [],
-        filterMethod(query, item) {
-          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
-        },
-        renderFunc(h, option) {
-          return <span>{ option.key } - { option.label }</span>;
-        }
-      };
-    },
-
-    methods: {
-      handleChange(value, direction, movedKeys) {
-        console.log(value, direction, movedKeys);
-      }
-    }
-  };
-</script>
-
 ## Transfer
 
 ### Basic usage

examples/docs/en-US/transition.md

@@ -153,28 +153,3 @@ import Vue from 'vue'
 
 Vue.component(CollapseTransition.name, CollapseTransition)
 ```
-
-<style>
-  .transition-box {
-    margin-bottom: 10px;
-    width: 200px;
-    height: 100px;
-    border-radius: 4px;
-    background-color: #409EFF;
-    text-align: center;
-    color: #fff;
-    padding: 40px 20px;
-    margin-right: 20px;
-    box-sizing: border-box;
-  }
-</style>
-
-<script>
-  module.exports = {
-    data: () => ({
-      show: true,
-      show2: true,
-      show3: true
-    })
-  }
-</script>

examples/docs/en-US/tree.md

@@ -1,382 +1,3 @@
-<style>
-  .demo-tree {
-    .leaf {
-      width: 20px;
-      background: #ddd;
-    }
-
-    .folder {
-      width: 20px;
-      background: #888;
-    }
-
-    .buttons {
-      margin-top: 20px;
-    }
-
-    .filter-tree {
-      margin-top: 20px;
-    }
-
-    .custom-tree-container {
-      display: flex;
-      margin: -24px;
-    }
-
-    .block {
-      flex: 1;
-      padding: 8px 24px 24px;
-
-      &:first-child {
-        border-right: solid 1px #eff2f6;
-      }
-
-      > p {
-        text-align: center;
-        margin: 0;
-        line-height: 4;
-      }
-    }
-
-    .custom-tree-node {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 14px;
-      padding-right: 8px;
-    }
-  }
-</style>
-
-<script>
-  const data = [{
-    label: 'Level one 1',
-    children: [{
-      label: 'Level two 1-1',
-      children: [{
-        label: 'Level three 1-1-1'
-      }]
-    }]
-  }, {
-    label: 'Level one 2',
-    children: [{
-      label: 'Level two 2-1',
-      children: [{
-        label: 'Level three 2-1-1'
-      }]
-    }, {
-      label: 'Level two 2-2',
-      children: [{
-        label: 'Level three 2-2-1'
-      }]
-    }]
-  }, {
-    label: 'Level one 3',
-    children: [{
-      label: 'Level two 3-1',
-      children: [{
-        label: 'Level three 3-1-1'
-      }]
-    }, {
-      label: 'Level two 3-2',
-      children: [{
-        label: 'Level three 3-2-1'
-      }]
-    }]
-  }];
-
-  const data2 = [{
-    id: 1,
-    label: 'Level one 1',
-    children: [{
-      id: 4,
-      label: 'Level two 1-1',
-      children: [{
-        id: 9,
-        label: 'Level three 1-1-1'
-      }, {
-        id: 10,
-        label: 'Level three 1-1-2'
-      }]
-    }]
-  }, {
-    id: 2,
-    label: 'Level one 2',
-    children: [{
-      id: 5,
-      label: 'Level two 2-1'
-    }, {
-      id: 6,
-      label: 'Level two 2-2'
-    }]
-  }, {
-    id: 3,
-    label: 'Level one 3',
-    children: [{
-      id: 7,
-      label: 'Level two 3-1'
-    }, {
-      id: 8,
-      label: 'Level two 3-2'
-    }]
-  }];
-
-  const data3 = [{
-    id: 1,
-    label: 'Level one 1',
-    children: [{
-      id: 3,
-      label: 'Level two 2-1',
-      children: [{
-        id: 4,
-        label: 'Level three 3-1-1'
-      }, {
-        id: 5,
-        label: 'Level three 3-1-2',
-        disabled: true
-      }]
-    }, {
-      id: 2,
-      label: 'Level two 2-2',
-      disabled: true,
-      children: [{
-        id: 6,
-        label: 'Level three 3-2-1'
-      }, {
-        id: 7,
-        label: 'Level three 3-2-2',
-        disabled: true
-      }]
-    }]
-  }];
-
-  const data6 = [{
-    label: 'Level one 1',
-    children: [{
-      label: 'Level two 1-1',
-      children: [{
-        label: 'Level three 1-1-1'
-      }]
-    }]
-  }, {
-    label: 'Level one 2',
-    children: [{
-      label: 'Level two 2-1',
-      children: [{
-        label: 'Level three 2-1-1'
-      }]
-    }, {
-      label: 'Level two 2-2',
-      children: [{
-        label: 'Level three 2-2-1'
-      }]
-    }]
-  }, {
-    label: 'Level one 3',
-    children: [{
-      label: 'Level two 3-1',
-      children: [{
-        label: 'Level three 3-1-1'
-      }]
-    }, {
-      label: 'Level two 3-2',
-      children: [{
-        label: 'Level three 3-2-1'
-      }]
-    }]
-  }];
-
-  let id = 1000;
-
-  const regions = [{
-    'name': 'region1'
-  }, {
-    'name': 'region2'
-  }];
-
-  let count = 1;
-
-  const props = {
-    label: 'name',
-    children: 'zones'
-  };
-
-  const props1 = {
-    label: 'name',
-    children: 'zones',
-    isLeaf: 'leaf'
-  };
-
-  const defaultProps = {
-    children: 'children',
-    label: 'label'
-  };
-
-  export default {
-    watch: {
-      filterText(val) {
-        this.$refs.tree2.filter(val);
-      }
-    },
-
-    methods: {
-      handleCheckChange(data, checked, indeterminate) {
-        console.log(data, checked, indeterminate);
-      },
-      handleNodeClick(data) {
-        console.log(data);
-      },
-      handleDragStart(node, ev) {
-        console.log('drag start', node);
-      },
-      handleDragEnter(draggingNode, dropNode, ev) {
-        console.log('tree drag enter: ', dropNode.label);
-      },
-      handleDragLeave(draggingNode, dropNode, ev) {
-        console.log('tree drag leave: ', dropNode.label);
-      },
-      handleDragOver(draggingNode, dropNode, ev) {
-        console.log('tree drag over: ', dropNode.label);
-      },
-      handleDragEnd(draggingNode, dropNode, dropType, ev) {
-        console.log('tree drag end: ', dropNode && dropNode.label, dropType);
-      },
-      handleDrop(draggingNode, dropNode, dropType, ev) {
-        console.log('tree drop: ', dropNode.label, dropType);
-      },
-      allowDrop(draggingNode, dropNode, type) {
-        if (dropNode.data.label === 'Level two 3-1') {
-          return type !== 'inner';
-        } else {
-          return true;
-        }
-      },
-      allowDrag(draggingNode) {
-        return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;
-      },
-      loadNode(node, resolve) {
-        if (node.level === 0) {
-          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
-        }
-        if (node.level > 3) return resolve([]);
-        var hasChild;
-        if (node.data.name === 'region1') {
-          hasChild = true;
-        } else if (node.data.name === 'region2') {
-          hasChild = false;
-        } else {
-          hasChild = Math.random() > 0.5;
-        }
-
-        setTimeout(function() {
-          let data;
-          if (hasChild) {
-            data = [{
-              name: 'zone' + count++
-            }, {
-              name: 'zone' + count++
-            }];
-          } else {
-            data = [];
-          }
-
-          resolve(data);
-        }, 500);
-      },
-      loadNode1(node, resolve) {
-        if (node.level === 0) {
-          return resolve([{ name: 'region' }]);
-        }
-        if (node.level > 1) return resolve([]);
-
-        setTimeout(() => {
-          const data = [{
-            name: 'leaf',
-            leaf: true
-          }, {
-            name: 'zone'
-          }];
-
-          resolve(data);
-        }, 500);
-      },
-      getCheckedNodes() {
-        console.log(this.$refs.tree.getCheckedNodes());
-      },
-      getCheckedKeys() {
-        console.log(this.$refs.tree.getCheckedKeys());
-      },
-      setCheckedNodes() {
-        this.$refs.tree.setCheckedNodes([
-          {
-            id: 5,
-            label: 'Level two 2-1'
-          },
-          {
-            id: 9,
-            label: 'Level three 1-1-1'
-          }
-        ]);
-      },
-      setCheckedKeys() {
-        this.$refs.tree.setCheckedKeys([3]);
-      },
-      resetChecked() {
-        this.$refs.tree.setCheckedKeys([]);
-      },
-      append(data) {
-        const newChild = { id: id++, label: 'testtest', children: [] };
-        if (!data.children) {
-          this.$set(data, 'children', []);
-        }
-        data.children.push(newChild);
-      },
-
-      remove(node, data) {
-        const parent = node.parent;
-        const children = parent.data.children || parent.data;
-        const index = children.findIndex(d => d.id === data.id);
-        children.splice(index, 1);
-      },
-
-      renderContent(h, { node, data, store }) {
-        return (
-          <span class="custom-tree-node">
-            <span>{node.label}</span>
-            <span>
-              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
-              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
-            </span>
-          </span>);
-      },
-
-      filterNode(value, data) {
-        if (!value) return true;
-        return data.label.indexOf(value) !== -1;
-      }
-    },
-
-    data() {
-      return {
-        data,
-        data2,
-        data3,
-        data4: JSON.parse(JSON.stringify(data2)),
-        data5: JSON.parse(JSON.stringify(data2)),
-        data6,
-        regions,
-        defaultProps,
-        props,
-        props1,
-        defaultCheckedKeys: [5],
-        defaultExpandedKeys: [2, 3],
-        filterText: ''
-      };
-    }
-  };
-</script>
-
 ## Tree
 
 Display a set of data with hierarchies.

examples/docs/en-US/typography.md

@@ -61,38 +61,6 @@
     },
   }
 </script>
-<style>
-  .demo-typo-size {
-    .color-dark-light {
-      color: #99a9bf;
-    }
-  }
-  .demo-term-box img{
-    width: 24%;
-    margin: 0 4% 20px 0;
-  }
-
-  .lineH-left {
-    display: inline-block;
-    height: 80px
-  }
-  .lineH-right {
-    display: inline-block;
-    list-style: none;
-    padding: 0 0 0 90px;
-    margin: 0;
-    vertical-align: top;
-  }
-  .lineH-right li{
-    font-size: 13px;
-    color: #666;
-    height: 20px;
-    line-height: 20px;
-  }
-  .lineH-right li span{
-    padding-left: 40px;
-  }
-</style>
 
 ## Typography
 

examples/docs/en-US/upload.md

@@ -1,122 +1,3 @@
-<style>
-  .upload-tip {
-    color: #8492a6;
-    font-size: 12px;
-    margin-top: 7px;
-  }
-  .demo-box {
-    margin-bottom: 24px;
-
-    .upload-demo {
-      width: 360px;
-    }
-    .avatar-uploader {
-      .el-upload {
-        border: 1px dashed #d9d9d9;
-        border-radius: 6px;
-        cursor: pointer;
-        position: relative;
-        overflow: hidden;
-
-        &:hover, &:focus {
-          border-color: #409EFF;
-        }
-      }
-      .avatar-uploader-icon {
-        font-size: 28px;
-        color: #8c939d;
-        width: 178px;
-        height: 178px;
-        line-height: 178px;
-        text-align: center;
-      }
-      .avatar {
-        width: 178px;
-        height: 178px;
-        display: block;
-      }
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        fileList: [{
-          name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }, {
-          name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }],
-        fileList2: [{
-          name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }, {
-          name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }],
-        fileList3: [{
-          name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }, {
-          name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }],
-        imageUrl: '',
-        dialogImageUrl: '',
-        dialogVisible: false
-      };
-    },
-    methods: {
-      handleRemove(file, fileList) {
-        console.log(file, fileList);
-      },
-      beforeUpload(file) {
-        if (file.size > 40000000) {
-          console.warn(file.name + ' is too large!');
-          return false;
-        }
-        return true;
-      },
-      handlePreview(file) {
-        console.log(file);
-      },
-      handlePictureCardPreview(file) {
-        this.dialogImageUrl = file.url;
-        this.dialogVisible = true;
-      },
-      submitUpload() {
-        this.$refs.upload.submit();
-      },
-      handleAvatarSuccess(res, file) {
-        this.imageUrl = URL.createObjectURL(file.raw);
-      },
-      beforeAvatarUpload(file) {
-        const isJPG = file.type === 'image/jpeg';
-        const isLt2M = file.size / 1024 / 1024 < 2;
-
-        if (!isJPG) {
-          this.$message.error('Avatar picture must be JPG format!');
-        }
-        if (!isLt2M) {
-          this.$message.error('Avatar picture size can not exceed 2MB!');
-        }
-        return isJPG && isLt2M;
-      },
-      handleChange(file, fileList) {
-        this.fileList3 = fileList.slice(-3);
-      },
-      handleExceed(files, fileList) {
-        this.$message.warning(`You can upload up to 3 files. You selected ${files.length} files this time, and ${files.length + fileList.length} files totally`);
-      },
-      beforeRemove(file, fileList) {
-        return this.$confirm(`确定移除 ${ file.name }？`);
-      }
-    }
-  }
-</script>
 ## Upload
 
 Upload files by clicking or drag-and-drop

examples/docs/es/alert.md

@@ -1,22 +1,3 @@
-<script>
-  export default {
-    methods: {
-      hello() {
-        alert('Hello World!');
-      }
-    }
-  }
-</script>
-<style>
-  .demo-box.demo-alert .el-alert {
-    margin: 20px 0 0;
-  }
-
-  .demo-box.demo-alert .el-alert:first-child {
-    margin: 0;
-  }
-</style>
-
 ## Alert
 
 Mostrar mensajes de alertas importantes.

examples/docs/es/badge.md

@@ -114,27 +114,6 @@ Puede utilizar un punto rojo para marcar contenido que debe ser notado.
 ```
 :::
 
-<style scoped>
-  .share-button {
-    width: 36px;
-    padding: 10px;
-  }
-
-  .mark {
-    margin-top: 8px;
-    line-height: 1;
-    float: right;
-  }
-
-  .clearfix {
-    @utils-clearfix;
-  }
-
-  .item {
-    margin-right: 40px;
-  }
-</style>
-
 ### Atributos
 | Atributo | Descripción                              | Tipo           | Valores aceptados | Por defecto |
 | -------- | ---------------------------------------- | -------------- | ----------------- | ----------- |

examples/docs/es/border.md

@@ -52,53 +52,6 @@
   }
 </script>
 
-<style>
-.demo-border .text {
-  width: 15%;
-}
-.demo-border .line {
-  width: 70%;
-}
-.demo-border .line div{
-  width: 100%;
-  height: 0;
-  border: 1px solid #EEE;
-}
-.demo-border .line .dashed{ 
-  border: 2px dashed #EEE;
-}
-.demo-shadow {
-  height: 100px;
-  width: 50%;
-  border: 1px solid #eee;
-}
-.demo-shadow-text {
-  line-height: 50px;
-  color: #666;
-  font-size: 14px;
-}
-.demo-radius .title{
-  color: #666;
-  font-size: 18px;
-  margin: 10px 0;
-}
-.demo-radius .value{
-  color: #333;
-  font-size: 16px;
-  margin: 10px 0;
-}
-.demo-radius .radius {
-  height: 60px;
-  width: 70%;
-  border: 1px solid #D7DAE2;
-  border-radius: 0;
-  margin-top: 20px;
-}
-.demo-radius .radius-30 {
-  border-radius: 30px;
-}
-</style>
-
 ## Border
 
 We standardize the borders that can be used in buttons, cards, pop-ups and other components.