fix: use of sortable js with transition-group #2160

Merged
konrad merged 1 commits from dpschen/frontend:feature/fix-sortable-transition-group into main 2022-07-19 14:32:13 +00:00
3 changed files with 8 additions and 9 deletions

View File

@ -88,13 +88,12 @@
@end="saveListPosition" @end="saveListPosition"
handle=".handle" handle=".handle"
:disabled="n.id < 0 || undefined" :disabled="n.id < 0 || undefined"
tag="transition-group" tag="ul"
item-key="id" item-key="id"
:data-namespace-id="n.id" :data-namespace-id="n.id"
:data-namespace-index="nk" :data-namespace-index="nk"
:component-data="{ :component-data="{
type: 'transition', type: 'transition-group',
tag: 'ul',
name: !drag ? 'flip-list' : null, name: !drag ? 'flip-list' : null,
class: [ class: [
'menu-list can-be-hidden', 'menu-list can-be-hidden',

View File

@ -25,7 +25,7 @@
@start="() => dragBucket = true" @start="() => dragBucket = true"
group="buckets" group="buckets"
:disabled="!canWrite" :disabled="!canWrite"
tag="transition-group" tag="ul"
:item-key="({id}) => `bucket${id}`" :item-key="({id}) => `bucket${id}`"
:component-data="bucketDraggableComponentData" :component-data="bucketDraggableComponentData"
> >
@ -133,7 +133,7 @@
:group="{name: 'tasks', put: shouldAcceptDrop(bucket) && !dragBucket}" :group="{name: 'tasks', put: shouldAcceptDrop(bucket) && !dragBucket}"
:disabled="!canWrite" :disabled="!canWrite"
:data-bucket-index="bucketIndex" :data-bucket-index="bucketIndex"
tag="transition-group" tag="ul"
:item-key="(task) => `bucket${bucket.id}-task${task.id}`" :item-key="(task) => `bucket${bucket.id}-task${task.id}`"
:component-data="getTaskDraggableTaskComponentData(bucket)" :component-data="getTaskDraggableTaskComponentData(bucket)"
> >
@ -316,8 +316,7 @@ export default defineComponent({
return (bucket) => ({ return (bucket) => ({
ref: (el) => this.setTaskContainerRef(bucket.id, el), ref: (el) => this.setTaskContainerRef(bucket.id, el),
onScroll: (event) => this.handleTaskContainerScroll(bucket.id, bucket.listId, event.target), onScroll: (event) => this.handleTaskContainerScroll(bucket.id, bucket.listId, event.target),
type: 'transition', type: 'transition-group',
tag: 'div',
name: !this.drag ? 'move-card' : null, name: !this.drag ? 'move-card' : null,
class: [ class: [
'tasks', 'tasks',
@ -337,8 +336,7 @@ export default defineComponent({
}, },
bucketDraggableComponentData() { bucketDraggableComponentData() {
return { return {
type: 'transition', type: 'transition-group',
tag: 'div',
name: !this.dragBucket ? 'move-bucket' : null, name: !this.dragBucket ? 'move-bucket' : null,
class: [ class: [
'kanban-bucket-container', 'kanban-bucket-container',

View File

@ -84,8 +84,10 @@
handle=".handle" handle=".handle"
:disabled="!canWrite" :disabled="!canWrite"
item-key="id" item-key="id"
tag="ul"
:component-data="{ :component-data="{
class: { 'dragging-disabled': !canWrite || isAlphabeticalSorting }, class: { 'dragging-disabled': !canWrite || isAlphabeticalSorting },
type: 'transition-group'
}" }"
> >
<template #item="{element: t}"> <template #item="{element: t}">