Mentions légales du service

Skip to content
Snippets Groups Projects
Commit fe523f51 authored by NathanViaud's avatar NathanViaud
Browse files

not working transition-group

This example work on an external project
parent b095103e
No related branches found
No related tags found
1 merge request!5front
......@@ -3,6 +3,7 @@ import { Card } from '@/src/shared/interfaces';
import AddCard from './AddCard.vue';
import CardInput from './CardInput.vue';
import draggable from 'vuedraggable';
import { ref } from 'vue';
defineProps<{
type: string;
......@@ -19,34 +20,61 @@ const emit = defineEmits<{
(e: 'swapCard', event): void;
}>();
const drag = ref(false);
const dragOptions = ref({
animation: 200,
group: 'cards',
disabled: false,
ghostClass: 'ghost',
});
</script>
<template>
<h3 v-if="fieldName" class="field-title"><span v-if="fieldIndex" class="field-index">{{ fieldIndex }}. </span>{{ fieldName }}</h3>
<hr v-if="fieldName" class="separator">
<draggable
:model-value="cards"
item-key="index"
handle=".card-header"
ghost-class="ghost"
@change="emit('swapCard', $event)"
>
<template #item="{element, index}">
<CardInput
:pos="index + 1"
:card="element"
:is-last="index === cards.length - 1"
@input="element.value = $event"
@delete-card="emit('deleteCard', index)"
@move-up-card="emit('moveUpCard', index)"
@move-down-card="emit('moveDownCard', index)"
/>
</template>
</draggable>
<transition-group>
<draggable
key="draggable"
:model-value="cards"
item-key="index"
handle=".card-header"
ghost-class="ghost"
v-bind="dragOptions"
@change="emit('swapCard', $event)"
@start="drag = true"
@end="drag = false"
>
<template #item="{element, index}">
<CardInput
:key="index"
class="list-group-item"
:pos="index + 1"
:card="element"
:is-last="index === cards.length - 1"
@input="element.value = $event"
@delete-card="emit('deleteCard', index)"
@move-up-card="emit('moveUpCard', index)"
@move-down-card="emit('moveDownCard', index)"
/>
</template>
</draggable>
</transition-group>
<AddCard
:placeholder="'Ajouter'"
class="add-card"
@click="emit('addCard')"
/>
</template>
\ No newline at end of file
</template>
<style lang="scss">
.flip-list-move {
transition: transform 0.5s;
}
.no-move {
transition: transform 0s;
}
</style>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment