taro-uno-ui 0.9.0-beta → 1.0.0

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

@@ -0,0 +1,279 @@
+import React from 'react';
+import { ITouchEvent } from '@tarojs/components';
+/** 通知类型 */
+export type NotificationType = 'success' | 'error' | 'warning' | 'info';
+/** 通知位置 */
+export type NotificationPlacement = 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft' | 'top' | 'bottom';
+/** 通知动画类型 */
+export type NotificationAnimation = 'fade' | 'slide' | 'scale' | 'bounce' | 'none';
+/** 通知项接口 */
+export interface NotificationItem {
+    /** 通知唯一标识 */
+    key: string;
+    /** 通知类型 */
+    type?: NotificationType;
+    /** 通知标题 */
+    title?: React.ReactNode;
+    /** 通知内容 */
+    content?: React.ReactNode;
+    /** 自定义图标 */
+    icon?: React.ReactNode;
+    /** 是否可关闭 */
+    closable?: boolean;
+    /** 显示时长（毫秒） */
+    duration?: number;
+    /** 通知位置 */
+    placement?: NotificationPlacement;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 关闭回调 */
+    onClose?: (_key: string) => void;
+    /** 点击回调 */
+    onClick?: () => void;
+    /** 显示关闭按钮 */
+    showClose?: boolean;
+    /** 显示图标 */
+    showIcon?: boolean;
+    /** 动画类型 */
+    animation?: NotificationAnimation;
+    /** 创建时间 */
+    createdAt: number;
+}
+/** 通知组件属性 */
+export interface NotificationProps {
+    /** 通知类型 */
+    type?: NotificationType;
+    /** 通知标题 */
+    title?: React.ReactNode;
+    /** 通知内容 */
+    content?: React.ReactNode;
+    /** 自定义图标 */
+    icon?: React.ReactNode;
+    /** 是否可关闭 */
+    closable?: boolean;
+    /** 显示时长（毫秒） */
+    duration?: number;
+    /** 通知位置 */
+    placement?: NotificationPlacement;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 关闭回调 */
+    onClose?: () => void;
+    /** 点击回调 */
+    onClick?: (event?: ITouchEvent) => void;
+    /** 显示关闭按钮 */
+    showClose?: boolean;
+    /** 显示图标 */
+    showIcon?: boolean;
+    /** 动画类型 */
+    animation?: NotificationAnimation;
+    /** 是否自动关闭 */
+    autoClose?: boolean;
+    /** 是否可拖拽 */
+    draggable?: boolean;
+    /** 拖拽阈值 */
+    dragThreshold?: number;
+    /** 堆叠索引 */
+    stackIndex?: number;
+    /** 悬停状态 */
+    hovered?: boolean;
+    /** 是否正在关闭 */
+    isClosing?: boolean;
+}
+/** 通知组件引用 */
+export interface NotificationRef {
+    /** 显示通知 */
+    show: () => boolean;
+    /** 隐藏通知 */
+    hide: () => boolean;
+    /** 更新通知内容 */
+    update: (_props: Partial<NotificationProps>) => boolean;
+    /** 暂停自动关闭 */
+    pauseProgress?: () => void;
+    /** 恢复自动关闭 */
+    resumeProgress?: () => void;
+    /** 获取通知状态 */
+    getState: () => {
+        visible: boolean;
+        paused: boolean;
+        closing: boolean;
+    };
+}
+/** 通知管理器属性 */
+export interface NotificationManagerProps {
+    /** 最大通知数量 */
+    maxCount?: number;
+    /** 默认位置 */
+    defaultPlacement?: NotificationPlacement;
+    /** 默认时长 */
+    defaultDuration?: number;
+    /** 默认动画 */
+    defaultAnimation?: NotificationAnimation;
+    /** 是否堆叠 */
+    stack?: boolean;
+    /** 堆叠最大数量 */
+    stackMaxCount?: number;
+    /** 允许拖拽 */
+    allowDrag?: boolean;
+    /** 拖拽阈值 */
+    dragThreshold?: number;
+    /** 显示分组 */
+    showGroup?: boolean;
+    /** 分组间隔 */
+    groupInterval?: number;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 自定义类名 */
+    className?: string;
+    /** 容器样式 */
+    containerStyle?: React.CSSProperties;
+    /** 容器类名 */
+    containerClassName?: string;
+    /** 进入回调 */
+    onEnter?: (_key: string) => void;
+    /** 离开回调 */
+    onLeave?: (_key: string) => void;
+    /** 全部关闭回调 */
+    onAllClose?: () => void;
+    /** 通知配置更新回调 */
+    onUpdate?: (_key: string, config: Partial<NotificationItem>) => void;
+}
+/** 通知管理器引用 */
+export interface NotificationManagerRef {
+    /** 显示通知 */
+    open: (_config: Omit<NotificationItem, 'key' | 'createdAt'>) => string;
+    /** 显示成功通知 */
+    success: (_config: Omit<NotificationItem, 'key' | 'createdAt' | 'type'>) => string;
+    /** 显示信息通知 */
+    info: (_config: Omit<NotificationItem, 'key' | 'createdAt' | 'type'>) => string;
+    /** 显示警告通知 */
+    warning: (_config: Omit<NotificationItem, 'key' | 'createdAt' | 'type'>) => string;
+    /** 显示错误通知 */
+    error: (_config: Omit<NotificationItem, 'key' | 'createdAt' | 'type'>) => string;
+    /** 关闭指定通知 */
+    close: (_key: string) => void;
+    /** 关闭所有通知 */
+    destroyAll: () => void;
+    /** 更新通知 */
+    update: (_key: string, config: Partial<NotificationItem>) => void;
+    /** 获取所有通知 */
+    getNotifications: () => NotificationItem[];
+    /** 获取通知数量 */
+    getCount: () => number;
+    /** 设置最大数量 */
+    setMaxCount: (_count: number) => void;
+    /** 设置默认位置 */
+    setDefaultPlacement: (_placement: NotificationPlacement) => void;
+    /** 设置默认时长 */
+    setDefaultDuration: (_duration: number) => void;
+    /** 暂停所有通知自动关闭 */
+    pauseAll: () => void;
+    /** 恢复所有通知自动关闭 */
+    resumeAll: () => void;
+    /** 清空历史记录 */
+    clearHistory: () => void;
+    /** 获取通知历史 */
+    getHistory: () => NotificationItem[];
+}
+/** 通知样式配置 */
+export interface NotificationStyleConfig {
+    /** 基础样式 */
+    base: React.CSSProperties;
+    /** 类型样式 */
+    type: Record<NotificationType, React.CSSProperties>;
+    /** 位置样式 */
+    placement: Record<NotificationPlacement, React.CSSProperties>;
+    /** 图标样式 */
+    icon: React.CSSProperties;
+    /** 内容样式 */
+    content: React.CSSProperties;
+    /** 标题样式 */
+    title: React.CSSProperties;
+    /** 文本样式 */
+    text: React.CSSProperties;
+    /** 关闭按钮样式 */
+    close: React.CSSProperties;
+    /** 悬停样式 */
+    closeHover: React.CSSProperties;
+    /** 关闭图标样式 */
+    closeIcon: React.CSSProperties;
+    /** 动画样式 */
+    animation: {
+        enter: React.CSSProperties;
+        enterActive: React.CSSProperties;
+        exit: React.CSSProperties;
+        exitActive: React.CSSProperties;
+    };
+}
+/** 通知配置 */
+export type NotificationConfig = Partial<NotificationItem>;
+/** 通知样式集合 */
+export type NotificationStyles = {
+    [key in NotificationType]: React.CSSProperties;
+};
+/** 通知位置样式 */
+export type NotificationPlacementStyles = {
+    [key in NotificationPlacement]: React.CSSProperties;
+};
+/** 通知动画样式 */
+export type NotificationAnimationStyles = {
+    enter: React.CSSProperties;
+    enterActive: React.CSSProperties;
+    exit: React.CSSProperties;
+    exitActive: React.CSSProperties;
+};
+/** 通知工具函数 */
+export interface NotificationUtilsType {
+    /** 生成唯一键 */
+    generateKey: () => string;
+    /** 排序通知 */
+    sortNotifications: (_notifications: NotificationItem[]) => NotificationItem[];
+    /** 计算堆叠偏移 */
+    calculateStackOffset: (_index: number, baseOffset: number) => number;
+    /** 格式化持续时间 */
+    formatDuration: (_duration: number) => string;
+    /** 验证通知配置 */
+    validateConfig: (_config: Partial<NotificationItem>) => {
+        valid: boolean;
+        errors: string[];
+    };
+}
+/** 默认通知配置 */
+export declare const DEFAULT_NOTIFICATION_CONFIG: {
+    /** 默认最大数量 */
+    readonly defaultMaxCount: 5;
+    /** 默认位置 */
+    readonly defaultPlacement: NotificationPlacement;
+    /** 默认时长 */
+    readonly defaultDuration: 4500;
+    /** 默认动画 */
+    readonly defaultAnimation: NotificationAnimation;
+    /** 默认堆叠 */
+    readonly defaultStack: true;
+    /** 默认堆叠最大数量 */
+    readonly defaultStackMaxCount: 3;
+    /** 默认允许拖拽 */
+    readonly defaultAllowDrag: false;
+    /** 默认拖拽阈值 */
+    readonly defaultDragThreshold: 100;
+    /** 默认显示分组 */
+    readonly defaultShowGroup: false;
+    /** 默认分组间隔 */
+    readonly defaultGroupInterval: 1000;
+    /** 最大历史记录数量 */
+    readonly maxHistoryCount: 50;
+    /** 默认自动关闭 */
+    readonly defaultAutoClose: true;
+    /** 默认显示关闭按钮 */
+    readonly defaultShowClose: true;
+    /** 默认显示图标 */
+    readonly defaultShowIcon: true;
+    /** 默认可关闭 */
+    readonly defaultClosable: true;
+};
+/** 通知工具类 */
+export declare const NotificationUtils: NotificationUtilsType;

