huibo-ui 0.3.0

package/dist/types/components/Calendar/Calendar.d.ts

@@ -0,0 +1,35 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Calendar 日历组件
+ * 月份视图日历，支持选中日期与月份切换
+ */
+export declare class Calendar {
+    /**
+     * 绑定值（ISO 日期字符串）
+     */
+    modelValue?: string;
+    /**
+     * 每周第一天（0=周日，1=周一 …）
+     * @default 0
+     */
+    firstDayOfWeek: number;
+    /**
+     * 禁用日期判定（声明预留，暂不强求实现）
+     */
+    disabledDate?: (date: Date) => boolean;
+    /**
+     * 值改变事件，detail 为 ISO 日期字符串
+     */
+    hbChange: EventEmitter<string>;
+    viewDate: Date;
+    selectedDate?: Date;
+    componentDidLoad(): void;
+    handleModelValueChange(): void;
+    private initFromModelValue;
+    private handleSelect;
+    private toISODate;
+    private changeMonth;
+    /** 按 firstDayOfWeek 重排星期标题（getCalendarDays 网格恒以周日为首列） */
+    private get orderedWeekNames();
+    render(): any;
+}

package/dist/types/components/Card/Card.d.ts

@@ -0,0 +1,6 @@
+export declare class Card {
+    header?: string;
+    shadow: 'always' | 'hover' | 'never';
+    render(): any;
+    private get elHasHeaderSlot();
+}

package/dist/types/components/Carousel/Carousel.d.ts

@@ -0,0 +1,45 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type CarouselArrow = 'always' | 'hover' | 'never';
+/**
+ * Carousel 走马灯组件
+ * 在有限空间内循环播放同一类型的图片、文字等内容
+ */
+export declare class Carousel {
+    el: HTMLElement;
+    /** 当前幻灯片索引（受控，可双向） */
+    current: number;
+    /** 是否自动切换 */
+    autoplay: boolean;
+    /** 自动切换间隔（毫秒） */
+    interval: number;
+    /** 切换箭头展示时机 */
+    arrow: CarouselArrow;
+    /** 是否显示指示点 */
+    dots: boolean;
+    /** 是否循环播放 */
+    loop: boolean;
+    /** 当前索引变化事件，detail 为新索引 */
+    hbChange: EventEmitter<number>;
+    /** slot 投影的幻灯片数量 */
+    slideCount: number;
+    /** 是否悬停（控制 hover 箭头显隐） */
+    isHover: boolean;
+    private autoplayTimer;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleAutoplayOptionsChange(): void;
+    handleCurrentChange(newVal: number): void;
+    /** 读取 slot 投影的子元素数量 */
+    private updateSlideCount;
+    private startAutoplay;
+    private stopAutoplay;
+    private next;
+    private prev;
+    private setCurrent;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleDotClick;
+    private get showArrows();
+    render(): any;
+}

package/dist/types/components/Cascader/Cascader.d.ts

