@xlabs-store/core 0.0.1

package/dist/types/components/x-menu-submenu/x-menu-submenu.d.ts

@@ -0,0 +1,135 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SubmenuToggleDetail, SubmenuTitleClickDetail } from './types';
+export declare class XMenuSubmenu {
+    el: HTMLElement;
+    /**
+     * Unique ID of the submenu
+     * @example
+     * <x-menu-submenu itemKey="sub-1"></x-menu-submenu>
+     */
+    itemKey: string;
+    /**
+     * Whether sub-menu is disabled
+     * @example
+     * <x-menu-submenu disabled></x-menu-submenu>
+     */
+    disabled: boolean;
+    /**
+     * Sub-menu class name for popup (not working when mode="inline")
+     * @example
+     * <x-menu-submenu popupClassName="my-submenu"></x-menu-submenu>
+     */
+    popupClassName?: string;
+    /**
+     * Sub-menu offset (not working when mode="inline")
+     * @example
+     * <x-menu-submenu popupOffset={[8, 4]}></x-menu-submenu>
+     */
+    popupOffset?: [number, number];
+    /** @internal */
+    _menuMode: 'vertical' | 'horizontal' | 'inline';
+    /** @internal */
+    _menuTheme: 'light' | 'dark';
+    /** @internal */
+    _inlineCollapsed: boolean;
+    /** @internal */
+    _level: number;
+    /** @internal */
+    _inlineIndent: number;
+    /** @internal */
+    _open: boolean;
+    /** @internal */
+    _triggerSubMenuAction: 'hover' | 'click';
+    /** @internal */
+    _subMenuOpenDelay: number;
+    /** @internal */
+    _subMenuCloseDelay: number;
+    /** @internal */
+    _keyPath: string[];
+    /** @internal */
+    _selectedKeys: string[];
+    isHovered: boolean;
+    popupVisible: boolean;
+    inlineExpanded: boolean;
+    private openDelayTimer;
+    private closeDelayTimer;
+    /**
+     * Emitted when submenu is opened/closed (internal)
+     * @example
+     * <x-menu-submenu onXSubmenuToggle={(ev) => console.log(ev.detail)}></x-menu-submenu>
+     */
+    xSubmenuToggle: EventEmitter<SubmenuToggleDetail>;
+    /**
+     * Emitted when submenu title is clicked
+     * @example
+     * <x-menu-submenu onXTitleClick={(ev) => console.log(ev.detail)}></x-menu-submenu>
+     */
+    xTitleClick: EventEmitter<SubmenuTitleClickDetail>;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    disconnectedCallback(): void;
+    handleOpenChange(newValue: boolean): void;
+    handlePropsChange(): void;
+    private clearTimers;
+    /**
+     * Handles click on the submenu title.
+     *
+     * Flow:
+     * 1. Checks if disabled; if so, prevents default and stops propagation.
+     * 2. Emits `xTitleClick` event.
+     * 3. Determines if toggle should occur:
+     *    - In 'inline' mode (unless collapsed level 0).
+     *    - Or if trigger action is 'click'.
+     * 4. Calls `toggleSubmenu` if conditions are met.
+     *
+     * @param e - Mouse event.
+     */
+    private handleTitleClick;
+    /**
+     * Handles mouse enter event for hover trigger.
+     *
+     * Flow:
+     * 1. Checks if disabled; returns if true.
+     * 2. Sets internal `isHovered` state to true.
+     * 3. Checks if popup mode is active (vertical/horizontal or collapsed inline).
+     * 4. If trigger is 'hover':
+     *    - Clears existing timers.
+     *    - Sets a timeout (based on `subMenuOpenDelay`) to call `openSubmenu`.
+     */
+    private handleMouseEnter;
+    /**
+     * Handles mouse leave event for hover trigger.
+     *
+     * Flow:
+     * 1. Sets internal `isHovered` state to false.
+     * 2. Checks if popup mode is active.
+     * 3. If trigger is 'hover':
+     *    - Clears existing timers.
+     *    - Sets a timeout (based on `subMenuCloseDelay`) to call `closeSubmenu`.
+     */
+    private handleMouseLeave;
+    private toggleSubmenu;
+    private openSubmenu;
+    private closeSubmenu;
+    private syncChildrenProps;
+    private hasSelectedChildren;
+    private getInlinePadding;
+    /**
+     * Render submenu title and children.
+     *
+     * Flow:
+     * 1. Determines display mode (inline vs popup) considering collapse state.
+     * 2. Checks if any children are selected (`hasSelectedChildren`).
+     * 3. Renders Host with classes for mode, theme, open state, and selection.
+     * 4. Renders Title area with icon, label, and arrow.
+     * 5. Renders Content:
+     *    - If inline: Renders `<ul>` directly in flow.
+     *    - If popup: Renders `<div>` overlay (usually positioned via CSS or portal in future).
+     *
+     * @returns {JSX.Element} The component tree.
+     * @example
+     * <x-menu-submenu itemKey="sub-1"><x-menu-item>Item</x-menu-item></x-menu-submenu>
+     */
+    render(): any;
+}

