taro-uno-ui 1.0.1 → 1.0.2

package/src/components/display/Tag/Tag.types.ts

@@ -1,49 +0,0 @@
-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/src/components/display/Tag/index.ts

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

package/src/components/display/Timeline/Timeline.styles.ts

@@ -1,211 +0,0 @@
-import type { CSSProperties } from 'react';
-
-export const timelineStyles: Record<string, CSSProperties> = {
-  base: {
-    position: 'relative',
-    listStyle: 'none',
-    margin: 0,
-    padding: 0,
-  },
-
-  vertical: {
-    display: 'flex',
-    flexDirection: 'column',
-  },
-
-  horizontal: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    overflowX: 'auto',
-    paddingBottom: '16px',
-  },
-
-  reverse: {
-    flexDirection: 'column-reverse',
-  },
-
-  reverseHorizontal: {
-    flexDirection: 'row-reverse',
-  },
-
-  // 时间线项
-  item: {
-    position: 'relative',
-    paddingBottom: '20px',
-    minHeight: '48px',
-  },
-
-  itemHorizontal: {
-    paddingBottom: 0,
-    paddingRight: '20px',
-    minWidth: '200px',
-    flexShrink: 0,
-  },
-
-  itemLast: {
-    paddingBottom: 0,
-  },
-
-  itemLastHorizontal: {
-    paddingRight: 0,
-  },
-
-  // 时间线线条
-  itemLine: {
-    position: 'absolute',
-    left: '8px',
-    top: '20px',
-    width: '1px',
-    height: 'calc(100% - 20px)',
-    backgroundColor: '#f0f0f0',
-  },
-
-  itemLineHorizontal: {
-    position: 'absolute',
-    left: '20px',
-    top: '8px',
-    width: 'calc(100% - 20px)',
-    height: '1px',
-    backgroundColor: '#f0f0f0',
-  },
-
-  itemLineLast: {
-    display: 'none',
-  },
-
-  // 节点
-  itemDot: {
-    position: 'absolute',
-    left: '4px',
-    top: '4px',
-    width: '8px',
-    height: '8px',
-    borderRadius: '50%',
-    backgroundColor: '#d9d9d9',
-    border: '2px solid #ffffff',
-    boxShadow: '0 0 0 1px #d9d9d9',
-    zIndex: 1,
-  },
-
-  itemDotHorizontal: {
-    position: 'absolute',
-    left: '4px',
-    top: '4px',
-    width: '8px',
-    height: '8px',
-  },
-
-  // 节点颜色
-  dotDefault: {
-    backgroundColor: '#d9d9d9',
-    boxShadow: '0 0 0 1px #d9d9d9',
-  },
-
-  dotPrimary: {
-    backgroundColor: '#1890ff',
-    boxShadow: '0 0 0 1px #1890ff',
-  },
-
-  dotSuccess: {
-    backgroundColor: '#52c41a',
-    boxShadow: '0 0 0 1px #52c41a',
-  },
-
-  dotWarning: {
-    backgroundColor: '#faad14',
-    boxShadow: '0 0 0 1px #faad14',
-  },
-
-  dotDanger: {
-    backgroundColor: '#ff4d4f',
-    boxShadow: '0 0 0 1px #ff4d4f',
-  },
-
-  dotInfo: {
-    backgroundColor: '#13c2c2',
-    boxShadow: '0 0 0 1px #13c2c2',
-  },
-
-  // 自定义节点
-  customDot: {
-    position: 'absolute',
-    left: '0',
-    top: '0',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    minWidth: '16px',
-    minHeight: '16px',
-    backgroundColor: '#ffffff',
-    border: '1px solid #d9d9d9',
-    borderRadius: '50%',
-    zIndex: 1,
-  },
-
-  // 内容
-  itemContent: {
-    marginLeft: '24px',
-    paddingTop: '0',
-    wordBreak: 'break-word',
-  },
-
-  itemContentHorizontal: {
-    marginLeft: 0,
-    marginTop: '24px',
-    paddingTop: '0',
-  },
-
-  itemContentRight: {
-    marginLeft: 0,
-    marginRight: '24px',
-    textAlign: 'right',
-  },
-
-  // 标题和描述
-  itemTitle: {
-    fontSize: '16px',
-    fontWeight: '500',
-    color: '#262626',
-    marginBottom: '4px',
-    lineHeight: '1.5',
-  },
-
-  itemDescription: {
-    fontSize: '14px',
-    color: '#8c8c8c',
-    lineHeight: '1.5',
-    marginBottom: '8px',
-  },
-
-  itemTimestamp: {
-    fontSize: '12px',
-    color: '#8c8c8c',
-    marginTop: '4px',
-  },
-
-  // 交替模式
-  itemAlternateLeft: {
-    paddingRight: '50%',
-  },
-
-  itemAlternateRight: {
-    paddingLeft: '50%',
-    textAlign: 'right',
-  },
-
-  itemAlternateRightContent: {
-    marginLeft: 0,
-    marginRight: '24px',
-  },
-
-  itemAlternateRightDot: {
-    right: 'calc(50% - 8px)',
-    left: 'auto',
-  },
-
-  itemAlternateRightLine: {
-    right: 'calc(50% - 0.5px)',
-    left: 'auto',
-  },
-};

