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