diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md new file mode 100644 index 0000000..4525366 --- /dev/null +++ b/.github/CONTRIBUTING.md @@ -0,0 +1,64 @@ +# Vue Material Contributing Guide + +Before submitting your contribution please read the guidelines. + +- [Issue Reporting Guidelines](#issue-reporting-guidelines) +- [Pull Request Guidelines](#pull-request-guidelines) +- [Development Setup](#development-setup) + +## Issue Reporting Guidelines + +- 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/marcosmoura/vue-material/milestones) or on [Projects](https://github.com/marcosmoura/vue-material/projects). + +- Only create issues for the newest version. For now. Until 1.0.0. + +- 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 try to explain how you fixed it. It could be useful for somebody else. :) + +## Pull Request Guidelines + +- The `master` branch is basically just a snapshot of the latest stable release. All development should be done in dedicated branches. **Do not submit PRs against the `master` branch.** + +- Work in the `src` or `docs` folder and **DO NOT** add `dist` in the commits. + +- Make small commits as you work on the PR. They will be automatically squashed before merging. + +- Provide convincing reason to add a new feature. Ideally you should open a suggestion/request issue first and have it greenlighted before working on it. + +- If fixing a bug: + - If you are resolving a special issue, add the GitHub ID to your commit. E.g. `(fix something really ugly #xxx)` + - Provide detailed description of the bug in the PR. + +## Development Setup + +You will need [Node.js](http://nodejs.org) **version 6+** + +After cloning the repo, run: + +``` bash +$ npm install +``` + +### Commonly used NPM scripts + +``` bash +### Start dev server with hot reload +npm run dev + +### Check for errors +npm run lint + +### Build everything +npm run build + +### Build docs only +npm run build:docs + +### Build lib only +npm run build:lib +``` + +The other tasks on package.json **SHOULD NOT** be executed. diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md new file mode 100644 index 0000000..2a75dc4 --- /dev/null +++ b/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,45 @@ + + + + +### Steps to reproduce + +### Which browser? + + +### What is expected? + +### What is actually happening? + + +### Reproduction Link + + diff --git a/README.md b/README.md index 1c5981b..9ba773d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,18 @@ -# Vue.js Material +

+ + + +

-> Material Design for Vue.js +

Material Design for Vue.js

+ +

+ Downloads + + Version + + License
+

