Merge remote-tracking branch 'origin/develop' into components/mdMenu

* origin/develop: 0.2.0 Add Roboto font and google icons to the docs #15 Add Roboto font and google icons to the docs Explains better how to install and configure vue-material #11 Emit change & input events from mdTextarea
2026-05-05 14:04:44 +00:00 · 2016-10-24 01:51:23 -02:00 · 2016-10-24 01:51:23 -02:00 · 752d9194d9
commit 752d9194d9
parent 44567f3263 4460d7e8fd
5 changed files with 154 additions and 42 deletions
--- a/README.md
+++ b/README.md
@ -9,30 +9,53 @@ Vue Material is lightweight framework built exactly according to the <a href="ht

 ## Installation

+Import Roboto and Google Icons from Google CDN:
+
+``` html
+&lt;link rel=&quot;stylesheet&quot; href=&quot;//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic&quot;&gt;
+&lt;link rel=&quot;stylesheet&quot; href=&quot;//fonts.googleapis.com/icon?family=Material+Icons&quot;&gt;
+```
+
 Install Vue Material through npm or yarn
 ``` bash
 npm install --save vue-material
 yarn add vue-material
 ```
+<small>* Others package managers like JSPM and Bower are not supported yet.</small>

-Or <a href="https://github.com/marcosmoura/vue-material/archive/master.zip" target="_blank" rel="noopener">download</a> and reference the script and the stylesheet in your HTML:
+Import or require Vue and Vue Material in your code:
+``` javascript
+import Vue from 'vue'
+import VueMaterial from 'vue-material'
+import 'vue-material/dist/vue-material.css'
+
+// OR
+
+var Vue = require(vue')
+var VueMaterial = require(vue-material')
+require('vue-material/dist/vue-material.css')
+```
+
+Alternativelly you can <a href="https://github.com/marcosmoura/vue-material/archive/master.zip" target="_blank" rel="noopener">download</a> and reference the script and the stylesheet in your HTML:

 ``` html
 <link rel="stylesheet" href="path/to/vue-material.css">
 <script src="path/to/vue-material.js"></script>
 ```

+## Usage
+
 Enable Vue Material in your application using ```Vue.use()```. You can always enable individual components:
 ``` javascript
-Vue.use(VueMaterial);
+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)
 ```

 To get Vue Material working properly, you'll need to configure and apply a default theme.
@ -41,7 +64,7 @@ To get Vue Material working properly, you'll need to configure and apply a defau
 Vue.material.theme.register('default', {
  primary: 'cyan',
  accent: 'pink'
-});
+})
 ```

 Or you can register multiple themes at once.
@ -56,7 +79,7 @@ Vue.material.theme.registerAll({
    primary: 'indigo',
    accent: 'pink'
  }
-});
+})
 ```

 Apply your theme using <code>v-md-theme</code> directive:
--- a/docs/src/pages/Changelog.vue
+++ b/docs/src/pages/Changelog.vue
@ -8,10 +8,18 @@
      <ul>
        <li>Cards</li>
      </ul>
+
+      <h3 class="md-title">Changes:</h3>
+      <ul>
+        <li>Add Roboto font and google icons to the docs <strong><a href="https://github.com/marcosmoura/vue-material/commit/421ce7bb21a1489c8f98ee12d0d525eec6b0ee12" target="_blank" rel="noopener">421ce7b</a></strong></li>
+        <li>Explains better how to install and configure vue-material <strong><a href="https://github.com/marcosmoura/vue-material/commit/cc43985fc1d30403a7c95bfeb2dc38bbcc1acb9e" target="_blank" rel="noopener">cc43985</a></strong></li>
+        <li>Emit change &amp; input events from mdTextarea <strong><a href="https://github.com/marcosmoura/vue-material/commit/b474af9fd8d5f4563914e5aae47d14b7c8c62fb2" target="_blank" rel="noopener">b474af9</a></strong> (Thanks to <strong><a href="https://github.com/jvanbrug" target="_blank" rel="noopener">@jvanbrug</a></strong>)</li>
+      </ul>
    </section>

    <section>
      <h2 class="md-headline">v0.1.2 - Minor Fixes</h2>
