Merge branch 'master' of https://github.com/marcosmoura/vue-material

* 'master' of https://github.com/marcosmoura/vue-material: (726 commits)
  [build] 0.7.0
  add speed dial code examples
  [release] 0.7.0
  [build] 0.7.0
  remove chunk name
  update supported browsers
  update supported browsers
  upgrade to webpack 2
  start integration with webpack 2
  add styles for input inside toolbar #395
  rename method
  remove custom click bindings
  apply theme-color based on primary theme color
  remove unnecessary Vue.extend on component definition
  deprecated click bubble
  normalize mobile and desktop events on ripple
  prevent ripple from getting undefined when ripple elements doesnt exists
  allow preventDefault in md-switch (#435)
  enable swipe to open or close sidenav (#429)
  enable multiple expansions in mdList #442
  ...

Author: marcosmoura

.babelrc

@@ -2,7 +2,15 @@
   "presets": [
     "es2015",
     "es2017",
-    "stage-0"
+    "stage-0",
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": ["last 3 versions", "not IE < 11"]
+        }
+      }
+    ]
   ],
   "plugins": [
     "transform-runtime",

.github/CONTRIBUTING.md

@@ -8,6 +8,8 @@ Before submitting your contribution please read the guidelines.
 
 ## Issue Reporting Guidelines
 
+- Do not create questions. The issue list is exclusively for reports, bugs and feature requests. Use the [Gitter Channel]( https://gitter.im/vuematerial/questions) instead.
+
 - Always search for your issue first. It may have already been answered, planned or fixed in some branch. New components and features will be planned on [Milestones](https://github.com/marcosmoura/vue-material/milestones) or on [Projects](https://github.com/marcosmoura/vue-material/projects).
 
 - Only create issues for the newest version. For now. Until 1.0.0. 

.github/ISSUE_TEMPLATE.md

@@ -42,4 +42,4 @@ Do not create new features based on a problem that will only solve edge cases fo
 
 ### Reproduction Link
 <!-- If you want to show your code please use Codepen or JSFiddle. -->
-<!-- You could start with this template: http://codepen.io/vue-material/pen/WGavBE. 
+<!-- You could start with this template: http://codepen.io/vue-material/pen/WGavBE. -->

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 node_modules/
 npm-debug.log
+nbproject

README.md

@@ -11,14 +11,16 @@
 
   <a href="https://www.npmjs.com/package/vue-material"><img src="https://img.shields.io/npm/v/vue-material.svg" alt="Version"></a>
 
-  <a href="https://www.npmjs.com/package/vue-material"><img src="https://img.shields.io/npm/l/vue-material.svg" alt="License"></a> <br>
+  <a href="https://www.npmjs.com/package/vue-material"><img src="https://img.shields.io/npm/l/vue-material.svg" alt="License"></a>
+
+  <a href="https://gitter.im/vuematerial"><img src="https://img.shields.io/gitter/room/vuematerial/home.svg" alt="Gitter Chat"></a> <br>
 </p>
 
 Vue Material is lightweight framework built exactly according to the <a href="http://material.google.com" target="_blank">Material Design</a> specs. 
 
 It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to all modern Web Browsers through Vue 2. 
 
-Build powerful and well-designed web apps that can can fit on every screen. You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API.
+Build powerful and well-designed web apps that can fit on every screen. You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API.
 
 ## Demo and Documentation
 <a href="https://vuematerial.github.io/" target="_blank">Demo</a>
@@ -67,31 +69,34 @@ Vue.use(VueMaterial)
 
 // OR
 
-Vue.use(VueMaterial.mdCore) //Required to boot vue material
-Vue.use(VueMaterial.mdButton)
-Vue.use(VueMaterial.mdIcon)
-Vue.use(VueMaterial.mdSidenav)
-Vue.use(VueMaterial.mdToolbar)
+Vue.use(VueMaterial.MdCore) //Required to boot vue material
+Vue.use(VueMaterial.MdButton)
+Vue.use(VueMaterial.MdIcon)
+Vue.use(VueMaterial.MdSidenav)
+Vue.use(VueMaterial.MdToolbar)
 ```
 
+## Changelog
+<a href="https://vuematerial.github.io/#/changelog" target="_blank">Changelog</a>
+
+## Questions
+The issue list is exclusively for reports, bugs and feature requests. Use the [Gitter Channel]( https://gitter.im/vuematerial) instead.
+
+## Contributing
+
+Please make sure to read the [Contributing Guide](https://github.com/marcosmoura/vue-material/blob/master/.github/CONTRIBUTING.md) before making a pull request.
+
 ## Browser Support
 Vue Material supports the latest version of all Browsers. This means:
-* Google Chrome 50+
+* Google Chrome 52+
 * Firefox 48+
 * Safari 9+
-* Opera 40+
+* Opera 38+
+* Edge 12+
 * IE 11
-* Edge
 
 <small>May work in other browsers but it's untested.</small>
 
-## Changelog
-<a href="https://vuematerial.github.io/#/changelog" target="_blank">Changelog</a>
-
-## Contributing
-
-Please make sure to read the [Contributing Guide](https://github.com/marcosmoura/vue-material/blob/master/.github/CONTRIBUTING.md) before making a pull request.
-
 ## Credits and Thanks
 * This library aims to delivery components using almost the same API of <a href="https://material.angularjs.org/latest/" target="_blank">Angular Material</a>
 * Thanks a lot to <a href="https://github.com/elviskang" target="_blank">elviskang</a> for donating the npm package name!
@@ -102,7 +107,6 @@ You don't need to include any other library to work with vue-material. The focus
 * <a href="http://vuejs.org" target="_blank">vue</a>
 * <a href="http://www.jacklmoore.com/autosize/" target="_blank">autosize</a>
 * <a href="https://www.npmjs.com/package/element.scrollintoviewifneeded-polyfill" target="_blank">element.scrollintoviewifneeded-polyfill</a>
-* <a href="https://github.com/lazd/scopedQuerySelectorShim" target="_blank">scopedQuerySelectorShim</a>
 
 ## License 
 MIT

build/server/index.js

@@ -13,15 +13,14 @@ const app = express();
 const compiler = webpack(webpackConfig);
 const rootPath = path.join(__dirname, '..', '..');
 const devMiddlewareInstance = devMiddleware(compiler, {
+  quiet: true,
   publicPath: config.publicPath,
-  index: config.indexPath,
-  stats: {
-    colors: true,
-    chunks: false
-  }
+  index: config.indexPath
 });
 
-const hotMiddlewareInstance = hotMiddleware(compiler);
+const hotMiddlewareInstance = hotMiddleware(compiler, {
+  log() { }
+});
 
 compiler.plugin('compilation', (compilation) => {
   compilation.plugin('html-webpack-plugin-after-emit', (data, done) => {
@@ -36,14 +35,16 @@ app.use(hotMiddlewareInstance);
 app.use('/', express.static(path.join(rootPath, config.docsPath)));
 app.use('/assets', express.static(path.join(rootPath, config.assetsPath)));
 
-export default app.listen(config.server.port, (error) => {
+devMiddlewareInstance.waitUntilValid(() => {
   let uri = 'http://localhost:' + config.server.port;
 
+  console.log(chalk.blue('> Listening at ' + uri + '\n'));
+});
+
+export default app.listen(config.server.port, (error) => {
   if (error) {
     console.log(chalk.red(error));
 
     return;
   }
-
-  console.log(chalk.blue('Listening at ' + uri + '\n'));
 });

build/webpack/base.js

@@ -3,6 +3,10 @@ import webpack from 'webpack';
 import eslintFormatter from 'eslint-friendly-formatter';
 import config from '../config';
 
+const resolvePath = (dir) => {
+  return path.resolve(__dirname, '..', '..', dir);
+};
+
 export default {
   entry: {
     docs: './docs/src/index.js'
@@ -13,81 +17,50 @@ export default {
     filename: '[name].js'
   },
   resolve: {
-    extensions: ['', '.js', '.vue'],
-    fallback: [config.nodePath],
+    extensions: ['.js', '.vue', '.json'],
     alias: {
-      assets: path.resolve(__dirname, '../../docs/src/assets')
+      assets: resolvePath('docs/src/assets')
     }
   },
-  resolveLoader: {
-    fallback: [config.nodePath]
-  },
   module: {
-    preLoaders: [
-      {
-        test: /\.vue$/,
-        loader: 'eslint',
-        include: config.projectRoot,
-        exclude: /node_modules/
-      },
+    rules: [
       {
-        test: /\.js$/,
-        loader: 'eslint',
-        include: config.projectRoot,
-        exclude: /node_modules/
-      }
-    ],
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue'
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: [
+          resolvePath('build'),
+          resolvePath('src'),
+          resolvePath('docs')
+        ],
+        options: {
+          fix: true,
+          formatter: eslintFormatter
+        }
       },
       {
         test: /\.js$/,
-        loader: 'babel',
-        include: config.projectRoot,
-        exclude: /node_modules/
-      },
-      {
-        test: /\.css$/,
-        loader: 'vue-style-loader!css-loader'
-      },
-      {
-        test: /\.scss$/,
-        loader: 'vue-style-loader!css-loader!sass-loader'
+        loader: 'babel-loader',
+        include: [
+          resolvePath('build'),
+          resolvePath('src'),
+          resolvePath('docs')
+        ]
       },
       {
         test: /\.theme$/,
-        loaders: ['raw', 'sass-loader']
-      },
-      {
-        test: /\.json$/,
-        loaders: ['json-loader']
+        use: ['raw-loader', 'sass-loader']
       },
       {
-        test: /\.(png|jpg|gif|svg)(\?.*)?$/,
-        loader: 'url',
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
         query: {
           limit: 10000,
           name: '/assets/[name].[hash:8].[ext]'
         }
-      },
-      {
-        test: /\.html$/,
-        loader: 'vue-html'
       }
     ]
   },
-  eslint: {
-    fix: true,
-    formatter: eslintFormatter
-  },
-  vue: {
-    loaders: {
-      css: 'vue-style-loader!css-loader',
-      scss: 'vue-style-loader!css-loader!sass-loader'
-    }
-  },
   plugins: [
     new webpack.DefinePlugin({
       'process.env': config.env

build/webpack/debug-lib.js

@@ -1,4 +1,3 @@
-import webpack from 'webpack';
 import merge from 'webpack-merge';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import OptimizeJsPlugin from 'optimize-js-plugin';
@@ -12,11 +11,7 @@ const devConfig = merge(prodConfig, {
 });
 
 devConfig.plugins = [
-  new webpack.optimize.OccurenceOrderPlugin(),
-  new webpack.optimize.DedupePlugin(),
-  new OptimizeJsPlugin({
-    sourceMap: false
-  }),
+  new OptimizeJsPlugin(),
   new ExtractTextPlugin('[name].css')
 ];
 

build/webpack/dev.js

@@ -1,23 +1,47 @@
 import webpack from 'webpack';
 import merge from 'webpack-merge';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
+import FriendlyErrorsPlugin from 'friendly-errors-webpack-plugin';
 import baseWebpackConfig from './base';
 import config from '../config';
 
 Object.keys(baseWebpackConfig.entry).forEach((name) => {
-  baseWebpackConfig.entry[name] = ['./build/server/client'].concat(baseWebpackConfig.entry[name]);
+  baseWebpackConfig.entry[name] = ['./build/server/client', ...[baseWebpackConfig.entry[name]]];
 });
 
 export default merge(baseWebpackConfig, {
-  devtool: 'source-map',
+  devtool: 'cheap-module-eval-source-map',
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            css: 'vue-style-loader!css-loader',
+            scss: 'vue-style-loader!css-loader!sass-loader'
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: ['vue-style-loader', 'css-loader']
+      },
+      {
+        test: /\.scss$/,
+        use: ['vue-style-loader', 'css-loader', 'sass-loader']
+      }
+    ]
+  },
   plugins: [
     new webpack.WatchIgnorePlugin([config.nodePath]),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: 'docs/index.html',
       inject: true
-    })
+    }),
+    new FriendlyErrorsPlugin()
   ]
 });