From fe523f51085ba252c0abca75aec26246f15e1b05 Mon Sep 17 00:00:00 2001
From: NathanViaud <79544144+NathanViaud@users.noreply.github.com>
Date: Fri, 20 Jan 2023 16:41:58 +0100
Subject: [PATCH] not working transition-group
This example work on an external project
---
.../components/inputs/card/CardGroup.vue | 68 +++++++++++++------
1 file changed, 48 insertions(+), 20 deletions(-)
diff --git a/src/features/forms/components/inputs/card/CardGroup.vue b/src/features/forms/components/inputs/card/CardGroup.vue
index 54f15368..52defc6f 100644
--- a/src/features/forms/components/inputs/card/CardGroup.vue
+++ b/src/features/forms/components/inputs/card/CardGroup.vue
@@ -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
--
GitLab