@xlabs-store/core 0.0.1

package/dist/types/components/x-tabs/types.d.ts

@@ -0,0 +1,190 @@
+/**
+ * @file Tabs Component Types
+ * @description Type definitions for x-tabs component following Ant Design specification
+ */
+/**
+ * Tab placement position
+ * @value top - tabs are positioned at the top
+ * @value bottom - tabs are positioned at the bottom
+ * @value start - tabs are positioned at the start (left in LTR)
+ * @value end - tabs are positioned at the end (right in LTR)
+ */
+export type TabsPlacement = 'top' | 'bottom' | 'start' | 'end';
+/**
+ * Tabs type/style
+ */
+export type TabsType = 'line' | 'card' | 'editable-card';
+/**
+ * Tabs size
+ */
+export type TabsSize = 'large' | 'middle' | 'small';
+/**
+ * Tab indicator alignment
+ */
+export type TabsIndicatorAlign = 'start' | 'center' | 'end';
+/**
+ * Tab indicator configuration
+ */
+export interface TabsIndicator {
+    /** Size of indicator in pixels */
+    size?: number;
+    /** Alignment of indicator within the tab */
+    align?: TabsIndicatorAlign;
+}
+/**
+ * Animated configuration for tabs
+ */
+export interface TabsAnimatedConfig {
+    /** Whether ink bar is animated */
+    inkBar?: boolean;
+    /** Whether tab pane is animated */
+    tabPane?: boolean;
+}
+/**
+ * Animated type - can be boolean or config object
+ */
+export type TabsAnimated = boolean | TabsAnimatedConfig;
+/**
+ * Tab bar extra content position
+ */
+export interface TabBarExtraContent {
+    /** Content on the left side */
+    left?: string;
+    /** Content on the right side */
+    right?: string;
+}
+/**
+ * Tab item configuration
+ */
+export interface TabItem {
+    /** Unique key of the tab */
+    key: string;
+    /** Tab header label */
+    label: string;
+    /** Tab header icon */
+    icon?: string;
+    /** Tab content (for items mode) */
+    children?: any;
+    /** Whether tab is disabled */
+    disabled?: boolean;
+    /** Whether tab can be closed (only for editable-card) */
+    closable?: boolean;
+    /** Custom close icon (only for editable-card) */
+    closeIcon?: string;
+    /** Whether to force render content */
+    forceRender?: boolean;
+    /** Whether to destroy on hidden */
+    destroyOnHidden?: boolean;
+}
+/**
+ * Tabs change event detail
+ */
+export interface TabsChangeEventDetail {
+    /** Active tab key */
+    activeKey: string;
+    /** Previous active tab key */
+    previousKey?: string;
+}
+/**
+ * Tabs edit event detail (for editable-card)
+ */
+export interface TabsEditEventDetail {
+    /** Target key being edited */
+    targetKey: string;
+    /** Edit action: 'add' or 'remove' */
+    action: 'add' | 'remove';
+}
+/**
+ * Tabs click event detail
+ */
+export interface TabsClickEventDetail {
+    /** Clicked tab key */
+    key: string;
+    /** Native event */
+    nativeEvent?: MouseEvent;
+}
+/**
+ * Tabs scroll event detail
+ */
+export interface TabsScrollEventDetail {
+    /** Scroll direction */
+    direction: 'left' | 'right' | 'top' | 'bottom';
+}
+/**
+ * More dropdown configuration
+ */
+export interface TabsMoreProps {
+    /** Custom icon for more button */
+    icon?: string;
+    /** Trigger type for dropdown */
+    trigger?: 'hover' | 'click';
+}
+/**
+ * Custom class names for tabs parts
+ * Following Ant Design semantic DOM structure
+ */
+export interface TabsClassNames {
+    /** Root element class */
+    root?: string;
+    /** Header/nav element class */
+    header?: string;
+    /** Tab nav wrapper class */
+    nav?: string;
+    /** Tab item class */
+    item?: string;
+    /** Indicator bar class */
+    indicator?: string;
+    /** Content panel class */
+    content?: string;
+    /** Add button class */
+    add?: string;
+    /** Remove button class */
+    remove?: string;
+}
+/**
+ * Custom styles for tabs parts
+ * Following Ant Design semantic DOM structure
+ */
+export interface TabsStyles {
+    /** Root element styles */
+    root?: {
+        [key: string]: string;
+    };
+    /** Header/nav element styles */
+    header?: {
+        [key: string]: string;
+    };
+    /** Tab nav wrapper styles */
+    nav?: {
+        [key: string]: string;
+    };
+    /** Tab item styles */
+    item?: {
+        [key: string]: string;
+    };
+    /** Indicator bar styles */
+    indicator?: {
+        [key: string]: string;
+    };
+    /** Content panel styles */
+    content?: {
+        [key: string]: string;
+    };
+    /** Add button styles */
+    add?: {
+        [key: string]: string;
+    };
+    /** Remove button styles */
+    remove?: {
+        [key: string]: string;
+    };
+}
+/**
+ * Extra content configuration
+ */
+export interface TabsExtraContent {
+    /** Left side extra content */
+    left?: string;
+    /** Right side extra content */
+    right?: string;
+}