package/dist/components/feedback/Notification/NotificationManager.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { NotificationManagerProps, NotificationManagerRef } from './Notification.types';
+export declare const NotificationManager: React.ForwardRefExoticComponent<NotificationManagerProps & React.RefAttributes<NotificationManagerRef>>;
+export default NotificationManager;

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

@@ -0,0 +1,25 @@
+export { Notification } from './Notification';
+export { default as NotificationManager } from './NotificationManager';
+declare class NotificationSingleton {
+    open: (_config: any) => string;
+    success: (config: any) => string;
+    info: (config: any) => string;
+    warning: (config: any) => string;
+    error: (config: any) => string;
+    close: (_key: string) => void;
+    destroyAll: () => void;
+    update: (_key: string, _config: any) => void;
+    getNotifications: () => never[];
+    getCount: () => number;
+    setMaxCount: (_count: number) => void;
+    setDefaultPlacement: (_placement: any) => void;
+    setDefaultDuration: (_duration: number) => void;
+    pauseAll: () => void;
+    resumeAll: () => void;
+    clearHistory: () => void;
+    getHistory: () => never[];
+}
+export declare const notification: NotificationSingleton;
+export type { NotificationProps, NotificationRef, NotificationManagerProps, NotificationPlacement, } from './Notification.types';
+export { notificationStyles } from './Notification.styles';
+export default Notification;

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

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

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

