Merge remote-tracking branch 'origin' into docs/add-ads

* origin: (55 commits) fix(MdSvgLoader): svg loader for invalid / missing mimetype (#1942) docs(Icon): fix minor typo (#1973) fix(MdRouterLink): new router-link registration name (#1978) chore: apply discord vanity URL (#1927) docs(ROADMAP.md): replace dead slack invite link with discord invite link (#1924) docs(Table): fix grammar issues (#1902) feat: router link components improvements (#1651) fix(MdTable): recalculate fixed header width on data changes (#1877) fix(MdDialogContent): missing theme class (#1876) docs(Elevation and Layout): Typos fixed and improved documentation. (#1878) fix(MdTable): nextTick selection data (#1874) docs(BottomBar): fix typo (#1875) docs(MdButton): escape a tag (#1872) docs(Input): typos and correction chore: upgrade dependencies fix(MdField): remove firefox required box-shadow feat: disable complexity rules for some methods fix(MdProgressSpinner): fix CSP error (#1850) fix: MdBadge do not accept color #1854 issue (#1856) fix: fix the repeated generated css theme classes if there is multiple themes defined (#1784) ...
vuematerial · May 11, 2019 · d3731a6 · d3731a6
2 parents 01d8e48 + 4fa84a4
commit d3731a6
Show file tree

Hide file tree

Showing 81 changed files with 1,322 additions and 10,363 deletions.
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -8,7 +8,7 @@ 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 [Discord server]( https://discord.gg/rgcmTtm) instead.
+- Do not create questions. The issue list is exclusively for reports, bugs and feature requests. Use the [Discord server]( https://discord.gg/vuematerial) 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/vuematerial/vue-material/milestones) or on [Projects](https://github.com/vuematerial/vue-material/projects).
 

diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
@@ -3,7 +3,7 @@
 Questions
 ================
 If you have any questions, ideas or you want to discuss with Vue Material community. Use the Discord instead.
-Follow this link: https://discord.gg/rgcmTtm
+Follow this link: https://discord.gg/vuematerial
 
 Reporting a bug?
 ================

diff --git a/README.md b/README.md
@@ -88,9 +88,7 @@ Optionally import Roboto font & Material Icons from Google CDN:
 
 ## Questions
 
-If you have any questions, ideas or you want to discuss with Vue Material community. Use the [Discord](https://discord.gg/rgcmTtm)
-
-Or you can use [Slack Channel](https://vue-material.slack.com). Follow this [invitation link for Slack](https://join.slack.com/t/vuematerial/shared_invite/MTgzMzU2NDQ5ODkwLTE0OTQ4MDI3MDAtNWYyZjhkNzEzMA).
+If you have any questions, ideas or you want to discuss with Vue Material community, use [Discord](https://discord.gg/vuematerial) to join us.
 
 ## Contributing
 

diff --git a/ROADMAP.md b/ROADMAP.md
@@ -222,10 +222,10 @@ I will point out those changes inside the migration guide.
 <small>Vue Material 2 will be released with the new Material Design guidelines landed on Google I/O 2018. Stay tuned!<small>
 
 ## But man! I need the ___________
-Have something in mind? Need a new components? Created something meaningful and think that this can fit inside the lib? Let's discuss? We have a [Slack Channel](https://join.slack.com/t/vuematerial/shared_invite/MTgzMzU2NDQ5ODkwLTE0OTQ4MDI3MDAtNWYyZjhkNzEzMA) and I'm online there almost everyday. Send me a message!
+Have something in mind? Need a new components? Created something meaningful and think that this can fit inside the lib? Let's discuss? We have a [Discord Channel](https://discord.gg/vuematerial) and I'm online there almost everyday. Send me a message!
 
 ## I want to help. What do you need?
-Well. All kind of help are welcome. If you want to contribute with the project, just send me a message and I will tell what you can do. We recently created a Slack Channel to share ideas and to keep all the comunication in one place.
+Well. All kind of help are welcome. If you want to contribute with the project, just send me a message and I will tell what you can do. We recently created a Discord Channel to share ideas and to keep all the communication in one place.
 
 ## Awesome! I want to pay you a coffee!
 Vue Material do not run under the umbrella of any company or something like that, and is an independent project created by me on spare time. It became one of the most used UI Libraries for Vue.js.

diff --git a/docs/app/banner.js b/docs/app/banner.js
@@ -32,5 +32,5 @@ if (process.env.NODE_ENV === 'production') {
   console.log('%c        Made with%c ♥ %cby Marcos Moura', text, emoji, text)
   console.log('%c', spacer)
   console.log('%c', spacer)
-  console.log('%cLooking something specific? We can help you! Join us on discord: https://discord.gg/rgcmTtm', message)
+  console.log('%cLooking something specific? We can help you! Join us on discord: https://discord.gg/vuematerial', message)
 }
diff --git a/docs/app/i18n/en-US/pages.js b/docs/app/i18n/en-US/pages.js
@@ -5,16 +5,16 @@ export default {
     material: 'Material Design',
     materialContent: 'Simple, lightweight and built exactly according to the Google Material Design specs.',
     compatible: 'Compatible',
-    compatibleContent: 'Build well-designed apps that can fit on every screen with support to all modern Web Browsers.',
+    compatibleContent: 'Build well-designed apps that can fit on every screen with support for all modern Web Browsers.',
     featured: 'Full-featured',
-    featuredContent: 'Complete with dynamic themes, on demand components and all with an easy-to-use API.',
+    featuredContent: 'Complete with dynamic themes, on-demand components and all with an easy-to-use API.',
     ecosystem: 'Ecosystem',
     premium: 'Premium Themes',
     viewProject: 'View project',
     sponsors: 'Sponsors',
     backers: 'Backers',
-    sponsorsDescription: 'Vue Material does not run under the umbrella of any company or something like that. Is an independent project created by {0} on his spare time, which became one of the most used UI Libraries for Vue.js. The development is active and we are working hard to release great things for you.',
-    beAPatron: 'If you think that this project helped you or your company in any way, you can consider become a backer/sponsor on Patreon'
+    sponsorsDescription: 'Vue Material does not run under the umbrella of any company or anything like that. It is an independent project created by {0} in his spare time, which has become one of the most used UI Libraries for Vue.js. The development is active and we are working hard to release great things for you.',
+    beAPatron: 'If you think that this project helped you or your company in any way, you can consider becoming a backer/sponsor on Patreon'
   },
   about: {
     title: 'About'
@@ -24,10 +24,16 @@ export default {
   },
   gettingStarted: {
     title: 'Getting Started',
-    introduction: 'Vue Material is the best integration between Vue.js and Material Design specs! You can easily configure it to suit all your needs. All you have to do is choose an installation method that fits you better and follow it\'s instructions. Let\'s start!',
+    introduction: 'Vue Material is the best integration between Vue.js and Material Design specs! You can easily configure it to suit all your needs. All you have to do is choose an installation method that suits your environment and follow it\'s instructions. Let\'s start!',
     installation: 'Installation',
     npmOrYarn: 'NPM or Yarn'
   },
+  configuration: {
+    title: 'Configuration',
+    viaVueGlobalObject: 'Via Vue global object',
+    inVueComponents: 'In Vue components',
+    options: 'Options',
+  },
   themes: {
     title: 'Themes'
   },
@@ -47,6 +53,9 @@ export default {
     title: 'Themes - Advanced',
     nav: 'Advanced'
   },
+  withRouter: {
+    title: 'Work with Vue Router'
+  },
   components: {
     title: 'Components',
   },
@@ -64,15 +73,15 @@ export default {
   app: {
     title: 'App',
     intro: {
-      desc1: 'The following patterns applies the elevations in which content should scroll, how to size flexible space, and when to anchor specific elements.',
-      desc2: 'When building applications there is some repeated behaviours regarding the structure of the app. Responsive drawers, flexible toolbars, scrolling... Either scenario could repeat across all complex applications. This documentation website, for example, needs some of them, and maybe you\'ll need them too. To solve those problems the {0} was created.',
-      desc3: 'It has all behaviour to build complex application shells, that will be simple, responsive and it will integrate seamlessly with the drawers, toolbars and content.',
+      desc1: 'The following patterns apply the elevations in which content should scroll, how to size flexible space, and when to anchor specific elements.',
+      desc2: 'When building applications there are some repeated behaviours regarding the structure of the app. Responsive drawers, flexible toolbars, scrolling... Any of these could repeat across complex applications. This documentation website, for example, needs some of them; and maybe you\'ll need them too. To solve those problems the {0} was created.',
+      desc3: 'It contains all the behaviours you need to build complex application shells, that will be simple, responsive and it will integrate seamlessly with drawers, toolbars and content.',
       desc4: 'The {0} component supports {1}, {2} and {3}, which are aliases for {4}, {5} and {6} respectively. Look at the examples:'
     },
     regular: {
       title: 'Regular Toolbars',
       default: 'Default',
-      desc1: 'When you need a toolbar, a responsive drawer and a content to be displayed following the Material Guidelines. This is the default behaviour.',
+      desc1: 'This pattern can be used when you need a toolbar, a responsive drawer and content to be displayed following the Material Guidelines. This is the default behaviour.',
       desc2: 'The order of {0} children is irrelevant. The component will take care of this based on the props that you pass.'
     },
     fixed: {
@@ -87,25 +96,25 @@ export default {
     },
     flexible: {
       title: 'Flexible height and text size',
-      desc: 'Maybe the focus of your page is the title, following by the content itself. The page that shows details of a single contact is a great example of this scenario. So you can use flexible behaviour to give higher piority to your content after scrolling.',
+      desc: 'Maybe the focus of your page is the title, followed by the content itself. A page that shows the details of a single contact is a great example of this scenario. So you can use flexible behaviour to give higher piority to your content after scrolling.',
       flexible: 'Flexible'
     },
     lastRow: {
       title: 'The last toolbar row fixed',
-      desc: 'When your page has some primary navigation buttons, such as tabs and others, you may want them to be always available. You can make the second row of your toolbar always visible, hiding the first one when it\'s not needed. As an example, the WhatsApp main page has this behaviour.',
+      desc: 'When your page has some primary navigation buttons, such as tabs and others, you may want them to always be available. You can make the second row of your toolbar always visible, hiding the first one when it\'s not needed. As an example, the WhatsApp main page has this behaviour.',
       fixed: 'Navigation fixed'
     },
     overlap: {
       title: 'Flexible space with overlapping content',
-      desc: 'If you want to give focus on the content cards you may want to use the overlap. It\'s just an awesome effect!',
+      desc: 'If you want to give focus to the content cards, you may want to use the overlap. It\'s just an awesome effect!',
       content: 'Overlapping content'
     },
     apiApp: {
-      desc: 'In both examples we have 3 distinct areas: Toolbar, Drawer and Content. You should create them using the following tags:',
+      desc: 'In these examples we have 3 distinct areas: Toolbar, Drawer and Content. You should create them using the following tags:',
       toolbar: 'Creates the toolbar accepting any options from the md-toolbar',
-      drawer: 'Places the drawer panel, that also accepts any options from the md-drawer. You can have a left or right placed drawers. Or both.',
+      drawer: 'Places the drawer panel, that also accepts any options from the md-drawer. You can have a left or right placed drawer. Placing multiple drawers is currently not supported.',
       content: 'Here you will add any content for your page.',
-      alert: 'Any other tag passed as a direct child of the md-app tag will be ignored. The component will only look for those three tags and choose the right placement for them.',
+      alert: 'Any other tag passed as a direct child of the md-app tag will be ignored. The component will only look for these three tags and choose the right placement for them.',
       propsDesc: 'The following properties can be applied'
     },
     apiToolbar: {
@@ -122,12 +131,12 @@ export default {
     },
     props: {
       mdMode: 'Sets the toolbar mode. See below the detailed description of each mode.',
-      mdModeFixed: 'Makes the toolbar fixed without any scrolling effect',
+      mdModeFixed: 'Makes the toolbar fixed without any scrolling effect.',
       mdModeFixedLast: 'Keeps the second row of the toolbar fixed and always visible. This NEEDS two md-toolbar-row inside the Toolbar.',
-      mdModeReveal: 'Hides the toolbar temporarily and show it after the scroll. This is a good approach for mobile.',
-      mdModeFlexible: 'Makes the height and the title size flexible to give the content a higher priority',
-      mdModeOverlap: 'Enables the overlapping content',
-      mdWaterfall: 'Enables the waterfall effect, that can be combined with any md-mode',
+      mdModeReveal: 'Hides the toolbar temporarily and shows it after the scroll. This is a good approach for mobile.',
+      mdModeFlexible: 'Makes the height and the title size flexible to give the content a higher priority.',
+      mdModeOverlap: 'Enables the overlapping content.',
+      mdWaterfall: 'Enables the waterfall effect, that can be combined with any md-mode.',
       mdScrollbar: 'Enables the md-scrollbar class to the scrollable content. Read more about the Scrollbar documentation.'
     }
   },

diff --git a/docs/app/pages/About.vue b/docs/app/pages/About.vue
@@ -44,13 +44,13 @@
     <section class="page-container-section">
       <h2 class="md-title">Want to contribute with the Project?</h2>
 
-      <p>Well. All kind of help are welcome. If you want to contribute with the project, just send me a message and I will tell what you can do. We have a <a href="https://join.slack.com/t/vuematerial/shared_invite/MTgzMzU2NDQ5ODkwLTE0OTQ4MDI3MDAtNWYyZjhkNzEzMA">Slack Channel</a> to share ideas and to keep all the comunication in one place.</p>
+      <p>Well. All kind of help are welcome. If you want to contribute with the project, just send me a message and I will tell what you can do. We have a <a href="https://discord.gg/vuematerial">Discord Server</a> to share ideas and to keep all the comunication in one place.</p>
     </section>
 
     <section class="page-container-section">
       <h2 class="md-title">Need extra help?</h2>
 
-      <p>I'm always online on our <a href="https://join.slack.com/t/vuematerial/shared_invite/MTgzMzU2NDQ5ODkwLTE0OTQ4MDI3MDAtNWYyZjhkNzEzMA">Slack channel</a>. If you need anything, fell free to ask me directly there. :)</p>
+      <p>I'm always online on our <a href="https://discord.gg/vuematerial">Discord server</a>. If you need anything, fell free to ask me directly there. :)</p>
     </section>
 
     <section class="page-container-section">

diff --git a/docs/app/pages/Components/BottomBar/BottomBar.vue b/docs/app/pages/Components/BottomBar/BottomBar.vue
@@ -14,7 +14,7 @@
 
       <p>The bottom bar is compatible with all Vue Router options. Just pass the values as parameters on <code>md-bottom-bar-item</code> component:</p>
       <code-example title="With default fixed style" :component="examples['bar-router']" />
-      <note-block tip>Note: Try tro change the url manually to see the component selecting the correct item.</note-block>
+      <note-block tip>Note: Try to change the url manually to see the component selecting the correct item.</note-block>
     </div>
 
     <div class="page-container-section">

diff --git a/docs/app/pages/Components/BottomBar/examples/BarRouter.vue b/docs/app/pages/Components/BottomBar/examples/BarRouter.vue
@@ -2,19 +2,26 @@
   <div>
     <div class="phone-viewport">
       <md-bottom-bar md-sync-route>
-        <md-bottom-bar-item to="/components/bottom-bar/home" md-label="Home" md-icon="home"></md-bottom-bar-item>
+        <md-bottom-bar-item to="/components/bottom-bar" exact md-label="Home" md-icon="home"></md-bottom-bar-item>
         <md-bottom-bar-item to="/components/bottom-bar/posts" md-label="Posts" md-icon="/assets/icon-whatshot.svg"></md-bottom-bar-item>
         <md-bottom-bar-item to="/components/bottom-bar/favorites" md-label="Favorites" md-icon="favorite"></md-bottom-bar-item>
       </md-bottom-bar>
     </div>
 
     <div class="phone-viewport">
       <md-bottom-bar class="md-accent" md-sync-route>
-        <md-bottom-bar-item to="/components/bottom-bar/home" md-label="Home" md-icon="home"></md-bottom-bar-item>
+        <md-bottom-bar-item to="/components/bottom-bar" exact md-label="Home" md-icon="home"></md-bottom-bar-item>
         <md-bottom-bar-item to="/components/bottom-bar/posts" md-label="Posts" md-icon="/assets/icon-whatshot.svg"></md-bottom-bar-item>
         <md-bottom-bar-item to="/components/bottom-bar/favorites" md-label="Favorites" md-icon="favorite"></md-bottom-bar-item>
       </md-bottom-bar>
     </div>
+
+    <div class="phone-viewport">
+      <md-bottom-bar class="md-accent" md-sync-route>
+        <md-bottom-bar-item to="/components/bottom-bar/posts/1" md-label="Post 1" md-icon="/assets/icon-whatshot.svg"></md-bottom-bar-item>
+        <md-bottom-bar-item to="/components/bottom-bar/posts/2" md-label="Post 2" md-icon="/assets/icon-whatshot.svg"></md-bottom-bar-item>
+      </md-bottom-bar>
+    </div>
   </div>
 </template>
 
@@ -34,4 +41,8 @@
     border: 1px solid rgba(#000, .26);
     background: rgba(#000, .06);
   }
+
+  .md-bottom-bar .md-bottom-bar-item.router-link-active {
+    text-shadow: 0 0 5px;
+  }
 </style>
diff --git a/docs/app/pages/Components/Button/Button.vue b/docs/app/pages/Components/Button/Button.vue
@@ -83,7 +83,7 @@ export default {
             {
               name: 'href',
               type: 'String',
-              description: 'Creates a anchor on the button. In this case the generated tag will be <a>.',
+              description: 'Creates a anchor on the button. In this case the generated tag will be <code>&lt;a&gt;</code>.',
               defaults: 'null'
             },
             {

diff --git a/docs/app/pages/Components/Checkbox/Checkbox.vue b/docs/app/pages/Components/Checkbox/Checkbox.vue
@@ -5,7 +5,7 @@
 <template>
   <page-container centered :title="$t('pages.checkbox.title')">
     <div class="page-container-section">
-      <p>Checkboxes allow the user to select multiple options from a set. Vue material checkboxes can work with multiple <code>v-model</code> types: <code>String</code>, <code>Number</code>, <code>Boolean</code> and <code>Array</code>.</p>
+      <p>Checkboxes allow the user to select multiple options from a set. Vue material checkboxes can work with multiple <code>v-model</code> types: <code>String</code>, <code>Number</code>, <code>Boolean</code>, <code>Object</code> and <code>Array</code>.</p>
     </div>
 
     <div class="page-container-section">