refactor(@vben-core/tabs-ui): refactor tabs chrome component

packages/@core/shared/hooks/src/index.ts

@@ -0,0 +1 @@
+export * from './use-sortable';

packages/@core/shared/hooks/src/use-sortable.test.ts

@@ -0,0 +1,46 @@
+import type { SortableOptions } from 'sortablejs';
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useSortable } from './use-sortable';
+
+describe('useSortable', () => {
+  beforeEach(() => {
+    vi.mock('sortablejs', () => ({
+      default: {
+        create: vi.fn(),
+      },
+    }));
+  });
+  it('should call Sortable.create with the correct options', async () => {
+    // Create a mock element
+    const mockElement = document.createElement('div') as HTMLDivElement;
+
+    // Define custom options
+    const customOptions: SortableOptions = {
+      group: 'test-group',
+      sort: false,
+    };
+
+    // Use the useSortable function
+    const { initializeSortable } = useSortable(mockElement, customOptions);
+
+    // Initialize sortable
+    await initializeSortable();
+
+    // Import sortablejs to access the mocked create function
+    const Sortable = await import('sortablejs');
+
+    // Verify that Sortable.create was called with the correct parameters
+    expect(Sortable.default.create).toHaveBeenCalledTimes(1);
+    expect(Sortable.default.create).toHaveBeenCalledWith(
+      mockElement,
+      expect.objectContaining({
+        animation: 100,
+        delay: 400,
+        delayOnTouchOnly: true,
+        ...customOptions,
+      }),
+    );
+  });
+});

packages/@core/shared/hooks/src/use-sortable.ts

@@ -0,0 +1,33 @@
+import type { SortableOptions } from 'sortablejs';
+
+function useSortable<T extends HTMLElement>(
+  sortableContainer: T,
+  options: SortableOptions = {},
+) {
+  const initializeSortable = async () => {
+    const Sortable = await import(
+      // @ts-expect-error - This is a dynamic import
+      'sortablejs/modular/sortable.complete.esm.js'
+    );
+    // const { AutoScroll } = await import(
+    //   // @ts-expect-error - This is a dynamic import
+    //   'sortablejs/modular/sortable.core.esm.js'
+    // );
+
+    // Sortable?.default?.mount?.(AutoScroll);
+
+    const sortable = Sortable?.default?.create?.(sortableContainer, {
+      animation: 100,
+      delay: 400,
+      delayOnTouchOnly: true,
+      ...options,
+    });
+    return sortable;
+  };
+
+  return {
+    initializeSortable,
+  };
+}
+
+export { useSortable };