release 2.1.0

.gitignore

@@ -1,4 +1,5 @@
 .idea
 .vscode
 .DS_STORE
-node_modules
+node_modules
+.babelrc

README.md

@@ -32,7 +32,7 @@ export default {
 
 ``` sass
 // include animation styles
-@import "vodal/fade.css";
+@import "vodal/common.css";
 @import "vodal/rotate.css";
 ```
 

build/release.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+cp src/style/* ./
+npm run build
+npm publish
+node build/del.js

build/webpack.base.conf.js

@@ -0,0 +1,27 @@
+module.exports = {
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                use: [{
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ['es2015', 'stage-0']
+                    }
+                }],
+            },
+            {
+                test: /\.vue$/,
+                use: [
+                    'vue-loader'
+                ]
+            }
+        ]
+    },
+    performance: {
+        hints: false
+    },
+    resolve: {
+        extensions: ['.webpack.js',  '.js', '.vue', '.ts']
+    }
+};

build/webpack.dev.conf.js

@@ -0,0 +1,33 @@
+const path = require('path');
+const merge = require('webpack-merge');
+const baseWebpackConfig = require('./webpack.base.conf');
+
+module.exports = merge(baseWebpackConfig, {
+    entry: {
+        index: './example/src/index.js'   
+    },
+    output: {
+        path: path.resolve(__dirname, '../example/dist'),
+        publicPath: "example/dist/",
+        filename: "[name].js"
+    },
+    devServer: {
+        contentBase: './',
+        compress: true,
+        port: 2345,
+        stats: {
+            assets: true,
+            children: false,
+            chunks: false,
+            hash: false,
+            modules: false,
+            publicPath: false,
+            timings: false,
+            version: false,
+            warnings: true,
+            colors: {
+                green: '\u001b[32m',
+            }
+        }
+    }
+})

build/webpack.prod.conf.js

@@ -0,0 +1,26 @@
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const baseWebpackConfig = require('./webpack.base.conf');
+require('shelljs/global');
+
+env.NODE_ENV = 'production';
+
+module.exports = merge(baseWebpackConfig, {
+    entry: {
+        index: './src/index.js'   
+    },
+    output: {
+        path: path.resolve(__dirname, '../dist'),
+        publicPath: "dist/",
+        filename: "[name].js",
+        libraryTarget: 'commonjs2'
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env': {
+                'NODE_ENV': JSON.stringify('production')
+            }
+        })
+    ]
+})

example/src/app.vue

@@ -19,7 +19,7 @@
                 :width="28.5"
                 :height="17"
                 :duration="301"
-                :className="my-dialog"
+                className="my-dialog"
                 @hide="show = false"
             >
                 <div class="header">Vodal</div>
@@ -33,7 +33,7 @@
 
 <script>
 import Vue from 'vue';
-import Vodal from '../../src';
+import Vodal from '../../dist';
 
 Vue.component(Vodal.name, Vodal);
 
@@ -66,15 +66,15 @@ export default {
 </script>
 
 <style>
-@import "../../src/animation/fade.css";
-@import "../../src/animation/door.css";
-@import "../../src/animation/flip.css";
-@import "../../src/animation/rotate.css";
-@import "../../src/animation/slide-down.css";
-@import "../../src/animation/slide-left.css";
-@import "../../src/animation/slide-right.css";
-@import "../../src/animation/slide-up.css";
-@import "../../src/animation/zoom.css";
+@import "../../src/style/common.css";
+@import "../../src/style/door.css";
+@import "../../src/style/flip.css";
+@import "../../src/style/rotate.css";
+@import "../../src/style/slide-down.css";
+@import "../../src/style/slide-left.css";
+@import "../../src/style/slide-right.css";
+@import "../../src/style/slide-up.css";
+@import "../../src/style/zoom.css";
 
 *,
 *:before,

example/src/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import App from './app';
+import App from './App';
 
 new Vue({
     el: '#app',

package.json

@@ -1,13 +1,13 @@
 {
   "name": "vodal",
-  "version": "1.0.3",
+  "version": "2.1.0",
   "description": "A vue modal with animations.",
-  "main": "src/index.vue",
+  "main": "dist/index.js",
   "scripts": {
     "test": "npm test",
-    "dev": "node_modules/.bin/webpack-dev-server",
-    "build": "webpack -p --hide-modules",
-    "pub": "cp src/animation/* ./ && npm publish && node build/del.js"
+    "dev": "node_modules/.bin/webpack-dev-server --config ./build/webpack.dev.conf.js",
+    "build": "webpack -p --hide-modules --config ./build/webpack.prod.conf.js",
+    "release": "bash ./build/release.sh"
   },
   "repository": {
     "type": "git",
@@ -26,24 +26,20 @@
   },
   "homepage": "https://github.com/chenjiahan/vodal#readme",
   "dependencies": {
-    "vue": "^2.2.6"
+    "vue": "^2.3.0"
   },
   "devDependencies": {
     "babel-core": "^6.24.1",
-    "babel-loader": "^6.4.1",
+    "babel-loader": "^7.0.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "css-loader": "^0.28.0",
     "del": "^2.2.2",
-    "vue-loader": "^11.3.4",
-    "vue-template-compiler": "^2.2.6",
+    "shelljs": "^0.7.7",
+    "vue-loader": "^12.0.2",
+    "vue-template-compiler": "^2.3.0",
     "webpack": "^2.4.1",
-    "webpack-dev-server": "^2.4.2"
-  },
-  "babel": {
-    "presets": [
-      "es2015",
-      "stage-0"
-    ]
+    "webpack-dev-server": "^2.4.5",
+    "webpack-merge": "^4.1.0"
   }
 }

src/index.vue → src/Vodal.vue

@@ -63,18 +63,17 @@ export default {
 
     computed: {
         style() {
-            return `
-                animationDuration: ${this.duration}ms;
-                webkitAnimationDuration: ${this.duration}ms;
-            `;
+            return {
+                animationDuration: `${this.duration}ms`,
+                webkitAnimationDuration: `${this.duration}ms`
+            };
         },
-
         dialogStyle() {
-            return `
-                width: ${this.width + this.measure};
-                height: ${this.height + this.measure};
-                ${this.style}
-            `;
+            return {
+                ...this.style,
+                width: `${this.width + this.measure}`,
+                height: `${this.height + this.measure}`
+            }
         }
     },
 
@@ -93,76 +92,3 @@ export default {
     }
 }
 </script>
-
-<style>
-.vodal,
-.vodal-mask {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 100;
-}
-
-.vodal {
-    position: fixed;
-}
-
-.vodal-mask {
-    position: absolute;
-    background: rgba(0, 0, 0, .3);
-}
-
-.vodal-dialog {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-    z-index: 101;
-    padding: 15px;
-    background: #fff;
-    border-radius: 3px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
-}
-
-.vodal-close {
-    position: absolute;
-    cursor: pointer;
-    top: 16px;
-    right: 16px;
-    width: 16px;
-    height: 16px;
-}
-
-.vodal-close:before,
-.vodal-close:after {
-    position: absolute;
-    content: '';
-    height: 2px;
-    width: 100%;
-    top: 50%;
-    left: 0;
-    margin-top: -1px;
-    background: #999;
-    border-radius: 100%;
-    -webkit-transition: background .2s;
-    transition: background .2s;
-}
-
-.vodal-close:before {
-    -webkit-transform: rotate(45deg);
-    transform: rotate(45deg);
-}
-
-.vodal-close:after {
-    -webkit-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-}
-
-.vodal-close:hover:before,
-.vodal-close:hover:after {
-    background: #333;
-}
-</style>

src/index.js

@@ -0,0 +1,2 @@
+import Vodal from './Vodal.vue';
+export default Vodal;