first commit

src/App.vue

@@ -0,0 +1,41 @@
+<template>
+  <div id="app">
+    <img src="./assets/logo.png">
+    <button @click="showModal">Show modal</button>
+    <transition name="fade">
+      <modal name="hello">Hello!</modal>
+    </transition>
+  </div>
+</template>
+
+<script>
+import Hello from './components/Hello';
+
+export default {
+  name: 'app',
+  methods: {
+    showModal() {
+      this.$modal.toggle('hello', false);
+    },
+  },
+};
+</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;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: all .3s;
+}
+
+.fade-enter, .fade-leave-active {
+  opacity: 0;
+}
+</style>

src/VueModal/Modal.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="vue-modal-overlay" v-if="visibleOverlay" @click.stop="toggle(false)">
+    <transition :name="transition">
+      <div :class="modalclass" ref="modal" :style="styles" v-show="visibleModal" @click.stop>
+        <template v-if="withTitle">
+          <div class="modal-title">
+            <slot name="title-left"/>
+            <slot name="title-right"/>
+          </div>
+        </template>
+        <slot/>
+      </div>
+    </transition>
+  </div>
+</template>
+<script>
+  import Vue from 'vue';
+  import VueModal from './index';
+
+  const props = {
+    name: {
+      required: true,
+      type: [String, Number],
+    },
+    withTitle: {
+      type: Boolean,
+      default: false,
+    },
+    delay: {
+      type: Number,
+      default: 0,
+    },
+    position: {
+      type: Array,
+    },
+    transition: {
+      type: String,
+    },
+    classes: {
+      type: [String, Array],
+      default: 'vue-modal',
+    },
+    width: {
+      type: Number,
+      default: 600,
+    },
+  };
+
+  export default {
+    name: 'Modal',
+    props,
+    data() {
+      return {
+        visible: false,
+        visibleModal: false,
+        visibleOverlay: false,
+      };
+    },
+    watch: {
+      visible(value) {
+        if (this.delay > 0) {
+          if (value) {
+            this.visibleOverlay = true;
+            setTimeout(() => { this.visibleModal = true; },
+              this.delay);
+          } else {
+            this.visibleModal = false;
+            setTimeout(() => { this.visibleOverlay = false; },
+              this.delay);
+          }
+        } else {
+          this.visibleOverlay = value;
+
+          Vue.nextTick(() => {
+            this.visibleModal = value;
+          });
+        }
+      },
+    },
+    created() {
+      VueModal.event.$on('toggle', (name, state) => {
+        if (name === this.name) {
+          this.toggle(!this.visible);
+        }
+      });
+    },
+    computed: {
+      modalclass() {
+        return ['modal', this.classes];
+      },
+      styles() {
+        return {
+          'margin-left': (-this.width / 2) + 'px',
+          width: this.width + 'px',
+        };
+      },
+    },
+    methods: {
+      toggle(state) {
+        const before = this.visible ? 'before-close' : 'before-open';
+        const after = this.visible ? 'opened' : 'closed';
+
+        this.$emit(before, this.name);
+        this.visible = !!state;
+        this.$emit(after, this.name);
+      },
+    },
+  };
+</script>
+<style>
+  .vue-modal-overlay {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.1);
+    z-index: 999;
+  }
+
+  .vue-modal-fade-enter-active, .vue-modal-fade-leave-active {
+    transition: all .3s;
+  }
+
+  .vue-modal-fade-enter, .vue-modal-fade-leave-active {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  .vue-modal {
+    position: absolute;
+    background: white;
+    position: relative;
+    width: 900px;
+
+    left: 50%;
+    top: 20%;
+
+    box-sizing: border-box;
+    border-radius: 3px;
+    box-shadow: 0 20px 60px -2px rgba(27, 33, 58, .4);
+    padding: 5px;
+  }
+</style>

src/VueModal/index.js

@@ -0,0 +1,39 @@
+import Vue from 'vue';
+import Modal from './Modal';
+
+const VueModal = {
+  event: new Vue(),
+  install(self, options = {}) {
+    if (this.installed) {
+      return console.log('Modal component is already installed.');
+    }
+
+    this.installed = true;
+
+    const modal = {
+      toggle(name, state, params) {
+        const opts = typeof state === 'object' && typeof params === 'undefined'
+          ? state
+          : params;
+        VueModal.event.$emit('toggle', name, state);
+      },
+      show(name, params = {}) {
+        VueModal.event.$emit('toggle', name, true);
+      },
+      hide(name, params = {}) {
+        VueModal.event.$emit('toggle', name, false);
+      },
+    };
+
+    Object.defineProperty(Vue.prototype, '$modal', {
+      get() {
+        return modal;
+      },
+    });
+
+    Vue.component('modal', Modal);
+    return null;
+  },
+};
+
+export default VueModal;

src/components/Hello.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <h2>Essential Links</h2>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
+      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
+      <br>
+      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
+    </ul>
+    <h2>Ecosystem</h2>
+    <ul>
+      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
+      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
+      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'hello',
+  data() {
+    return {
+      msg: 'Welcome to Your Vue.js App',
+    };
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+a {
+  color: #42b983;
+}
+</style>

src/main.js

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import App from './App';
+import VueModal from './VueModal/index';
+
+Vue.use(VueModal);
+
+new Vue({
+  el: '#app',
+  template: '<App/>',
+  components: { App },
+});