@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/tabs/controllers/base.controller.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveControllerHost } from 'lit';
+import { TabItem } from '../tabs.types.js';
+import { BaseComponentController } from '@nuralyui/common/controllers';
+export type { ErrorHandler } from '@nuralyui/common/controllers';
+/**
+ * Base interface for tabs host element
+ */
+export interface TabsHost extends EventTarget {
+    /** Currently active tab index */
+    activeTab: number;
+    /** Array of tab items */
+    tabs: TabItem[];
+    /** Whether component is disabled */
+    disabled?: boolean;
+    /** Current theme */
+    currentTheme: string;
+    /** Whether component is available */
+    isComponentAvailable(component: string): boolean;
+    /** Shadow root access */
+    shadowRoot: ShadowRoot | null;
+    /** Request update */
+    requestUpdate(): void;
+}
+/**
+ * Base interface for tabs controllers
+ */
+export interface TabsBaseController {
+    readonly host: TabsHost;
+}
+/**
+ * Abstract base controller class that implements common functionality
+ * for all tabs component controllers
+ */
+export declare abstract class BaseTabsController extends BaseComponentController<TabsHost & ReactiveControllerHost> implements TabsBaseController {
+    /**
+     * Helper method to check if tab is valid
+     */
+    protected isValidTabIndex(index: number): boolean;
+    /**
+     * Helper method to get tab element by index
+     */
+    protected getTabElement(index: number): Element | null;
+}
+//# sourceMappingURL=base.controller.d.ts.map

