diff --git a/.codeclimate.yml b/.codeclimate.yml
index 291210db1..41e59cfef 100644
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@@ -23,10 +23,7 @@ exclude_paths:
plugins:
eslint:
enabled: false
-
- scss-lint:
- enabled: true
-
+
duplication:
enabled: true
config:
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index a1e33e6dc..165450c3b 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -4,12 +4,13 @@ Reporting a bug?
================
- Always search for your issue first. It may have already been answered, planned or fixed in some branch.
+- Open one issue per subject. Cluttered issues will be closed.
- Make sure to only create issues for the newest version.
- Create a declarative title and describe clearly the steps necessary to reproduce the issue. If an issue labeled "need repro" receives no further input from the issue author for more than 3 days, it will be closed.
-- If you want to show your code please use [Codepen](http://codepen.io/pen/) or [JSFiddle](https://jsfiddle.net/). You could start with [this template](http://codepen.io/vue-material/pen/WGavBE).
-- In case you found a solution by yourself, it could be helpful to explain how you fixed it.
+- If you want to show your code, please use [Codepen](http://codepen.io/pen/) or [JSFiddle](https://jsfiddle.net/). You can start with [this template](https://codepen.io/vue-material/pen/RxGmyb).
+- In case you found a solution by yourself, it could be helpful to explain how you have fixed it.
- For bugs that involves build setups, you can create a reproduction repository with steps in the README.
-- If your issue is resolved but still open, don’t hesitate to close it. In case you found a solution by yourself, it could be helpful to explain how you fixed it.
+- If your issue is resolved but still open, don’t hesitate to close it.
Have a feature request?
=======================
diff --git a/README.md b/README.md
index 96f3af7c6..9c050af61 100644
--- a/README.md
+++ b/README.md
@@ -30,11 +30,11 @@ Build well-designed apps that can fit on every screen with support to all modern
## 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.
+Vue Material is proudly sponsored by [Rollbar](https://codesponsor.io/t/c/93172542ee6813a9372c08c459fd1e5a/
+). They provide real-time JavaScript error monitoring, alerting, and analytics for developers. :rocket:
-You can try Rollbar for free at [https://rollbar.com](https://cs.berry.sh/c/c0597778-f465-4788-abe3-8711cc087774
-)
+You can try Rollbar for free at [https://rollbar.com](https://codesponsor.io/t/c/93172542ee6813a9372c08c459fd1e5a/
+)
## Demo and Documentation
diff --git a/build/docs/webpack.js b/build/docs/webpack.js
index bd3a20741..33f530ace 100644
--- a/build/docs/webpack.js
+++ b/build/docs/webpack.js
@@ -29,6 +29,7 @@ const componentExampleLoader = require.resolve('../loaders/component-example-loa
const webpackConfig = {
entry: {
app: [
+ 'babel-polyfill',
'./docs/app/index.js',
'./build/docs/offline.js'
]
diff --git a/build/loaders/component-example-loader.js b/build/loaders/component-example-loader.js
index bcf0dd262..532ce53f1 100644
--- a/build/loaders/component-example-loader.js
+++ b/build/loaders/component-example-loader.js
@@ -3,8 +3,9 @@ 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 { transform } = require('babel-core')
+const transpile = code => transform(code, {extends: resolvePath('.babelrc')}).code
const { getIndentedSource } = require('../../docs/app/mixins/codeSource')
function camelCaseToDash (str) {
diff --git a/build/local/webpack.js b/build/local/webpack.js
index 9cdc171f3..87cfb4b9f 100644
--- a/build/local/webpack.js
+++ b/build/local/webpack.js
@@ -12,6 +12,7 @@ export default {
devtool: 'cheap-module-eval-source-map',
entry: {
docs: [
+ 'babel-polyfill',
'./docs/app/index.js',
'./build/local/client'
]
diff --git a/build/new-component.js b/build/new-component.js
index 12ef61104..0a18972a5 100644
--- a/build/new-component.js
+++ b/build/new-component.js
@@ -80,6 +80,7 @@ export default Vue => {
function getDocsFile (name) {
const singleName = name.replace('Md', '')
+ const docName = name.replace('Md', 'Doc')
return `
@@ -105,7 +106,7 @@ function getDocsFile (name) {
import examples from 'docs-mixins/docsExample'
export default {
- name: '${singleName}',
+ name: '${docName}',
mixins: [examples]
}
@@ -155,7 +156,7 @@ const rootDir = join(__dirname, '..')
const componentsPath = 'src/components/' + name
const componentIndex = 'src/components/index.js'
const themePath = 'src/theme/all.scss'
-const docsPath = 'docs/app/pages/components/' + singleName
+const docsPath = 'docs/app/pages/Components/' + singleName
const docsRoutePath = 'docs/app/routes.js'
const navPath = 'docs/app/template/MainNavContent.vue'
diff --git a/docs/app/config.js b/docs/app/config.js
index afa8ae283..f52807ca1 100644
--- a/docs/app/config.js
+++ b/docs/app/config.js
@@ -2,7 +2,7 @@ import Vue from 'vue'
import Axios from 'axios'
import VueRouter from 'vue-router'
import Vuei18n from 'vue-i18n'
-import enUS from './i18n/en-US'
+import i18nLocales from './i18n'
import { routes } from './routes'
import createRoute from './routes'
@@ -18,12 +18,10 @@ const mappedRoutes = routes.map(route => ({
component: () => import(`./pages/${route.page}`)
}))
-export const currentLang = enUS
+export const currentLang = i18nLocales.enUS
export const i18n = new Vuei18n({
- locale: 'en-US',
- messages: {
- 'en-US': enUS
- }
+ locale: 'enUS',
+ messages: i18nLocales
})
export const router = new VueRouter({
diff --git a/docs/app/i18n/en-US.js b/docs/app/i18n/en-US.js
deleted file mode 100644
index cc6962186..000000000
--- a/docs/app/i18n/en-US.js
+++ /dev/null
@@ -1,265 +0,0 @@
-export default {
- aboutMaterial: 'About Vue Material',
- madeWith: 'Made with',
- by: 'by',
- pages: {
- home: {
- title: 'Home',
- slogan: 'Build beautiful apps with Material Design and Vue.js',
- 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.',
- featured: 'Full-featured',
- featuredContent: 'Complete with dynamic themes, on demand components and all with an easy-to-use API.',
- ecosystem: 'Ecosystem',
- 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'
- },
- about: {
- title: 'About'
- },
- license: {
- title: 'License'
- },
- 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!',
- installation: 'Installation',
- npmOrYarn: 'NPM or Yarn'
- },
- themes: {
- title: 'Themes'
- },
- themeConcepts: {
- title: 'Themes - Concepts',
- nav: 'Concepts'
- },
- themePrebuilt: {
- title: 'Themes - Prebuilt',
- nav: 'Prebuilt'
- },
- themeConfiguration: {
- title: 'Themes - Configuration',
- nav: 'Configuration'
- },
- themeAdvanced: {
- title: 'Themes - Advanced',
- nav: 'Advanced'
- },
- components: {
- title: 'Components'
- },
- uiElements: {
- title: 'UI Elements'
- },
- elevation: {
- title: 'Elevation'
- },
- button: {
- title: 'Button',
- description: 'Buttons communicate the action that will occur when the user touches them.'
- },
- 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.',
- 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.',
- desc2: 'The order of {0} children is irrelevant. The component will take care of this based on the props that you pass.'
- },
- fixed: {
- title: 'Fixed Toolbars',
- desc: 'Sometimes you may need a fixed toolbar, to make all options always available. You can also combine this with the "waterfall" effect.',
- fixedWaterfall: 'Fixed + Waterfall'
- },
- reveal: {
- title: 'Reveal after scroll',
- desc: 'When you have a large amount of content to be displayed, and you want to focus on the reading part, you can hide the toolbar temporarily and reveal it when scrolling.',
- reveal: 'Reveal'
- },
- 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.',
- flexible: 'Flexible'
- },
- lastRow: {
- title: 'The last toolbar row fixed',
- desc: 'When your page have 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 have 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!',
- 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:',
- 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.',
- 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.',
- propsDesc: 'The following properties can be applied'
- },
- apiToolbar: {
- desc: 'It supports all options of {0}. Please refer to the {1} to check out the API.',
- page: 'Toolbar page'
- },
- apiDrawer: {
- desc: 'It supports all options of {0}. Please refer to the {1} to check out the API.',
- page: 'Drawer page'
- },
- apiContent: {
- desc: 'It supports all options of {0}. Please refer to the {1} to check out the API.',
- page: 'Content page'
- },
- props: {
- mdMode: 'Sets the toolbar mode. See below the detailed description of each mode.',
- 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',
- mdScrollbar: 'Enables the md-scrollbar class to the scrollable content. Read more about the Scrollbar documentation.'
- }
- },
- avatar: {
- title: 'Avatar'
- },
- bottomBar: {
- title: 'Bottom Bar'
- },
- card: {
- title: 'Card'
- },
- chips: {
- title: 'Chips'
- },
- checkbox: {
- title: 'Checkbox'
- },
- content: {
- title: 'Content'
- },
- emptyState: {
- title: 'Empty State'
- },
- pickers: {
- title: 'Pickers'
- },
- progress: {
- title: 'Progress'
- },
- progressBar: {
- title: 'Progress Bar',
- nav: 'Bar'
- },
- progressSpinner: {
- title: 'Progress Spinner',
- nav: 'Spinner'
- },
- autocomplete: {
- title: 'Autocomplete'
- },
- datepicker: {
- title: 'Datepicker',
- nav: 'Date'
- },
- dialog: {
- title: 'Dialog'
- },
- divider: {
- title: 'Divider'
- },
- drawer: {
- title: 'Drawer'
- },
- form: {
- title: 'Forms'
- },
- icon: {
- title: 'Icon'
- },
- input: {
- title: 'Input & Textarea'
- },
- list: {
- title: 'List'
- },
- radio: {
- title: 'Radio'
- },
- select: {
- title: 'Select'
- },
- file: {
- title: 'File'
- },
- table: {
- title: 'Table'
- },
- menu: {
- title: 'Menu'
- },
- steppers: {
- title: 'Steppers'
- },
- switch: {
- title: 'Switch'
- },
- speedDial: {
- title: 'Speed Dial'
- },
- snackbar: {
- title: 'Snackbar'
- },
- subheader: {
- title: 'Subheader'
- },
- toolbar: {
- title: 'Toolbar'
- },
- tooltip: {
- title: 'Tooltip'
- },
- layout: {
- title: 'Layout'
- },
- scrollbar: {
- title: 'Scrollbar'
- },
- textSelection: {
- title: 'Text Selection'
- },
- typography: {
- title: 'Typography'
- },
- tabs: {
- title: 'Tabs'
- },
- error: {
- title: 'Not Found'
- }
- },
- components: {
- code: {
- copyMessage: 'Code copied!',
- copy: 'Copy'
- }
- },
- code: 'Code',
- example: 'Example',
- default: 'Default',
- darkTheme: 'Dark Theme',
- lightTheme: 'Light Theme'
-}
diff --git a/docs/app/i18n/en-US/components.js b/docs/app/i18n/en-US/components.js
new file mode 100644
index 000000000..e04e44b3c
--- /dev/null
+++ b/docs/app/i18n/en-US/components.js
@@ -0,0 +1,6 @@
+export default {
+ code: {
+ copyMessage: 'Code copied!',
+ copy: 'Copy'
+ }
+}
diff --git a/docs/app/i18n/en-US/index.js b/docs/app/i18n/en-US/index.js
new file mode 100644
index 000000000..2364b8d1e
--- /dev/null
+++ b/docs/app/i18n/en-US/index.js
@@ -0,0 +1,16 @@
+import components from './components'
+import pages from './pages'
+
+export default {
+ aboutMaterial: 'About Vue Material',
+ madeWith: 'Made with',
+ by: 'by',
+ code: 'Code',
+ example: 'Example',
+ default: 'Default',
+ darkTheme: 'Dark Theme',
+ lightTheme: 'Light Theme',
+
+ pages,
+ components
+}
diff --git a/docs/app/i18n/en-US/pages.js b/docs/app/i18n/en-US/pages.js
new file mode 100644
index 000000000..e2d1bb59e
--- /dev/null
+++ b/docs/app/i18n/en-US/pages.js
@@ -0,0 +1,259 @@
+export default {
+ home: {
+ title: 'Home',
+ slogan: 'Build beautiful apps with Material Design and Vue.js',
+ 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.',
+ featured: 'Full-featured',
+ featuredContent: 'Complete with dynamic themes, on demand components and all with an easy-to-use API.',
+ ecosystem: 'Ecosystem',
+ 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'
+ },
+ about: {
+ title: 'About'
+ },
+ license: {
+ title: 'License'
+ },
+ 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!',
+ installation: 'Installation',
+ npmOrYarn: 'NPM or Yarn'
+ },
+ themes: {
+ title: 'Themes'
+ },
+ themeConcepts: {
+ title: 'Themes - Concepts',
+ nav: 'Concepts'
+ },
+ themePrebuilt: {
+ title: 'Themes - Prebuilt',
+ nav: 'Prebuilt'
+ },
+ themeConfiguration: {
+ title: 'Themes - Configuration',
+ nav: 'Configuration'
+ },
+ themeAdvanced: {
+ title: 'Themes - Advanced',
+ nav: 'Advanced'
+ },
+ components: {
+ title: 'Components',
+ },
+ uiElements: {
+ title: 'UI Elements',
+ },
+ elevation: {
+ title: 'Elevation',
+ description: 'Measured from the front of one surface to the front of another, an element’s elevation indicates the distance between surfaces and the depth of its shadow.'
+ },
+ button: {
+ title: 'Button',
+ description: 'Buttons communicate the action that will occur when the user touches them.'
+ },
+ 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.',
+ 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.',
+ desc2: 'The order of {0} children is irrelevant. The component will take care of this based on the props that you pass.'
+ },
+ fixed: {
+ title: 'Fixed Toolbars',
+ desc: 'Sometimes you may need a fixed toolbar, to make all options always available. You can also combine this with the "waterfall" effect.',
+ fixedWaterfall: 'Fixed + Waterfall'
+ },
+ reveal: {
+ title: 'Reveal after scroll',
+ desc: 'When you have a large amount of content to be displayed, and you want to focus on the reading part, you can hide the toolbar temporarily and reveal it when scrolling.',
+ reveal: 'Reveal'
+ },
+ 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.',
+ flexible: 'Flexible'
+ },
+ lastRow: {
+ title: 'The last toolbar row fixed',
+ desc: 'When your page have 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 have 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!',
+ 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:',
+ 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.',
+ 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.',
+ propsDesc: 'The following properties can be applied'
+ },
+ apiToolbar: {
+ desc: 'It supports all options of {0}. Please refer to the {1} to check out the API.',
+ page: 'Toolbar page'
+ },
+ apiDrawer: {
+ desc: 'It supports all options of {0}. Please refer to the {1} to check out the API.',
+ page: 'Drawer page'
+ },
+ apiContent: {
+ desc: 'It supports all options of {0}. Please refer to the {1} to check out the API.',
+ page: 'Content page'
+ },
+ props: {
+ mdMode: 'Sets the toolbar mode. See below the detailed description of each mode.',
+ 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',
+ mdScrollbar: 'Enables the md-scrollbar class to the scrollable content. Read more about the Scrollbar documentation.'
+ }
+ },
+ avatar: {
+ title: 'Avatar',
+ description: 'Avatars can be used to represent people. When used with a specific logo, avatars can also be used to represent a brand.'
+ },
+ bottomBar: {
+ title: 'Bottom Bar',
+ description: 'Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.'
+ },
+ card: {
+ title: 'Card',
+ description: 'Cards may contain a photo, text, and a link about a single subject.'
+ },
+ chips: {
+ title: 'Chips',
+ description: 'Chips represent complex entities in small blocks, such as a contact.'
+ },
+ checkbox: {
+ title: 'Checkbox',
+ description: 'Checkboxes allow the user to select multiple options from a set.'
+ },
+ content: {
+ title: 'Content',
+ description: 'The Content surfaces that comprise applications are referred to in this spec as material, or sheets of material.'
+ },
+ emptyState: {
+ title: 'Empty State',
+ description: 'A list that doesn’t contain any items, or a search that doesn’t display any results, are examples of empty states.'
+ },
+ pickers: {
+ title: 'Pickers',
+ },
+ progress: {
+ title: 'Progress',
+ description: 'Progress indicators are visual indications of an app loading content.'
+ },
+ progressBar: {
+ title: 'Progress Bar',
+ nav: 'Bar'
+ },
+ progressSpinner: {
+ title: 'Progress Spinner',
+ nav: 'Spinner'
+ },
+ autocomplete: {
+ title: 'Autocomplete',
+ description: 'Input text can be used with autocomplete to help users who have limited literacy or who write in a foreign language.'
+ },
+ datepicker: {
+ title: 'Datepicker',
+ nav: 'Date'
+ },
+ dialog: {
+ title: 'Dialog'
+ },
+ divider: {
+ title: 'Divider'
+ },
+ drawer: {
+ title: 'Drawer'
+ },
+ form: {
+ title: 'Forms'
+ },
+ icon: {
+ title: 'Icon'
+ },
+ input: {
+ title: 'Input & Textarea'
+ },
+ list: {
+ title: 'List'
+ },
+ radio: {
+ title: 'Radio'
+ },
+ select: {
+ title: 'Select'
+ },
+ file: {
+ title: 'File'
+ },
+ table: {
+ title: 'Table'
+ },
+ menu: {
+ title: 'Menu'
+ },
+ steppers: {
+ title: 'Steppers'
+ },
+ switch: {
+ title: 'Switch'
+ },
+ speedDial: {
+ title: 'Speed Dial'
+ },
+ snackbar: {
+ title: 'Snackbar'
+ },
+ subheader: {
+ title: 'Subheader'
+ },
+ toolbar: {
+ title: 'Toolbar'
+ },
+ tooltip: {
+ title: 'Tooltip'
+ },
+ layout: {
+ title: 'Layout'
+ },
+ scrollbar: {
+ title: 'Scrollbar'
+ },
+ textSelection: {
+ title: 'Text Selection'
+ },
+ typography: {
+ title: 'Typography'
+ },
+ tabs: {
+ title: 'Tabs'
+ },
+ error: {
+ title: 'Not Found'
+ }
+}
diff --git a/docs/app/i18n/index.js b/docs/app/i18n/index.js
new file mode 100644
index 000000000..f7fe156e8
--- /dev/null
+++ b/docs/app/i18n/index.js
@@ -0,0 +1,5 @@
+import enUS from './en-US'
+
+export default {
+ enUS
+}
diff --git a/docs/app/pages/Components/App/App.vue b/docs/app/pages/Components/App/App.vue
index 2bc479eff..0f774a551 100644
--- a/docs/app/pages/Components/App/App.vue
+++ b/docs/app/pages/Components/App/App.vue
@@ -108,7 +108,7 @@
md-content
- {{ $t('pages.app.apiContent.page') }}
+ {{ $t('pages.app.apiContent.page') }}
@@ -119,7 +119,7 @@
import examples from 'docs-mixins/docsExample'
export default {
- name: 'App',
+ name: 'DocApp',
mixins: [examples],
data () {
return {
diff --git a/docs/app/pages/Components/Autocomplete/Autocomplete.vue b/docs/app/pages/Components/Autocomplete/Autocomplete.vue
index 349784e44..957d32a1d 100644
--- a/docs/app/pages/Components/Autocomplete/Autocomplete.vue
+++ b/docs/app/pages/Components/Autocomplete/Autocomplete.vue
@@ -47,8 +47,8 @@
Search Algorithms
Vue Material autocomplete comes with 2 ways of search: Fuzzy search and search by whole term. The fuzzy search tries to match the results by approximation, finding patterns inside the available options. This will help with accidental type errors and improve the results. If you think that this may be confusing, you can disable this. Example:
Datepickers use a dialog window and provide a simple way to select a single value from a pre-determined set. The component can have disabled dates and it's really easy to use.
- The datepicker dialog is disabled in Firefox, because it have a built-in Datepicker on desktop.
Datepicker
+
+
@@ -39,7 +41,7 @@
import examples from 'docs-mixins/docsExample'
export default {
- name: 'Datepicker',
+ name: 'DocDatepicker',
mixins: [examples],
data: () => ({
props: {
@@ -62,6 +64,12 @@
type: 'Boolean',
description: 'Disable the on focus event. Will open only if the user clicks on the icon.',
defaults: 'true'
+ },
+ {
+ name: 'md-override-native',
+ type: 'Boolean',
+ description: 'Override native browser pickers by changing type of input to text.',
+ defaults: 'true'
}
]
}
diff --git a/docs/app/pages/Components/Datepicker/examples/BasicDatepicker.vue b/docs/app/pages/Components/Datepicker/examples/BasicDatepicker.vue
index be51eb45d..d465b1b6a 100644
--- a/docs/app/pages/Components/Datepicker/examples/BasicDatepicker.vue
+++ b/docs/app/pages/Components/Datepicker/examples/BasicDatepicker.vue
@@ -1,6 +1,14 @@
+
+
+
+ Sunday
+ Monday
+
+ This config is global.
+
Dialogs informs users about a specific task and may contain critical information, require decisions, or involve multiple tasks. The dialog component works with any plain html content. You can have tabs inside, all form components and many more.
The component can be used with a custom markup, using the auxiliary components or with presets made by Vue Material. Those presets emulates the default Dialogs from Javascript, like confirm, alert and prompt.
-
+ To allow scrolling in content of modal you need to wrap your content in md-dialog-content component.
+
+
Dialog
@@ -68,7 +70,7 @@
import examples from 'docs-mixins/docsExample'
export default {
- name: 'Dialog',
+ name: 'DocDialog',
mixins: [examples],
data () {
return {
diff --git a/docs/app/pages/Components/Divider/Divider.vue b/docs/app/pages/Components/Divider/Divider.vue
index 60da7adfc..02b6061a9 100644
--- a/docs/app/pages/Components/Divider/Divider.vue
+++ b/docs/app/pages/Components/Divider/Divider.vue
@@ -25,7 +25,7 @@
import examples from 'docs-mixins/docsExample'
export default {
- name: 'Divider',
+ name: 'DocDivider',
mixins: [examples],
data: () => ({
classes: {
diff --git a/docs/app/pages/Components/Drawer/Drawer.vue b/docs/app/pages/Components/Drawer/Drawer.vue
index 9b363f7d0..e0285ae16 100644
--- a/docs/app/pages/Components/Drawer/Drawer.vue
+++ b/docs/app/pages/Components/Drawer/Drawer.vue
@@ -64,7 +64,7 @@
import examples from 'docs-mixins/docsExample'
export default {
- name: 'Drawer',
+ name: 'DocDrawer',
mixins: [examples],
data: () => ({
drawer: {
@@ -124,14 +124,14 @@
},
{
offset: true,
- name: 'md-permanent="full"',
+ name: 'md-persistent="full"',
type: 'String',
description: 'Make the drawer with full height. This will make the drawer hidden when closed and and pusing the content when opened.',
defaults: '-'
},
{
offset: true,
- name: 'md-permanent="mini"',
+ name: 'md-persistent="mini"',
type: 'String',
description: 'Make the drawer with full height. This will make the drawer hidden when closed and and pusing the content when opened.',
defaults: '-'
diff --git a/docs/app/pages/Components/Drawer/examples/Temporary.vue b/docs/app/pages/Components/Drawer/examples/Temporary.vue
index f53539c87..371361616 100644
--- a/docs/app/pages/Components/Drawer/examples/Temporary.vue
+++ b/docs/app/pages/Components/Drawer/examples/Temporary.vue
@@ -79,7 +79,7 @@
diff --git a/docs/app/pages/Components/Form/examples/FormValidation.vue b/docs/app/pages/Components/Form/examples/FormValidation.vue
index 81fb2fe38..69ffb19b0 100644
--- a/docs/app/pages/Components/Form/examples/FormValidation.vue
+++ b/docs/app/pages/Components/Form/examples/FormValidation.vue
@@ -1,14 +1,14 @@
+You can try Rollbar for free at [https://rollbar.com](https://codesponsor.io/t/c/93172542ee6813a9372c08c459fd1e5a/
+) 
## Demo and Documentation
diff --git a/build/docs/webpack.js b/build/docs/webpack.js
index bd3a20741..33f530ace 100644
--- a/build/docs/webpack.js
+++ b/build/docs/webpack.js
@@ -29,6 +29,7 @@ const componentExampleLoader = require.resolve('../loaders/component-example-loa
const webpackConfig = {
entry: {
app: [
+ 'babel-polyfill',
'./docs/app/index.js',
'./build/docs/offline.js'
]
diff --git a/build/loaders/component-example-loader.js b/build/loaders/component-example-loader.js
index bcf0dd262..532ce53f1 100644
--- a/build/loaders/component-example-loader.js
+++ b/build/loaders/component-example-loader.js
@@ -3,8 +3,9 @@ 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 { transform } = require('babel-core')
+const transpile = code => transform(code, {extends: resolvePath('.babelrc')}).code
const { getIndentedSource } = require('../../docs/app/mixins/codeSource')
function camelCaseToDash (str) {
diff --git a/build/local/webpack.js b/build/local/webpack.js
index 9cdc171f3..87cfb4b9f 100644
--- a/build/local/webpack.js
+++ b/build/local/webpack.js
@@ -12,6 +12,7 @@ export default {
devtool: 'cheap-module-eval-source-map',
entry: {
docs: [
+ 'babel-polyfill',
'./docs/app/index.js',
'./build/local/client'
]
diff --git a/build/new-component.js b/build/new-component.js
index 12ef61104..0a18972a5 100644
--- a/build/new-component.js
+++ b/build/new-component.js
@@ -80,6 +80,7 @@ export default Vue => {
function getDocsFile (name) {
const singleName = name.replace('Md', '')
+ const docName = name.replace('Md', 'Doc')
return `