taro-uno-ui 0.9.0 → 1.0.0

package/dist/components/feedback/Progress/Progress.types.d.ts

@@ -0,0 +1,147 @@
+import * as React from 'react';
+import type { CSSProperties } from 'react';
+export type ProgressType = 'line' | 'circle' | 'dashboard';
+export type ProgressSize = 'xs' | 'sm' | 'small' | 'default' | 'lg' | 'large';
+export type ProgressStatus = 'normal' | 'success' | 'exception' | 'active';
+export type ProgressLineCap = 'round' | 'square' | 'butt';
+export type ProgressGapPosition = 'top' | 'bottom' | 'left' | 'right';
+export interface ProgressSegment {
+    color: string;
+    percent: number;
+}
+export interface ProgressGradient {
+    type: 'linear' | 'radial';
+    direction?: string;
+    colors: string[];
+}
+export interface ProgressAnimationConfig {
+    duration: number;
+    easing?: string;
+    delay?: number;
+}
+export interface ProgressTheme {
+    primaryColor: string;
+    successColor: string;
+    errorColor: string;
+    warningColor: string;
+    textColor: string;
+    backgroundColor: string;
+    borderRadius: number;
+}
+export interface ProgressEventHandlers {
+    onChange?: (_percent: number) => void;
+    onComplete?: () => void;
+    onAnimationStart?: () => void;
+    onAnimationEnd?: () => void;
+}
+export interface ProgressProps {
+    /** 进度条类型 */
+    type?: ProgressType;
+    /** 进度百分比 (0-100) */
+    percent?: number;
+    /** 进度条状态 */
+    status?: ProgressStatus;
+    /** 进度条尺寸 */
+    size?: ProgressSize;
+    /** 进度条宽度（仅线型有效） */
+    strokeWidth?: number;
+    /** 进度条线条颜色 */
+    strokeColor?: string | ProgressGradient;
+    /** 进度条轨道颜色 */
+    trailColor?: string;
+    /** 是否显示进度信息 */
+    showInfo?: boolean;
+    /** 进度信息格式化 */
+    format?: (_percent: number) => React.ReactNode;
+    /** 进度条标题 */
+    title?: React.ReactNode;
+    /** 进度条描述 */
+    description?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 仪表盘缺口角度（仅仪表盘有效） */
+    gapDegree?: number;
+    /** 仪表盘缺口位置（仅仪表盘有效） */
+    gapPosition?: ProgressGapPosition;
+    /** 动画持续时间 */
+    animationDuration?: number;
+    /** 是否开启动画 */
+    animated?: boolean;
+    /** 线条端点样式 */
+    strokeLinecap?: ProgressLineCap;
+    /** 分段进度条数据 */
+    segments?: ProgressSegment[];
+    /** 成功进度百分比 */
+    successPercent?: number;
+    /** 动画配置 */
+    animation?: ProgressAnimationConfig;
+    /** 自定义主题 */
+    theme?: Partial<ProgressTheme>;
+    /** 事件处理函数 */
+    events?: ProgressEventHandlers;
+    /** 无障碍标签 */
+    ariaLabel?: string;
+    /** 无障碍描述 */
+    ariaDescribedby?: string;
+    /** 子元素 */
+    children?: React.ReactNode;
+}
+export interface ProgressRef {
+    /** 获取当前进度 */
+    getPercent: () => number;
+    /** 设置进度 */
+    setPercent: (_percent: number) => void;
+    /** 重置进度 */
+    reset: () => void;
+    /** 开始动画 */
+    start: () => void;
+    /** 暂停动画 */
+    pause: () => void;
+    /** 完成进度 */
+    complete: () => void;
+    /** 获取DOM元素 */
+    getElement: () => HTMLElement | null;
+    /** 获取当前状态 */
+    getStatus: () => ProgressStatus;
+    /** 设置状态 */
+    setStatus: (_status: ProgressStatus) => void;
+    /** 是否正在动画中 */
+    isAnimating: () => boolean;
+}
+export interface ProgressStyles {
+    container: CSSProperties;
+    lineContainer: CSSProperties;
+    lineOuter: CSSProperties;
+    lineInner: CSSProperties;
+    circleContainer: CSSProperties;
+    circleOuter: CSSProperties;
+    circleInner: CSSProperties;
+    dashboardOuter: CSSProperties;
+    dashboardInner: CSSProperties;
+    statusColors: Record<ProgressStatus, string>;
+    sizes: Record<ProgressSize, CSSProperties>;
+    progressInfo: CSSProperties;
+    animation: CSSProperties;
+}
+export interface ProgressStyleProps {
+    type?: ProgressType;
+    status?: ProgressStatus;
+    size?: ProgressSize;
+    strokeWidth?: number;
+    strokeColor?: string | ProgressGradient;
+    trailColor?: string;
+    animated?: boolean;
+    percent?: number;
+    gapDegree?: number;
+    gapPosition?: ProgressGapPosition;
+    strokeLinecap?: ProgressLineCap;
+    theme?: Partial<ProgressTheme>;
+}
+export interface ProgressContextProps {
+    theme: ProgressTheme;
+    animated: boolean;
+    animationDuration: number;
+}
+export type ProgressContext = React.Context<ProgressContextProps>;

