Merge remote-tracking branch 'origin/dev'

* origin/dev:
  docs: add sponsorship
  docs: add sponsorship (vuematerial#1246)
  Fix missing commas in Theme configuration (vuematerial#1244)
  chore: remove code sponsor :(
  feat(MdSelect): add md-selected event (vuematerial#1234)
  feat(MdSelect): add md-opened, md-closed events (vuematerial#1235)
  docs: improve Codepen examples by transpile all scripts and styles
  fix(MdApp): fix styles after ssr support

Author: marcosmoura

.travis.yml

@@ -23,6 +23,7 @@ before_script:
   - chmod +x ./cc-test-reporter
   - ./cc-test-reporter before-build
 script:
+  - npm rebuild node-sass
   - yarn lint
   - yarn coverage
   - yarn build

README.md

@@ -28,9 +28,13 @@ Vue Material is Simple, lightweight and built exactly according to the Google <a
 
 Build well-designed apps that can fit on every screen with support to all modern Web Browsers with dynamic themes, components on demand and all with an ease-to-use API
 
-<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/265KRzahMKDQEQEzoo9BxRiH/vuematerial/vue-material'>	
-  <img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/265KRzahMKDQEQEzoo9BxRiH/vuematerial/vue-material.svg' />	
-</a>
+## Sponsorship
+
+Vue Material is proudly sponsored by [Rollbar](https://cs.berry.sh/c/c0597778-f465-4788-abe3-8711cc087774
+). They provide real-time error monitoring, alerting, and analytics for developers.
+
+You can try Rollbar for free at [https://rollbar.com](https://cs.berry.sh/c/c0597778-f465-4788-abe3-8711cc087774
+) <img src="https://cs.berry.sh/l/c0597778-f465-4788-abe3-8711cc087774/pixel.png" />
 
 ## Demo and Documentation
 

build/loaders/component-example-loader.js

@@ -1,11 +1,36 @@
+const sass = require('node-sass')
+const pretty = require('pretty')
+const prettier = require('prettier')
 const path = require('path')
 const compiler = require('vue-template-compiler')
 const transpile = require('vue-template-es2015-compiler')
+const { resolvePath } = require('../config')
+const { getIndentedSource } = require('../../docs/app/mixins/codeSource')
 
 function camelCaseToDash (str) {
   return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
 }
 
+function getComponentScript (script) {
+  return getIndentedSource(`
+    Vue.use(VueMaterial.default)
+
+    ${script}
+
+    const app = new Vue(example)
+
+    app.$mount('#app')
+  `)
+}
+
+function getComponentTemplate (template) {
+  return pretty(`
+    <div id="app">
+      ${template}
+    </div>
+  `)
+}
+
 module.exports = function (source) {
   this.cacheable && this.cacheable()
 
@@ -31,8 +56,36 @@ module.exports = function (source) {
 
   let { script, template, style } = parsedTags
 
+  if (style) {
+    style = style.replace(/~vue-material/g, '.')
+
+    const { css } = sass.renderSync({
+      data: style,
+      includePaths: [resolvePath('src')],
+      outputStyle: 'expanded'
+    })
+
+    style = css.toString('utf8')
+  }
+
+  if (template) {
+    template = template.replace(/src="\/assets/g, 'src="https://vuematerial.io/assets')
+    template = getComponentTemplate(template)
+  }
+
   if (script) {
-    script = script.replace('export default ', '')
+    let newScript = null
+
+    script = script.replace('export default ', 'const example = ')
+    script = getComponentScript(script)
+
+    try {
+      newScript = transpile(script)
+    } catch (e) {
+      newScript = script
+    }
+
+    script = prettier.format(newScript, { semi: false })
   }
 
   const code = `

docs/app/components/CodepenEdit.vue

@@ -22,43 +22,27 @@
       component: Object
     },
     computed: {
-      /* eslint-disable */
       styles () {
         return this.component.style ? this.component.style : ''
       },
       html () {
-        return `
-<div id="app">
-  ${this.component.template}
-</div>
-`
+        return this.component.template
       },
       script () {
-        return `
-Vue.use(VueMaterial.default)
-
-const example = ${this.component.script}
-
-new Vue({
-  name: 'root',
-  el: '#app',
-  ...example
-})
-`
+        return this.component.script
       },
       externalScripts () {
         return [
-          'https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js',
-          'https://unpkg.com/vue',
+          'https://unpkg.com/babel-standalone/babel.min.js',
+          'https://unpkg.com/vue/dist/vue.min.js',
           `${vueMaterialUrl}`
         ].join(';')
       },
       externalStyles () {
         return [
-          `https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic`,
-          `https://fonts.googleapis.com/icon?family=Material+Icons`,
+          'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons',
           `${vueMaterialUrl}/dist/vue-material.min.css`,
-          'https://unpkg.com/vue-material@beta/dist/theme/default.css'
+          `${vueMaterialUrl}/dist/theme/default.css`
         ].join(';')
       },
       apiJson () {
@@ -72,11 +56,9 @@ new Vue({
           html: `${this.html}`,
           html_pre_processor: 'none',
           css: `${this.styles}`,
-          css_pre_processor: 'scss',
           css_starter: 'neither',
           css_prefix: 'autoprefixer',
           js: `${this.script}`,
-          js_pre_processor: 'babel',
           html_classes: '',
           head: '<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">',
           css_external: `${this.externalStyles}`,
@@ -87,7 +69,6 @@ new Vue({
       apiContent () {
         return JSON.stringify(this.apiJson).replace(/"/g, '&​quot;').replace(/'/g, '&apos;');
       }
-      /* eslint-enable */
     }
   }
 </script>

docs/app/mixins/codeSource.js

@@ -0,0 +1,31 @@
+export const getIndentedSource = source => {
+  let lines = source.split('\n')
+  let matches
+
+  if (lines[0] === '') {
+    lines.shift()
+  }
+
+  let indentation = (matches = (/^[\s\t]+/).exec(lines[0])) !== null ? matches[0] : null
+
+  if (indentation) {
+    lines = lines.map(line => {
+      line = line.replace(indentation, '')
+
+      return line.replace(/\t/g, '  ')
+    })
+
+    return lines.join('\n').trim()
+  }
+
+  return source
+}
+
+export default {
+  getIndentedSource,
+  reindentSource () {
+    const block = this.$refs.block
+
+    block.textContent = getIndentedSource(block.textContent)
+  }
+}

docs/app/pages/Components/Button/examples/RegularButtons.vue

@@ -33,7 +33,7 @@
 </style>
 
 <script>
-export default {
-  name: 'RegularButtons'
-}
+  export default {
+    name: 'RegularButtons'
+  }
 </script>

docs/app/pages/Components/Datepicker/examples/DisabledDatesDatepicker.vue

@@ -5,17 +5,15 @@
 </template>
 
 <script>
-  function isWeekend (date) {
-    const day = date.getDay()
-
-    return day === 6 || day === 0
-  }
-
   export default {
     name: 'DisabledDatesDatepicker',
     data: () => ({
       selectedDate: null,
-      disabledDates: date => isWeekend(date)
+      disabledDates: date => {
+        const day = date.getDay()
+
+        return day === 6 || day === 0
+      }
     })
   }
 </script>

docs/app/pages/Components/Form/examples/FormValidation.vue

@@ -71,7 +71,6 @@
 </template>
 
 <script>
-  import Vue from 'vue'
   import { validationMixin } from 'vuelidate'
   import {
     required,

docs/app/pages/Components/Select/Select.vue

@@ -32,7 +32,8 @@
       <api-item title="API - md-select">
         <p>The following options can be applied to any select:</p>
 
-        <api-table :headings="select.headings" :props="select.props" slot="props" />
+        <api-table :headings="select.props.headings" :props="select.props.props" slot="props" />
+        <api-table :headings="select.events.headings" :props="select.events.props" slot="events" />
       </api-item>
 
       <api-item title="API - md-option">
@@ -58,57 +59,79 @@
     mixins: [examples],
     data: () => ({
       select: {
-        headings: ['Name', 'Description', 'Default'],
-        props: [
-          {
-            name: 'v-model',
-            type: 'String|Number|Boolean|Array',
-            description: 'The model variable to bind the select value',
-            defaults: 'null'
-          },
-          {
-            name: 'placeholder',
-            type: 'String',
-            description: 'The select placeholder. Similar to HTML5 placeholder attribute.',
-            defaults: 'null'
-          },
-          {
-            name: 'required',
-            type: 'String',
-            description: 'The select required. Similar to HTML5 required attribute.',
-            defaults: 'null'
-          },
-          {
-            name: 'id',
-            type: 'String',
-            description: 'The select id. Similar to HTML5 id attribute.',
-            defaults: 'null'
-          },
-          {
-            name: 'name',
-            type: 'String',
-            description: 'The select name. Similar to HTML5 name attribute.',
-            defaults: 'null'
-          },
-          {
-            name: 'disabled',
-            type: 'Boolean',
-            description: 'Disable the select and prevent it selection.',
-            defaults: 'false'
-          },
-          {
-            name: 'multiple',
-            type: 'Boolean',
-            description: 'Create a multi selection with checkboxes inside. Only works with a <code>v-model</code> with an <code>Array</code>',
-            defaults: 'false'
-          },
-          {
-            name: 'md-dense',
-            type: 'Boolean',
-            description: 'Enable the dense layout',
-            defaults: 'false'
-          }
-        ]
+        props: {
+          headings: ['Name', 'Description', 'Default'],
+          props: [
+            {
+              name: 'v-model',
+              type: 'String|Number|Boolean|Array',
+              description: 'The model variable to bind the select value',
+              defaults: 'null'
+            },
+            {
+              name: 'placeholder',
+              type: 'String',
+              description: 'The select placeholder. Similar to HTML5 placeholder attribute.',
+              defaults: 'null'
+            },
+            {
+              name: 'required',
+              type: 'String',
+              description: 'The select required. Similar to HTML5 required attribute.',
+              defaults: 'null'
+            },
+            {
+              name: 'id',
+              type: 'String',
+              description: 'The select id. Similar to HTML5 id attribute.',
+              defaults: 'null'
+            },
+            {
+              name: 'name',
+              type: 'String',
+              description: 'The select name. Similar to HTML5 name attribute.',
+              defaults: 'null'
+            },
+            {
+              name: 'disabled',
+              type: 'Boolean',
+              description: 'Disable the select and prevent it selection.',
+              defaults: 'false'
+            },
+            {
+              name: 'multiple',
+              type: 'Boolean',
+              description: 'Create a multi selection with checkboxes inside. Only works with a <code>v-model</code> with an <code>Array</code>',
+              defaults: 'false'
+            },
+            {
+              name: 'md-dense',
+              type: 'Boolean',
+              description: 'Enable the dense layout',
+              defaults: 'false'
+            }
+          ],
+        },
+        events: {
+          headings: ['Name', 'Description', 'Value'],
+          props: [
+            {
+              name: 'md-selected',
+              description: 'Triggered when model changes.',
+              value: 'Value of v-model'
+            },
+            {
+              name: 'md-opened',
+              description: 'Triggered when select is opened.',
+              value: 'none'
+            },
+            {
+              name: 'md-closed',
+              description: 'Triggered when select is closed.',
+              value: 'none'
+            }
+          ]
+        }
       },
       option: {
         headings: ['Name', 'Description', 'Default'],