create prop to toggle showing drawer below and lint fixes

.eslintrc.js

@@ -1,20 +1,19 @@
 module.exports = {
-    env: {
-      browser: true,
-      es2020: true
-    },
-    extends: ['plugin:vue/essential', 'standard', 'plugin:prettier/recommended'],
-    parserOptions: {
-      ecmaVersion: 11,
-      parser: '@typescript-eslint/parser',
-      sourceType: 'module'
-    },
-    plugins: ['vue', '@typescript-eslint', 'prettier'],
-    rules: {
-      'prettier/prettier': 'error',
-      'no-unused-vars': 'off',
-      '@typescript-eslint/no-unused-vars': ['error']
-    },
-    ignorePatterns: ['node_modules', 'dist']
-  };
-
+  env: {
+    browser: true,
+    es2020: true
+  },
+  extends: ['plugin:vue/essential', 'standard', 'plugin:prettier/recommended'],
+  parserOptions: {
+    ecmaVersion: 11,
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module'
+  },
+  plugins: ['vue', '@typescript-eslint', 'prettier'],
+  rules: {
+    'prettier/prettier': 'error',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': ['error']
+  },
+  ignorePatterns: ['node_modules', 'dist']
+};

src/Demo/DemoModal.vue

@@ -1,48 +1,52 @@
 <template>
-  <div :style="{width: `${width}px`}">
+  <div :style="{ width: `${width}px` }">
     <div style="position: sticky; top: 0; z-index: 1; background: white;">
-      This is a demo modal component.<br/>
+      This is a demo modal component.
+      <br />
       <button @click="$emit('close')">× Close</button>
       <button @click="$emit('answer', 'Apple')">Return "Apple"</button>
       <button @click="$emit('answer', 'Banana')">Return "Banana"</button>
-      <p><input type="checkbox" v-model="preventClosingFlag"/> Prevent closing?</p>
+      <p>
+        <input type="checkbox" v-model="preventClosingFlag" />
+        Prevent closing?
+      </p>
       <button @click="open()">Open nested</button>
-      <pre>Props = {{JSON.stringify($attrs, null, 2)}}</pre>
+      <pre>Props = {{ JSON.stringify($attrs, null, 2) }}</pre>
     </div>
     <ul>
-      <li v-for="i in 200" :key="i">Line #{{i}}</li>
+      <li v-for="i in 200" :key="i">Line #{{ i }}</li>
     </ul>
   </div>
 </template>
 
 <script>
-import Modals from '@/Modals'
+import Modals from '@/Modals';
 export default {
   name: 'DemoModal',
   props: {
     width: {
       type: Number,
-      default: 500,
+      default: 500
     }
   },
   data() {
     return {
-      preventClosingFlag: false,
-    }
+      preventClosingFlag: false
+    };
   },
   methods: {
     async beforeClose(event) {
       if (this.preventClosingFlag) {
-        event.preventDefault()
-        if (await Modals.open({layout: 'drawer', component: 'DemoModal', parent: this}) == "Banana") {
-          this.$emit('destroy')
+        event.preventDefault();
+        if ((await Modals.open({ layout: 'drawer', component: 'DemoModal', parent: this })) === 'Banana') {
+          this.$emit('destroy');
         }
       }
     },
 
     open() {
-      Modals.open({layout: 'drawer', component: 'DemoModal', default: null, parent: this})
+      Modals.open({ layout: 'drawer', component: 'DemoModal', default: null, parent: this });
     }
   }
-}
-</script>
+};
+</script>

src/Demo/Main.vue

@@ -12,34 +12,33 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import DemoModal from '@/Demo/DemoModal.vue'
-import ModalStack from '@/ModalStack.vue'
+import DemoModal from '@/Demo/DemoModal.vue';
+import ModalStack from '@/ModalStack.vue';
 import Modals from '@/Modals';
-import { ModalOptions } from '@/Types';
 
 @Component({
   components: {
     ModalStack,
     DemoModal
-  },
+  }
 })
 export default class App extends Vue {
   push(layout) {
     Modals.stack().push({
       parent: this,
       layout,
-      component: DemoModal, 
-      default: false, 
-      props: {rand: Math.random()}
-    })
+      component: DemoModal,
+      default: false,
+      props: { rand: Math.random() }
+    });
   }
 
   pop() {
-    Modals.stack().pop()
+    Modals.stack().pop();
   }
 
   clear() {
-    Modals.stack().clear()
+    Modals.stack().clear();
   }
 }