package/dist/types/components/x-tabs/x-tabs.d.ts

@@ -0,0 +1,359 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { TabsPlacement, TabsType, TabsSize, TabItem, TabsIndicator, TabBarExtraContent, TabsChangeEventDetail, TabsEditEventDetail, TabsClickEventDetail, TabsScrollEventDetail, TabsClassNames, TabsStyles } from './types';
+/**
+ * @component x-tabs
+ * @description Tabs make it easy to explore and switch between different views.
+ *
+ * @slot - x-tab-pane children components
+ *
+ * @example
+ * <x-tabs active-key="1">
+ *   <x-tab-pane key="1" tab="Tab 1">Content of Tab 1</x-tab-pane>
+ *   <x-tab-pane key="2" tab="Tab 2">Content of Tab 2</x-tab-pane>
+ *   <x-tab-pane key="3" tab="Tab 3">Content of Tab 3</x-tab-pane>
+ * </x-tabs>
+ */
+export declare class XTabs {
+    /**
+     * Host element reference for reading child panes.
+     */
+    el: HTMLElement;
+    /**
+     * Nav list element reference for ink bar positioning.
+     */
+    private navListEl?;
+    /**
+     * Flag to prevent recursive updates.
+     */
+    private isUpdatingTabs;
+    /**
+     * Current active tab key (controlled mode).
+     * @example
+     * <x-tabs active-key="profile"></x-tabs>
+     */
+    activeKey?: string;
+    /**
+     * Initial active tab key (uncontrolled mode).
+     * @example
+     * <x-tabs defaultActiveKey="settings"></x-tabs>
+     */
+    defaultActiveKey?: string;
+    /**
+     * Position/placement of tabs.
+     * @default 'top'
+     * @example
+     * <x-tabs tabPlacement="bottom"></x-tabs>
+     */
+    tabPlacement: TabsPlacement;
+    /**
+     * Type/style of tabs.
+     * @default 'line'
+     * @example
+     * <x-tabs type="card"></x-tabs>
+     */
+    type: TabsType;
+    /**
+     * Size of tabs.
+     * @default 'middle'
+     * @example
+     * <x-tabs size="small"></x-tabs>
+     */
+    size: TabsSize;
+    /**
+     * Whether to center tabs.
+     * @default false
+     * @example
+     * <x-tabs centered></x-tabs>
+     */
+    centered: boolean;
+    /**
+     * Tab items configuration (alternative to slots).
+     * @example
+     * <x-tabs items={[{ key: '1', label: 'Tab' }]}></x-tabs>
+     */
+    items?: TabItem[];
+    /**
+     * Indicator configuration.
+     * @example
+     * <x-tabs indicator={{ size: 20, align: 'center' }}></x-tabs>
+     */
+    indicator?: TabsIndicator;
+    /**
+     * Whether tabs are animated.
+     * @default true
+     * @example
+     * <x-tabs animated={false}></x-tabs>
+     */
+    animated: boolean | {
+        inkBar?: boolean;
+        tabPane?: boolean;
+    };
+    /**
+     * Gap between tabs.
+     * @example
+     * <x-tabs tabBarGutter={12}></x-tabs>
+     */
+    tabBarGutter?: number;
+    /**
+     * Tab bar style object.
+     * @example
+     * <x-tabs tabBarStyle={{ background: '#fff' }}></x-tabs>
+     */
+    tabBarStyle?: {
+        [key: string]: string;
+    };
+    /**
+     * Extra content in tab bar (left/right).
+     * @example
+     * <x-tabs tabBarExtraContent="Extra"></x-tabs>
+     */
+    tabBarExtraContent?: string | TabBarExtraContent;
+    /**
+     * Customize add icon, only works with type="editable-card".
+     * @example
+     * <x-tabs type="editable-card" addIcon="plus"></x-tabs>
+     */
+    addIcon?: string;
+    /**
+     * Customize remove icon, only works with type="editable-card".
+     * @example
+     * <x-tabs type="editable-card" removeIcon="close"></x-tabs>
+     */
+    removeIcon?: string;
+    /**
+     * Whether to hide add button (only for editable-card).
+     * @default false
+     * @example
+     * <x-tabs type="editable-card" hideAdd></x-tabs>
+     */
+    hideAdd: boolean;
+    /**
+     * Whether to destroy inactive tab panes.
+     * @default false
+     * @example
+     * <x-tabs destroyInactiveTabPane></x-tabs>
+     */
+    destroyInactiveTabPane: boolean;
+    /**
+     * Custom class names for parts.
+     * @example
+     * <x-tabs classNames={{ root: 'my-tabs' }}></x-tabs>
+     */
+    classNames?: TabsClassNames;
+    /**
+     * Custom styles for parts.
+     * @example
+     * <x-tabs styles={{ header: { background: '#fff' } }}></x-tabs>
+     */
+    styles?: TabsStyles;
+    /**
+     * Callback when active tab changes.
+     * @example
+     * <x-tabs onXChange={(ev) => console.log(ev.detail)}></x-tabs>
+     */
+    xChange: EventEmitter<TabsChangeEventDetail>;
+    /**
+     * Callback when tab is clicked.
+     * @example
+     * <x-tabs onXTabClick={(ev) => console.log(ev.detail)}></x-tabs>
+     */
+    xTabClick: EventEmitter<TabsClickEventDetail>;
+    /**
+     * Callback when tab is added or removed (only for editable-card).
+     * @example
+     * <x-tabs onXEdit={(ev) => console.log(ev.detail)} type="editable-card"></x-tabs>
+     */
+    xEdit: EventEmitter<TabsEditEventDetail>;
+    /**
+     * Callback when tab scroll.
+     * @example
+     * <x-tabs onXTabScroll={(ev) => console.log(ev.detail)}></x-tabs>
+     */
+    xTabScroll: EventEmitter<TabsScrollEventDetail>;
+    /**
+     * Internal tab metadata list.
+     */
+    private tabs;
+    /**
+     * Ink bar inline style.
+     */
+    private inkBarStyle;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    handleActiveKeyChange(newValue: string): void;
+    handleItemsChange(): void;
+    /**
+     * Get current active key.
+     * @returns Promise<string | undefined>
+     * @example
+     * const key = await el.getActiveKey()
+     */
+    getActiveKey(): Promise<string | undefined>;
+    /**
+     * Set active tab by key.
+     * @param key - Tab key to activate.
+     * @returns Promise<void>
+     * @example
+     * await el.setActiveKey('profile')
+     */
+    setActiveKey(key: string): Promise<void>;
+    /**
+     * Synchronizes internal tab state from `items` prop or slotted `x-tab-pane` children.
+     *
+     * Flow:
+     * 1. Checks `isUpdatingTabs` flag to prevent recursive updates.
+     * 2. If `items` prop is present:
+     *    - Maps items to internal tab objects.
+     * 3. If `items` prop is missing:
+     *    - Queries for `x-tab-pane` elements in the light DOM.
+     *    - Extracts attributes (key, tab, disabled, closable, etc.) from panes.
+     * 4. Compares new tabs with current `tabs` state.
+     * 5. Updates `tabs` state if changed.
+     * 6. Sets initial `activeKey` if not set.
+     * 7. Calls `updateChildren` to sync active state to panes.
+     */
+    private updateTabs;
+    /**
+     * Updates the active state of child `x-tab-pane` elements.
+     *
+     * Flow:
+     * 1. Finds all `x-tab-pane` children.
+     * 2. Iterates through each pane.
+     * 3. Compares pane's key with `activeKey`.
+     * 4. Sets the pane's `active` property.
+     * 5. Sets the pane's `destroyInactiveTabPane` property based on parent config.
+     *
+     * @param activeKey - The key of the currently active tab.
+     */
+    private updateChildren;
+    /**
+     * Updates the position and size of the ink bar (active indicator).
+     *
+     * Flow:
+     * 1. Checks if type is 'line' and nav list exists.
+     * 2. Finds the currently active tab element in the nav list.
+     * 3. If no active tab, hides the ink bar.
+     * 4. Calculates position (top/left) and size (height/width) based on:
+     *    - Tab placement (vertical vs horizontal).
+     *    - Active tab's offset and dimensions.
+     *    - Custom indicator size and alignment configuration.
+     * 5. Updates `inkBarStyle` state if changed.
+     */
+    private updateInkBar;
+    /**
+     * Handle click on a tab item.
+     *
+     * Flow:
+     * 1. Checks if the tab is disabled; if so, returns early.
+     * 2. Emits `xTabClick` event with the clicked key and native event.
+     * 3. If the clicked tab is not currently active:
+     *    - Updates `activeKey` to the new key.
+     *    - Emits `xChange` event to notify parent of the switch.
+     *
+     * @param key - Tab key.
+     * @param disabled - Whether tab is disabled.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    private handleTabClick;
+    /**
+     * Emit add action for editable-card tabs.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    private handleAddClick;
+    /**
+     * Emit remove action for editable-card tabs.
+     * @param key - Target tab key.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    private handleRemoveClick;
+    /**
+     * Compute gutter style based on orientation.
+     * @returns Record<string, string>
+     */
+    private getTabBarGutterStyle;
+    /**
+     * Determine whether ink bar should animate.
+     * @returns boolean
+     */
+    private isInkBarAnimated;
+    /**
+     * Render remove icon for editable-card tabs.
+     * @returns JSX.Element
+     */
+    private renderRemoveIcon;
+    /**
+     * Render add icon for editable-card tabs.
+     * @returns JSX.Element
+     */
+    private renderAddIcon;
+    /**
+     * Render extra content in tab bar.
+     * @param position - 'left' or 'right' side.
+     * @returns JSX.Element | null
+     */
+    private renderExtraContent;
+    /**
+     * Renders the tab buttons in the navigation bar.
+     *
+     * Flow:
+     * 1. Iterates through the `tabs` state.
+     * 2. For each tab:
+     *    - Determines active and disabled state.
+     *    - Applies styling classes and gutter styles.
+     *    - Sets ARIA attributes for accessibility.
+     *    - Renders icon (if present) and label.
+     *    - If type is 'editable-card' and tab is closable, renders a remove button.
+     *
+     * @returns JSX.Element[] - Array of tab button elements.
+     */
+    private renderTabs;
+    /**
+     * Render add button for editable-card tabs.
+     * @returns JSX.Element | null
+     */
+    private renderAddButton;
+    /**
+     * Handle slot changes by updating tabs.
+     * @returns void
+     */
+    private handleSlotChange;
+    /**
+     * Renders the content panels for the tabs.
+     *
+     * Flow:
+     * 1. If using `items` prop:
+     *    - Iterates through items.
+     *    - Checks if item is active.
+     *    - Implements lazy rendering logic:
+     *      - If not active and `destroyInactiveTabPane` is true (and not forced), renders null.
+     *    - Renders the content wrapper with display style (block/none).
+     * 2. If using slots:
+     *    - Renders a slot element with a change listener to detect pane updates.
+     *
+     * @returns JSX.Element | JSX.Element[]
+     */
+    private renderContent;
+    /**
+     * Main render method for the Tabs component.
+     *
+     * Flow:
+     * 1. Determines layout orientation (vertical vs horizontal) based on `tabPlacement`.
+     * 2. Constructs host classes based on props (type, size, placement, centered).
+     * 3. Renders the Navigation section (`x-tabs-nav`):
+     *    - Renders extra content (left side).
+     *    - Renders the nav wrapper and list (`x-tabs-nav-list`).
+     *    - Calls `renderTabs` to generate individual tab buttons.
+     *    - Calls `renderAddButton` if editable.
+     *    - Renders the ink bar (active indicator) if type is 'line'.
+     *    - Renders extra content (right side).
+     * 4. Renders the Content section (`x-tabs-content-holder`):
+     *    - Calls `renderContent` to generate or project tab panels.
+     *
+     * @returns {JSX.Element} The full component tree.
+     */
+    render(): any;
+}

package/dist/types/components/x-tag/types.d.ts

@@ -0,0 +1,27 @@
+/**
+ * X-Tag Component Types
+ */
+/**
+ * Tag variant styles
+ */
+export type TagVariant = 'filled' | 'solid' | 'outlined';
+/**
+ * Preset color names
+ */
+export type TagPresetColor = 'magenta' | 'red' | 'volcano' | 'orange' | 'gold' | 'lime' | 'green' | 'cyan' | 'blue' | 'geekblue' | 'purple' | 'pink' | 'success' | 'processing' | 'error' | 'warning' | 'default';
+/**
+ * Tag close event detail
+ */
+export interface TagCloseEventDetail {
+    /** Prevent default close behavior */
+    preventDefault: () => void;
+    /** Whether default was prevented */
+    defaultPrevented: boolean;
+}
+/**
+ * Checkable tag change event detail
+ */
+export interface TagCheckEventDetail {
+    /** Checked state */
+    checked: boolean;
+}