huibo-ui 0.3.0

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

@@ -0,0 +1,75 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Scrollbar 滚动条组件
+ * 用于替换浏览器原生滚动条
+ */
+export declare class Scrollbar {
+    el: HTMLElement;
+    /**
+     * 滚动条高度
+     */
+    height?: string;
+    /**
+     * 滚动条最大高度
+     */
+    maxHeight?: string;
+    /**
+     * 是否总是显示滚动条
+     * @default false
+     */
+    always: boolean;
+    /**
+     * 是否显示原生滚动条
+     * @default false
+     */
+    native: boolean;
+    /**
+     * 滚动条的最小尺寸
+     * @default 20
+     */
+    minSize: number;
+    /**
+     * 滚动事件
+     */
+    hbScroll: EventEmitter<{
+        scrollTop: number;
+        scrollLeft: number;
+    }>;
+    scrollbarVisible: boolean;
+    thumbHeight: number;
+    thumbTop: number;
+    private wrapRef?;
+    private thumbRef?;
+    private resizeObserver?;
+    private isDragging;
+    private startY;
+    private startScrollTop;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleSizeChange(): void;
+    /**
+     * 设置滚动条位置
+     */
+    setScrollTop(top: number): Promise<void>;
+    /**
+     * 设置滚动条位置
+     */
+    setScrollLeft(left: number): Promise<void>;
+    /**
+     * 获取滚动条位置
+     */
+    getScrollTop(): Promise<number>;
+    /**
+     * 获取滚动条位置
+     */
+    getScrollLeft(): Promise<number>;
+    private initScrollbar;
+    private addEventListeners;
+    private removeEventListeners;
+    private updateScrollbar;
+    private handleScroll;
+    private handleThumbMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    render(): any;
+}

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

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Segmented 分段控制器组件
+ * 类似 iOS 分段控件，选中项有高亮滑块背景
+ */
+export declare class Segmented {
+    /** 当前选中值 */
+    modelValue: string;
+    /** 是否撑满宽度 */
+    block: boolean;
+    /** 尺寸 */
+    size: 'large' | 'default' | 'small';
+    /** 选项数组 */
+    options: SegmentedOption[];
+    /** 选中值变化事件 */
+    hbChange: EventEmitter<string>;
+    private handleSelect;
+    render(): any;
+}
+export interface SegmentedOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}

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

@@ -0,0 +1,100 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface SelectOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+    divided?: boolean;
+}
+/**
+ * Select 选择器组件
+ * 当选项过多时，使用下拉菜单展示并选择内容
+ */
+export declare class Select {
+    el: HTMLElement;
+    /**
+     * 绑定值
+     */
+    modelValue?: string | number | (string | number)[];
+    /**
+     * 可选项数据源
+     */
+    options: SelectOption[];
+    /**
+     * 输入框占位文本
+     */
+    placeholder: string;
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * 输入框尺寸
+     */
+    size: 'large' | 'default' | 'small';
+    /**
+     * 是否可清空
+     * @default false
+     */
+    clearable: boolean;
+    /**
+     * 是否多选
+     * @default false
+     */
+    multiple: boolean;
+    /**
+     * 是否可搜索
+     * @default false
+     */
+    filterable: boolean;
+    /**
+     * 自定义过滤方法
+     */
+    filterMethod?: (query: string) => void;
+    /**
+     * 是否默认展开
+     * @default false
+     */
+    defaultFirstOption: boolean;
+    /**
+     * 是否允许创建新条目
+     * @default false
+     */
+    allowCreate: boolean;
+    /**
+     * 多选时是否将选中值按文字的形式展示
+     * @default false
+     */
+    collapseTags: boolean;
+    /**
+     * 多选时最多显示多少个tag
+     */
+    maxCollapseTags?: number;
+    isOpen: boolean;
+    inputValue: string;
+    searchValue: string;
+    filteredOptions: SelectOption[];
+    /** 键盘高亮的选项索引（-1 表示无） */
+    activeOptionIndex: number;
+    /**
+     * 值改变事件
+     */
+    hbChange: EventEmitter<string | number | (string | number)[]>;
+    /**
+     * 下拉框出现/隐藏时触发
+     */
+    hbVisibleChange: EventEmitter<boolean>;
+    private clickOutside;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleValueChange(): void;
+    handleOptionsChange(): void;
+    private updateInputValue;
+    private handleInputClick;
+    private handleWrapperKeydown;
+    private handleSelect;
+    private handleClear;
+    private handleSearch;
+    private isSelected;
+    render(): any;
+}

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

