@xlabs-store/core 0.0.1

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

@@ -0,0 +1,187 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SplitterOrientation, CollapsibleIcon, SplitterCollapseDetail } from './types';
+export declare class XSplitter {
+    el: HTMLElement;
+    /**
+     * Orientation direction
+     */
+    orientation: SplitterOrientation;
+    /**
+     * Orientation (alias for vertical layout)
+     * Simultaneously existing with orientation, orientation takes priority
+     */
+    vertical: boolean;
+    /**
+     * Layout direction (alias for orientation)
+     */
+    layout?: SplitterOrientation;
+    /**Left Panel
+    Right Panel
+     * Lazy mode - dragging does not update size immediately, but updates when released
+     */
+    lazy: boolean;
+    /**
+     * Custom collapsible icon HTML
+     */
+    collapsibleIcon?: CollapsibleIcon;
+    /**
+     * Custom dragger icon HTML
+     */
+    draggerIcon?: string;
+    /**
+     * Semantic DOM class names
+     */
+    classNames?: {
+        container?: string;
+        bar?: string;
+        handle?: string;
+    };
+    /**
+     * Semantic DOM styles
+     */
+    styles?: {
+        container?: Record<string, string>;
+        bar?: Record<string, string>;
+        handle?: Record<string, string>;
+    };
+    panelSizes: number[];
+    isDragging: boolean;
+    lazyPosition: number | null;
+    collapsedPanels: boolean[];
+    /**
+     * Panel size change callback
+     */
+    xResize: EventEmitter<number[]>;
+    /**
+     * Drag start callback
+     */
+    xResizeStart: EventEmitter<number[]>;
+    /**
+     * Drag end callback
+     */
+    xResizeEnd: EventEmitter<number[]>;
+    /**
+     * Callback when expanding or collapsing
+     */
+    xCollapse: EventEmitter<SplitterCollapseDetail>;
+    private containerRef;
+    private activeBarIndex;
+    private startPos;
+    private startSizes;
+    private panelInfos;
+    private totalSize;
+    private resizeObserver;
+    private mutationObserver;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleLayoutChange(): void;
+    handlePanelResizeStart(ev: CustomEvent): void;
+    handlePanelCollapse(ev: CustomEvent): void;
+    private getDirection;
+    private initializePanels;
+    private setupMutationObserver;
+    private getPanels;
+    /**
+     * Calculates the size of each panel based on container size and panel constraints.
+     *
+     * Flow:
+     * 1. Determines the total available size (width or height) of the container.
+     * 2. Subtracts the space taken by splitter bars.
+     * 3. Iterates through panels to categorize them:
+     *    - Collapsed panels take 0 space.
+     *    - Panels with `defaultSize` (pixels or %) take that specific amount.
+     *    - Remaining panels are treated as flexible.
+     * 4. Calculates the remaining space after allocating fixed sizes.
+     * 5. Distributes remaining space equally among flexible panels.
+     * 6. Applies min/max constraints to all panels.
+     * 7. Updates internal `panelSizes` state and applies styles.
+     */
+    private calculatePanelSizes;
+    private parseSize;
+    private updatePanelStyles;
+    /**
+     * Initiates the drag operation for resizing panels.
+     *
+     * Flow:
+     * 1. Records the active bar index and starting mouse position.
+     * 2. Snapshots current panel sizes.
+     * 3. Sets `isDragging` state.
+     * 4. Attaches global mouse listeners for drag interaction.
+     * 5. Updates cursor style to indicate resizing.
+     *
+     * @param barIndex - Index of the splitter bar being dragged.
+     * @param clientPos - Initial X or Y coordinate.
+     */
+    private startDrag;
+    /**
+     * Handles mouse move during drag.
+     * Calculates delta and applies resize (or updates lazy position).
+     */
+    private handleMouseMove;
+    /**
+     * Handles mouse up to end drag.
+     * Applies final resize if lazy mode, clears listeners and state.
+     */
+    private handleMouseUp;
+    /**
+     * Applies the resize delta to adjacent panels.
+     *
+     * Flow:
+     * 1. Identifies the previous and next panels relative to the drag bar.
+     * 2. Checks if resizing is allowed (not disabled, not collapsed).
+     * 3. Calculates proposed new sizes based on delta.
+     * 4. Constrains new sizes against min/max limits for both panels.
+     *    - If one panel hits a limit, the delta is adjusted for the other.
+     * 5. Updates `panelSizes` state and emits resize event.
+     *
+     * @param delta - The change in pixels from start position.
+     */
+    private applyResize;
+    /**
+     * Toggles the collapse state of a panel.
+     *
+     * Flow:
+     * 1. Identifies the target panel based on direction.
+     * 2. Toggles the collapsed boolean in state.
+     * 3. If collapsing: saves current size to `collapsedSize` and sets size to 0.
+     * 4. If expanding: restores size from `collapsedSize`.
+     * 5. Updates styles and emits collapse event.
+     *
+     * @param barIndex - Index of the bar initiating collapse.
+     * @param direction - 'start' (previous panel) or 'end' (next panel).
+     */
+    private toggleCollapse;
+    /**
+     * Resets the panels adjacent to a bar to their default sizes.
+     * Typically triggered by double-clicking the splitter bar.
+     *
+     * @param barIndex - Index of the bar.
+     */
+    private resetToDefault;
+    private handleKeyDown;
+    /**
+     * Renders the draggable splitter bar between panels.
+     * Includes logic for collapse buttons if configured.
+     *
+     * @param index - Index of the bar.
+     * @returns JSX.Element
+     */
+    private renderDragBar;
+    private getCollapsibleConfig;
+    private renderCollapseArrow;
+    private setContainerRef;
+    /**
+     * Main render method for the Splitter component.
+     *
+     * Flow:
+     * 1. Determines layout direction (horizontal/vertical).
+     * 2. Iterates through child panels (projected via slots).
+     * 3. Interleaves panels with splitter bars:
+     *    [Panel 0] - [Bar 0] - [Panel 1] - [Bar 1] - ...
+     * 4. Renders lazy drag indicator if active.
+     *
+     * @returns JSX.Element
+     */
+    render(): any;
+}

