Chore: upgrade to webpack@4 (#14173)

* Chore: upgrade webpack@4

* Chore: upgrade to webpack@4

* Chore: add babel-preset-stage-2

* Chore: fix test case

* Chore: upgrade webpack@4

* Docs: update docs

* Docs: update docs

* Chore: fix coveralls

* Chore: update yarn.lock

.babelrc

@@ -1,5 +1,17 @@
 {
-  "presets": [["es2015", { "loose": true }]],
+  "presets": [
+    [
+      "env",
+      {
+        "loose": true,
+        "modules": false,
+        "targets": {
+          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+        }
+      }
+    ],
+    "stage-2"
+  ],
   "plugins": ["transform-vue-jsx"],
   "env": {
     "utils": {
@@ -11,6 +23,9 @@
           }
         }]
       ]
+    },
+    "test": {
+      "plugins": ["istanbul"]
     }
   }
 }

.eslintrc

@@ -12,8 +12,8 @@
     "no-restricted-globals": ["error", "event", "fdescribe"]
   },
   "parserOptions": {
+    "ecmaVersion": 6,
     "ecmaFeatures": {
-      "experimentalObjectRestSpread": true,
       "jsx": true
     }
   }

build/bin/build-entry.js

@@ -49,7 +49,7 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
 
-module.exports = {
+export default {
   version: '{{version}}',
   locale: locale.use,
   i18n: locale.i18n,
@@ -58,8 +58,6 @@ module.exports = {
   Loading,
 {{list}}
 };
-
-module.exports.default = module.exports;
 `;
 
 delete Components.font;

build/webpack.common.js

@@ -1,10 +1,11 @@
 const path = require('path');
-const webpack = require('webpack');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
 const config = require('./config');
 
 module.exports = {
+  mode: 'production',
   entry: {
     app: ['./src/index.js']
   },
@@ -21,6 +22,15 @@ module.exports = {
     modules: ['node_modules']
   },
   externals: config.externals,
+  performance: {
+    hints: false
+  },
+  stats: {
+    children: false
+  },
+  optimization: {
+    minimize: false
+  },
   module: {
     rules: [
       {
@@ -33,13 +43,11 @@ module.exports = {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
-          preserveWhitespace: false
+          compilerOptions: {
+            preserveWhitespace: false
+          }
         }
       },
-      {
-        test: /\.json$/,
-        loader: 'json-loader'
-      },
       {
         test: /\.css$/,
         loaders: ['style-loader', 'css-loader', 'postcss-loader']
@@ -49,27 +57,7 @@ module.exports = {
         loaders: ['style-loader', 'css-loader', 'sass-loader']
       },
       {
-        test: /\.html$/,
-        loader: 'html-loader?minimize=false'
-      },
-      {
-        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.svg(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
         loader: 'url-loader',
         query: {
           limit: 10000,
@@ -80,11 +68,6 @@ module.exports = {
   },
   plugins: [
     new ProgressBarPlugin(),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production')
-    }),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true
-    })
+    new VueLoaderPlugin()
   ]
 };

build/webpack.component.js

@@ -1,11 +1,12 @@
 const path = require('path');
-const webpack = require('webpack');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
 const Components = require('../components.json');
 const config = require('./config');
 
 const webpackConfig = {
+  mode: 'production',
   entry: Components,
   output: {
     path: path.resolve(process.cwd(), './lib'),
@@ -20,6 +21,13 @@ const webpackConfig = {
     modules: ['node_modules']
   },
   externals: config.externals,
+  performance: {
+    hints: false
+  },
+  stats: 'none',
+  optimization: {
+    minimize: false
+  },
   module: {
     rules: [
       {
@@ -32,13 +40,11 @@ const webpackConfig = {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
-          preserveWhitespace: false
+          compilerOptions: {
+            preserveWhitespace: false
+          }
         }
       },
-      {
-        test: /\.json$/,
-        loader: 'json-loader'
-      },
       {
         test: /\.css$/,
         loaders: ['style-loader', 'css-loader', 'postcss-loader']
@@ -48,27 +54,7 @@ const webpackConfig = {
         loaders: ['style-loader', 'css-loader', 'sass-loader']
       },
       {
-        test: /\.html$/,
-        loader: 'html-loader?minimize=false'
-      },
-      {
-        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.svg(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
         loader: 'url-loader',
         query: {
           limit: 10000,
@@ -79,12 +65,7 @@ const webpackConfig = {
   },
   plugins: [
     new ProgressBarPlugin(),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production')
-    }),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true
-    })
+    new VueLoaderPlugin()
   ]
 };
 

build/webpack.conf.js

@@ -1,10 +1,11 @@
 const path = require('path');
-const webpack = require('webpack');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
 const config = require('./config');
 
 module.exports = {
+  mode: 'production',
   entry: {
     app: ['./src/index.js']
   },
@@ -24,6 +25,12 @@ module.exports = {
   externals: {
     vue: config.vue
   },
+  performance: {
+    hints: false
+  },
+  stats: {
+    children: false
+  },
   module: {
     rules: [
       {
@@ -36,13 +43,11 @@ module.exports = {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
-          preserveWhitespace: false
+          compilerOptions: {
+            preserveWhitespace: false
+          }
         }
       },
-      {
-        test: /\.json$/,
-        loader: 'json-loader'
-      },
       {
         test: /\.css$/,
         loaders: ['style-loader', 'css-loader', 'postcss-loader']
@@ -52,27 +57,7 @@ module.exports = {
         loaders: ['style-loader', 'css-loader', 'sass-loader']
       },
       {
-        test: /\.html$/,
-        loader: 'html-loader?minimize=false'
-      },
-      {
-        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.svg(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
         loader: 'url-loader',
         query: {
           limit: 10000,
@@ -83,20 +68,6 @@ module.exports = {
   },
   plugins: [
     new ProgressBarPlugin(),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production')
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      },
-      output: {
-        comments: false
-      },
-      sourceMap: false
-    }),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true
-    })
+    new VueLoaderPlugin()
   ]
 };

build/webpack.demo.js

@@ -1,9 +1,10 @@
 const path = require('path');
 const webpack = require('webpack');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const md = require('markdown-it')();
 const slugify = require('transliteration').slugify;
 
@@ -11,7 +12,6 @@ const striptags = require('./strip-tags');
 const config = require('./config');
 
 const isProd = process.env.NODE_ENV === 'production';
-const isDev = process.env.NODE_ENV === 'development';
 const isPlay = !!process.env.PLAY_ENV;
 
 function convert(str) {
@@ -30,6 +30,7 @@ function wrap(render) {
 }
 
 const webpackConfig = {
+  mode: process.env.NODE_ENV,
   entry: isProd ? {
     docs: './examples/entry.js',
     'element-ui': './src/index.js'
@@ -51,18 +52,18 @@ const webpackConfig = {
     publicPath: '/',
     noInfo: true
   },
+  performance: {
+    hints: false
+  },
+  stats: {
+    children: false
+  },
   module: {
     rules: [
       {
         enforce: 'pre',
-        test: /\.jsx?$/,
-        exclude: /node_modules|bower_components/,
-        loader: 'eslint-loader'
-      },
-      {
-        enforce: 'pre',
-        test: /\.vue$/,
-        exclude: /node_modules|bower_components/,
+        test: /\.(vue|jsx?)$/,
+        exclude: /node_modules/,
         loader: 'eslint-loader'
       },
       {
@@ -72,86 +73,92 @@ const webpackConfig = {
         loader: 'babel-loader'
       },
       {
-        test: /\.md$/,
-        loader: 'vue-markdown-loader',
+        test: /\.vue$/,
+        loader: 'vue-loader',
         options: {
-          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']
-          ],
-          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;
+          compilerOptions: {
+            preserveWhitespace: false
           }
         }
       },
       {
-        test: /\.json$/,
-        loader: 'json-loader'
+        test: /\.css$/,
+        loaders: [
+          isProd ? MiniCssExtractPlugin.loader : 'style-loader',
+          'css-loader',
+          'postcss-loader'
+        ]
       },
       {
         test: /\.scss$/,
-        loaders: ['style-loader', 'css-loader', 'sass-loader']
-      },
-      {
-        test: /\.html$/,
-        loader: 'html-loader?minimize=false'
-      },
-      {
-        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
+        loaders: [
+          isProd ? MiniCssExtractPlugin.loader : 'style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
       },
       {
-        test: /\.svg(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
+        test: /\.md$/,
+        loaders: [
+          {
+            loader: 'vue-loader'
+          },
+          {
+            loader: 'vue-markdown-loader/lib/markdown-compiler',
+            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']
+              ]
+            }
+          }
+        ]
       },
       {
-        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
         loader: 'url-loader',
         query: {
           limit: 10000,
@@ -170,80 +177,21 @@ const webpackConfig = {
       { from: 'examples/versions.json' }
     ]),
     new ProgressBarPlugin(),
+    new VueLoaderPlugin(),
     new webpack.LoaderOptionsPlugin({
-      minimize: true,
       vue: {
-        preserveWhitespace: false
+        compilerOptions: {
+          preserveWhitespace: false
+        }
       }
     })
   ]
 };
 
 if (isProd) {
-  webpackConfig.externals = {
-    vue: 'Vue',
-    'vue-router': 'VueRouter'
-  };
-  webpackConfig.module.rules.push(
-    {
-      test: /\.vue$/,
-      loader: 'vue-loader',
-      options: {
-        extractCSS: true,
-        preserveWhitespace: false
-      }
-    },
-    {
-      test: /\.css$/,
-      loader: ExtractTextPlugin.extract({
-        fallback: 'style-loader',
-        use: [
-          { loader: 'css-loader', options: { importLoaders: 1 } },
-          'postcss-loader'
-        ]
-      })
-    }
-  );
   webpackConfig.plugins.push(
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      },
-      output: {
-        comments: false
-      },
-      sourceMap: false
-    }),
-    new ExtractTextPlugin({
+    new MiniCssExtractPlugin({
       filename: '[name].[contenthash:7].css'
-    }),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production')
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: ['element-ui', 'manifest']
-    })
-  );
-}
-if (isDev) {
-  webpackConfig.module.rules.push(
-    {
-      test: /\.vue$/,
-      loader: 'vue-loader',
-      options: {
-        preserveWhitespace: false
-      }
-    },
-    {
-      test: /\.css$/,
-      loaders: ['style-loader', 'css-loader', 'postcss-loader']
-    }
-  );
-  webpackConfig.plugins.push(
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NamedModulesPlugin(),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('development')
     })
   );
 }

build/webpack.test.js

@@ -1,9 +1,11 @@
 const path = require('path');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
 const config = require('./config');
 
 const webpackConfig = {
+  mode: 'development',
   entry: {
     app: ['./src/index.js']
   },
@@ -23,14 +25,6 @@ const webpackConfig = {
   devtool: '#inline-source-map',
   module: {
     rules: [
-      {
-        enforce: 'post',
-        test: /\.jsx?$/,
-        loader: 'isparta-loader',
-        options: { esModules: true },
-        exclude: config.jsexclude,
-        include: /src|packages/
-      },
       {
         test: /\.(jsx?|babel|es6)$/,
         include: process.cwd(),
@@ -41,42 +35,17 @@ const webpackConfig = {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
-          loaders: {
-            js: process.env.CI_ENV ? 'isparta-loader' : 'isparta-loader!eslint-loader'
-          },
-          preserveWhitespace: false
+          compilerOptions: {
+            preserveWhitespace: false
+          }
         }
       },
-      {
-        test: /\.json$/,
-        loader: 'json-loader'
-      },
       {
         test: /\.css$/,
         loaders: ['style-loader', 'css-loader', 'postcss-loader']
       },
       {
-        test: /\.html$/,
-        loader: 'html-loader?minimize=false'
-      },
-      {
-        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.svg(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
         loader: 'url-loader',
         query: {
           limit: 10000,
@@ -86,6 +55,7 @@ const webpackConfig = {
     ]
   },
   plugins: [
+    new VueLoaderPlugin()
   ]
 };
 

examples/app.vue

@@ -1,178 +1,3 @@
-<style lang="css">
-  @import 'highlight.js/styles/color-brewer.css';
-  @import 'assets/styles/common.css';
-  @import 'assets/styles/fonts/style.css';
-
-  html, body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
-    font-weight: 400;
-    -webkit-font-smoothing: antialiased;
-
-    &.is-component {
-      overflow: hidden;
-    }
-  }
-
-  #app {
-    height: 100%;
-    
-    @when component {
-      overflow-y: hidden;
-
-      .main-cnt {
-        padding: 0;
-        margin-top: 0;
-        height: 100%;
-        min-height: auto;
-      }
-
-      .headerWrapper {
-        position: fixed;
-        width: 100%;
-        left: 0;
-        top: 0;
-        z-index: 1500;
-        
-        .container {
-          padding: 0;
-        }
-      }
-    }
-  }
-
-  a {
-    color: #409EFF;
-    text-decoration: none;
-  }
-
-  code {
-    background-color: #f9fafc;
-    padding: 0 4px;
-    border: 1px solid #eaeefb;
-    border-radius: 4px;
-  }
-
-  button, input, select, textarea {
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    color: inherit;
-  }
-
-  .hljs {
-    line-height: 1.8;
-    font-family: Menlo, Monaco, Consolas, Courier, monospace;
-    font-size: 12px;
-    padding: 18px 24px;
-    background-color: #fafafa;
-    border: solid 1px #eaeefb;
-    margin-bottom: 25px;
-    border-radius: 4px;
-    -webkit-font-smoothing: auto;
-  }
-
-  .main-cnt {
-    margin-top: -80px;
-    padding: 80px 0 340px;
-    box-sizing: border-box;
-    min-height: 100%;
-  }
-
-  .container,
-  .page-container {
-    width: 1140px;
-    padding: 0;
-    margin: 0 auto;
-  }
-
-  .page-container {
-    padding-top: 55px;
-
-    h2 {
-      font-size: 28px;
-      color: #1f2d3d;
-      margin: 0;
-    }
-    h3 {
-      font-size: 22px;
-    }
-    h2, h3, h4, h5 {
-      font-weight: normal;
-      color: #1f2f3d;
-
-      &:hover a {
-        opacity: .4;
-      }
-
-      a {
-        float: left;
-        margin-left: -20px;
-        opacity: 0;
-        cursor: pointer;
-
-        &:hover {
-          opacity: .4;
-        }
-      }
-    }
-
-    p {
-      font-size: 14px;
-      color: #5e6d82;
-      line-height: 1.5em;
-    }
-
-    .tip {
-      padding: 8px 16px;
-      background-color: #ECF8FF;
-      border-radius: 4px;
-      border-left: #50bfff 5px solid;
-      margin: 20px 0;
-
-      code {
-        background-color: rgba(255, 255, 255, .7);
-        color: #445368;
-      }
-    }
-
-    .warning {
-      padding: 8px 16px;
-      background-color: #fff6f7;
-      border-radius: 4px;
-      border-left: #FE6C6F 5px solid;
-      margin: 20px 0;
-
-      code {
-        background-color: rgba(255, 255, 255, .7);
-        color: #445368;
-      }
-    }
-  }
-  .demo {
-    margin: 20px 0;
-  }
-  @media (max-width: 1140px) {
-    .container,
-    .page-container {
-      width: 100%;
-    }
-  }
-
-  @media (max-width: 768px) {
-    .container,
-    .page-container {
-      padding: 0 20px;
-    }
-  
-    #app.is-component .headerWrapper .container {
-      padding: 0 12px;
-    }
-  }
-</style>
-
 <template>
   <div id="app" :class="{ 'is-component': isComponent }">
     <main-header v-if="lang !== 'play'"></main-header>
@@ -252,30 +77,12 @@
       if (this.lang === 'zh-CN') {
         this.suggestJump();
       }
-      // setTimeout(() => {
-      //   const notified = localStorage.getItem('ES_NOTIFIED_2');
-      //   if (!notified && this.lang !== 'es') {
-      //     const title = this.lang === 'zh-CN'
-      //       ? '西班牙语文档正式上线'
-      //       : 'Spanish docs now available';
-      //     const message = this.lang === 'zh-CN'
-      //       ? '点击这里进行切换'
-      //       : 'Click here to switch';
-      //     const self = this;
-      //     this.$notify({
-      //       title,
-      //       duration: 0,
-      //       message,
-      //       onClick() {
-      //         self.$router.push('/es');
-      //         localStorage.setItem('ES_NOTIFIED_2', 1);
-      //       },
-      //       onClose() {
-      //         localStorage.setItem('ES_NOTIFIED_2', 1);
-      //       }
-      //     });
-      //   }
-      // }, 3500);
     }
   };
 </script>
+
+<style>
+  @import 'highlight.js/styles/color-brewer.css';
+  @import 'assets/styles/common.css';
+  @import 'assets/styles/fonts/style.css';
+</style>

examples/assets/styles/common.css

@@ -1 +1,168 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
 
+  &.is-component {
+    overflow: hidden;
+  }
+}
+
+#app {
+  height: 100%;
+  
+  @when component {
+    overflow-y: hidden;
+
+    .main-cnt {
+      padding: 0;
+      margin-top: 0;
+      height: 100%;
+      min-height: auto;
+    }
+
+    .headerWrapper {
+      position: fixed;
+      width: 100%;
+      left: 0;
+      top: 0;
+      z-index: 1500;
+      
+      .container {
+        padding: 0;
+      }
+    }
+  }
+}
+
+a {
+  color: #409EFF;
+  text-decoration: none;
+}
+
+code {
+  background-color: #f9fafc;
+  padding: 0 4px;
+  border: 1px solid #eaeefb;
+  border-radius: 4px;
+}
+
+button, input, select, textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+.hljs {
+  line-height: 1.8;
+  font-family: Menlo, Monaco, Consolas, Courier, monospace;
+  font-size: 12px;
+  padding: 18px 24px;
+  background-color: #fafafa;
+  border: solid 1px #eaeefb;
+  margin-bottom: 25px;
+  border-radius: 4px;
+  -webkit-font-smoothing: auto;
+}
+
+.main-cnt {
+  margin-top: -80px;
+  padding: 80px 0 340px;
+  box-sizing: border-box;
+  min-height: 100%;
+}
+
+.container,
+.page-container {
+  width: 1140px;
+  padding: 0;
+  margin: 0 auto;
+}
+
+.page-container {
+  padding-top: 55px;
+
+  h2 {
+    font-size: 28px;
+    color: #1f2d3d;
+    margin: 0;
+  }
+  h3 {
+    font-size: 22px;
+  }
+  h2, h3, h4, h5 {
+    font-weight: normal;
+    color: #1f2f3d;
+
+    &:hover a {
+      opacity: .4;
+    }
+
+    a {
+      float: left;
+      margin-left: -20px;
+      opacity: 0;
+      cursor: pointer;
+
+      &:hover {
+        opacity: .4;
+      }
+    }
+  }
+
+  p {
+    font-size: 14px;
+    color: #5e6d82;
+    line-height: 1.5em;
+  }
+
+  .tip {
+    padding: 8px 16px;
+    background-color: #ECF8FF;
+    border-radius: 4px;
+    border-left: #50bfff 5px solid;
+    margin: 20px 0;
+
+    code {
+      background-color: rgba(255, 255, 255, .7);
+      color: #445368;
+    }
+  }
+
+  .warning {
+    padding: 8px 16px;
+    background-color: #fff6f7;
+    border-radius: 4px;
+    border-left: #FE6C6F 5px solid;
+    margin: 20px 0;
+
+    code {
+      background-color: rgba(255, 255, 255, .7);
+      color: #445368;
+    }
+  }
+}
+.demo {
+  margin: 20px 0;
+}
+@media (max-width: 1140px) {
+  .container,
+  .page-container {
+    width: 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .container,
+  .page-container {
+    padding: 0 20px;
+  }
+
+  #app.is-component .headerWrapper .container {
+    padding: 0 12px;
+  }
+}

examples/components/demo-block.vue

@@ -178,7 +178,8 @@
 
 <script type="text/babel">
   import compoLang from '../i18n/component.json';
-  import { version } from 'main/index.js';
+  import Element from 'main/index.js';
+  const { version } = Element;
 
   export default {
     data() {

examples/components/footer.vue

@@ -162,7 +162,8 @@
 
 <script type="text/babel">
   import compoLang from '../i18n/component.json';
-  import { version } from 'main/index.js';
+  import Element from 'main/index.js';
+  const { version } = Element;
 
   export default {
     data() {

examples/components/header.vue

@@ -367,7 +367,8 @@
   import ThemePicker from './theme-picker.vue';
   import AlgoliaSearch from './search.vue';
   import compoLang from '../i18n/component.json';
-  import { version } from 'main/index.js';
+  import Element from 'main/index.js';
+  const { version } = Element;
 
   export default {
     data() {

examples/components/theme-picker.vue

@@ -22,7 +22,8 @@
 </style>
 
 <script>
-  import { version } from 'main/index.js';
+  import Element from 'main/index.js';
+  const { version } = Element;
 
   const ORIGINAL_THEME = '#409EFF';
   export default {

examples/docs/en-US/cascader.md

@@ -1666,6 +1666,7 @@ Search and select options with a keyword.
 ### Attributes
 | Attribute | Description         | Type    | Options       | Default|
 |---------- |-------------------- |---------|-------------  |-------- |
+| value / v-model | binding value  | boolean / string / number | — | — |
 | options   | data of the options | array | — | — |
 | props | configuration options, see the following table | object | — | — |
 | value | selected value | array | — | — |

examples/docs/en-US/checkbox.md

@@ -286,6 +286,7 @@ Checkbox with button styles.
 ### Checkbox Attributes
 | Attribute      | Description         | Type    | Options                         | Default|
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | binding value | string / number / boolean | — | — |
 | label     | value of the Checkbox when used inside a `checkbox-group`   | string / number / boolean   |       —        |     —    |
 | true-label | value of the Checkbox if it's checked   | string / number    |       —        |     —    |
 | false-label | value of the Checkbox if it's not checked   | string / number    |      —         |     —    |
@@ -304,6 +305,7 @@ Checkbox with button styles.
 ### Checkbox-group Attributes
 | Attribute      | Description         | Type    | Options                         | Default|
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | binding value | array | — | — |
 |size | size of checkbox buttons or bordered checkboxes | string | medium / small / mini | — |
 | disabled  | whether the nesting checkboxes are disabled | boolean   | — | false   |
 | min     | minimum number of checkbox checked   | number    |       —        |     —    |

examples/docs/en-US/collapse.md

@@ -141,13 +141,13 @@ Besides using the `title` attribute, you can customize panel title with named sl
 ### Collapse Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | currently active panel | string (accordion mode) / array (non-accordion mode) | — | — |
 | accordion | whether to activate accordion mode | boolean | — | false |
-| value | currently active panel | string (accordion mode)/array (non-accordion mode) | — | — |
 
 ### Collapse Events
 | Event Name | Description | Parameters |
 |---------|---------|---------|
-| change | triggers when active panels change | activeNames: array (non-accordion mode)/string (accordion mode) |
+| change | triggers when active panels change | (activeNames: array (non-accordion mode) / string (accordion mode)) |
 
 ### Collapse Item Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |

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

@@ -168,6 +168,7 @@ ColorPicker is a color selector supporting multiple color formats.
 ### Attributes
 | Attribute | Description | Type | Accepted Values | Default |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | binding value | string | — | — |
 | disabled | whether to disable the ColorPicker | boolean | — | false |
 | size | size of ColorPicker | string | — | medium / small / mini |
 | show-alpha | whether to display the alpha slider | boolean | — | false |

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

@@ -476,6 +476,7 @@ When picking a date range, you can assign the time part for start date and end d
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | binding value | date(DatePicker) / array(DateRangePicker) | — | — |
 | readonly | whether DatePicker is read only | boolean | — | false |
 | disabled | whether DatePicker is disabled | boolean | — | false |
 | size | size of Input | string | large/small/mini | — |

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

@@ -279,6 +279,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | binding value | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |
 | readonly | whether DatePicker is read only | boolean | — | false |
 | disabled | whether DatePicker is disabled | boolean | — | false |
 | editable | whether the input is editable | boolean | — | true |

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

@@ -181,7 +181,7 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |----| ----| ---| ----| -----|
-|value | binding value| number | — | — |
+|value / v-model | binding value| number | — | 0 |
 |min | the minimum allowed value | number | — | `-Infinity` |
 |max | the maximum allowed value | number | — | `Infinity` |
 |step | incremental step | number | — | 1 |

examples/docs/en-US/input.md

@@ -643,7 +643,7 @@ Search data from server-side.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 | ----| ----| ----| ---- | ----- |
 |type| type of input | string | text, textarea and other [native input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
-|value| binding value | string / number| — | — |
+|value / v-model| binding value | string / number| — | — |
 |maxlength| same as `maxlength` in native input | number| — | — |
 |minlength| same as `minlength` in native input | number | — | — |
 |placeholder| placeholder of Input| string | — | — |

examples/docs/en-US/popover.md

@@ -242,7 +242,7 @@ Of course, you can nest other operations. It's more light-weight than using a di
 |  width        |  popover width  | string, number            | — | Min width 150px |
 |  placement        |  popover placement  | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
 |  disabled       |  whether Popover is disabled  | boolean    | — |  false |
-|  value(v-model)        |  whether popover is visible  | Boolean           | — |  false |
+|  value / v-model        |  whether popover is visible  | Boolean           | — |  false |
 |  offset        |  popover offset  | number           | — |  0 |
 |  transition     |  popover transition animation      | string             | — | el-fade-in-linear |
 |  visible-arrow   |  whether a tooltip arrow is displayed or not. For more info, please refer to [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |

examples/docs/en-US/radio.md

@@ -195,6 +195,7 @@ Radio with button styles.
 
  Attribute      | Description          | Type      | Accepted Values       | Default
 ---- | ---- | ---- | ---- | ----
+value / v-model | binding value | string / number / boolean | — | —
 label | the value of Radio | string / number / boolean | — | —
 disabled | whether Radio is disabled | boolean | — | false
 border  | whether to add a border around Radio  | boolean   | — | false
@@ -211,6 +212,7 @@ name | native 'name' attribute | string    |      —         |     —
 
  Attribute      | Description          | Type      | Accepted Values       | Default
 ---- | ---- | ---- | ---- | ----
+value / v-model | binding value | string / number / boolean | — | —
 size | the size of radio buttons or bordered radios | string | medium / small / mini | —
 disabled  | whether the nesting radios are disabled | boolean   | — | false
 text-color | font color when button is active | string   | — | #ffffff   |

examples/docs/en-US/rate.md

@@ -154,6 +154,7 @@ Read-only Rate is for displaying rating score. Half star is supported.
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | binding value | number | — | 0 |
 | max | max rating score | number | — | 5 |
 | disabled | whether Rate is read-only | boolean | — | false |
 | allow-half | whether picking half start is allowed | boolean | — | false |

examples/docs/en-US/select.md

@@ -662,6 +662,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 ### Select Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | binding value | boolean / string / number | — | — |
 | multiple | whether multiple-select is activated | boolean | — | false |
 | disabled | whether Select is disabled | boolean | — | false |
 | value-key | unique identity key name for value, required when value is an object | string | — | value |

examples/docs/en-US/slider.md

@@ -228,6 +228,7 @@ Selecting a range of values is supported.
 ## Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | binding value | number | — | 0 |
 | min | minimum value | number | — | 0 |
 | max | maximum value | number | — | 100 |
 | disabled | whether Slider is disabled | boolean | — | false |

examples/docs/en-US/switch.md

@@ -141,6 +141,7 @@ Switch is used for switching between two opposing states.
 
  Attribute      | Description          | Type      | Accepted Values       | Default
 ----| ----| ----| ----|----
+value / v-model | binding value | boolean / string / number | — | —
 disabled | whether Switch is disabled | boolean | — | false
 width | width of Switch | number | — | 40
 active-icon-class | class name of the icon displayed when in `on` state, overrides `active-text` | string | — | —

examples/docs/en-US/tabs.md

@@ -370,11 +370,11 @@ Only card type Tabs support addable & closeable.
 ### Tabs Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model  | binding value, name of the selected tab  | string   |  —  |  name of first tab |
 | type     | type of Tab | string   | card/border-card  |     —    |
 | closable  | whether Tab is closable | boolean   | — |  false  |
 | addable  | whether Tab is addable   | boolean   | — |  false  |
 | editable  | whether Tab is addable and closable | boolean   | — |  false  |
-| value  | name of the selected tab  | string   |  —  |  name of first tab |
 | tab-position  | position of tabs | string   |  top/right/bottom/left  |  top |
 | stretch  | whether width of tab automatically fits its container | boolean   |  -  |  false |
 | before-leave | hook function before switching tab. If `false` is returned or a `Promise` is returned and then is rejected, switching will be prevented | Function(activeName, oldActiveName) | — | — |

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

@@ -173,6 +173,7 @@ Can pick an arbitrary time range.
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | binding value | date(TimePicker) / string(TimeSelect) | - | - |
 | readonly | whether DatePicker is read only | boolean | — | false |
 | disabled | whether DatePicker is disabled | boolean | — | false |
 | editable | whether the input is editable | boolean | — | true |
@@ -183,7 +184,6 @@ Can pick an arbitrary time range.
 | end-placeholder | placeholder for the end time in range mode | string | — | — |
 | is-range | whether to pick a time range, only works with `<el-time-picker>` | boolean | — | false |
 | arrow-control | whether to pick time using arrow buttons, only works with `<el-time-picker>` | boolean | — | false |
-| value | value of the picker | Date for Time Picker, and string for Time Select | - | - |
 | align | alignment | left / center / right | left |
 | popper-class | custom class name for TimePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |

examples/docs/en-US/tooltip.md

@@ -229,7 +229,7 @@ Disabled form elements are not supported for Tooltip, more information can be fo
 |  effect   |  Tooltip theme  | string   | dark/light  | dark  |
 |  content  | display content, can be overridden by `slot#content` | String   | — | — |
 |  placement | position of Tooltip   | string    |  top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
-|  value(v-model) | visibility of Tooltip | boolean           | — |  false |
+|  value / v-model | visibility of Tooltip | boolean           | — |  false |
 |  disabled       |  whether Tooltip is disabled  | boolean    | — |  false |
 |  offset        |  offset of the Tooltip   | number    | — |  0 |
 |  transition     |  animation name | string             | — | el-fade-in-linear |

examples/docs/en-US/transfer.md

@@ -287,6 +287,7 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
 ### Attributes
 | Attribute | Description | Type  | Accepted Values | Default |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | binding value | array | — | — |
 | data | data source | array[{ key, label, disabled }] | — | [ ] |
 | filterable | whether Transfer is filterable | boolean | — | false |
 | filter-placeholder | placeholder for the filter input | string | — | Enter keyword |

examples/docs/es/cascader.md

@@ -1672,6 +1672,7 @@ Buscar y seleccionar opciones con una palabra clave.
 ### Atributos
 | Atributo         | Descripción                              | Tipo            | Opciones              | Por defecto |
 | ---------------- | ---------------------------------------- | --------------- | --------------------- | ----------- |
+| value / v-model   | valor enlazado                           | boolean / string / number | —                     | —           |
 | options          | datos de las opciones                    | array           | —                     | —           |
 | props            | opciones de configuracion,  mire la tabla siguiente | object          | —                     | —           |
 | value            | valor seleccionado                       | array           | —                     | —           |

examples/docs/es/checkbox.md

@@ -286,6 +286,7 @@ Checkbox con estilo tipo Botón.
 ### Atributos de Checkbox
 | Atributo      | Descripción                              | Tipo                      | Valores aceptados     | Por defecto |
 | ------------- | ---------------------------------------- | ------------------------- | --------------------- | ----------- |
+| value / v-model | valor enlazado | string / number / boolean | — | — |
 | label         | valor del Checkbox si es usado dentro de un tag `checkbox-group` | string / number / boolean | —                     | —           |
 | true-label    | valor del Checkbox si está marcado       | string / number           | —                     | —           |
 | false-label   | valor del Checkbox si no está marcado    | string / number           | —                     | —           |
@@ -304,6 +305,7 @@ Checkbox con estilo tipo Botón.
 ### Atributos de Checkbox-group
 | Atributo   | Descripción                              | Tipo    | Valores aceptados     | Por Defecto |
 | ---------- | ---------------------------------------- | ------- | --------------------- | ----------- |
+| value / v-model | valor enlazado | array | — | — |
 | size       | tamaño de los checkboxes de tipo botón o los checkboxes con border | string  | medium / small / mini | —           |
 | disabled   | especifica si los checkboxes anidados están deshabilitados | boolean | —                     | false       |
 | min        | cantidad mínima de checkboxes que deben ser marcados | number  | —                     | —           |

examples/docs/es/collapse.md

@@ -141,13 +141,13 @@ Además de usar el atributo `title`, se puede personalizar el título del panel
 ### Atributos de Collapse
 | Atributo  | Descripción                           | Tipo                                     | Valores aceptados | Por defecto |
 | --------- | ------------------------------------- | ---------------------------------------- | ----------------- | ----------- |
+| value / v-model     | panel activo                          | string (modo acordeón) / array (No modo acordeón) | —                 | —           |
 | accordion | especifica si activa el modo acordeón | boolean                                  | —                 | false       |
-| value     | panel activo                          | string (modo acordeón)/array (No modo acordeón) | —                 | —           |
 
 ### Eventos de Collapse
 | Nombre de Evento | Descripción                              | Parametros                               |
 | ---------------- | ---------------------------------------- | ---------------------------------------- |
-| change           | se dispara cuando los paneles activos cambian | activeNames: array (No modo acordeón)/string (modo acordeón) |
+| change           | se dispara cuando los paneles activos cambian | (activeNames: array (No modo acordeón) / string (modo acordeón)) |
 
 
 ### Atributos de Collapse Item

examples/docs/es/color-picker.md

@@ -165,14 +165,15 @@ ColorPicker es un selector de color que soporta varios formatos de color.
 :::
 
 ### Atributos
-| Atributo     | Descripción                              | Tipo    | Valores aceptados     | Por defecto                              |
-| ------------ | ---------------------------------------- | ------- | --------------------- | ---------------------------------------- |
-| disabled     | especifica si se deshabilita el ColorPicker | boolean | —                     | false                                    |
-| size         | tamaño del ColorPicker                   | string  | —                     | medium / small / mini                    |
-| show-alpha   | especifica si se muestra el control deslizante para el valor alpha | boolean | —                     | false                                    |
-| color-format | formato de color del `v-model`           | string  | hsl / hsv / hex / rgb | hex (si show-alpha es false)/ rgb (si show-alpha es true) |
-| popper-class | nombre de clase para el dropdown del ColorPicker | string  | —                     | —                                        |
-| predefine    | opciones de colores predefinidas | array | — | — |
+| Atributo       | Descripción                              | Tipo    | Valores aceptados     | Por defecto                              |
+| -------------- | ---------------------------------------- | ------- | --------------------- | ---------------------------------------- |
+| value / v-model | valor enlazado                           | string  | —                     | —                                        |
+| disabled       | especifica si se deshabilita el ColorPicker | boolean | —                     | false                                    |
+| size           | tamaño del ColorPicker                   | string  | —                     | medium / small / mini                    |
+| show-alpha     | especifica si se muestra el control deslizante para el valor alpha | boolean | —                     | false                                    |
+| color-format   | formato de color del `v-model`           | string  | hsl / hsv / hex / rgb | hex (si show-alpha es false)/ rgb (si show-alpha es true) |
+| popper-class   | nombre de clase para el dropdown del ColorPicker | string  | —                     | —                                        |
+| predefine      | opciones de colores predefinidas | array | — | — |
 
 ### Eventos
 | Nombre de Evento | Descripción                              | Parametros             |

examples/docs/es/date-picker.md

@@ -477,6 +477,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
 ### Atributos
 | Atributo          | Descripción                              | Tipo              | Valores aceptados                        | Por defecto          |
 | ----------------- | ---------------------------------------- | ----------------- | ---------------------------------------- | -------------------- |
+| value / v-model    | valor enlazado | date(DatePicker) / array(DateRangePicker) | — | — |
 | readonly          | si DatePicker es solo de lectura         | boolean           | —                                        | false                |
 | disabled          | si DatePicker esta deshabilitado         | boolean           | —                                        | false                |
 | size              | tamaño del input                         | string            | large/small/mini                         | —                    |

examples/docs/es/datetime-picker.md

@@ -280,6 +280,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
 ### Atributos
 | Atributos          | Descripción                              | Tipo              | Valores aceptados                        | Por defecto          |
 | ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- | -------------------- |
+| value / v-model     | valor enlazado                           | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |
 | readonly           | si DatePicker es solo de lectura         | boolean           | —                                        | false                |
 | disabled           | si DatePicker esta deshabilitada         | boolean           | —                                        | false                |
 | editable           | Si la entrada es editable                | boolean           | —                                        | true                 |

examples/docs/es/input-number.md

@@ -182,7 +182,7 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
 
 | Atributo          | Descripción                              | Tipo    | Valores aceptados | Por defecto |
 | ----------------- | ---------------------------------------- | ------- | ----------------- | ----------- |
-| value             | valor vinculado                          | number  | —                 | —           |
+| value / v-model    | valor vinculado                          | number  | —                 | 0           |
 | min               | el valor mínimo permitido                | number  | —                 | `-Infinity`  |
 | max               | el valor maximo permitido                | number  | —                 | `Infinity`  |
 | step              | incremento (salto)                       | number  | —                 | 1           |

examples/docs/es/input.md

@@ -634,7 +634,7 @@ Búsqueda de datos desde el servidor.
 | Atributo      | Descripción                                                                                                                                      | Tipo             | Valores aceptados                                                                                                                       | Por defecto |
 | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
 | type          | tipo de input                                                                                                                                    | string           | text, textarea y otros [tipos de entrada nativos](https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input#Form_%3Cinput%3E_types) | text        |
-| value         | valor enlazado                                                                                                                                   | string / number  | —                                                                                                                                       | —           |
+| value / v-model | valor enlazado                          | boolean / string / number | —                       | —           |                                                                                                                                | —           |
 | maxlength     | igual que `maxlength` en el input nativo                                                                                                         | number           | —                                                                                                                                       | —           |
 | minlength     | igual que `minlength` en el input nativo                                                                                                         | number           | —                                                                                                                                       | —           |
 | placeholder   | placeholder del Input                                                                                                                            | string           | —                                                                                                                                       | —           |

examples/docs/es/popover.md

@@ -241,7 +241,7 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
 | width          | ancho del popover                        | string, number | —                                        | Min width 150px                          |
 | placement      | posición del popover en la pantalla      | string         | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom                                   |
 | disabled       | si el popover está deshabilitado         | boolean        | —                                        | false                                    |
-| value(v-model) | si el popover está visible               | Boolean        | —                                        | false                                    |
+| value / v-model | si el popover está visible               | Boolean        | —                                        | false                                    |
 | offset         | popover offset                           | number         | —                                        | 0                                        |
 | transition     | popover transition animation             | string         | —                                        | el-fade-in-linear                        |
 | visible-arrow  | si una flecha del tooltip es mostrada o no. Para más información, por favor refiérase a [Vue-popper](https://github.com/element-component/vue-popper) | boolean        | —                                        | true                                     |

examples/docs/es/radio.md

@@ -193,6 +193,7 @@ Radio con estilo de botón.
 
 | Atributo | Descripción                              | Tipo                      | Valores Aceptado      | Por defecto |
 | -------- | ---------------------------------------- | ------------------------- | --------------------- | ----------- |
+| value / v-model | valor enlazado | string / number / boolean | — | — |
 | label    | el valor del Radio                       | string / number / boolean | —                     | —           |
 | disabled | si el Radio está deshabilitado           | boolean                   | —                     | false       |
 | border   | agregar borde alrededor del elemento Radio | boolean                   | —                     | false       |
@@ -211,6 +212,7 @@ Radio con estilo de botón.
 
 | Atributo   | Descripción                              | Tipo    | Valores Aceptado      | Valores por defecto |
 | ---------- | ---------------------------------------- | ------- | --------------------- | ------------------- |
+| value / v-model | valor enlazado | string / number / boolean | — | — |
 | size       | tamaño de los `radio buttons` o `bordered radios` | string  | medium / small / mini | —                   |
 | disabled   | si la anidación de radios está desahabilitada | boolean | —                     | false               |
 | text-color | color de las letras cuando el botón está activo | string  | —                     | #ffffff             |

examples/docs/es/rate.md

@@ -155,6 +155,7 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e
 ### Atributos
 | Atributo                 | Descripción                              | Tipo    | Valores aceptado | Por defecto                              |
 | ------------------------ | ---------------------------------------- | ------- | ---------------- | ---------------------------------------- |
+| value / v-model           | valor enlazado                           | number  | —                | 0                                        |
 | max                      | puntuación máxima                        | number  | —                | 5                                        |
 | disabled                 | si la calificación es de solo lectura    | boolean | —                | false                                    |
 | allow-half               | si escoger media estrella está permitido | boolean | —                | false                                    |

examples/docs/es/select.md

@@ -668,6 +668,7 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
 ### Select atributos
 | Atributo             | Descripción                              | Tipo     | Valores aceptados | Por defecto      |
 | -------------------- | ---------------------------------------- | -------- | ----------------- | ---------------- |
+| value / v-model       | valor enlazado                           | boolean / string / number  | —         | —                |
 | multiple             | si multiple-select esta activo           | boolean  | —                 | false            |
 | disabled             | si Select esta deshabilitado             | boolean  | —                 | false            |
 | collapse-tags        | si se colapsan los tags a un texto cuando `multiple` es `true`. | boolean  | —                 | false            |

examples/docs/es/slider.md

@@ -230,6 +230,7 @@ Se soporta la selección de un rango de valores.
 ## Atributos
 | Atributo            | Descripción                              | Tipo            | Valores aceptados | Por defecto |
 | ------------------- | ---------------------------------------- | --------------- | ----------------- | ----------- |
+| value / v-model      | valor enlazado                           | number          | —                 | 0           |
 | min                 | valor minimo                             | number          | —                 | 0           |
 | max                 | valor máximo                             | number          | —                 | 100         |
 | disabled            | si el Slider esta deshabitado            | boolean         | —                 | false       |

examples/docs/es/switch.md

@@ -142,6 +142,7 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
 
 | Atributo            | Descripción                              | Tipo                      | Valores aceptados | Por defecto |
 | ------------------- | ---------------------------------------- | ------------------------- | ----------------- | ----------- |
+| value / v-model      | valor enlazado                           | boolean / string / number | —                 | —           |
 | disabled            | si Switch esta deshabilitado             | boolean                   | —                 | false       |
 | width               | ancho del componente Switch              | number                    | —                 | 40          |
 | active-icon-class   | nombre de la clase del icono mostrado en el estado `on`, sobreescribe `active-text` | string                    | —                 | —           |

examples/docs/es/tabs.md

@@ -368,16 +368,16 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
 :::
 
 ### Atributos de Pestañas
-| Atributo     | Descripción                          | Tipo    | Valores aceptados     | Por defecto                 |
-| ------------ | ------------------------------------ | ------- | --------------------- | --------------------------- |
-| type         | tipo de Pestaña                      | string  | card/border-card      | —                           |
-| closable     | si la Pestaña es cerrable            | boolean | —                     | false                       |
-| addable      | si la Pestaña es añadible            | boolean | —                     | false                       |
-| editable     | si la Pestaña es añadible y cerrable | boolean | —                     | false                       |
-| value        | nombre de la pestaña seleccionada    | string  | —                     | nombre de la primer pestaña |
-| tab-position | posición de tabulación               | string  | top/right/bottom/left | top                         |
-| stretch      | si el ancho del tab se ajusta automáticamente a su contenedor | boolean | - | false |
-| before-leave | función `hook` antes de cambiar de pestaña. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se evitará el cambio. | Function(activeName, oldActiveName) | — | — |
+| Atributo       | Descripción                          | Tipo    | Valores aceptados     | Por defecto                 |
+| -------------- | ------------------------------------ | ------- | --------------------- | --------------------------- |
+| value / v-model | valor enlazado, nombre de la pestaña seleccionada    | string  | —                     | nombre de la primer pestaña |
+| type           | tipo de Pestaña                      | string  | card/border-card      | —                           |
+| closable       | si la Pestaña es cerrable            | boolean | —                     | false                       |
+| addable        | si la Pestaña es añadible            | boolean | —                     | false                       |
+| editable       | si la Pestaña es añadible y cerrable | boolean | —                     | false                       |
+| tab-position   | posición de tabulación               | string  | top/right/bottom/left | top                         |
+| stretch        | si el ancho del tab se ajusta automáticamente a su contenedor | boolean | - | false |
+| before-leave   | función `hook` antes de cambiar de pestaña. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se evitará el cambio. | Function(activeName, oldActiveName)  | — | — |
 
 ### Eventos de Pestañas
 | Nombre de Evento | Descripción                              | Parámetros                    |

examples/docs/es/time-picker.md

@@ -173,6 +173,7 @@ Es posible escoger un rango de tiempo arbitrario.
 ### Atributos
 | Atributo          | Descripción                              | Tipo                                     | Valores aceptados                        | Por defecto          |
 | ----------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -------------------- |
+| value / v-model    | valor enlazado                           | date(TimePicker) / string(TimeSelect)    | -                                        | -                    |
 | readonly          | si el Time Picker está en modo de sólo lectura | boolean                                  | —                                        | false                |
 | disabled          | si el Time Picker se encuentra deshabilitado | boolean                                  | —                                        | false                |
 | editable          | si el input puede ser editado            | boolean                                  | —                                        | true                 |
@@ -183,7 +184,6 @@ Es posible escoger un rango de tiempo arbitrario.
 | end-placeholder   | placeholder para el tiempo de finalización en modo de rango | string                                   | —                                        | —                    |
 | is-range          | si es posible escoger un rango de tiempo, solo funciona con `<el-time-picker>` | boolean                                  | —                                        | false                |
 | arrow-control     | si es posible escoger el tiempo usando los botones de flecha, solo funciona con `<el-time-picker>` | boolean                                  | —                                        | false                |
-| value             | valor del selector                       | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | hour `HH`, minute `mm`, second `ss`      | HH:mm:ss             |
 | align             | alineación                               | left / center / right                    | left                                     |                      |
 | popper-class      | nombre de clase personalizada para el dropdown del Time Picker | string                                   | —                                        | —                    |
 | picker-options    | opciones adicionales, revisar la tabla posterior | object                                   | —                                        | {}                   |

examples/docs/es/tooltip.md

@@ -230,7 +230,7 @@ Es necesario envolver los elementos de forma deshabilitados en un elemento conte
 | effect         | tema del Tooltip                         | string  | dark/light                               | dark                                     |
 | content        | contenido a mostrar, puede ser sobre-escrito por `slot#content` | string  | —                                        | —                                        |
 | placement      | posición del Tooltip                     | string  | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom                                   |
-| value(v-model) | visibilidad del Tooltip                  | boolean | —                                        | false                                    |
+| value / v-model | visibilidad del Tooltip                  | boolean | —                                        | false                                    |
 | disabled       | saber si el Tooltip se encuentra deshabilitado | boolean | —                                        | false                                    |
 | offset         | offset del Tooltip                       | number  | —                                        | 0                                        |
 | transition     | nombre de animación                      | string  | —                                        | el-fade-in-linear                        |

examples/docs/es/transfer.md

@@ -288,6 +288,7 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
 ### Atributos
 | Atriburo              | Descripcion                              | Tipo                            | Valores aceptados | Por defecto                              |
 | --------------------- | ---------------------------------------- | ------------------------------- | ----------------- | ---------------------------------------- |
+| value / v-model        | valor enlazado                           | array                           | —                 | —                                        |
 | data                  | Origen de datos                          | array[{ key, label, disabled }] | —                 | [ ]                                      |
 | filterable            | Si se puede filtrar                      | boolean                         | —                 | false                                    |
 | filter-placeholder    | Placeholder para el input del filtro     | string                          | —                 | Enter keyword                            |

examples/docs/zh-CN/cascader.md

@@ -1666,6 +1666,7 @@
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | boolean / string / number | — | — |
 | options | 可选项数据源，键名可通过 `props` 属性配置 | array | — | — |
 | props | 配置选项，具体见下表 | object | — | — |
 | value | 选中项绑定值   | array | — | — |

examples/docs/zh-CN/checkbox.md

@@ -284,6 +284,7 @@
 ### Checkbox Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | string / number / boolean | — | — |
 | label     | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string / number / boolean  |       —        |     —    |
 | true-label | 选中时的值   | string / number | — |     —    |
 | false-label | 没有选中时的值   | string / number    |      —         |     —    |
@@ -302,6 +303,7 @@
 ### Checkbox-group Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | array | — | — |
 | size     | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效   | string  | medium / small / mini  |    —     |
 | disabled  | 是否禁用    | boolean   | — | false   |
 | min     | 可被勾选的 checkbox 的最小数量   | number    |       —        |     —    |

examples/docs/zh-CN/collapse.md

@@ -140,16 +140,16 @@
 ### Collapse Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | 当前激活的面板(如果是手风琴模式，绑定值类型需要为`string`，否则为`array`) | string / array | — | — |
 | accordion | 是否手风琴模式 | boolean | — | false |
-| value | 当前激活的面板(如果是手风琴模式，绑定值类型需要为`string`，否则为`array`) | string/array | — | — |
 
 ### Collapse Events
 | 事件名称 | 说明 | 回调参数 |
 |---------|---------|---------|
-| change | 当前激活面板改变时触发(如果是手风琴模式，参数 `activeNames` 类型为`string`，否则为`array`) | (activeNames: array\|string) |
+| change | 当前激活面板改变时触发(如果是手风琴模式，参数 `activeNames` 类型为`string`，否则为`array`) | (activeNames: array / string) |
 
 ### Collapse Item Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | name | 唯一标志符 | string/number | — | — |
-| title | 面板标题 | string | — | — |
+| title | 面板标题 | string | — | — |

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

@@ -167,6 +167,7 @@
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | string | — | — |
 | disabled | 是否禁用 | boolean | — | false |
 | size | 尺寸 | string | — | medium / small / mini |
 | show-alpha | 是否支持透明度选择 | boolean | — | false |

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

@@ -240,7 +240,7 @@
 ```
 :::
 
-###  选择日期范围
+### 选择日期范围
 
 可在一个选择器中便捷地选择一个时间范围
 
@@ -249,7 +249,6 @@
 <template>
   <div class="block">
     <span class="demonstration">默认</span>
-    {{value6}}
     <el-date-picker
       v-model="value6"
       type="daterange"
@@ -429,6 +428,7 @@
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | 绑定值 | date(DatePicker) / array(DateRangePicker) | — | — |
 | readonly | 完全只读 | boolean | — | false |
 | disabled | 禁用 | boolean | — | false |
 | editable | 文本框可输入 | boolean | — | true |

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

@@ -278,6 +278,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | 绑定值 | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |
 | readonly | 完全只读 | boolean | — | false |
 | disabled | 禁用 | boolean | — | false |
 | editable | 文本框可输入 | boolean | — | true |

examples/docs/zh-CN/input-number.md

@@ -178,7 +178,7 @@
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |----------|-------------- |----------|--------------------------------  |-------- |
-| value    | 绑定值         | number | — | — |
+| value / v-model    | 绑定值         | number | — | 0 |
 | min      | 设置计数器允许的最小值 | number | — | -Infinity |
 | max      | 设置计数器允许的最大值 | number | — | Infinity |
 | step     | 计数器步长           | number   | — | 1 |

examples/docs/zh-CN/input.md

@@ -799,7 +799,7 @@ export default {
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | type         | 类型   | string  | text，textarea 和其他 [原生 input 的 type 值](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
-| value         | 绑定值           | string / number  | — | — |
+| value / v-model | 绑定值           | string / number  | — | — |
 | maxlength     | 原生属性，最大输入长度      | number          |  —  | — |
 | minlength     | 原生属性，最小输入长度      | number          | — | — |
 | placeholder   | 输入框占位文本    | string          | — | — |

examples/docs/zh-CN/popover.md

@@ -239,7 +239,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 |  width        |  宽度  | String, Number            | — | 最小宽度 150px |
 |  placement        |  出现位置  | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
 |  disabled       |  Popover 是否可用  | Boolean           | — |  false |
-|  value(v-model)        |  状态是否可见  | Boolean           | — |  false |
+|  value / v-model        |  状态是否可见  | Boolean           | — |  false |
 |  offset        |  出现位置的偏移量  | Number           | — |  0 |
 |  transition     |  定义渐变动画      | String             | — | fade-in-linear |
 |  visible-arrow   |  是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |

examples/docs/zh-CN/radio.md

@@ -197,6 +197,7 @@
 ### Radio Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | string / number / boolean | — | — |
 | label     | Radio 的 value   | string / number / boolean    |       —        |      —   |
 | disabled  | 是否禁用    | boolean   | — | false   |
 | border  | 是否显示边框  | boolean   | — | false   |
@@ -211,6 +212,7 @@
 ### Radio-group Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | string / number / boolean | — | — |
 | size     | 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效   | string  | medium / small / mini |    —     |
 | disabled  | 是否禁用    | boolean   | — | false   |
 | text-color  | 按钮形式的 Radio 激活时的文本颜色    | string   | — | #ffffff   |

examples/docs/zh-CN/rate.md

@@ -148,6 +148,7 @@
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | number | — | 0 |
 | max | 最大分值 | number | — | 5 |
 | disabled | 是否为只读 | boolean | — | false |
 | allow-half | 是否允许半选 | boolean | — | false |

examples/docs/zh-CN/select.md

@@ -657,6 +657,7 @@
 ### Select Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | 绑定值 | boolean / string / number | — | — |
 | multiple | 是否多选 | boolean | — | false |
 | disabled | 是否禁用 | boolean | — | false |
 | value-key | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value |

examples/docs/zh-CN/slider.md

@@ -225,6 +225,7 @@
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | 绑定值 | number | — | 0 |
 | min | 最小值 | number | — | 0 |
 | max | 最大值 | number | — | 100 |
 | disabled | 是否禁用 | boolean | — | false |

examples/docs/zh-CN/switch.md

@@ -142,6 +142,7 @@
 
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | boolean / string / number | — | — |
 | disabled  | 是否禁用    | boolean   | — | false   |
 | width  | switch 的宽度（像素）    | number   | — | 40 |
 | active-icon-class  | switch 打开时所显示图标的类名，设置此项会忽略 `active-text`    | string   | — | — |

examples/docs/zh-CN/tabs.md

@@ -368,11 +368,11 @@
 ### Tabs Attributes
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model  | 绑定值，选中选项卡的 name  | string   |  —  |  第一个选项卡的 name |
 | type     | 风格类型   | string   | card/border-card  |     —    |
 | closable  | 标签是否可关闭   | boolean   | — |  false  |
 | addable  | 标签是否可增加   | boolean   | — |  false  |
 | editable  | 标签是否同时可增加和关闭   | boolean   | — |  false  |
-| value  | 绑定值，选中选项卡的 name  | string   |  —  |  第一个选项卡的 name |
 | tab-position  | 选项卡所在位置 | string   |  top/right/bottom/left  |  top |
 | stretch  | 标签的宽度是否自撑开 | boolean   |  -  |  false |
 | before-leave | 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。 | Function(activeName, oldActiveName) | — | — |

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

@@ -174,6 +174,7 @@
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
 | readonly | 完全只读 | boolean | — | false |
 | disabled | 禁用 | boolean | — | false |
 | editable | 文本框可输入 | boolean | — | true |
@@ -184,7 +185,6 @@
 | end-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
 | is-range | 是否为时间范围选择，仅对`<el-time-picker>`有效 | boolean | — | false |
 | arrow-control | 是否使用箭头进行时间选择，仅对`<el-time-picker>`有效 | boolean | — | false |
-| value | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
 | align | 对齐方式 | string | left / center / right | left |
 | popper-class | TimePicker 下拉框的类名 | string | — | — |
 | picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |

examples/docs/zh-CN/tooltip.md

@@ -205,7 +205,7 @@ tooltip 内不支持 disabled form 元素，参考[MDN](https://developer.mozill
 |  effect        |  默认提供的主题  | String            | dark/light | dark  |
 |  content        |  显示的内容，也可以通过 `slot#content` 传入 DOM  | String            | — | — |
 |  placement        |  Tooltip 的出现位置  | String           |  top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
-|  value(v-model) |  状态是否可见  | Boolean           | — |  false |
+|  value / v-model |  状态是否可见  | Boolean           | — |  false |
 |  disabled       |  Tooltip 是否可用  | Boolean           | — |  false |
 |  offset        |  出现位置的偏移量  | Number           | — |  0 |
 |  transition     |  定义渐变动画      | String             | — | el-fade-in-linear |

examples/docs/zh-CN/transfer.md

@@ -284,6 +284,7 @@
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | array | — | — |
 | data | Transfer 的数据源 | array[{ key, label, disabled }] | — | [ ] |
 | filterable | 是否可搜索 | boolean | — | false |
 | filter-placeholder | 搜索框占位符 | string | — | 请输入搜索内容 |

examples/entry.js

@@ -4,12 +4,12 @@ import VueRouter from 'vue-router';
 import Element from 'main/index.js';
 import 'packages/theme-chalk/src/index.scss';
 import routes from './route.config';
-import demoBlock from './components/demo-block.vue';
-import MainFooter from './components/footer.vue';
-import MainHeader from './components/header.vue';
+import demoBlock from './components/demo-block';
+import MainFooter from './components/footer';
+import MainHeader from './components/header';
 import SideNav from './components/side-nav';
 import FooterNav from './components/footer-nav';
-import title from './i18n/title.json';
+import title from './i18n/title';
 
 Vue.use(Element);
 Vue.use(VueRouter);
@@ -37,6 +37,6 @@ router.afterEach(route => {
 });
 
 new Vue({ // eslint-disable-line
-  render: h => h(entry),
+  ...entry,
   router
 }).$mount('#app');

examples/index.tpl

@@ -13,9 +13,7 @@
         document.write('<script src="//cdn.jsdelivr.net/npm/es6-promise@4.1.1/dist/es6-promise.min.js"><\/script><script>ES6Promise.polyfill()<\/script>')
       }
     </script>
-    <div id="app"></div><% if (process.env.NODE_ENV === 'production') { %>
-    <script src="//shadow.elemecdn.com/npm/vue@2.5.2/dist/vue.runtime.min.js"></script>
-    <script src="//shadow.elemecdn.com/npm/vue-router@2.7.0/dist/vue-router.min.js"></script><% } %>
+    <div id="app"></div>
   </body>
   <% if (process.env.NODE_ENV === 'production') { %><script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

examples/pages/template/component.tpl

@@ -71,7 +71,7 @@
           }
 
           td, th {
-            border-bottom: 1px solid #d8d8d8;
+            border-bottom: 1px solid #dcdfe6;
             padding: 15px;
             max-width: 250px;
           }
@@ -79,12 +79,12 @@
           th {
             text-align: left;
             white-space: nowrap;
-            color: #666;
+            color: #909399;
             font-weight: normal;
           }
 
           td {
-            color: #333;
+            color: #606266;
           }
 
           th:first-child, td:first-child {

examples/play/index.vue

@@ -2,6 +2,7 @@
   <div style="margin: 20px;">
   </div>
 </template>
+
 <script>
   export default {
   };

examples/route.config.js

@@ -1,5 +1,5 @@
-import navConfig from './nav.config.json';
-import langs from './i18n/route.json';
+import navConfig from './nav.config';
+import langs from './i18n/route';
 
 const LOAD_MAP = {
   'zh-CN': name => {

package.json

@@ -24,8 +24,8 @@
     "i18n": "node build/bin/i18n.js",
     "lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet",
     "pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh",
-    "test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
-    "test:watch": "npm run build:theme && karma start test/unit/karma.conf.js"
+    "test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
+    "test:watch": "npm run build:theme && cross-env BABEL_ENV=test karma start test/unit/karma.conf.js"
   },
   "faas": {
     "domain": "element",
@@ -56,22 +56,24 @@
     "throttle-debounce": "^1.0.1"
   },
   "peerDependencies": {
-    "vue": "^2.5.2"
+    "vue": "^2.5.16"
   },
   "devDependencies": {
     "algoliasearch": "^3.24.5",
-    "babel-cli": "^6.14.0",
-    "babel-core": "^6.14.0",
-    "babel-loader": "^7.1.2",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
     "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-istanbul": "^4.1.1",
     "babel-plugin-module-resolver": "^2.2.0",
-    "babel-plugin-syntax-jsx": "^6.8.0",
-    "babel-plugin-transform-vue-jsx": "^3.3.0",
-    "babel-preset-es2015": "^6.14.0",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-vue-jsx": "^3.7.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-stage-2": "^6.24.1",
     "chai": "^3.5.0",
     "cheerio": "^0.18.0",
     "chokidar": "^1.7.0",
-    "copy-webpack-plugin": "^4.1.1",
+    "copy-webpack-plugin": "^4.5.2",
     "coveralls": "^2.11.14",
     "cp-cli": "^1.0.2",
     "cross-env": "^3.1.3",
@@ -79,11 +81,10 @@
     "es6-promise": "^4.0.5",
     "eslint": "4.14.0",
     "eslint-config-elemefe": "0.1.1",
-    "eslint-loader": "^1.9.0",
+    "eslint-loader": "^2.0.0",
     "eslint-plugin-html": "^4.0.1",
     "eslint-plugin-json": "^1.2.0",
-    "extract-text-webpack-plugin": "^3.0.1",
-    "file-loader": "^1.1.5",
+    "file-loader": "^1.1.11",
     "file-save": "^0.2.0",
     "gh-pages": "^0.11.0",
     "gulp": "^3.9.1",
@@ -93,9 +94,7 @@
     "gulp-sass": "^3.1.0",
     "highlight.js": "^9.3.0",
     "html-loader": "^0.5.1",
-    "html-webpack-plugin": "^2.30.1",
-    "inject-loader": "^3.0.1",
-    "isparta-loader": "^2.0.0",
+    "html-webpack-plugin": "^3.2.0",
     "json-loader": "^0.5.7",
     "json-templater": "^1.0.4",
     "karma": "^1.3.0",
@@ -106,16 +105,16 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.26",
     "karma-webpack": "^3.0.0",
-    "lolex": "^1.5.1",
-    "markdown-it": "^6.1.1",
-    "markdown-it-anchor": "^2.5.0",
+    "markdown-it": "^8.4.1",
+    "markdown-it-anchor": "^5.0.2",
     "markdown-it-container": "^2.0.0",
+    "mini-css-extract-plugin": "^0.4.1",
     "mocha": "^3.1.1",
     "node-sass": "^4.5.3",
     "perspective.js": "^1.0.0",
     "postcss": "^5.1.2",
-    "postcss-loader": "0.11.1",
-    "postcss-salad": "^1.0.8",
+    "postcss-loader": "^2.1.5",
+    "postcss-salad": "^2.0.1",
     "progress-bar-webpack-plugin": "^1.11.0",
     "rimraf": "^2.5.4",
     "sass-loader": "^6.0.6",
@@ -124,15 +123,16 @@
     "style-loader": "^0.19.0",
     "transliteration": "^1.1.11",
     "uppercamelcase": "^1.1.0",
-    "url-loader": "^0.6.2",
-    "vue": "^2.5.2",
-    "vue-loader": "^13.3.0",
-    "vue-markdown-loader": "1",
-    "vue-router": "2.7.0",
-    "vue-template-compiler": "^2.5.2",
+    "url-loader": "^1.0.1",
+    "vue": "^2.5.16",
+    "vue-loader": "^15.2.4",
+    "vue-markdown-loader": "^2.4.1",
+    "vue-router": "^3.0.1",
+    "vue-template-compiler": "^2.5.16",
     "vue-template-es2015-compiler": "^1.6.0",
-    "webpack": "^3.7.1",
-    "webpack-dev-server": "^2.9.1",
-    "webpack-node-externals": "^1.6.0"
+    "webpack": "^4.14.0",
+    "webpack-cli": "^3.0.8",
+    "webpack-dev-server": "^3.1.11",
+    "webpack-node-externals": "^1.7.2"
   }
 }

src/index.js

@@ -171,7 +171,7 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
 
-module.exports = {
+export default {
   version: '2.4.11',
   locale: locale.use,
   i18n: locale.i18n,
@@ -247,5 +247,3 @@ module.exports = {
   Main,
   Footer
 };
-
-module.exports.default = module.exports;

test/unit/karma.conf.js

@@ -1,14 +1,7 @@
-var webpackConfig = require('../../build/webpack.test');
-
-// no need for app entry during tests
-// delete webpackConfig.entry;
+const webpackConfig = require('../../build/webpack.test');
 
 module.exports = function(config) {
-  var configuration = {
-    // to run in additional browsers:
-    // 1. install corresponding karma launcher
-    //    http://karma-runner.github.io/0.13/config/browsers.html
-    // 2. add it to the `browsers` array below.
+  const configuration = {
     browsers: ['Chrome'],
     customLaunchers: {
       Chrome_travis_ci: {

test/unit/specs/message-box.spec.js

@@ -33,7 +33,7 @@ describe('MessageBox', () => {
     setTimeout(() => {
       const msgbox = document.querySelector('.el-message-box__wrapper');
       expect(msgbox.__vue__.$parent.visible).to.true;
-      expect(msgbox.querySelector('.el-message-box__title').textContent).to.equal('消息');
+      expect(msgbox.querySelector('.el-message-box__title span').textContent).to.equal('消息');
       expect(msgbox.querySelector('.el-message-box__message')
         .querySelector('p').textContent).to.equal('这是一段内容');
       MessageBox.close();

test/unit/specs/tree.spec.js

@@ -608,7 +608,7 @@ describe('Tree', () => {
     expect(firstNode.querySelector('.custom-content')).to.exist;
     const button = firstNode.querySelector('.custom-content .el-button');
     expect(button).to.exist;
-    expect(button.textContent).to.equal('一级 1');
+    expect(button.querySelector('span').textContent).to.equal('一级 1');
   });
 
   it('scoped slot', () => {

test/unit/util.js

@@ -18,7 +18,7 @@ const createElm = function() {
  * 回收 vm
  * @param  {Object} vm
  */
-exports.destroyVM = function(vm) {
+export const destroyVM = function(vm) {
   vm.$destroy && vm.$destroy();
   vm.$el &&
   vm.$el.parentNode &&
@@ -31,7 +31,7 @@ exports.destroyVM = function(vm) {
  * @param  {Boolean=false} mounted 是否添加到 DOM 上
  * @return {Object} vm
  */
-exports.createVue = function(Compo, mounted = false) {
+export const createVue = function(Compo, mounted = false) {
   if (Object.prototype.toString.call(Compo) === '[object String]') {
     Compo = { template: Compo };
   }
@@ -46,7 +46,7 @@ exports.createVue = function(Compo, mounted = false) {
  * @param  {Boolean=false} mounted  - 是否添加到 DOM 上
  * @return {Object} vm
  */
-exports.createTest = function(Compo, propsData = {}, mounted = false) {
+export const createTest = function(Compo, propsData = {}, mounted = false) {
   if (propsData === true || propsData === false) {
     mounted = propsData;
     propsData = {};
@@ -63,7 +63,7 @@ exports.createTest = function(Compo, propsData = {}, mounted = false) {
  * @param  {String} name
  * @param  {*} opts
  */
-exports.triggerEvent = function(elm, name, ...opts) {
+export const triggerEvent = function(elm, name, ...opts) {
   let eventName;
 
   if (/^mouse|click/.test(name)) {
@@ -88,9 +88,9 @@ exports.triggerEvent = function(elm, name, ...opts) {
  * @param {Element} elm
  * @param {*} opts
  */
-exports.triggerClick = function(elm, ...opts) {
-  exports.triggerEvent(elm, 'mousedown', ...opts);
-  exports.triggerEvent(elm, 'mouseup', ...opts);
+export const triggerClick = function(elm, ...opts) {
+  triggerEvent(elm, 'mousedown', ...opts);
+  triggerEvent(elm, 'mouseup', ...opts);
 
   return elm;
 };
@@ -100,7 +100,7 @@ exports.triggerClick = function(elm, ...opts) {
  * @param {Element} elm
  * @param {keyCode} int
  */
-exports.triggerKeyDown = function(el, keyCode) {
+export const triggerKeyDown = function(el, keyCode) {
   const evt = document.createEvent('Events');
   evt.initEvent('keydown', true, true);
   evt.keyCode = keyCode;