taro-uno-ui 0.9.0 → 1.0.0

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

@@ -0,0 +1,47 @@
+import type { CSSProperties, ReactNode } from 'react';
+export interface TagProps {
+    /** 标签内容 */
+    children?: ReactNode;
+    /** 标签颜色 */
+    color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | string;
+    /** 标签大小 */
+    size?: 'small' | 'medium' | 'large';
+    /** 标签变体 */
+    variant?: 'solid' | 'outline' | 'light';
+    /** 是否可关闭 */
+    closable?: boolean;
+    /** 是否可选择 */
+    checkable?: boolean;
+    /** 是否选中（可选择模式下） */
+    checked?: boolean;
+    /** 标签图标 */
+    icon?: ReactNode;
+    /** 点击事件 */
+    onClick?: (_event: any) => void;
+    /** 关闭事件 */
+    onClose?: (_event: any) => void;
+    /** 选择变化事件 */
+    onCheckedChange?: (_checked: boolean) => void;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 自定义类名 */
+    className?: string;
+}
+export interface TagRef {
+    /** DOM 元素 */
+    element: any;
+    /** 获取标签颜色 */
+    getColor: () => string;
+    /** 获取标签大小 */
+    getSize: () => 'small' | 'medium' | 'large';
+    /** 检查是否可关闭 */
+    isClosable: () => boolean;
+    /** 检查是否可选择 */
+    isCheckable: () => boolean;
+    /** 检查是否选中 */
+    isChecked: () => boolean;
+    /** 设置选中状态 */
+    setChecked: (_checked: boolean) => void;
+    /** 关闭标签 */
+    close: () => void;
+}

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

@@ -0,0 +1,3 @@
+export { Tag } from './Tag';
+export { tagStyles } from './Tag.styles';
+export type { TagProps, TagRef } from './Tag.types';

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { TimelineProps, TimelineRef, TimelineItemProps } from './Timeline.types';
+/** 时间线项组件 */
+export declare const TimelineItem: React.FC<TimelineItemProps & {
+    mode?: 'left' | 'right' | 'alternate';
+    direction?: 'vertical' | 'horizontal';
+    showTimestamp?: boolean;
+    itemIndex?: number;
+}>;
+/** 时间线组件 */
+export declare const TimelineComponent: React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<TimelineRef>>;
+export interface TimelineCompoundComponent extends React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<TimelineRef>> {
+    Item: typeof TimelineItem;
+}
+export declare const Timeline: TimelineCompoundComponent;
+export default Timeline;

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

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

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

@@ -0,0 +1,53 @@
+import type { CSSProperties, ReactNode } from 'react';
+export interface TimelineItemProps {
+    /** 时间线项标题 */
+    title?: ReactNode;
+    /** 时间线项内容 */
+    children?: ReactNode;
+    /** 时间线项描述 */
+    description?: ReactNode;
+    /** 时间戳 */
+    timestamp?: string;
+    /** 节点颜色 */
+    color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | string;
+    /** 自定义节点 */
+    dot?: ReactNode;
+    /** 节点位置 */
+    position?: 'left' | 'right';
+    /** 是否为最后一项 */
+    isLast?: boolean;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 自定义类名 */
+    className?: string;
+}
+export interface TimelineProps {
+    /** 时间线数据源 */
+    items?: TimelineItemProps[];
+    /** 时间线模式 */
+    mode?: 'left' | 'right' | 'alternate';
+    /** 是否反向显示 */
+    reverse?: boolean;
+    /** 是否显示时间戳 */
+    showTimestamp?: boolean;
+    /** 时间线方向 */
+    direction?: 'vertical' | 'horizontal';
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 自定义类名 */
+    className?: string;
+    /** 子节点 */
+    children?: ReactNode;
+}
+export interface TimelineRef {
+    /** DOM 元素 */
+    element: any;
+    /** 获取时间线模式 */
+    getMode: () => 'left' | 'right' | 'alternate';
+    /** 获取时间线方向 */
+    getDirection: () => 'vertical' | 'horizontal';
+    /** 检查是否反向 */
+    isReverse: () => boolean;
+    /** 获取项目数量 */
+    getItemCount: () => number;
+}

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