@@ -0,0 +1,22 @@
+/**
+ * Skeleton 骨架屏组件
+ * 在需要等待加载数据的内容位置提供一个占位图形组合
+ */
+export declare class Skeleton {
+    /** 是否展示动画效果 */
+    active: boolean;
+    /** 占位段落行数 */
+    rows: number;
+    /** 为 true 时显示骨架，为 false 时直接渲染子内容 */
+    loading: boolean;
+    /** 是否显示头像占位图 */
+    avatar: boolean;
+    /** 是否显示标题占位图 */
+    showTitle: boolean;
+    /** 是否显示段落占位图 */
+    paragraph: boolean;
+    private renderAvatar;
+    private renderTitle;
+    private renderParagraph;
+    render(): any;
+}

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

@@ -0,0 +1,81 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Slider 滑块组件
+ * 通过拖动滑块在一个固定区间内进行选择
+ */
+export declare class Slider {
+    el: HTMLElement;
+    /**
+     * 绑定值
+     */
+    modelValue: number | number[];
+    /**
+     * 最小值
+     * @default 0
+     */
+    min: number;
+    /**
+     * 最大值
+     * @default 100
+     */
+    max: number;
+    /**
+     * 步长
+     * @default 1
+     */
+    step: number;
+    /**
+     * 是否显示工具提示
+     * @default true
+     */
+    showTooltip: boolean;
+    /**
+     * 格式化 tooltip message
+     */
+    formatTooltip?: (value: number) => string;
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * 是否为范围选择
+     * @default false
+     */
+    range: boolean;
+    /**
+     * 是否竖向模式
+     * @default false
+     */
+    vertical: boolean;
+    /**
+     * 高度，竖向模式时必填
+     */
+    height?: string;
+    dragging: boolean;
+    currentValue: number | number[];
+    tooltipVisible: boolean;
+    tooltipValue: number;
+    private sliderRef?;
+    private isDragging;
+    /**
+     * 值改变事件
+     */
+    hbChange: EventEmitter<number | number[]>;
+    /**
+     * 值改变事件（拖拽时实时触发）
+     */
+    hbInput: EventEmitter<number | number[]>;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private addEventListeners;
+    private removeEventListeners;
+    private getPercentage;
+    private getValueFromPercentage;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    private handleDrag;
+    private formatValue;
+    render(): any;
+}

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

@@ -0,0 +1,37 @@
+/**
+ * Space 间距组件
+ * 设置组件之间的间距
+ */
+export declare class Space {
+    /**
+     * 间距大小
+     * @default 'small'
+     */
+    size: 'small' | 'default' | 'large' | number;
+    /**
+     * 间距方向
+     * @default 'horizontal'
+     */
+    direction: 'horizontal' | 'vertical';
+    /**
+     * 是否自动换行，仅在 horizontal 时有效
+     * @default false
+     */
+    wrap: boolean;
+    /**
+     * 对齐方式
+     */
+    alignment: 'start' | 'end' | 'center' | 'baseline';
+    /**
+     * 是否填充父容器
+     * @default false
+     */
+    fill: boolean;
+    /**
+     * 是否填充每行
+     * @default false
+     */
+    fillRatio: number;
+    private getSizeValue;
+    render(): any;
+}

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