+      <h3 class="md-title">Changes:</h3>
      <ul>
        <li>Fixed tooltips on Firefox</li>
        <li>Misaligned icons inside buttons on Firefox</li>
@ -21,6 +29,7 @@

    <section>
      <h2 class="md-headline">v0.1.1 - Minor Fixes</h2>
+      <h3 class="md-title">Changes:</h3>
      <ul>
        <li>Minor fixes</li>
        <li>Firefox support</li>
@ -63,3 +72,9 @@
    </section>
  </single-page>
 </template>
+
+<style lang="scss" scoped>
+  section + section {
+    margin-top: 56px;
+  }
+</style>
--- a/docs/src/pages/GettingStarted.vue
+++ b/docs/src/pages/GettingStarted.vue
@ -3,23 +3,37 @@
    <single-page-banner label="Getting Started"></single-page-banner>

    <single-page-section label="Installation">
+      <p>Import Roboto and Google Icons from Google CDN:</p>
+      <code-block lang="xml">
+&lt;link rel=&quot;stylesheet&quot; href=&quot;//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic&quot;&gt;
+&lt;link rel=&quot;stylesheet&quot; href=&quot;//fonts.googleapis.com/icon?family=Material+Icons&quot;&gt;
+      </code-block>
+
      <p>
        - Install Vue Material through npm or yarn: <br>
        <code>npm install vue-material</code><br>
        <code>yarn add vue-material</code>
      </p>
-      <p>- Import or require Vue and Vue Material in your code:</p>
-      <code-block lang="javascript">
-import Vue from &#039;vue&#039;;
-import VueMaterial from &#039;vue-material&#039;;
-
-// OR
-
-var Vue = require(&#039;vue&#039;);
-var VueMaterial = require(&#039;vue-material&#039;);
-      </code-block>
      <small>* Others package managers like JSPM and Bower are not supported yet.</small>

+      <md-tabs class="md-transparent">
+        <md-tab md-label="ES6">
+          <code-block lang="javascript">
+import Vue from 'vue'
+import VueMaterial from 'vue-material'
+import 'vue-material/dist/vue-material.css'
+          </code-block>
+        </md-tab>
+
+        <md-tab md-label="AMD">
+          <code-block lang="javascript">
+var Vue = require(vue')
+var VueMaterial = require(vue-material')
+require('vue-material/dist/vue-material.css')
+          </code-block>
+        </md-tab>
+      </md-tabs>
+
      <p>Or <a href="https://github.com/marcosmoura/vue-material/archive/master.zip" target="_blank" rel="noopener">download</a> from Github and reference the script and the stylesheet in your HTML:</p>
      <code-block lang="xml">
 &lt;link rel=&quot;stylesheet&quot; href=&quot;path/to/vue-material.css&quot;&gt;
@ -29,49 +43,107 @@ var VueMaterial = require(&#039;vue-material&#039;);

    <single-page-section label="Usage">
      <p>Enable Vue Material in your application using <code>Vue.use()</code>. You can always enable individual components:</p>
-      <code-block lang="javascript">
-Vue.use(VueMaterial);
+      <md-tabs class="md-transparent">
+        <md-tab md-label="ES6">
+          <code-block lang="javascript">
+// To import the whole library
+import Vue from 'vue'
+import VueMaterial from 'vue-material'
+import 'vue-material/dist/vue-material.css'

-// OR
+Vue.use(VueMaterial)

-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);
-      </code-block>
+// Or to import individual components
+import Vue from 'vue'
+import VueMaterial from 'vue-material'
+import 'vue-material/dist/components/mdCore/index.css' //Required to boot vue material
+import 'vue-material/dist/components/mdButton/index.css'
+import 'vue-material/dist/components/mdIcon/index.css'
+import 'vue-material/dist/components/mdSidenav/index.css'
+import 'vue-material/dist/components/mdToolbar/index.css'
+
+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)
+          </code-block>
+        </md-tab>
+
+        <md-tab md-label="AMD">
+          <code-block lang="javascript">
+// To import the whole library
+var Vue = require('vue')
+var VueMaterial = require('vue-material')
+require('vue-material/dist/vue-material.css')
+
+Vue.use(VueMaterial)
+
+// Or to import individual components
+var Vue = require('vue')
+var VueMaterial = require('vue-material')
+require('vue-material/dist/components/mdCore/index.css') //Required to boot vue material
+require('vue-material/dist/components/mdButton/index.css')
+require('vue-material/dist/components/mdIcon/index.css')
+require('vue-material/dist/components/mdSidenav/index.css')
+require('vue-material/dist/components/mdToolbar/index.css')
+
+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)
+          </code-block>
+        </md-tab>
+      </md-tabs>
    </single-page-section>

    <single-page-section label="Apply theme">
-      <p>To get Vue Material working properly, you'll need to configure and apply a default theme.</p>
-      <code-block lang="javascript">
+      <p>To get Vue Material working properly, you'll need to configure a default theme. You can also register multiple themes at once.</p>
+      <md-tabs class="md-transparent">
+        <md-tab md-label="Single Theme">
+          <code-block lang="javascript">
 Vue.material.theme.register('default', {
  primary: 'cyan',
  accent: 'pink'
-});
-      </code-block>
+})
+          </code-block>
+        </md-tab>

