Implement a TabView component

[garyvh2]

It would be like a single group grid view. One could have separate instances of TabView and only Tabs could be dragged between each other, or be reordered within the same view.

So I could drag a tab between tabview 1 into tabview 2 and so on.

I could help trying to implement this if I get some guidelines, I tried to cut off features from GridView to achieve this, but I got lost on the way.

An instance of this view would look like this

The data could be something like:

{
  container: {
    views: ['panel_1', 'panel_2', 'panel_3'],
    width: 300,
    height: 200,
    orientation: Orientation.HORIZONTAL,
  },
  panels: {
    panel_1: {
      id: 'panel_1',
      contentComponent: 'Panel',
      title: 'panel_1',
    },
    panel_2: {
      id: 'panel_2',
      contentComponent: 'Panel',
      title: 'panel_2',
    },
    panel_3: {
      id: 'panel_3',
      contentComponent: 'Panel',
      title: 'panel_3',
    },
  },
  activeView: '1',
}

[techbech]

Sorry, I'm trying to understand, but I'm not getting it. Can you elaborate?

Also, these two sentences seem to contradict each other.

only Tabs could be dragged between each other, or be reordered within the same view.

So I could drag a tab between tabview 1 into tabview 2 and so on.

[garyvh2]

For reference we could have a look at this syncfusion component.

The expected behavior is to have something like this.

Screen.Recording.2023-11-20.at.16.12.46.mov

Tabs can be dragged within themselves, and tabs can be dragged between 2 different instances of TabView

By two instances I mean tabs on tabview-1 can be dragged into tabview-2

<TabView className="tabview-1"/>
<TabView className="tabview-2"/>

[techbech]

I think I understand, but just to make just be sure I understand correctly, could you confirm to me what is not correct about this example https://codesandbox.io/s/tender-leavitt-46rgwy?file=/src/app.tsx? I have an idea what you might think is wrong, but if you could just explain it so I don't make any wrong assumptions.

[garyvh2]

Here's a demo

https://youtu.be/mty3yb_aBO4

Achieving this scenarios is unexpected for my use case, as I would only like tab manipulation.

Edge target

Panel Target

Also I need the Tab View's to be only reactive to the Tab and void-container.

Additionally the demo has both grids together, my use case will have 2 different browser windows, and they will be dragging one into the other, the library itself won't be supporting that, but I'll handle those scenarios through onDidDrop

The main idea of TabView is to be a simple tab navigation component, so it only works for tabs, switching between those and drag and drop enabled functions on tabs.

[techbech]

Hmm, okay. Let's see if I got this right then.

You would like some way to tell that a tab can only be dropped on top of a group, and not next to it, so that the grid stays fixed. The first question that then comes to mind is, what if the group becomes empty? Looking at the syncfusion example the group just disappears when you remove the last tab. Is this also the behaviour you're looking for?

[garyvh2]

That would be ok, the user should be able to handle that behavior on their end. The idea is to only have the tabs interactions, no docking. I've been working of an custom build implementation, that we can use on our end, but it would still be cool if it could be achieved by dockview as a tabview standalone component.

https://wdyl4v.csb.app/