taro-uno-ui 0.9.0 → 1.0.0

package/dist/components/common/LazyComponent.d.ts

@@ -0,0 +1,78 @@
+/**
+ * 懒加载组件
+ * 提供组件级别的懒加载和代码分割
+ */
+import React, { ComponentType, LazyExoticComponent, ReactNode } from 'react';
+export interface LazyComponentProps {
+    /**
+     * 懒加载的组件
+     */
+    component: LazyExoticComponent<ComponentType<any>> | (() => Promise<ComponentType<any>>);
+    /**
+     * 组件属性
+     */
+    props?: Record<string, any>;
+    /**
+     * 加载状态显示
+     */
+    fallback?: ReactNode;
+    /**
+     * 错误状态显示
+     */
+    errorFallback?: ReactNode;
+    /**
+     * 预加载延迟（毫秒）
+     */
+    preloadDelay?: number;
+    /**
+     * 是否预加载
+     */
+    preload?: boolean;
+    /**
+     * 加载超时时间（毫秒）
+     */
+    timeout?: number;
+}
+export interface LazyComponentOptions {
+    /**
+     * 加载策略
+     */
+    strategy?: 'eager' | 'lazy' | 'prefetch';
+    /**
+     * 错误重试次数
+     */
+    retryCount?: number;
+    /**
+     * 重试延迟（毫秒）
+     */
+    retryDelay?: number;
+    /**
+     * 缓存配置
+     */
+    cache?: boolean;
+}
+/**
+ * 创建懒加载组件
+ */
+export declare function createLazyComponent<T extends ComponentType<any>>(importFn: () => Promise<{
+    default: T;
+}>, options?: LazyComponentOptions): LazyExoticComponent<T>;
+/**
+ * 懒加载组件包装器
+ */
+export declare const LazyComponent: React.FC<LazyComponentProps>;
+/**
+ * 路由级别的懒加载
+ */
+export declare function createLazyRoute<T extends ComponentType<any>>(importFn: () => Promise<{
+    default: T;
+}>, options?: LazyComponentOptions): React.LazyExoticComponent<T>;
+/**
+ * 批量懒加载组件
+ */
+export declare function createLazyComponents(components: Record<string, () => Promise<{
+    default: ComponentType<any>;
+}>>, options?: LazyComponentOptions): Record<string, LazyExoticComponent<ComponentType<any>>>;
+export declare const preloadComponent: () => void;
+export declare const clearComponentCache: () => void;
+export default LazyComponent;

package/dist/components/common/ResponsiveContainer.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 响应式容器组件
+ * 提供多平台适配的响应式布局容器，使用responsiveUtils工具
+ */
+import React, { ReactNode } from 'react';
+import type { ResponsiveStyle, ResponsiveValue } from '../../utils/responsiveUtils';
+interface ResponsiveContainerProps {
+    children: ReactNode;
+    className?: string;
+    style?: ResponsiveStyle;
+    padding?: ResponsiveValue<string | number>;
+    margin?: ResponsiveValue<string | number>;
+    maxWidth?: ResponsiveValue<string | number>;
+    backgroundColor?: ResponsiveValue<string>;
+    borderRadius?: ResponsiveValue<string | number>;
+    safeArea?: boolean;
+}
+/**
+ * 响应式容器组件
+ * 根据屏幕尺寸和平台自动调整布局
+ */
+export declare const ResponsiveContainer: React.FC<ResponsiveContainerProps>;
+export default ResponsiveContainer;