@@ -0,0 +1,3 @@
+export { Timeline, TimelineItem } from './Timeline';
+export { timelineStyles } from './Timeline.styles';
+export type { TimelineProps, TimelineRef, TimelineItemProps } from './Timeline.types';

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

@@ -0,0 +1,67 @@
+/**
+ * Taro-Uno 展示组件库
+ * 提供用于展示内容的 UI 组件，包括头像、徽章、卡片、列表等
+ */
+export { Avatar } from './Avatar';
+export type { AvatarProps, AvatarRef, AvatarSize, AvatarShape } from './Avatar/Avatar.types';
+export { avatarStyles } from './Avatar/Avatar.styles';
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeRef } from './Badge/Badge.types';
+export { Card } from './Card';
+export type { CardProps, CardRef } from './Card/Card.types';
+export { CardStyles as cardStyles } from './Card/Card.styles';
+export { List } from './List';
+export type { ListProps, ListRef, ListItemProps } from './List/List.types';
+export { ListStyles as listStyles } from './List/List.styles';
+export { Rate } from './Rate';
+export type { RateProps, RateRef, RateSize, RateCharacter, StarState } from './Rate/Rate.types';
+export { rateStyles } from './Rate/Rate.styles';
+export { default as Table } from './Table';
+export type { TableProps, TableRef, TableColumn, TableSortOrder, TableFilterConfig, TableAlign, TableSize, TableBorder, TableRowSelection, TablePagination, TableExpandable, } from './Table/Table.types';
+export { tableStyles } from './Table/Table.styles';
+export { Tag } from './Tag';
+export type { TagProps, TagRef } from './Tag/Tag.types';
+export { tagStyles } from './Tag/Tag.styles';
+export { Timeline } from './Timeline';
+export type { TimelineProps, TimelineRef, TimelineItemProps } from './Timeline/Timeline.types';
+export { timelineStyles } from './Timeline/Timeline.styles';
+export { Calendar } from './Calendar';
+export type { CalendarProps, CalendarRef, CalendarDate, CalendarEvent } from './Calendar/Calendar.types';
+export { calendarStyles } from './Calendar/Calendar.styles';
+export { Carousel } from './Carousel';
+export type { CarouselProps, CarouselRef } from './Carousel/Carousel.types';
+export { carouselStyles } from './Carousel/Carousel.styles';
+export declare const DisplayUtils: {
+    /**
+     * 格式化卡片数据
+     */
+    formatCardData: (data: any) => any;
+    /**
+     * 格式化表格数据
+     */
+    formatTableData: (data: any[], columns: any[]) => any[];
+    /**
+     * 格式化列表数据
+     */
+    formatListData: (data: any[]) => any[];
+    /**
+     * 格式化标签数据
+     */
+    formatTagData: (tags: string[], colorMap?: Record<string, string>) => {
+        key: number;
+        label: string;
+        color: string;
+    }[];
+    /**
+     * 格式化时间线数据
+     */
+    formatTimelineData: (items: any[]) => any[];
+    /**
+     * 格式化日历事件
+     */
+    formatCalendarEvents: (events: any[]) => any[];
+    /**
+     * 格式化轮播数据
+     */
+    formatCarouselData: (items: any[]) => any[];
+};

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

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

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

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

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

