feat: add isSameTab allowing user to compare two tabs by their data

Author: RiadhAdrani

src/App.vue

@@ -3,28 +3,25 @@ import { Direction } from "./lib/types";
 import useLayout, { createLayout, createTab } from "./lib/useLayout";
 import VLayout from "./lib/VLayout.vue";
 
-const options = useLayout(
+const { options } = useLayout(
  createLayout({
  direction: Direction.Column,
  children: [
  createLayout({
- children: [
- createTab({ title: "1", data: { id: 1 } }),
- createTab({ title: "2", data: { id: 2 } }),
- ],
+ children: [createTab({ title: "Hello" })],
  }),
  createLayout({
- children: [
- createTab({ title: "3", data: { id: 3 } }),
- createTab({ title: "4", data: { id: 4 } }),
- ],
+ children: [createTab({ title: "2" }), createTab({ title: "3" })],
  }),
  ],
  }),
  {
- onUnknownDropped(data) {
+ onUnknownDropped(data: Record<string, unknown>) {
  return createTab({ title: "Data", data });
  },
+ areSameTab() {
+ return false;
+ },
  }
 );
 </script>
@@ -33,9 +30,7 @@ const options = useLayout(
  <VLayout :options="options">
  <template #tab="props">
  <div>
- {{ 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.
+ <h3>{{ props.id }}</h3>
  </div>
  </template>
  </VLayout>

src/lib/VLayout.vue

@@ -1,14 +1,18 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 import { Layout, Tab, UIType, Direction, Side, UseLayoutOutput } from "./types";
-import { getType, getTab, useOnDrop, useCloseTab, useToggleTab } from "./useLayout";
+import { getType, getTab } from "./useLayout";
 import VTabButton from "./VTabButton.vue";
 import VTabContent from "./VTabContent.vue";
 
 const { options } = defineProps<{
  options: UseLayoutOutput;
 }>();
 
+if ((options.tree.type as any) === UIType.Tab) {
+ console.log(options.tree);
+}
+
 const forLayouts = computed(() => getType(options.tree.children) === UIType.Layout);
 
 const isEmpty = computed(() => options.tree.children.length === 0);
@@ -23,7 +27,7 @@ const classList = computed(() => {
  list.push("clv__layout-container-col");
  }
 
- return list.toString();
+ return list.join(" ");
 });
 
 const toggle = (id: string) => {
@@ -68,7 +72,7 @@ const dropped = ({ side, ev }: { ev: DragEvent; side: Side }) => {
  ></slot>
  </VTabContent>
  </div>
- <div v-else class="clv__layouts-container" :class="classList">
+ <div v-else-if="forLayouts" class="clv__layouts-container" :class="classList">
  <VLayout
  v-for="item in (options.tree.children as Array<Layout>)"
  :key="item.id"

src/lib/VTabButton.vue

@@ -17,7 +17,6 @@ const onDragStart = (e: DragEvent) => {
  const data: DraggedTab = {
  id: item.id,
  type: UIType.Tab,
- title: item.title,
  data: item.data,
  signature: "__dragged__tab__",
  };

src/lib/tests/useLayout.test.ts

@@ -35,7 +35,11 @@ describe("useLayout", () => {
 
  describe("createLayout", () => {
  it("should create a layout template with minimal options", () => {
- expect(createLayout({ children: [] })).toStrictEqual({ children: [], type: UIType.Layout });
+ expect(createLayout({ children: [] })).toStrictEqual({
+ children: [],
+ type: UIType.Layout,
+ direction: undefined,
+ });
  });
 
  it("should create a layout template with minimal options", () => {
@@ -748,7 +752,7 @@ describe("useLayout", () => {
  })
  );
 
- useAddTab(createTab({ title: "5", data: { id: 5 } }), layout, 1);
+ useAddTab(createTab({ title: "5", data: { id: 5 } }), layout, () => false, 1);
 
  expect(layout.children.length).toBe(4);
  expect(layout.children[0].title).toBe("1");
@@ -757,6 +761,25 @@ describe("useLayout", () => {
  expect(layout.children[2].title).toBe("2");
  expect(layout.children[3].title).toBe("3");
  });
+
+ it("should not add tab", () => {
+ const layout = transformLayoutTemplate(
+ createLayout({
+ children: [
+ createTab({ title: "1" }),
+ createTab({ title: "2" }),
+ createTab({ title: "3" }),
+ ],
+ })
+ );
+
+ useAddTab(createTab({ title: "5", data: { id: 5 } }), layout, () => true, 1);
+
+ expect(layout.children.length).toBe(3);
+ expect(layout.children[0].title).toBe("1");
+ expect(layout.children[1].title).toBe("2");
+ expect(layout.children[2].title).toBe("3");
+ });
  });
 
  describe("useOnDrop", () => {
@@ -765,9 +788,15 @@ describe("useLayout", () => {
  createLayout({ children: [createTab({ title: "1", data: { id: 1 } })] })
  );
 
- useOnDrop({ id: 2 }, layout, Side.Center, (data) => {
- return createTab({ title: "2", data });
- });
+ useOnDrop(
+ { id: 2 },
+ layout,
+ Side.Center,
+ () => false,
+ (data) => {
+ return createTab({ title: "2", data });
+ }
+ );
 
  expect(layout.children.length).toBe(2);
  expect(layout.children[0].data).toStrictEqual({ id: 1 });
@@ -802,7 +831,13 @@ describe("useLayout", () => {
  id: parent.children[1].children[0].id,
  };
 
- useOnDrop(data, layout, Side.Center, () => undefined);
+ useOnDrop(
+ data,
+ layout,
+ Side.Center,
+ () => false,
+ () => undefined
+ );
 
  expect(layout.children.length).toBe(3);
  expect(layout.children[0].data).toStrictEqual({ id: 1 });
@@ -829,9 +864,15 @@ describe("useLayout", () => {
  createLayout({ children: [createTab({ title: "1", data: { id: 1 } })] })
  );
 
- useOnDrop({ id: 2 }, layout, side, (data) => {
- return createTab({ title: "2", data });
- });
+ useOnDrop(
+ { id: 2 },
+ layout,
+ side,
+ () => false,
+ (data) => {
+ return createTab({ title: "2", data });
+ }
+ );
 
  expect(layout.children.length).toBe(2);
  expect(getType(layout.children)).toBe(UIType.Layout);
@@ -854,6 +895,24 @@ describe("useLayout", () => {
  }
  );
 
+ it("should not add tab to the center", () => {
+ const layout = transformLayoutTemplate(
+ createLayout({ children: [createTab({ title: "1", data: { id: 1 } })] })
+ );
+
+ useOnDrop(
+ { id: 2 },
+ layout,
+ Side.Center,
+ () => true,
+ (data) => {
+ return createTab({ title: "2", data });
+ }
+ );
+
+ expect(layout.children.length).toBe(1);
+ });
+
  describe("Parent with same direction as drop", () => {
  let parent: Layout<Layout>;
 
@@ -881,9 +940,15 @@ describe("useLayout", () => {
 
  const layout = parent.children[1];
 
- useOnDrop({ id: "test" }, layout, side, (data) => {
- return createTab({ title: "test", data });
- });
+ useOnDrop(
+ { id: "test" },
+ layout,
+ side,
+ () => false,
+ (data) => {
+ return createTab({ title: "test", data });
+ }
+ );
 
  expect(parent.children.length).toBe(4);
 
@@ -938,9 +1003,15 @@ describe("useLayout", () => {
  parent.direction = direction;
  const layout = parent.children[0];
 
- useOnDrop({ id: "test" }, layout, side, (data) => {
- return createTab({ title: "test", data });
- });
+ useOnDrop(
+ { id: "test" },
+ layout,
+ side,
+ () => false,
+ (data) => {
+ return createTab({ title: "test", data });
+ }
+ );
 
  expect(parent.children.length).toBe(3);
 
@@ -979,5 +1050,117 @@ describe("useLayout", () => {
  expect(l3.children[0].title).toBe("3");
  });
  });
+
+ it("should move tab from Layout<Tab> to the [Right] of same level Layout<Tab>", () => {
+ const parent = transformLayoutTemplate(
+ createLayout({
+ direction: Direction.Column,
+ children: [
+ createLayout({
+ children: [createTab({ title: "1", data: { id: 1 } })],
+ }),
+ createLayout({
+ children: [createTab({ title: "2", data: { id: 2 } })],
+ }),
+ ],
+ })
+ ) as unknown as Layout<Layout>;
+
+ const layout = parent.children[0];
+
+ const id = parent.children[1].children[0].id;
+
+ const dragData: DraggedTab = {
+ id,
+ signature: "__dragged__tab__",
+ type: UIType.Tab,
+ data: parent.children[1].children[0].data,
+ };
+
+ useOnDrop(
+ dragData,
+ layout,
+ Side.Right,
+ () => false,
+ () => undefined
+ );
+
+ expect(parent.direction).toBe(Direction.Row);
+ expect(parent.type).toBe(UIType.Layout);
+
+ expect(parent.children.length).toBe(2);
+
+ const c1 = parent.children[0];
+ expect(c1.parent === parent).toBe(true);
+ expect(c1.children.length).toBe(1);
+ expect(c1.children[0].title).toBe("1");
+ expect(c1.children[0].data).toStrictEqual({ id: 1 });
+
+ const c2 = parent.children[1];
+ expect(c2.parent === parent).toBe(true);
+ expect(c2.children.length).toBe(1);
+ expect(c2.children[0].title).toBe("2");
+ expect(c2.children[0].data).toStrictEqual({ id: 2 });
+ });
+
+ it("should move tab from Layout<Tab> to the [Right] of same level Layout<Tab>", () => {
+ const parent = transformLayoutTemplate(
+ createLayout({
+ direction: Direction.Column,
+ children: [
+ createLayout({
+ children: [createTab({ title: "1", data: { id: 1 } })],
+ }),
+ createLayout({
+ children: [createTab({ title: "2", data: { id: 2 } })],
+ }),
+ createLayout({
+ children: [createTab({ title: "3", data: { id: 3 } })],
+ }),
+ ],
+ })
+ ) as unknown as Layout<Layout>;
+
+ const layout = parent.children[0];
+
+ const id = parent.children[1].children[0].id;
+
+ const dragData: DraggedTab = {
+ id,
+ signature: "__dragged__tab__",
+ type: UIType.Tab,
+ data: parent.children[1].children[0].data,
+ };
+
+ useOnDrop(
+ dragData,
+ layout,
+ Side.Right,
+ () => false,
+ () => undefined
+ );
+
+ expect(parent.direction).toBe(Direction.Column);
+ expect(parent.type).toBe(UIType.Layout);
+
+ expect(parent.children.length).toBe(2);
+
+ const c1 = parent.children[0] as unknown as Layout<Layout>;
+ expect(c1.parent === parent).toBe(true);
+ expect(getType(c1.children)).toBe(UIType.Layout);
+ expect(c1.children.length).toBe(2);
+ expect(c1.active).toBeUndefined;
+ expect(c1.children[0].children[0].title).toBe("1");
+ expect(c1.children[0].children[0].data).toStrictEqual({ id: 1 });
+ expect(c1.children[1].children[0].title).toBe("2");
+ expect(c1.children[1].children[0].data).toStrictEqual({ id: 2 });
+
+ const c2 = parent.children[1];
+ expect(c2.parent === parent).toBe(true);
+ expect(c2.children.length).toBe(1);
+ expect(c2.type).toBe(UIType.Layout);
+ expect(c2.children[0].title).toBe("3");
+ expect(c2.children[0].data).toStrictEqual({ id: 3 });
+ });
  });
 });

src/lib/types.ts

@@ -52,7 +52,12 @@ export interface LayoutActions {
  toggleTab: (id: string) => void;
  closeTab: (id: string) => void;
  addTab: (tab: TabTemplate, LayoutId: string, position?: number) => void;
- onDrop: (data: Record<string, unknown>, layoutId: string, side: Side) => void;
+ onDrop: (
+ data: Record<string, unknown>,
+ layoutId: string,
+ side: Side,
+ isSame?: (t1: any, t2: any) => boolean
+ ) => void;
 }
 
 export type DraggedSignature = "__dragged__tab__";
@@ -62,8 +67,9 @@ export interface DraggedTab extends Omit<TabTemplate<Record<string, unknown>>, "
  signature: DraggedSignature;
 }
 
-export interface UseLayoutOptions {
+export interface UseLayoutOptions<T> {
  onUnknownDropped: (data: Record<string, unknown>) => TabTemplate | undefined;
+ areSameTab?: (tab1Data: T, tab2Data: T) => boolean;
 }
 
 export interface UseLayoutOutput {