taro-uno-ui 1.0.1 → 1.0.2

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

@@ -1,500 +0,0 @@
-import { PlatformDetector } from '../../../utils';
-import type { TextProps, TextSize, TextWeight, TextColor, TextStatus } from './Text.types';
-
-/** 样式工具类 */
-export class TextStyles {
-  /** 获取平台前缀 */
-  private static getPlatformPrefix(): string {
-    const platformValue = PlatformDetector.getPlatform();
-    // For test environment, default to h5
-    if (process.env['NODE_ENV'] === 'test' || platformValue === 'unknown') {
-      return 'taro-uno-h5-text';
-    }
-    return `taro-uno-${platformValue}-text`;
-  }
-
-  /** 尺寸映射 */
-  static readonly SIZE_MAP: Record<TextSize, { fontSize: number; _lineHeight: number }> = {
-    xs: { fontSize: 20, _lineHeight: 1.25 },
-    sm: { fontSize: 24, _lineHeight: 1.375 },
-    md: { fontSize: 28, _lineHeight: 1.5 },
-    lg: { fontSize: 32, _lineHeight: 1.625 },
-    xl: { fontSize: 36, _lineHeight: 1.75 },
-    '2xl': { fontSize: 40, _lineHeight: 1.875 },
-    '3xl': { fontSize: 48, _lineHeight: 2 },
-    '4xl': { fontSize: 56, _lineHeight: 2.125 },
-    '5xl': { fontSize: 64, _lineHeight: 2.25 },
-    '6xl': { fontSize: 72, _lineHeight: 2.375 },
-    '7xl': { fontSize: 80, _lineHeight: 2.5 },
-    '8xl': { fontSize: 96, _lineHeight: 2.625 },
-    '9xl': { fontSize: 112, _lineHeight: 2.75 },
-  };
-
-  /** 权重映射 */
-  static readonly WEIGHT_MAP: Record<TextWeight, number> = {
-    thin: 100,
-    extralight: 200,
-    light: 300,
-    normal: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700,
-    extrabold: 800,
-    black: 900,
-  };
-
-  /** 颜色映射 */
-  static readonly COLOR_MAP: Record<TextColor, string> = {
-    primary: '#0ea5e9',
-    secondary: '#6b7280',
-    success: '#22c55e',
-    warning: '#f59e0b',
-    error: '#ef4444',
-    info: '#3b82f6',
-    _disabled: '#9ca3af',
-    inherit: 'inherit',
-    current: 'currentColor',
-  };
-
-  /** 状态映射 */
-  static readonly STATUS_MAP: Record<TextStatus, { opacity: number; cursor: string; pointerEvents: string }> = {
-    normal: { opacity: 1, cursor: 'default', pointerEvents: 'auto' },
-    active: { opacity: 0.8, cursor: 'pointer', pointerEvents: 'auto' },
-    disabled: { opacity: 0.5, cursor: 'not-allowed', pointerEvents: 'none' },
-    loading: { opacity: 0.7, cursor: 'not-allowed', pointerEvents: 'none' },
-  };
-
-  /** 行高映射 */
-  static readonly LINE_HEIGHT_MAP: Record<string, number> = {
-    none: 1,
-    tight: 1.25,
-    snug: 1.375,
-    normal: 1.5,
-    relaxed: 1.625,
-    loose: 1.75,
-  };
-
-  /** 字母间距映射 */
-  static readonly LETTER_SPACING_MAP: Record<string, string> = {
-    tighter: '-0.05em',
-    tight: '-0.025em',
-    normal: '0',
-    wide: '0.025em',
-    wider: '0.05em',
-    widest: '0.1em',
-  };
-
-  /** 生成文本类名 */
-  static getClassName(props: Partial<TextProps>): string {
-    const prefix = this.getPlatformPrefix();
-    const {
-      size = 'md',
-      weight = 'normal',
-      color = 'inherit',
-      align = 'left',
-      decoration = 'none',
-      transform = 'none',
-      overflow = 'clip',
-      direction = 'ltr',
-      fontStyle = 'normal',
-      variant = 'normal',
-      status = 'normal',
-      type = 'body',
-      clickable = false,
-      loading = false,
-      disabled = false,
-      block = false,
-      inlineBlock = false,
-      selectable = false,
-      copyable = false,
-      animated = false,
-      underline = false,
-      strikethrough = false,
-      highlight = false,
-      ellipsis = false,
-      wrap = true,
-      breakWord = false,
-      className = '',
-    } = props;
-
-    const classes = [
-      prefix,
-      `${prefix}--${size}`,
-      `${prefix}--${weight}`,
-      `${prefix}--${color}`,
-      `${prefix}--${align}`,
-      `${prefix}--${decoration}`,
-      `${prefix}--${transform}`,
-      `${prefix}--${overflow}`,
-      `${prefix}--${direction}`,
-      `${prefix}--${fontStyle}`,
-      `${prefix}--${variant}`,
-      `${prefix}--${status}`,
-      `${prefix}--${type}`,
-      clickable && `${prefix}--clickable`,
-      loading && `${prefix}--loading`,
-      disabled && `${prefix}--disabled`,
-      block && `${prefix}--block`,
-      inlineBlock && `${prefix}--inline-block`,
-      selectable && `${prefix}--selectable`,
-      copyable && `${prefix}--copyable`,
-      animated && `${prefix}--animated`,
-      underline && `${prefix}--underline`,
-      strikethrough && `${prefix}--strikethrough`,
-      highlight && `${prefix}--highlight`,
-      ellipsis && `${prefix}--ellipsis`,
-      wrap && `${prefix}--wrap`,
-      breakWord && `${prefix}--break-word`,
-      className,
-    ].filter(Boolean);
-
-    return classes.join(' ');
-  }
-
-  /** 生成文本样式 */
-  static getStyle(props: Partial<TextProps>): React.CSSProperties {
-    const {
-      size = 'md',
-      weight = 'normal',
-      color = 'inherit',
-      align = 'left',
-      decoration = 'none',
-      transform = 'none',
-      overflow = 'clip',
-      direction = 'ltr',
-      fontStyle = 'normal',
-      variant = 'normal',
-      letterSpacing,
-      lineHeight,
-      status = 'normal',
-      loading = false,
-      disabled = false,
-      maxLines,
-      animated = false,
-      animationDuration = 300,
-      underline = false,
-      strikethrough = false,
-      highlight = false,
-      highlightColor = '#fef3c7',
-      ellipsis = false,
-      wrap = true,
-      breakWord = false,
-      textShadow,
-      textOutline,
-      gradient,
-      fontFamily,
-      wordSpacing,
-      textIndent,
-      whiteSpace,
-      verticalAlign,
-      writingMode,
-      textRendering,
-      style = {},
-    } = props;
-
-    const sizeStyles = this.SIZE_MAP[size];
-    const weightStyles = this.WEIGHT_MAP[weight];
-    const colorStyles = this.COLOR_MAP[color];
-    const statusStyles = this.STATUS_MAP[status];
-
-    // 处理字母间距
-    const _letterSpacingValue =
-      typeof letterSpacing === 'string' ? this.LETTER_SPACING_MAP[letterSpacing] : `${letterSpacing}px`;
-
-    // 处理行高
-    const _lineHeightValue = typeof lineHeight === 'string' ? this.LINE_HEIGHT_MAP[lineHeight] : lineHeight;
-
-    // 处理文本装饰
-    const textDecorationValue = [];
-    if (underline) textDecorationValue.push('underline');
-    if (strikethrough) textDecorationValue.push('line-through');
-    const finalDecoration = textDecorationValue.length > 0 ? textDecorationValue.join(' ') : decoration;
-
-    // 处理渐变背景
-    const backgroundStyle = gradient
-      ? {
-          backgroundImage: `linear-gradient(${gradient.direction || 'to right'}, ${gradient.start}, ${gradient.end})`,
-          WebkitBackgroundClip: 'text',
-          WebkitTextFillColor: 'transparent',
-          backgroundClip: 'text',
-          textFillColor: 'transparent',
-        }
-      : {};
-
-    // 处理最大行数
-    const overflowStyle = maxLines
-      ? {
-          display: '-webkit-box',
-          WebkitBoxOrient: 'vertical' as any,
-          WebkitLineClamp: maxLines,
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-        }
-      : {};
-
-    // 处理省略号
-    const ellipsisStyle = ellipsis
-      ? {
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-        }
-      : {};
-
-    // 处理换行
-    const wrapStyle = !wrap
-      ? {
-          whiteSpace: 'nowrap',
-        }
-      : {};
-
-    // 处理断词
-    const breakWordStyle = breakWord
-      ? {
-          wordBreak: 'break-word' as any,
-          overflowWrap: 'break-word' as any,
-        }
-      : {};
-
-    return {
-      ...sizeStyles,
-      fontWeight: weightStyles,
-      color: colorStyles,
-      textAlign: align,
-      textDecoration: finalDecoration,
-      textTransform: transform,
-      textOverflow: overflow,
-      direction,
-      fontStyle,
-      fontVariant: variant,
-      letterSpacing: _letterSpacingValue,
-      lineHeight: _lineHeightValue,
-      opacity: loading || disabled ? statusStyles['opacity'] : 1,
-      cursor: loading || disabled ? statusStyles['cursor'] : 'default',
-      pointerEvents: (loading || disabled ? statusStyles['pointerEvents'] : 'auto') as any,
-      transition: animated ? `all ${animationDuration}ms ease-in-out` : 'none',
-      backgroundColor: highlight ? highlightColor : 'transparent',
-      textShadow,
-      WebkitTextStroke: textOutline ? `${textOutline}px currentColor` : undefined,
-      fontFamily: Array.isArray(fontFamily) ? fontFamily.join(', ') : fontFamily,
-      wordSpacing: typeof wordSpacing === 'number' ? `${wordSpacing}px` : wordSpacing,
-      textIndent: typeof textIndent === 'number' ? `${textIndent}px` : textIndent,
-      whiteSpace,
-      verticalAlign,
-      writingMode,
-      textRendering,
-      ...backgroundStyle,
-      ...overflowStyle,
-      ...ellipsisStyle,
-      ...wrapStyle,
-      ...breakWordStyle,
-      ...style,
-    };
-  }
-
-  /** 生成链接样式 */
-  static getLinkStyle(props: {
-    color?: string;
-    underline?: boolean;
-    visited?: boolean;
-    active?: boolean;
-    hover?: boolean;
-  }): React.CSSProperties {
-    const { color = '#0ea5e9', underline = true, visited, active, hover } = props;
-
-    return {
-      color: visited ? '#7c3aed' : active ? '#0369a1' : hover ? '#0284c7' : color,
-      textDecoration: underline ? 'underline' : 'none',
-      cursor: 'pointer',
-      transition: 'color 0.2s ease-in-out',
-    };
-  }
-
-  /** 生成代码样式 */
-  static getCodeStyle(props: { variant?: 'inline' | 'block'; language?: string }): React.CSSProperties {
-    const { variant = 'inline' } = props;
-
-    const baseStyle: React.CSSProperties = {
-      fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
-      fontSize: '0.875em',
-      backgroundColor: '#f3f4f6',
-      padding: variant === 'inline' ? '0.125em 0.25em' : '0.5em',
-      borderRadius: '0.25em',
-      border: '1px solid #e5e7eb',
-    };
-
-    if (variant === 'block') {
-      return {
-        ...baseStyle,
-        display: 'block',
-        padding: '1em',
-        overflowX: 'auto',
-        whiteSpace: 'pre',
-      };
-    }
-
-    return baseStyle;
-  }
-
-  /** 生成引用样式 */
-  static getQuoteStyle(props: {
-    variant?: 'solid' | 'dashed' | 'dotted';
-    position?: 'left' | 'right';
-  }): React.CSSProperties {
-    const { variant = 'solid', position = 'left' } = props;
-
-    return {
-      fontStyle: 'italic',
-      borderLeft: position === 'left' ? `4px ${variant} #e5e7eb` : 'none',
-      borderRight: position === 'right' ? `4px ${variant} #e5e7eb` : 'none',
-      paddingLeft: position === 'left' ? '1em' : '0',
-      paddingRight: position === 'right' ? '1em' : '0',
-      margin: '1em 0',
-      color: '#6b7280',
-    };
-  }
-
-  /** 生成标题样式 */
-  static getHeadingStyle(level: 1 | 2 | 3 | 4 | 5 | 6): React.CSSProperties {
-    const styles = {
-      1: { fontSize: '2.5em', fontWeight: 800, _lineHeight: 1.2, marginBottom: '0.5em' },
-      2: { fontSize: '2em', fontWeight: 700, _lineHeight: 1.3, marginBottom: '0.5em' },
-      3: { fontSize: '1.75em', fontWeight: 600, _lineHeight: 1.4, marginBottom: '0.5em' },
-      4: { fontSize: '1.5em', fontWeight: 600, _lineHeight: 1.5, marginBottom: '0.5em' },
-      5: { fontSize: '1.25em', fontWeight: 500, _lineHeight: 1.6, marginBottom: '0.5em' },
-      6: { fontSize: '1em', fontWeight: 500, _lineHeight: 1.7, marginBottom: '0.5em' },
-    };
-
-    return styles[level];
-  }
-
-  /** 生成加载动画样式 */
-  static getLoadingStyle(): React.CSSProperties {
-    return {
-      display: 'inline-block',
-      width: '1em',
-      height: '1em',
-      border: '2px solid transparent',
-      borderTopColor: 'currentColor',
-      borderRadius: '50%',
-      animation: 'spin 1s linear infinite',
-      verticalAlign: 'middle',
-      marginRight: '0.5em',
-    };
-  }
-
-  /** 生成CSS变量 */
-  static generateCSSVariables(): string {
-    return `
-      :root {
-        --text-primary-color: #0ea5e9;
-        --text-secondary-color: #6b7280;
-        --text-success-color: #22c55e;
-        --text-warning-color: #f59e0b;
-        --text-error-color: #ef4444;
-        --text-info-color: #3b82f6;
-        --text-_disabled-color: #9ca3af;
-        --text-_disabled-opacity: 0.5;
-        --text-_loading-opacity: 0.7;
-        --text-animation-duration: 300ms;
-        --text-highlight-color: #fef3c7;
-        --text-link-color: #0ea5e9;
-        --text-link-hover-color: #0284c7;
-        --text-link-visited-color: #7c3aed;
-        --text-code-background: #f3f4f6;
-        --text-code-border: #e5e7eb;
-        --text-quote-border: #e5e7eb;
-        --text-quote-color: #6b7280;
-      }
-    `;
-  }
-
-  /** 生成关键帧动画 */
-  static generateKeyframes(): string {
-    return `
-      @keyframes spin {
-        from {
-          transform: rotate(0deg);
-        }
-        to {
-          transform: rotate(360deg);
-        }
-      }
-
-      @keyframes pulse {
-        0%, 100% {
-          opacity: 1;
-        }
-        50% {
-          opacity: 0.5;
-        }
-      }
-
-      @keyframes fadeIn {
-        from {
-          opacity: 0;
-          transform: translateY(10px);
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-
-      @keyframes slideIn {
-        from {
-          transform: translateX(-100%);
-        }
-        to {
-          transform: translateX(0);
-        }
-      }
-
-      @keyframes typewriter {
-        from {
-          width: 0;
-        }
-        to {
-          width: 100%;
-        }
-      }
-
-      @keyframes blink {
-        0%, 50% {
-          opacity: 1;
-        }
-        51%, 100% {
-          opacity: 0;
-        }
-      }
-    `;
-  }
-
-  /** 获取尺寸类名 */
-  static getSizeClassName(size: TextSize): string {
-    return `taro-uno-text--${size}`;
-  }
-
-  /** 获取权重类名 */
-  static getWeightClassName(weight: TextWeight): string {
-    return `taro-uno-text--${weight}`;
-  }
-
-  /** 获取颜色类名 */
-  static getColorClassName(color: TextColor): string {
-    return `taro-uno-text--${color}`;
-  }
-
-  /** 获取状态类名 */
-  static getStatusClassName(status: TextStatus): string {
-    return `taro-uno-text--${status}`;
-  }
-
-  /** 获取类型类名 */
-  static getTypeClassName(type: string): string {
-    return `taro-uno-text--${type}`;
-  }
-}
-
-/** 导出样式工具 */
-export const textStyles = TextStyles;