package/dist/components/common/ResponsiveGrid.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 响应式栅格组件
+ * 提供多平台适配的响应式栅格布局系统，使用responsiveUtils工具
+ */
+import React, { ReactNode } from 'react';
+import { ResponsiveValue } from '../../utils/responsiveUtils';
+interface ResponsiveGridProps {
+    children: ReactNode;
+    className?: string;
+    columns?: ResponsiveValue<number>;
+    gap?: ResponsiveValue<string | number>;
+    rowGap?: ResponsiveValue<string | number>;
+    columnGap?: ResponsiveValue<string | number>;
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    wrap?: boolean;
+}
+interface ResponsiveGridItemProps {
+    children: ReactNode;
+    className?: string;
+    span?: ResponsiveValue<number>;
+    offset?: ResponsiveValue<number>;
+    order?: ResponsiveValue<number>;
+    align?: 'start' | 'center' | 'end' | 'stretch';
+}
+/**
+ * 响应式栅格容器组件
+ * 根据屏幕尺寸自动调整列数和间距
+ */
+export declare const ResponsiveGrid: React.FC<ResponsiveGridProps>;
+/**
+ * 响应式栅格项组件
+ * 根据屏幕尺寸自动调整占据列数
+ */
+export declare const ResponsiveGridItem: React.FC<ResponsiveGridItemProps>;
+export declare const ResponsiveGridPresets: {
+    TwoColumns: ({ children, ...props }: Omit<ResponsiveGridProps, "columns">) => import("react/jsx-runtime").JSX.Element;
+    ThreeColumns: ({ children, ...props }: Omit<ResponsiveGridProps, "columns">) => import("react/jsx-runtime").JSX.Element;
+    FourColumns: ({ children, ...props }: Omit<ResponsiveGridProps, "columns">) => import("react/jsx-runtime").JSX.Element;
+    CardLayout: ({ children, ...props }: Omit<ResponsiveGridProps, "columns" | "gap">) => import("react/jsx-runtime").JSX.Element;
+    ListLayout: ({ children, ...props }: Omit<ResponsiveGridProps, "columns" | "gap">) => import("react/jsx-runtime").JSX.Element;
+    DashboardLayout: ({ children, ...props }: Omit<ResponsiveGridProps, "columns" | "gap">) => import("react/jsx-runtime").JSX.Element;
+};
+export default ResponsiveGrid;

package/dist/components/common/SecurityProvider.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+interface SecurityContextType {
+    sanitizeInput: (value: string, type?: 'html' | 'attribute' | 'json') => string;
+    validateInput: (value: string, rules: any) => any;
+    addSecurityHeaders: (headers: Record<string, string>) => Record<string, string>;
+    reportError: (error: Error) => void;
+}
+interface SecurityProviderProps {
+    children: ReactNode;
+    cspEnabled?: boolean;
+    hstsEnabled?: boolean;
+}
+export declare const SecurityProvider: React.FC<SecurityProviderProps>;
+export declare const useSecurity: () => SecurityContextType;
+export default SecurityProvider;

