Refactored, added es5 build

.gitignore

@@ -1,4 +1,4 @@
 .DS_Store
 node_modules/
-dist/
 npm-debug.log
+*.map

Modal/index.js

@@ -1,30 +0,0 @@
-import Vue from 'vue';
-import Modal from './Modal.vue';
-
-const VueModal = {
-  install(Vue, options = {}) {
-    if (!this.hasOwnProperty("event")) {
-      this.event = new Vue();
-    }
-
-    const $modal = {
-      show(name, params) {
-        VueModal.event.$emit('toggle', name, true, params);
-      },
-      hide(name, params) {
-        VueModal.event.$emit('toggle', name, false, params);
-      }
-    };
-
-    Object.defineProperty(Vue.prototype, '$modal', {
-      get: () => $modal
-    });
-
-    Vue.component('modal', Modal);
-    return null;
-  },
-};
-
-Vue.use(VueModal);
-
-export default VueModal;

demo/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "demo",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+  },
+  "dependencies": {
+    "vue": "^2.0.0",
+    "vue-js-modal": "*"
+  },
+  "devDependencies": {
+    "babel-core": "^6.0.0",
+    "babel-loader": "^6.0.0",
+    "babel-preset-latest": "^6.0.0",
+    "cross-env": "^3.0.0",
+    "css-loader": "^0.25.0",
+    "file-loader": "^0.9.0",
+    "node-sass": "^4.5.0",
+    "sass-loader": "^5.0.1",
+    "vue-loader": "^11.1.4",
+    "vue-template-compiler": "^2.2.1",
+    "webpack": "^2.2.0",
+    "webpack-dev-server": "^2.2.0"
+  }
+}

demo/src/App.vue

@@ -134,9 +134,9 @@ export default {
   },
   methods: {
     show(resizable, adaptive) {
-      this.resizable = resizable;
+      this.resizable = resizable
-      this.adaptive = adaptive;
+      this.adaptive = adaptive
-      this.$modal.show('example-modal');
+      this.$modal.show('example-modal')
     }
   }
 }

demo/src/main.js

@@ -0,0 +1,8 @@
+import Vue    from 'vue'
+import App    from './App.vue'
+import Modal  from 'vue-js-modal'
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})

demo/webpack.config.js

@@ -0,0 +1,75 @@
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  entry: './src/main.js',
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: '/dist/',
+    filename: 'build.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
+            // the "scss" and "sass" values for the lang attribute to the right configs here.
+            // other preprocessors should work out of the box, no loader config like this necessary.
+            'scss': 'vue-style-loader!css-loader!sass-loader',
+            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
+          }
+          // other vue-loader options go here
+        }
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]?[hash]'
+        }
+      }
+    ]
+  },
+  resolve: {
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js'
+    }
+  },
+  devServer: {
+    historyApiFallback: true,
+    noInfo: true
+  },
+  performance: {
+    hints: false
+  },
+  devtool: '#eval-source-map'
+}
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports.devtool = '#source-map'
+  // http://vue-loader.vuejs.org/en/workflow/production.html
+  module.exports.plugins = (module.exports.plugins || []).concat([
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      sourceMap: true,
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    })
+  ])
+}

examples/src/main.js

@@ -1,8 +0,0 @@
-import Vue from 'vue';
-import App from './App.vue';
-import Modal from '../../Modal';
-
-new Vue({
-  el: '#app',
-  render: h => h(App)
-});

package.json

