KevinMidboe/vue-js-modal
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-js-modal.git synced 2025-10-29 18:00:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added webpack build config

Browse Source
This commit is contained in:
euvl
2016-11-14 15:46:35 +00:00
parent 0a1017bfc4
commit a13056c608
12 changed files with 102 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc.js
View File

@@ -1,6 +1,5 @@
module.exports = { module.exports = {
root: true, root: true,
fix: true,
parser: 'babel-eslint', parser: 'babel-eslint',
parserOptions: { parserOptions: {
sourceType: 'module' sourceType: 'module'
@@ -12,7 +11,7 @@ module.exports = {
'settings': { 'settings': {
'import/resolver': { 'import/resolver': {
'webpack': { 'webpack': {
'config': 'build/webpack.base.conf.js' 'config': './webpack.base.config.js'
} }
} }
}, },

0
examples/.gitkeep
View File

12
examples/App.vue
View File

@@ -1,22 +1,18 @@
<template> <template>
<div id="app"> <div id="app">
<img src="./assets/logo.png"> <h1>Test page</h1>
<button @click="showModal">Show modal</button> <button @click="showModal('basic')">Show basic modal</button>
<transition name="fade"> <transition name="fade">
<modal name="hello">Hello!</modal> <modal name="basic">Hello! Im basic modal!</modal>
</transition> </transition>
</div> </div>
</template> </template>
<script> <script>
import Hello from './components/Hello';
export default { export default {
name: 'app', name: 'app',
methods: { methods: {
showModal() { showModal(name) => this.$modal.show(name),
this.$modal.toggle('hello', false);
},
}, },
}; };
</script> </script>

1
examples/index.html
View File

@@ -6,6 +6,5 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected -->
</body> </body>
</html> </html>

2
examples/main.js
View File

@@ -1,6 +1,6 @@
import Vue from 'vue'; import Vue from 'vue';
import App from './App'; import App from './App';
import VueModal from './VueModal/index'; import VueModal from '../src/index';
Vue.use(VueModal); Vue.use(VueModal);

9
package.json
View File

@@ -10,13 +10,7 @@
"type": "git", "type": "git",
"url": "git+https://github.com/euvl/vue-modal.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": { "devDependencies": {
"vue": "^2.0.1",
"babel-runtime": "^6.18.0", "babel-runtime": "^6.18.0",
"autoprefixer": "^6.4.0", "autoprefixer": "^6.4.0",
"babel-core": "^6.0.0", "babel-core": "^6.0.0",
@@ -59,5 +53,8 @@
"engines": { "engines": {
"node": ">= 4.0.0", "node": ">= 4.0.0",
"npm": ">= 3.0.0" "npm": ">= 3.0.0"
},
"dependencies": {
"vue": "^2.0.5"
} }
} }

2
src/Modal.vue
View File

@@ -15,7 +15,7 @@
</template> </template>
<script> <script>
import Vue from 'vue'; import Vue from 'vue';
import VueModal from './index'; import VueModal from './modal';
const props = { const props = {
name: { name: {

38
src/index.js
View File

@@ -1,39 +1,3 @@
import Vue from 'vue'; import VueModal from './modal';
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;
},
};
export default VueModal; export default VueModal;

39
src/modal.js Normal file
View 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
View 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
View 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
View 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;