package/dist/types/components/x-message/message-service.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Message Service
+ *
+ * Provides programmatic API for displaying toast-like messages
+ * Following Ant Design message API pattern
+ *
+ * Usage:
+ * ```ts
+ * import { message } from '@xlabs/core';
+ *
+ * // Basic usage
+ * message.info('This is an info message');
+ * message.success('Success!');
+ * message.error('Error occurred');
+ * message.warning('Warning!');
+ * message.loading('Loading...');
+ *
+ * // With duration
+ * message.info('This will close in 5 seconds', 5);
+ *
+ * // With config object
+ * message.info({
+ *   content: 'Custom message',
+ *   duration: 5,
+ *   key: 'unique-key',
+ *   onClose: () => console.log('closed'),
+ * });
+ *
+ * // Update message by key
+ * message.loading({ content: 'Loading...', key: 'loading' });
+ * // Later...
+ * message.success({ content: 'Done!', key: 'loading' });
+ *
+ * // Promise interface
+ * message.loading('Loading...').then(() => {
+ *   message.success('Loaded!');
+ * });
+ *
+ * // Destroy by key
+ * message.destroy('loading');
+ *
+ * // Destroy all
+ * message.destroy();
+ *
+ * // Configure globally
+ * message.config({
+ *   duration: 2,
+ *   maxCount: 3,
+ *   top: 100,
+ * });
+ * ```
+ */
+import type { IMessageService } from './types';
+/**
+ * Message Service
+ */
+export declare const message: IMessageService;
+export default message;

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

@@ -0,0 +1,90 @@
+/**
+ * @file Message Component Types
+ * @description Type definitions for x-message component and Message service
+ */
+/**
+ * Message type
+ */
+export type MessageType = 'info' | 'success' | 'error' | 'warning' | 'loading';
+/**
+ * Message placement - where messages appear on screen
+ */
+export type MessagePlacement = 'top' | 'bottom';
+/**
+ * Message configuration for service methods
+ */
+export interface MessageConfig {
+    /** Message content */
+    content: string;
+    /** Duration in seconds, 0 means never auto close */
+    duration?: number;
+    /** Custom icon HTML */
+    icon?: string;
+    /** Unique key for message, used for updating */
+    key?: string;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline style */
+    style?: {
+        [key: string]: string;
+    };
+    /** Callback when message is closed */
+    onClose?: () => void;
+    /** Click handler */
+    onClick?: () => void;
+}
+/**
+ * Message instance returned from service methods
+ */
+export interface MessageInstance {
+    /** Close this message */
+    close: () => void;
+    /** Update message content */
+    update: (config: Partial<MessageConfig>) => void;
+    /** Promise that resolves when message closes */
+    then: <T>(onFulfilled?: () => T) => Promise<T>;
+}
+/**
+ * Global message configuration
+ */
+export interface MessageGlobalConfig {
+    /** Duration in seconds (default: 3) */
+    duration?: number;
+    /** Max messages to show at once */
+    maxCount?: number;
+    /** Position of messages */
+    placement?: MessagePlacement;
+    /** Distance from top of viewport */
+    top?: number;
+    /** Distance from bottom of viewport */
+    bottom?: number;
+    /** Custom prefix class */
+    prefixCls?: string;
+    /** RTL mode */
+    rtl?: boolean;
+    /** Custom container for mounting messages */
+    getContainer?: () => HTMLElement;
+}
+/**
+ * Message service interface
+ */
+export interface IMessageService {
+    /** Display info message */
+    info: (content: string | MessageConfig, duration?: number, onClose?: () => void) => MessageInstance;
+    /** Display success message */
+    success: (content: string | MessageConfig, duration?: number, onClose?: () => void) => MessageInstance;
+    /** Display error message */
+    error: (content: string | MessageConfig, duration?: number, onClose?: () => void) => MessageInstance;
+    /** Display warning message */
+    warning: (content: string | MessageConfig, duration?: number, onClose?: () => void) => MessageInstance;
+    /** Display loading message */
+    loading: (content: string | MessageConfig, duration?: number, onClose?: () => void) => MessageInstance;
+    /** Open message with custom config */
+    open: (config: MessageConfig & {
+        type?: MessageType;
+    }) => MessageInstance;
+    /** Destroy message by key */
+    destroy: (key?: string) => void;
+    /** Configure global settings */
+    config: (options: MessageGlobalConfig) => void;
+}

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