@@ -1,10 +1,9 @@
 {
   "name": "vue-js-modal",
   "description": "Modal Component for Vue.js",
-  "version": "1.0.3",
+  "version": "1.0.10",
   "author": "euvl <yev.vlasenko@gmail.com>",
-  "private": false,
+  "main": "dist/index.js",
-  "main": "./Modal/index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/euvl/vue-js-modal.git"
@@ -17,10 +16,11 @@
   "bugs": {
     "url": "https://github.com/euvl/vue-js-modal/issues"
   },
-  "license": "MIT",
   "scripts": {
-    "examples": "cross-env NODE_ENV=development webpack-dev-server --open --hot"
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
+  "license": "MIT",
   "devDependencies": {
     "vue": "^2.1.10",
     "babel-core": "^6.0.0",
@@ -37,5 +37,8 @@
     "vue-template-compiler": "^2.1.0",
     "webpack": "^2.2.0",
     "webpack-dev-server": "^2.2.0"
+  },
+  "dependencies": {
+    "vue": "^2.2.6"
   }
 }

src/Modal.vue

@@ -5,10 +5,10 @@
          @mousedown.stop="toggle(false)">
       <transition :name="transition">
         <div v-if="visibility.modal"
-             v-bind:class="modalClass"
+             ref="modal"
-             v-bind:style="modalStyle"
+             :class="modalClass"
-             v-on:mousedown.stop
+             :style="modalStyle"
-             ref="modal">
+             @mousedown.stop>
           <slot></slot>
           <resizer v-if="resizable"
                    :min-width="minWidth"
@@ -20,9 +20,9 @@
   </transition>
 </template>
 <script>
-  import Vue from 'vue';
+  import Vue      from 'vue'
-  import Modal from './index';
+  import Modal    from './index'
-  import Resizer from './Resizer.vue';
+  import Resizer  from './Resizer.vue'
 
   export default {
     name: 'Modal',
@@ -94,26 +94,26 @@
       visible(value) {
         if (this.delay > 0) {
           if (value) {
-            this.visibility.overlay = true;
+            this.visibility.overlay = true
-            setTimeout(() => this.visibility.modal = true, this.delay);
+            setTimeout(() => this.visibility.modal = true, this.delay)
           } else {
-            this.visibility.modal = false;
+            this.visibility.modal = false
-            setTimeout(() => this.visibility.overlay = false, this.delay);
+            setTimeout(() => this.visibility.overlay = false, this.delay)
           }
         } else {
-          this.visibility.overlay = value;
+          this.visibility.overlay = value
-          Vue.nextTick(() => this.visibility.modal = value);
+          Vue.nextTick(() => this.visibility.modal = value)
         }
       },
     },
     created() {
       Modal.event.$on('toggle', (name, state, params) => {
         if (name === this.name) {
-          this.toggle(!this.visible, params);
+          this.toggle(!this.visible, params)
         }
       });
 
-      window.addEventListener('resize', this.onWindowResize);
+      window.addEventListener('resize', this.onWindowResize)
     },
     beforeMount() {
       this.onWindowResize();
@@ -121,12 +121,12 @@
     computed: {
       position() {
         return {
-          left: Math.max((this.window.width - this.modal.width) / 2, 0),
+          left: Math.max(0.5 * (this.window.width - this.modal.width), 0),
-          top: Math.max((this.window.height - this.modal.height) / 2, 0)
+          top: Math.max(0.5 * (this.window.height - this.modal.height), 0)
         }
       },
       modalClass() {
-        return ['modal', this.classes];
+        return ['modal', this.classes]
       },
       modalStyle() {
         return {
@@ -139,8 +139,8 @@
     },
     methods: {
       onWindowResize() {
-        this.window.width = window.innerWidth;
+        this.window.width = window.innerWidth
-        this.window.height = window.innerHeight;
+        this.window.height = window.innerHeight
 
         if (this.adaptive) {
           var width = this.window.width > this.modal.width
@@ -149,10 +149,10 @@
 
           var height = this.window.height > this.modal.height
             ? this.modal.height
-            : this.window.height;
+            : this.window.height
 
-          this.modal.width = width;//Math.max(width, this.minWidth);
+          this.modal.width = width // Math.max(width, this.minWidth);
-          this.modal.height = height;//Math.max(height, this.minHeight);
+          this.modal.height = height // Math.max(height, this.minHeight);
         }
       },
       genEventObject(params) {
@@ -165,38 +165,38 @@
           params || {});
       },
       resize(event) {
-        this.modal.width = event.size.width;
+        this.modal.width = event.size.width
-        this.modal.height = event.size.height;
+        this.modal.height = event.size.height
 
         let resizeEvent = this.genEventObject({
           size: this.modal
         });
 
-        this.$emit('resize', resizeEvent);
+        this.$emit('resize', resizeEvent)
       },
       toggle(state, params) {
-        const beforeEventName = this.visible ? 'before-close' : 'before-open';
+        const beforeEventName = this.visible ? 'before-close' : 'before-open'
-        const afterEventName = this.visible ? 'closed' : 'opened';
+        const afterEventName = this.visible ? 'closed' : 'opened'
 
-        let stopEventExecution = false;
+        let stopEventExecution = false
 
         const beforeEvent = this.genEventObject({
           stop: () => stopEventExecution = false,
           state,
           params
-        });
+        })
 
-        this.$emit(beforeEventName, beforeEvent);
+        this.$emit(beforeEventName, beforeEvent)
 
         if (!stopEventExecution) {
-          this.visible = !!state;
+          this.visible = !!state
 
           const afterEvent = this.genEventObject({
             state,
             params
-          });
+          })
 
-          this.$emit(afterEventName, afterEvent);
+          this.$emit(afterEventName, afterEvent)
         }
       },
     },

src/Resizer.vue

@@ -1,6 +1,5 @@
 <template>
