taro-uno-ui 0.9.0 → 1.0.0

package/dist/components/display/List/List.types.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+export interface ListProps {
+    /** 列表内容 */
+    children?: React.ReactNode;
+    /** 数据源 */
+    dataSource?: Array<{
+        key?: string | number;
+        [key: string]: any;
+    }>;
+    /** 渲染函数 */
+    renderItem?: (_item: any, index: number) => React.ReactNode;
+    /** 列表头部 */
+    header?: React.ReactNode;
+    /** 列表底部 */
+    footer?: React.ReactNode;
+    /** 是否显示边框 */
+    bordered?: boolean;
+    /** 是否显示分割线 */
+    split?: boolean;
+    /** 加载状态 */
+    loading?: boolean;
+    /** 列表尺寸 */
+    size?: 'small' | 'default' | 'large';
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export interface ListItemProps {
+    /** 列表项内容 */
+    children: React.ReactNode;
+    /** 索引 */
+    index?: number;
+    /** 列表项尺寸 */
+    size?: 'small' | 'default' | 'large';
+    /** 是否显示分割线 */
+    split?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否可点击 */
+    clickable?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 点击事件 */
+    onPress?: (_event: any) => void;
+    /** 长按事件 */
+    onLongPress?: (_event: any) => void;
+}
+export interface ListRef {
+    /** 获取列表项 */
+    getItem: (_index: number) => HTMLElement | null;
+    /** 滚动到指定项 */
+    scrollToItem: (_index: number) => void;
+    /** 获取列表项数量 */
+    getItemCount: () => number;
+}
+export interface ListItemRef {
+    /** 获取列表项元素 */
+    getElement: () => HTMLElement | null;
+    /** 获取索引 */
+    getIndex: () => number;
+}

package/dist/components/display/List/index.d.ts

@@ -0,0 +1,3 @@
+export { List, ListItem } from './List';
+export { ListStyles as listStyles } from './List.styles';
+export type { ListProps, ListRef, ListItemProps } from './List.types';

package/dist/components/display/Rate/Rate.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { RateProps, RateRef } from './Rate.types';
+/** Rate评分组件 */
+export declare const RateComponent: React.ForwardRefExoticComponent<RateProps & React.RefAttributes<RateRef>>;
+/** 导出Rate组件 */
+export declare const Rate: React.ForwardRefExoticComponent<RateProps & React.RefAttributes<RateRef>>;

package/dist/components/display/Rate/Rate.styles.d.ts

@@ -0,0 +1,100 @@
+import type { RateSize, StarState } from './Rate.types';
+/** Rate组件样式管理器 */
+export declare const rateStyles: {
+    /** 尺寸映射表 */
+    SIZE_MAP: {
+        readonly small: {
+            readonly size: 16;
+            readonly gap: 4;
+        };
+        readonly medium: {
+            readonly size: 20;
+            readonly gap: 6;
+        };
+        readonly large: {
+            readonly size: 24;
+            readonly gap: 8;
+        };
+        readonly default: {
+            readonly size: 20;
+            readonly gap: 6;
+        };
+    };
+    /** 颜色配置 */
+    COLORS: {
+        default: string;
+        unselected: string;
+        disabled: string;
+    };
+    /**
+     * 获取容器样式
+     */
+    getContainerStyle: (props: {
+        size?: RateSize;
+        disabled?: boolean;
+        readonly?: boolean;
+        style?: React.CSSProperties;
+    }) => React.CSSProperties;
+    /**
+     * 获取星星样式
+     */
+    getStarStyle: (props: {
+        size: RateSize;
+        state: StarState;
+        disabled?: boolean;
+        readonly?: boolean;
+        color?: string;
+        unselectedColor?: string;
+        isHovering?: boolean;
+    }) => React.CSSProperties;
+    /**
+     * 获取半星遮罩样式
+     */
+    getHalfStarMaskStyle: (props: {
+        color?: string;
+        unselectedColor?: string;
+    }) => React.CSSProperties;
+    /**
+     * 获取工具提示样式
+     */
+    getTooltipStyle: () => React.CSSProperties;
+    /**
+     * 获取容器类名
+     */
+    getClassName: (props: {
+        size?: RateSize;
+        disabled?: boolean;
+        readonly?: boolean;
+        className?: string;
+    }) => string;
+    /**
+     * 获取星星类名
+     */
+    getStarClassName: (props: {
+        state: StarState;
+        isActive?: boolean;
+        isHovering?: boolean;
+    }) => string;
+    /**
+     * 获取可访问性样式
+     */
+    getAccessibilityStyle: (focused: boolean) => React.CSSProperties;
+    /**
+     * 获取动画样式
+     */
+    getAnimationStyle: (props: {
+        isAnimating?: boolean;
+        animationType?: "scale" | "bounce" | "pulse";
+    }) => React.CSSProperties;
+    /**
+     * 生成CSS动画关键帧
+     */
+    generateKeyframes: () => string;
+    /**
+     * 获取响应式样式
+     */
+    getResponsiveStyle: (props: {
+        breakpoint?: "xs" | "sm" | "md" | "lg" | "xl";
+        size: RateSize;
+    }) => React.CSSProperties;
+};

package/dist/components/display/Rate/Rate.types.d.ts

@@ -0,0 +1,105 @@
+import { ReactNode } from 'react';
+import { Size } from '../../../types';
+import { BaseComponentProps as StandardBaseComponentProps } from '../../../types/component-props';
+/** 评分尺寸 */
+export type RateSize = Size | 'small' | 'medium' | 'large';
+/** 评分字符 */
+export type RateCharacter = ReactNode | string;
+/** 评分引用 */
+export interface RateRef {
+    /** 获取元素引用 */
+    element: any | null;
+    /** 获取当前评分值 */
+    getValue: () => number;
+    /** 设置评分值 */
+    setValue: (_value: number) => void;
+    /** 重置评分 */
+    reset: () => void;
+    /** 聚焦到组件 */
+    focus: () => void;
+    /** 失焦 */
+    blur: () => void;
+}
+/** 评分组件属性 */
+export interface RateProps extends StandardBaseComponentProps {
+    /** 当前评分值 */
+    value?: number;
+    /** 默认评分值 */
+    defaultValue?: number;
+    /** 星星总数 */
+    count?: number;
+    /** 是否允许半星 */
+    allowHalf?: boolean;
+    /** 是否允许清除 */
+    allowClear?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 评分尺寸 */
+    size?: RateSize;
+    /** 自定义字符 */
+    character?: RateCharacter | ((_index: number) => RateCharacter);
+    /** 提示文案数组 */
+    tooltips?: string[];
+    /** 是否显示提示文案 */
+    showTooltips?: boolean;
+    /** 自定义颜色 */
+    color?: string;
+    /** 自定义未选中颜色 */
+    unselectedColor?: string;
+    /** 是否自动聚焦 */
+    autoFocus?: boolean;
+    /** 键盘导航 */
+    keyboard?: boolean;
+    /** 评分改变时的回调 */
+    onChange?: (_value: number) => void;
+    /** hover时的回调 */
+    onHoverChange?: (_value: number) => void;
+    /** 聚焦时的回调 */
+    onFocus?: () => void;
+    /** 失焦时的回调 */
+    onBlur?: () => void;
+    /** 键盘事件回调 */
+    onKeyDown?: (_event: any) => void;
+}
+/** 评分工具函数接口 */
+export interface RateUtils {
+    /** 计算评分值 */
+    calculateValue: (_index: number, position: number, allowHalf: boolean) => number;
+    /** 获取星星状态 */
+    getStarState: (_index: number, value: number, hoverValue: number, allowHalf: boolean) => 'full' | 'half' | 'empty';
+    /** 格式化评分显示 */
+    formatValue: (_value: number, precision?: number) => string;
+    /** 验证评分值 */
+    validateValue: (_value: number, count: number) => boolean;
+    /** 获取可访问性属性 */
+    getAccessibilityProps: (_value: number, count: number, disabled: boolean) => Record<string, any>;
+}
+/** 星星状态 */
+export type StarState = 'full' | 'half' | 'empty';
+/** 星星属性 */
+export interface StarProps {
+    /** 星星索引 */
+    index: number;
+    /** 星星状态 */
+    state: StarState;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 尺寸 */
+    size: RateSize;
+    /** 自定义字符 */
+    character?: RateCharacter;
+    /** 颜色 */
+    color?: string;
+    /** 未选中颜色 */
+    unselectedColor?: string;
+    /** 点击回调 */
+    onClick?: (_index: number, position: number) => void;
+    /** hover回调 - not supported in Taro.js */
+    onHover?: (_index: number, position: number) => void;
+    /** 离开回调 - not supported in Taro.js */
+    onLeave?: () => void;
+}

package/dist/components/display/Rate/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Rate 评分组件
+ *
+ * 企业级评分组件，支持：
+ * - 完整和半星评分
+ * - 自定义字符和颜色
+ * - 键盘导航支持
+ * - 工具提示显示
+ * - 无障碍访问优化
+ * - 只读和禁用状态
+ * - 多种尺寸配置
+ * - 响应式设计
+ */
+export { Rate, RateComponent } from './Rate';
+export type { RateProps, RateRef, RateSize, RateCharacter, RateUtils, StarState, StarProps } from './Rate.types';
+export { rateStyles } from './Rate.styles';
+export { Rate as default } from './Rate';

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TableProps, TableRef } from './Table.types';
+/** 表格组件 */
+export declare const TableComponent: React.ForwardRefExoticComponent<TableProps<any> & React.RefAttributes<TableRef<any>>>;
+/** 导出表格组件 */
+export declare const Table: React.ForwardRefExoticComponent<TableProps<any> & React.RefAttributes<TableRef<any>>>;
+export default TableComponent;