-      <p>Or you can register multiple themes at once.</p>
-
-      <code-block lang="javascript">
+        <md-tab md-label="Multiple Themes">
+          <code-block lang="javascript">
 Vue.material.theme.registerAll({
  default: {
    primary: 'cyan',
    accent: 'pink'
  },
-  phone: {
+  indigo: {
    primary: 'indigo',
    accent: 'pink'
  }
-});
-      </code-block>
+})
+          </code-block>
+        </md-tab>
+      </md-tabs>

-      <p>Apply your theme using <code>v-md-theme</code> directive:</p>
+      <p>Apply your theme on each code part that you want using <code>v-md-theme</code> directive:</p>

      <code-block lang="xml">
-&lt;div v-md-theme=&quot;&#039;default&#039;&quot;&gt;&lt;/div&gt;
-&lt;div v-md-theme=&quot;&#039;phone&#039;&quot;&gt;&lt;/div&gt;
+&lt;div id=&quot;app&quot; v-md-theme=&quot;&#039;default&#039;&quot;&gt;
+  &lt;md-toolbar&gt;
+    &lt;div class=&quot;md-title&quot;&gt;My App&lt;/div&gt;
+  &lt;/md-toolbar&gt;
+
+  &lt;md-button v-md-theme=&quot;&#039;indigo&#039;&quot;&gt;My Button&lt;/md-button&gt;
+&lt;/div&gt;
      </code-block>
    </single-page-section>
  </single-page>
 </template>
+
+<style lang="scss" scoped>
+  .md-tab {
+    padding: 16px 0;
+    border-top: 1px solid rgba(#000, .12);
+  }
+</style>
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "vue-material",
  "description": "Material Design for Vue.js",
-  "version": "0.1.2",
+  "version": "0.2.0",
  "author": "Marcos Moura <marcosvmmoura@gmail.com>",
  "homepage": "https://marcosmoura.github.io/vue-material",
  "license": "MIT",
--- a/src/components/mdInputContainer/mdTextarea.vue
+++ b/src/components/mdInputContainer/mdTextarea.vue
@ -95,6 +95,8 @@
      onInput() {
        manageHasValueClass(this.$el.value, this.parentClasses);
        this.$parent.inputLength = this.$el.value.length;
+        this.$emit('change', this.$el.value);
+        this.$emit('input', this.$el.value);
      }
    },
    mounted() {