taro-uno-ui 0.9.0 → 1.0.0

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

@@ -7,18 +7,18 @@ export const carouselStyles: Record<string, CSSProperties> = {
     width: '100%',
     height: '200px',
   },
-  
+
   vertical: {
     height: '300px',
   },
-  
+
   // 容器
   container: {
     position: 'relative',
     width: '100%',
     height: '100%',
   },
-  
+
   // 轮播项包装器
   wrapper: {
     position: 'relative',
@@ -27,15 +27,15 @@ export const carouselStyles: Record<string, CSSProperties> = {
     display: 'flex',
     transition: 'transform 0.3s ease-in-out',
   },
-  
+
   wrapperVertical: {
     flexDirection: 'column',
   },
-  
+
   wrapperNoTransition: {
     transition: 'none',
   },
-  
+
   // 轮播项
   slide: {
     position: 'relative',
@@ -44,16 +44,16 @@ export const carouselStyles: Record<string, CSSProperties> = {
     height: '100%',
     overflow: 'hidden',
   },
-  
+
   slideMultiple: {
     width: 'calc(100% / var(--slides-to-show))',
   },
-  
+
   slideVertical: {
     width: '100%',
     height: 'calc(100% / var(--slides-to-show))',
   },
-  
+
   // 淡入淡出效果
   slideFade: {
     position: 'absolute',
@@ -64,11 +64,11 @@ export const carouselStyles: Record<string, CSSProperties> = {
     opacity: 0,
     transition: 'opacity 0.3s ease-in-out',
   },
-  
+
   slideFadeActive: {
     opacity: 1,
   },
-  
+
   // 指示器
   dots: {
     position: 'absolute',
@@ -77,33 +77,33 @@ export const carouselStyles: Record<string, CSSProperties> = {
     padding: '8px',
     zIndex: 1,
   },
-  
+
   dotsBottom: {
     bottom: '12px',
     left: '50%',
     transform: 'translateX(-50%)',
   },
-  
+
   dotsTop: {
     top: '12px',
     left: '50%',
     transform: 'translateX(-50%)',
   },
-  
+
   dotsLeft: {
     left: '12px',
     top: '50%',
     transform: 'translateY(-50%)',
     flexDirection: 'column',
   },
-  
+
   dotsRight: {
     right: '12px',
     top: '50%',
     transform: 'translateY(-50%)',
     flexDirection: 'column',
   },
-  
+
   dot: {
     width: '8px',
     height: '8px',
@@ -113,16 +113,16 @@ export const carouselStyles: Record<string, CSSProperties> = {
     transition: 'all 0.3s ease',
     border: '1px solid rgba(255, 255, 255, 0.3)',
   },
-  
+
   dotActive: {
     backgroundColor: '#ffffff',
     transform: 'scale(1.2)',
   },
-  
+
   dotHover: {
     backgroundColor: 'rgba(255, 255, 255, 0.8)',
   },
-  
+
   // 箭头
   arrows: {
     position: 'absolute',
@@ -130,15 +130,15 @@ export const carouselStyles: Record<string, CSSProperties> = {
     transform: 'translateY(-50%)',
     zIndex: 1,
   },
-  
+
   arrowPrev: {
     left: '12px',
   },
-  
+
   arrowNext: {
     right: '12px',
   },
-  
+
   arrowButton: {
     display: 'flex',
     alignItems: 'center',
@@ -154,35 +154,35 @@ export const carouselStyles: Record<string, CSSProperties> = {
     transition: 'all 0.3s ease',
     userSelect: 'none',
   },
-  
+
   arrowButtonHover: {
     backgroundColor: 'rgba(0, 0, 0, 0.7)',
     transform: 'translateY(-50%) scale(1.1)',
   },
-  
+
   arrowButtonDisabled: {
     opacity: 0.3,
     cursor: 'not-allowed',
   },
-  
+
   // 垂直模式箭头
   arrowVertical: {
     left: '50%',
     transform: 'translateX(-50%)',
   },
-  
+
   arrowVerticalPrev: {
     top: '12px',
   },
-  
+
   arrowVerticalNext: {
     bottom: '12px',
   },
-  
+
   arrowVerticalButtonHover: {
     transform: 'translateX(-50%) scale(1.1)',
   },
-  
+
   // 加载状态
   loading: {
     display: 'flex',
@@ -193,7 +193,7 @@ export const carouselStyles: Record<string, CSSProperties> = {
     backgroundColor: '#f5f5f5',
     color: '#8c8c8c',
   },
-  
+
   loadingIcon: {
     width: '20px',
     height: '20px',
@@ -203,4 +203,4 @@ export const carouselStyles: Record<string, CSSProperties> = {
     animation: 'spin 1s linear infinite',
     marginRight: '8px',
   },
-};
+};

package/src/components/display/Carousel/Carousel.tsx

@@ -72,47 +72,50 @@ export const CarouselComponent = forwardRef<CarouselRef, CarouselProps>((props,
     return () => stopAutoplay();
   }, [startAutoplay, stopAutoplay]);
 
-  const goToSlide = useCallback((index: number) => {
-    if (isTransitioning || totalSlides <= 1) return;
-
-    const validIndex = Math.max(0, Math.min(index, totalSlides - 1));
-    
-    if (validIndex === currentIndex) return;
-
-    beforeChange?.(currentIndex, validIndex);
-    
-    setIsTransitioning(true);
-    setCurrentIndex(validIndex);
-    
-    setTimeout(() => {
-      setIsTransitioning(false);
-      afterChange?.(validIndex);
-    }, 300);
-  }, [currentIndex, totalSlides, isTransitioning, beforeChange, afterChange]);
+  const goToSlide = useCallback(
+    (index: number) => {
+      if (isTransitioning || totalSlides <= 1) return;
+
+      const validIndex = Math.max(0, Math.min(index, totalSlides - 1));
+
+      if (validIndex === currentIndex) return;
+
+      beforeChange?.(currentIndex, validIndex);
+
+      setIsTransitioning(true);
+      setCurrentIndex(validIndex);
+
+      setTimeout(() => {
+        setIsTransitioning(false);
+        afterChange?.(validIndex);
+      }, 300);
+    },
+    [currentIndex, totalSlides, isTransitioning, beforeChange, afterChange],
+  );
 
   const goPrev = useCallback(() => {
     if (totalSlides <= 1) return;
-    
+
     let newIndex;
     if (infinite) {
       newIndex = currentIndex <= 0 ? totalSlides - 1 : currentIndex - slidesToScroll;
     } else {
       newIndex = Math.max(0, currentIndex - slidesToScroll);
     }
-    
+
     goToSlide(newIndex);
   }, [currentIndex, totalSlides, infinite, slidesToScroll, goToSlide]);
 
   const goNext = useCallback(() => {
     if (totalSlides <= 1) return;
-    
+
     let newIndex;
     if (infinite) {
       newIndex = currentIndex >= totalSlides - 1 ? 0 : currentIndex + slidesToScroll;
     } else {
       newIndex = Math.min(totalSlides - 1, currentIndex + slidesToScroll);
     }
-    
+
     goToSlide(newIndex);
   }, [currentIndex, totalSlides, infinite, slidesToScroll, goToSlide]);
 
@@ -120,11 +123,9 @@ export const CarouselComponent = forwardRef<CarouselRef, CarouselProps>((props,
 
   const getTransform = () => {
     if (effect === 'fade') return 'none';
-    
+
     const translateValue = -(currentIndex * (100 / slidesToShow));
-    return vertical 
-      ? `translateY(${translateValue}%)`
-      : `translateX(${translateValue}%)`;
+    return vertical ? `translateY(${translateValue}%)` : `translateX(${translateValue}%)`;
   };
 
   const getWrapperStyle = () => {
@@ -173,7 +174,9 @@ export const CarouselComponent = forwardRef<CarouselRef, CarouselProps>((props,
 
     const dotsStyle = {
       ...carouselStyles['dots'],
-      ...carouselStyles[`dots${dotsPosition.charAt(0).toUpperCase() + dotsPosition.slice(1)}` as keyof typeof carouselStyles],
+      ...carouselStyles[
+        `dots${dotsPosition.charAt(0).toUpperCase() + dotsPosition.slice(1)}` as keyof typeof carouselStyles
+      ],
     };
 
     return (
@@ -217,7 +220,7 @@ export const CarouselComponent = forwardRef<CarouselRef, CarouselProps>((props,
             <Text>{vertical ? '↑' : '‹'}</Text>
           </View>
         </View>
-        
+
         <View
           style={{
             ...carouselStyles['arrows'],
@@ -264,24 +267,16 @@ export const CarouselComponent = forwardRef<CarouselRef, CarouselProps>((props,
   }
 
   return (
-    <View
-      ref={elementRef}
-      style={getCarouselStyle()}
-      className={className}
-      {...rest}
-    >
+    <View ref={elementRef} style={getCarouselStyle()} className={className} {...rest}>
       <View style={carouselStyles['container']}>
         <View style={getWrapperStyle()}>
           {childrenArray.map((child, index) => (
-            <View
-              key={index}
-              style={getSlideStyle(index)}
-            >
+            <View key={index} style={getSlideStyle(index)}>
               {child}
             </View>
           ))}
         </View>
-        
+
         {renderDots()}
         {renderArrows()}
       </View>
@@ -292,4 +287,4 @@ export const CarouselComponent = forwardRef<CarouselRef, CarouselProps>((props,
 CarouselComponent.displayName = 'Carousel';
 
 export const Carousel = CarouselComponent;
-export default Carousel;
+export default Carousel;

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

@@ -54,4 +54,4 @@ export interface CarouselRef {
   pause: () => void;
   /** 获取总数 */
   getTotal: () => number;
-}
+}

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

@@ -1,3 +1,3 @@
 export { Carousel } from './Carousel';
 export { carouselStyles } from './Carousel.styles';
-export type { CarouselProps, CarouselRef } from './Carousel.types';
+export type { CarouselProps, CarouselRef } from './Carousel.types';

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

@@ -10,7 +10,7 @@ export const ListStyles = createStyles({
   size: {
     small: 'text-sm',
     default: 'text-base',
-    large: 'text-lg'
+    large: 'text-lg',
   },
 
   bordered: `
@@ -59,7 +59,7 @@ export const ListStyles = createStyles({
   itemSize: {
     small: 'py-2',
     default: 'py-3',
-    large: 'py-4'
+    large: 'py-4',
   },
 
   itemSplit: `
@@ -75,5 +75,5 @@ export const ListStyles = createStyles({
     cursor-pointer
     hover:bg-gray-50 dark:hover:bg-gray-700
     active:bg-gray-100 dark:active:bg-gray-600
-  `
+  `,
 });

package/src/components/display/List/List.tsx

@@ -20,7 +20,6 @@ export const List = forwardRef<ListRef, ListProps>((props, ref) => {
     ...rest
   } = props;
 
-
   const renderItems = () => {
     if (dataSource && renderItem) {
       return dataSource.map((item, index) => (

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

@@ -1,3 +1,3 @@
 export { List, ListItem } from './List';
 export { ListStyles as listStyles } from './List.styles';
-export type { ListProps, ListRef, ListItemProps } from './List.types';
+export type { ListProps, ListRef, ListItemProps } from './List.types';

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

@@ -95,10 +95,7 @@ export const rateStyles = {
   /**
    * 获取半星遮罩样式
    */
-  getHalfStarMaskStyle: (props: {
-    color?: string;
-    unselectedColor?: string;
-  }): React.CSSProperties => {
+  getHalfStarMaskStyle: (props: { color?: string; unselectedColor?: string }): React.CSSProperties => {
     const { color = rateStyles['COLORS'].default } = props;
 
     return {
@@ -138,12 +135,7 @@ export const rateStyles = {
   /**
    * 获取容器类名
    */
-  getClassName: (props: {
-    size?: RateSize;
-    disabled?: boolean;
-    readonly?: boolean;
-    className?: string;
-  }): string => {
+  getClassName: (props: { size?: RateSize; disabled?: boolean; readonly?: boolean; className?: string }): string => {
     const { size = 'default', disabled = false, readonly = false, className = '' } = props;
 
     const baseClass = 'taro-uno-rate';
@@ -157,11 +149,7 @@ export const rateStyles = {
   /**
    * 获取星星类名
    */
-  getStarClassName: (props: {
-    state: StarState;
-    isActive?: boolean;
-    isHovering?: boolean;
-  }): string => {
+  getStarClassName: (props: { state: StarState; isActive?: boolean; isHovering?: boolean }): string => {
     const { state, isActive = false, isHovering = false } = props;
 
     const baseClass = 'taro-uno-rate__star';
@@ -253,7 +241,7 @@ export const rateStyles = {
     size: RateSize;
   }): React.CSSProperties => {
     const { breakpoint = 'md', size } = props;
-    
+
     // 在小屏幕上调整尺寸
     const responsiveSize = breakpoint === 'xs' || breakpoint === 'sm' ? 'small' : size;
     const sizeConfig = rateStyles.SIZE_MAP[responsiveSize as keyof typeof rateStyles.SIZE_MAP];
@@ -263,4 +251,4 @@ export const rateStyles = {
       gap: `${sizeConfig.gap}px`,
     };
   },
-};
+};

package/src/components/display/Rate/Rate.tsx

@@ -24,10 +24,10 @@ const Star: React.FC<StarProps> = ({
   const handleClick = useCallback(
     (e: any) => {
       if (disabled || readonly) return;
-      
+
       const rect = e.currentTarget.getBoundingClientRect?.();
       if (rect) {
-        const clickX = e.clientX || (e.touches?.[0]?.clientX);
+        const clickX = e.clientX || e.touches?.[0]?.clientX;
         const position = clickX - rect.left < rect.width / 2 ? 0.5 : 1;
         onClick?.(index, position);
       } else {
@@ -77,22 +77,14 @@ const Star: React.FC<StarProps> = ({
     if (state !== 'half') return null;
 
     return (
-      <View
-        style={rateStyles['getHalfStarMaskStyle']({ color, unselectedColor })}
-        className="taro-uno-rate__star-half"
-      >
+      <View style={rateStyles['getHalfStarMaskStyle']({ color, unselectedColor })} className="taro-uno-rate__star-half">
         {renderCharacter()}
       </View>
     );
   };
 
   return (
-    <View
-      className={starClassName}
-      style={starStyle}
-      onClick={handleClick}
-      onTouchStart={handleClick}
-    >
+    <View className={starClassName} style={starStyle} onClick={handleClick} onTouchStart={handleClick}>
       {renderCharacter()}
       {renderHalfStar()}
     </View>
@@ -232,7 +224,7 @@ export const RateComponent = forwardRef<RateRef, RateProps>((props, ref) => {
   }, [disabled, onFocus]);
 
   // 处理失焦
-  
+
   // 渲染工具提示
   const renderTooltip = (index: number) => {
     if (!showTooltips || !tooltips[index] || showTooltip !== index) return null;
@@ -329,4 +321,4 @@ export const RateComponent = forwardRef<RateRef, RateProps>((props, ref) => {
 RateComponent.displayName = 'Rate';
 
 /** 导出Rate组件 */
-export const Rate = RateComponent;
+export const Rate = RateComponent;

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { BaseComponentProps, Size } from '../../../types';
+import { Size } from '../../../types';
+import { BaseComponentProps as StandardBaseComponentProps } from '../../../types/component-props';
 
 /** 评分尺寸 */
 export type RateSize = Size | 'small' | 'medium' | 'large';
@@ -24,7 +25,7 @@ export interface RateRef {
 }
 
 /** 评分组件属性 */
-export interface RateProps extends BaseComponentProps {
+export interface RateProps extends StandardBaseComponentProps {
   /** 当前评分值 */
   value?: number;
   /** 默认评分值 */
@@ -108,4 +109,4 @@ export interface StarProps {
   onHover?: (_index: number, position: number) => void;
   /** 离开回调 - not supported in Taro.js */
   onLeave?: () => void;
-}
+}

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

@@ -1,6 +1,6 @@
 /**
  * Rate 评分组件
- * 
+ *
  * 企业级评分组件，支持：
  * - 完整和半星评分
  * - 自定义字符和颜色
@@ -13,16 +13,8 @@
  */
 
 export { Rate, RateComponent } from './Rate';
-export type {
-  RateProps,
-  RateRef,
-  RateSize,
-  RateCharacter,
-  RateUtils,
-  StarState,
-  StarProps,
-} from './Rate.types';
+export type { RateProps, RateRef, RateSize, RateCharacter, RateUtils, StarState, StarProps } from './Rate.types';
 export { rateStyles } from './Rate.styles';
 
 // 默认导出
-export { Rate as default } from './Rate';
+export { Rate as default } from './Rate';

package/src/components/display/Table/Table.test.tsx

@@ -1,4 +1,6 @@
+
 import React from 'react'
+import { vi, describe, test, expect, beforeEach } from 'vitest'
 import { render, fireEvent, screen } from '@testing-library/react'
 import { Table } from './index'
 

package/src/components/display/Table/Table.tsx

@@ -1,11 +1,7 @@
 import React, { forwardRef, useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { View, Text, ScrollView } from '@tarojs/components';
 import { TableStyles } from './Table.styles';
-import type {
-  TableProps,
-  TableRef,
-  TableSortOrder,
-} from './Table.types';
+import type { TableProps, TableRef, TableSortOrder } from './Table.types';
 
 /** 表格组件 */
 export const TableComponent = forwardRef<TableRef, TableProps>((props, ref) => {
@@ -92,7 +88,7 @@ export const TableComponent = forwardRef<TableRef, TableProps>((props, ref) => {
       setExpandedRowKeys(newExpandedKeys);
 
       // 调用外部展开回调
-      const record = data.find(item => String(item[rowKey as keyof typeof item]) === key);
+      const record = data.find((item) => String(item[rowKey as keyof typeof item]) === key);
       if (record && typeof expandable === 'object' && expandable.onExpand) {
         expandable.onExpand(expanded, record);
       }
@@ -337,7 +333,7 @@ export const TableComponent = forwardRef<TableRef, TableProps>((props, ref) => {
     () => ({
       element: tableRef.current,
       getData: () => data,
-      getSelectedRows: () => data.filter(item => selectedRowKeys.includes(item.id as string)),
+      getSelectedRows: () => data.filter((item) => selectedRowKeys.includes(item.id as string)),
       getSelectedRowKeys: () => selectedRowKeys,
       getSortField: () => sortField,
       getSortOrder: () => sortOrder,

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { BaseComponentProps, Size } from '../../../types';
+import { Size } from '../../../types';
+import { BaseComponentProps as StandardBaseComponentProps } from '../../../types/component-props';
 
 /** 表格尺寸 */
 export type TableSize = Size | 'small' | 'medium' | 'large';
@@ -176,7 +177,7 @@ export interface TableRef<T = any> {
 }
 
 /** 表格组件属性 */
-export interface TableProps<T = any> extends BaseComponentProps {
+export interface TableProps<T = any> extends StandardBaseComponentProps {
   /** 表格数据 */
   data?: T[];
   /** 数据源（兼容属性） */