comp(MdDialog): create dialog component (#24)

* comp(MdDialog): add initial files for dialogs

* test(MdDialog): fix broken tests

* comp(MdDialog): crate initial styles for dialog

* fix(MdDialog): fix overlay not being rendered on the correct place

* test(MdDialog): add initial tests

* fix(MdDialog): fix wrong imports

* fix(MdDialog): move file to its right place

* chore: fix conflict

* fix(MdDialog): remove blurry text

* docs(Core): add global page loading

* chore: improve webpack build time by removing eslint-loader

* feat(MdDialog): create close and focus events

* feat(MdDialog): create alert, confirm, and prompt dialogs

* docs(Core): fix navigation close not triggering the correct mutation

* feat(MdDialog): create responsive full screen dialogs

* feat(MdDialog): start the creation of animation source

Author: marcosmoura

build/local/webpack.js

@@ -1,10 +1,12 @@
 import webpack from 'webpack'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
 import FriendlyErrorsPlugin from 'friendly-errors-webpack-plugin'
-import eslintFormatter from 'eslint-friendly-formatter'
 import { config, resolvePath } from '../config'
 
 const componentExampleLoader = require.resolve('./loaders/component-example-loader')
+const cssLoaders = 'vue-style-loader!css-loader'
+const scssLoaders = 'vue-style-loader!css-loader!sass-loader?outputStyle=compressed'
+const babelLoader = 'babel-loader?cacheDirectory=true'
 
 export default {
   devtool: '#cheap-module-eval-source-map',
@@ -26,38 +28,30 @@ export default {
   },
   module: {
     rules: [
-      {
-        test: /\.(js|vue)$/,
-        loader: 'eslint-loader',
-        enforce: 'pre',
-        options: {
-          fix: true,
-          formatter: eslintFormatter
-        }
-      },
       {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
           loaders: {
-            css: 'vue-style-loader!css-loader',
-            scss: 'vue-style-loader!css-loader!sass-loader?outputStyle=compressed',
+            css: cssLoaders,
+            scss: scssLoaders,
+            js: babelLoader,
             example: componentExampleLoader
           }
         }
       },
       {
         test: /\.js$/,
-        loader: 'babel-loader',
+        loader: babelLoader,
         exclude: /node_modules/
       },
       {
         test: /\.css$/,
-        use: ['vue-style-loader', 'css-loader']
+        loader: cssLoaders
       },
       {
         test: /\.scss$/,
-        use: ['vue-style-loader', 'css-loader', 'sass-loader']
+        loader: scssLoaders
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

docs/app/App.vue

@@ -1,30 +1,41 @@
 <template>
   <div class="container" :class="containerClass">
-    <main-header></main-header>
+    <main-header />
 
     <div class="container-wrapper md-layout-row" :class="containerClass">
-      <main-nav :is-splash="isSplash"></main-nav>
+      <main-nav :is-splash="isSplash" />
 
-      <router-view></router-view>
+      <keep-alive>
+        <router-view v-if="!loading" />
+      </keep-alive>
+
+      <div class="main-container" v-if="loading">
+        <code-loading />
+      </div>
     </div>
 
-    <main-footer></main-footer>
+    <main-footer />
   </div>
 </template>
 
 <script>
   import { mapState } from 'vuex'
+  import CodeLoading from './components/CodeLoading'
   import MainHeader from './template/MainHeader'
   import MainNav from './template/MainNav'
   import MainFooter from './template/MainFooter'
 
   export default {
     name: 'App',
     components: {
+      CodeLoading,
       MainHeader,
       MainNav,
       MainFooter
     },
+    data: () => ({
+      loading: false
+    }),
     computed: {
       ...mapState({
         isSplash: 'splashPage'
@@ -34,6 +45,19 @@
           splash: this.isSplash
         }
       }
+    },
+    methods: {
+      beforeRouteRender (to, from, next) {
+        this.loading = true
+        next()
+      },
+      afterRouteRender () {
+        this.loading = false
+      }
+    },
+    created () {
+      this.$router.beforeEach(this.beforeRouteRender)
+      this.$router.afterEach(this.afterRouteRender)
     }
   }
 </script>
@@ -92,4 +116,12 @@
     position: relative;
     z-index: 1;
   }
+
+  .code-loading {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
 </style>

docs/app/pages/Components/Dialog/Dialog.vue

@@ -1,15 +1,27 @@
-<example src="./examples/Example.vue" />
+<example src="./examples/Custom.vue" />
+<example src="./examples/Presets.vue" />
 
 <template>
   <page-container centered :title="$t('pages.dialog.title')">
     <div class="page-container-section">
-      <p>Lorem ipsum</p>
+      <p>Dialogs inform 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, all form components and more.</p>
+      <p>The component can be used with a custom markup, using the auxiliary components, or with presets by Vue Material. Those presets emulates the default Dialogs from Javascript, like confirm, alert and prompt.</p>
     </div>
 
     <div class="page-container-section">
       <h2>Dialog</h2>
 
-      <code-example title="Example" :component="examples['example']" />
+      <code-example title="Custom Dialog Markup" :component="examples['custom']" />
+
+      <api-item title="API - md-dialog">
+        <p>This component do not have any extra option.</p>
+      </api-item>
+    </div>
+
+    <div class="page-container-section">
+      <h2>Presets</h2>
+
+      <code-example title="Alert, Confirm and Prompt" :component="examples['presets']" />
 
       <api-item title="API - md-dialog">
         <p>This component do not have any extra option.</p>

docs/app/pages/Components/Dialog/examples/Example.vue renamed to docs/app/pages/Components/Dialog/examples/Custom.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <md-dialog :md-active.sync="showDialog" md-animate-from-source md-open-from="#custom" md-close-to="#custom">
+    <md-dialog :md-active.sync="showDialog">
       <md-dialog-title>Lorem ipsum dolor sit amet</md-dialog-title>
 
       <md-dialog-content>Nemo, nobis necessitatibus ut illo, ducimus ex.</md-dialog-content>

docs/app/pages/Components/Dialog/examples/Presets.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <div class="row">
+      <md-dialog-alert
+        :md-active.sync="alert.one"
+        md-content="Your post has been deleted!"
+        md-confirm-text="Cool!" />
+
+      <md-dialog-alert
+        :md-active.sync="alert.two"
+        md-title="Post created!"
+        md-content="Your post <strong>Material Design is awesome</strong> has been created." />
+
+      <md-button class="md-accent md-raised" @click="alert.one = true">Alert</md-button>
+      <md-button class="md-primary md-raised" @click="alert.two = true">Alert</md-button>
+    </div>
+
+    <div class="row">
+      <md-dialog-confirm
+        :md-active.sync="confirm.active"
+        md-title="Use Google's location service?"
+        md-content="Let Google help apps determine location. <br> This means sending <strong>anonymous</strong> location data to Google, even when no apps are running."
+        md-confirm-text="Agree"
+        md-cancel-text="Disagree"
+        @md-cancel="onCancel"
+        @md-confirm="onConfirm" />
+
+      <md-button class="md-primary md-raised" @click="confirm.active = true">Confirm</md-button>
+      <span v-if="confirm.value">Value: {{ confirm.value }}</span>
+    </div>
+
+    <div class="row">
+      <md-dialog-prompt
+        :md-active.sync="prompt.active"
+        v-model="prompt.value"
+        md-title="What's your name?"
+        md-input-maxlength="30"
+        md-input-placeholder="Type your name..."
+        md-confirm-text="Done" />
+
+      <md-button class="md-primary md-raised" @click="prompt.active = true">Prompt</md-button>
+      <span v-if="prompt.value">Value: {{ prompt.value }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Example',
+    data: () => ({
+      alert: {
+        one: false,
+        two: false
+      },
+      confirm: {
+        active: false,
+        value: null
+      },
+      prompt: {
+        active: false,
+        value: null
+      }
+    }),
+    methods: {
+      onConfirm () {
+        this.confirm.value = 'Agreed'
+      },
+      onCancel () {
+        this.confirm.value = 'Disagreed'
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .row {
+    display: flex;
+    align-items: center;
+  }
+</style>

docs/app/template/MainNav.vue

@@ -6,7 +6,7 @@
       </md-content>
     </transition>
 
-    <md-drawer md-fixed :md-visible.sync="menuVisible" @md-closed="hideMenu">
+    <md-drawer md-fixed :md-visible.sync="isMenuVisible" @md-closed="hideMenu">
       <md-toolbar class="md-transparent" md-elevation="0">
         <logo-vue-material class="md-icon" animated :blending="false" />
         <span class="md-title">Vue material</span>
@@ -29,12 +29,20 @@ export default {
   components: {
     MainNavContent
   },
+  data: () => ({
+    isMenuVisible: false
+  }),
   computed: {
     ...mapState({
       isSplash: 'splashPage',
       menuVisible: 'menuVisible'
     })
   },
+  watch: {
+    menuVisible (isMenuVisible) {
+      this.isMenuVisible = isMenuVisible
+    }
+  },
   methods: {
     ...mapMutations({
       hideMenu: types.HIDE_MENU

package.json

@@ -68,8 +68,6 @@
     "cz-conventional-changelog": "^2.0.0",
     "eslint": "^4.8.0",
     "eslint-config-standard": "^10.2.1",
-    "eslint-friendly-formatter": "^3.0.0",
-    "eslint-loader": "^1.9.0",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-jest": "^21.2.0",
     "eslint-plugin-node": "^5.2.0",

src/components/MdDialog/MdDialog.test.js

@@ -7,10 +7,3 @@ test('should render the dialog', async () => {
 
   expect(wrapper.hasClass('md-dialog')).toBe(true)
 })
-
-test('should render the theme class', async () => {
-  const template = '<md-dialog md-theme="alt"></md-dialog>'
-  const wrapper = await mountTemplate(MdDialog, template)
-
-  expect(wrapper.hasClass('md-theme-alt')).toBe(true)
-})