mirror of
https://github.com/KevinMidboe/vue-js-modal.git
synced 2025-10-29 18:00:20 +00:00
Refactored, added es5 build
This commit is contained in:
euvl
11
demo/index.html
Normal file
11
demo/index.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Examples</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="/dist/build.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
26
demo/package.json
Normal file
26
demo/package.json
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
193
demo/src/App.vue
Normal file
193
demo/src/App.vue
Normal file
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<modal name="example-modal" transition="nice-modal-fade" :min-width="200" :min-height="200" :delay="100" :adaptive="adaptive" :resizable="resizable">
|
||||
<div style="height: 100%; box-sizing: border-box; padding: 10px; font-size: 13px; overflow: auto">
|
||||
Appropriately exploit professional infrastructures rather than unique growth strategies. Assertively build leveraged growth strategies vis-a-vis multimedia based vortals. Progressively simplify cross-platform value through interactive imperatives. Objectively
|
||||
implement enabled web services after plug-and-play ROI. Distinctively impact inexpensive schemas before installed base imperatives. Holisticly benchmark pandemic process improvements without wireless experiences. Efficiently create worldwide partnerships
|
||||
after tactical vortals. Uniquely productize enabled platforms vis-a-vis timely processes. Conveniently unleash standards compliant niches through highly efficient testing procedures. Rapidiously enable pandemic niche markets whereas viral markets.
|
||||
Assertively simplify alternative partnerships and error-free e-commerce. Professionally formulate 24/365 internal or "organic" sources through equity invested mindshare. Globally redefine unique best practices for.
|
||||
</div>
|
||||
</modal>
|
||||
|
||||
<h2>Vue.js Modal</h2>
|
||||
|
||||
<pre>
|
||||
npm install --save vue-js-modal
|
||||
</pre>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td style="width: 20%">Modes:</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Simple</b></td>
|
||||
<td>Yet another boring modal :)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Adaptive</b></td>
|
||||
<td>Tries to adjust to the page size</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Resizable</b></td>
|
||||
<td>
|
||||
Has a small arrow on the bottom-right corner (customizable) that you can drag to change the size of the modal
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Mixed</b></td>
|
||||
<td>
|
||||
Is resizable, but if the size of the screen is changed modal will return to its initial size as well as it will try to adapt to the page size
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div style="margin-top: 20px; margin-bottom: 20px;">
|
||||
<button @click="show(false, false)">Simple</button>
|
||||
<button @click="show(true, false)">Resizable</button>
|
||||
<button @click="show(false, true)">Adaptive</button>
|
||||
<button @click="show(true, true)">Mixed</button>
|
||||
</div>
|
||||
|
||||
<table class="props">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(prop, name) in props">
|
||||
<td>
|
||||
{{name}}
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="Array.isArray(prop.type)">
|
||||
<span v-for="type in prop.type">
|
||||
{{type.name}} /
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>{{prop.type.name}}</span>
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
{{prop.default}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'app',
|
||||
data() {
|
||||
return {
|
||||
resizable: false,
|
||||
adaptive: false,
|
||||
|
||||
props: {
|
||||
name: {
|
||||
required: true,
|
||||
type: [String, Number],
|
||||
},
|
||||
delay: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
resizable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
adaptive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
transition: {
|
||||
type: String,
|
||||
},
|
||||
classes: {
|
||||
type: [String, Array],
|
||||
default: 'nice-modal',
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 600
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
minWidth: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
minHeight: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show(resizable, adaptive) {
|
||||
this.resizable = resizable
|
||||
this.adaptive = adaptive
|
||||
this.$modal.show('example-modal')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 50px;
|
||||
cursor: default;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
pre {
|
||||
color: #595959;
|
||||
background-color: #f3f3f3;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
background: white;
|
||||
border: 0;
|
||||
padding: 6px 18px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
|
||||
background: white;
|
||||
|
||||
color: #4db3ff;
|
||||
border: 1px solid #4db3ff;
|
||||
&:hover {
|
||||
color: #20a0ff;
|
||||
border: 1px solid #20a0ff;
|
||||
}
|
||||
}
|
||||
|
||||
table.props {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
8
demo/src/main.js
Normal file
8
demo/src/main.js
Normal file
@@ -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)
|
||||
})
|
||||
75
demo/webpack.config.js
Normal file
75
demo/webpack.config.js
Normal file
@@ -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
|
||||
})
|
||||
])
|
||||
}
|
||||
Reference in New Issue
Block a user