Refactor building process

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    ['@vue/app', { "useBuiltIns": false }]
   ]
 }

package.json

@@ -1,17 +1,40 @@
 {
-  "name": "vlm",
-  "version": "0.1.0",
-  "private": true,
+  "name": "vue-last-modal",
+  "description": "Minimalistic promise-based, programmatically-opening & stacking modal plugin for Vue.js.",
+  "version": "1.0.0",
+  "main": "dist/last-modal.umd.min.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/greegus/vue-last-modal.git"
+  },
+  "keywords": [
+    "vue",
+    "modal",
+    "plugin",
+    "vuejs",
+    "dialog",
+    "stacking",
+    "promise",
+    "component",
+    "web"
+  ],
+  "author": "Matus Duchon",
+  "license": "MIT",
+  "homepage": "https://github.com/greegus/vue-last-modal#readme",
+  "bugs": {
+    "url": "https://github.com/greegus/vue-last-modal/issues"
+  },
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "build": "vue-cli-service build --target lib --name last-modal src/last-modal.js"
   },
   "dependencies": {
-    "vue": "^2.5.22"
+    "vue": "^2.5.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.1",
     "@vue/cli-service": "^3.0.1",
-    "vue-template-compiler": "^2.5.21"
+    "postcss-nested": "^4.1.1",
+    "vue-template-compiler": "^2.5.0"
   }
 }

postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
-    autoprefixer: {}
+    'autoprefixer': {},
+    'postcss-nested': {}
   }
 }

public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>vlm</title>
   </head>

src/App.vue

@@ -1,28 +1,91 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <div class="container">
+    <div class="py-3 mt-3 mb-5 border-bottom">
+      <h1>Last Modal</h1>
+    </div>
+
+    <button class="btn btn-secondary" @click="open()">
+      Open
+    </button>
+
+    <button class="btn btn-secondary" @click="openPlain()">
+      Open plain
+    </button>
+
+    <button class="btn btn-secondary" @click="alert()">
+      Alert
+    </button>
+
+    <button class="btn btn-secondary" @click="confirm()">
+      Confirm
+    </button>
+
+    <button class="btn btn-secondary" @click="openScrollable()">
+      Open scrollable
+    </button>
+  </div>
+
+  <modal-stack />
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+const MyModal = {
+  template: `
+    <modal-layout>
+      Hello there!
+    </modal-layout>
+  `
+}
 
 export default {
-  name: 'app',
-  components: {
-    HelloWorld
+  methods: {
+    open() {
+      this.$modal(MyModal)
+    },
+
+    alert() {
+      this.$alert({title: 'Alert!', message: 'Now panic and freak out!'})
+    },
+
+    confirm() {
+      this.$confirm('Do you want to confirm?')
+    },
+
+    openPlain() {
+      this.$modal({
+        template: `
+          <modal-layout plain width="auto" hide-closer>
+            Content with no paddings
+          </modal-layout>
+        `
+      })
+    },
+
+    openScrollable() {
+      this.$modal({
+        template: `
+          <modal-layout title="A modal with scrollable text" width="850" scroll closer>
+            <span v-for="i in Array.from({length: 30})" :key="i">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </span>
+          </modal-layout>
+        `
+      })
+    }
   }
-}
+};
 </script>
 
-<style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+<style lang="postcss" scoped>
+  .btn + .btn {
+    margin-left: .5rem;
+  }
 </style>
+

src/components/dialog.vue

@@ -0,0 +1,46 @@
+<template>
+    <modal-layout class="Dialog" width="480" :title="title" closer>
+        {{ message }}
+
+        <template slot="footer">
+            <div class="Dialog__buttons">
+                <span class="Dialog__buttonWrapper" v-for="(button, $index) in buttons" :key="$index">
+                    <button type="button" :class="button.className" @click="$emit('close', button.value)" >
+                        {{ button.label }}
+                    </button>
+                </span>
+            </div>
+        </template>
+    </modal-layout>
+</template>
+
+<script>
+export default {
+    props: {
+        title: String,
+        message: String,
+        buttons: Array,
+    },
+
+    mounted() {
+        const buttons = this.$el.querySelectorAll('button')
+
+        if (buttons.length) {
+            buttons[buttons.length - 1].focus()
+        }
+    }
+}
+</script>
+
+<style lang="postcss" scoped>
+.Dialog__buttons {
+  text-align: right;
+  margin-top: 1rem;
+}
+
+.Dialog__buttonWrapper + .Dialog__buttonWrapper {
+  margin-left: .5rem;
+}
+</style>
+
+