taro-uno-ui 1.0.0 → 1.0.2

package/src/components/basic/Text/Text.types.ts

@@ -1,329 +0,0 @@
-import type { ReactNode, HTMLAttributes } from 'react';
-import React from 'react';
-/** 文本尺寸 */
-export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
-
-/** 文本权重 */
-export type TextWeight =
-  | 'thin'
-  | 'extralight'
-  | 'light'
-  | 'normal'
-  | 'medium'
-  | 'semibold'
-  | 'bold'
-  | 'extrabold'
-  | 'black';
-
-/** 文本对齐 */
-export type TextAlign = 'left' | 'center' | 'right' | 'justify' | 'start' | 'end';
-
-/** 文本装饰 */
-export type TextDecoration = 'none' | 'underline' | 'overline' | 'line-through' | 'blink';
-
-/** 文本转换 */
-export type TextTransform = 'none' | 'capitalize' | 'uppercase' | 'lowercase';
-
-/** 文本溢出处理 */
-export type TextOverflow = 'clip' | 'ellipsis' | 'break-word' | 'break-all' | 'truncate';
-
-/** 文本方向 */
-export type TextDirection = 'ltr' | 'rtl';
-
-/** 文本样式 */
-export type TextStyle = 'normal' | 'italic' | 'oblique';
-
-/** 文本变体 */
-export type TextVariant =
-  | 'normal'
-  | 'small-caps'
-  | 'all-small-caps'
-  | 'petite-caps'
-  | 'all-petite-caps'
-  | 'unicase'
-  | 'titling-caps'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'body1'
-  | 'body2'
-  | 'body'
-  | 'caption'
-  | 'overline'
-  | 'subtitle1'
-  | 'subtitle2';
-
-/** 文本间距 */
-export type LetterSpacing = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | number;
-
-/** 行高 */
-export type LineHeight = 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose' | number;
-
-/** 文本颜色类型 */
-export type TextColor =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'warning'
-  | 'error'
-  | 'info'
-  | 'disabled'
-  | 'inherit'
-  | 'current'
-  | string;
-
-/** 文本状态 */
-export type TextStatus = 'normal' | 'active' | 'disabled' | 'loading';
-
-/** 文本类型 */
-export type TextType = 'body' | 'heading' | 'caption' | 'label' | 'link' | 'code' | 'quote' | 'helper';
-
-/** 文本原生属性类型 */
-export type TextNativeProps = HTMLAttributes<HTMLParagraphElement>;
-
-/** 文本组件属性接口 */
-export interface TextProps extends Omit<TextNativeProps, 'size' | 'color' | 'weight'> {
-  /** 文本内容 */
-  children?: ReactNode;
-  /** 文本尺寸 */
-  size?: TextSize;
-  /** 文本权重 */
-  weight?: TextWeight;
-  /** 文本颜色 */
-  color?: TextColor;
-  /** 文本对齐 */
-  align?: TextAlign;
-  /** 文本装饰 */
-  decoration?: TextDecoration;
-  /** 文本转换 */
-  transform?: TextTransform;
-  /** 文本溢出处理 */
-  overflow?: TextOverflow;
-  /** 文本方向 */
-  direction?: TextDirection;
-  /** 文本样式 */
-  fontStyle?: TextStyle;
-  /** 文本变体 */
-  variant?: TextVariant;
-  /** 字母间距 */
-  letterSpacing?: LetterSpacing;
-  /** 行高 */
-  lineHeight?: LineHeight;
-  /** 文本状态 */
-  status?: TextStatus;
-  /** 文本类型 */
-  type?: TextType;
-  /** 是否可点击 */
-  clickable?: boolean;
-  /** 是否显示加载状态 */
-  loading?: boolean;
-  disabled?: boolean;
-  /** 是否块级显示 */
-  block?: boolean;
-  /** 是否内联块级显示 */
-  inlineBlock?: boolean;
-  /** 是否可选中 */
-  selectable?: boolean;
-  /** 是否可复制 */
-  copyable?: boolean;
-  /** 复制时的回调函数 */
-  onCopy?: () => void;
-  /** 自定义样式类名 */
-  className?: string;
-  /** 点击事件处理函数 */
-  onClick?: (_event: React.MouseEvent) => void;
-  /** 自定义样式 */
-  style?: React.CSSProperties;
-  /** 最大行数 */
-  maxLines?: number;
-  /** 是否启用动画 */
-  animated?: boolean;
-  /** 动画持续时间 */
-  animationDuration?: number;
-  /** 是否启用无障碍访问 */
-  accessible?: boolean;
-  /** 无障碍标签 */
-  accessibilityLabel?: string;
-  /** 无障碍角色 */
-  accessibilityRole?: string;
-  /** 无障碍状态 */
-  accessibilityState?: {
-    disabled?: boolean;
-    selected?: boolean;
-    busy?: boolean;
-    expanded?: boolean;
-  };
-  /** 文本链接地址 */
-  href?: string;
-  /** 链接打开方式 */
-  target?: '_blank' | '_self' | '_parent' | '_top';
-  /** 是否显示下划线 */
-  underline?: boolean;
-  /** 是否删除线 */
-  strikethrough?: boolean;
-  /** 是否高亮 */
-  highlight?: boolean;
-  /** 高亮颜色 */
-  highlightColor?: string;
-  /** 是否显示省略号 */
-  ellipsis?: boolean;
-  /** 是否自动换行 */
-  wrap?: boolean;
-  /** 是否保持单词完整 */
-  breakWord?: boolean;
-  /** 文本阴影 */
-  textShadow?: string;
-  /** 文本轮廓 */
-  textOutline?: string;
-  /** 文本渐变 */
-  gradient?: {
-    start: string;
-    end: string;
-    direction?: 'to right' | 'to left' | 'to bottom' | 'to top' | 'to bottom right' | 'to top left';
-  };
-  /** 自定义字体 */
-  fontFamily?: string | string[];
-  /** 文本间距 */
-  wordSpacing?: number | string;
-  /** 文本缩进 */
-  textIndent?: number | string;
-  /** 白空格处理 */
-  whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces';
-  /** 垂直对齐 */
-  verticalAlign?: 'baseline' | 'sub' | 'super' | 'top' | 'text-top' | 'middle' | 'bottom' | 'text-bottom';
-  /** 文本方向组合 */
-  writingMode?: 'horizontal-tb' | 'vertical-rl' | 'vertical-lr';
-  /** 文本渲染优化 */
-  textRendering?: 'auto' | 'optimizeSpeed' | 'optimizeLegibility' | 'geometricPrecision';
-  ariaLabel?: string;
-  // React native props
-  numberOfLines?: number;
-  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
-  // Accessibility
-  role?: string;
-  // 排除可能与Taro组件冲突的React属性
-  dangerouslySetInnerHTML?: { __html: string };
-  suppressContentEditableWarning?: boolean;
-  suppressHydrationWarning?: boolean;
-  // Native props
-  // ...React.HTMLAttributes<HTMLElement>;
-}
-
-/** 文本组件引用类型 */
-export type TextRef = {
-  /** 文本元素 */
-  element: HTMLParagraphElement | HTMLSpanElement | null;
-  /** 获取文本内容 */
-  getText: () => string;
-  /** 设置文本内容 */
-  setText: (_text: string) => void;
-  /** 复制文本 */
-  copy: () => Promise<void>;
-  /** 选择文本 */
-  select: () => void;
-  /** 设置禁用状态 */
-  setDisabled: (_disabled: boolean) => void;
-  /** 设置加载状态 */
-  setLoading: (_loading: boolean) => void;
-  /** 获取文本状态 */
-  getStatus: () => TextStatus;
-  /** 获取文本尺寸 */
-  getSize: () => TextSize;
-  /** 获取文本颜色 */
-  getColor: () => string;
-  /** 设置文本颜色 */
-  setColor: (_color: string) => void;
-  /** 设置文本尺寸 */
-  setSize: (_size: TextSize) => void;
-  /** 设置文本权重 */
-  setWeight: (_weight: TextWeight) => void;
-  /** 滚动到视图 */
-  scrollIntoView: (options?: ScrollIntoViewOptions) => void;
-};
-
-/** 文本工具函数接口 */
-export interface TextUtils {
-  /** 获取文本样式类名 */
-  getTextClassName: (_props: Partial<TextProps>) => string;
-  /** 获取文本样式对象 */
-  getTextStyle: (_props: Partial<TextProps>) => React.CSSProperties;
-  /** 获取文本尺寸映射 */
-  getSizeMap: () => Record<TextSize, { fontSize: number; lineHeight: number }>;
-  /** 获取文本权重映射 */
-  getWeightMap: () => Record<TextWeight, number>;
-  /** 获取文本颜色映射 */
-  getColorMap: () => Record<TextColor, string>;
-  /** 验证文本属性 */
-  validateTextProps: (_props: TextProps) => boolean;
-  /** 格式化文本尺寸 */
-  formatTextSize: (_size: TextSize) => string;
-  /** 格式化文本权重 */
-  formatTextWeight: (_weight: TextWeight) => string;
-  /** 格式化文本颜色 */
-  formatTextColor: (_color: TextColor) => string;
-  /** 截断文本 */
-  truncateText: (_text: string, maxLength: number, suffix?: string) => string;
-  /** 高亮文本 */
-  highlightText: (_text: string, highlight: string, highlightColor?: string) => ReactNode;
-  /** 格式化数字 */
-  formatNumber: (_num: number, options?: Intl.NumberFormatOptions) => string;
-  /** 格式化日期 */
-  formatDate: (_date: Date | string | number, format?: string) => string;
-  /** 格式化货币 */
-  formatCurrency: (_amount: number, currency?: string, locale?: string) => string;
-  /** 计算文本长度 */
-  calculateTextLength: (_text: string, options?: { fontSize: number; fontFamily: string }) => number;
-  /** 检测文本语言 */
-  detectLanguage: (_text: string) => string;
-  /** 清理文本 */
-  sanitizeText: (_text: string) => string;
-  /** 转换HTML实体 */
-  escapeHtml: (_text: string) => string;
-  /** 反转换HTML实体 */
-  unescapeHtml: (_text: string) => string;
-}
-
-/** 打字机效果属性 */
-export interface TypewriterProps {
-  /** 要显示的文本 */
-  text: string;
-  /** 打字速度（毫秒） */
-  speed?: number;
-  /** 删除速度（毫秒） */
-  deleteSpeed?: number;
-  /** 是否循环 */
-  loop?: boolean;
-  /** 延迟开始时间（毫秒） */
-  delay?: number;
-  /** 删除前等待时间（毫秒） */
-  waitTime?: number;
-  /** 是否显示光标 */
-  showCursor?: boolean;
-  /** 光标字符 */
-  cursorChar?: string;
-  /** 完成回调 */
-  onComplete?: () => void;
-  /** 开始回调 */
-  onStart?: () => void;
-  /** 删除回调 */
-  onDelete?: () => void;
-}
-
-/** 文本渐变属性 */
-export interface TextGradientProps {
-  /** 渐变开始颜色 */
-  start: string;
-  /** 渐变结束颜色 */
-  end: string;
-  /** 渐变方向 */
-  direction?: 'to right' | 'to left' | 'to bottom' | 'to top' | 'to bottom right' | 'to top left';
-  /** 子元素 */
-  children: ReactNode;
-  /** 自定义样式 */
-  style?: React.CSSProperties;
-  /** 自定义类名 */
-  className?: string;
-}