-</script>
+</script>

src/Layouts/Dialog.vue

@@ -1,43 +1,41 @@
 <template>
   <section layout="dialog" :class="classes">
     <div class="header">
-       <button class="close-button" @click="$emit('close')">×</button>
+      <button class="close-button" @click="$emit('close')">×</button>
     </div>
     <div class="content">
       <slot></slot>
     </div>
-    <div class="footer">
-
-    </div>
+    <div class="footer"></div>
   </section>
 </template>
 
 <script lang="ts">
 import { Modal } from '@/Types';
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { Component, Prop, Vue } from 'vue-property-decorator';
 
 @Component
 export default class LayoutDialog extends Vue {
   @Prop()
-  readonly stack: Modal[]
+  readonly stack: Modal[];
 
   @Prop()
-  readonly index: number
+  readonly index: number;
 
   @Prop()
-  readonly modal: Modal
+  readonly modal: Modal;
 
   get classes() {
-    return {center: true}
+    return { center: true };
   }
 }
 
 // Register component
-Vue.component('dialog', LayoutDialog)
+Vue.component('dialog', LayoutDialog);
 </script>
 
 <style lang="scss">
-section[layout=dialog] {
+section[layout='dialog'] {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -53,7 +51,7 @@ section[layout=dialog] {
   max-height: calc(100vh - 64px);
   height: min-content;
 
-  transition: transform .3s ease-in-out, opacity .3s linear;
+  transition: transform 0.3s ease-in-out, opacity 0.3s linear;
   opacity: 1;
   transform: translateY(0px) translateX(-50%);
 
@@ -62,7 +60,8 @@ section[layout=dialog] {
     transform: translateY(-50%) translateX(-50%);
   }
 
-  &.modal-enter, &.modal-leave-to {
+  &.modal-enter,
+  &.modal-leave-to {
     transform: translateY(0px) translateX(-50%) scale(0.9);
     opacity: 0;
 
@@ -101,4 +100,4 @@ section[layout=dialog] {
     flex: auto 0 0;
   }
 }
-</style>
+</style>

src/Layouts/Drawer.vue

@@ -1,36 +1,40 @@
 <template>
-  <section
-    layout="drawer"
-    :style="{'--depth': depth}">{{depth}}<slot></slot></section>
+  <section layout="drawer" :style="{ '--depth': depth }">
+    {{ depth }}
+    <slot></slot>
+  </section>
 </template>
 
 <script lang="ts">
 import { Modal } from '@/Types';
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { Component, Prop, Vue } from 'vue-property-decorator';
 
 @Component
 export default class LayoutDrawer extends Vue {
   @Prop()
-  readonly stack: Modal[]
+  readonly stack: Modal[];
 
   @Prop()
-  readonly index: number
+  readonly index: number;
 
   @Prop()
-  readonly modal: Modal
+  readonly modal: Modal;
 
   get depth() {
-    let drawers = this.stack.filter(s => s.options.layout == 'drawer')
-    let index = drawers.findIndex(m => m == this.modal)
-    return drawers.length - index - 1
+    if (this.modal.options.props.hideLastDrawer) {
+      return 0;
+    }
+    const drawers = this.stack.filter(s => s.options.layout === 'drawer');
+    const index = drawers.findIndex(m => m === this.modal);
+    return drawers.length - index - 1;
   }
 }
 
 // Register component
-Vue.component('drawer', LayoutDrawer)
+Vue.component('drawer', LayoutDrawer);
 </script>
 <style lang="scss">
-section[layout=drawer] {
+section[layout='drawer'] {
   background: white;
 
   position: absolute;
@@ -41,11 +45,12 @@ section[layout=drawer] {
 
   min-width: 300px;
 
-  transition: transform .4s ease-in-out;
-  transform: translateX(max(0px,calc(100vw - 100% - 100px * var(--depth) )));
+  transition: transform 0.4s ease-in-out;
+  transform: translateX(max(0px, calc(100vw - 100% - 100px * var(--depth))));
 
-  &.modal-enter, &.modal-leave-to {
+  &.modal-enter,
+  &.modal-leave-to {
     transform: translateX(calc(100vw));
   }
 }
-</style>
+</style>