@@ -0,0 +1,29 @@
+import React from 'react';
+/** 加载类型 */
+export type LoadingType = 'spinner' | 'dots' | 'pulse' | 'bars';
+/** 加载尺寸 */
+export type LoadingSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';
+export interface LoadingProps {
+    /** 加载类型 */
+    type?: LoadingType;
+    /** 尺寸 */
+    size?: LoadingSize;
+    /** 颜色 */
+    color?: string;
+    /** 文本内容 */
+    text?: string;
+    /** 延迟显示时间 */
+    delay?: number;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export interface LoadingRef {
+    /** 获取元素 */
+    getElement: () => HTMLElement | null;
+    /** 显示加载 */
+    show: () => void;
+    /** 隐藏加载 */
+    hide: () => void;
+}

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

@@ -0,0 +1,4 @@
+import LoadingComponent from './Loading';
+export { LoadingComponent as Loading };
+export type { LoadingProps, LoadingRef } from './Loading.types';
+export default LoadingComponent;

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

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

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

@@ -0,0 +1,34 @@
+/**
+ * Message 组件样式
+ */
+export declare const messageStyles: {
+    container: string;
+    content: string;
+    text: string;
+    icon: string;
+    close: string;
+    success: string;
+    error: string;
+    warning: string;
+    info: string;
+    textSuccess: string;
+    textError: string;
+    textWarning: string;
+    textInfo: string;
+    base: string;
+    type: {
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+    };
+    iconType: {
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+    };
+    iconText: string;
+    title: string;
+    closeText: string;
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+/** 消息类型 */
+export type MessageType = 'success' | 'error' | 'warning' | 'info';
+/** 消息位置 */
+export type MessagePosition = 'top' | 'bottom' | 'center' | 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft';
+export interface MessageProps {
+    /** 消息类型 */
+    type?: MessageType;
+    /** 消息标题 */
+    title?: React.ReactNode;
+    /** 消息内容 */
+    content?: React.ReactNode;
+    /** 自定义图标 */
+    icon?: React.ReactNode;
+    /** 是否可关闭 */
+    closable?: boolean;
+    /** 显示时长（毫秒） */
+    duration?: number;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 关闭回调 */
+    onClose?: () => void;
+}
+export interface MessageRef {
+    /** 显示消息 */
+    show: () => void;
+    /** 隐藏消息 */
+    hide: () => void;
+    /** 更新消息内容 */
+    update: (_props: Partial<MessageProps>) => void;
+}

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

@@ -0,0 +1,4 @@
+import MessageComponent from './Message';
+export { MessageComponent as Message };
+export type { MessageProps, MessageRef } from './Message.types';
+export default MessageComponent;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ModalProps, ModalRef, ModalStatic } from './Modal.types';
+/** Modal组件 */
+export declare const ModalComponent: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<ModalRef>>;
+/** 导出Modal组件 */
+declare const Modal: ModalStatic;
+export { Modal };
+export default ModalComponent;

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

@@ -0,0 +1,18 @@
+/**
+ * Modal 组件样式
+ */
+export declare const modalStyles: {
+    container: string;
+    content: string;
+    header: string;
+    title: string;
+    close: string;
+    body: string;
+    text: string;
+    footer: string;
+    button: string;
+    buttonText: string;
+    primary: string;
+    secondary: string;
+    danger: string;
+};

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

@@ -0,0 +1,143 @@
+import { ReactNode } from 'react';
+import { Size } from '../../../types';
+import { BaseComponentProps as StandardBaseComponentProps } from '../../../types/component-props';
+/** Modal静态方法接口 */
+export interface ModalStatic {
+    confirm: (config: ModalProps) => void;
+    info: (config: ModalProps) => void;
+    success: (config: ModalProps) => void;
+    error: (config: ModalProps) => void;
+    warning: (config: ModalProps) => void;
+}
+/** Modal尺寸 */
+export type ModalSize = Size | 'small' | 'medium' | 'large' | 'fullscreen';
+/** Modal位置 */
+export type ModalPosition = 'center' | 'top' | 'bottom' | 'left' | 'right';
+/** Modal按钮类型 */
+export type ModalButtonType = 'default' | 'primary' | 'danger' | 'text';
+/** Modal按钮接口 */
+export interface ModalButton {
+    /** 按钮文本 */
+    text: string;
+    /** 按钮类型 */
+    type?: ModalButtonType;
+    /** 按钮键值 */
+    key?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否加载中 */
+    loading?: boolean;
+    /** 点击事件 */
+    onClick?: () => void | Promise<void>;
+}
+/** Modal引用 */
+export interface ModalRef {
+    /** 获取元素引用 */
+    element: any | null;
+    /** 显示Modal */
+    show: () => void;
+    /** 隐藏Modal */
+    hide: () => void;
+    /** 切换显示状态 */
+    toggle: () => void;
+    /** 获取显示状态 */
+    isVisible: () => boolean;
+    /** 设置标题 */
+    setTitle: (_title: ReactNode) => void;
+    /** 设置内容 */
+    setContent: (_content: ReactNode) => void;
+    /** 设置按钮 */
+    setButtons: (_buttons: ModalButton[]) => void;
+    /** 添加按钮 */
+    addButton: (_button: ModalButton) => void;
+    /** 移除按钮 */
+    removeButton: (_key: string) => void;
+    /** 聚焦 */
+    focus: () => void;
+}
+/** Modal组件属性 */
+export interface ModalProps extends StandardBaseComponentProps {
+    /** 是否显示 */
+    visible?: boolean;
+    /** 默认是否显示 */
+    defaultVisible?: boolean;
+    /** 标题 */
+    title?: ReactNode;
+    /** 内容 */
+    content?: ReactNode;
+    /** 按钮列表 */
+    buttons?: ModalButton[];
+    /** 是否显示关闭按钮 */
+    closable?: boolean;
+    /** 是否显示遮罩 */
+    mask?: boolean;
+    /** 点击遮罩是否关闭 */
+    maskClosable?: boolean;
+    /** 是否显示键盘 */
+    keyboard?: boolean;
+    /** 是否居中 */
+    centered?: boolean;
+    /** 尺寸 */
+    size?: ModalSize;
+    /** 位置 */
+    position?: ModalPosition;
+    /** 宽度 */
+    width?: number | string;
+    /** 高度 */
+    height?: number | string;
+    /** 是否全屏 */
+    fullscreen?: boolean;
+    /** 是否动画效果 */
+    animated?: boolean;
+    /** 动画持续时间 */
+    animationDuration?: number;
+    /** 销毁时是否关闭 */
+    destroyOnClose?: boolean;
+    /** 强制渲染 */
+    forceRender?: boolean;
+    /** 获取容器 */
+    getContainer?: () => HTMLElement;
+    /** 点击遮罩事件 */
+    onMaskClick?: (_event: React.MouseEvent) => void;
+    /** 显示事件 */
+    onShow?: () => void;
+    /** 隐藏事件 */
+    onHide?: () => void;
+    /** 确定事件 */
+    onOk?: () => void | Promise<void>;
+    /** 取消事件 */
+    onCancel?: () => void;
+    /** 按钮点击事件 */
+    onButtonClick?: (_button: ModalButton) => void;
+    /** 关闭事件 */
+    onClose?: () => void;
+}
+/** Modal确认配置 */
+export interface ModalConfirmConfig {
+    /** 标题 */
+    title?: ReactNode;
+    /** 内容 */
+    content?: ReactNode;
+    /** 确定按钮文本 */
+    okText?: string;
+    /** 取消按钮文本 */
+    cancelText?: string;
+    /** 确定按钮类型 */
+    okType?: ModalButtonType;
+    /** 确定按钮是否禁用 */
+    okButtonProps?: ModalButton;
+    /** 取消按钮是否禁用 */
+    cancelButtonProps?: ModalButton;
+    /** 图标类型 */
+    icon?: ReactNode;
+    /** 宽度 */
+    width?: number | string;
+    /** 居中 */
+    centered?: boolean;
+    /** 确定事件 */
+    onOk?: () => void | Promise<void>;
+    /** 取消事件 */
+    onCancel?: () => void;
+    /** 关闭事件 */
+    onClose?: () => void;
+}

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

@@ -0,0 +1,3 @@
+export { Modal, ModalComponent } from './Modal';
+export type { ModalProps, ModalRef, ModalSize, ModalPosition, ModalButtonType, ModalButton, ModalConfirmConfig, } from './Modal.types';
+export { modalStyles } from './Modal.styles';

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

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

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

@@ -0,0 +1,88 @@
+import type { CSSProperties } from 'react';
+import type { NotificationType, NotificationPlacement, NotificationAnimation, NotificationStyleConfig } from './Notification.types';
+/** 通知样式类名 */
+export declare const notificationStyles: {
+    /** 基础类名 */
+    readonly base: "taro-uno-notification";
+    /** 图标类名 */
+    readonly icon: "taro-uno-notification-icon";
+    /** 图标文本类名 */
+    readonly iconText: "taro-uno-notification-icon-text";
+    /** 内容类名 */
+    readonly content: "taro-uno-notification-content";
+    /** 标题类名 */
+    readonly title: "taro-uno-notification-title";
+    /** 文本类名 */
+    readonly text: "taro-uno-notification-text";
+    /** 关闭按钮类名 */
+    readonly close: "taro-uno-notification-close";
+    /** 关闭悬停类名 */
+    readonly closeHover: "taro-uno-notification-close-hover";
+    /** 关闭图标类名 */
+    readonly closeIcon: "taro-uno-notification-close-icon";
+    /** 动画类名 */
+    readonly animation: {
+        readonly enter: "taro-uno-notification-enter";
+        readonly enterActive: "taro-uno-notification-enter-active";
+        readonly exit: "taro-uno-notification-exit";
+        readonly exitActive: "taro-uno-notification-exit-active";
+    };
+};
+/** 通知样式配置 */
+export declare const notificationStyleConfig: NotificationStyleConfig;
+/** 通知样式工具函数 */
+export declare const notificationStyleHelpers: {
+    /** 获取基础样式 */
+    getBaseStyle: (placement?: NotificationPlacement, customStyle?: CSSProperties) => CSSProperties;
+    /** 获取类型样式 */
+    getTypeStyle: (type?: NotificationType) => CSSProperties;
+    /** 获取关闭按钮样式 */
+    getCloseStyle: (hovered?: boolean) => CSSProperties;
+    /** 获取动画样式 */
+    getAnimationStyle: (animation: NotificationAnimation | undefined, visible: boolean) => CSSProperties;
+    /** 获取容器样式 */
+    getContainerStyle: (options: {
+        theme?: any;
+        isMobile?: boolean;
+    }) => CSSProperties;
+    /** 获取位置容器样式 */
+    getPlacementStyle: (placement: NotificationPlacement, options: {
+        theme?: any;
+        isMobile?: boolean;
+    }) => {
+        container: CSSProperties;
+        items: CSSProperties;
+    };
+    /** 获取堆叠样式 */
+    getStackStyle: (index: number, baseOffset?: number) => CSSProperties;
+    /** 获取拖拽样式 */
+    getDragStyle: (isDragging: boolean, dragOffset: number) => CSSProperties;
+};
+/** 旧的样式对象，保持向后兼容 */
+export declare const notificationStylesLegacy: NotificationStyleConfig;
+/** 兼容性导出 */
+export declare const notificationStylesCompat: {
+    /** 获取基础样式（兼容旧API） */
+    getBaseStyle: (placement?: string, style?: CSSProperties) => CSSProperties;
+    /** 获取类型样式（兼容旧API） */
+    getTypeStyle: (type?: string) => CSSProperties;
+    /** 获取关闭按钮样式（兼容旧API） */
+    getCloseStyle: (hovered?: boolean) => CSSProperties;
+    /** 获取动画样式 */
+    getAnimationStyle: (animation: NotificationAnimation | undefined, visible: boolean) => CSSProperties;
+};
+/** 导出所有样式相关的工具函数 */
+/** 通知样式系统 */
+export declare const notificationStyleSystem: NotificationStyleConfig;
+/** 响应式断点 */
+export declare const responsiveBreakpoints: {
+    readonly mobile: 768;
+    readonly tablet: 1024;
+    readonly desktop: 1200;
+};
+/** 生成响应式样式 */
+export declare const generateResponsiveStyle: (style: React.CSSProperties, breakpoint?: keyof typeof responsiveBreakpoints) => React.CSSProperties;
+/** 生成主题样式 */
+export declare const generateThemeStyle: (baseStyle: React.CSSProperties, theme?: any) => React.CSSProperties;
+/** 计算动态样式 */
+export declare const calculateDynamicStyles: (base: React.CSSProperties, overrides: React.CSSProperties) => React.CSSProperties;