package/src/components/basic/Text/index.tsx

@@ -1,27 +0,0 @@
-export { Text } from './Text';
-export type {
-  TextProps,
-  TextRef,
-  TextUtils,
-  TextSize,
-  TextWeight,
-  TextAlign,
-  TextDecoration,
-  TextTransform,
-  TextOverflow,
-  TextDirection,
-  TextStyle,
-  TextVariant,
-  LetterSpacing,
-  LineHeight,
-  TextColor,
-  TextStatus,
-  TextType,
-  TextNativeProps,
-  TypewriterProps,
-  TextGradientProps,
-} from './Text.types';
-export { textStyles } from './Text.styles';
-
-/** 文本组件默认导出 */
-export default Text;

package/src/components/basic/Typography/Typography.styles.ts

@@ -1,347 +0,0 @@
-import { CSSProperties } from 'react';
-import { TypographyProps, TypographySize, TypographyColor, TypographyWeight } from './Typography.types';
-
-/**
- * Typography 样式配置
- */
-export const typographyStyles = {
-  /**
-   * 基础样式
-   */
-  base: {
-    display: 'block',
-    margin: 0,
-    padding: 0,
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-    lineHeight: 1.5,
-    color: '#1f2937',
-  } as CSSProperties,
-
-  /**
-   * 标题样式
-   */
-  headings: {
-    h1: {
-      fontSize: '2.25rem',
-      fontWeight: 700,
-      lineHeight: 1.2,
-      marginBottom: '0.5rem',
-    } as CSSProperties,
-    h2: {
-      fontSize: '1.875rem',
-      fontWeight: 600,
-      lineHeight: 1.3,
-      marginBottom: '0.5rem',
-    } as CSSProperties,
-    h3: {
-      fontSize: '1.5rem',
-      fontWeight: 600,
-      lineHeight: 1.3,
-      marginBottom: '0.5rem',
-    } as CSSProperties,
-    h4: {
-      fontSize: '1.25rem',
-      fontWeight: 600,
-      lineHeight: 1.4,
-      marginBottom: '0.5rem',
-    } as CSSProperties,
-    h5: {
-      fontSize: '1.125rem',
-      fontWeight: 500,
-      lineHeight: 1.4,
-      marginBottom: '0.5rem',
-    } as CSSProperties,
-    h6: {
-      fontSize: '1rem',
-      fontWeight: 500,
-      lineHeight: 1.4,
-      marginBottom: '0.5rem',
-    } as CSSProperties,
-  },
-
-  /**
-   * 段落样式
-   */
-  paragraph: {
-    fontSize: '1rem',
-    lineHeight: 1.6,
-    marginBottom: '1rem',
-    color: '#374151',
-  } as CSSProperties,
-
-  /**
-   * 文本样式
-   */
-  text: {
-    display: 'inline',
-    fontSize: '1rem',
-    lineHeight: 1.5,
-    color: '#374151',
-  } as CSSProperties,
-
-  /**
-   * 链接样式
-   */
-  link: {
-    color: '#3b82f6',
-    textDecoration: 'none',
-    cursor: 'pointer',
-    transition: 'color 0.2s ease',
-    '&:hover': {
-      color: '#2563eb',
-      textDecoration: 'underline',
-    },
-    '&:active': {
-      color: '#1d4ed8',
-    },
-  } as CSSProperties,
-
-  /**
-   * 尺寸映射
-   */
-  sizes: {
-    xs: { fontSize: '0.75rem', lineHeight: 1.25 },
-    sm: { fontSize: '0.875rem', lineHeight: 1.375 },
-    md: { fontSize: '1rem', lineHeight: 1.5 },
-    lg: { fontSize: '1.125rem', lineHeight: 1.625 },
-    xl: { fontSize: '1.25rem', lineHeight: 1.75 },
-    xxl: { fontSize: '1.5rem', lineHeight: 1.875 },
-  } as Record<TypographySize, CSSProperties>,
-
-  /**
-   * 颜色映射
-   */
-  colors: {
-    primary: { color: '#3b82f6' },
-    secondary: { color: '#6b7280' },
-    success: { color: '#10b981' },
-    warning: { color: '#f59e0b' },
-    danger: { color: '#ef4444' },
-    inherit: { color: 'inherit' },
-  } as Record<TypographyColor, CSSProperties>,
-
-  /**
-   * 权重映射
-   */
-  weights: {
-    normal: { fontWeight: 400 },
-    medium: { fontWeight: 500 },
-    semibold: { fontWeight: 600 },
-    bold: { fontWeight: 700 },
-  } as Record<TypographyWeight, CSSProperties>,
-
-  /**
-   * 类型映射
-   */
-  types: {
-    primary: { color: '#3b82f6' },
-    secondary: { color: '#6b7280' },
-    success: { color: '#10b981' },
-    warning: { color: '#f59e0b' },
-    danger: { color: '#ef4444' },
-  } as Record<string, CSSProperties>,
-
-  /**
-   * 状态样式
-   */
-  states: {
-    disabled: {
-      color: '#9ca3af',
-      cursor: 'not-allowed',
-    } as CSSProperties,
-    copyable: {
-      cursor: 'pointer',
-      position: 'relative',
-      '&:hover': {
-        backgroundColor: '#f3f4f6',
-      },
-    } as CSSProperties,
-    editable: {
-      cursor: 'text',
-      '&:hover': {
-        backgroundColor: '#f9fafb',
-      },
-    } as CSSProperties,
-  },
-
-  /**
-   * 装饰样式
-   */
-  decorations: {
-    delete: {
-      textDecoration: 'line-through',
-      color: '#6b7280',
-    } as CSSProperties,
-    underline: {
-      textDecoration: 'underline',
-    } as CSSProperties,
-    code: {
-      fontFamily: '"Fira Code", "Courier New", monospace',
-      backgroundColor: '#f3f4f6',
-      padding: '0.125rem 0.25rem',
-      borderRadius: '0.25rem',
-      fontSize: '0.875em',
-      border: '1px solid #e5e7eb',
-    } as CSSProperties,
-    keyboard: {
-      fontFamily: '"Fira Code", "Courier New", monospace',
-      backgroundColor: '#ffffff',
-      border: '1px solid #d1d5db',
-      borderBottomWidth: '2px',
-      borderRadius: '0.25rem',
-      padding: '0.125rem 0.375rem',
-      fontSize: '0.875em',
-      boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
-    } as CSSProperties,
-  },
-
-  /**
-   * 对齐样式
-   */
-  alignments: {
-    left: { textAlign: 'left' },
-    center: { textAlign: 'center' },
-    right: { textAlign: 'right' },
-    justify: { textAlign: 'justify' },
-  } as Record<string, CSSProperties>,
-
-  /**
-   * 省略号样式
-   */
-  ellipsis: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-  } as CSSProperties,
-
-  /**
-   * 多行省略号样式
-   */
-  multiLineEllipsis: (maxRows: number) =>
-    ({
-      display: '-webkit-box',
-      WebkitBoxOrient: 'vertical',
-      WebkitLineClamp: maxRows,
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    }) as CSSProperties,
-};
-
-/**
- * 计算 Typography 样式
- */
-export const calculateTypographyStyles = (props: TypographyProps): CSSProperties => {
-  const {
-    variant = 'p',
-    type,
-    align,
-    disabled,
-    copyable,
-    editable,
-    delete: isDelete,
-    underline,
-    code,
-    keyboard,
-    strong,
-    italic,
-    style,
-    size,
-    color,
-    weight,
-    ellipsis,
-    maxRows,
-    wrap,
-  } = props;
-
-  const styles: CSSProperties = { ...typographyStyles['base'] };
-
-  // 根据变体设置样式
-  if (variant && variant in typographyStyles['headings']) {
-    Object.assign(styles, typographyStyles['headings'][variant as keyof (typeof typographyStyles)['headings']]);
-  } else if (variant === 'p') {
-    Object.assign(styles, typographyStyles['paragraph']);
-  } else if (variant === 'span') {
-    Object.assign(styles, typographyStyles['text']);
-  }
-
-  // 类型样式
-  if (type && type in typographyStyles['types']) {
-    Object.assign(styles, typographyStyles['types'][type]);
-  }
-
-  // 对齐样式
-  if (align && align in typographyStyles['alignments']) {
-    Object.assign(styles, typographyStyles['alignments'][align]);
-  }
-
-  // 状态样式
-  if (disabled) {
-    Object.assign(styles, typographyStyles['states'].disabled);
-  }
-  if (copyable) {
-    Object.assign(styles, typographyStyles['states'].copyable);
-  }
-  if (editable) {
-    Object.assign(styles, typographyStyles['states'].editable);
-  }
-
-  // 装饰样式
-  if (isDelete) {
-    Object.assign(styles, typographyStyles['decorations'].delete);
-  }
-  if (underline) {
-    Object.assign(styles, typographyStyles['decorations'].underline);
-  }
-  if (code) {
-    Object.assign(styles, typographyStyles['decorations'].code);
-  }
-  if (keyboard) {
-    Object.assign(styles, typographyStyles['decorations'].keyboard);
-  }
-
-  // 权重样式
-  if (strong) {
-    Object.assign(styles, typographyStyles['weights'].bold);
-  }
-  if (italic) {
-    styles.fontStyle = 'italic';
-  }
-
-  // 尺寸样式
-  if (size && size in typographyStyles['sizes']) {
-    Object.assign(styles, typographyStyles['sizes'][size as TypographySize]);
-  }
-
-  // 颜色样式
-  if (color && color in typographyStyles['colors']) {
-    Object.assign(styles, typographyStyles['colors'][color as TypographyColor]);
-  }
-
-  // 权重样式
-  if (weight && weight in typographyStyles['weights']) {
-    Object.assign(styles, typographyStyles['weights'][weight]);
-  }
-
-  // 省略号样式
-  if (ellipsis) {
-    if (maxRows && maxRows > 1) {
-      Object.assign(styles, typographyStyles['multiLineEllipsis'](maxRows));
-    } else {
-      Object.assign(styles, typographyStyles['ellipsis']);
-    }
-  }
-
-  // 换行样式
-  if (wrap === false) {
-    Object.assign(styles, {
-      whiteSpace: 'nowrap',
-    });
-  }
-
-  // 合并自定义样式
-  if (style) {
-    Object.assign(styles, style);
-  }
-
-  return styles;
-};