package/dist/components/common/ThemeProvider.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+import { defaultDesignTokens as designTokens } from '../../theme/design-tokens';
+interface ThemeContextType {
+    theme: 'light' | 'dark' | 'auto';
+    setTheme: (theme: 'light' | 'dark' | 'auto') => void;
+    isDark: boolean;
+    colors: typeof designTokens.colors;
+    spacing: typeof designTokens.spacing;
+    typography: typeof designTokens.typography;
+}
+interface ThemeProviderProps {
+    children: ReactNode;
+    defaultTheme?: 'light' | 'dark' | 'auto';
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export declare const useTheme: () => ThemeContextType;
+export default ThemeProvider;

package/dist/components/common/VirtualList.d.ts

@@ -0,0 +1,89 @@
+/**
+ * 虚拟列表组件
+ * 提供高性能的大数据量列表渲染
+ */
+import React, { ReactNode, CSSProperties } from 'react';
+export interface VirtualListProps<T = any> {
+    /**
+     * 数据源
+     */
+    data: T[];
+    /**
+     * 渲染函数
+     */
+    renderItem: (item: T, index: number) => ReactNode;
+    /**
+     * 项目高度（可以是数字或函数）
+     */
+    itemHeight: number | ((index: number) => number);
+    /**
+     * 容器高度
+     */
+    height: number | string;
+    /**
+     * 容器宽度
+     */
+    width?: number | string;
+    /**
+     * 每个项目的key
+     */
+    itemKey: string | ((item: T, index: number) => string);
+    /**
+     * 预渲染的额外项目数
+     */
+    overscan?: number;
+    /**
+     * 是否启用动态高度
+     */
+    dynamicHeight?: boolean;
+    /**
+     * 滚动到指定索引
+     */
+    scrollToIndex?: number;
+    /**
+     * 滚动行为
+     */
+    scrollBehavior?: 'auto' | 'smooth';
+    /**
+     * 空状态渲染
+     */
+    empty?: ReactNode;
+    /**
+     * 加载状态渲染
+     */
+    loading?: ReactNode;
+    /**
+     * 是否正在加载
+     */
+    isLoading?: boolean;
+    /**
+     * 是否到达底部
+     */
+    onEndReached?: () => void;
+    /**
+     * 距离底部多少像素触发onEndReached
+     */
+    onEndReachedThreshold?: number;
+    /**
+     * 列表样式
+     */
+    style?: CSSProperties;
+    /**
+     * 列表类名
+     */
+    className?: string;
+    /**
+     * 项目样式
+     */
+    itemStyle?: CSSProperties;
+    /**
+     * 项目类名
+     */
+    itemClassName?: string;
+    /**
+     * 滚动事件回调
+     */
+    onScroll?: (scrollTop: number, scrollLeft: number) => void;
+}
+export declare const VirtualList: React.ForwardRefExoticComponent<VirtualListProps<any> & React.RefAttributes<any>>;
+export default VirtualList;

package/dist/components/common/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Taro-Uno 通用组件库
+ * 提供通用的功能组件，如错误边界、懒加载、响应式容器等
+ */
+export * from './ErrorBoundary';
+export * from './LazyComponent';
+export * from './ResponsiveContainer';
+export * from './ResponsiveGrid';
+export * from './SecurityProvider';
+export * from './ThemeProvider';
+export * from './VirtualList';
+export declare const CommonComponentsUtils: {
+    /**
+     * 检查组件是否为通用组件
+     */
+    isCommonComponent: (componentName: string) => boolean;
+};

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

@@ -0,0 +1,3 @@
+import type { AvatarProps, AvatarRef } from './Avatar.types';
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<AvatarRef>>;
+export default Avatar;

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

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

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

@@ -0,0 +1,37 @@
+import type { CSSProperties } from 'react';
+export interface AvatarProps {
+    /** 头像图片地址 */
+    src?: string;
+    /** 图片无法显示时的替代文本 */
+    alt?: string;
+    /** 头像大小 */
+    size?: 'small' | 'medium' | 'large' | number;
+    /** 头像形状 */
+    shape?: 'circle' | 'square';
+    /** 头像图标 */
+    icon?: React.ReactNode;
+    /** 子节点（通常用于文字头像） */
+    children?: React.ReactNode;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 自定义类名 */
+    className?: string;
+    /** 点击事件 */
+    onClick?: (_event: any) => void;
+}
+export interface AvatarRef {
+    /** DOM 元素 */
+    element: any;
+    /** 获取头像尺寸 */
+    getSize: () => number;
+    /** 获取头像形状 */
+    getShape: () => 'circle' | 'square';
+    /** 检查是否有图片 */
+    hasImage: () => boolean;
+    /** 检查是否有图标 */
+    hasIcon: () => boolean;
+    /** 检查是否有文字 */
+    hasText: () => boolean;
+}
+export type AvatarSize = 'small' | 'medium' | 'large' | number;
+export type AvatarShape = 'circle' | 'square';

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

@@ -0,0 +1,3 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps, AvatarRef, AvatarSize, AvatarShape } from './Avatar.types';
+export { avatarStyles } from './Avatar.styles';

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

@@ -0,0 +1,3 @@
+import type { BadgeProps, BadgeRef } from './Badge.types';
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<BadgeRef>>;
+export default Badge;

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

@@ -0,0 +1,27 @@
+import type { CSSProperties, ReactNode } from 'react';
+export interface BadgeProps {
+    /** 显示的数字 */
+    count?: number;
+    /** 是否显示为小红点 */
+    dot?: boolean;
+    /** 封顶的数字值 */
+    overflowCount?: number;
+    /** 当数字为 0 时是否显示 */
+    showZero?: boolean;
+    /** 子节点 */
+    children?: ReactNode;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 自定义类名 */
+    className?: string;
+}
+export interface BadgeRef {
+    /** DOM 元素 */
+    element: any;
+    /** 获取当前计数 */
+    getCount: () => number | undefined;
+    /** 检查是否为点状 */
+    isDot: () => boolean;
+    /** 检查是否显示 */
+    isVisible: () => boolean;
+}

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

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeRef } from './Badge.types';

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