@@ -0,0 +1,133 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { MessageType } from './types';
+export declare class XMessage {
+    /**
+     * Host element reference.
+     */
+    el: HTMLElement;
+    /**
+     * Message content.
+     * @example
+     * <x-message content="Saved"></x-message>
+     */
+    content: string;
+    /**
+     * Duration in seconds before auto close (0 = never).
+     * @example
+     * <x-message duration={5}></x-message>
+     */
+    duration: number;
+    /**
+     * Message type.
+     * @example
+     * <x-message type="success"></x-message>
+     */
+    type: MessageType;
+    /**
+     * Custom icon HTML.
+     * @example
+     * <x-message icon="<svg></svg>"></x-message>
+     */
+    icon?: string;
+    /**
+     * Unique key for message.
+     * @example
+     * <x-message messageKey="msg-1"></x-message>
+     */
+    messageKey?: string;
+    /**
+     * Internal visibility state.
+     */
+    visible: boolean;
+    /**
+     * Closing state for animation.
+     */
+    closing: boolean;
+    /**
+     * Timer reference.
+     */
+    private timer?;
+    /**
+     * Close promise resolver.
+     */
+    private closeResolver?;
+    /**
+     * Event when message is closed.
+     * @example
+     * <x-message onXClose={(ev) => console.log(ev.detail)}></x-message>
+     */
+    xClose: EventEmitter<string>;
+    /**
+     * Show message and start timer on load.
+     *
+     * Flow:
+     * 1. Triggers visibility transition via `requestAnimationFrame`.
+     * 2. Starts the auto-close timer based on `duration`.
+     *
+     * @returns void
+     */
+    componentDidLoad(): void;
+    /**
+     * Clear timers on disconnect.
+     * @returns void
+     */
+    disconnectedCallback(): void;
+    /**
+     * Start auto-close timer if duration > 0.
+     * @returns void
+     */
+    private startCloseTimer;
+    /**
+     * Clear any running timer.
+     * @returns void
+     */
+    private clearTimer;
+    /**
+     * Close the message.
+     *
+     * Flow:
+     * 1. Sets closing state to trigger exit animation.
+     * 2. Waits for animation to complete (300ms).
+     * 3. Emits `xClose` event.
+     * 4. Resolves any pending close promises.
+     * 5. Removes the element from DOM.
+     *
+     * @returns Promise<void>
+     * @example
+     * await el.close()
+     */
+    close(): Promise<void>;
+    /**
+     * Get a promise that resolves when message closes.
+     * @returns Promise<void>
+     * @example
+     * await el.getClosePromise()
+     */
+    getClosePromise(): Promise<void>;
+    /**
+     * Update message content.
+     * @param content - New content string.
+     * @returns Promise<void>
+     * @example
+     * await el.updateContent('Updated')
+     */
+    updateContent(content: string): Promise<void>;
+    /**
+     * Update message duration and restart timer.
+     * @param duration - New duration in seconds.
+     * @returns Promise<void>
+     * @example
+     * await el.updateDuration(10)
+     */
+    updateDuration(duration: number): Promise<void>;
+    /**
+     * Render icon based on type or custom icon HTML.
+     * @returns JSX.Element
+     */
+    private renderIcon;
+    /**
+     * Render message container.
+     * @returns JSX.Element
+     */
+    render(): any;
+}

package/dist/types/components/x-modal/modal-service.d.ts

@@ -0,0 +1,6 @@
+import type { IModalService } from './modal-service.types';
+/**
+ * Modal Service implementation (following NzModalService pattern)
+ */
+export declare const Modal: IModalService;
+export default Modal;

package/dist/types/components/x-modal/modal-service.types.d.ts

