@xlabs-store/core 0.0.1

package/dist/types/components/x-auto-complete/types.d.ts

@@ -0,0 +1,150 @@
+/**
+ * X-Auto-Complete Types - Following Ant Design Specification
+ */
+/**
+ * Auto complete size
+ */
+export type AutoCompleteSize = 'large' | 'middle' | 'small';
+/**
+ * Auto complete status for validation
+ */
+export type AutoCompleteStatus = 'error' | 'warning';
+/**
+ * Auto complete variant (5.13.0+)
+ */
+export type AutoCompleteVariant = 'outlined' | 'borderless' | 'filled';
+/**
+ * Placement of the dropdown
+ */
+export type AutoCompletePlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+/**
+ * Option item for auto complete
+ */
+export interface AutoCompleteOption {
+    /** Value of option */
+    value: string | number;
+    /** Display label */
+    label?: string;
+    /** Whether option is disabled */
+    disabled?: boolean;
+    /** Custom key */
+    key?: string | number;
+    /** Extra data */
+    [key: string]: unknown;
+}
+/**
+ * Option group for grouping options
+ */
+export interface AutoCompleteOptionGroup {
+    /** Group label */
+    label: string;
+    /** Options in this group */
+    options: AutoCompleteOption[];
+}
+/**
+ * Type guard to check if option is a group
+ */
+export declare function isOptionGroup(option: AutoCompleteOption | AutoCompleteOptionGroup | unknown): option is AutoCompleteOptionGroup;
+/**
+ * Combined option type
+ */
+export type AutoCompleteOptionType = AutoCompleteOption | AutoCompleteOptionGroup;
+/**
+ * Filter option function type
+ */
+export type FilterOptionFunction = (inputValue: string, option: AutoCompleteOption) => boolean;
+/**
+ * Change event detail
+ */
+export interface AutoCompleteChangeEventDetail {
+    /** Current value */
+    value: string;
+}
+/**
+ * Select event detail
+ */
+export interface AutoCompleteSelectEventDetail {
+    /** Selected value */
+    value: string | number;
+    /** Selected option */
+    option: AutoCompleteOption;
+}
+/**
+ * Search event detail
+ */
+export interface AutoCompleteSearchEventDetail {
+    /** Search value */
+    value: string;
+}
+/**
+ * Open change event detail
+ */
+export interface AutoCompleteOpenChangeEventDetail {
+    /** Open state */
+    open: boolean;
+}
+/**
+ * Popup scroll event detail
+ */
+export interface AutoCompletePopupScrollEventDetail {
+    /** Scroll top position */
+    scrollTop: number;
+    /** Scroll left position */
+    scrollLeft: number;
+    /** Scroll height */
+    scrollHeight: number;
+    /** Client height */
+    clientHeight: number;
+}
+/**
+ * Custom class names for semantic DOM
+ */
+export interface AutoCompleteClassNames {
+    /** Root element class */
+    root?: string;
+    /** Input element class */
+    input?: string;
+    /** Prefix element class */
+    prefix?: string;
+    /** Suffix element class */
+    suffix?: string;
+    /** Clear element class */
+    clear?: string;
+    /** Popup element class */
+    popup?: string;
+}
+/**
+ * Custom styles for semantic DOM
+ */
+export interface AutoCompleteStyles {
+    /** Root element style */
+    root?: Record<string, string>;
+    /** Input element style */
+    input?: Record<string, string>;
+    /** Prefix element style */
+    prefix?: Record<string, string>;
+    /** Suffix element style */
+    suffix?: Record<string, string>;
+    /** Popup element style */
+    popup?: Record<string, string>;
+}
+/**
+ * Default filter function - case insensitive includes
+ */
+export declare function defaultFilterOption(inputValue: string, option: AutoCompleteOption): boolean;
+/**
+ * Flatten options array, extracting options from OptionGroup
+ */
+export declare function flattenOptions(options: AutoCompleteOptionType[] | unknown): AutoCompleteOption[];
+/**
+ * Filter options based on input value
+ */
+export declare function filterOptions(options: AutoCompleteOption[], inputValue: string, filterOption: boolean | FilterOptionFunction): AutoCompleteOption[];
+/**
+ * Get option label
+ */
+export declare function getOptionLabel(option: AutoCompleteOption): string;
+/**
+ * Get option key
+ */
+export declare function getOptionKey(option: AutoCompleteOption): string;

package/dist/types/components/x-auto-complete/x-auto-complete.d.ts

