diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 39e4890e2..9598e0f16 100644 --- 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 index f845ab3e2..1da7685fd 100644 --- 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 index 471f955d2..e0bd17e62 100644 --- 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 index ad8a84237..c7493302e 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -222,10 +222,10 @@ I will point out those changes inside the migration guide. Vue Material 2 will be released with the new Material Design guidelines landed on Google I/O 2018. Stay tuned! ## 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 index a4f7c2e93..ef513a6b6 100644 --- 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 index 4234cb43e..20236f671 100644 --- 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 index 59440ab75..a7dc3cd7f 100644 --- a/docs/app/pages/About.vue +++ b/docs/app/pages/About.vue @@ -44,13 +44,13 @@

Want to contribute with the Project?

-

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 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 have a Discord Server to share ideas and to keep all the comunication in one place.

Need extra help?

-

I'm always online on our Slack channel. If you need anything, fell free to ask me directly there. :)

+

I'm always online on our Discord server. If you need anything, fell free to ask me directly there. :)

diff --git a/docs/app/pages/Components/BottomBar/BottomBar.vue b/docs/app/pages/Components/BottomBar/BottomBar.vue index bba27f3ae..fa803bc2c 100644 --- a/docs/app/pages/Components/BottomBar/BottomBar.vue +++ b/docs/app/pages/Components/BottomBar/BottomBar.vue @@ -14,7 +14,7 @@

The bottom bar is compatible with all Vue Router options. Just pass the values as parameters on md-bottom-bar-item component:

- Note: Try tro change the url manually to see the component selecting the correct item. + Note: Try to change the url manually to see the component selecting the correct item.
diff --git a/docs/app/pages/Components/BottomBar/examples/BarRouter.vue b/docs/app/pages/Components/BottomBar/examples/BarRouter.vue index 2d0885c87..f7f59ad42 100644 --- a/docs/app/pages/Components/BottomBar/examples/BarRouter.vue +++ b/docs/app/pages/Components/BottomBar/examples/BarRouter.vue @@ -2,7 +2,7 @@
- + @@ -10,11 +10,18 @@
- +
+ +
+ + + + +
@@ -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; + } diff --git a/docs/app/pages/Components/Button/Button.vue b/docs/app/pages/Components/Button/Button.vue index acce9ba02..202d1a17e 100644 --- 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 .', + description: 'Creates a anchor on the button. In this case the generated tag will be <a>.', defaults: 'null' }, { diff --git a/docs/app/pages/Components/Checkbox/Checkbox.vue b/docs/app/pages/Components/Checkbox/Checkbox.vue index c631466da..5100c9cc6 100644 --- a/docs/app/pages/Components/Checkbox/Checkbox.vue +++ b/docs/app/pages/Components/Checkbox/Checkbox.vue @@ -5,7 +5,7 @@ @@ -67,6 +73,31 @@ name: 'DocDrawer', mixins: [examples], data: () => ({ + swipeable: { + props: { + headings: ['Name', 'Description', 'Default'], + props: [ + { + name: 'md-swipe-threshold', + type: 'Number', + description: 'The minimal distance traveled to be considered swipe.', + defaults: '50' + }, + { + name: 'md-swipe-restraint', + type: 'Number', + description: 'The maximum distance allowed at the same time in perpendicular direction.', + defaults: '100' + }, + { + name: 'md-swipe-time', + type: 'Number', + description: 'The maximum time allowed to detect swipe.', + defaults: '400' + }, + ] + } + }, drawer: { props: { headings: ['Name', 'Description', 'Default'], @@ -77,6 +108,12 @@ description: 'Option used to trigger the drawer visibility. Should be used with the .sync modifier.', defaults: 'false' }, + { + name: 'md-swipeable', + type: 'Boolean', + description: 'Option used to enable touch support to be opened/closed by swipe. For more option see API - Swipeable', + defaults: 'false' + }, { name: 'md-fixed', type: 'Boolean', diff --git a/docs/app/pages/Components/Drawer/examples/Temporary.vue b/docs/app/pages/Components/Drawer/examples/Temporary.vue index 371361616..8b5f1f150 100644 --- a/docs/app/pages/Components/Drawer/examples/Temporary.vue +++ b/docs/app/pages/Components/Drawer/examples/Temporary.vue @@ -11,7 +11,7 @@
- + My App name diff --git a/docs/app/pages/Components/Icon/Icon.vue b/docs/app/pages/Components/Icon/Icon.vue index b183e2d23..311e6f1d9 100644 --- a/docs/app/pages/Components/Icon/Icon.vue +++ b/docs/app/pages/Components/Icon/Icon.vue @@ -31,7 +31,7 @@

SVG Source

-

When loading an icon font, you will be able to use ALL of it's icons. This may hurts the performance of your application. Instead, you can use only the icons that you really need, loading them using svg.

+

When loading an icon font, you will be able to use ALL of it's icons. This may hurt the performance of your application. Instead, you can use only the icons that you really need, loading them using svg.