package/dist/components/feedback/Progress/index.d.ts

@@ -0,0 +1,3 @@
+export { Progress } from './Progress';
+export type { ProgressProps, ProgressRef, ProgressType, ProgressSize, ProgressStatus } from './Progress.types';
+export { progressStyles } from './Progress.styles';

package/dist/components/feedback/Progress/utils/animation.d.ts

@@ -0,0 +1,55 @@
+export interface AnimationOptions {
+    duration: number;
+    easing?: (t: number) => number;
+    delay?: number;
+    onStart?: () => void;
+    onComplete?: () => void;
+    onUpdate?: (progress: number) => void;
+}
+export interface AnimationController {
+    start: () => void;
+    pause: () => void;
+    resume: () => void;
+    cancel: () => void;
+    isRunning: () => boolean;
+}
+/**
+ * 缓动函数集合
+ */
+export declare const easingFunctions: {
+    linear: (t: number) => number;
+    easeIn: (t: number) => number;
+    easeOut: (t: number) => number;
+    easeInOut: (t: number) => number;
+    easeInCubic: (t: number) => number;
+    easeOutCubic: (t: number) => number;
+    easeInOutCubic: (t: number) => number;
+};
+/**
+ * 创建动画控制器
+ */
+export declare function createAnimation(startValue: number, endValue: number, options: AnimationOptions): AnimationController;
+/**
+ * 创建优化的进度动画
+ */
+export declare function createProgressAnimation(startPercent: number, endPercent: number, onUpdate: (percent: number) => void, options?: Partial<Omit<AnimationOptions, 'onUpdate'>>): AnimationController;
+/**
+ * 节流化的动画更新函数
+ */
+export declare const throttledAnimationUpdate: (callback: () => void) => void;
+/**
+ * 批量动画管理器
+ */
+export declare class AnimationBatchManager {
+    private animations;
+    private onUpdateCallbacks;
+    addAnimation(id: string, animation: AnimationController): void;
+    removeAnimation(id: string): void;
+    pauseAll(): void;
+    resumeAll(): void;
+    cancelAll(): void;
+    addUpdateCallback(callback: () => void): void;
+    removeUpdateCallback(callback: () => void): void;
+    triggerUpdate(): void;
+}
+export declare const animationBatchManager: AnimationBatchManager;

package/dist/components/feedback/Progress/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { createProgressAnimation, createAnimation, easingFunctions, throttledAnimationUpdate, animationBatchManager, AnimationBatchManager, } from './animation';
+export { calculateCircleDimensions, calculateCircleProgress, calculateDashboardProgress, calculateLineWidth, getStatusColor, validatePercent, calculateAnimationDuration, calculateSegmentPositions, getLineCapStyle, calculateBorderRadius, generateId, formatProgressValue, calculateProgressStatus, } from './progress-calculator';

package/dist/components/feedback/Progress/utils/progress-calculator.d.ts