-  <div :class="{'vue-modal-resizer': true, 'clicked': clicked}">
+  <div :class="className"></div>
-  </div>
 </template>
 <script>
 export default {
@@ -21,23 +20,28 @@ export default {
     }
   },
   mounted() {
-    this.$el.addEventListener('mousedown', this.start, false);
+    this.$el.addEventListener('mousedown', this.start, false)
+  },
+  computed: {
+    className () {
+      return {'vue-modal-resizer': true, 'clicked': this.clicked}
+    }
   },
   methods: {
     start(event) {
-      this.clicked = true;
+      this.clicked = true
 
-      window.addEventListener('mousemove', this.mousemove, false);
+      window.addEventListener('mousemove', this.mousemove, false)
-      window.addEventListener('mouseup', this.stop, false);
+      window.addEventListener('mouseup', this.stop, false)
 
-      event.stopPropagation();
+      event.stopPropagation()
-      event.preventDefault();
+      event.preventDefault()
     },
     stop() {
-      this.clicked = false;
+      this.clicked = false
 
-      window.removeEventListener('mousemove', this.mousemove, false);
+      window.removeEventListener('mousemove', this.mousemove, false)
-      window.removeEventListener('mouseup', this.stop, false);
+      window.removeEventListener('mouseup', this.stop, false)
 
       this.$emit('resize-stop', {
         element: this.$el.parentElement,
@@ -45,40 +49,39 @@ export default {
       });
     },
     mousemove(event) {
-      this.resize(event);
+      this.resize(event)
     },
     resize(event) {
-      var el = this.$el.parentElement;
+      var el = this.$el.parentElement
 
       if (el) {
-        var width = event.clientX - el.offsetLeft;
+        var width = event.clientX - el.offsetLeft
-        var height = event.clientY - el.offsetTop;
+        var height = event.clientY - el.offsetTop
-
 
         if (width < this.minWidth) {
-          width = this.minWidth;
+          width = this.minWidth
         }
 
         if (width > window.innerWidth) {
-          width = window.innerWidth;
+          width = window.innerWidth
         }
 
         if (height < this.minHeight) {
-          height = this.minHeight;
+          height = this.minHeight
         }
 
         if (height > window.innerHeight) {
-          height = window.innerHeight;
+          height = window.innerHeight
         }
 
-        this.size = {width, height};
+        this.size = {width, height}
-        el.style.width = width + 'px';
+        el.style.width = width + 'px'
-        el.style.height = height + 'px';
+        el.style.height = height + 'px'
 
         this.$emit('resize', {
           element: el,
           size: this.size
-        });
+        })
       }
     }
   }

src/index.js

@@ -0,0 +1,28 @@
+import Vue    from 'vue'
+import Modal  from './Modal.vue'
+
+const ModalPlugin = {
+  install(Vue, options = {}) {
+    if (!this.hasOwnProperty("event")) {
+      this.event = new Vue()
+    }
+
+    const $modal = {
+      show(name, params) {
+        ModalPlugin.event.$emit('toggle', name, true, params)
+      },
+      hide(name, params) {
+        ModalPlugin.event.$emit('toggle', name, false, params)
+      }
+    }
+
+    Object.defineProperty(Vue.prototype, '$modal', {
+      get: () => $modal
+    })
+
+    Vue.component('modal', Modal)
+    return null
+  },
+}
+
+export default ModalPlugin

webpack.config.js

@@ -1,17 +1,13 @@
-
 var path = require('path')
 var webpack = require('webpack')
 
 module.exports = {
-  entry: './examples/src/main.js',
+  entry: './src/index.js',
   output: {
     path: path.resolve(__dirname, './dist'),
     publicPath: '/dist/',
-    filename: 'build.js'
+    filename: 'index.js'
   },
-  externals: [
-
-  ],
   module: {
     rules: [
       {
@@ -19,9 +15,13 @@ module.exports = {
         loader: 'vue-loader',
         options: {
           loaders: {
+            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
+            // the "scss" and "sass" values for the lang attribute to the right configs here.
+            // other preprocessors should work out of the box, no loader config like this necessary.
             'scss': 'vue-style-loader!css-loader!sass-loader',
             'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
           }
+          // other vue-loader options go here
         }
       },
       {
@@ -40,12 +40,12 @@ module.exports = {
   },
   resolve: {
     alias: {
-      'vue': 'vue/dist/vue.js',
+      'vue$': 'vue/dist/vue.esm.js'
-      'nice-vue-components$':  path.resolve(__dirname, './components/index.js')
     }
   },
   devServer: {
-    historyApiFallback: true
+    historyApiFallback: true,
+    noInfo: true
   },
   performance: {
     hints: false
@@ -54,20 +54,28 @@ module.exports = {
 }
 
 if (process.env.NODE_ENV === 'production') {
+  module.exports.entry = './src/index.js'
+
+  module.exports.output = {
+    path:'./dist',
+    filename:'index.js',
+    library:'VueJsToggleButton',
+    libraryTarget: 'umd'
+  }
+
   module.exports.devtool = '#source-map'
-  // http://vue-loader.vuejs.org/en/workflow/production.html
   module.exports.plugins = (module.exports.plugins || []).concat([
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: '"production"'
       }
     }),
-    new webpack.optimize.UglifyJsPlugin({
+    /*new webpack.optimize.UglifyJsPlugin({
       sourceMap: true,
       compress: {
         warnings: false
       }
-    }),
+    }),*/
     new webpack.LoaderOptionsPlugin({
       minimize: true
     })