@@ -0,0 +1,261 @@
+import type { CSSProperties } from 'react';
+import type { ProgressType, ProgressSize, ProgressStyleProps, ProgressStyles as ProgressStylesType, ProgressGradient } from './Progress.types';
+export declare const progressStyles: ProgressStylesType;
+export declare const getLineStyle: (props: ProgressStyleProps) => {
+    outer: {
+        height: number;
+        backgroundColor: string;
+        borderRadius: number;
+        overflow: "hidden";
+        position: "relative";
+        boxSizing: "border-box";
+    };
+    inner: {
+        height: string;
+        backgroundColor: string;
+        borderRadius: number;
+        transition: string;
+        position: "relative";
+        boxSizing: "border-box";
+    };
+};
+export declare const getCircleStyle: (props: ProgressStyleProps) => {
+    outer: {
+        width: number;
+        height: number;
+        position: "relative";
+    };
+    trail: {
+        fill: string;
+        stroke: string;
+        strokeWidth: number;
+        strokeLinecap: import("./Progress.types").ProgressLineCap;
+        cx: number;
+        cy: number;
+        r: number;
+    };
+    path: {
+        fill: string;
+        stroke: string;
+        strokeWidth: number;
+        strokeLinecap: import("./Progress.types").ProgressLineCap;
+        cx: number;
+        cy: number;
+        r: number;
+        strokeDasharray: number;
+        strokeDashoffset: number;
+        transform: string;
+        transformOrigin: string;
+        transition: string;
+    };
+    inner: {
+        position: "absolute";
+        top: string;
+        left: string;
+        transform: string;
+        fontSize: string;
+        color: string;
+        fontWeight: number;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+    };
+};
+export declare const getDashboardStyle: (props: ProgressStyleProps) => {
+    outer: {
+        width: number;
+        height: number;
+        position: "relative";
+    };
+    trail: {
+        fill: string;
+        stroke: string;
+        strokeWidth: number;
+        strokeLinecap: import("./Progress.types").ProgressLineCap;
+        cx: number;
+        cy: number;
+        r: number;
+        strokeDasharray: number;
+        strokeDashoffset: number;
+        transform: string;
+        transformOrigin: string;
+    };
+    path: {
+        fill: string;
+        stroke: string;
+        strokeWidth: number;
+        strokeLinecap: import("./Progress.types").ProgressLineCap;
+        cx: number;
+        cy: number;
+        r: number;
+        strokeDasharray: number;
+        strokeDashoffset: number;
+        transform: string;
+        transformOrigin: string;
+        transition: string;
+    };
+    inner: {
+        position: "absolute";
+        top: string;
+        left: string;
+        transform: string;
+        fontSize: string;
+        color: string;
+        fontWeight: number;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+    };
+};
+export declare const getInfoStyle: (size?: ProgressSize, customStyle?: CSSProperties) => CSSProperties;
+export declare const getContainerStyle: (type?: ProgressType, customStyle?: CSSProperties) => CSSProperties;
+export declare const getSvgStyle: (size: number) => CSSProperties;
+export declare const generateGradientStyle: (gradient: ProgressGradient | undefined, _size: number) => string;
+export declare const ProgressStyles: {
+    getLineStyle: (props: ProgressStyleProps) => {
+        outer: {
+            height: number;
+            backgroundColor: string;
+            borderRadius: number;
+            overflow: "hidden";
+            position: "relative";
+            boxSizing: "border-box";
+        };
+        inner: {
+            height: string;
+            backgroundColor: string;
+            borderRadius: number;
+            transition: string;
+            position: "relative";
+            boxSizing: "border-box";
+        };
+    };
+    getCircleStyle: (props: ProgressStyleProps) => {
+        outer: {
+            width: number;
+            height: number;
+            position: "relative";
+        };
+        trail: {
+            fill: string;
+            stroke: string;
+            strokeWidth: number;
+            strokeLinecap: import("./Progress.types").ProgressLineCap;
+            cx: number;
+            cy: number;
+            r: number;
+        };
+        path: {
+            fill: string;
+            stroke: string;
+            strokeWidth: number;
+            strokeLinecap: import("./Progress.types").ProgressLineCap;
+            cx: number;
+            cy: number;
+            r: number;
+            strokeDasharray: number;
+            strokeDashoffset: number;
+            transform: string;
+            transformOrigin: string;
+            transition: string;
+        };
+        inner: {
+            position: "absolute";
+            top: string;
+            left: string;
+            transform: string;
+            fontSize: string;
+            color: string;
+            fontWeight: number;
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+        };
+    };
+    getDashboardStyle: (props: ProgressStyleProps) => {
+        outer: {
+            width: number;
+            height: number;
+            position: "relative";
+        };
+        trail: {
+            fill: string;
+            stroke: string;
+            strokeWidth: number;
+            strokeLinecap: import("./Progress.types").ProgressLineCap;
+            cx: number;
+            cy: number;
+            r: number;
+            strokeDasharray: number;
+            strokeDashoffset: number;
+            transform: string;
+            transformOrigin: string;
+        };
+        path: {
+            fill: string;
+            stroke: string;
+            strokeWidth: number;
+            strokeLinecap: import("./Progress.types").ProgressLineCap;
+            cx: number;
+            cy: number;
+            r: number;
+            strokeDasharray: number;
+            strokeDashoffset: number;
+            transform: string;
+            transformOrigin: string;
+            transition: string;
+        };
+        inner: {
+            position: "absolute";
+            top: string;
+            left: string;
+            transform: string;
+            fontSize: string;
+            color: string;
+            fontWeight: number;
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+        };
+    };
+    getInfoStyle: (size?: ProgressSize, customStyle?: CSSProperties) => CSSProperties;
+    getContainerStyle: (type?: ProgressType, customStyle?: CSSProperties) => CSSProperties;
+    getSvgStyle: (size: number) => CSSProperties;
+    generateGradientStyle: (gradient: ProgressGradient | undefined, _size: number) => string;
+};
+export declare const ProgressKeyframes: {
+    spin: {
+        '0%': {
+            transform: string;
+        };
+        '100%': {
+            transform: string;
+        };
+    };
+    pulse: {
+        '0%': {
+            opacity: number;
+        };
+        '50%': {
+            opacity: number;
+        };
+        '100%': {
+            opacity: number;
+        };
+    };
+};
+export declare const ProgressMediaQueries: {
+    mobile: string;
+    tablet: string;
+    desktop: string;
+};
+export declare const ProgressCSSVariables: {
+    primaryColor: string;
+    successColor: string;
+    errorColor: string;
+    warningColor: string;
+    backgroundColor: string;
+    borderRadius: string;
+    strokeWidth: string;
+};
+export default progressStyles;

package/dist/components/feedback/Progress/Progress.test.simple.d.ts

@@ -0,0 +1,2 @@
+declare const TestProgress: () => import("react/jsx-runtime").JSX.Element;
+export default TestProgress;