@@ -0,0 +1,25 @@
+/**
+ * Statistic 统计数值组件
+ * 展示某个统计数据，常用于展示一个指标的当前值
+ */
+export declare class Statistic {
+    /** 数值标题（使用默认值使其成为 required string，避免与 HTMLElement.title 类型冲突） */
+    title: string;
+    /** 数值内容（数字或字符串） */
+    value: number | string;
+    /** 数值小数位数 */
+    precision?: number;
+    /** 数值前缀（如货币符号 ¥）（改名 valuePrefix 避免与 Element.prefix 类型冲突） */
+    valuePrefix: string;
+    /** 数值后缀（如单位） */
+    suffix?: string;
+    /** 数值容器的内联样式 */
+    valueStyle?: string;
+    /**
+     * 将 value 按 precision 格式化为千分位字符串
+     * - 纯数字字符串（含小数）会被当作数值进行格式化（便于 attribute 传入）
+     * - 含非数字字符的字符串原样返回（如 "1.2K"、"N/A"）
+     */
+    private getFormattedValue;
+    render(): any;
+}

package/dist/types/components/Steps/Step.d.ts

@@ -0,0 +1,7 @@
+export declare class Step {
+    title: string;
+    description?: string;
+    icon?: string;
+    status: 'wait' | 'process' | 'finish' | 'error';
+    render(): any;
+}

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

@@ -0,0 +1,15 @@
+export declare class Steps {
+    el: HTMLElement;
+    active: number;
+    processStatus: 'wait' | 'process' | 'finish' | 'error';
+    alignCenter: boolean;
+    direction: 'horizontal' | 'vertical';
+    steps: {
+        title: string;
+        description?: string;
+    }[];
+    componentDidLoad(): void;
+    private getStatus;
+    private getIcon;
+    render(): any;
+}

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

@@ -0,0 +1,58 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Switch 开关组件
+ * 表示两种相互对立的状态间的切换，多用于触发「开/关」
+ */
+export declare class Switch {
+    /**
+     * 绑定值
+     */
+    modelValue: boolean;
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * 是否显示文字描述
+     * @default false
+     */
+    activeText?: string;
+    /**
+     * 关闭时的文字描述
+     */
+    inactiveText?: string;
+    /**
+     * 打开时的背景色
+     */
+    activeColor?: string;
+    /**
+     * 关闭时的背景色
+     */
+    inactiveColor?: string;
+    /**
+     * 打开时的值
+     * @default true
+     */
+    activeValue: boolean | string | number;
+    /**
+     * 关闭时的值
+     * @default false
+     */
+    inactiveValue: boolean | string | number;
+    /**
+     * 宽度
+     */
+    width?: number;
+    /**
+     * 是否内联提示
+     * @default false
+     */
+    inlinePrompt: boolean;
+    /**
+     * 值改变事件
+     */
+    hbChange: EventEmitter<boolean | string | number>;
+    private handleChange;
+    render(): any;
+}

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