@@ -0,0 +1,150 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface CascaderOption {
+    value: string | number;
+    label: string;
+    children?: CascaderOption[];
+    disabled?: boolean;
+    leaf?: boolean;
+}
+/**
+ * Cascader 级联选择器组件
+ * 当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择
+ */
+export declare class Cascader {
+    el: HTMLElement;
+    /**
+     * 选中项绑定值
+     */
+    modelValue?: (string | number)[];
+    /**
+     * 可选项数据源
+     */
+    options: CascaderOption[];
+    /**
+     * 输入框占位文本
+     */
+    placeholder: string;
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * 输入框尺寸
+     */
+    size: 'large' | 'default' | 'small';
+    /**
+     * 是否可清空
+     * @default false
+     */
+    clearable: boolean;
+    /**
+     * 是否显示完整路径
+     * @default true
+     */
+    showAllLevels: boolean;
+    /**
+     * 输入框的原生属性
+     */
+    name?: string;
+    /**
+     * 输入框的原生属性
+     */
+    inputId?: string;
+    /**
+     * 分隔符
+     * @default ' / '
+     */
+    separator: string;
+    /**
+     * 是否动态加载子节点
+     * @default true
+     */
+    emitPath: boolean;
+    /**
+     * 是否可搜索（filterable）
+     * 开启后下拉顶部渲染搜索输入框，输入时按 label（含所有子级）扁平化过滤，
+     * 匹配项以完整路径展示，点击即选中其完整路径。
+     * @default false
+     */
+    filterable: boolean;
+    /**
+     * 是否开启动态加载（lazy load）。开启后，展开含 children=undefined 的节点时，
+     * 调用 load(node) 获取其子级并填充进 options，加载中显示 loading 态。
+     * @default false
+     */
+    lazy: boolean;
+    /**
+     * 动态加载子节点的函数（仅在 lazy=true 时生效）。
+     * 接收被展开的节点，返回其子节点数组（Promise）。
+     * 加载结果会以不可变方式合并进 options 树（替换该节点 children）。
+     */
+    load?: (node: CascaderOption) => Promise<CascaderOption[]>;
+    isOpen: boolean;
+    inputValue: string;
+    searchValue: string;
+    /**
+     * 正在动态加载子级的节点 value 集合（用于渲染 loading 态）。
+     */
+    loadingKeys: Set<string | number>;
+    /**
+     * 扁平化搜索结果：每一项是一个从根到匹配节点的完整路径（用于点击选中）。
+     * 仅在 filterable 且 searchValue 非空时使用。
+     */
+    filteredPaths: CascaderOption[][];
+    activePath: (string | number)[];
+    /**
+     * 值改变事件
+     */
+    hbChange: EventEmitter<(string | number)[] | undefined>;
+    /**
+     * 展开节点发生变化时触发
+     */
+    hbExpandChange: EventEmitter<(string | number)[]>;
+    private clickOutside;
+    componentDidLoad(): void;
+    /** 关闭下拉并清空搜索态（filterable 模式下避免重开时残留搜索结果） */
+    private closeAndClearSearch;
+    disconnectedCallback(): void;
+    handleValueChange(): void;
+    private updateInputValue;
+    private findOptionByValue;
+    private handleInputClick;
+    /** 搜索输入：仅更新 searchValue，过滤在 render 前的 @State 派生 */
+    private handleSearchInput;
+    /**
+     * 扁平化全树搜索：把 options 深度遍历，收集所有「节点 label 含关键字」的完整路径。
+     * 一个节点的完整路径 = 从根到该节点（含自身）的 CascaderOption 数组。
+     * 关键字为空时返回空数组（交由正常级联视图渲染）。
+     *
+     * 注意：这里按 label 子串匹配（大小写不敏感），匹配任意层级的节点，
+     * 并保留其祖先链以便点击时还原完整路径。
+     */
+    private collectFilteredPaths;
+    /** 从扁平搜索结果路径中点击叶子（或非叶子）项：直接以该路径的 value 数组作为选中值 */
+    private handleSearchSelect;
+    private handleClear;
+    private handleSelect;
+    /**
+     * 动态加载某节点的子级。不可变地合并进 options 树（替换该节点 children）。
+     * 加载中：把节点 value 加入 loadingKeys（渲染 loading 态）；
+     * 加载完成：写入 children（新数组，触发 @Watch/重渲染），移出 loadingKeys。
+     * 若 load 返回空数组，把 children 设为 [] 以标记该节点为叶子（避免重复加载）。
+     */
+    private loadChildren;
+    /**
+     * 不可变地替换 options 树中 value===targetValue 节点的 children 字段。
+     * 返回一棵全新的 options 树（不修改原数组与原节点对象）。
+     */
+    private replaceOptionChildren;
+    render(): any;
+    private renderCascaderMenus;
+    /** lazy 加载中渲染的面板：一个 loading 占位提示 */
+    private renderLoadingMenu;
+    /**
+     * 渲染扁平化搜索结果：每一项展示完整路径（label 用 separator 连接），点击选中完整路径。
+     * 无匹配时渲染空状态。
+     */
+    private renderSearchResults;
+    private renderMenu;
+}

package/dist/types/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,66 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface CheckboxOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+}
+/**
+ * Checkbox 多选框组件
+ * 一组备选项中进行多选
+ */
+export declare class Checkbox {
+    /**
+     * 绑定值
+     */
+    modelValue: boolean | (string | number)[];
+    /**
+     * 当前值（用于单个 checkbox）
+     */
+    value?: string | number;
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * 是否选中
+     * @default false
+     */
+    checked: boolean;
+    /**
+     * 是否不确定状态
+     * @default false
+     */
+    indeterminate: boolean;
+    /**
+     * 原生 name 属性
+     */
+    name?: string;
+    /**
+     * 原生 id 属性
+     */
+    checkboxId?: string;
+    /**
+     * 文本标签
+     */
+    label?: string;
+    /**
+     * 是否显示边框
+     * @default false
+     */
+    border: boolean;
+    /**
+     * 尺寸
+     */
+    size: 'large' | 'default' | 'small';
+    /**
+     * 值改变事件
+     */
+    hbChange: EventEmitter<boolean | (string | number)[]>;
+    isChecked: boolean;
+    handleValueChange(): void;
+    componentDidLoad(): void;
+    private updateChecked;
+    private handleChange;
+    render(): any;
+}