package/dist/types/components/x-splitter-panel/types.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Collapsible configuration for panel
+ */
+export type PanelCollapsible = boolean | {
+    start?: boolean;
+    end?: boolean;
+    showCollapsibleIcon?: boolean | 'auto';
+};
+/**
+ * Panel resize start event detail
+ */
+export interface PanelResizeStartDetail {
+    barIndex: number;
+    clientX: number;
+    clientY: number;
+}
+/**
+ * Panel collapse event detail
+ */
+export interface PanelCollapseDetail {
+    panelIndex: number;
+    direction: 'start' | 'end';
+}

package/dist/types/components/x-splitter-panel/x-splitter-panel.d.ts

@@ -0,0 +1,67 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { PanelCollapsible, PanelResizeStartDetail, PanelCollapseDetail } from './types';
+export declare class XSplitterPanel {
+    /**
+     * Host element reference.
+     */
+    el: HTMLXSplitterPanelElement;
+    /**
+     * Controlled panel size, support number for px or 'percent%' usage
+     * @example
+     * <x-splitter-panel size="30%"></x-splitter-panel>
+     */
+    size?: number | string;
+    /**
+     * Initial panel size, support number for px or 'percent%' usage
+     * @example
+     * <x-splitter-panel defaultSize={240}></x-splitter-panel>
+     */
+    defaultSize?: number | string;
+    /**
+     * Minimum threshold, support number for px or 'percent%' usage
+     * @example
+     * <x-splitter-panel min={100}></x-splitter-panel>
+     */
+    min?: number | string;
+    /**
+     * Maximum threshold, support number for px or 'percent%' usage
+     * @example
+     * <x-splitter-panel max="70%"></x-splitter-panel>
+     */
+    max?: number | string;
+    /**
+     * Whether to enable drag and drop
+     * @example
+     * <x-splitter-panel resizable={false}></x-splitter-panel>
+     */
+    resizable: boolean;
+    /**
+     * Quick folding configuration
+     * @example
+     * <x-splitter-panel collapsible="start"></x-splitter-panel>
+     */
+    collapsible: PanelCollapsible;
+    /**
+     * Emitted when resize starts (internal)
+     * @example
+     * <x-splitter-panel onXPanelResizeStart={(ev) => console.log(ev.detail)}></x-splitter-panel>
+     */
+    xPanelResizeStart: EventEmitter<PanelResizeStartDetail>;
+    /**
+     * Emitted when collapse is triggered (internal)
+     * @example
+     * <x-splitter-panel onXPanelCollapse={(ev) => console.log(ev.detail)}></x-splitter-panel>
+     */
+    xPanelCollapse: EventEmitter<PanelCollapseDetail>;
+    /**
+     * Renders the Splitter Panel component.
+     *
+     * Flow:
+     * 1. Applies styling classes based on props (e.g., resizable).
+     * 2. Renders the host element.
+     * 3. Renders a content wrapper div to hold projected content (slot).
+     *
+     * @returns JSX.Element
+     */
+    render(): any;
+}

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