@@ -0,0 +1,75 @@
+import { ProgressGapPosition, ProgressLineCap } from '../Progress.types';
+export interface CircleDimensions {
+    size: number;
+    strokeWidth: number;
+    radius: number;
+    circumference: number;
+    centerX: number;
+    centerY: number;
+}
+export interface CircleProgressData {
+    strokeDasharray: number;
+    strokeDashoffset: number;
+    rotation: number;
+    transform: string;
+    transformOrigin: string;
+}
+/**
+ * 计算圆形进度条的尺寸
+ */
+export declare function calculateCircleDimensions(size: number, strokeWidth: number): CircleDimensions;
+/**
+ * 计算圆形进度条的进度数据
+ */
+export declare function calculateCircleProgress(dimensions: CircleDimensions, percent: number): CircleProgressData;
+/**
+ * 计算仪表盘进度条的进度数据
+ */
+export declare function calculateDashboardProgress(dimensions: CircleDimensions, percent: number, gapDegree: number, gapPosition?: ProgressGapPosition): CircleProgressData;
+/**
+ * 计算线型进度条的宽度
+ */
+export declare function calculateLineWidth(containerWidth: number, percent: number): number;
+/**
+ * 根据状态获取颜色
+ */
+export declare function getStatusColor(status: string, theme: Record<string, string>): string;
+/**
+ * 验证进度值
+ */
+export declare function validatePercent(percent: number): number;
+/**
+ * 计算动画时长
+ */
+export declare function calculateAnimationDuration(percentDiff: number, baseDuration?: number, maxDuration?: number): number;
+/**
+ * 计算分段进度的位置
+ */
+export declare function calculateSegmentPositions(segments: Array<{
+    color: string;
+    percent: number;
+}>, containerWidth: number): Array<{
+    color: string;
+    left: number;
+    width: number;
+}>;
+/**
+ * 计算线帽样式
+ */
+export declare function getLineCapStyle(lineCap: ProgressLineCap): string;
+/**
+ * 计算圆角半径
+ */
+export declare function calculateBorderRadius(strokeWidth: number, lineCap: ProgressLineCap): number;
+/**
+ * 生成唯一ID
+ */
+export declare function generateId(prefix?: string): string;
+/**
+ * 格式化进度值
+ */
+export declare function formatProgressValue(percent: number, formatter?: (percent: number) => React.ReactNode): React.ReactNode;
+/**
+ * 计算进度状态
+ */
+export declare function calculateProgressStatus(percent: number, currentStatus?: string): string;

package/dist/components/feedback/Result/Result.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ResultProps, ResultRef } from './Result.types';
+/** 结果组件 */
+export declare const ResultComponent: React.ForwardRefExoticComponent<ResultProps & React.RefAttributes<ResultRef>>;
+/** 导出结果组件 */
+export declare const Result: React.ForwardRefExoticComponent<ResultProps & React.RefAttributes<ResultRef>>;
+export default Result;

package/dist/components/feedback/Result/Result.styles.d.ts

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

package/dist/components/feedback/Result/Result.types.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+export type ResultStatus = 'success' | 'error' | 'info' | 'warning' | 'loading' | '404' | '403' | '500';
+export interface ResultProps {
+    /** 结果状态 */
+    status?: ResultStatus;
+    /** 标题文字 */
+    title?: React.ReactNode;
+    /** 副标题文字 */
+    subTitle?: React.ReactNode;
+    /** 自定义图标 */
+    icon?: React.ReactNode;
+    /** 操作区域 */
+    extra?: React.ReactNode;
+    /** 子组件 */
+    children?: React.ReactNode;
+    /** 结果尺寸 */
+    size?: ResultSize;
+    /** 自定义样式类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export interface ResultRef {
+    /** 获取当前状态 */
+    getStatus: () => ResultStatus;
+    /** 设置状态 */
+    setStatus: (_status: ResultStatus) => void;
+    /** 设置标题 */
+    setTitle: (_title: React.ReactNode) => void;
+    /** 设置副标题 */
+    setSubTitle: (_subTitle: React.ReactNode) => void;
+}
+export type ResultSize = 'small' | 'medium' | 'large';
+export interface ResultConfig {
+    /** 默认状态 */
+    defaultStatus?: ResultStatus;
+    /** 默认尺寸 */
+    defaultSize?: ResultSize;
+    /** 是否显示图标 */
+    showIcon?: boolean;
+    /** 图标尺寸 */
+    iconSize?: number;
+    /** 图标颜色 */
+    iconColor?: string;
+    /** 标题文字样式 */
+    titleStyle?: React.CSSProperties;
+    /** 副标题文字样式 */
+    subTitleStyle?: React.CSSProperties;
+    /** 内容区域样式 */
+    contentStyle?: React.CSSProperties;
+    /** 操作区域样式 */
+    extraStyle?: React.CSSProperties;
+}
+export interface ResultUtilsType {
+    /** 获取状态对应的颜色 */
+    getStatusColor: (_status: ResultStatus) => string;
+    /** 获取状态对应的图标 */
+    getStatusIcon: (_status: ResultStatus) => React.ReactNode;
+    /** 获取状态对应的默认标题 */
+    getStatusTitle: (_status: ResultStatus) => string;
+    /** 格式化结果数据 */
+    formatResultData: (_data: any) => any;
+    /** 验证状态是否有效 */
+    validateStatus: (_status: string) => boolean;
+}
+export declare const ResultUtils: ResultUtilsType;