package/src/components/display/Timeline/Timeline.tsx

@@ -1,220 +0,0 @@
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
-import { View, Text } from '@tarojs/components';
-import { timelineStyles } from './Timeline.styles';
-import type { TimelineProps, TimelineRef, TimelineItemProps } from './Timeline.types';
-
-/** 时间线项组件 */
-export const TimelineItem: React.FC<
-  TimelineItemProps & {
-    mode?: 'left' | 'right' | 'alternate';
-    direction?: 'vertical' | 'horizontal';
-    showTimestamp?: boolean;
-    itemIndex?: number;
-  }
-> = ({
-  title,
-  children,
-  description,
-  timestamp,
-  color = 'default',
-  dot,
-  position,
-  isLast = false,
-  mode = 'left',
-  direction = 'vertical',
-  showTimestamp = false,
-  itemIndex = 0,
-  style,
-  className,
-}) => {
-  const isHorizontal = direction === 'horizontal';
-  const isAlternate = mode === 'alternate';
-  const isRightPosition = position === 'right' || (isAlternate && itemIndex % 2 === 1);
-
-  const getItemStyle = () => {
-    const baseStyle = {
-      ...timelineStyles['item'],
-      ...style,
-    };
-
-    if (isHorizontal) {
-      Object.assign(baseStyle, timelineStyles['itemHorizontal']);
-      if (isLast) {
-        Object.assign(baseStyle, timelineStyles['itemLastHorizontal']);
-      }
-    } else if (isLast) {
-      Object.assign(baseStyle, timelineStyles['itemLast']);
-    }
-
-    if (isAlternate && !isHorizontal) {
-      if (isRightPosition) {
-        Object.assign(baseStyle, timelineStyles['itemAlternateRight']);
-      } else {
-        Object.assign(baseStyle, timelineStyles['itemAlternateLeft']);
-      }
-    }
-
-    return baseStyle;
-  };
-
-  const getLineStyle = () => {
-    const baseStyle = isHorizontal ? { ...timelineStyles['itemLineHorizontal'] } : { ...timelineStyles['itemLine'] };
-
-    if (isLast) {
-      Object.assign(baseStyle, timelineStyles['itemLineLast']);
-    }
-
-    if (isAlternate && !isHorizontal && isRightPosition) {
-      Object.assign(baseStyle, timelineStyles['itemAlternateRightLine']);
-    }
-
-    return baseStyle;
-  };
-
-  const getDotStyle = () => {
-    const baseStyle = isHorizontal ? { ...timelineStyles['itemDotHorizontal'] } : { ...timelineStyles['itemDot'] };
-
-    if (!dot) {
-      const colorStyle =
-        timelineStyles[`dot${color.charAt(0).toUpperCase() + color.slice(1)}` as keyof typeof timelineStyles];
-      if (colorStyle) {
-        Object.assign(baseStyle, colorStyle);
-      } else {
-        // 自定义颜色
-        baseStyle.backgroundColor = color;
-        baseStyle.boxShadow = `0 0 0 1px ${color}`;
-      }
-    }
-
-    if (isAlternate && !isHorizontal && isRightPosition) {
-      Object.assign(baseStyle, timelineStyles['itemAlternateRightDot']);
-    }
-
-    return baseStyle;
-  };
-
-  const getContentStyle = () => {
-    const baseStyle = isHorizontal
-      ? { ...timelineStyles['itemContentHorizontal'] }
-      : { ...timelineStyles['itemContent'] };
-
-    if (isRightPosition && !isHorizontal) {
-      if (isAlternate) {
-        Object.assign(baseStyle, timelineStyles['itemAlternateRightContent']);
-      } else {
-        Object.assign(baseStyle, timelineStyles['itemContentRight']);
-      }
-    }
-
-    return baseStyle;
-  };
-
-  return (
-    <View style={getItemStyle()} className={className}>
-      {/* 连线 */}
-      <View style={getLineStyle()} />
-
-      {/* 节点 */}
-      {dot ? (
-        <View style={{ ...timelineStyles['customDot'], ...getDotStyle() }}>{dot}</View>
-      ) : (
-        <View style={getDotStyle()} />
-      )}
-
-      {/* 内容 */}
-      <View style={getContentStyle()}>
-        {title && <Text style={timelineStyles['itemTitle']}>{title}</Text>}
-        {description && <Text style={timelineStyles['itemDescription']}>{description}</Text>}
-        {children}
-        {showTimestamp && timestamp && <Text style={timelineStyles['itemTimestamp']}>{timestamp}</Text>}
-      </View>
-    </View>
-  );
-};
-
-/** 时间线组件 */
-export const TimelineComponent = forwardRef<TimelineRef, TimelineProps>((props, ref) => {
-  const {
-    items = [],
-    mode = 'left',
-    reverse = false,
-    showTimestamp = false,
-    direction = 'vertical',
-    style,
-    className,
-    children,
-    ...rest
-  } = props;
-
-  const elementRef = useRef<any>(null);
-
-  useImperativeHandle(ref, () => ({
-    element: elementRef.current,
-    getMode: () => mode,
-    getDirection: () => direction,
-    isReverse: () => reverse,
-    getItemCount: () => items.length,
-  }));
-
-  const getTimelineStyle = () => {
-    const baseStyle = {
-      ...timelineStyles['base'],
-      ...timelineStyles[direction],
-      ...style,
-    };
-
-    if (reverse) {
-      if (direction === 'horizontal') {
-        Object.assign(baseStyle, timelineStyles['reverseHorizontal']);
-      } else {
-        Object.assign(baseStyle, timelineStyles['reverse']);
-      }
-    }
-
-    return baseStyle;
-  };
-
-  const renderItems = () => {
-    if (children) {
-      return children;
-    }
-
-    const itemsToRender = reverse ? [...items].reverse() : items;
-
-    return itemsToRender.map((item, index) => {
-      const originalIndex = reverse ? items.length - 1 - index : index;
-      const isLast = index === itemsToRender.length - 1;
-
-      return (
-        <TimelineItem
-          key={originalIndex}
-          {...item}
-          mode={mode}
-          direction={direction}
-          showTimestamp={showTimestamp}
-          itemIndex={originalIndex}
-          isLast={isLast}
-        />
-      );
-    });
-  };
-
-  return (
-    <View ref={elementRef} style={getTimelineStyle()} className={className} {...rest}>
-      {renderItems()}
-    </View>
-  );
-});
-
-TimelineComponent.displayName = 'Timeline';
-
-// 创建复合组件类型
-export interface TimelineCompoundComponent
-  extends React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<TimelineRef>> {
-  Item: typeof TimelineItem;
-}
-
-export const Timeline = TimelineComponent as TimelineCompoundComponent;
-Timeline.Item = TimelineItem;
-
-export default Timeline;

