taro-uno-ui 0.9.0 → 1.0.0

package/src/components/basic/Icon/IconManager.ts

@@ -0,0 +1,229 @@
+/**
+ * Icon Manager
+ * Unified management of icon sets and utility functions for the Icon component
+ */
+
+import type { IconSet, IconSource, IconType, IconTheme } from './Icon.types';
+import {
+  basicOutlinedIcons,
+  basicFilledIcons,
+  navigationOutlinedIcons,
+  actionOutlinedIcons,
+  statusColoredIcons,
+  socialColoredIcons,
+} from './Icon.data';
+
+/**
+ * Icon Manager class
+ * Provides methods for managing and accessing icon sets
+ */
+export class IconManager {
+  private allIcons: IconSet[] = [];
+  private iconMap: Map<string, IconSet> = new Map();
+  private iconLibrary: Map<string, Map<string, IconSet>> = new Map();
+
+  constructor() {
+    // Register all icon sets
+    this.registerIcons(basicOutlinedIcons, 'basic', 'outlined');
+    this.registerIcons(basicFilledIcons, 'basic', 'filled');
+    this.registerIcons(navigationOutlinedIcons, 'navigation', 'outlined');
+    this.registerIcons(actionOutlinedIcons, 'action', 'outlined');
+    this.registerIcons(statusColoredIcons, 'status', 'colored');
+    this.registerIcons(socialColoredIcons, 'social', 'colored');
+  }
+
+  /**
+   * Register icon set with category and theme
+   */
+  registerIcons(icons: IconSet[], category: string, theme: IconTheme) {
+    icons.forEach((icon) => {
+      // Add category and theme if not already present
+      const iconWithMeta = {
+        ...icon,
+        category: icon.category || category,
+        theme: icon.theme || theme,
+      };
+
+      // Store in all icons array
+      this.allIcons.push(iconWithMeta);
+
+      // Create unique key for icon map
+      const key = `${iconWithMeta.name}:${iconWithMeta.theme}:${iconWithMeta.category}`;
+      this.iconMap.set(key, iconWithMeta);
+
+      // Store in category map
+      if (!this.iconLibrary.has(category)) {
+        this.iconLibrary.set(category, new Map());
+      }
+      const categoryMap = this.iconLibrary.get(category)!;
+      categoryMap.set(iconWithMeta.name, iconWithMeta);
+    });
+  }
+
+  /**
+   * Get icon by name, theme, and category
+   */
+  getIcon(name: string, theme: IconTheme = 'outlined', category: string = 'basic'): IconSet | undefined {
+    const key = `${name}:${theme}:${category}`;
+    return this.iconMap.get(key);
+  }
+
+  /**
+   * Get all icons
+   */
+  getAllIcons(): IconSet[] {
+    return this.allIcons;
+  }
+
+  /**
+   * Get icons by category
+   */
+  getIconsByCategory(category: string): IconSet[] {
+    const categoryMap = this.iconLibrary.get(category);
+    if (!categoryMap) return [];
+    return Array.from(categoryMap.values());
+  }
+
+  /**
+   * Get icons by theme
+   */
+  getIconsByTheme(theme: IconTheme): IconSet[] {
+    return this.allIcons.filter((icon) => icon.theme === theme);
+  }
+
+  /**
+   * Get icons by type
+   */
+  getIconsByType(type: IconType): IconSet[] {
+    return this.allIcons.filter((icon) => icon.type === type);
+  }
+
+  /**
+   * Search icons by name or tags
+   */
+  searchIcons(query: string): IconSet[] {
+    const lowerQuery = query.toLowerCase();
+    return this.allIcons.filter((icon) => {
+      return (
+        icon.name.toLowerCase().includes(lowerQuery) ||
+        icon.tags?.some((tag) => tag.toLowerCase().includes(lowerQuery)) ||
+        icon.category?.toLowerCase().includes(lowerQuery)
+      );
+    });
+  }
+
+  /**
+   * Get icon source by name
+   */
+  getIconSource(name: string, theme: IconTheme = 'outlined', category: string = 'basic'): IconSource | undefined {
+    const icon = this.getIcon(name, theme, category);
+    return icon?.data;
+  }
+
+  /**
+   * Get all categories
+   */
+  getCategories(): string[] {
+    return Array.from(this.iconLibrary.keys());
+  }
+
+  /**
+   * Get all themes
+   */
+  getThemes(): IconTheme[] {
+    const themes = new Set<IconTheme>();
+    this.allIcons.forEach((icon) => {
+      if (icon.theme) {
+        themes.add(icon.theme);
+      }
+    });
+    return Array.from(themes);
+  }
+
+  /**
+   * Check if icon exists
+   */
+  hasIcon(name: string, theme: IconTheme = 'outlined', category: string = 'basic'): boolean {
+    return this.getIcon(name, theme, category) !== undefined;
+  }
+
+  /**
+   * Get icon by name with automatic theme and category detection
+   */
+  findIcon(name: string): IconSet | undefined {
+    // Try to find icon in any theme and category
+    for (const [_, icon] of this.iconMap.entries()) {
+      if (icon.name === name) {
+        return icon;
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Get icon statistics
+   */
+  getStats() {
+    return {
+      totalIcons: this.allIcons.length,
+      categories: this.getCategories().length,
+      themes: this.getThemes().length,
+      byCategory: Object.fromEntries(
+        this.getCategories().map((category) => [category, this.getIconsByCategory(category).length]),
+      ),
+      byTheme: Object.fromEntries(this.getThemes().map((theme) => [theme, this.getIconsByTheme(theme).length])),
+    };
+  }
+}
+
+/**
+ * Create and export default IconManager instance
+ */
+export const iconManager = new IconManager();
+
+/**
+ * Icon utility functions
+ */
+export const IconUtils = {
+  /**
+   * Get icon source by name
+   */
+  getIcon(name: string, theme: IconTheme = 'outlined', category: string = 'basic'): IconSource | undefined {
+    return iconManager.getIconSource(name, theme, category);
+  },
+
+  /**
+   * Check if icon exists
+   */
+  hasIcon(name: string, theme: IconTheme = 'outlined', category: string = 'basic'): boolean {
+    return iconManager.hasIcon(name, theme, category);
+  },
+
+  /**
+   * Get all icons
+   */
+  getAllIcons(): IconSet[] {
+    return iconManager.getAllIcons();
+  },
+
+  /**
+   * Search icons
+   */
+  searchIcons(query: string): IconSet[] {
+    return iconManager.searchIcons(query);
+  },
+
+  /**
+   * Get icon by name with automatic detection
+   */
+  findIcon(name: string): IconSet | undefined {
+    return iconManager.findIcon(name);
+  },
+
+  /**
+   * Get icon statistics
+   */
+  getStats() {
+    return iconManager.getStats();
+  },
+};

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

@@ -269,9 +269,9 @@ export class TextStyles {
       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,
+      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,

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

@@ -1,5 +1,5 @@
 import type { ReactNode, HTMLAttributes } from 'react';
-import React from "react"
+import React from 'react';
 /** 文本尺寸 */
 export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
 
@@ -42,9 +42,19 @@ export type TextVariant =
   | 'all-petite-caps'
   | 'unicase'
   | 'titling-caps'
-  | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-  | 'body1' | 'body2' | 'body'
-  | 'caption' | 'overline' | 'subtitle1' | 'subtitle2';
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'body1'
+  | 'body2'
+  | 'body'
+  | 'caption'
+  | 'overline'
+  | 'subtitle1'
+  | 'subtitle2';
 
 /** 文本间距 */
 export type LetterSpacing = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | number;

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

@@ -217,13 +217,14 @@ export const typographyStyles = {
   /**
    * 多行省略号样式
    */
-  multiLineEllipsis: (maxRows: number) => ({
-    display: '-webkit-box',
-    WebkitBoxOrient: 'vertical',
-    WebkitLineClamp: maxRows,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-  } as CSSProperties),
+  multiLineEllipsis: (maxRows: number) =>
+    ({
+      display: '-webkit-box',
+      WebkitBoxOrient: 'vertical',
+      WebkitLineClamp: maxRows,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    }) as CSSProperties,
 };
 
 /**
@@ -256,7 +257,7 @@ export const calculateTypographyStyles = (props: TypographyProps): CSSProperties
 
   // 根据变体设置样式
   if (variant && variant in typographyStyles['headings']) {
-    Object.assign(styles, typographyStyles['headings'][variant as keyof typeof 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') {
@@ -343,4 +344,4 @@ export const calculateTypographyStyles = (props: TypographyProps): CSSProperties
   }
 
   return styles;
-};
+};

package/src/components/basic/Typography/Typography.tsx

@@ -79,17 +79,20 @@ export const Typography = forwardRef<TypographyRef, TypographyProps>((props, ref
   const styles = calculateTypographyStyles(props);
 
   // 处理点击事件
-  const handleClick = useCallback((e: React.MouseEvent) => {
-    if (copyable) {
-      e.preventDefault();
-      handleCopy();
-    } else if (editable) {
-      e.preventDefault();
-      handleEdit();
-    } else {
-      onClick?.(e);
-    }
-  }, [copyable, editable, handleCopy, handleEdit, onClick]);
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (copyable) {
+        e.preventDefault();
+        handleCopy();
+      } else if (editable) {
+        e.preventDefault();
+        handleEdit();
+      } else {
+        onClick?.(e);
+      }
+    },
+    [copyable, editable, handleCopy, handleEdit, onClick],
+  );
 
   // 渲染编辑状态
   if (isEditing) {
@@ -201,5 +204,4 @@ export const Typography = forwardRef<TypographyRef, TypographyProps>((props, ref
 
 Typography.displayName = 'Typography';
 
-
-export default Typography;
+export default Typography;

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

@@ -8,117 +8,117 @@ export interface TypographyProps {
    * 文本内容
    */
   children: ReactNode;
-  
+
   /**
    * 文本类型
    */
   type?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
-  
+
   /**
    * 文本变体
    */
   variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
-  
+
   /**
    * 文本对齐
    */
   align?: 'left' | 'center' | 'right' | 'justify';
-  
+
   /**
    * 是否禁用
    */
   disabled?: boolean;
-  
+
   /**
    * 是否可复制
    */
   copyable?: boolean;
-  
+
   /**
    * 是否可编辑
    */
   editable?: boolean;
-  
+
   /**
    * 删除线
    */
   delete?: boolean;
-  
+
   /**
    * 下划线
    */
   underline?: boolean;
-  
+
   /**
    * 代码样式
    */
   code?: boolean;
-  
+
   /**
    * 键盘样式
    */
   keyboard?: boolean;
-  
+
   /**
    * 粗体
    */
   strong?: boolean;
-  
+
   /**
    * 斜体
    */
   italic?: boolean;
-  
+
   /**
    * 自定义类名
    */
   className?: string;
-  
+
   /**
    * 自定义样式
    */
   style?: React.CSSProperties;
-  
+
   /**
    * 点击事件
    */
   onClick?: (_e: React.MouseEvent) => void;
-  
+
   /**
    * 文本大小
    */
   size?: TypographySize;
-  
+
   /**
    * 文本颜色
    */
   color?: TypographyColor;
-  
+
   /**
    * 文本权重
    */
   weight?: TypographyWeight;
-  
+
   /**
    * 省略号
    */
   ellipsis?: boolean;
-  
+
   /**
    * 最大行数
    */
   maxRows?: number;
-  
+
   /**
    * 换行
    */
   wrap?: boolean;
-  
+
   /**
    * 复制回调
    */
   onCopy?: () => void;
-  
+
   /**
    * 编辑回调
    */
@@ -133,12 +133,12 @@ export interface TypographyRef {
    * 获取文本内容
    */
   getText: () => string;
-  
+
   /**
    * 复制文本
    */
   copy: () => void;
-  
+
   /**
    * 编辑文本
    */
@@ -168,12 +168,12 @@ export interface TypographyUtils {
    * 计算文本样式
    */
   calculateStyles: (_props: TypographyProps) => React.CSSProperties;
-  
+
   /**
    * 格式化文本
    */
   formatText: (_text: string, variant: TypographyProps['variant']) => string;
-  
+
   /**
    * 复制到剪贴板
    */
@@ -198,12 +198,12 @@ export interface TitleProps extends TypographyProps {
    * 标题级别
    */
   level?: 1 | 2 | 3 | 4 | 5 | 6;
-  
+
   /**
    * 副标题
    */
   subtitle?: ReactNode;
-  
+
   /**
    * 标题分隔线
    */
@@ -218,12 +218,12 @@ export interface ParagraphProps extends TypographyProps {
    * 段落间距
    */
   spacing?: number;
-  
+
   /**
    * 首行缩进
    */
   indent?: boolean;
-  
+
   /**
    * 行高
    */
@@ -238,27 +238,27 @@ export interface TypographyTextProps extends TypographyProps {
    * 文本大小
    */
   size?: TypographySize;
-  
+
   /**
    * 文本颜色
    */
   color?: TypographyColor;
-  
+
   /**
    * 文本权重
    */
   weight?: TypographyWeight;
-  
+
   /**
    * 省略号
    */
   ellipsis?: boolean;
-  
+
   /**
    * 最大行数
    */
   maxRows?: number;
-  
+
   /**
    * 换行
    */
@@ -273,24 +273,24 @@ export interface LinkProps extends TypographyProps {
    * 链接地址
    */
   href?: string;
-  
+
   /**
    * 目标
    */
   target?: '_blank' | '_self' | '_parent' | '_top';
-  
+
   /**
    * 是否在新窗口打开
    */
   external?: boolean;
-  
+
   /**
    * 下划线
    */
   underline?: boolean;
-  
+
   /**
    * 点击事件
    */
   onClick?: (_e: React.MouseEvent) => void;
-}
+}

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

@@ -11,4 +11,4 @@ export type {
   TypographyTextProps,
   LinkProps,
 } from './Typography.types';
-export { calculateTypographyStyles, typographyStyles } from './Typography.styles';
+export { calculateTypographyStyles, typographyStyles } from './Typography.styles';