package/dist/components/display/Table/Table.styles.d.ts

@@ -0,0 +1,84 @@
+import type { TableSize } from './Table.types';
+/** 表格样式类 */
+export declare class TableStyles {
+    /** 尺寸映射 */
+    static readonly SIZE_MAP: Record<TableSize, any>;
+    /** 颜色映射 */
+    static readonly COLOR_MAP: {
+        background: string;
+        headerBackground: string;
+        borderColor: string;
+        hoverBackground: string;
+        selectedBackground: string;
+        stripedBackground: string;
+        textColor: string;
+        headerTextColor: string;
+        borderColorLight: string;
+        shadow: string;
+    };
+    /** 生成表格样式 */
+    static getStyle(props: {
+        size?: TableSize;
+        bordered?: boolean;
+        striped?: boolean;
+        hoverable?: boolean;
+        scroll?: {
+            x?: number | string;
+            y?: number | string;
+        };
+        style?: React.CSSProperties;
+    }): React.CSSProperties;
+    /** 生成表格类名 */
+    static getClassName(props: {
+        size?: TableSize;
+        bordered?: boolean;
+        striped?: boolean;
+        hoverable?: boolean;
+        loading?: boolean;
+        className?: string;
+    }): string;
+    /** 生成表格头部样式 */
+    static getHeaderStyle(props: {
+        size?: TableSize;
+    }): React.CSSProperties;
+    /** 生成表格行样式 */
+    static getRowStyle(props: {
+        size?: TableSize;
+        selected?: boolean;
+        striped?: boolean;
+        index?: number;
+    }): React.CSSProperties;
+    /** 生成表格单元格样式 */
+    static getCellStyle(props: {
+        size?: TableSize;
+        align?: 'left' | 'center' | 'right';
+        width?: number | string;
+        isHeader?: boolean;
+    }): React.CSSProperties;
+    /** 生成表格展开行样式 */
+    static getExpandedRowStyle(): React.CSSProperties;
+    /** 生成表格分页样式 */
+    static getPaginationStyle(): React.CSSProperties;
+    /** 生成表格空状态样式 */
+    static getEmptyStyle(): React.CSSProperties;
+    /** 生成表格加载状态样式 */
+    static getLoadingStyle(): React.CSSProperties;
+    /** 生成表格排序器样式 */
+    static getSorterStyle(props: {
+        active?: boolean;
+        order?: 'ascend' | 'descend';
+    }): React.CSSProperties;
+    /** 生成表格选择列样式 */
+    static getSelectionCellStyle(): React.CSSProperties;
+    /** 生成表格展开列样式 */
+    static getExpandCellStyle(): React.CSSProperties;
+    /** 生成表格滚动容器样式 */
+    static getScrollStyle(props: {
+        scrollX?: boolean;
+        scrollY?: boolean;
+        maxHeight?: number | string;
+        maxWidth?: number | string;
+    }): React.CSSProperties;
+}
+/** 导出表格样式 */
+export declare const tableStyles: TableStyles;

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