package/dist/types/components/Checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,46 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * CheckboxGroup 多选框组组件
+ * 用于管理多个 checkbox
+ */
+export declare class CheckboxGroup {
+    el: HTMLElement;
+    /**
+     * 绑定值
+     */
+    modelValue: (string | number)[];
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * 尺寸
+     */
+    size: 'large' | 'default' | 'small';
+    /**
+     * 是否显示边框
+     * @default false
+     */
+    border: boolean;
+    /**
+     * 最小选中数量
+     */
+    min?: number;
+    /**
+     * 最大选中数量
+     */
+    max?: number;
+    /**
+     * 值改变事件
+     */
+    hbChange: EventEmitter<(string | number)[]>;
+    checkboxes: HTMLHbCheckboxElement[];
+    componentDidLoad(): void;
+    handleValueChange(): void;
+    handlePropsChange(): void;
+    private updateCheckboxes;
+    private updateCheckboxesState;
+    private handleCheckboxChange;
+    render(): any;
+}

package/dist/types/components/Collapse/Collapse.d.ts

@@ -0,0 +1,7 @@
+export declare class Collapse {
+    el: HTMLElement;
+    /** 是否开启手风琴模式（同时仅展开一项） */
+    accordion: boolean;
+    componentDidLoad(): void;
+    render(): any;
+}

package/dist/types/components/Collapse/CollapseItem.d.ts

@@ -0,0 +1,17 @@
+export declare class CollapseItem {
+    el: HTMLElement;
+    /** 唯一标识（手风琴模式协调用） */
+    key: string;
+    /** 标题 */
+    title: string;
+    /** 是否禁用 */
+    disabled: boolean;
+    /** 是否展开（受控；由父级 hb-collapse 在手风琴模式下联动） */
+    active: boolean;
+    isOpen: boolean;
+    componentDidLoad(): void;
+    handleActiveChange(val: boolean): void;
+    private toggle;
+    private handleHeaderKeydown;
+    render(): any;
+}

package/dist/types/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,59 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * ColorPicker 颜色选择器组件
+ * 用于颜色选择，支持多种格式
+ */
+export declare class ColorPicker {
+    el: HTMLElement;
+    /**
+     * 绑定值
+     */
+    modelValue?: string;
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * 颜色格式
+     */
+    colorFormat: 'hsl' | 'hsv' | 'hex' | 'rgb';
+    /**
+     * 是否显示透明度
+     * @default false
+     */
+    showAlpha: boolean;
+    /**
+     * 预定义颜色
+     */
+    predefine?: string[];
+    isOpen: boolean;
+    currentColor: string;
+    hue: number;
+    saturation: number;
+    value: number;
+    /**
+     * 值改变事件
+     */
+    hbChange: EventEmitter<string>;
+    /**
+     * 激活时触发
+     */
+    hbActiveChange: EventEmitter<string>;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private handleDocumentClick;
+    handleValueChange(): void;
+    private handleTriggerClick;
+    private handleColorSelect;
+    private handleSaturationClick;
+    private handleHueClick;
+    private handleInputChange;
+    private handleRgbInputChange;
+    private hexToRgb;
+    private rgbToHsv;
+    private hsvToRgb;
+    private hsvToHex;
+    private updateHSVFromColor;
+    render(): any;
+}

package/dist/types/components/ColorPickerPanel/ColorPickerPanel.d.ts

@@ -0,0 +1,35 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * ColorPickerPanel 颜色选择器面板组件
+ * 颜色选择器面板，用于嵌入到其他组件中
+ */
+export declare class ColorPickerPanel {
+    /**
+     * 绑定值
+     */
+    modelValue?: string;
+    /**
+     * 颜色格式
+     */
+    colorFormat: 'hsl' | 'hsv' | 'hex' | 'rgb';
+    /**
+     * 是否显示透明度
+     * @default false
+     */
+    showAlpha: boolean;
+    /**
+     * 预定义颜色
+     */
+    predefine?: string[];
+    currentColor: string;
+    /**
+     * 值改变事件
+     */
+    hbChange: EventEmitter<string>;
+    componentDidLoad(): void;
+    handleValueChange(): void;
+    private handleColorSelect;
+    private handleInputChange;
+    private hexToRgb;
+    render(): any;
+}

package/dist/types/components/ConfigProvider/ConfigProvider.d.ts

@@ -0,0 +1,17 @@
+/**
+ * ConfigProvider 全局配置组件
+ * 在组件树的最外层设置全局配置
+ */
+export declare class ConfigProvider {
+    el: HTMLElement;
+    /** 主题：light / dark / 自定义 */
+    theme: 'light' | 'dark' | string;
+    /** 全局默认尺寸 */
+    size: 'small' | 'default' | 'large';
+    /** 语言 */
+    locale: string;
+    render(): any;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    private applyConfig;
+}