Vue Material is lightweight framework built exactly according to the Material Design specs. It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to modern Web Browsers through Vue 2.0. Build powerful and well-designed web apps that can can fit on every screen. You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API. @@ -9,7 +21,7 @@ Vue Material is lightweight framework built exactly according to the @@ -92,25 +104,9 @@ Apply your theme using v-md-theme directive: ## Changelog Changelog -## Build Setup +## Contributing -``` bash -### Install dependencies -npm install -yarn - -### Start dev server with hot reload -npm run dev - -### Build everything -npm run build - -### Build docs only -npm run build:docs - -### Build lib only -npm run build:lib -``` +Please make sure to read the [Contributing Guide](https://github.com/marcosmoura/vue-material/blob/master/.github/CONTRIBUTING.md) before making a pull request. ## Credits and Thanks * This library aims to delivery components using almost the same API of Angular Material diff --git a/docs/README.md b/docs/README.md deleted file mode 100644 index 249cf86..0000000 --- a/docs/README.md +++ /dev/null @@ -1,27 +0,0 @@ -# Vue.js Material Docs - -> Material Design for Vue.js - -## Build Setup - -``` bash -### install dependencies -npm install - -### serve with hot reload at localhost:8080 -npm run dev - -### build for production with minification -npm run build - -### run unit tests -npm run unit - -### run e2e tests -npm run e2e - -### run all tests -npm test -``` - -For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). diff --git a/docs/src/App.vue b/docs/src/App.vue index ecc83c9..f81d4c6 100644 --- a/docs/src/App.vue +++ b/docs/src/App.vue @@ -47,6 +47,10 @@ Checkbox + + Dialog + + Icon diff --git a/docs/src/index.js b/docs/src/index.js index 88fb03f..06550a9 100644 --- a/docs/src/index.js +++ b/docs/src/index.js @@ -37,18 +37,18 @@ let router = new VueRouter({ }); let Docs = Vue.component('app', App); -let handleSectionTheme = (route) => { - if (route.name.indexOf('introduction') >= 0) { +let handleSectionTheme = (currentRoute) => { + if (currentRoute.name.indexOf('introduction') >= 0) { Docs.theme = 'blue'; - } else if (route.name.indexOf('components') >= 0) { + } else if (currentRoute.name.indexOf('components') >= 0) { Docs.theme = 'indigo'; - } else if (route.name.indexOf('themes') >= 0) { + } else if (currentRoute.name.indexOf('themes') >= 0) { Docs.theme = 'teal'; - } else if (route.name.indexOf('ui-elements') >= 0) { + } else if (currentRoute.name.indexOf('ui-elements') >= 0) { Docs.theme = 'blue-grey'; - } else if (route.name.indexOf('changelog') >= 0) { + } else if (currentRoute.name.indexOf('changelog') >= 0) { Docs.theme = 'orange'; - } else if (route.name.indexOf('about') >= 0) { + } else if (currentRoute.name.indexOf('about') >= 0) { Docs.theme = 'green'; } else { Docs.theme = 'default'; @@ -62,7 +62,7 @@ Docs = new Docs({ handleSectionTheme(router.currentRoute); -router.afterEach((currentRoute) => { +router.beforeEach((to, from, next) => { let mainContent = document.querySelector('.main-content'); if (mainContent) { @@ -71,5 +71,7 @@ router.afterEach((currentRoute) => { Docs.closeSidenav(); - handleSectionTheme(currentRoute); + handleSectionTheme(to); + + next(); }); diff --git a/docs/src/pages/components/Dialog.vue b/docs/src/pages/components/Dialog.vue new file mode 100644 index 0000000..d6eee09 --- /dev/null +++ b/docs/src/pages/components/Dialog.vue @@ -0,0 +1,135 @@ + + + + + diff --git a/docs/src/routes.js b/docs/src/routes.js index edf8fbe..11150a0 100644 --- a/docs/src/routes.js +++ b/docs/src/routes.js @@ -12,6 +12,7 @@ import Buttons from './pages/components/Buttons'; import ButtonToggle from './pages/components/ButtonToggle'; import Card from './pages/components/Card'; import Checkbox from './pages/components/Checkbox'; +import Dialog from './pages/components/Dialog'; import Icon from './pages/components/Icon'; import Input from './pages/components/Input'; import List from './pages/components/List'; @@ -95,6 +96,11 @@ const components = [ name: 'components:checkbox', component: Checkbox }, + { + path: '/components/dialog', + name: 'components:dialog', + component: Dialog + }, { path: '/components/icon', name: 'components:icon', diff --git a/src/components/mdBackdrop/index.js b/src/components/mdBackdrop/index.js new file mode 100644 index 0000000..f16326e --- /dev/null +++ b/src/components/mdBackdrop/index.js @@ -0,0 +1,5 @@ +import mdBackdrop from './mdBackdrop.vue'; + +export default function install(Vue) { + Vue.component('md-backdrop', Vue.extend(mdBackdrop)); +} diff --git a/src/components/mdBackdrop/mdBackdrop.scss b/src/components/mdBackdrop/mdBackdrop.scss new file mode 100644 index 0000000..8bd0e8a --- /dev/null +++ b/src/components/mdBackdrop/mdBackdrop.scss @@ -0,0 +1,24 @@ +@import '../../core/stylesheets/variables.scss'; + +.md-backdrop { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 99; + pointer-events: none; + background-color: rgba(#000, .54); + transform: translate3d(0, 0, 0); + opacity: 0; + transition: $swift-ease-in-out; + + &.md-active { + opacity: 1; + pointer-events: auto; + } + + &.md-transparent { + background: none; + } +} diff --git a/src/components/mdBackdrop/mdBackdrop.vue b/src/components/mdBackdrop/mdBackdrop.vue new file mode 100644 index 0000000..d72dcac --- /dev/null +++ b/src/components/mdBackdrop/mdBackdrop.vue @@ -0,0 +1,15 @@ + + + + + diff --git a/src/components/mdDialog/index.js b/src/components/mdDialog/index.js new file mode 100644 index 0000000..7917a1b --- /dev/null +++ b/src/components/mdDialog/index.js @@ -0,0 +1,22 @@ +import mdDialog from './mdDialog.vue'; +import mdDialogTitle from './mdDialogTitle.vue'; +import mdDialogContent from './mdDialogContent.vue'; +import mdDialogActions from './mdDialogActions.vue'; +import mdDialogAlert from './presets/mdDialogAlert.vue'; +import mdDialogConfirm from './presets/mdDialogConfirm.vue'; +import mdDialogPrompt from './presets/mdDialogPrompt.vue'; +import mdDialogTheme from './mdDialog.theme'; + +export default function install(Vue) { + Vue.component('md-dialog', Vue.extend(mdDialog)); + Vue.component('md-dialog-title', Vue.extend(mdDialogTitle)); + Vue.component('md-dialog-content', Vue.extend(mdDialogContent)); + Vue.component('md-dialog-actions', Vue.extend(mdDialogActions)); + + /* Presets */ + Vue.component('md-dialog-alert', Vue.extend(mdDialogAlert)); + Vue.component('md-dialog-confirm', Vue.extend(mdDialogConfirm)); + Vue.component('md-dialog-prompt', Vue.extend(mdDialogPrompt)); + + Vue.material.styles.push(mdDialogTheme); +} diff --git a/src/components/mdDialog/mdDialog.scss b/src/components/mdDialog/mdDialog.scss new file mode 100644 index 0000000..1918f40 --- /dev/null +++ b/src/components/mdDialog/mdDialog.scss @@ -0,0 +1,102 @@ +@import '../../core/stylesheets/variables.scss'; + +.md-dialog-container { + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + pointer-events: none; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 108; + + &.md-active { + pointer-events: auto; + + .md-dialog { + opacity: 1 !important; + transform: scale(1) !important; + transition: $swift-ease-out; + transition-property: opacity, transform; + } + } +} + +.md-dialog-backdrop { + position: fixed; + z-index: 109; +} + +.md-dialog { + min-width: 280px; + max-width: 80%; + max-height: 80%; + overflow: hidden; + position: relative; + z-index: 110; + outline: none; + border-radius: 2px; + opacity: 0; + box-shadow: $material-shadow-14dp; + transform: scale(.9, .85); + transform-origin: top center; + transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function, + transform $swift-ease-out-duration .05s $swift-ease-out-timing-function; + will-change: opacity, transform; + + &.md-transition-off { + transition: none !important; + } + + p { + margin: 0; + } +} + +.md-dialog-title { + margin-bottom: 20px; + padding: 24px 24px 0; +} + +.md-dialog-content { + padding: 0 24px 24px; + + &:first-child { + padding-top: 24px; + } + + p:first-child:not(:only-child) { + margin-top: 0; + } + + p:last-child:not(:only-child) { + margin-bottom: 0; + } +} + +.md-dialog-body { + margin: 0 -24px; + padding: 0 24px; + overflow: auto; +} + +.md-dialog-actions { + min-height: 52px; + padding: 8px 8px 8px 24px; + display: flex; + justify-content: flex-end; + align-items: center; + + .md-button { + min-width: 64px; + margin: 0; + padding: 0 8px; + + + .md-button { + margin-left: 8px; + } + } +} diff --git a/src/components/mdDialog/mdDialog.theme b/src/components/mdDialog/mdDialog.theme new file mode 100644 index 0000000..a6f0547 --- /dev/null +++ b/src/components/mdDialog/mdDialog.theme @@ -0,0 +1,7 @@ +.THEME_NAME { + .md-dialog, + &.md-dialog { + background-color: #{'BACKGROUND-COLOR-A100'}; + color: #{'BACKGROUND-CONTRAST'}; + } +} diff --git a/src/components/mdDialog/mdDialog.vue b/src/components/mdDialog/mdDialog.vue new file mode 100644 index 0000000..2e7519c --- /dev/null +++ b/src/components/mdDialog/mdDialog.vue @@ -0,0 +1,145 @@ + + + + + diff --git a/src/components/mdDialog/mdDialogActions.vue b/src/components/mdDialog/mdDialogActions.vue new file mode 100644 index 0000000..fe64b00 --- /dev/null +++ b/src/components/mdDialog/mdDialogActions.vue @@ -0,0 +1,5 @@ + diff --git a/src/components/mdDialog/mdDialogContent.vue b/src/components/mdDialog/mdDialogContent.vue new file mode 100644 index 0000000..0f957d8 --- /dev/null +++ b/src/components/mdDialog/mdDialogContent.vue @@ -0,0 +1,5 @@ + diff --git a/src/components/mdDialog/mdDialogTitle.vue b/src/components/mdDialog/mdDialogTitle.vue new file mode 100644 index 0000000..7f516fc --- /dev/null +++ b/src/components/mdDialog/mdDialogTitle.vue @@ -0,0 +1,5 @@ + diff --git a/src/components/mdDialog/presets/mdDialogAlert.vue b/src/components/mdDialog/presets/mdDialogAlert.vue new file mode 100644 index 0000000..7c514e4 --- /dev/null +++ b/src/components/mdDialog/presets/mdDialogAlert.vue @@ -0,0 +1,51 @@ + + + diff --git a/src/components/mdDialog/presets/mdDialogConfirm.vue b/src/components/mdDialog/presets/mdDialogConfirm.vue new file mode 100644 index 0000000..af1dfff --- /dev/null +++ b/src/components/mdDialog/presets/mdDialogConfirm.vue @@ -0,0 +1,56 @@ + + + diff --git a/src/components/mdDialog/presets/mdDialogPrompt.vue b/src/components/mdDialog/presets/mdDialogPrompt.vue new file mode 100644 index 0000000..9976177 --- /dev/null +++ b/src/components/mdDialog/presets/mdDialogPrompt.vue @@ -0,0 +1,80 @@ + + + diff --git a/src/components/mdList/mdList.scss b/src/components/mdList/mdList.scss index e04cbe1..779d8cb 100644 --- a/src/components/mdList/mdList.scss +++ b/src/components/mdList/mdList.scss @@ -276,6 +276,7 @@ position: relative; z-index: 1; transform: translate3D(0, 0, 0); + will-change: margin-bottom; transition: $swift-ease-in-out; &.md-transition-off { diff --git a/src/components/mdMenu/mdMenu.scss b/src/components/mdMenu/mdMenu.scss index a0a70c7..8cb98ab 100644 --- a/src/components/mdMenu/mdMenu.scss +++ b/src/components/mdMenu/mdMenu.scss @@ -18,7 +18,9 @@ $menu-base-width: 56px; z-index: 120; background-color: #fff; border-radius: 2px; - filter: drop-shadow(0 1px 1px rgba(#000, $shadow-key-umbra-opacity)) drop-shadow(0 2px 2px rgba(#000, $shadow-key-penumbra-opacity)) drop-shadow(0 1px 1px rgba(#000, $shadow-ambient-shadow-opacity)); + filter: drop-shadow(0 1px 1px rgba(#000, $shadow-key-umbra-opacity)) + drop-shadow(0 2px 2px rgba(#000, $shadow-key-penumbra-opacity)) + drop-shadow(0 1px 1px rgba(#000, $shadow-ambient-shadow-opacity)); opacity: 0; transition: width $swift-ease-out-duration $swift-ease-out-timing-function, opacity .25s $swift-ease-in-timing-function, diff --git a/src/components/mdMenu/mdMenu.vue b/src/components/mdMenu/mdMenu.vue index 282ccfa..e3fcb57 100644 --- a/src/components/mdMenu/mdMenu.vue +++ b/src/components/mdMenu/mdMenu.vue @@ -1,6 +1,8 @@ @@ -69,11 +71,6 @@ addNewDirectionMenuContentClass(direction) { this.menuContent.classList.add('md-direction-' + direction.replace(' ', '-')); }, - closeOnOffClick(event) { - if (!this.$el.contains(event.target) && !this.menuContent.contains(event.target)) { - this.close(); - } - }, getBottomRightPos() { let menuTriggerRect = this.menuTrigger.getBoundingClientRect(); let position = { @@ -148,12 +145,12 @@ window.requestAnimationFrame(this.calculateMenuContentPos); }, open() { - if (this.$root.$el.contains(this.menuContent)) { - this.$root.$el.removeChild(this.menuContent); + if (this.rootElement.contains(this.menuContent)) { + this.rootElement.removeChild(this.menuContent); } - this.$root.$el.appendChild(this.menuContent); - document.addEventListener('click', this.closeOnOffClick); + this.rootElement.appendChild(this.menuContent); + this.rootElement.appendChild(this.backdropElement); window.addEventListener('resize', this.recalculateOnResize); this.calculateMenuContentPos(); @@ -164,12 +161,11 @@ this.active = true; }, close() { - let menuContent = this.menuContent; let close = (event) => { - if (menuContent && event.target === menuContent) { + if (this.menuContent && event.target === this.menuContent) { let activeRipple = this.menuContent.querySelector('.md-ripple.md-active'); - menuContent.removeEventListener(transitionEndEventName, close); + this.menuContent.removeEventListener(transitionEndEventName, close); this.menuTrigger.focus(); this.active = false; @@ -177,8 +173,8 @@ activeRipple.classList.remove('md-active'); } - this.$root.$el.removeChild(menuContent); - document.removeEventListener('click', this.closeOnOffClick); + this.rootElement.removeChild(this.menuContent); + this.rootElement.removeChild(this.backdropElement); window.removeEventListener('resize', this.recalculateOnResize); } }; @@ -195,13 +191,18 @@ } }, mounted() { - this.menuTrigger = this.$el.querySelector('[md-menu-trigger]'); - this.menuContent = this.$el.querySelector('.md-menu-content'); - this.validateMenu(); - this.addNewSizeMenuContentClass(this.mdSize); - this.addNewDirectionMenuContentClass(this.mdDirection); - this.menuContent.parentNode.removeChild(this.menuContent); - this.menuTrigger.addEventListener('click', this.toggle); + this.$nextTick(() => { + this.rootElement = this.$root.$el; + this.menuTrigger = this.$el.querySelector('[md-menu-trigger]'); + this.menuContent = this.$el.querySelector('.md-menu-content'); + this.backdropElement = this.$refs.backdrop.$el; + this.validateMenu(); + this.addNewSizeMenuContentClass(this.mdSize); + this.addNewDirectionMenuContentClass(this.mdDirection); + this.$el.removeChild(this.$refs.backdrop.$el); + this.menuContent.parentNode.removeChild(this.menuContent); + this.menuTrigger.addEventListener('click', this.toggle); + }); } }; diff --git a/src/components/mdSidenav/mdSidenav.scss b/src/components/mdSidenav/mdSidenav.scss index cee3c3d..f7aa741 100644 --- a/src/components/mdSidenav/mdSidenav.scss +++ b/src/components/mdSidenav/mdSidenav.scss @@ -3,17 +3,17 @@ .md-sidenav { &.md-left .md-sidenav-content { left: 0; - transform: translate3d(-100%, 0, 0); + transform: translate3D(-100%, 0, 0); } &.md-right .md-sidenav-content { right: 0; - transform: translate3d(100%, 0, 0); + transform: translate3D(100%, 0, 0); } &.md-fixed { .md-sidenav-content, - .md-backdrop { + .md-sidenav-backdrop { position: fixed; } } @@ -26,6 +26,9 @@ z-index: 100; pointer-events: none; overflow: auto; + -webkit-overflow-scrolling: touch; + box-shadow: $material-shadow-16dp; + will-change: transform; transition: $swift-ease-out; } @@ -38,8 +41,8 @@ z-index: 99; pointer-events: none; background-color: rgba(#000, .54); - transform: translate3d(0, 0, 0); opacity: 0; + will-change: opacity; transition: $swift-ease-in-out; } } @@ -47,11 +50,10 @@ .md-sidenav.md-active { .md-sidenav-content { pointer-events: auto; - box-shadow: $material-shadow-16dp; - transform: translate3d(0, 0, 0); + transform: translate3D(0, 0, 0); } - .md-backdrop { + .md-sidenav-backdrop { opacity: 1; pointer-events: auto; } diff --git a/src/components/mdSidenav/mdSidenav.vue b/src/components/mdSidenav/mdSidenav.vue index 9784e9b..ab54b08 100644 --- a/src/components/mdSidenav/mdSidenav.vue +++ b/src/components/mdSidenav/mdSidenav.vue @@ -4,7 +4,7 @@ -
+ diff --git a/src/components/mdTable/mdTableEdit.vue b/src/components/mdTable/mdTableEdit.vue index 4226a2e..242d0f4 100644 --- a/src/components/mdTable/mdTableEdit.vue +++ b/src/components/mdTable/mdTableEdit.vue @@ -22,7 +22,7 @@