Init

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": ["es2015", "stage-2"],
+  "plugins": ["transform-runtime"],
+  "comments": false
+}

.editorconfig

@@ -0,0 +1,16 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{vue,js,json,html,scss,md,blade.php}]
+indent_style = space
+indent_size = 2

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "vue"
+}

.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

.npmignore

@@ -0,0 +1,2 @@
+src/
+example/

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Cretu Eusebiu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,104 @@
+# vmodal
+
+<p>
+  <a href="https://npmjs.com/package/vmodal"><img src="https://img.shields.io/npm/v/vmodal.svg?style=flat-square" alt="Latest Version on NPM"></a>
+  <a href="https://npmjs.com/package/vmodal"><img src="https://img.shields.io/npm/dt/vmodal.svg?style=flat-square" alt="Total Downloads"></a>
+</p>
+
+>A Vue component for Bootstrap modals.
+
+## Installation
+
+```bash
+npm install --save vmodal 
+```
+
+## Usage
+
+See the included [example](example).
+
+### JavaScript
+
+```javascript
+import Vue from 'vue'
+import Modal from 'vmodal'
+
+Vue.component('modal', Modal)
+
+new Vue({
+  el: '#app',
+
+  methods: {
+    methods: {
+      showModal () {
+        this.$refs.modal.show()
+      }
+    }
+  }
+})
+```
+
+### HTML
+
+```html
+<div id="app">
+  <modal ref="modal">
+    <h5 slot="title">Modal title</h5>
+    <div slot="body">
+      <p>Modal body text goes here.</p>
+    </div>
+    <div slot="footer">
+      <button type="button" class="btn btn-primary">Save changes</button>
+      <button type="button" class="btn btn-secondary">Close</button>
+    </div>
+  </modal>
+
+  <button @click="showModal" type="button" class="btn btn-primary">Show Modal</button>
+</div>
+```
+
+## Api
+
+### Methods
+
+| Name | Description |
+| :--- | :--- |
+| __show__ | Show the modal. |
+| __hide__ | Hide the modal. |
+| __toggle__ | Toggle the modal. |
+
+Example:
+
+```javascript
+this.$refs.modal.show()
+```
+
+### Props
+
+| Name | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| __backdrop__ | Boolean&#124;String | `true` | Includes a modal-backdrop element or `static` for a backdrop which doesn't close the modal on click. |
+| __close__ | Boolean | `false` | Show close &times; button. |
+| __focus__ | Boolean | `true` | Puts the focus on the modal when initialized. |
+| __keyboard__ | Boolean | `true` | Closes the modal when escape key is pressed. |
+| __size__ | String | | Optional size: `sm` or `lg`. |
+| __small__ | Boolean | | Equivalent to `size="sm"`. |
+| __large__ | Boolean | | Equivalent to `size="lg"`. |
+
+### Events
+
+| Name | Attributes | Description |
+| :--- | :--- | :--- |
+| __submit__ | `(event)` | Emitted when the form is submitted. |
+| __show__ | `(event)` | Emitted immediately when the `show` method is called. |
+| __shown__ | `(event)` | Emitted when the modal has been made visible to the user. |
+| __hide__ | `(event)` | Emitted immediately when the `hide` method has been called. |
+| __hidden__ | `(event)` | Emitted when the modal has finished being hidden from the user. |
+
+Example:
+
+```javascript
+this.$refs.modal.$on('shown', (e) => {
+  console.log('Modal shown')
+})
+```

example/form.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>vmodal form example</title>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
+  <style>
+    body { background-color: #f7f9fb; }
+  </style>
+</head>
+<body class="pt-2">
+  <div id="app">
+    <div class="container">
+      <div class="col-sm-10 offset-sm-1 col-md-8 offset-md-2">
+        <div class="card">
+          <div class="card-header">Modal form example</div>
+          <div class="card-block">
+            <modal ref="modal" @submit="handleFormSubmit">
+              <h5 slot="title">Modal title</h5>
+              <div slot="body">
+                <div class="form-group">
+                  <label for="email">Email address</label>
+                  <input v-model="email" type="email" class="form-control" id="email">
+                  <small class="form-text text-muted">We'll never share your email with anyone else.</small>
+                </div>
+              </div>
+              <div slot="footer">
+                <button type="submit" class="btn btn-primary">Save changes</button>
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+              </div>
+            </modal>
+
+            <button @click="showModal" type="button" class="btn btn-primary">Show Modal</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="https://unpkg.com/vue/dist/vue.js"></script>
+  <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
+  <script src="https://unpkg.com/tether/dist/js/tether.min.js"></script>
+  <script src="https://unpkg.com/[email protected]/dist/js/bootstrap.min.js"></script>
+  <!-- <script src="https://unpkg.com/vmodal/dist/vmodal.js"></script> -->
+  <script src="../dist/vmodal.js"></script>
+
+  <script>
+    Vue.component('modal', window.VModal)
+
+    new Vue({
+      el: '#app',
+
+      data: {
+        email: ''
+      },
+
+      methods: {
+        showModal: function () {
+          this.$refs.modal.show()
+        },
+
+        handleFormSubmit: function (e) {
+          alert('The form was submitted. ' + this.email)
+        }
+      }
+    })
+  </script>
+</body>
+</html>

example/index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>vmodal example</title>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
+  <style>
+    body { background-color: #f7f9fb; }
+  </style>
+</head>
+<body class="pt-2">
+  <div id="app">
+    <div class="container">
+      <div class="col-sm-10 offset-sm-1 col-md-8 offset-md-2">
+        <div class="card">
+          <div class="card-header">Modal example</div>
+          <div class="card-block">
+            <modal ref="modal">
+              <h5 slot="title">Modal title</h5>
+              <div slot="body">
+                <p>Modal body text goes here.</p>
+              </div>
+              <div slot="footer">
+                <button type="button" class="btn btn-primary">Save changes</button>
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+              </div>
+            </modal>
+
+            <button @click="showModal" type="button" class="btn btn-primary">Show Modal</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="https://unpkg.com/vue/dist/vue.js"></script>
+  <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
+  <script src="https://unpkg.com/tether/dist/js/tether.min.js"></script>
+  <script src="https://unpkg.com/[email protected]/dist/js/bootstrap.min.js"></script>
+  <!-- <script src="https://unpkg.com/vmodal/dist/vmodal.js"></script> -->
+  <script src="../dist/vmodal.js"></script>
+
+  <script>
+    Vue.component('modal', window.VModal)
+
+    new Vue({
+      el: '#app',
+      methods: {
+        showModal: function () {
+          this.$refs.modal.show()
+        }
+      }
+    })
+  </script>
+</body>
+</html>

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "vmodal",
+  "version": "0.1.0",
+  "description": "A Vue component for Bootstrap modals.",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "vue build src/Modal.vue --prod --lib VModal --webpack=webpack.config.js",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepublish": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cretueusebiu/vmodal.git"
+  },
+  "keywords": [
+    "vue",
+    "modal",
+    "bootstrap"
+  ],
+  "author": "Cretu Eusebiu",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cretueusebiu/vmodal/issues"
+  },
+  "homepage": "https://github.com/cretueusebiu/vmodal#readme",
+  "devDependencies": {
+    "babel-cli": "^6.18.0",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-stage-2": "^6.18.0",
+    "eslint": "^3.13.0",
+    "eslint-config-vue": "^2.0.1",
+    "eslint-plugin-html": "^1.7.0",
+    "eslint-plugin-vue": "^1.0.0"
+  }
+}