Connect two Kanban components

[aislanmaia]

How to connect two Kanban components ?
If this is not possible right now, this could be a good enhancement for this library.

I need to use two separated kanban components, in such way one of them is hidden through a drawer. When dragging one card from the first kanban, I would like to drag it to the second one.

[BrockReece]

Good idea. It is not possible at the moment, but it could be something I look into.

[aislanmaia]

How do you think could be an api for this?
Looking into the source, seems the blocks are just local for each kanban. I know nothing about dragula though.

[BrockReece]

Yeah, I'm not sure yet, I'm thinking along the lines of having a HOC to wrap around multiple kanban instances.

[BrockReece]

Hi, when I was looking into a fix for this, I think you may be able to do this already without needing any changes to this package.

You can do it by adding two kanban components and giving them refs (I have used kanban-1 and kanban-2 in this example).

<kanban-board :stages="stages1" :blocks="blocks1" ref="kanban-1" />
<kanban-board :stages="stages2" :blocks="blocks2" ref="kanban-2" />

Then in the mounted method, we can destroy the second kanban's instance of dragula and then push each column in the second kanban board to be part of the first kanban's dragula instance.

mounted() {
  this.$refs['kanban-2'].drake.destroy(); 
  this.$refs['kanban-2'].$refs.list.forEach((list) => {
    this.$refs['kanban-1'].drake.containers.push(list);
  });
}

I have just tested this locally and it appears to work.
I can work this into a proper HOC if it works for you.

[aislanmaia]

Oh my, good work man! Thanks for this!!! I've accomplished my goal with just one kanban instance.
What I made was just to change the position of my two last columns to the right side (side of my nav-drawer), and make the adjustaments in css for them, so that I put absolute positioning and animated them separatelly when opening and closing the drawer. This will cause the impression that they are contained in the nav-drawer.

Yeah, this is not ideal, and for me, the ideal scenario is really make use of two instances, because we will not need to mess with css workarounds.

I've made some changes to the package as well, like exposing the events for dragstar, dropend, etc. I think this could be a good improvement for this package, since this will offer more control. This was trivial. (lines 62 and 80)

Another useful thing could be expose the html, so we have more control for adding and removing classes, tags, etc dynamically. Some inspiration you can get from this example demo code of vue-draggable that seems have the same html structure vue-kanban has.

[aislanmaia]

I would like to ask for you how we can add some effects for the card list like the trello effect.
I searched for something but just found the class for the drop shadow styles.
Here is some example I got from the vue-smooth-dnd kanban example. The cards are moving up and down.

[aislanmaia]

I have just tested this locally and it appears to work.
I can work this into a proper HOC if it works for you.

I'll try this ASAP!! 😎