@@ -0,0 +1,480 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { AutoCompleteSize, AutoCompleteStatus, AutoCompleteVariant, AutoCompletePlacement, AutoCompleteOption, AutoCompleteOptionType, FilterOptionFunction, AutoCompleteChangeEventDetail, AutoCompleteSelectEventDetail, AutoCompleteSearchEventDetail, AutoCompleteOpenChangeEventDetail, AutoCompletePopupScrollEventDetail, AutoCompleteClassNames, AutoCompleteStyles } from './types';
+/**
+ * AutoComplete Component - Following Ant Design Specification
+ *
+ * Autocomplete function of input field.
+ *
+ * @part wrapper - The wrapper container
+ * @part input - The input element
+ * @part prefix - The prefix element
+ * @part suffix - The suffix element
+ * @part clear - The clear button
+ */
+export declare class XAutoComplete {
+    /**
+     * Host element reference.
+     */
+    el: HTMLElement;
+    /**
+     * Show clear button.
+     * @example
+     * <x-auto-complete allowClear></x-auto-complete>
+     */
+    allowClear: boolean;
+    /**
+     * Whether focus on mount.
+     * @example
+     * <x-auto-complete autoFocus></x-auto-complete>
+     */
+    autoFocus: boolean;
+    /**
+     * Whether to backfill the selected item into the input field when navigating with arrow keys.
+     * @example
+     * <x-auto-complete backfill></x-auto-complete>
+     */
+    backfill: boolean;
+    /**
+     * Whether active first option by default.
+     * @example
+     * <x-auto-complete defaultActiveFirstOption></x-auto-complete>
+     */
+    defaultActiveFirstOption: boolean;
+    /**
+     * Whether the dropdown menu is open by default.
+     * @example
+     * <x-auto-complete defaultOpen></x-auto-complete>
+     */
+    defaultOpen: boolean;
+    /**
+     * Initial selected value.
+     * @example
+     * <x-auto-complete defaultValue="Al"></x-auto-complete>
+     */
+    defaultValue?: string;
+    /**
+     * Whether disabled.
+     * @example
+     * <x-auto-complete disabled></x-auto-complete>
+     */
+    disabled: boolean;
+    /**
+     * If true, filter options by input. Can be a custom function.
+     * @example
+     * <x-auto-complete filterOption={(v, o) => o.label.startsWith(v)}></x-auto-complete>
+     */
+    filterOption: boolean | FilterOptionFunction;
+    /**
+     * Content to show when no result matches.
+     * @example
+     * <x-auto-complete notFoundContent="No matches"></x-auto-complete>
+     */
+    notFoundContent?: string;
+    /**
+     * Controlled open state of dropdown.
+     * @example
+     * <x-auto-complete open></x-auto-complete>
+     */
+    open?: boolean;
+    /**
+     * Data source for autocomplete.
+     * @example
+     * <x-auto-complete options={[{ value: 'a', label: 'Alpha' }]}></x-auto-complete>
+     */
+    options: AutoCompleteOptionType[];
+    /**
+     * Placeholder of input.
+     * @example
+     * <x-auto-complete placeholder="Search"></x-auto-complete>
+     */
+    placeholder?: string;
+    /**
+     * The position where the popup menu appears.
+     * @example
+     * <x-auto-complete placement="bottomRight"></x-auto-complete>
+     */
+    placement: AutoCompletePlacement;
+    /**
+     * Set validation status.
+     * @example
+     * <x-auto-complete status="error"></x-auto-complete>
+     */
+    status?: AutoCompleteStatus;
+    /**
+     * The size of the input box.
+     * @example
+     * <x-auto-complete size="small"></x-auto-complete>
+     */
+    size: AutoCompleteSize;
+    /**
+     * Selected option's value.
+     * @example
+     * <x-auto-complete value="Beta"></x-auto-complete>
+     */
+    value?: string;
+    /**
+     * Variant style.
+     * @example
+     * <x-auto-complete variant="filled"></x-auto-complete>
+     */
+    variant: AutoCompleteVariant;
+    /**
+     * Indicate whether to use virtual scroll.
+     * @example
+     * <x-auto-complete virtual={false}></x-auto-complete>
+     */
+    virtual: boolean;
+    /**
+     * Whether dropdown width is the same as input.
+     * @example
+     * <x-auto-complete popupMatchSelectWidth={false}></x-auto-complete>
+     */
+    popupMatchSelectWidth: boolean | number;
+    /**
+     * Max height of dropdown.
+     * @example
+     * <x-auto-complete listHeight={300}></x-auto-complete>
+     */
+    listHeight: number;
+    /**
+     * Prefix icon.
+     * @example
+     * <x-auto-complete prefixIcon="search"></x-auto-complete>
+     */
+    prefixIcon?: string;
+    /**
+     * Suffix icon.
+     * @example
+     * <x-auto-complete suffixIcon="close"></x-auto-complete>
+     */
+    suffixIcon?: string;
+    /**
+     * Custom classNames.
+     * @example
+     * <x-auto-complete classNames={{ root: 'my-ac' }}></x-auto-complete>
+     */
+    classNames?: AutoCompleteClassNames;
+    /**
+     * Custom styles.
+     * @example
+     * <x-auto-complete styles={{ root: { minWidth: '200px' } }}></x-auto-complete>
+     */
+    styles?: AutoCompleteStyles;
+    /**
+     * Called when leaving the input field.
+     * @example
+     * <x-auto-complete onXBlur={(ev) => console.log(ev)}></x-auto-complete>
+     */
+    xBlur: EventEmitter<FocusEvent>;
+    /**
+     * Called when value changes.
+     * @example
+     * <x-auto-complete onXChange={(ev) => console.log(ev.detail)}></x-auto-complete>
+     */
+    xChange: EventEmitter<AutoCompleteChangeEventDetail>;
+    /**
+     * Called when dropdown visibility changes.
+     * @example
+     * <x-auto-complete onXOpenChange={(ev) => console.log(ev.detail)}></x-auto-complete>
+     */
+    xOpenChange: EventEmitter<AutoCompleteOpenChangeEventDetail>;
+    /**
+     * Called when entering the input field.
+     * @example
+     * <x-auto-complete onXFocus={(ev) => console.log(ev)}></x-auto-complete>
+     */
+    xFocus: EventEmitter<FocusEvent>;
+    /**
+     * Called when a selection is made.
+     * @example
+     * <x-auto-complete onXSelect={(ev) => console.log(ev.detail)}></x-auto-complete>
+     */
+    xSelect: EventEmitter<AutoCompleteSelectEventDetail>;
+    /**
+     * Called when the clear button is clicked.
+     * @example
+     * <x-auto-complete onXClear={() => {}}></x-auto-complete>
+     */
+    xClear: EventEmitter<void>;
+    /**
+     * Called when keyboard input changes.
+     * @example
+     * <x-auto-complete onXSearch={(ev) => console.log(ev.detail)}></x-auto-complete>
+     */
+    xSearch: EventEmitter<AutoCompleteSearchEventDetail>;
+    /**
+     * Called when a key is pressed in the input.
+     * @example
+     * <x-auto-complete onXInputKeyDown={(ev) => console.log(ev.detail)}></x-auto-complete>
+     */
+    xInputKeyDown: EventEmitter<KeyboardEvent>;
+    /**
+     * Called when the popup scroll.
+     * @example
+     * <x-auto-complete onXPopupScroll={(ev) => console.log(ev.detail)}></x-auto-complete>
+     */
+    xPopupScroll: EventEmitter<AutoCompletePopupScrollEventDetail>;
+    /**
+     * Internal open state for uncontrolled mode.
+     */
+    internalOpen: boolean;
+    /**
+     * Current search input value.
+     */
+    searchValue: string;
+    /**
+     * Active option index for keyboard navigation.
+     */
+    activeIndex: number;
+    /**
+     * Focus state.
+     */
+    focused: boolean;
+    /**
+     * Flattened options list.
+     */
+    internalOptions: AutoCompleteOption[];
+    /**
+     * Parsed options including groups.
+     */
+    parsedOptions: AutoCompleteOptionType[];
+    /**
+     * Input element reference.
+     */
+    private inputRef?;
+    /**
+     * Wrapper element reference.
+     */
+    private wrapperRef?;
+    /**
+     * Portal instance for dropdown.
+     */
+    private portalInstance;
+    /**
+     * Get open state (controlled or internal).
+     * @returns boolean
+     */
+    private get isOpen();
+    /**
+     * Filtered options based on search value.
+     * @returns AutoCompleteOption[]
+     */
+    private get filteredOptions();
+    /**
+     * Whether current input has value.
+     * @returns boolean
+     */
+    private get hasValue();
+    /**
+     * Initialize internal state before render.
+     * @returns void
+     */
+    componentWillLoad(): void;
+    /**
+     * Auto focus on mount when enabled.
+     * @returns void
+     */
+    componentDidLoad(): void;
+    /**
+     * Update portal after render.
+     * @returns void
+     */
+    componentDidRender(): void;
+    /**
+     * Cleanup portal on disconnect.
+     * @returns void
+     */
+    disconnectedCallback(): void;
+    /**
+     * Sync options when options prop changes.
+     * @returns void
+     */
+    onOptionsChange(): void;
+    /**
+     * Sync input value when value prop changes.
+     * @param newVal - New value.
+     * @returns void
+     */
+    onValueChange(newVal: string | undefined): void;
+    /**
+     * Sync internal open state when controlled prop changes.
+     * @param newVal - Open state.
+     * @returns void
+     */
+    onOpenPropChange(newVal: boolean | undefined): void;
+    /**
+     * Close dropdown when clicking outside.
+     * @param ev - Mouse event.
+     * @returns void
+     */
+    handleWindowClick(ev: MouseEvent): void;
+    /**
+     * Handle keyboard navigation and selection.
+     * @param ev - Keyboard event.
+     * @returns void
+     */
+    handleKeydown(ev: KeyboardEvent): void;
+    /**
+     * Focus the input element.
+     * @returns Promise<void>
+     * @example
+     * await el.setFocus()
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Blur the input element.
+     * @returns Promise<void>
+     * @example
+     * await el.setBlur()
+     */
+    setBlur(): Promise<void>;
+    /**
+     * Sync options from props, parsing JSON when needed.
+     *
+     * Flow:
+     * 1. Checks the `options` prop type.
+     * 2. If it's a string, attempts to parse it as JSON (useful for HTML attribute usage).
+     * 3. If valid array, updates `parsedOptions` (preserving structure) and `internalOptions` (flattened for easy searching).
+     * 4. Logs warnings if JSON parsing fails.
+     *
+     * @returns void
+     */
+    private syncOptions;
+    /**
+     * Open dropdown if allowed.
+     *
+     * Flow:
+     * 1. Checks if disabled or already open.
+     * 2. Sets `internalOpen` to true.
+     * 3. Emits `xOpenChange` event.
+     * 4. If `defaultActiveFirstOption` is enabled and results exist, highlights the first option (index 0).
+     *
+     * @returns void
+     */
+    private openDropdown;
+    /**
+     * Close dropdown and reset active index.
+     * @returns void
+     */
+    private closeDropdown;
+    /**
+     * Select an option and emit events.
+     * @param option - Selected option.
+     * @returns void
+     */
+    private selectOption;
+    /**
+     * Handle ArrowDown key.
+     * @param options - Filtered options.
+     * @returns void
+     */
+    private handleArrowDown;
+    /**
+     * Handle ArrowUp key.
+     * @param options - Filtered options.
+     * @returns void
+     */
+    private handleArrowUp;
+    /**
+     * Handle Enter key.
+     * @param options - Filtered options.
+     * @returns void
+     */
+    private handleEnter;
+    /**
+     * Scroll dropdown to active option.
+     * @returns void
+     */
+    private scrollToActiveOption;
+    /**
+     * Handle wrapper click to focus input.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    private handleWrapperClick;
+    /**
+     * Handle input focus.
+     * @param e - Focus event.
+     * @returns void
+     */
+    private handleInputFocus;
+    /**
+     * Handle input blur.
+     * @param e - Focus event.
+     * @returns void
+     */
+    private handleInputBlur;
+    /**
+     * Handle input changes.
+     * @param e - Input event.
+     * @returns void
+     */
+    private handleInput;
+    /**
+     * Handle clear action.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    private handleClear;
+    /**
+     * Handle option click.
+     * @param option - Option clicked.
+     * @returns void
+     */
+    private handleOptionClick;
+    /**
+     * Handle dropdown scroll and emit event.
+     * @param e - Scroll event.
+     * @returns void
+     */
+    private handleDropdownScroll;
+    /**
+     * Build dropdown element for portal.
+     * @returns HTMLElement
+     */
+    private buildDropdownElement;
+    /**
+     * Create option element for dropdown list.
+     * @param option - Option data.
+     * @param index - Option index.
+     * @returns HTMLElement
+     */
+    private createOptionElement;
+    /**
+     * Render grouped options into container.
+     * @param container - Container element.
+     * @param filteredOptions - Filtered options.
+     * @returns void
+     */
+    private renderOptionsWithGroups;
+    /**
+     * Create or update portal for dropdown.
+     * @returns void
+     */
+    private updatePortal;
+    /**
+     * Destroy portal instance if present.
+     * @returns void
+     */
+    private destroyPortal;
+    /**
+     * Render clear icon.
+     * @returns JSX.Element | null
+     */
+    private renderClearIcon;
+    /**
+     * Render prefix icon.
+     * @returns JSX.Element | null
+     */
+    private renderPrefix;
+    /**
+     * Render suffix with clear or icon.
+     * @returns JSX.Element | null
+     */
+    private renderSuffix;
+    /**
+     * Render autocomplete input and suffix/prefix.
+     * @returns JSX.Element
+     */
+    render(): any;
+}

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

@@ -0,0 +1,38 @@
+/**
+ * X-Avatar Component Types
+ */
+/**
+ * Avatar shape types
+ */
+export type AvatarShape = 'circle' | 'square';
+/**
+ * Avatar size presets
+ */
+export type AvatarSize = 'large' | 'small' | 'default' | number;
+/**
+ * Responsive size configuration
+ */
+export interface AvatarResponsiveSize {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    xxl?: number;
+}
+/**
+ * Avatar error event detail
+ */
+export interface AvatarErrorEventDetail {
+    /** Error event from image */
+    event: Event;
+}
+/**
+ * Avatar Group max configuration
+ */
+export interface AvatarGroupMax {
+    count?: number;
+    style?: {
+        [key: string]: string;
+    };
+}