Init dialog

docs/src/App.vue

@@ -47,6 +47,10 @@
                   <router-link exact to="/components/checkbox">Checkbox</router-link>
                 </md-list-item>
 
+                <md-list-item class="md-inset">
+                  <router-link exact to="/components/dialog">Dialog</router-link>
+                </md-list-item>
+
                 <md-list-item class="md-inset">
                   <router-link exact to="/components/icon">Icon</router-link>
                 </md-list-item>

docs/src/pages/components/Dialog.vue

@@ -0,0 +1,50 @@
+<template>
+  <demo-page label="Components - Dialog">
+    <div slot="examples">
+      <demo-example label="Default" size="2">
+        <md-dialog ref="dialog">
+          <div class="md-dialog-content">
+            <form>
+              <md-input-container>
+                <label>Test</label>
+                <md-input></md-input>
+              </md-input-container>
+            </form>
+          </div>
+
+          <md-button class="md-primary md-raised" @click="closeDialog">Close</md-button>
+        </md-dialog>
+
+        <md-button class="md-primary md-raised" @click="openDialog">Open</md-button>
+      </demo-example>
+    </div>
+
+    <div slot="code">
+      <demo-example label="Default">
+        <code-block lang="xml">
+        </code-block>
+      </demo-example>
+    </div>
+
+    <div slot="api">
+
+    </div>
+  </demo-page>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
+
+<script>
+  export default {
+    methods: {
+      openDialog() {
+        this.$refs.dialog.open();
+      },
+      closeDialog() {
+        this.$refs.dialog.close();
+      }
+    }
+  };
+</script>

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',

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));
+}

src/components/mdBackdrop/mdBackdrop.scss

@@ -0,0 +1,20 @@
+@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;
+  }
+}

src/components/mdBackdrop/mdBackdrop.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="md-backdrop" @click="close" @keyup.esc="close"></div>
+</template>
+
+<style lang="scss" src="./mdBackdrop.scss"></style>
+
+<script>
+  export default {
+    methods: {
+      close() {
+        this.$emit('close');
+      }
+    }
+  };
+</script>

src/components/mdDialog/index.js

@@ -0,0 +1,8 @@
+import mdDialog from './mdDialog.vue';
+import mdDialogTheme from './mdDialog.theme';
+
+export default function install(Vue) {
+  Vue.component('md-dialog', Vue.extend(mdDialog));
+
+  Vue.material.styles.push(mdDialogTheme);
+}

src/components/mdDialog/mdDialog.scss

