taro-uno-ui 0.9.0 → 1.0.0

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

@@ -15,173 +15,173 @@ export const tagStyles: Record<string, CSSProperties> = {
     userSelect: 'none',
     verticalAlign: 'middle',
   },
-  
+
   // 大小
   small: {
     height: '20px',
     padding: '0 6px',
     fontSize: '12px',
   },
-  
+
   medium: {
     height: '24px',
     padding: '0 8px',
     fontSize: '13px',
   },
-  
+
   large: {
     height: '28px',
     padding: '0 12px',
     fontSize: '14px',
   },
-  
+
   // 颜色 - 实心
   defaultSolid: {
     backgroundColor: '#fafafa',
     color: '#595959',
     border: '1px solid #d9d9d9',
   },
-  
+
   primarySolid: {
     backgroundColor: '#1890ff',
     color: '#ffffff',
     border: '1px solid #1890ff',
   },
-  
+
   successSolid: {
     backgroundColor: '#52c41a',
     color: '#ffffff',
     border: '1px solid #52c41a',
   },
-  
+
   warningSolid: {
     backgroundColor: '#faad14',
     color: '#ffffff',
     border: '1px solid #faad14',
   },
-  
+
   dangerSolid: {
     backgroundColor: '#ff4d4f',
     color: '#ffffff',
     border: '1px solid #ff4d4f',
   },
-  
+
   infoSolid: {
     backgroundColor: '#13c2c2',
     color: '#ffffff',
     border: '1px solid #13c2c2',
   },
-  
+
   // 颜色 - 描边
   defaultOutline: {
     backgroundColor: 'transparent',
     color: '#595959',
     border: '1px solid #d9d9d9',
   },
-  
+
   primaryOutline: {
     backgroundColor: 'transparent',
     color: '#1890ff',
     border: '1px solid #1890ff',
   },
-  
+
   successOutline: {
     backgroundColor: 'transparent',
     color: '#52c41a',
     border: '1px solid #52c41a',
   },
-  
+
   warningOutline: {
     backgroundColor: 'transparent',
     color: '#faad14',
     border: '1px solid #faad14',
   },
-  
+
   dangerOutline: {
     backgroundColor: 'transparent',
     color: '#ff4d4f',
     border: '1px solid #ff4d4f',
   },
-  
+
   infoOutline: {
     backgroundColor: 'transparent',
     color: '#13c2c2',
     border: '1px solid #13c2c2',
   },
-  
+
   // 颜色 - 浅色
   defaultLight: {
     backgroundColor: '#fafafa',
     color: '#595959',
     border: '1px solid transparent',
   },
-  
+
   primaryLight: {
     backgroundColor: '#e6f7ff',
     color: '#1890ff',
     border: '1px solid transparent',
   },
-  
+
   successLight: {
     backgroundColor: '#f6ffed',
     color: '#52c41a',
     border: '1px solid transparent',
   },
-  
+
   warningLight: {
     backgroundColor: '#fffbe6',
     color: '#faad14',
     border: '1px solid transparent',
   },
-  
+
   dangerLight: {
     backgroundColor: '#fff2f0',
     color: '#ff4d4f',
     border: '1px solid transparent',
   },
-  
+
   infoLight: {
     backgroundColor: '#e6fffb',
     color: '#13c2c2',
     border: '1px solid transparent',
   },
-  
+
   // 状态
   clickable: {
     cursor: 'pointer',
   },
-  
+
   checkable: {
     cursor: 'pointer',
   },
-  
+
   checked: {
     backgroundColor: '#1890ff',
     color: '#ffffff',
     border: '1px solid #1890ff',
   },
-  
+
   hover: {
     opacity: 0.8,
   },
-  
+
   // 内容
   content: {
     display: 'flex',
     alignItems: 'center',
     gap: '4px',
   },
-  
+
   icon: {
     fontSize: 'inherit',
     lineHeight: '1',
   },
-  
+
   text: {
     fontSize: 'inherit',
     lineHeight: '1',
   },
-  
+
   closeIcon: {
     marginLeft: '4px',
     fontSize: '10px',
@@ -190,8 +190,8 @@ export const tagStyles: Record<string, CSSProperties> = {
     opacity: 0.7,
     transition: 'opacity 0.3s ease',
   },
-  
+
   closeIconHover: {
     opacity: 1,
   },
-};
+};

