Merge pull request #70 from kouts/dev

Added playground

.gitignore

@@ -21,4 +21,5 @@ yarn-error.log*
 *.sw?
 
 # Do not ignore
-!/docs/.vuepress/public/
+!/docs/.vuepress/public/
+!/playground/public/

package.json

@@ -14,6 +14,7 @@
   "main": "dist/vue-modal.umd.min.js",
   "module": "dist/vue-modal.es.js",
   "scripts": {
+    "playground": "vue-cli-service serve",
     "test:unit": "vue-cli-service test:unit",
     "test:unit-coverage": "vue-cli-service test:unit --coverage && make-coverage-badge",
     "watch": "vuepress dev docs",
@@ -62,4 +63,4 @@
     "vuepress": "^1.9.7",
     "vuepress-plugin-vue-example": "^1.1.7"
   }
-}
+}

playground/App.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="app">
+    <component :is="layout">
+      <router-view />
+    </component>
+  </div>
+</template>
+
+<script>
+import '@playground/scss/app.scss'
+
+export default {
+  computed: {
+    layout() {
+      return `layout-${this.$route.meta.layout || 'default'}`
+    }
+  }
+}
+</script>

playground/components/HelloWorld.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="row">
+    <div class="col text-center">
+      <h1 class="msg">{{ msg }}</h1>
+      <p>
+        A project setup using vue-cli, created to easily scaffold new Vue.js projects.<br />
+        Find out more at
+        <a class="custom" href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+h1.msg {
+  color: $gray-900;
+}
+</style>

playground/layouts/default/Default.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="default-page-wrapper">
+    <default-nav />
+    <slot />
+    <default-footer />
+  </div>
+</template>
+
+<script>
+import DefaultFooter from './DefaultFooter.vue'
+import DefaultNav from './DefaultNav.vue'
+
+export default {
+  name: 'LayoutsDefault',
+  components: {
+    DefaultNav,
+    DefaultFooter
+  }
+}
+</script>
+
+<style lang="scss">
+/* Sticky footer */
+html {
+  position: relative;
+  min-height: 100%;
+}
+body {
+  margin-bottom: 60px; /* Margin bottom equal to footer height */
+}
+.default-page-wrapper {
+  padding: 5em 0em 3em 0em;
+}
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 60px; /* Footer height */
+  line-height: 60px; /* Vertically center the text */
+  background-color: $gray-100;
+  text-align: center;
+}
+</style>

playground/layouts/default/DefaultFooter.vue

@@ -0,0 +1,7 @@
+<template>
+  <footer class="footer">
+    <div class="container">
+      <span>Developed by</span> <a href="https://github.com/kouts" target="_blank" rel="noopener">@kouts</a>
+    </div>
+  </footer>
+</template>

playground/layouts/default/DefaultNav.vue

@@ -0,0 +1,48 @@
+<template>
+  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
+    <div class="container">
+      <router-link to="/" class="navbar-brand" @click.native="collapseNavbar">Playground</router-link>
+      <button
+        :class="['navbar-toggler', !navbarExpanded && 'collapsed']"
+        type="button"
+        aria-controls="navbarDefault"
+        :aria-expanded="navbarExpanded"
+        aria-label="Toggle navigation"
+        @click="toggleNavbar"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div id="navbarDefault" :class="['collapse navbar-collapse', navbarExpanded && 'show']">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item">
+            <router-link to="/" exact exact-active-class="active" class="nav-link" @click.native="collapseNavbar">
+              Example1
+            </router-link>
+          </li>
+          <li class="nav-item">
+            <router-link to="/example2" class="nav-link" @click.native="collapseNavbar">Example2</router-link>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      navbarExpanded: false
+    }
+  },
+  methods: {
+    toggleNavbar() {
+      this.navbarExpanded = !this.navbarExpanded
+    },
+    collapseNavbar() {
+      this.navbarExpanded = false
+    }
+  }
+}
+</script>

playground/main.js

@@ -0,0 +1,14 @@
+import App from './App.vue'
+import Modal from '@/Modal.vue'
+import Vue from 'vue'
+import router from './router'
+
+Vue.config.productionTip = false
+
+// eslint-disable-next-line vue/multi-word-component-names
+Vue.component('Modal', Modal)
+
+new Vue({
+  router,
+  render: (h) => h(App)
+}).$mount('#app')

playground/public/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title>
+    <%= htmlWebpackPlugin.options.title %>
+  </title>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>

playground/router/index.js

@@ -0,0 +1,37 @@
+import Default from '@playground/layouts/default/Default.vue'
+import Example1 from '../views/Example1.vue'
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.component('LayoutDefault', Default)
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'Example1',
+    component: Example1,
+    meta: {
+      layout: 'default'
+    }
+  },
+  {
+    path: '/example2',
+    name: 'Example2',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "example2" */ '../views/Example2.vue'),
+    meta: {
+      layout: 'default'
+    }
+  }
+]
+
+const router = new VueRouter({
+  linkActiveClass: 'active',
+  routes
+})
+
+export default router

playground/scss/app.scss

@@ -0,0 +1,36 @@
+// Bootstrap source files (except functions, variables, mixins)
+
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/input-group";
+@import "~bootstrap/scss/custom-forms";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/jumbotron";
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/media";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/print";

playground/scss/variables.scss

@@ -0,0 +1,14 @@
+
+$primary: #42b983;
+$body-color: #304455;
+$info:    #73abfe;
+$gray-100: #f6f6f6;
+$text-muted: #4e6e8e;
+$gray-900: #273849;
+$dark: #273849;
+
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+
+$navbar-dark-color: rgba($white, .7);