package/dist/components/feedback/Result/index.d.ts

@@ -0,0 +1,3 @@
+export { Result } from './Result';
+export type { ResultProps, ResultRef, ResultStatus } from './Result.types';
+export { resultStyles } from './Result.styles';

package/dist/components/feedback/Toast/Toast.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ToastProps, ToastRef } from './Toast.types';
+/** Toast组件 */
+export declare const ToastComponent: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<ToastRef>>;
+/** 导出Toast组件 */
+export declare const Toast: any;
+export default ToastComponent;

package/dist/components/feedback/Toast/Toast.styles.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Toast 组件样式
+ */
+export declare const toastStyles: {
+    container: string;
+    content: string;
+    text: string;
+    icon: string;
+    success: string;
+    error: string;
+    warning: string;
+    info: string;
+    loading: string;
+};

package/dist/components/feedback/Toast/Toast.types.d.ts

@@ -0,0 +1,81 @@
+import { ReactNode } from 'react';
+import { BaseComponentProps } from '../../../types';
+/** Toast类型 */
+export type ToastType = 'info' | 'success' | 'warning' | 'error' | 'loading';
+/** Toast位置 */
+export type ToastPosition = 'top' | 'center' | 'bottom';
+/** Toast引用 */
+export interface ToastRef {
+    /** 获取元素引用 */
+    element: any | null;
+    /** 显示Toast */
+    show: () => void;
+    /** 隐藏Toast */
+    hide: () => void;
+    /** 获取显示状态 */
+    isVisible: () => boolean;
+    /** 设置消息 */
+    setMessage: (_message: ReactNode) => void;
+    /** 设置类型 */
+    setType: (_type: ToastType) => void;
+    /** 设置位置 */
+    setPosition: (_position: ToastPosition) => void;
+    /** 设置持续时间 */
+    setDuration: (_duration: number) => void;
+}
+/** Toast组件属性 */
+export interface ToastProps extends BaseComponentProps {
+    /** 是否显示 */
+    visible?: boolean;
+    /** 默认是否显示 */
+    defaultVisible?: boolean;
+    /** 消息内容 */
+    message?: ReactNode;
+    /** Toast类型 */
+    type?: ToastType;
+    /** 位置 */
+    position?: ToastPosition;
+    /** 持续时间（毫秒） */
+    duration?: number;
+    /** 是否显示关闭按钮 */
+    closable?: boolean;
+    /** 是否显示图标 */
+    showIcon?: boolean;
+    /** 自定义图标 */
+    icon?: ReactNode;
+    /** 动画效果 */
+    animated?: boolean;
+    /** 动画持续时间 */
+    animationDuration?: number;
+    /** 是否可关闭 */
+    closeable?: boolean;
+    /** 显示事件 */
+    onShow?: () => void;
+    /** 隐藏事件 */
+    onHide?: () => void;
+    /** 关闭事件 */
+    onClose?: () => void;
+    /** 点击事件 */
+    onClick?: (_event: React.MouseEvent) => void;
+}
+/** Toast方法配置 */
+export interface ToastMethodConfig {
+    /** 消息内容 */
+    message: ReactNode;
+    /** Toast类型 */
+    type?: ToastType;
+    /** 位置 */
+    position?: ToastPosition;
+    /** 持续时间（毫秒） */
+    duration?: number;
+    /** 是否显示关闭按钮 */
+    closable?: boolean;
+    /** 是否显示图标 */
+    showIcon?: boolean;
+    /** 自定义图标 */
+    icon?: ReactNode;
+    /** 关闭事件 */
+    onClose?: () => void;
+    /** 点击事件 */
+    onClick?: (_event: React.MouseEvent) => void;
+}