@@ -0,0 +1,278 @@
+/**
+ * @file Modal Service Types
+ * @description Type definitions for Modal service (following NzModalService pattern)
+ */
+import type { FinderConfig, FinderItem } from '../x-finder/types';
+/**
+ * Modal method type
+ */
+export type ModalMethodType = 'info' | 'success' | 'error' | 'warning' | 'confirm';
+/**
+ * Modal content type - can be string, HTMLElement, or HTMLTemplateElement
+ */
+export type ModalContentType = string | HTMLElement | HTMLTemplateElement;
+/**
+ * Simple event emitter for modal events
+ */
+export interface ModalEventEmitter<T = void> {
+    subscribe: (callback: (value: T) => void) => {
+        unsubscribe: () => void;
+    };
+}
+/**
+ * Modal button options for custom footer buttons
+ */
+export interface ModalButtonOptions {
+    /** Button text */
+    label: string;
+    /** Button type */
+    type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';
+    /** Whether danger style */
+    danger?: boolean;
+    /** Button shape */
+    shape?: 'default' | 'circle' | 'round';
+    /** Button size */
+    size?: 'large' | 'default' | 'small';
+    /** Whether ghost style */
+    ghost?: boolean;
+    /** Whether to show loading state automatically when onClick returns a promise */
+    autoLoading?: boolean;
+    /** Whether to show this button */
+    show?: boolean | (() => boolean);
+    /** Whether button is loading */
+    loading?: boolean | (() => boolean);
+    /** Whether button is disabled */
+    disabled?: boolean | (() => boolean);
+    /** Click handler */
+    onClick?: () => void | Promise<void>;
+}
+/**
+ * Modal service configuration (following NzModalService pattern)
+ */
+export interface ModalConfig {
+    /** Modal title */
+    title?: string;
+    /** Modal content - HTML string or text */
+    content?: string;
+    /** Width of the modal */
+    width?: string | number;
+    /** Whether to show close button */
+    closable?: boolean;
+    /** Whether to show mask */
+    mask?: boolean;
+    /** Whether clicking mask closes modal */
+    maskClosable?: boolean;
+    /** Whether to center the modal */
+    centered?: boolean;
+    /** OK button text. Set to null to hide OK button */
+    okText?: string | null;
+    /** Cancel button text. Set to null to hide Cancel button */
+    cancelText?: string | null;
+    /** OK button type */
+    okType?: 'primary' | 'default' | 'dashed' | 'text' | 'link';
+    /** Whether OK button is danger style */
+    okDanger?: boolean;
+    /** Whether OK button is loading */
+    okLoading?: boolean;
+    /** Whether Cancel button is loading */
+    cancelLoading?: boolean;
+    /** Whether OK button is disabled */
+    okDisabled?: boolean;
+    /** Whether Cancel button is disabled */
+    cancelDisabled?: boolean;
+    /** Modal type icon */
+    type?: ModalMethodType;
+    /** Custom icon - HTML string */
+    icon?: string;
+    /** Icon type for confirm modal */
+    iconType?: string;
+    /** Custom class name */
+    className?: string;
+    /** Wrapper class name */
+    wrapClassName?: string;
+    /** z-index */
+    zIndex?: number;
+    /** Body style */
+    bodyStyle?: {
+        [key: string]: string;
+    };
+    /** Mask style */
+    maskStyle?: {
+        [key: string]: string;
+    };
+    /** Style */
+    style?: {
+        [key: string]: string;
+    };
+    /** Whether support press ESC to close */
+    keyboard?: boolean;
+    /** Autofocus position */
+    autofocus?: 'ok' | 'cancel' | 'auto' | null;
+    /** Callback when OK button clicked - return false to prevent close */
+    onOk?: () => void | boolean | Promise<void | boolean>;
+    /** Callback when Cancel button clicked - return false to prevent close */
+    onCancel?: () => void | boolean | Promise<void | boolean>;
+    /** Callback after modal opened */
+    afterOpen?: () => void;
+    /** Callback after modal closed */
+    afterClose?: (result?: unknown) => void;
+    /** Auto close duration in seconds (0 = never) */
+    autoClose?: number;
+    /** Data to pass to the modal content component */
+    data?: unknown;
+}
+/**
+ * Configuration for Modal.create() method
+ */
+export interface ModalCreateConfig {
+    /** Modal title - can be string or HTMLElement */
+    title?: string | HTMLElement;
+    /** Whether to show header */
+    showHeader?: boolean;
+    /** Modal content - can be string, HTMLElement, HTMLTemplateElement, or Component tag name */
+    content?: ModalContentType;
+    /** Custom footer - can be string, HTMLElement, HTMLTemplateElement, ModalButtonOptions[], or false/null to hide */
+    footer?: ModalContentType | ModalButtonOptions[] | boolean | null;
+    /** Width of the modal */
+    width?: string | number;
+    /** Whether to show close button */
+    closable?: boolean;
+    /** Custom close icon - HTML string */
+    closeIcon?: string;
+    /** Whether to show mask */
+    mask?: boolean;
+    /** Whether clicking mask closes modal */
+    maskClosable?: boolean;
+    /** Whether to center the modal */
+    centered?: boolean;
+    /** OK button text. Set to null to hide OK button */
+    okText?: string | null;
+    /** Cancel button text. Set to null to hide Cancel button */
+    cancelText?: string | null;
+    /** OK button type */
+    okType?: 'primary' | 'default' | 'dashed' | 'text' | 'link';
+    /** Whether OK button is danger style */
+    okDanger?: boolean;
+    /** Whether OK button is loading */
+    okLoading?: boolean;
+    /** Whether Cancel button is loading */
+    cancelLoading?: boolean;
+    /** Whether OK button is disabled */
+    okDisabled?: boolean;
+    /** Whether Cancel button is disabled */
+    cancelDisabled?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Wrapper class name */
+    wrapClassName?: string;
+    /** z-index */
+    zIndex?: number;
+    /** Body style */
+    bodyStyle?: {
+        [key: string]: string;
+    };
+    /** Mask style */
+    maskStyle?: {
+        [key: string]: string;
+    };
+    /** Wrapper style */
+    wrapStyle?: {
+        [key: string]: string;
+    };
+    /** Style */
+    style?: {
+        [key: string]: string;
+    };
+    /** Whether support press ESC to close */
+    keyboard?: boolean;
+    /** Callback when OK button clicked - return false to prevent close */
+    onOk?: () => void | boolean | Promise<void | boolean>;
+    /** Callback when Cancel button clicked - return false to prevent close */
+    onCancel?: () => void | boolean | Promise<void | boolean>;
+    /** Callback after modal is opened */
+    afterOpen?: () => void;
+    /** Callback after modal is closed */
+    afterClose?: (result?: unknown) => void;
+    /** Data to pass to the modal content component */
+    data?: unknown;
+}
+/**
+ * Modal reference (following NzModalRef pattern)
+ * Used to control dialogs and communicate with their content
+ */
+export interface ModalRef<R = unknown> {
+    /** Event emitted when modal opened */
+    afterOpen: ModalEventEmitter<void>;
+    /** Event emitted when modal closed */
+    afterClose: ModalEventEmitter<R>;
+    /** Close the modal with optional result */
+    close: (result?: R) => void;
+    /** Destroy the modal */
+    destroy: (result?: R) => void;
+    /** Get the content component instance (if content is a component) */
+    getContentComponent: () => HTMLElement | null;
+    /** Get the modal content container element */
+    getContentElement: () => HTMLElement | null;
+    /** Get the modal body element */
+    getBodyElement: () => HTMLElement | null;
+    /** Manually trigger OK */
+    triggerOk: () => void;
+    /** Manually trigger Cancel */
+    triggerCancel: () => void;
+    /** Update modal configuration */
+    updateConfig: (config: Partial<ModalCreateConfig>) => void;
+    /** @deprecated Use updateConfig instead */
+    update: (config: Partial<ModalCreateConfig>) => void;
+}
+/**
+ * Modal instance returned from Modal.method() (confirm, info, etc.)
+ */
+export interface ModalInstance {
+    /** Close the modal */
+    close: () => void;
+    /** Destroy the modal */
+    destroy: () => void;
+    /** Update modal configuration */
+    update: (config: Partial<ModalConfig>) => void;
+    /** Manually trigger OK */
+    triggerOk: () => void;
+    /** Manually trigger Cancel */
+    triggerCancel: () => void;
+}
+/**
+ * Modal instance returned from Modal.create()
+ * @deprecated Use ModalRef instead
+ */
+export type ModalCreateInstance = ModalRef;
+/**
+ * Configuration for Modal.finder() method
+ */
+export interface FinderModalConfig extends Omit<ModalCreateConfig, 'content'> {
+    /** Finder configuration */
+    finderConfig?: FinderConfig;
+}
+/**
+ * Modal service interface (following NzModalService pattern)
+ */
+export interface IModalService {
+    /** All currently open modals */
+    readonly openModals: ModalRef<unknown>[];
+    /** Create a custom modal with flexible content */
+    create: <R = unknown>(config: ModalCreateConfig) => ModalRef<R>;
+    /** Show info modal */
+    info: (config: ModalConfig) => ModalInstance;
+    /** Show success modal */
+    success: (config: ModalConfig) => ModalInstance;
+    /** Show error modal */
+    error: (config: ModalConfig) => ModalInstance;
+    /** Show warning modal */
+    warning: (config: ModalConfig) => ModalInstance;
+    /** Show confirm modal */
+    confirm: (config: ModalConfig) => ModalInstance;
+    /** Show finder modal */
+    finder: (config?: FinderModalConfig) => ModalRef<FinderItem[]>;
+    /** Close all modals */
+    closeAll: () => void;
+    /** @deprecated Use closeAll instead */
+    destroyAll: () => void;
+}