@@ -0,0 +1,44 @@
+@import '../../core/stylesheets/variables.scss';
+
+.md-dialog {
+  min-width: 240px;
+  max-width: 80%;
+  max-height: 80%;
+  overflow: hidden;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 110;
+  outline: none;
+  border-radius: 2px;
+  opacity: 0;
+  filter: drop-shadow(0 7px 8px rgba(#000, $shadow-key-umbra-opacity))
+          drop-shadow(0 12px 17px rgba(#000, $shadow-key-penumbra-opacity))
+          drop-shadow(0 5px 22px rgba(#000, $shadow-ambient-shadow-opacity));
+  clip-path: inset(0 7% 12% 7%);
+  transform: translate3D(-50%, -60%, 0) scale(.85);
+  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
+              opacity .3s $swift-ease-out-timing-function,
+              clip-path .3s .1s $swift-ease-out-timing-function;
+  transition-delay: 0;
+
+  &.md-active {
+    pointer-events: auto;
+    opacity: 1;
+    clip-path: inset(-22px -22px -22px -22px);
+    transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
+                opacity .5s $swift-ease-out-timing-function,
+                clip-path .4s .1s $swift-ease-out-timing-function;
+    transition-delay: 0;
+    transform: translate3D(-50%, -50%, 0) scale(1);
+  }
+}
+
+.md-dialog-content {
+  padding: 24px;
+}
+
+.md-dialog-backdrop {
+  position: fixed;
+  z-index: 109;
+}

src/components/mdDialog/mdDialog.theme

@@ -0,0 +1,7 @@
+.THEME_NAME {
+  .md-dialog,
+  &.md-dialog {
+    background-color: #{'BACKGROUND-COLOR-A100'};
+    color: #{'BACKGROUND-CONTRAST'};
+  }
+}

src/components/mdDialog/mdDialog.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="md-dialog" tabindex="0">
+    <slot></slot>
+
+    <md-backdrop class="md-dialog-backdrop" ref="backdrop" @close="close"></md-backdrop>
+  </div>
+</template>
+
+<style lang="scss" src="./mdDialog.scss"></style>
+
+<script>
+  import transitionEndEventName from '../../core/utils/transitionEndEventName';
+
+  export default {
+    data: () => ({
+      active: false
+    }),
+    methods: {
+      open() {
+        this.close();
+        this.$root.$el.appendChild(this.dialogElement);
+        this.$root.$el.appendChild(this.backdropElement);
+
+        getComputedStyle(this.dialogElement).opacity;
+        this.dialogElement.focus();
+        this.dialogElement.classList.add('md-active');
+        this.backdropElement.classList.add('md-active');
+      },
+      close() {
+        if (this.$root.$el.contains(this.dialogElement)) {
+          let cleanElement = () => {
+            this.dialogElement.removeEventListener(transitionEndEventName, close);
+            this.$root.$el.removeChild(this.dialogElement);
+            this.$root.$el.removeChild(this.backdropElement);
+          };
+
+          this.dialogElement.classList.remove('md-active');
+          this.backdropElement.classList.remove('md-active');
+          this.dialogElement.addEventListener(cleanElement, close);
+        }
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.rootElement = this.$root.$el;
+        this.dialogElement = this.$el;
+        this.backdropElement = this.$refs.backdrop.$el;
+        this.$el.parentNode.removeChild(this.$el);
+        this.$el.removeChild(this.$refs.backdrop.$el);
+      });
+    }
+  };
+</script>

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,

src/components/mdSidenav/mdSidenav.scss

@@ -13,7 +13,7 @@
 
   &.md-fixed {
     .md-sidenav-content,
-    .md-backdrop {
+    .md-sidenav-backdrop {
       position: fixed;
     }
   }
@@ -28,20 +28,6 @@
     overflow: auto;
     transition: $swift-ease-out;
   }
-
-  .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-sidenav.md-active {
@@ -51,7 +37,7 @@
     transform: translate3d(0, 0, 0);
   }
 
-  .md-backdrop {
+  .md-sidenav-backdrop {
     opacity: 1;
     pointer-events: auto;
   }

src/components/mdSidenav/mdSidenav.vue

@@ -4,7 +4,7 @@
       <slot></slot>
     </div>
 
-    <div class="md-backdrop" @click="close"></div>
+    <md-backdrop class="md-sidenav-backdrop" @close="close"></md-backdrop>
   </div>
 </template>
 

src/index.js

@@ -1,10 +1,12 @@
 import mdCore from './core';
 import mdAvatar from './components/mdAvatar';
+import mdBackdrop from './components/mdBackdrop';
 import mdBottomBar from './components/mdBottomBar';
 import mdButton from './components/mdButton';
 import mdButtonToggle from './components/mdButtonToggle';
-import mdCheckbox from './components/mdCheckbox';
 import mdCard from './components/mdCard';
+import mdCheckbox from './components/mdCheckbox';
+import mdDialog from './components/mdDialog';
 import mdDivider from './components/mdDivider';
 import mdIcon from './components/mdIcon';
 import mdInputContainer from './components/mdInputContainer';
@@ -24,11 +26,13 @@ import mdWhiteframe from './components/mdWhiteframe';
 let options = {
   mdCore,
   mdAvatar,
+  mdBackdrop,
   mdBottomBar,
   mdButton,
   mdButtonToggle,
-  mdCheckbox,
   mdCard,
+  mdCheckbox,
+  mdDialog,
   mdDivider,
   mdIcon,
   mdInputContainer,