mirror of
				https://github.com/KevinMidboe/vue-js-modal.git
				synced 2025-10-29 18:00:20 +00:00 
			
		
		
		
	Added webpack build config
This commit is contained in:
		@@ -1,6 +1,5 @@
 | 
			
		||||
module.exports = {
 | 
			
		||||
  root: true,
 | 
			
		||||
  fix: true,
 | 
			
		||||
  parser: 'babel-eslint',
 | 
			
		||||
  parserOptions: {
 | 
			
		||||
    sourceType: 'module'
 | 
			
		||||
@@ -12,7 +11,7 @@ module.exports = {
 | 
			
		||||
  'settings': {
 | 
			
		||||
    'import/resolver': {
 | 
			
		||||
      'webpack': {
 | 
			
		||||
        'config': 'build/webpack.base.conf.js'
 | 
			
		||||
        'config': './webpack.base.config.js'
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
 
 | 
			
		||||
@@ -1,22 +1,18 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div id="app">
 | 
			
		||||
    <img src="./assets/logo.png">
 | 
			
		||||
    <button @click="showModal">Show modal</button>
 | 
			
		||||
    <h1>Test page</h1>
 | 
			
		||||
    <button @click="showModal('basic')">Show basic modal</button>
 | 
			
		||||
    <transition name="fade">
 | 
			
		||||
      <modal name="hello">Hello!</modal>
 | 
			
		||||
      <modal name="basic">Hello! Im basic modal!</modal>
 | 
			
		||||
    </transition>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import Hello from './components/Hello';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'app',
 | 
			
		||||
  methods: {
 | 
			
		||||
    showModal() {
 | 
			
		||||
      this.$modal.toggle('hello', false);
 | 
			
		||||
    },
 | 
			
		||||
    showModal(name) => this.$modal.show(name),
 | 
			
		||||
  },
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 
 | 
			
		||||
@@ -6,6 +6,5 @@
 | 
			
		||||
  </head>
 | 
			
		||||
  <body>
 | 
			
		||||
    <div id="app"></div>
 | 
			
		||||
    <!-- built files will be auto injected -->
 | 
			
		||||
  </body>
 | 
			
		||||
</html>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,6 +1,6 @@
 | 
			
		||||
import Vue from 'vue';
 | 
			
		||||
import App from './App';
 | 
			
		||||
import VueModal from './VueModal/index';
 | 
			
		||||
import VueModal from '../src/index';
 | 
			
		||||
 | 
			
		||||
Vue.use(VueModal);
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -10,13 +10,7 @@
 | 
			
		||||
    "type": "git",
 | 
			
		||||
    "url": "git+https://github.com/euvl/vue-modal.git"
 | 
			
		||||
  },
 | 
			
		||||
  "scripts": {
 | 
			
		||||
    "dev": "node examples/server.js",
 | 
			
		||||
    "build": "node build/build.js",
 | 
			
		||||
    "lint": "eslint --fix --ext .js,.vue src"
 | 
			
		||||
  },
 | 
			
		||||
  "devDependencies": {
 | 
			
		||||
    "vue": "^2.0.1",
 | 
			
		||||
    "babel-runtime": "^6.18.0",
 | 
			
		||||
    "autoprefixer": "^6.4.0",
 | 
			
		||||
    "babel-core": "^6.0.0",
 | 
			
		||||
@@ -59,5 +53,8 @@
 | 
			
		||||
  "engines": {
 | 
			
		||||
    "node": ">= 4.0.0",
 | 
			
		||||
    "npm": ">= 3.0.0"
 | 
			
		||||
  },
 | 
			
		||||
  "dependencies": {
 | 
			
		||||
    "vue": "^2.0.5"
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -15,7 +15,7 @@
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
  import Vue from 'vue';
 | 
			
		||||
  import VueModal from './index';
 | 
			
		||||
  import VueModal from './modal';
 | 
			
		||||
 | 
			
		||||
  const props = {
 | 
			
		||||
    name: {
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										38
									
								
								src/index.js
									
									
									
									
									
								
							
							
						
						
									
										38
									
								
								src/index.js
									
									
									
									
									
								
							@@ -1,39 +1,3 @@
 | 
			
		||||
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;
 | 
			
		||||
  },
 | 
			
		||||
};
 | 
			
		||||
import VueModal from './modal';
 | 
			
		||||
 | 
			
		||||
export default VueModal;
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										39
									
								
								src/modal.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										39
									
								
								src/modal.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,39 @@
 | 
			
		||||
import Vue from 'vue';
 | 
			
		||||
import Modal from './Modal.vue';
 | 
			
		||||
 | 
			
		||||
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;
 | 
			
		||||
							
								
								
									
										26
									
								
								webpack.base.config.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										26
									
								
								webpack.base.config.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,26 @@
 | 
			
		||||
module.exports = {
 | 
			
		||||
  entry: './src/index.js',
 | 
			
		||||
  output: {
 | 
			
		||||
    path: './dist',
 | 
			
		||||
    publicPath: 'dist/',
 | 
			
		||||
    filename: 'vue-modal.js'
 | 
			
		||||
  },
 | 
			
		||||
  module: {
 | 
			
		||||
    loaders: [
 | 
			
		||||
      {
 | 
			
		||||
        test: /\.vue$/,
 | 
			
		||||
        loader: 'vue'
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        test: /\.js$/,
 | 
			
		||||
        loader: 'babel!eslint',
 | 
			
		||||
        exclude: /node_modules/
 | 
			
		||||
      }
 | 
			
		||||
    ]
 | 
			
		||||
  },
 | 
			
		||||
  vue: {
 | 
			
		||||
    loaders: {
 | 
			
		||||
      js: 'babel!eslint'
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
							
								
								
									
										8
									
								
								webpack.dev.config.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										8
									
								
								webpack.dev.config.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,8 @@
 | 
			
		||||
var config = require('./webpack.base.config');
 | 
			
		||||
 | 
			
		||||
config.devtool = 'eval-source-map';
 | 
			
		||||
config.devServer = {
 | 
			
		||||
  noInfo: true
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
module.exports = config;
 | 
			
		||||
							
								
								
									
										18
									
								
								webpack.prod.config.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										18
									
								
								webpack.prod.config.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,18 @@
 | 
			
		||||
var webpack = require('webpack');
 | 
			
		||||
var config = require('./webpack.base.config');
 | 
			
		||||
 | 
			
		||||
config.plugins = (config.plugins || []).concat([
 | 
			
		||||
  new webpack.DefinePlugin({
 | 
			
		||||
    'process.env': {
 | 
			
		||||
      NODE_ENV: '"production"'
 | 
			
		||||
    }
 | 
			
		||||
  }),
 | 
			
		||||
  new webpack.optimize.UglifyJsPlugin({
 | 
			
		||||
    compress: {
 | 
			
		||||
      warnings: false
 | 
			
		||||
    }
 | 
			
		||||
  }),
 | 
			
		||||
  new webpack.optimize.OccurenceOrderPlugin()
 | 
			
		||||
]);
 | 
			
		||||
 | 
			
		||||
module.exports = config;
 | 
			
		||||
		Reference in New Issue
	
	Block a user