@@ -0,0 +1,184 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface TableColumn {
+    /** 列字段名 */
+    prop: string;
+    /** 列标题 */
+    label: string;
+    /** 列宽 */
+    width?: string;
+    /** 最小列宽 */
+    minWidth?: string;
+    /** 是否可排序 */
+    sortable?: boolean;
+    /** 对齐方式 */
+    align?: 'left' | 'center' | 'right';
+    /** 固定列：left / right / true（等同 left） */
+    fixed?: 'left' | 'right' | boolean;
+    /** 单元格文本格式化（框架无关，返回纯文本字符串） */
+    formatter?: (row: Record<string, any>, index: number) => string;
+    /** 该列是否可（行内）编辑；需同时开启 Table.editable 才生效 */
+    editable?: boolean;
+}
+/**
+ * 行操作按钮配置（框架无关）。
+ * 由 Table 自身渲染按钮（在 shadow DOM 内），点击派发 hbAction 事件，
+ * 消费方据此执行编辑/删除等逻辑——无需往每行塞框架专属元素，绕开「slot 跨行共享」限制。
+ */
+export interface TableAction {
+    /** 操作标识，回传到 hbAction.detail.action */
+    key: string;
+    /** 按钮文案 */
+    label: string;
+    /** 按钮样式：default 主色文字 / danger 危险色 */
+    type?: 'default' | 'primary' | 'danger';
+    /** 是否禁用（按行判断） */
+    disabled?: (row: Record<string, any>, index: number) => boolean;
+}
+export type SortDirection = 'ascending' | 'descending' | null;
+/**
+ * 树形数据配置。
+ * `children` 指定子节点在每行数据中的字段名（默认 'children'），
+ * 行存在该字段（非空数组）时渲染展开箭头，可递归展开后代。
+ */
+export interface TableTreeProps {
+    children?: string;
+}
+/**
+ * Table 表格组件
+ * 用于展示多条结构类似的数据，可对数据进行排序、筛选、选择等操作
+ */
+export declare class Table {
+    /** 数据源 */
+    data: Record<string, any>[];
+    /** 列配置 */
+    columns: TableColumn[];
+    /** 是否带斑马纹 */
+    stripe: boolean;
+    /** 是否带边框 */
+    border: boolean;
+    /** 表格尺寸 */
+    size: 'large' | 'default' | 'small';
+    /** 是否显示加载状态 */
+    loading: boolean;
+    /** 行数据的 Key */
+    rowKey: string;
+    /** 空数据文案 */
+    emptyText: string;
+    /** 最大高度（超出固定表头） */
+    maxHeight?: string;
+    /** 是否高亮当前行 */
+    highlightCurrentRow: boolean;
+    /** 是否开启行选择（显示 checkbox 列） */
+    selectable: boolean;
+    /** 行操作配置；非空时自动在末尾渲染「操作」列 */
+    actions: TableAction[];
+    /** 是否开启虚拟滚动（大数据量场景，默认关闭，向后兼容） */
+    virtualScroll: boolean;
+    /** 虚拟滚动每行预估高度(px)，用于计算撑高容器与可见窗口 */
+    itemHeight: number;
+    /** 虚拟滚动视口高度(px)，超过此高度出现滚动条 */
+    virtualScrollHeight: number;
+    /**
+     * 树形数据配置：传入后启用「可展开行」模式。
+     * data 行含 `children` 字段（字段名可经此配置覆盖）时渲染展开箭头。
+     * 默认 undefined —— 不启用树形。
+     */
+    treeProps?: TableTreeProps;
+    /** 是否开启行内编辑模式（默认关闭）。需列配置 column.editable=true 才对该列生效 */
+    editable: boolean;
+    sortProp: string;
+    sortDirection: SortDirection;
+    currentRow: number;
+    selectedRows: Set<number>;
+    /** 虚拟滚动：当前滚动位置(px)，驱动可见窗口计算 */
+    scrollTop: number;
+    /** 树形模式：已展开行的 key 列表 */
+    expandedRowKeys: Array<string | number>;
+    /** 行内编辑：当前正在编辑的单元格 { key, prop }，null 表示无 */
+    editingCell: {
+        rowKey: string | number;
+        prop: string;
+    } | null;
+    /** 排序变化事件 */
+    hbSortChange: EventEmitter<{
+        prop: string;
+        order: SortDirection;
+    }>;
+    /** 行点击事件 */
+    hbRowClick: EventEmitter<{
+        row: Record<string, any>;
+        index: number;
+    }>;
+    /** 选择变化事件 */
+    hbSelectionChange: EventEmitter<Record<string, any>[]>;
+    /** 行操作点击事件 */
+    hbAction: EventEmitter<{
+        row: Record<string, any>;
+        index: number;
+        action: string;
+    }>;
+    /** 树形行展开/收起事件 */
+    hbExpandChange: EventEmitter<{
+        expanded: boolean;
+        row: Record<string, any>;
+    }>;
+    /** 行内编辑提交事件 */
+    hbCellChange: EventEmitter<{
+        row: Record<string, any>;
+        prop: string;
+        value: any;
+    }>;
+    handleDataChange(): void;
+    /** 树形模式是否启用（显式传入 treeProps 即启用） */
+    private get isTreeMode();
+    /** 子节点字段名（treeProps.children 缺省回退 'children'） */
+    private get childrenField();
+    /**
+     * 把树拍平成可见行列表：仅保留「祖先链路全部已展开」的后代。
+     * @param list  当前层级的数组
+     * @param level 当前层级（根 = 0）
+     * @param parentKeyPath 父级 key 路径，用于构造深层稳定 key（避免不同分支同 index 撞 key）
+     */
+    private flattenTree;
+    /** 树形展开/收起切换 */
+    private toggleExpand;
+    /** 行内编辑：进入编辑态 */
+    private startEdit;
+    /** 行内编辑：提交（回车 / 失焦 / Change） */
+    private commitEdit;
+    /** 行内编辑：回车提交 / Esc 取消 */
+    private onEditKeydown;
+    private allCheckboxRef?;
+    componentDidRender(): void;
+    /** 虚拟滚动上下缓冲行数 */
+    private readonly virtualBuffer;
+    /** 虚拟滚动：滚动事件回调，更新 scrollTop 触发可见窗口重算 */
+    private handleVirtualScroll;
+    /** 虚拟滚动：计算可见窗口 [startIndex, endIndex) */
+    private get visibleRange();
+    /** 虚拟滚动：撑高容器总高度 */
+    private get virtualTotalHeight();
+    private handleSort;
+    private get sortedData();
+    private get isAllSelected();
+    private get isIndeterminate();
+    private toggleRow;
+    private toggleAll;
+    private emitSelection;
+    private handleRowClick;
+    private handleAction;
+    private get hasActions();
+    /** 计算固定列的 sticky 偏移（左侧/右侧累计宽度） */
+    private get fixedOffsets();
+    private cellStyle;
+    /**
+     * 渲染单行（普通 + 虚拟滚动 + 树形 共用）。
+     * - 普通模式：rowIndex 为在 sortedData 中的全局索引。
+     * - 树形模式：fr.level 决定缩进，第一列渲染展开箭头，key 取 fr.key。
+     * fr 为可选；未传时按普通模式渲染。
+     */
+    private renderRow;
+    /** 渲染表头（普通 + 虚拟滚动共用，表头始终固定不随滚） */
+    private renderHeader;
+    render(): any;
+}