package/dist/src/components/tabs/controllers/base.controller.js

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseComponentController } from '@nuralyui/common/controllers';
+/**
+ * Abstract base controller class that implements common functionality
+ * for all tabs component controllers
+ */
+export class BaseTabsController extends BaseComponentController {
+    /**
+     * Helper method to check if tab is valid
+     */
+    isValidTabIndex(index) {
+        return index >= 0 && index < this.host.tabs.length;
+    }
+    /**
+     * Helper method to get tab element by index
+     */
+    getTabElement(index) {
+        var _a;
+        return ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-index="${index}"]`)) || null;
+    }
+}
+//# sourceMappingURL=base.controller.js.map

package/dist/src/components/tabs/controllers/dragdrop.controller.d.ts

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TabsHost, BaseTabsController } from './base.controller.js';
+import { ReactiveControllerHost } from 'lit';
+/**
+ * Drag and drop controller interface for tabs components
+ */
+export interface DragDropController {
+    handleDragStart(event: DragEvent): void;
+    handleDragOver(event: DragEvent): void;
+    handleDragEnter(event: DragEvent): void;
+    handleDragLeave(event: DragEvent): void;
+    handleDrop(event: DragEvent): void;
+}
+/**
+ * Enhanced tabs host interface for drag and drop functionality
+ */
+export interface TabsDragDropHost extends TabsHost {
+    editable?: {
+        canMove?: boolean;
+    };
+    dispatchEventWithMetadata(eventName: string, detail: any): void;
+}
+/**
+ * Drag and drop controller manages drag and drop functionality for tabs components
+ * Handles all drag events and tab reordering
+ */
+export declare class TabsDragDropController extends BaseTabsController implements DragDropController {
+    protected _host: TabsDragDropHost & ReactiveControllerHost;
+    private dragOverHandler;
+    constructor(host: TabsDragDropHost & ReactiveControllerHost);
+    get host(): TabsDragDropHost & ReactiveControllerHost;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Handle drag start event
+     * @param event - The drag event
+     */
+    handleDragStart(event: DragEvent): void;
+    /**
+     * Handle drag over event
+     * @param event - The drag event
+     */
+    handleDragOver(event: DragEvent): void;
+    /**
+     * Handle drag enter event
+     * @param event - The drag event
+     */
+    handleDragEnter(event: DragEvent): void;
+    /**
+     * Handle drag leave event
+     * @param event - The drag event
+     */
+    handleDragLeave(event: DragEvent): void;
+    /**
+     * Handle drop event
+     * @param event - The drag event
+     */
+    handleDrop(event: DragEvent): void;
+    /**
+     * Check if tab can be moved (drag and drop enabled)
+     */
+    canMoveTab(): boolean;
+    /**
+     * Validate if tab reorder is valid
+     */
+    private isValidTabReorder;
+    /**
+     * Perform tab reordering
+     */
+    private performTabReorder;
+    /**
+     * Clean up drag-related CSS classes
+     */
+    private cleanupDragClasses;
+    /**
+     * Get draggable state for tab element
+     */
+    getDraggableState(): boolean;
+}
+//# sourceMappingURL=dragdrop.controller.d.ts.map

package/dist/src/components/tabs/controllers/dragdrop.controller.js

@@ -0,0 +1,202 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseTabsController } from './base.controller.js';
+/**
+ * Drag and drop controller manages drag and drop functionality for tabs components
+ * Handles all drag events and tab reordering
+ */
+export class TabsDragDropController extends BaseTabsController {
+    constructor(host) {
+        super(host);
+        this._host = host;
+        this.dragOverHandler = (event) => this.handleDragOver(event);
+    }
+    get host() {
+        return this._host;
+    }
+    hostConnected() {
+        super.hostConnected();
+        // Add global drag over listener
+        this._host.addEventListener('dragover', this.dragOverHandler);
+    }
+    hostDisconnected() {
+        super.hostDisconnected();
+        // Remove global drag over listener
+        this._host.removeEventListener('dragover', this.dragOverHandler);
+    }
+    /**
+     * Handle drag start event
+     * @param event - The drag event
+     */
+    handleDragStart(event) {
+        try {
+            if (!event.dataTransfer)
+                return;
+            const target = event.currentTarget;
+            const tabIndex = target.dataset.index || '';
+            if (!this.isValidTabIndex(Number.parseInt(tabIndex)))
+                return;
+            event.dataTransfer.setData('text/plain', tabIndex);
+            event.dataTransfer.effectAllowed = 'move';
+            target.classList.add('dragging-start');
+            // Dispatch drag start event
+            this.dispatchEvent(new CustomEvent('tabs-drag-start', {
+                detail: {
+                    tabIndex: Number.parseInt(tabIndex),
+                    tab: this.host.tabs[Number.parseInt(tabIndex)],
+                    timestamp: Date.now()
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        catch (error) {
+            this.handleError(error, 'handleDragStart');
+        }
+    }
+    /**
+     * Handle drag over event
+     * @param event - The drag event
+     */
+    handleDragOver(event) {
+        try {
+            event.preventDefault();
+            if (event.dataTransfer) {
+                event.dataTransfer.dropEffect = 'move';
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'handleDragOver');
+        }
+    }
+    /**
+     * Handle drag enter event
+     * @param event - The drag event
+     */
+    handleDragEnter(event) {
+        try {
+            event.preventDefault();
+            const target = event.currentTarget;
+            if (target.contains(event.relatedTarget)) {
+                return;
+            }
+            target.classList.add('dragging');
+        }
+        catch (error) {
+            this.handleError(error, 'handleDragEnter');
+        }
+    }
+    /**
+     * Handle drag leave event
+     * @param event - The drag event
+     */
+    handleDragLeave(event) {
+        try {
+            event.preventDefault();
+            const target = event.currentTarget;
+            if (target.contains(event.relatedTarget)) {
+                return;
+            }
+            if (target.classList.contains('dragging')) {
+                target.classList.remove('dragging');
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'handleDragLeave');
+        }
+    }
+    /**
+     * Handle drop event
+     * @param event - The drag event
+     */
+    handleDrop(event) {
+        try {
+            event.preventDefault();
+            if (!event.dataTransfer)
+                return;
+            const target = event.currentTarget;
+            const sourceIndex = Number.parseInt(event.dataTransfer.getData('text/plain'));
+            const targetIndex = Number.parseInt(target.dataset.index || '0');
+            if (this.isValidTabReorder(sourceIndex, targetIndex)) {
+                this.performTabReorder(sourceIndex, targetIndex);
+            }
+            this.cleanupDragClasses();
+        }
+        catch (error) {
+            this.handleError(error, 'handleDrop');
+        }
+    }
+    /**
+     * Check if tab can be moved (drag and drop enabled)
+     */
+    canMoveTab() {
+        var _a, _b;
+        return (_b = (_a = this.host.editable) === null || _a === void 0 ? void 0 : _a.canMove) !== null && _b !== void 0 ? _b : false;
+    }
+    /**
+     * Validate if tab reorder is valid
+     */
+    isValidTabReorder(sourceIndex, targetIndex) {
+        return (sourceIndex !== targetIndex &&
+            this.isValidTabIndex(sourceIndex) &&
+            this.isValidTabIndex(targetIndex) &&
+            this.canMoveTab());
+    }
+    /**
+     * Perform tab reordering
+     */
+    performTabReorder(sourceIndex, targetIndex) {
+        try {
+            const sourceTab = this.host.tabs[sourceIndex];
+            const targetTab = this.host.tabs[targetIndex];
+            // Dispatch tab order change event
+            this.host.dispatchEventWithMetadata("nr-tab-order-change" /* TabEvent.TabOrderChange */, {
+                sourceIndex,
+                targetIndex,
+                sourceTab,
+                targetTab
+            });
+            // Dispatch drag drop complete event
+            this.dispatchEvent(new CustomEvent('tabs-drag-complete', {
+                detail: {
+                    sourceIndex,
+                    targetIndex,
+                    sourceTab,
+                    targetTab,
+                    timestamp: Date.now()
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        catch (error) {
+            this.handleError(error, 'performTabReorder');
+        }
+    }
+    /**
+     * Clean up drag-related CSS classes
+     */
+    cleanupDragClasses() {
+        var _a, _b;
+        try {
+            const shadowRoot = this.host.shadowRoot;
+            if (shadowRoot) {
+                (_a = shadowRoot.querySelector('.dragging')) === null || _a === void 0 ? void 0 : _a.classList.remove('dragging');
+                (_b = shadowRoot.querySelector('.dragging-start')) === null || _b === void 0 ? void 0 : _b.classList.remove('dragging-start');
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'cleanupDragClasses');
+        }
+    }
+    /**
+     * Get draggable state for tab element
+     */
+    getDraggableState() {
+        return this.canMoveTab();
+    }
+}
+//# sourceMappingURL=dragdrop.controller.js.map

package/dist/src/components/tabs/controllers/editable.controller.d.ts

@@ -0,0 +1,100 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TabsHost, BaseTabsController } from './base.controller.js';
+import { ReactiveControllerHost } from 'lit';
+import { TabEditable, TabItem } from '../tabs.types.js';
+/**
+ * Editable controller interface for tabs components
+ */
+export interface EditableController {
+    handleAddTab(): void;
+    handleRemoveTab(tabIndex: number): void;
+    handleEditTab(tabIndex: number, newLabel: string): void;
+    canAddTab(): boolean;
+    canDeleteTab(tab?: TabItem): boolean;
+    canEditTabTitle(tab?: TabItem): boolean;
+}
+/**
+ * Enhanced tabs host interface for editable functionality
+ */
+export interface TabsEditableHost extends TabsHost {
+    editable?: TabEditable;
+    dispatchEventWithMetadata(eventName: string, detail: any): void;
+}
+/**
+ * Editable controller manages editable functionality for tabs components
+ * Handles add, delete, and edit operations for tabs
+ */
+export declare class TabsEditableController extends BaseTabsController implements EditableController {
+    protected _host: TabsEditableHost & ReactiveControllerHost;
+    constructor(host: TabsEditableHost & ReactiveControllerHost);
+    get host(): TabsEditableHost & ReactiveControllerHost;
+    /**
+     * Handle adding a new tab
+     */
+    handleAddTab(): void;
+    /**
+     * Handle removing a tab
+     * @param tabIndex - Index of tab to remove
+     */
+    handleRemoveTab(tabIndex: number): void;
+    /**
+     * Handle editing a tab title
+     * @param tabIndex - Index of tab to edit
+     * @param newLabel - New label for the tab
+     */
+    handleEditTab(tabIndex: number, newLabel: string): void;
+    /**
+     * Check if user can add tabs
+     */
+    canAddTab(): boolean;
+    /**
+     * Check if user can delete a specific tab
+     * @param tab - Tab to check (optional, falls back to global setting)
+     */
+    canDeleteTab(tab?: TabItem): boolean;
+    /**
+     * Check if user can edit tab titles for a specific tab
+     * @param tab - Tab to check (optional, falls back to global setting)
+     */
+    canEditTabTitle(tab?: TabItem): boolean;
+    /**
+     * Check if tab can be moved (for drag and drop)
+     */
+    canMoveTab(): boolean;
+    /**
+     * Get editable state for a specific tab
+     * @param tab - Tab to check
+     */
+    getTabEditableState(tab: TabItem): {
+        canDelete: boolean;
+        canEdit: boolean;
+        canMove: boolean;
+    };
+    /**
+     * Validate if a tab label is valid
+     * @param label - Label to validate
+     */
+    private isValidTabLabel;
+    /**
+     * Get the contenteditable attribute value for tab text
+     * @param tab - Tab to check
+     */
+    getContentEditableAttribute(tab: TabItem): string | undefined;
+    /**
+     * Handle blur event for editable tab titles
+     * @param event - Blur event
+     * @param tabIndex - Index of the tab
+     */
+    handleTabTitleBlur(event: Event, tabIndex: number): void;
+    /**
+     * Handle keydown events for editable tab titles
+     * @param event - Keyboard event
+     * @param tabIndex - Index of the tab
+     */
+    handleTabTitleKeyDown(event: KeyboardEvent, tabIndex: number): void;
+}
+//# sourceMappingURL=editable.controller.d.ts.map