package/src/components/display/Tag/Tag.tsx

@@ -45,13 +45,13 @@ export const TagComponent = forwardRef<TagRef, TagProps>((props, ref) => {
 
   const handleClick = (event: any) => {
     event.stopPropagation();
-    
+
     if (checkable) {
       const newChecked = !checkedState;
       setCheckedState(newChecked);
       onCheckedChange?.(newChecked);
     }
-    
+
     onClick?.(event);
   };
 
@@ -63,11 +63,11 @@ export const TagComponent = forwardRef<TagRef, TagProps>((props, ref) => {
 
   const getTagStyle = () => {
     const colorKey = `${color}${variant.charAt(0).toUpperCase() + variant.slice(1)}`;
-    
+
     const baseStyle = {
       ...tagStyles['base'],
       ...tagStyles[size],
-      ...tagStyles[colorKey as keyof typeof tagStyles] || tagStyles['defaultSolid'],
+      ...(tagStyles[colorKey as keyof typeof tagStyles] || tagStyles['defaultSolid']),
       ...style,
     };
 
@@ -119,29 +119,12 @@ export const TagComponent = forwardRef<TagRef, TagProps>((props, ref) => {
   }
 
   return (
-    <View
-      ref={elementRef}
-      style={getTagStyle()}
-      className={className}
-      onClick={handleClick}
-      {...rest}
-    >
+    <View ref={elementRef} style={getTagStyle()} className={className} onClick={handleClick} {...rest}>
       <View style={tagStyles['content']}>
-        {icon && (
-          <View style={tagStyles['icon']}>
-            {icon}
-          </View>
-        )}
-        {children && (
-          <Text style={tagStyles['text']}>
-            {children}
-          </Text>
-        )}
+        {icon && <View style={tagStyles['icon']}>{icon}</View>}
+        {children && <Text style={tagStyles['text']}>{children}</Text>}
         {closable && (
-          <Text
-            style={getCloseIconStyle()}
-            onClick={handleClose}
-          >
+          <Text style={getCloseIconStyle()} onClick={handleClose}>
             ×
           </Text>
         )}
@@ -153,4 +136,4 @@ export const TagComponent = forwardRef<TagRef, TagProps>((props, ref) => {
 TagComponent.displayName = 'Tag';
 
 export const Tag = TagComponent;
-export default Tag;
+export default Tag;

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

@@ -46,4 +46,4 @@ export interface TagRef {
   setChecked: (_checked: boolean) => void;
   /** 关闭标签 */
   close: () => void;
-}
+}

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

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

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

@@ -7,12 +7,12 @@ export const timelineStyles: Record<string, CSSProperties> = {
     margin: 0,
     padding: 0,
   },
-  
+
   vertical: {
     display: 'flex',
     flexDirection: 'column',
   },
-  
+
   horizontal: {
     display: 'flex',
     flexDirection: 'row',
@@ -20,37 +20,37 @@ export const timelineStyles: Record<string, CSSProperties> = {
     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',
@@ -60,7 +60,7 @@ export const timelineStyles: Record<string, CSSProperties> = {
     height: 'calc(100% - 20px)',
     backgroundColor: '#f0f0f0',
   },
-  
+
   itemLineHorizontal: {
     position: 'absolute',
     left: '20px',
@@ -69,11 +69,11 @@ export const timelineStyles: Record<string, CSSProperties> = {
     height: '1px',
     backgroundColor: '#f0f0f0',
   },
-  
+
   itemLineLast: {
     display: 'none',
   },
-  
+
   // 节点
   itemDot: {
     position: 'absolute',
@@ -87,7 +87,7 @@ export const timelineStyles: Record<string, CSSProperties> = {
     boxShadow: '0 0 0 1px #d9d9d9',
     zIndex: 1,
   },
-  
+
   itemDotHorizontal: {
     position: 'absolute',
     left: '4px',
@@ -95,38 +95,38 @@ export const timelineStyles: Record<string, CSSProperties> = {
     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',
@@ -142,26 +142,26 @@ export const timelineStyles: Record<string, CSSProperties> = {
     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',
@@ -170,42 +170,42 @@ export const timelineStyles: Record<string, CSSProperties> = {
     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

@@ -4,12 +4,14 @@ 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;
-}> = ({
+export const TimelineItem: React.FC<
+  TimelineItemProps & {
+    mode?: 'left' | 'right' | 'alternate';
+    direction?: 'vertical' | 'horizontal';
+    showTimestamp?: boolean;
+    itemIndex?: number;
+  }
+> = ({
   title,
   children,
   description,
@@ -56,9 +58,7 @@ export const TimelineItem: React.FC<TimelineItemProps & {
   };
 
   const getLineStyle = () => {
-    const baseStyle = isHorizontal 
-      ? { ...timelineStyles['itemLineHorizontal'] }
-      : { ...timelineStyles['itemLine'] };
+    const baseStyle = isHorizontal ? { ...timelineStyles['itemLineHorizontal'] } : { ...timelineStyles['itemLine'] };
 
     if (isLast) {
       Object.assign(baseStyle, timelineStyles['itemLineLast']);
@@ -72,12 +72,11 @@ export const TimelineItem: React.FC<TimelineItemProps & {
   };
 
   const getDotStyle = () => {
-    const baseStyle = isHorizontal 
-      ? { ...timelineStyles['itemDotHorizontal'] }
-      : { ...timelineStyles['itemDot'] };
+    const baseStyle = isHorizontal ? { ...timelineStyles['itemDotHorizontal'] } : { ...timelineStyles['itemDot'] };
 
     if (!dot) {
-      const colorStyle = timelineStyles[`dot${color.charAt(0).toUpperCase() + color.slice(1)}` as keyof typeof timelineStyles];
+      const colorStyle =
+        timelineStyles[`dot${color.charAt(0).toUpperCase() + color.slice(1)}` as keyof typeof timelineStyles];
       if (colorStyle) {
         Object.assign(baseStyle, colorStyle);
       } else {
@@ -95,7 +94,7 @@ export const TimelineItem: React.FC<TimelineItemProps & {
   };
 
   const getContentStyle = () => {
-    const baseStyle = isHorizontal 
+    const baseStyle = isHorizontal
       ? { ...timelineStyles['itemContentHorizontal'] }
       : { ...timelineStyles['itemContent'] };
 
@@ -114,34 +113,20 @@ export const TimelineItem: React.FC<TimelineItemProps & {
     <View style={getItemStyle()} className={className}>
       {/* 连线 */}
       <View style={getLineStyle()} />
-      
+
       {/* 节点 */}
       {dot ? (
-        <View style={{ ...timelineStyles['customDot'], ...getDotStyle() }}>
-          {dot}
-        </View>
+        <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>
-        )}
+        {title && <Text style={timelineStyles['itemTitle']}>{title}</Text>}
+        {description && <Text style={timelineStyles['itemDescription']}>{description}</Text>}
         {children}
-        {showTimestamp && timestamp && (
-          <Text style={timelineStyles['itemTimestamp']}>
-            {timestamp}
-          </Text>
-        )}
+        {showTimestamp && timestamp && <Text style={timelineStyles['itemTimestamp']}>{timestamp}</Text>}
       </View>
     </View>
   );
@@ -215,12 +200,7 @@ export const TimelineComponent = forwardRef<TimelineRef, TimelineProps>((props,
   };
 
   return (
-    <View
-      ref={elementRef}
-      style={getTimelineStyle()}
-      className={className}
-      {...rest}
-    >
+    <View ref={elementRef} style={getTimelineStyle()} className={className} {...rest}>
       {renderItems()}
     </View>
   );
@@ -229,11 +209,12 @@ export const TimelineComponent = forwardRef<TimelineRef, TimelineProps>((props,
 TimelineComponent.displayName = 'Timeline';
 
 // 创建复合组件类型
-export interface TimelineCompoundComponent extends React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<TimelineRef>> {
+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;
+export default Timeline;

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

@@ -53,4 +53,4 @@ export interface TimelineRef {
   isReverse: () => boolean;
   /** 获取项目数量 */
   getItemCount: () => number;
-}
+}

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

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