fix: useCloseTab not working as intended

Author: RiadhAdrani

src/App.vue

@@ -1,24 +1,27 @@
 <script setup lang="ts">
-import { Direction } from "./lib/types";
+import { Direction, Tab } from "./lib/types";
 import useLayout, { createLayout, createTab } from "./lib/useLayout";
 import VLayout from "./lib/VLayout.vue";
 
 const { tree, actions } = useLayout(
  createLayout({
  direction: Direction.Column,
- id: "1",
  children: [
  createLayout({
- id: "1-1",
+ children: [createTab({ title: "Tab 1" }), createTab({ title: "Tab 2" })],
+ }),
+ createLayout({
  children: [
- createTab({ title: "Tab 1", id: "1" }),
- createTab({ title: "Tab 2", id: "2" }),
- createTab({ title: "Tab 3", id: "3" }),
+ createLayout({
+ children: [createTab({ title: "Tab 3" }), createTab({ title: "Tab 4" })],
+ }),
+ createLayout({
+ children: [createTab({ title: "Tab 5" }), createTab({ title: "Tab 6" })],
+ }),
  ],
  }),
  createLayout({
- id: "1-2",
- children: [createTab({ title: "Hello", id: "4" })],
+ children: [createTab({ title: "Tab 7" })],
  }),
  ],
  })
@@ -29,7 +32,7 @@ const { tree, actions } = useLayout(
  <VLayout :template="tree" :actions="actions">
  <template #tab="props">
  <div>
- {{ props.id }} => Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis
+ {{ props.title }} => Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis
  quis eveniet consequuntur vel! Ducimus, eligendi? Et laboriosam reiciendis magni quidem cum,
  iste veritatis nam vero accusantium? Odit, facilis. Ipsam, at.
  </div>

src/lib/VLayout.vue

@@ -10,7 +10,7 @@ import {
  DraggedTab,
  TabTemplate,
 } from "./types";
-import { getType, getTab, createTab, findUiByPath, getRoot } from "./useLayout";
+import { getType, getTab, createTab, findUiByPath, getRoot, findTab } from "./useLayout";
 import VTabButton from "./VTabButton.vue";
 import VTabContent from "./VTabContent.vue";
 
@@ -45,7 +45,6 @@ const close = (id: string) => {
 };
 
 const dropped = ({ side, ev }: { ev: DragEvent; side: Side }) => {
- // TODO : create tab with events.onDrop
  let data: Record<string, unknown> = {};
  let tab: TabTemplate | undefined = undefined;
 
@@ -56,28 +55,27 @@ const dropped = ({ side, ev }: { ev: DragEvent; side: Side }) => {
  if (
  data.type === UIType.Tab &&
  data.signature === "__dragged__tab__" &&
- typeof data.id === "string" &&
- Array.isArray(data.parents)
+ typeof data.id === "string"
  ) {
  const $data = data as unknown as DraggedTab;
- // TODO : we should remove the tab from its original position and create it here
 
- const $tab = findUiByPath(
- $data.id,
- $data.parents,
- getRoot(template) as unknown as Layout<Layout>
- ) as Tab;
+ const $exist = findTab(data.id, template);
 
- actions.useCloseTab($tab.id, $tab.parent);
+ if ($exist && template.children.length === 1) {
+ return;
+ }
+
+ const $tab = findTab($data.id, getRoot(template));
 
  tab = createTab($data);
+
+ if (tab && $tab) {
+ actions.useOnDrop(tab, template as Layout, side);
+ actions.useCloseTab($tab.id, $tab.parent);
+ }
  } else {
  // TODO : allow user to create tab with drag event
  }
-
- if (tab) {
- actions.useOnDrop(tab, template as Layout, side);
- }
 };
 </script>
 
@@ -121,6 +119,7 @@ const dropped = ({ side, ev }: { ev: DragEvent; side: Side }) => {
  display: flex;
  flex-direction: column;
  flex: 1;
+ padding: 2px;
 }
 
 .clv__tabs-container {

src/lib/VTabButton.vue

@@ -15,15 +15,12 @@ const close = () => {
 };
 
 const onDragStart = (e: DragEvent) => {
- const parents = getParentsHierarchy(item).reverse().slice(1);
-
  const data: DraggedTab = {
  id: item.id,
  type: UIType.Tab,
  title: item.title,
  data: item.data,
  signature: "__dragged__tab__",
- parents,
  };
 
  e.dataTransfer?.setData("text/plain", JSON.stringify(data));