@@ -0,0 +1,80 @@
+export declare class XStatistic {
+    /**
+     * Title text for the statistic.
+     * @example
+     * <x-statistic statisticTitle="Active Users"></x-statistic>
+     */
+    statisticTitle: string;
+    /**
+     * Numeric value to display.
+     * @example
+     * <x-statistic value={1234}></x-statistic>
+     */
+    value: string | number;
+    /**
+     * Number of decimal places.
+     * @example
+     * <x-statistic value={12.345} precision={2}></x-statistic>
+     */
+    precision: number;
+    /**
+     * Prefix to display before value.
+     * @example
+     * <x-statistic value={99} valuePrefix="$"></x-statistic>
+     */
+    valuePrefix: string;
+    /**
+     * Suffix to display after value.
+     * @example
+     * <x-statistic value={75} suffix="%"></x-statistic>
+     */
+    suffix: string;
+    /**
+     * Loading state for skeleton display.
+     * @example
+     * <x-statistic loading></x-statistic>
+     */
+    loading: boolean;
+    /**
+     * Decimal separator character.
+     * @example
+     * <x-statistic decimalSeparator=","></x-statistic>
+     */
+    decimalSeparator: string;
+    /**
+     * Grouping separator for thousands.
+     * @example
+     * <x-statistic groupSeparator=" "></x-statistic>
+     */
+    groupSeparator: string;
+    /**
+     * Formats a numeric value with precision, group separators, and decimal separators.
+     *
+     * Flow:
+     * 1. Checks if value is undefined or null, returns empty string.
+     * 2. Converts value to number. If NaN, returns original value as string.
+     * 3. Applies precision using `toFixed` if `precision` prop is set.
+     * 4. Splits integer and decimal parts.
+     * 5. Adds thousand separators (groupSeparator) to the integer part using regex.
+     * 6. Joins parts with the configured `decimalSeparator`.
+     *
+     * @param val - Input value to format (string or number).
+     * @returns string - The formatted string.
+     */
+    formatValue(val: string | number): string | number;
+    /**
+     * Renders the Statistic component.
+     *
+     * Flow:
+     * 1. Renders the title if provided.
+     * 2. Renders the content wrapper.
+     * 3. Renders the prefix if provided.
+     * 4. Renders the main value:
+     *    - If `loading` is true, shows a Skeleton component.
+     *    - Otherwise, shows the formatted value.
+     * 5. Renders the suffix if provided.
+     *
+     * @returns JSX.Element
+     */
+    render(): any;
+}

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

@@ -0,0 +1,14 @@
+/**
+ * @file Step Component Types
+ * @description Type definitions for x-step component following Ant Design specification
+ */
+export type { StepStatus } from '../x-steps/types';
+/**
+ * Step click event detail
+ */
+export interface StepClickEventDetail {
+    /** Step index */
+    index: number;
+    /** Step key */
+    key?: string;
+}

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

@@ -0,0 +1,104 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { StepStatus, StepClickEventDetail } from './types';
+export declare class XStep {
+    /**
+     * Host element reference.
+     */
+    el: HTMLElement;
+    /**
+     * Title of the step.
+     * @example
+     * <x-step stepTitle="Step 1"></x-step>
+     */
+    stepTitle?: string;
+    /**
+     * Subtitle of the step.
+     * @example
+     * <x-step subTitle="Optional"></x-step>
+     */
+    subTitle?: string;
+    /**
+     * Description/content of the step.
+     * @example
+     * <x-step description="Details"></x-step>
+     */
+    description?: string;
+    /**
+     * Custom icon name for the step.
+     * @example
+     * <x-step icon="check"></x-step>
+     */
+    icon?: string;
+    /**
+     * Status of the step.
+     * @example
+     * <x-step status="process"></x-step>
+     */
+    status: StepStatus;
+    /**
+     * Whether the step is disabled for clicking.
+     * @example
+     * <x-step disabled></x-step>
+     */
+    disabled: boolean;
+    /**
+     * Percentage of the step (if in process).
+     * @example
+     * <x-step percent={60}></x-step>
+     */
+    percent?: number;
+    /** @internal Step number to display */
+    _stepNumber: number;
+    /** @internal Step index (0-based) */
+    _stepIndex: number;
+    /** @internal Direction from parent */
+    _direction: 'horizontal' | 'vertical';
+    /** @internal Whether clickable */
+    _clickable: boolean;
+    /** @internal Size from parent */
+    _size: 'default' | 'small';
+    /** @internal Type from parent */
+    _type: 'default' | 'navigation' | 'dot' | 'inline' | 'panel';
+    /** @internal Progress dot mode */
+    _progressDot: boolean;
+    /**
+     * Emitted when step is clicked (internal).
+     * @example
+     * <x-step onXStepClick={(ev) => console.log(ev.detail)}></x-step>
+     */
+    xStepClick: EventEmitter<StepClickEventDetail>;
+    /**
+     * Emit click event when step is clickable.
+     * @returns void
+     */
+    private handleClick;
+    /**
+     * Renders the icon for the step.
+     *
+     * Flow:
+     * 1. Checks for custom `icon` prop first.
+     * 2. Checks for dot style mode (renders a simple dot).
+     * 3. Checks status:
+     *    - 'finish': Renders check icon.
+     *    - 'error': Renders close icon.
+     * 4. Default: Renders the step number.
+     * 5. If `percent` is provided and status is 'process', wraps the icon in a circular progress indicator.
+     *
+     * @returns JSX.Element - The icon element.
+     */
+    private renderIcon;
+    /**
+     * Renders the Step component.
+     *
+     * Flow:
+     * 1. Constructs class map based on status, disabled state, and clickability.
+     * 2. Renders the host element with click handler.
+     * 3. Renders the main container with:
+     *    - Tail (connecting line).
+     *    - Icon container (calls `renderIcon`).
+     *    - Content container (title, subtitle, description, and slot).
+     *
+     * @returns JSX.Element
+     */
+    render(): any;
+}

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