package/src/components/display/Timeline/Timeline.types.ts

@@ -1,56 +0,0 @@
-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/src/components/display/Timeline/index.ts

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

package/src/components/display/index.tsx

@@ -1,147 +0,0 @@
-/**
- * Taro-Uno 展示组件库
- * 提供用于展示内容的 UI 组件，包括头像、徽章、卡片、列表等
- */
-
-// 导出 Avatar 组件
-export { Avatar } from './Avatar';
-export type { AvatarProps, AvatarRef, AvatarSize, AvatarShape } from './Avatar/Avatar.types';
-export { avatarStyles } from './Avatar/Avatar.styles';
-
-// 导出 Badge 组件
-export { Badge } from './Badge';
-export type { BadgeProps, BadgeRef } from './Badge/Badge.types';
-
-// 导出 Card 组件
-export { Card } from './Card';
-export type { CardProps, CardRef } from './Card/Card.types';
-export { CardStyles as cardStyles } from './Card/Card.styles';
-
-// 导出 List 组件
-export { List } from './List';
-export type { ListProps, ListRef, ListItemProps } from './List/List.types';
-export { ListStyles as listStyles } from './List/List.styles';
-
-// 导出 Rate 组件
-export { Rate } from './Rate';
-export type { RateProps, RateRef, RateSize, RateCharacter, StarState } from './Rate/Rate.types';
-export { rateStyles } from './Rate/Rate.styles';
-
-// 导出 Table 组件
-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';
-
-// 导出 Tag 组件
-export { Tag } from './Tag';
-export type { TagProps, TagRef } from './Tag/Tag.types';
-export { tagStyles } from './Tag/Tag.styles';
-
-// 导出 Timeline 组件
-export { Timeline } from './Timeline';
-export type { TimelineProps, TimelineRef, TimelineItemProps } from './Timeline/Timeline.types';
-export { timelineStyles } from './Timeline/Timeline.styles';
-
-// 导出 Calendar 组件
-export { Calendar } from './Calendar';
-export type { CalendarProps, CalendarRef, CalendarDate, CalendarEvent } from './Calendar/Calendar.types';
-export { calendarStyles } from './Calendar/Calendar.styles';
-
-// 导出 Carousel 组件
-export { Carousel } from './Carousel';
-export type { CarouselProps, CarouselRef } from './Carousel/Carousel.types';
-export { carouselStyles } from './Carousel/Carousel.styles';
-
-// 展示组件工具函数
-export const DisplayUtils = {
-  /**
-   * 格式化卡片数据
-   */
-  formatCardData: (data: any) => {
-    return {
-      ...data,
-      formattedDate: new Date().toLocaleDateString(),
-    };
-  },
-
-  /**
-   * 格式化表格数据
-   */
-  formatTableData: (data: any[], columns: any[]) => {
-    return data.map((item) => {
-      const formattedItem: any = {};
-      columns.forEach((column) => {
-        formattedItem[column.key] = item[column.key];
-      });
-      return formattedItem;
-    });
-  },
-
-  /**
-   * 格式化列表数据
-   */
-  formatListData: (data: any[]) => {
-    return data.map((item, index) => ({
-      ...item,
-      id: item.id || index,
-      key: item.key || index,
-    }));
-  },
-
-  /**
-   * 格式化标签数据
-   */
-  formatTagData: (tags: string[], colorMap?: Record<string, string>) => {
-    return tags.map((tag, index) => ({
-      key: index,
-      label: tag,
-      color: colorMap?.[tag] || 'default',
-    }));
-  },
-
-  /**
-   * 格式化时间线数据
-   */
-  formatTimelineData: (items: any[]) => {
-    return items.map((item, index) => ({
-      ...item,
-      key: item.key || index,
-      timestamp: item.timestamp || new Date().toISOString(),
-    }));
-  },
-
-  /**
-   * 格式化日历事件
-   */
-  formatCalendarEvents: (events: any[]) => {
-    return events.map((event, index) => ({
-      ...event,
-      id: event.id || `event-${index}`,
-      startTime: event.startTime || new Date().toISOString(),
-      type: event.type || 'default',
-    }));
-  },
-
-  /**
-   * 格式化轮播数据
-   */
-  formatCarouselData: (items: any[]) => {
-    return items.map((item, index) => ({
-      ...item,
-      key: item.key || index,
-      id: item.id || `slide-${index}`,
-    }));
-  },
-};