package/dist/components/feedback/Toast/index.d.ts

@@ -0,0 +1,3 @@
+export { Toast, ToastComponent } from './Toast';
+export type { ToastProps, ToastRef, ToastType, ToastPosition, ToastMethodConfig } from './Toast.types';
+export { toastStyles } from './Toast.styles';

package/dist/components/feedback/Tooltip/Tooltip.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TooltipProps, TooltipRef } from './Tooltip.types';
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<TooltipRef>>;
+export default Tooltip;

package/dist/components/feedback/Tooltip/Tooltip.examples.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Tooltip 使用示例
+ * 展示各种 Tooltip 的使用方式和功能特性
+ */
+export declare const TooltipExamples: () => import("react/jsx-runtime").JSX.Element;
+export default TooltipExamples;

package/dist/components/feedback/Tooltip/Tooltip.styles.d.ts

@@ -0,0 +1,78 @@
+import type { CSSProperties } from 'react';
+import type { TooltipPlacement } from './Tooltip.types';
+export declare const tooltipStyles: {
+    container: CSSProperties;
+    tooltip: CSSProperties;
+    arrow: CSSProperties;
+    placements: {
+        top: CSSProperties;
+        topArrow: CSSProperties;
+        bottom: CSSProperties;
+        bottomArrow: CSSProperties;
+        left: CSSProperties;
+        leftArrow: CSSProperties;
+        right: CSSProperties;
+        rightArrow: CSSProperties;
+        topLeft: CSSProperties;
+        topLeftArrow: CSSProperties;
+        topRight: CSSProperties;
+        topRightArrow: CSSProperties;
+        bottomLeft: CSSProperties;
+        bottomLeftArrow: CSSProperties;
+        bottomRight: CSSProperties;
+        bottomRightArrow: CSSProperties;
+        leftTop: CSSProperties;
+        leftTopArrow: CSSProperties;
+        leftBottom: CSSProperties;
+        leftBottomArrow: CSSProperties;
+        rightTop: CSSProperties;
+        rightTopArrow: CSSProperties;
+        rightBottom: CSSProperties;
+        rightBottomArrow: CSSProperties;
+    };
+    content: CSSProperties;
+    getTooltipStyle: (placement?: TooltipPlacement, color?: string, overlayStyle?: CSSProperties) => CSSProperties;
+    getArrowStyle: (placement?: TooltipPlacement, color?: string, arrow?: boolean) => CSSProperties;
+    getContainerStyle: (style?: CSSProperties) => CSSProperties;
+    getContentStyle: (color?: string) => CSSProperties;
+    themes: {
+        light: CSSProperties;
+        dark: CSSProperties;
+        primary: CSSProperties;
+        success: CSSProperties;
+        warning: CSSProperties;
+        error: CSSProperties;
+        info: CSSProperties;
+    };
+    getThemeStyle: (theme?: string) => CSSProperties;
+};
+export declare const getTooltipClasses: (placement: TooltipPlacement, visible: boolean) => string;
+export declare const getArrowClasses: (placement: TooltipPlacement, arrow: boolean) => string;
+export declare const tooltipCssClasses: {
+    container: string;
+    tooltip: string;
+    tooltipVisible: string;
+    tooltipHidden: string;
+    arrow: string;
+    content: string;
+    top: string;
+    bottom: string;
+    left: string;
+    right: string;
+    topLeft: string;
+    topRight: string;
+    bottomLeft: string;
+    bottomRight: string;
+    leftTop: string;
+    leftBottom: string;
+    rightTop: string;
+    rightBottom: string;
+    light: string;
+    dark: string;
+    primary: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+};
+export default tooltipStyles;