You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
1.6 KiB
Vue
102 lines
1.6 KiB
Vue
<template>
|
|
|
|
<section class="scene">
|
|
|
|
|
|
<h2>{{title}}</h2>
|
|
|
|
|
|
|
|
<draggable
|
|
tag="transition-group"
|
|
:component-data="{
|
|
tag: 'div',
|
|
type: 'transition-group',
|
|
name: !drag ? 'flip-list' : null
|
|
}"
|
|
v-bind="dragOptions"
|
|
group="shots"
|
|
class="shots list-group"
|
|
:list="shots"
|
|
@start="drag=true"
|
|
@end="drag=false"
|
|
item-key="id">
|
|
|
|
<template #footer>
|
|
<AddShot @add="add"/>
|
|
</template>
|
|
|
|
<template #item="{element, index}">
|
|
<ShotEntry
|
|
:title="element.title"
|
|
:description="element.description"
|
|
:img="element.img"
|
|
:order="index + 1"
|
|
@remove="remove(index)"
|
|
/>
|
|
</template>
|
|
</draggable>
|
|
|
|
</section>
|
|
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import draggable from 'vuedraggable'
|
|
import AddShot from '../components/AddShot.vue'
|
|
import ShotEntry from '../components/ShotEntry.vue'
|
|
|
|
import {ref, computed} from 'vue'
|
|
|
|
const props = defineProps(['title'])
|
|
|
|
const shots = ref([])
|
|
const drag = ref(false)
|
|
|
|
const dragOptions = computed(()=> {
|
|
return {
|
|
animation: 200,
|
|
group: "description",
|
|
disabled: false,
|
|
ghostClass: "ghost"
|
|
}})
|
|
|
|
|
|
const add = (e) => {
|
|
shots.value.push(e)
|
|
}
|
|
|
|
const remove = (index) => {
|
|
shots.value.splice(index, 1)
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.shots {
|
|
margin-block: 32px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
}
|
|
|
|
.ghost {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.scene {
|
|
margin-block: 32px;
|
|
}
|
|
|
|
.scene h2 {
|
|
margin-block: 32px;
|
|
}
|
|
|
|
</style>
|