@@ -0,0 +1,124 @@
+/**
+ * @file Steps Component Types
+ * @description Type definitions for x-steps component following Ant Design specification
+ */
+/**
+ * Step status
+ */
+export type StepStatus = 'wait' | 'process' | 'finish' | 'error';
+/**
+ * Steps direction (orientation)
+ */
+export type StepsDirection = 'horizontal' | 'vertical';
+/**
+ * Steps size
+ */
+export type StepsSize = 'default' | 'small';
+/**
+ * Steps type/variant
+ */
+export type StepsType = 'default' | 'navigation' | 'dot' | 'inline' | 'panel';
+/**
+ * Title placement direction
+ */
+export type StepsTitlePlacement = 'horizontal' | 'vertical';
+/**
+ * Steps variant style
+ */
+export type StepsVariant = 'filled' | 'outlined';
+/**
+ * Step item configuration
+ */
+export interface StepItem {
+    /** Title of the step */
+    title?: string;
+    /** Subtitle of the step */
+    subTitle?: string;
+    /** Description/content of the step */
+    description?: string;
+    /** Custom icon for the step */
+    icon?: string;
+    /** Status of the step */
+    status?: StepStatus;
+    /** Whether step is disabled */
+    disabled?: boolean;
+}
+/**
+ * Steps change event detail
+ */
+export interface StepsChangeEventDetail {
+    /** Current step index */
+    current: number;
+    /** Previous step index */
+    previous: number;
+}
+/**
+ * Custom class names for steps parts
+ */
+export interface StepsClassNames {
+    /** Root element class */
+    root?: string;
+    /** Step item class */
+    item?: string;
+    /** Step item wrapper class */
+    itemWrapper?: string;
+    /** Step item icon class */
+    itemIcon?: string;
+    /** Step item header class */
+    itemHeader?: string;
+    /** Step item title class */
+    itemTitle?: string;
+    /** Step item subtitle class */
+    itemSubtitle?: string;
+    /** Step item section class */
+    itemSection?: string;
+    /** Step item content class */
+    itemContent?: string;
+    /** Step item rail/tail class */
+    itemRail?: string;
+}
+/**
+ * Custom styles for steps parts
+ */
+export interface StepsStyles {
+    /** Root element styles */
+    root?: {
+        [key: string]: string;
+    };
+    /** Step item styles */
+    item?: {
+        [key: string]: string;
+    };
+    /** Step item wrapper styles */
+    itemWrapper?: {
+        [key: string]: string;
+    };
+    /** Step item icon styles */
+    itemIcon?: {
+        [key: string]: string;
+    };
+    /** Step item header styles */
+    itemHeader?: {
+        [key: string]: string;
+    };
+    /** Step item title styles */
+    itemTitle?: {
+        [key: string]: string;
+    };
+    /** Step item subtitle styles */
+    itemSubtitle?: {
+        [key: string]: string;
+    };
+    /** Step item section styles */
+    itemSection?: {
+        [key: string]: string;
+    };
+    /** Step item content styles */
+    itemContent?: {
+        [key: string]: string;
+    };
+    /** Step item rail/tail styles */
+    itemRail?: {
+        [key: string]: string;
+    };
+}