You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.7 KiB
113 lines
2.7 KiB
<template>
|
|
<v-container style="position: relative">
|
|
<v-layout justify-space-around row wrap>
|
|
<v-flex
|
|
v-for="coll in colls"
|
|
:key="coll.uid"
|
|
:style="coll.style"
|
|
xs12
|
|
:[getSize(coll)]="true"
|
|
xxxclass="te-coll"
|
|
>
|
|
<!-- <div class="te-coll--menu">
|
|
MOVE
|
|
</div> -->
|
|
<draggable
|
|
class="te-section"
|
|
:list="coll.list"
|
|
:group="{name: 'te-widget'}"
|
|
v-bind="dragOptions"
|
|
@start="drag = true"
|
|
@end="drag = false"
|
|
>
|
|
<transition-group
|
|
type="transition"
|
|
:name="!drag ? 'flip-list' : null"
|
|
tag="v-layout"
|
|
class="column"
|
|
>
|
|
<v-flex v-for="widget in coll.list" :key="widget.uid">
|
|
<component :is="widget.type" v-bind="widget.data" />
|
|
</v-flex>
|
|
<v-flex v-if="!coll.list.length" :key="`${coll.uid}--more`">
|
|
---
|
|
</v-flex>
|
|
</transition-group>
|
|
</draggable>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
// :grow="coll.size === 'g'" :shrink="coll.size === 's'"
|
|
import draggable from 'vuedraggable'
|
|
import TeText from './TeText.vue'
|
|
import TeImg from './TeImg.vue'
|
|
|
|
export default {
|
|
components: { draggable, TeText, TeImg },
|
|
props: {
|
|
colls: { type: Array, default: () => [] }
|
|
},
|
|
data: () => ({
|
|
fullText: false,
|
|
text: 'Nisi ex cillum ut mollit. Eiusmod velit ea labore do esse magna commodo occaecat. Irure ex velit culpa elit excepteur incididunt dolore fugiat esse veniam amet. Cupidatat duis voluptate quis dolor dolor veniam duis aliqua eu proident ipsum tempor cupidatat. Occaecat ea officia anim exercitation officia enim quis mollit id veniam id eiusmod qui in. Proident eu do cillum eu quis occaecat ex ipsum adipisicing exercitation ad elit sunt.',
|
|
drag: false
|
|
}),
|
|
computed: {
|
|
dragOptions () {
|
|
return {
|
|
animation: 200,
|
|
group: 'description',
|
|
disabled: false,
|
|
ghostClass: 'ghost'
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
},
|
|
methods: {
|
|
getSize (coll) {
|
|
return `md${coll.size}`
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.te-section {
|
|
min-height: 100px;
|
|
outline: 1px dashed;
|
|
margin-bottom: 1em;
|
|
/* position: relative; */
|
|
}
|
|
.te-coll {
|
|
/* position: relative; */
|
|
}
|
|
.te-coll--menu {
|
|
position: absolute;
|
|
height:30px;
|
|
top:-30px;
|
|
background: blue;
|
|
}
|
|
.item {
|
|
min-width: 100px;
|
|
min-height: 30px;
|
|
margin: 10px;
|
|
text-align: center;
|
|
}
|
|
.ghost {
|
|
opacity: 0.5;
|
|
background: #c8ebfb;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
@media (min-width: 1904px) {
|
|
.container {
|
|
max-width: 1300px!important;
|
|
padding: 0;
|
|
}
|
|
}
|
|
</style>
|