package/dist/types/components/Tabs/TabPane.d.ts

@@ -0,0 +1,12 @@
+/**
+ * TabPane 标签页面板
+ */
+export declare class TabPane {
+    /** 面板标识 */
+    key: string;
+    /** 标签标题 */
+    label: string;
+    /** 是否激活 */
+    active: boolean;
+    render(): any;
+}

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

@@ -0,0 +1,32 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Tabs 标签页组件
+ * 选项卡切换组件
+ */
+export declare class Tabs {
+    el: HTMLElement;
+    /** 当前激活的标签 */
+    modelValue: string;
+    /** 标签风格类型 */
+    type: 'line' | 'card' | 'border-card';
+    /** 是否可关闭 */
+    closable: boolean;
+    activeTab: string;
+    tabs: {
+        key: string;
+        label: string;
+    }[];
+    /** 标签切换事件 */
+    hbTabChange: EventEmitter<string>;
+    /** 标签关闭事件 */
+    hbTabRemove: EventEmitter<string>;
+    componentDidLoad(): void;
+    handleModelValueChange(): void;
+    private collectTabs;
+    private updatePaneVisibility;
+    private handleTabClick;
+    /** WAI-ARIA tabs：左右（横排）/上下（竖排）箭头在 tab 间切换聚焦的 tab。 */
+    private handleTabKeydown;
+    private moveFocusToTab;
+    render(): any;
+}