@@ -0,0 +1,5 @@
+import type { CalendarProps, CalendarRef } from './Calendar.types';
+/** 日历组件 */
+export declare const CalendarComponent: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<CalendarRef>>;
+export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<CalendarRef>>;
+export default Calendar;

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

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

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

@@ -0,0 +1,87 @@
+import type { CSSProperties, ReactNode } from 'react';
+export interface CalendarDate {
+    /** 年份 */
+    year: number;
+    /** 月份 (1-12) */
+    month: number;
+    /** 日期 (1-31) */
+    day: number;
+    /** 是否为当前月 */
+    isCurrentMonth?: boolean;
+    /** 是否为今天 */
+    isToday?: boolean;
+    /** 是否被选中 */
+    isSelected?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 事件数据 */
+    events?: CalendarEvent[];
+}
+export interface CalendarEvent {
+    /** 事件ID */
+    id: string;
+    /** 事件标题 */
+    title: string;
+    /** 事件描述 */
+    description?: string;
+    /** 事件类型 */
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+    /** 事件颜色 */
+    color?: string;
+    /** 开始时间 */
+    startTime?: string;
+    /** 结束时间 */
+    endTime?: string;
+}
+export interface CalendarProps {
+    /** 当前选中日期 */
+    value?: Date;
+    /** 默认日期 */
+    defaultValue?: Date;
+    /** 显示模式 */
+    mode?: 'month' | 'year';
+    /** 是否显示今天按钮 */
+    showToday?: boolean;
+    /** 是否显示事件 */
+    showEvents?: boolean;
+    /** 事件数据 */
+    events?: CalendarEvent[];
+    /** 禁用日期函数 */
+    disabledDate?: (_date: Date) => boolean;
+    /** 自定义日期渲染 */
+    dateRender?: (_date: CalendarDate) => ReactNode;
+    /** 自定义月份渲染 */
+    monthRender?: (_month: number, year: number) => ReactNode;
+    /** 日期选择事件 */
+    onSelect?: (_date: Date) => void;
+    /** 日期变化事件 */
+    onChange?: (_date: Date) => void;
+    /** 模式变化事件 */
+    onModeChange?: (_mode: 'month' | 'year') => void;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 自定义类名 */
+    className?: string;
+    /** 无障碍标签 */
+    ariaLabel?: string;
+    /** 无障碍角色 */
+    role?: string;
+}
+export interface CalendarRef {
+    /** DOM 元素 */
+    element: any;
+    /** 获取当前日期 */
+    getCurrentDate: () => Date;
+    /** 设置日期 */
+    setDate: (_date: Date) => void;
+    /** 获取显示模式 */
+    getMode: () => 'month' | 'year';
+    /** 设置显示模式 */
+    setMode: (_mode: 'month' | 'year') => void;
+    /** 跳转到今天 */
+    goToToday: () => void;
+    /** 上一个月/年 */
+    goPrev: () => void;
+    /** 下一个月/年 */
+    goNext: () => void;
+}

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

@@ -0,0 +1,3 @@
+export { Calendar } from './Calendar';
+export { calendarStyles } from './Calendar.styles';
+export type { CalendarProps, CalendarRef, CalendarDate, CalendarEvent } from './Calendar.types';

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CardProps, CardRef } from './Card.types';
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<CardRef>>;

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