diff --git a/docs/app/pages/Components/Input/Input.vue b/docs/app/pages/Components/Input/Input.vue index b859a8859..cd41f140f 100644 --- a/docs/app/pages/Components/Input/Input.vue +++ b/docs/app/pages/Components/Input/Input.vue @@ -8,15 +8,15 @@ @@ -29,4 +33,8 @@ export default { vertical-align: top; border: 1px solid rgba(#000, .12); } + + .md-list .router-link-active { + text-shadow: 0 0 5px; + } diff --git a/docs/app/pages/Components/Menu/Menu.vue b/docs/app/pages/Components/Menu/Menu.vue index 2896c4cde..cd2d893ea 100644 --- a/docs/app/pages/Components/Menu/Menu.vue +++ b/docs/app/pages/Components/Menu/Menu.vue @@ -14,7 +14,7 @@

Directions

-

The position of the menu content is calculated based of the contraints of the trigger element. Based on this you can set a position using X and Y axis.

+

The position of the menu content is calculated based on the contraints of the trigger element. Based on this you can set a position using X and Y axis.

You can combine top/bottom with start/end:

@@ -29,7 +29,7 @@

Sizes

-

md-menu have 4 different sizes and a auto mode:

+

md-menu has 4 different sizes and an auto mode:

The max-width of a menu is 280px.
diff --git a/docs/app/pages/Components/Radio/Radio.vue b/docs/app/pages/Components/Radio/Radio.vue index b68340fec..2ca0c2ab1 100644 --- a/docs/app/pages/Components/Radio/Radio.vue +++ b/docs/app/pages/Components/Radio/Radio.vue @@ -37,13 +37,13 @@ props: [ { name: 'value', - type: 'String|Number|Boolean', + type: 'String|Number|Boolean|Object', description: 'The value of the radio', defaults: 'on' }, { name: 'v-model', - type: 'String|Number|Boolean', + type: 'String|Number|Boolean|Object', description: 'The model variable to bind the selection value. If no value is assigned, then it will use the same behaviour of a regular input[type="radio"].', defaults: 'null' }, diff --git a/docs/app/pages/Components/Radio/examples/RegularRadio.vue b/docs/app/pages/Components/Radio/examples/RegularRadio.vue index 244347a3f..07bb7b106 100644 --- a/docs/app/pages/Components/Radio/examples/RegularRadio.vue +++ b/docs/app/pages/Components/Radio/examples/RegularRadio.vue @@ -2,6 +2,8 @@
Boolean String + Object A + Object B No Value Disabled @@ -13,6 +15,8 @@ export default { name: 'RegularRadio', data: () => ({ + objA: { name: 'a' }, + objB: { name: 'b' }, radio: false }) } diff --git a/docs/app/pages/Components/SpeedDial/examples/PositionDirection.vue b/docs/app/pages/Components/SpeedDial/examples/PositionDirection.vue index c0357c6d3..8fd422f3b 100644 --- a/docs/app/pages/Components/SpeedDial/examples/PositionDirection.vue +++ b/docs/app/pages/Components/SpeedDial/examples/PositionDirection.vue @@ -1,5 +1,24 @@ @@ -71,15 +70,18 @@ export default { .demo-option { display: flex; + flex-flow: wrap; + justify-content: center; + align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - div { + .select { margin: 0 6px; - display: flex; - flex-direction: column; + display: inline-flex; + width: auto; } } diff --git a/docs/app/pages/Components/Steppers/examples/StepperRoute.vue b/docs/app/pages/Components/Steppers/examples/StepperRoute.vue index 3e1fe351c..7ac933524 100644 --- a/docs/app/pages/Components/Steppers/examples/StepperRoute.vue +++ b/docs/app/pages/Components/Steppers/examples/StepperRoute.vue @@ -1,7 +1,7 @@ diff --git a/docs/app/pages/Components/Table/Table.vue b/docs/app/pages/Components/Table/Table.vue index de2eea06d..b571cdaf5 100644 --- a/docs/app/pages/Components/Table/Table.vue +++ b/docs/app/pages/Components/Table/Table.vue @@ -12,7 +12,7 @@ @@ -70,6 +76,31 @@ name: 'DocTabs', mixins: [examples], data: () => ({ + swipeable: { + props: { + headings: ['Name', 'Description', 'Default'], + props: [ + { + name: 'md-swipe-threshold', + type: 'Number', + description: 'The minimal distance traveled to be considered swipe.', + defaults: '50' + }, + { + name: 'md-swipe-restraint', + type: 'Number', + description: 'The maximum distance allowed at the same time in perpendicular direction.', + defaults: '100' + }, + { + name: 'md-swipe-time', + type: 'Number', + description: 'The maximum time allowed to detect swipe.', + defaults: '400' + }, + ] + } + }, tabs: { props: { headings: ['Name', 'Description', 'Default'], @@ -80,6 +111,12 @@ description: 'Set the current selected tab. Works by providing the id of the desired md-tab.', defaults: 'null' }, + { + name: 'md-swipeable', + type: 'Boolean', + description: 'Option used to enable touch support to move between tabs by swipe. For more option see API - Swipeable', + defaults: 'false' + }, { name: 'md-sync-route', type: 'Boolean', diff --git a/docs/app/pages/Components/Tabs/examples/TabContent.vue b/docs/app/pages/Components/Tabs/examples/TabContent.vue index ef9e73838..2e846cc0a 100644 --- a/docs/app/pages/Components/Tabs/examples/TabContent.vue +++ b/docs/app/pages/Components/Tabs/examples/TabContent.vue @@ -1,7 +1,7 @@