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

Cleaned demo

Browse Source
This commit is contained in:
euvl
2017-04-09 13:37:14 +01:00
parent 45bba6dfcd
commit d165145124
6 changed files with 184 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
demo/index.html
View File

@@ -13,15 +13,17 @@
ga('create', 'UA-80822945-4', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<a href="https://github.com/euvl/vue-js-modal">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
<div style="position: absolute; right: 0; top: 20px">
<iframe
src="https://ghbtns.com/github-btn.html?user=euvl&repo=vue-js-modal&type=star&count=true"
frameborder="0"
scrolling="0"
width="94px"
height="20px"></iframe>
</div>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>

88
demo/src/App.vue
View File

@@ -61,88 +61,23 @@
<button @click="show(false, false, true)">Draggable (under development)</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>
<props-table />
</div>
</template>
<script>
import PropsTable from './PropsTable.vue'
//<props-table/>
export default {
name: 'app',
components: {PropsTable},
data() {
return {
resizable: false,
adaptive: false,
draggable: false,
props: {
name: {
required: true,
type: String,
},
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: {
@@ -206,15 +141,4 @@ button {
border: 1px solid #20a0ff;
}
}
table.props {
width: 100%;
text-align: left;
border-collapse: collapse;
td, th {
border: 1px solid #eee;
padding: 4px 8px;
}
}
</style>

91
demo/src/PropsTable.vue Normal file
View File

@@ -0,0 +1,91 @@
<template>
<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)">
{{prop.type.map(v => v.name).join(' / ')}}
</template>
<template v-else>
<span>{{prop.type.name}}</span>
</template>
</td>
<td>
{{prop.default}}
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
name: 'PropsTable',
data () {
return {
props: {
name: {
required: true,
type: String,
},
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
}
}
}
}
}
</script>
<style lang="scss">
table.props {
width: 100%;
text-align: left;
border-collapse: collapse;
td, th {
border: 1px solid #eee;
padding: 4px 8px;
}
}
</style>