package/dist/types/components/Container/Aside.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Container Aside 组件
+ * 侧边栏容器
+ */
+export declare class Aside {
+    /**
+     * 宽度
+     */
+    width?: string;
+    render(): any;
+}

package/dist/types/components/Container/Container.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Container 布局容器组件
+ * 用于布局的容器组件，方便快速搭建页面的基本结构
+ */
+export declare class Container {
+    /**
+     * 布局方向，vertical 时子元素为纵向排列
+     * @default false
+     */
+    direction: 'horizontal' | 'vertical';
+    render(): any;
+}

package/dist/types/components/Container/Footer.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Container Footer 组件
+ * 底部容器
+ */
+export declare class Footer {
+    /**
+     * 高度
+     */
+    height?: string;
+    render(): any;
+}

package/dist/types/components/Container/Header.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Container Header 组件
+ * 顶部容器
+ */
+export declare class Header {
+    /**
+     * 高度
+     */
+    height?: string;
+    render(): any;
+}

package/dist/types/components/Container/Main.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Container Main 组件
+ * 主要区域容器
+ */
+export declare class Main {
+    render(): any;
+}

package/dist/types/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,53 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * DatePicker 日期选择器组件
+ * 用于选择或输入日期
+ */
+export declare class DatePicker {
+    el: HTMLElement;
+    /** 绑定值 */
+    modelValue?: string | Date;
+    /** 输入框占位文本 */
+    placeholder: string;
+    /** 是否禁用 */
+    disabled: boolean;
+    /** 输入框尺寸 */
+    size: 'large' | 'default' | 'small';
+    /** 是否可清空 */
+    clearable: boolean;
+    /** 日期格式 */
+    format: string;
+    /** 显示在输入框中的格式 */
+    valueFormat?: string;
+    /**
+     * 日期选择器类型
+     * 当前仅支持 'date'，更多类型将在后续版本实现
+     */
+    type: "date";
+    /**
+     * 禁用日期判定函数。返回 true 的日期在日历中不可选（加 disabled 态、不可点击、aria-disabled）。
+     * @param date 当前日期格子的 Date 对象
+     */
+    disabledDate?: (date: Date) => boolean;
+    /** 原生 name 属性 */
+    name?: string;
+    /** 原生 id 属性 */
+    inputId?: string;
+    isOpen: boolean;
+    inputValue: string;
+    selectedDate?: Date;
+    /** 值改变事件 */
+    hbChange: EventEmitter<string | Date>;
+    private clickOutside;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleValueChange(): void;
+    private updateInputValue;
+    private handleInputClick;
+    private handleClear;
+    private handleDateSelect;
+    private changeMonth;
+    /** 判断某日期是否被 disabledDate 禁用 */
+    private isDateDisabled;
+    render(): any;
+}

package/dist/types/components/DatePickerPane/DatePickerPane.d.ts

@@ -0,0 +1,40 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/** DatePickerPane 视图类型 */
+export type DatePickerPaneView = 'days' | 'months' | 'years';
+/**
+ * DatePickerPane 日期选择器面板组件
+ * 日期选择器面板，用于嵌入到其他组件中
+ * 支持 days / months / years 三种视图切换
+ */
+export declare class DatePickerPane {
+    /** 绑定值 */
+    modelValue?: string | Date;
+    /** 日期格式 */
+    format: string;
+    /** 当前视图类型，默认 days */
+    view: DatePickerPaneView;
+    selectedDate?: Date;
+    /** 值改变事件 */
+    hbChange: EventEmitter<string | Date>;
+    /** 视图切换事件 */
+    hbViewChange: EventEmitter<DatePickerPaneView>;
+    componentDidLoad(): void;
+    handleValueChange(): void;
+    private updateSelectedDate;
+    private handleDateSelect;
+    /** 头部导航箭头：days 视图 ±1 月，months 视图 ±1 年，years 视图 ±12 年 */
+    private handlePrev;
+    private handleNext;
+    /** 点击 header 标题：days→months→years */
+    private handleHeaderTitleClick;
+    /** months 视图：选某月 → 切回 days 并跳到该月 */
+    private handleMonthSelect;
+    /** years 视图：选某年 → 切到 months 并跳到该年 */
+    private handleYearSelect;
+    /** 头部标题文本，根据视图类型生成 */
+    private getHeaderTitle;
+    render(): any;
+    private renderDaysView;
+    private renderMonthsView;
+    private renderYearsView;
+}