@@ -0,0 +1,251 @@
+import { ReactNode } from 'react';
+import { Size } from '../../../types';
+import { BaseComponentProps as StandardBaseComponentProps } from '../../../types/component-props';
+/** 表格尺寸 */
+export type TableSize = Size | 'small' | 'medium' | 'large';
+/** 表格边框 */
+export type TableBorder = 'none' | 'outer' | 'all';
+/** 表格对齐方式 */
+export type TableAlign = 'left' | 'center' | 'right';
+/** 表格排序方式 */
+export type TableSortOrder = 'ascend' | 'descend' | null;
+/** 表格筛选配置 */
+export interface TableFilterConfig {
+    /** 筛选项 */
+    options: Array<{
+        label: string;
+        value: any;
+    }>;
+    /** 是否多选 */
+    multiple?: boolean;
+    /** 默认值 */
+    defaultSelectedValues?: any[];
+    /** 筛选回调 */
+    onFilter?: (_value: any, record: any) => boolean;
+}
+/** 表格列配置 */
+export interface TableColumn<T = any> {
+    /** 列标题 */
+    title: ReactNode;
+    /** 数据字段 */
+    dataIndex: string;
+    /** 列键值 */
+    key?: string;
+    /** 列宽 */
+    width?: number | string;
+    /** 对齐方式 */
+    align?: TableAlign;
+    /** 是否固定 */
+    fixed?: 'left' | 'right' | boolean;
+    /** 是否可排序 */
+    sortable?: boolean;
+    /** 排序字段 */
+    sortField?: string;
+    /** 排序回调 */
+    onSort?: (_field: string, order: TableSortOrder) => void;
+    /** 筛选配置 */
+    filter?: TableFilterConfig;
+    /** 自定义渲染 */
+    render?: (_value: any, record: T, index: number) => ReactNode;
+    /** 自定义标题渲染 */
+    titleRender?: (_column: TableColumn<T>) => ReactNode;
+    /** 是否显示 */
+    visible?: boolean;
+    /** 是否省略 */
+    ellipsis?: boolean;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 自定义类名 */
+    className?: string;
+}
+/** 表格行配置 */
+export interface TableRowConfig<T = any> {
+    /** 行键值 */
+    key: string;
+    /** 行数据 */
+    record: T;
+    /** 行索引 */
+    index: number;
+    /** 是否展开 */
+    expanded?: boolean;
+    /** 是否选中 */
+    selected?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 行样式 */
+    style?: React.CSSProperties;
+    /** 行类名 */
+    className?: string;
+}
+/** 表格行选择配置 */
+export interface TableRowSelection<T = any> {
+    /** 选择类型 */
+    type?: 'checkbox' | 'radio';
+    /** 选中行键值 */
+    selectedRowKeys?: string[];
+    /** 行选择变化回调 */
+    onChange?: (_selectedRowKeys: string[], selectedRows: T[]) => void;
+    /** 行是否可展开 */
+    rowExpandable?: (_record: T) => boolean;
+    /** 获取复选框属性 */
+    getCheckboxProps?: (_record: T) => {
+        disabled?: boolean;
+    };
+    /** 是否默认选中所有行 */
+    defaultSelectedAll?: boolean;
+    /** 是否禁用选择 */
+    disabled?: boolean;
+}
+/** 表格展开配置 */
+export interface TableExpandable<T = any> {
+    /** 展开行渲染 */
+    expandedRowRender?: (_record: T, index: number) => ReactNode;
+    /** 行是否可展开 */
+    rowExpandable?: (_record: T) => boolean;
+    /** 默认展开的行键值 */
+    defaultExpandedRowKeys?: string[];
+    /** 展开的行键值 */
+    expandedRowKeys?: string[];
+    /** 展开变化回调 */
+    onExpand?: (_expanded: boolean, record: T) => void;
+    /** 展开图标 */
+    expandIcon?: ReactNode;
+    /** 展开图标位置 */
+    expandIconPosition?: 'left' | 'right';
+}
+/** 表格分页配置 */
+export interface TablePaginationConfig {
+    /** 当前页码 */
+    current?: number;
+    /** 每页条数 */
+    pageSize?: number;
+    /** 总条数 */
+    total?: number;
+    /** 是否显示分页 */
+    show?: boolean;
+    /** 分页位置 */
+    position?: 'top' | 'bottom' | 'both';
+    /** 分页大小选项 */
+    pageSizeOptions?: number[];
+    /** 显示总数 */
+    showTotal?: boolean;
+    /** 显示快速跳转 */
+    showQuickJumper?: boolean;
+    /** 显示页码选择器 */
+    showSizeChanger?: boolean;
+    /** 页码改变事件 */
+    onChange?: (_current: number, pageSize: number) => void;
+    /** 每页条数改变事件 */
+    onShowSizeChange?: (_current: number, pageSize: number) => void;
+}
+/** 表格引用 */
+export interface TableRef<T = any> {
+    /** 获取元素引用 */
+    element: any | null;
+    /** 获取当前数据 */
+    getData: () => T[];
+    /** 获取选中行 */
+    getSelectedRows: () => T[];
+    /** 获取选中行键值 */
+    getSelectedRowKeys: () => string[];
+    /** 获取排序字段 */
+    getSortField: () => string;
+    /** 获取排序方式 */
+    getSortOrder: () => TableSortOrder;
+    /** 获取筛选值 */
+    getFilterValues: () => Record<string, any[]>;
+    /** 设置数据 */
+    setData: (_data: T[]) => void;
+    /** 设置选中行 */
+    setSelectedRows: (_keys: string[]) => void;
+    /** 设置排序 */
+    setSort: (_field: string, order: TableSortOrder) => void;
+    /** 设置筛选 */
+    setFilter: (_field: string, values: any[]) => void;
+    /** 刷新数据 */
+    refresh: () => void;
+    /** 重置状态 */
+    reset: () => void;
+    /** 滚动到指定行 */
+    scrollToRow: (_key: string) => void;
+}
+/** 表格组件属性 */
+export interface TableProps<T = any> extends StandardBaseComponentProps {
+    /** 表格数据 */
+    data?: T[];
+    /** 数据源（兼容属性） */
+    dataSource?: T[];
+    /** 列配置 */
+    columns: TableColumn<T>[];
+    /** 行键值字段 */
+    rowKey?: string | ((_record: T) => string);
+    /** 表格尺寸 */
+    size?: TableSize;
+    /** 表格边框 */
+    border?: TableBorder;
+    /** 是否有边框（兼容属性） */
+    bordered?: boolean;
+    /** 是否斑马纹 */
+    striped?: boolean;
+    /** 是否悬停效果 */
+    hoverable?: boolean;
+    /** 是否可展开 */
+    expandable?: boolean | TableExpandable<T>;
+    /** 展开行渲染 */
+    expandedRowRender?: (_record: T, index: number) => ReactNode;
+    /** 是否可选择 */
+    selectable?: boolean;
+    /** 选择类型 */
+    selectionType?: 'checkbox' | 'radio';
+    /** 默认选中行键值 */
+    defaultSelectedRowKeys?: string[];
+    /** 选中行键值 */
+    selectedRowKeys?: string[];
+    /** 行选择事件 */
+    onRowSelect?: (_selectedRowKeys: string[], selectedRows: T[]) => void;
+    /** 行选择配置 */
+    rowSelection?: TableRowSelection<T>;
+    /** 表格变化事件 */
+    onChange?: (_pagination: TablePaginationConfig, filters: any, sorter: any) => void;
+    /** 行配置 - Taro.js compatible */
+    onRow?: (_record: T, index: number) => Record<string, any>;
+    /** 表头行配置 - Taro.js compatible */
+    onHeaderRow?: (_columns: TableColumn<T>[], index: number) => Record<string, any>;
+    /** 行点击事件 - Taro.js compatible */
+    onRowClick?: (_record: T, index: number, event: any) => void;
+    /** 行双击事件 - not supported in Taro.js */
+    onRowDoubleClick?: (_record: T, index: number, event: any) => void;
+    /** 排序事件 */
+    onSort?: (_field: string, order: TableSortOrder) => void;
+    /** 筛选事件 */
+    onFilter?: (_filters: Record<string, any[]>) => void;
+    /** 分页配置 */
+    pagination?: TablePaginationConfig | boolean;
+    /** 是否显示表头 */
+    showHeader?: boolean;
+    /** 是否显示滚动条 */
+    scrollable?: boolean;
+    /** 滚动配置 */
+    scroll?: {
+        x?: number | string;
+        y?: number | string;
+    };
+    /** 是否加载中 */
+    loading?: boolean;
+    /** 空数据渲染 */
+    emptyText?: ReactNode;
+    /** 行样式 */
+    rowStyle?: (_record: T, index: number) => React.CSSProperties;
+    /** 行类名 */
+    rowClassName?: (_record: T, index: number) => string;
+    /** 单元格样式 */
+    cellStyle?: (_value: any, record: T, column: TableColumn<T>, index: number) => React.CSSProperties;
+    /** 单元格类名 */
+    cellClassName?: (_value: any, record: T, column: TableColumn<T>, index: number) => string;
+    /** 自定义行渲染 */
+    rowRender?: (_record: T, index: number) => ReactNode;
+    /** 自定义单元格渲染 */
+    cellRender?: (_value: any, record: T, column: TableColumn<T>, index: number) => ReactNode;
+}
+/** 表格分页类型别名 */
+export type TablePagination = TablePaginationConfig;

package/dist/components/display/Table/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './Table';
+export * from './Table';
+export type { TableProps, TableRef, TableColumn, TableSortOrder, TableFilterConfig, TableAlign, TableSize, TableBorder, TableRowSelection, TablePagination, TableExpandable, } from './Table.types';
+export { tableStyles } from './Table.styles';

package/dist/components/display/Tag/Tag.d.ts

@@ -0,0 +1,5 @@
+import type { TagProps, TagRef } from './Tag.types';
+/** 标签组件 */
+export declare const TagComponent: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<TagRef>>;
+export declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<TagRef>>;
+export default Tag;

package/dist/components/display/Tag/Tag.styles.d.ts

@@ -0,0 +1,2 @@
+import type { CSSProperties } from 'react';
+export declare const tagStyles: Record<string, CSSProperties>;