@@ -0,0 +1 @@
+export declare const CardStyles: Record<string, any>;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { BaseComponentProps as StandardBaseComponentProps } from '../../../types/component-props';
+export interface CardProps extends StandardBaseComponentProps {
+    /** 卡片内容 */
+    children: React.ReactNode;
+    /** 卡片标题 */
+    title?: React.ReactNode;
+    /** 卡片副标题 */
+    subtitle?: React.ReactNode;
+    /** 卡片操作区域 */
+    extra?: React.ReactNode;
+    /** 卡片封面 */
+    cover?: React.ReactNode;
+    /** 卡片操作按钮 */
+    actions?: React.ReactNode[];
+    /** 是否可点击 */
+    hoverable?: boolean;
+    /** 是否显示边框 */
+    bordered?: boolean;
+    /** 阴影级别 */
+    shadow?: 'none' | 'small' | 'default' | 'large';
+    /** 加载状态 */
+    loading?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 点击事件 */
+    onPress?: (_event: React.MouseEvent | any) => void;
+    /** 长按事件 */
+    onLongPress?: (_event: React.MouseEvent | any) => void;
+}
+export interface CardRef {
+    /** 获取卡片元素 */
+    getElement: () => HTMLElement | null;
+    /** 获取卡片标题 */
+    getTitle: () => string | null;
+    /** 获取卡片内容 */
+    getContent: () => HTMLElement | null;
+}
+export interface CardStyleProps {
+    /** 平台类型 */
+    platform: string;
+    /** 阴影级别 */
+    shadow: CardProps['shadow'];
+    /** 是否可点击 */
+    hoverable: boolean;
+    /** 是否显示边框 */
+    bordered: boolean;
+    /** 加载状态 */
+    loading: boolean;
+}

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

@@ -0,0 +1,3 @@
+export { Card } from './Card';
+export { CardStyles as cardStyles } from './Card.styles';
+export type { CardProps, CardRef } from './Card.types';

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

@@ -0,0 +1,5 @@
+import type { CarouselProps, CarouselRef } from './Carousel.types';
+/** 轮播图组件 */
+export declare const CarouselComponent: import("react").ForwardRefExoticComponent<CarouselProps & import("react").RefAttributes<CarouselRef>>;
+export declare const Carousel: import("react").ForwardRefExoticComponent<CarouselProps & import("react").RefAttributes<CarouselRef>>;
+export default Carousel;

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

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

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

@@ -0,0 +1,55 @@
+import type { CSSProperties, ReactNode } from 'react';
+export interface CarouselProps {
+    /** 轮播项 */
+    children?: ReactNode;
+    /** 是否自动播放 */
+    autoplay?: boolean;
+    /** 自动播放间隔时间（毫秒） */
+    interval?: number;
+    /** 是否显示指示器 */
+    showDots?: boolean;
+    /** 是否显示箭头 */
+    showArrows?: boolean;
+    /** 是否无限循环 */
+    infinite?: boolean;
+    /** 切换效果 */
+    effect?: 'slide' | 'fade';
+    /** 指示器位置 */
+    dotsPosition?: 'bottom' | 'top' | 'left' | 'right';
+    /** 每次滚动的项目数 */
+    slidesToShow?: number;
+    /** 每次滚动移动的项目数 */
+    slidesToScroll?: number;
+    /** 垂直模式 */
+    vertical?: boolean;
+    /** 当前活动索引 */
+    activeIndex?: number;
+    /** 默认活动索引 */
+    defaultActiveIndex?: number;
+    /** 切换前回调 */
+    beforeChange?: (_from: number, to: number) => void;
+    /** 切换后回调 */
+    afterChange?: (_current: number) => void;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 自定义类名 */
+    className?: string;
+}
+export interface CarouselRef {
+    /** DOM 元素 */
+    element: any;
+    /** 获取当前索引 */
+    getCurrentIndex: () => number;
+    /** 跳转到指定索引 */
+    goTo: (_index: number) => void;
+    /** 上一张 */
+    prev: () => void;
+    /** 下一张 */
+    next: () => void;
+    /** 开始自动播放 */
+    play: () => void;
+    /** 停止自动播放 */
+    pause: () => void;
+    /** 获取总数 */
+    getTotal: () => number;
+}

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

@@ -0,0 +1,3 @@
+export { Carousel } from './Carousel';
+export { carouselStyles } from './Carousel.styles';
+export type { CarouselProps, CarouselRef } from './Carousel.types';

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ListProps, ListItemProps, ListRef } from './List.types';
+export declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<ListRef>>;
+export declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<any>>;

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

@@ -0,0 +1 @@
+export declare const ListStyles: Record<string, any>;