bromcom-ui-next 0.1.30 → 0.1.31

package/dist/collection/components/tabs/tabs.component.js

@@ -1,285 +1,238 @@
 import { h, Host } from "@stencil/core";
 import { tv } from "../../utils/tv";
 /**
- * @description Tab interface component
- * @slot - Default slot for content area
- * @slot tabs-list - Special slot for tab list
+ * Modern Tabs component with CSS-first approach
+ * @slot - Default slot for bcm-tab components
  */
 export class BcmTabs {
-    constructor() {
-        /**
-         * Tab size
-         */
-        this.size = 'medium';
-        /**
-         * Tab variant - controls width behavior
-         */
-        this.variant = 'full-width';
-        /**
-         * Whether to enable smooth animations for inkbar and transitions
-         */
-        this.smooth = true;
-        this.triggers = [];
-        this.contents = [];
-        /**
-         * Tab container class
-         */
-        this.tabClass = tv({
-            base: 'tabs-container bcm-ui-element flex flex-col',
-            variants: {
-                variant: {
-                    'full-width': 'w-full',
-                    'auto-width': 'w-auto',
-                },
-            },
-            defaultVariants: {
-                variant: 'full-width',
-            },
-        });
-    }
+    el;
+    /**
+     * Active tab value
+     */
+    value;
+    /**
+     * Tab size variant
+     */
+    size = 'md';
+    /**
+     * Visual variant
+     */
+    variant = 'line';
+    /**
+     * Enable shadow on main container
+     */
+    shadow = false;
+    /**
+     * Emits when active tab changes
+     */
+    bcmTabChange;
+    tabs = [];
+    activeIndex = 0;
+    tabElements = [];
     componentWillLoad() {
-        this.activeTab = this.defaultValue;
+        this.discoverTabs();
     }
     componentDidLoad() {
-        this.refreshElementReferences();
-        this.updateTriggerProperties();
-        this.updateTabsListProperties();
-        // Eğer defaultValue yoksa ilk tab'ı aktif yap
-        if (!this.defaultValue && this.triggers.length > 0) {
-            this.activeTab = this.triggers[0].value;
-        }
-        this.setupRelations(); // activeTab ayarlandıktan sonra relations'ı kur
-        // auto-width variant'ında inkbar hesaplaması için ek gecikme
-        if (this.variant === 'auto-width') {
-            requestAnimationFrame(() => {
-                this.updateInkbar();
-                this.updateContentVisibility();
-            });
-        }
-        else {
-            this.updateInkbar();
-            this.updateContentVisibility();
+        this.updateActiveIndex();
+        this.updateTabStates();
+    }
+    /**
+     * Discovers all bcm-tab children
+     */
+    discoverTabs() {
+        this.tabElements = Array.from(this.el.querySelectorAll('bcm-tab'));
+        this.tabs = this.tabElements.map((tab) => ({
+            value: tab.value,
+            label: tab.label || tab.value,
+            disabled: tab.disabled || false,
+        }));
+        // Set initial value if not provided
+        if (!this.value && this.tabs.length > 0) {
+            const firstEnabledTab = this.tabs.find(t => !t.disabled);
+            if (firstEnabledTab) {
+                this.value = firstEnabledTab.value;
+            }
         }
     }
     /**
-     * Refreshes DOM element references
+     * Updates the active index based on current value
      */
-    refreshElementReferences() {
-        this.triggers = Array.from(this.el.querySelectorAll('bcm-tabs-trigger'));
-        this.contents = Array.from(this.el.querySelectorAll('bcm-tabs-content'));
-        this.tabsList = this.el.querySelector('bcm-tabs-list');
+    updateActiveIndex() {
+        const index = this.tabs.findIndex(t => t.value === this.value);
+        this.activeIndex = index >= 0 ? index : 0;
     }
     /**
-     * Establishes relationships between tabs and content
+     * Updates active/inactive state of all tab elements
      */
-    setupRelations() {
-        this.triggers.forEach(trigger => {
-            trigger.active = trigger.value === this.activeTab;
-            const panel = this.contents.find(content => content.value === trigger.value);
-            if (panel) {
-                const panelId = `panel-${trigger.value}`;
-                panel.id = panelId;
-                trigger.setAttribute('aria-controls', panelId);
-                panel.setAttribute('aria-labelledby', `trigger-${trigger.value}`);
-                trigger.id = `trigger-${trigger.value}`;
-            }
+    updateTabStates() {
+        this.tabElements.forEach((tab) => {
+            tab.active = tab.value === this.value;
         });
     }
-    updateTriggerProperties() {
-        var _a;
-        if (((_a = this.triggers) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            this.triggers.forEach(trigger => {
-                trigger.size = this.size;
-                trigger.variant = this.variant;
-                trigger.smooth = this.smooth;
+    handleValueChange(newValue, oldValue) {
+        this.updateActiveIndex();
+        this.updateTabStates();
+        this.updateCSSVariables();
+        if (oldValue !== newValue) {
+            this.bcmTabChange.emit({
+                value: newValue,
+                previousValue: oldValue,
             });
         }
     }
-    updateTabsListProperties() {
-        if (this.tabsList) {
-            this.tabsList.variant = this.variant;
-            this.tabsList.smooth = this.smooth;
-        }
-    }
     handleSizeChange() {
-        this.updateTriggerProperties();
-    }
-    handleVariantChange() {
-        this.updateTriggerProperties();
-        this.updateTabsListProperties();
-        // auto-width variant'ında inkbar hesaplaması için ek gecikme
-        if (this.variant === 'auto-width') {
-            requestAnimationFrame(() => {
-                this.updateInkbar();
-            });
-        }
-        else {
-            this.updateInkbar();
-        }
-    }
-    handleSmoothChange() {
-        this.updateTriggerProperties();
-        this.updateTabsListProperties();
-    }
-    async disableTab(value) {
-        const trigger = this.triggers.find(t => t.value === value);
-        if (trigger) {
-            trigger.disabled = true;
-        }
-    }
-    async enableTab(value) {
-        const trigger = this.triggers.find(t => t.value === value);
-        if (trigger) {
-            trigger.disabled = false;
-        }
+        this.propagatePropsToTabs();
     }
     /**
-     * Disables all tabs
+     * Propagates parent props to child tabs
      */
-    async disableAllTabs() {
-        this.triggers.forEach(trigger => {
-            trigger.disabled = true;
+    propagatePropsToTabs() {
+        this.tabElements.forEach((tab) => {
+            tab.size = this.size;
         });
     }
     /**
-     * Enables all tabs
+     * Updates CSS custom properties for inkbar positioning
      */
-    async enableAllTabs() {
-        this.triggers.forEach(trigger => {
-            trigger.disabled = false;
-        });
+    updateCSSVariables() {
+        const tabsContainer = this.el.shadowRoot?.querySelector('.tabs-container');
+        if (tabsContainer) {
+            tabsContainer.style.setProperty('--active-index', this.activeIndex.toString());
+            tabsContainer.style.setProperty('--tab-count', this.tabs.length.toString());
+        }
     }
     /**
-     * Returns the active tab value
+     * Handles tab click events from children
      */
-    async getActiveTab() {
-        return this.activeTab;
+    handleTabClick(event) {
+        const clickedValue = event.detail;
+        const tab = this.tabs.find(t => t.value === clickedValue);
+        if (tab && !tab.disabled) {
+            this.value = clickedValue;
+        }
     }
     /**
-     * Sets the active tab
+     * Keyboard navigation support
      */
-    async setActiveTab(value) {
-        const trigger = this.triggers.find(t => t.value === value);
-        if (trigger && !trigger.disabled) {
-            this.previousTab = this.activeTab;
-            this.activeTab = value;
-            this.updateInkbar();
-            this.updateContentVisibility();
-            this.updateTabStatus();
-            this.bcmTabChange.emit({
-                activeTab: this.activeTab,
-                element: trigger,
-                previousTab: this.previousTab,
-            });
+    handleKeyDown(ev) {
+        const target = ev.target;
+        if (!target.classList.contains('tab-button'))
+            return;
+        let newIndex = this.activeIndex;
+        switch (ev.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                ev.preventDefault();
+                newIndex = this.getNextEnabledTabIndex(this.activeIndex);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                ev.preventDefault();
+                newIndex = this.getPreviousEnabledTabIndex(this.activeIndex);
+                break;
+            case 'Home':
+                ev.preventDefault();
+                newIndex = this.getFirstEnabledTabIndex();
+                break;
+            case 'End':
+                ev.preventDefault();
+                newIndex = this.getLastEnabledTabIndex();
+                break;
+            default:
+                return;
+        }
+        if (newIndex !== this.activeIndex) {
+            this.value = this.tabs[newIndex].value;
+            this.focusTabAtIndex(newIndex);
         }
     }
-    /**
-     * Updates tab status
-     */
-    updateTabStatus() {
-        this.triggers.forEach(trigger => {
-            const isActive = trigger.value === this.activeTab;
-            trigger.active = isActive;
-        });
+    getNextEnabledTabIndex(currentIndex) {
+        for (let i = currentIndex + 1; i < this.tabs.length; i++) {
+            if (!this.tabs[i].disabled)
+                return i;
+        }
+        return currentIndex;
     }
-    handleResize() {
-        this.updateInkbar();
+    getPreviousEnabledTabIndex(currentIndex) {
+        for (let i = currentIndex - 1; i >= 0; i--) {
+            if (!this.tabs[i].disabled)
+                return i;
+        }
+        return currentIndex;
     }
-    /**
-     * Triggered when a tab is selected
-     */
-    handleTabSelected(event) {
-        this.previousTab = this.activeTab;
-        this.activeTab = event.detail;
-        this.updateTabStatus();
-        this.updateInkbar();
-        this.updateContentVisibility();
-        const activeElement = this.triggers.find(trigger => trigger.value === this.activeTab);
-        if (activeElement) {
-            this.bcmTabChange.emit({
-                activeTab: this.activeTab,
-                element: activeElement,
-                previousTab: this.previousTab,
-            });
+    getFirstEnabledTabIndex() {
+        const index = this.tabs.findIndex(t => !t.disabled);
+        return index >= 0 ? index : 0;
+    }
+    getLastEnabledTabIndex() {
+        for (let i = this.tabs.length - 1; i >= 0; i--) {
+            if (!this.tabs[i].disabled)
+                return i;
         }
+        return this.tabs.length - 1;
     }
-    /**
-     * Updates content visibility
-     */
-    updateContentVisibility() {
-        this.contents.forEach(content => {
-            const isVisible = content.value === this.activeTab;
-            content.style.display = isVisible ? 'block' : 'none';
-            content.setAttribute('aria-hidden', (!isVisible).toString());
-        });
+    focusTabAtIndex(index) {
+        const buttons = this.el.shadowRoot?.querySelectorAll('.tab-button');
+        if (buttons && buttons[index]) {
+            buttons[index].focus();
+        }
     }
     /**
-     * Updates inkbar position
+     * Public method to programmatically set active tab
      */
-    updateInkbar() {
-        var _a, _b;
-        if (!this.tabsList) {
-            console.warn('bcm-tabs-list not found');
-            return;
-        }
-        const totalTriggers = this.triggers.length;
-        if (totalTriggers === 0)
-            return;
-        const inkbar = (_b = (_a = this.tabsList) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.inkbar');
-        const activeTrigger = this.triggers.find(trigger => trigger.value === this.activeTab);
-        if (activeTrigger && inkbar) {
-            // auto-width variant'ında container genişliği henüz hesaplanmamış olabilir
-            // Bu durumda bir sonraki frame'de tekrar deneyelim
-            if (this.variant === 'auto-width') {
-                requestAnimationFrame(() => {
-                    this.updateInkbarPosition(inkbar, activeTrigger);
-                });
-            }
-            else {
-                this.updateInkbarPosition(inkbar, activeTrigger);
-            }
-        }
-        else {
-            if (inkbar)
-                inkbar.style.opacity = '0';
+    async setActiveTab(value) {
+        const tab = this.tabs.find(t => t.value === value);
+        if (tab && !tab.disabled) {
+            this.value = value;
         }
     }
     /**
-     * Updates inkbar position and size
+     * Public method to get active tab value
      */
-    updateInkbarPosition(inkbar, activeTrigger) {
-        var _a, _b, _c;
-        const triggerRect = activeTrigger.getBoundingClientRect();
-        const groupRect = (_c = (_b = (_a = this.tabsList) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.tabs-list')) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
-        if (triggerRect && groupRect) {
-            const left = triggerRect.left - groupRect.left;
-            const width = triggerRect.width;
-            // Her iki variant için de aynı davranış: sadece aktif tab altında göster
-            inkbar.style.width = `${width}px`;
-            inkbar.style.transform = `translateX(${left}px)`;
-            inkbar.style.left = '0';
-            inkbar.style.right = 'auto';
-            // smooth prop'una göre opacity geçişi
-            if (this.smooth) {
-                inkbar.style.opacity = '1';
-            }
-            else {
-                // Animasyon olmadan anında göster
-                inkbar.style.transition = 'none';
-                inkbar.style.opacity = '1';
-                // Bir sonraki frame'de transition'ı geri yükle
-                requestAnimationFrame(() => {
-                    inkbar.style.transition = '';
-                });
-            }
-        }
-        else {
-            console.warn('Group or trigger rect calculation failed');
-            inkbar.style.opacity = '0';
-        }
+    async getActiveTab() {
+        return this.value;
     }
+    /**
+     * Tailwind class configuration
+     */
+    containerClass = tv({
+        base: 'tabs-container flex flex-col w-full',
+        variants: {
+            shadow: {
+                true: 'shadow-md rounded-lg',
+                false: '',
+            },
+        },
+    });
+    tabsListClass = tv({
+        base: 'tabs-list relative flex border-b border-color-default',
+        variants: {
+            variant: {
+                line: 'bg-transparent',
+                enclosed: 'bg-color-background-subtle border border-color-default rounded-t-lg',
+            },
+        },
+    });
+    inkbarClass = tv({
+        base: 'inkbar absolute bottom-0 left-0 h-0.5 bg-color-primary pointer-events-none',
+        variants: {
+            variant: {
+                line: 'transition-transform duration-200 ease-smooth',
+                enclosed: 'hidden',
+            },
+        },
+    });
     render() {
-        return (h(Host, { key: '8d187c500759ab443717c0c8f8c965bf5b608a49' }, h("div", { key: '45de462ff12012abb2f3bad8a7c31976ee839ef9', class: this.tabClass({ variant: this.variant }) }, h("slot", { key: 'b4f945118e8606b1276aee568c029d20d05a40a2', name: "tabs-list" }), h("slot", { key: '23d055af5abd2ab9dde916d625795d448baf68a0' }))));
+        this.updateCSSVariables();
+        this.propagatePropsToTabs();
+        return (h(Host, { key: '43ca51341fed91a75222627b7050975ff00d774b' }, h("div", { key: '537add7dc0fc2905ee7e6d29570984b3edc6070c', class: this.containerClass({ shadow: this.shadow }) }, h("div", { key: 'f26fc4c052121b2cd7c94a07ed4fa3ca24d86f6e', class: this.tabsListClass({ variant: this.variant }), role: "tablist" }, this.tabs.map((tab, index) => (h("button", { key: tab.value, class: `tab-button flex-1 px-4 py-2 text-center font-medium transition-colors border-none ${tab.value === this.value
+                ? 'text-color-primary'
+                : tab.disabled
+                    ? 'text-color-disabled cursor-not-allowed opacity-50'
+                    : 'text-color-placeholder hover:text-color-primary cursor-pointer'} ${this.size === 'sm' ? 'text-sm py-1.5 px-3' : this.size === 'lg' ? 'text-lg py-3 px-5' : 'text-base py-2 px-4'} bg-transparent`, role: "tab", "aria-selected": (tab.value === this.value).toString(), "aria-controls": `panel-${tab.value}`, id: `tab-${tab.value}`, disabled: tab.disabled, onClick: () => !tab.disabled && (this.value = tab.value), tabindex: index === this.activeIndex ? 0 : -1 }, tab.label))), this.variant === 'line' && (h("div", { key: '74bc405d20efdb73858ddc52e9d7a1e40260de8d', class: this.inkbarClass({ variant: this.variant }), style: {
+                transform: `translateX(calc(${this.activeIndex} * 100% / ${this.tabs.length}))`,
+                width: `calc(100% / ${this.tabs.length})`,
+            } }))), h("div", { key: 'f0e47f8829616c48d66638368907f73f4f6359af', class: "tabs-content" }, h("slot", { key: 'feb9d8f749dbafea06c09eb8300b0edd783aeabc' })))));
     }
     static get is() { return "bcm-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -295,9 +248,9 @@ export class BcmTabs {
     }
     static get properties() {
         return {
-            "defaultValue": {
+            "value": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -307,54 +260,54 @@ export class BcmTabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Default active tab value"
+                    "text": "Active tab value"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "default-value"
+                "attribute": "value"
             },
             "size": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'small' | 'medium' | 'large'",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Tab size"
+                    "text": "Tab size variant"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
                 "attribute": "size",
-                "defaultValue": "'medium'"
+                "defaultValue": "'md'"
             },
             "variant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'full-width' | 'auto-width'",
-                    "resolved": "\"auto-width\" | \"full-width\"",
+                    "original": "'line' | 'enclosed'",
+                    "resolved": "\"enclosed\" | \"line\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Tab variant - controls width behavior"
+                    "text": "Visual variant"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
                 "attribute": "variant",
-                "defaultValue": "'full-width'"
+                "defaultValue": "'line'"
             },
-            "smooth": {
+            "shadow": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -366,20 +319,20 @@ export class BcmTabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to enable smooth animations for inkbar and transitions"
+                    "text": "Enable shadow on main container"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "smooth",
-                "defaultValue": "true"
+                "attribute": "shadow",
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "activeTab": {},
-            "previousTab": {}
+            "tabs": {},
+            "activeIndex": {}
         };
     }
     static get events() {
@@ -391,44 +344,18 @@ export class BcmTabs {
                 "composed": false,
                 "docs": {
                     "tags": [],
-                    "text": "Triggers when tab changes"
+                    "text": "Emits when active tab changes"
                 },
                 "complexType": {
-                    "original": "{\n    activeTab: string;\n    element: HTMLBcmTabsTriggerElement;\n    previousTab?: string;\n  }",
-                    "resolved": "{ activeTab: string; element: HTMLBcmTabsTriggerElement; previousTab?: string; }",
-                    "references": {
-                        "HTMLBcmTabsTriggerElement": {
-                            "location": "global",
-                            "id": "global::HTMLBcmTabsTriggerElement"
-                        }
-                    }
+                    "original": "{\n    value: string;\n    previousValue: string;\n  }",
+                    "resolved": "{ value: string; previousValue: string; }",
+                    "references": {}
                 }
             }];
     }
     static get methods() {
         return {
-            "disableTab": {
-                "complexType": {
-                    "signature": "(value: string) => Promise<void>",
-                    "parameters": [{
-                            "name": "value",
-                            "type": "string",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "enableTab": {
+            "setActiveTab": {
                 "complexType": {
                     "signature": "(value: string) => Promise<void>",
                     "parameters": [{
@@ -445,41 +372,7 @@ export class BcmTabs {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "disableAllTabs": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Disables all tabs",
-                    "tags": []
-                }
-            },
-            "enableAllTabs": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Enables all tabs",
+                    "text": "Public method to programmatically set active tab",
                     "tags": []
                 }
             },
@@ -496,28 +389,7 @@ export class BcmTabs {
                     "return": "Promise<string>"
                 },
                 "docs": {
-                    "text": "Returns the active tab value",
-                    "tags": []
-                }
-            },
-            "setActiveTab": {
-                "complexType": {
-                    "signature": "(value: string) => Promise<void>",
-                    "parameters": [{
-                            "name": "value",
-                            "type": "string",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Sets the active tab",
+                    "text": "Public method to get active tab value",
                     "tags": []
                 }
             }
@@ -526,28 +398,25 @@ export class BcmTabs {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
                 "propName": "size",
                 "methodName": "handleSizeChange"
-            }, {
-                "propName": "variant",
-                "methodName": "handleVariantChange"
-            }, {
-                "propName": "smooth",
-                "methodName": "handleSmoothChange"
             }];
     }
     static get listeners() {
         return [{
-                "name": "resize",
-                "method": "handleResize",
-                "target": "window",
+                "name": "bcmTabClick",
+                "method": "handleTabClick",
+                "target": undefined,
                 "capture": false,
-                "passive": true
+                "passive": false
             }, {
-                "name": "bcmTabSelected",
-                "method": "handleTabSelected",
+                "name": "keydown",
+                "method": "handleKeyDown",
                 "target": undefined,
-                "capture": true,
+                "capture": false,
                 "passive": false
             }];
     }