taro-uno-ui 0.9.0 → 1.0.0

package/dist/types/index.d.ts

@@ -0,0 +1,343 @@
+/**
+ * Taro-Uno UI 组件库核心类型定义
+ * 支持多端开发：微信小程序、支付宝小程序、H5、React Native等
+ * 提供严格的TypeScript类型安全保障
+ */
+import { ReactNode } from 'react';
+import * as Taro from '@tarojs/taro';
+export * from './utils';
+export * from './button';
+export * from './standardized-components';
+/** 支持的平台类型 */
+export type Platform = 'weapp' | 'alipay' | 'swan' | 'tt' | 'qq' | 'h5' | 'rn' | 'jd';
+/** 平台信息接口 */
+export interface PlatformInfo {
+    /** 平台类型 */
+    platform: Platform;
+    /** 是否为小程序环境 */
+    isMiniProgram: boolean;
+    /** 是否为H5环境 */
+    isH5: boolean;
+    /** 是否为React Native环境 */
+    isRN: boolean;
+    /** 系统信息 */
+    system: Taro.getSystemInfoSync.Result;
+    /** SDK版本 */
+    SDKVersion?: string;
+    /** 小程序版本 */
+    version?: string;
+}
+/** 组件尺寸类型 */
+export type Size = 'small' | 'medium' | 'large' | 'default';
+/** 组件变体类型 */
+export type Variant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+/** 组件状态类型 */
+export type Status = 'default' | 'loading' | 'disabled' | 'error' | 'success';
+/** 通用组件属性接口 */
+export interface BaseComponentProps extends Partial<Omit<React.HTMLAttributes<HTMLElement>, 'className' | 'style' | 'children' | 'onClick'>> {
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 测试ID */
+    testID?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 加载状态 */
+    loading?: boolean;
+    /** 子元素 */
+    children?: ReactNode;
+}
+/** 带有尺寸属性的组件接口 */
+export interface SizeableComponentProps extends BaseComponentProps {
+    /** 组件尺寸 */
+    size?: Size;
+}
+/** 带有变体属性的组件接口 */
+export interface VariantComponentProps extends BaseComponentProps {
+    /** 组件变体 */
+    variant?: Variant;
+}
+/** 带有状态属性的组件接口 */
+export interface StatusComponentProps extends BaseComponentProps {
+    /** 组件状态 */
+    status?: Status;
+}
+/** 主题模式 */
+export type ThemeMode = 'light' | 'dark' | 'auto';
+/** 主题颜色配置 */
+export interface ThemeColors {
+    /** 主色调 */
+    primary: string;
+    /** 次要色调 */
+    secondary: string;
+    /** 成功色 */
+    success: string;
+    /** 警告色 */
+    warning: string;
+    /** 错误色 */
+    error: string;
+    /** 信息色 */
+    info: string;
+    /** 背景色 */
+    background: string;
+    /** 表面色 */
+    surface: string;
+    /** 文字主色 */
+    text: string;
+    /** 文字次要色 */
+    textSecondary: string;
+    /** 边框色 */
+    border: string;
+    /** 分割线色 */
+    divider: string;
+}
+/** 主题间距配置 */
+export interface ThemeSpacing {
+    /** 极小间距 */
+    xs: number;
+    /** 小间距 */
+    sm: number;
+    /** 中等间距 */
+    md: number;
+    /** 大间距 */
+    lg: number;
+    /** 极大间距 */
+    xl: number;
+    /** 超大间距 */
+    xxl: number;
+}
+/** 主题字体配置 */
+export interface ThemeTypography {
+    /** 字体族 */
+    fontFamily: string;
+    /** 字体大小 */
+    fontSize: {
+        xs: number;
+        sm: number;
+        base: number;
+        lg: number;
+        xl: number;
+        '2xl': number;
+        '3xl': number;
+        '4xl': number;
+    };
+    /** 字重 */
+    fontWeight: {
+        normal: number;
+        medium: number;
+        bold: number;
+    };
+    /** 行高 */
+    lineHeight: {
+        tight: number;
+        normal: number;
+        relaxed: number;
+    };
+}
+/** 主题圆角配置 */
+export interface ThemeRadius {
+    /** 无圆角 */
+    none: number;
+    /** 小圆角 */
+    sm: number;
+    /** 中等圆角 */
+    md: number;
+    /** 大圆角 */
+    lg: number;
+    /** 完全圆角 */
+    full: number;
+}
+/** 主题配置接口 */
+export interface ThemeConfig {
+    /** 主题模式 */
+    mode: ThemeMode;
+    /** 主题颜色 */
+    colors: ThemeColors;
+    /** 主题间距 */
+    spacing: ThemeSpacing;
+    /** 主题字体 */
+    typography: ThemeTypography;
+    /** 主题圆角 */
+    radius: ThemeRadius;
+    /** 自定义CSS变量 */
+    cssVars?: Record<string, string>;
+}
+/** 通用事件处理器类型 */
+export type EventHandler<T = any> = (event: T) => void;
+/** 点击事件处理器 */
+export type ClickHandler = EventHandler<any>;
+/** 输入事件处理器 */
+export type InputHandler = EventHandler<any>;
+/** 变更事件处理器 */
+export type ChangeHandler<T = any> = EventHandler<T>;
+/** 焦点事件处理器 */
+export type FocusHandler = EventHandler<any>;
+/** 滚动事件处理器 */
+export type ScrollHandler = EventHandler<any>;
+/** 触摸事件处理器 */
+export type TouchHandler = EventHandler<any>;
+/** 生命周期事件处理器 */
+export type LifecycleHandler = EventHandler<void>;
+/** 防抖函数类型 */
+export type DebouncedFunction<T extends (...args: any[]) => any> = {
+    (...args: Parameters<T>): ReturnType<T> | undefined;
+    cancel: () => void;
+    flush: () => ReturnType<T> | undefined;
+};
+/** 节流函数类型 */
+export type ThrottledFunction<T extends (...args: any[]) => any> = {
+    (...args: Parameters<T>): ReturnType<T> | undefined;
+    cancel: () => void;
+};
+/** 格式化函数类型 */
+export type FormatFunction<T = any, R = string> = (value: T) => R;
+/** 验证函数类型 */
+export type ValidateFunction<T = any> = (value: T) => boolean | string;
+/** 转换函数类型 */
+export type TransformFunction<T = any, R = any> = (value: T) => R;
+/** 过滤函数类型 */
+export type FilterFunction<T = any> = (value: T, index: number, array: T[]) => boolean;
+/** 比较函数类型 */
+export type CompareFunction<T = any> = (a: T, b: T) => number;
+/** CSS单位类型 */
+export type CSSUnit = 'px' | 'rem' | 'em' | 'vw' | 'vh' | '%' | 'rpx';
+/** 尺寸值类型 */
+export type SizeValue = number | `${number}${CSSUnit}`;
+/** 颜色值类型 */
+export type ColorValue = string;
+/** 间距值类型 */
+export type SpacingValue = SizeValue;
+/** 动画类型 */
+export type AnimationType = 'fade' | 'slide' | 'scale' | 'rotate' | 'bounce';
+/** 动画方向 */
+export type AnimationDirection = 'up' | 'down' | 'left' | 'right' | 'in' | 'out';
+/** 过渡配置 */
+export interface TransitionConfig {
+    /** 过渡属性 */
+    property?: string;
+    /** 过渡时间 */
+    duration?: number;
+    /** 过渡函数 */
+    timing?: string;
+    /** 过渡延迟 */
+    delay?: number;
+}
+/** 表单字段状态 */
+export interface FormFieldState {
+    /** 字段值 */
+    value: any;
+    /** 是否已修改 */
+    dirty: boolean;
+    /** 是否已触摸 */
+    touched: boolean;
+    /** 是否有效 */
+    valid: boolean;
+    /** 错误信息 */
+    error?: string;
+}
+/** 表单验证规则 */
+export interface ValidationRule {
+    /** 必填验证 */
+    required?: boolean;
+    /** 最小长度 */
+    minLength?: number;
+    /** 最大长度 */
+    maxLength?: number;
+    /** 最小值 */
+    min?: number;
+    /** 最大值 */
+    max?: number;
+    /** 正则验证 */
+    pattern?: RegExp;
+    /** 自定义验证器 */
+    validator?: ValidateFunction;
+    /** 错误消息 */
+    message?: string;
+}
+/** 表单配置 */
+export interface FormConfig {
+    /** 初始值 */
+    initialValues: Record<string, any>;
+    /** 验证规则 */
+    validationRules?: Record<string, ValidationRule[]>;
+    /** 提交处理器 */
+    onSubmit: (values: Record<string, any>) => void | Promise<void>;
+    /** 重置处理器 */
+    onReset?: () => void;
+    /** 变更处理器 */
+    onChange?: (values: Record<string, any>) => void;
+}
+/** 请求配置 */
+export interface RequestConfig {
+    /** 请求URL */
+    url: string;
+    /** 请求方法 */
+    method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+    /** 请求头 */
+    header?: Record<string, string>;
+    /** 请求数据 */
+    data?: any;
+    /** 请求参数 */
+    params?: Record<string, any>;
+    /** 超时时间 */
+    timeout?: number;
+    /** 是否显示加载状态 */
+    showLoading?: boolean;
+    /** 加载提示文字 */
+    loadingText?: string;
+    /** 是否显示错误提示 */
+    showError?: boolean;
+    /** 错误提示文字 */
+    errorText?: string;
+}
+/** 请求响应 */
+export interface RequestResponse<T = any> {
+    /** 数据 */
+    data: T;
+    /** 状态码 */
+    statusCode: number;
+    /** 状态消息 */
+    statusMessage?: string;
+    /** 响应头 */
+    header?: Record<string, string>;
+}
+/** 请求错误 */
+export interface RequestError {
+    /** 错误消息 */
+    message: string;
+    /** 错误码 */
+    code?: number | string;
+    /** 错误详情 */
+    detail?: any;
+}
+/** 通用回调函数类型 */
+export type Callback<T = any> = (data: T) => void;
+/** 异步函数类型 */
+export type AsyncFunction<T = any> = () => Promise<T>;
+/** 条件类型 */
+export type Conditional<T, Condition, TrueType, FalseType> = T extends Condition ? TrueType : FalseType;
+/** 深度部分类型 */
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+/** 深度只读类型 */
+export type DeepReadonly<T> = {
+    readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
+};
+/** 深度可写类型 */
+export type DeepWriteable<T> = {
+    -readonly [P in keyof T]: T[P] extends object ? DeepWriteable<T[P]> : T[P];
+};
+/** 深度必选类型 */
+export type DeepRequired<T> = {
+    [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : T[P];
+};
+/** 递归排除类型 */
+export type RecursiveExclude<T, E> = T extends object ? {
+    [P in keyof T as T[P] extends E ? never : P]: RecursiveExclude<T[P], E>;
+} : T;
+/** 递归选择类型 */
+export type RecursivePick<T, K extends string> = T extends object ? {
+    [P in keyof T as P extends K ? P : never]: RecursivePick<T[P], K>;
+} : T;

package/dist/types/standardized-components.d.ts

@@ -0,0 +1,263 @@
+/**
+ * 标准化组件类型定义
+ * 统一所有组件的属性接口，确保类型安全和API一致性
+ */
+import { ReactNode } from 'react';
+import type { ITouchEvent } from '@tarojs/components';
+/** 组件尺寸类型 - 统一标准 */
+export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** 组件变体类型 - 统一标准 */
+export type ComponentVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+/** 组件状态类型 - 统一标准 */
+export type ComponentStatus = 'normal' | 'loading' | 'disabled' | 'error' | 'success' | 'warning';
+/** 组件形状类型 - 统一标准 */
+export type ComponentShape = 'default' | 'round' | 'circle' | 'square';
+/** 组件方向类型 */
+export type ComponentDirection = 'horizontal' | 'vertical';
+/** 组件对齐类型 */
+export type ComponentAlign = 'start' | 'center' | 'end' | 'stretch';
+/** 组件位置类型 */
+export type ComponentPosition = 'top' | 'right' | 'bottom' | 'left';
+/** 基础组件属性接口 */
+export interface BaseComponentProps {
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 测试ID */
+    testID?: string;
+    /** 子元素 */
+    children?: ReactNode;
+}
+/** 可设置尺寸的组件属性 */
+export interface SizeableProps extends BaseComponentProps {
+    /** 组件尺寸 */
+    size?: ComponentSize;
+}
+/** 可设置变体的组件属性 */
+export interface VariantProps extends BaseComponentProps {
+    /** 组件变体 */
+    variant?: ComponentVariant;
+}
+/** 可设置状态的组件属性 */
+export interface StatusProps extends BaseComponentProps {
+    /** 组件状态 */
+    status?: ComponentStatus;
+}
+/** 可设置形状的组件属性 */
+export interface ShapeProps extends BaseComponentProps {
+    /** 组件形状 */
+    shape?: ComponentShape;
+}
+/** 可禁用的组件属性 */
+export interface DisabledProps extends BaseComponentProps {
+    /** 是否禁用 */
+    disabled?: boolean;
+}
+/** 可只读的组件属性 */
+export interface ReadonlyProps extends BaseComponentProps {
+    /** 是否只读 */
+    readonly?: boolean;
+}
+/** 可加载的组件属性 */
+export interface LoadingProps extends BaseComponentProps {
+    /** 加载状态 */
+    loading?: boolean;
+}
+/** 可点击的组件属性 */
+export interface ClickableProps extends BaseComponentProps {
+    /** 点击事件处理 */
+    onClick?: (event: ITouchEvent) => void;
+    /** 是否可点击 */
+    clickable?: boolean;
+}
+/** 标准组件属性 - 组合所有常用属性 */
+export interface StandardComponentProps extends SizeableProps, VariantProps, StatusProps, ShapeProps, DisabledProps, ReadonlyProps, LoadingProps, ClickableProps {
+    /** 组件唯一标识 */
+    id?: string;
+    /** 数据属性 */
+    data?: Record<string, any>;
+}
+/** 表单组件属性接口 */
+export interface FormComponentProps extends StandardComponentProps {
+    /** 表单字段名称 */
+    name?: string;
+    /** 表单字段值 */
+    value?: any;
+    /** 默认值 */
+    defaultValue?: any;
+    /** 占位符 */
+    placeholder?: string;
+    /** 是否必填 */
+    required?: boolean;
+    /** 变更事件处理 */
+    onChange?: (value: any, event?: ITouchEvent) => void;
+    /** 焦点事件处理 */
+    onFocus?: (event: ITouchEvent) => void;
+    /** 失焦事件处理 */
+    onBlur?: (event: ITouchEvent) => void;
+    /** 输入事件处理 */
+    onInput?: (value: any, event?: ITouchEvent) => void;
+    /** 确认事件处理 */
+    onConfirm?: (value: any, event?: ITouchEvent) => void;
+}
+/** 布局组件属性接口 */
+export interface LayoutComponentProps extends StandardComponentProps {
+    /** 布局方向 */
+    direction?: ComponentDirection;
+    /** 对齐方式 */
+    align?: ComponentAlign;
+    /** 间距 */
+    spacing?: number | string;
+    /** 自动换行 */
+    wrap?: boolean;
+    /** 占据宽度 */
+    span?: number;
+    /** 偏移量 */
+    offset?: number;
+}
+/** 显示组件属性接口 */
+export interface DisplayComponentProps extends StandardComponentProps {
+    /** 显示/隐藏 */
+    visible?: boolean;
+    /** 显示模式 */
+    mode?: 'default' | 'card' | 'list' | 'grid';
+    /** 标题 */
+    title?: string;
+    /** 描述 */
+    description?: string;
+    /** 副标题 */
+    subtitle?: string;
+    /** 额外内容 */
+    extra?: ReactNode;
+}
+/** 通用事件处理器类型 */
+export type EventHandler<T = any> = (event: T) => void;
+/** 点击事件处理器 */
+export type ClickHandler = EventHandler<ITouchEvent>;
+/** 输入事件处理器 */
+export type InputHandler<T = any> = (value: T, event?: ITouchEvent) => void;
+/** 变更事件处理器 */
+export type ChangeHandler<T = any> = (value: T, event?: ITouchEvent) => void;
+/** 焦点事件处理器 */
+export type FocusHandler = EventHandler<ITouchEvent>;
+/** 选择事件处理器 */
+export type SelectHandler<T = any> = (selected: T, event?: ITouchEvent) => void;
+/** 滚动事件处理器 */
+export type ScrollHandler = EventHandler<any>;
+/** 自定义事件处理器 */
+export type CustomEventHandler<T = any> = (data: T, event?: ITouchEvent) => void;
+/** 基础组件引用接口 */
+export interface BaseComponentRef {
+    /** DOM元素 */
+    element: any;
+    /** 获取组件尺寸 */
+    getSize: () => ComponentSize | undefined;
+    /** 获取组件变体 */
+    getVariant: () => ComponentVariant | undefined;
+    /** 获取组件状态 */
+    getStatus: () => ComponentStatus | undefined;
+    /** 检查是否禁用 */
+    isDisabled: () => boolean;
+    /** 检查是否只读 */
+    isReadonly: () => boolean;
+    /** 检查是否加载中 */
+    isLoading: () => boolean;
+    /** 禁用组件 */
+    disable: () => void;
+    /** 启用组件 */
+    enable: () => void;
+    /** 设置只读状态 */
+    setReadonly: (readonly: boolean) => void;
+    /** 设置加载状态 */
+    setLoading: (loading: boolean) => void;
+    /** 设置状态 */
+    setStatus: (status: ComponentStatus) => void;
+    /** 聚焦组件 */
+    focus: () => void;
+    /** 失焦组件 */
+    blur: () => void;
+}
+/** 表单组件引用接口 */
+export interface FormComponentRef extends BaseComponentRef {
+    /** 获取值 */
+    getValue: () => any;
+    /** 设置值 */
+    setValue: (value: any) => void;
+    /** 重置值 */
+    reset: () => void;
+    /** 清除值 */
+    clear: () => void;
+    /** 验证值 */
+    validate: () => boolean | Promise<boolean>;
+    /** 获取验证错误 */
+    getValidationError: () => string | undefined;
+}
+/** 布局组件引用接口 */
+export interface LayoutComponentRef extends BaseComponentRef {
+    /** 获取布局方向 */
+    getDirection: () => ComponentDirection | undefined;
+    /** 获取对齐方式 */
+    getAlign: () => ComponentAlign | undefined;
+    /** 获取间距 */
+    getSpacing: () => number | string | undefined;
+    /** 设置布局方向 */
+    setDirection: (direction: ComponentDirection) => void;
+    /** 设置对齐方式 */
+    setAlign: (align: ComponentAlign) => void;
+    /** 设置间距 */
+    setSpacing: (spacing: number | string) => void;
+}
+/** 尺寸配置接口 */
+export interface SizeConfig {
+    fontSize: number;
+    padding: string;
+    height: number;
+    borderRadius: number;
+    iconSize?: number;
+    borderWidth?: number;
+}
+/** 标准尺寸映射 */
+export declare const STANDARD_SIZE_MAP: Record<ComponentSize, SizeConfig>;
+/** 变体颜色配置接口 */
+export interface VariantColorConfig {
+    background: string;
+    color: string;
+    border: string;
+    hover?: {
+        background: string;
+        color: string;
+        border: string;
+    };
+    active?: {
+        background: string;
+        color: string;
+        border: string;
+    };
+    disabled?: {
+        background: string;
+        color: string;
+        border: string;
+    };
+}
+/** 标准变体颜色映射 */
+export declare const STANDARD_VARIANT_COLORS: Record<ComponentVariant, VariantColorConfig>;
+/** 状态颜色配置接口 */
+export interface StatusColorConfig {
+    color: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    icon?: string;
+}
+/** 标准状态颜色映射 */
+export declare const STANDARD_STATUS_COLORS: Record<ComponentStatus, StatusColorConfig>;
+/** 组件属性合并类型 */
+export type MergeComponentProps<T, U> = T & U;
+/** 可选组件属性类型 */
+export type OptionalComponentProps<T> = Partial<T>;
+/** 必需组件属性类型 */
+export type RequiredComponentProps<T> = Required<T>;
+/** 组件属性提取类型 */
+export type ExtractComponentProps<T> = T extends React.ComponentType<infer P> ? P : never;
+/** 组件引用提取类型 */
+export type ExtractComponentRef<T> = T extends React.RefObject<infer R> ? R : never;