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

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

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>