taro-uno-ui 1.0.0 → 1.0.2

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

@@ -1,206 +0,0 @@
-import type { CSSProperties } from 'react';
-
-export const carouselStyles: Record<string, CSSProperties> = {
-  base: {
-    position: 'relative',
-    overflow: 'hidden',
-    width: '100%',
-    height: '200px',
-  },
-
-  vertical: {
-    height: '300px',
-  },
-
-  // 容器
-  container: {
-    position: 'relative',
-    width: '100%',
-    height: '100%',
-  },
-
-  // 轮播项包装器
-  wrapper: {
-    position: 'relative',
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    transition: 'transform 0.3s ease-in-out',
-  },
-
-  wrapperVertical: {
-    flexDirection: 'column',
-  },
-
-  wrapperNoTransition: {
-    transition: 'none',
-  },
-
-  // 轮播项
-  slide: {
-    position: 'relative',
-    flexShrink: 0,
-    width: '100%',
-    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',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    opacity: 0,
-    transition: 'opacity 0.3s ease-in-out',
-  },
-
-  slideFadeActive: {
-    opacity: 1,
-  },
-
-  // 指示器
-  dots: {
-    position: 'absolute',
-    display: 'flex',
-    gap: '8px',
-    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',
-    borderRadius: '50%',
-    backgroundColor: 'rgba(255, 255, 255, 0.5)',
-    cursor: 'pointer',
-    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',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    zIndex: 1,
-  },
-
-  arrowPrev: {
-    left: '12px',
-  },
-
-  arrowNext: {
-    right: '12px',
-  },
-
-  arrowButton: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '32px',
-    height: '32px',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    color: '#ffffff',
-    border: 'none',
-    borderRadius: '50%',
-    cursor: 'pointer',
-    fontSize: '16px',
-    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',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    height: '100%',
-    backgroundColor: '#f5f5f5',
-    color: '#8c8c8c',
-  },
-
-  loadingIcon: {
-    width: '20px',
-    height: '20px',
-    border: '2px solid #f0f0f0',
-    borderTop: '2px solid #1890ff',
-    borderRadius: '50%',
-    animation: 'spin 1s linear infinite',
-    marginRight: '8px',
-  },
-};

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

@@ -1,290 +0,0 @@
-import { forwardRef, useImperativeHandle, useRef, useState, useEffect, useCallback, Children } from 'react';
-import { View, Text } from '@tarojs/components';
-import { carouselStyles } from './Carousel.styles';
-import type { CarouselProps, CarouselRef } from './Carousel.types';
-
-/** 轮播图组件 */
-export const CarouselComponent = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
-  const {
-    children,
-    autoplay = false,
-    interval = 3000,
-    showDots = true,
-    showArrows = true,
-    infinite = true,
-    effect = 'slide',
-    dotsPosition = 'bottom',
-    slidesToShow = 1,
-    slidesToScroll = 1,
-    vertical = false,
-    activeIndex,
-    defaultActiveIndex = 0,
-    beforeChange,
-    afterChange,
-    style,
-    className,
-    ...rest
-  } = props;
-
-  const [currentIndex, setCurrentIndex] = useState(activeIndex ?? defaultActiveIndex);
-  const [isTransitioning, setIsTransitioning] = useState(false);
-  // isHovered removed as mouse events are not supported in Taro.js
-  const timerRef = useRef<NodeJS.Timeout | null>(null);
-  const elementRef = useRef<any>(null);
-
-  const childrenArray = Children.toArray(children);
-  const totalSlides = childrenArray.length;
-
-  useImperativeHandle(ref, () => ({
-    element: elementRef.current,
-    getCurrentIndex: () => currentIndex,
-    goTo: (index: number) => goToSlide(index),
-    prev: () => goPrev(),
-    next: () => goNext(),
-    play: () => startAutoplay(),
-    pause: () => stopAutoplay(),
-    getTotal: () => totalSlides,
-  }));
-
-  const startAutoplay = useCallback(() => {
-    if (autoplay && totalSlides > 1) {
-      timerRef.current = setInterval(() => {
-        goNext();
-      }, interval);
-    }
-  }, [autoplay, totalSlides, interval]);
-
-  const stopAutoplay = useCallback(() => {
-    if (timerRef.current) {
-      clearInterval(timerRef.current);
-      timerRef.current = null;
-    }
-  }, []);
-
-  useEffect(() => {
-    if (activeIndex !== undefined) {
-      setCurrentIndex(activeIndex);
-    }
-  }, [activeIndex]);
-
-  useEffect(() => {
-    startAutoplay();
-    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 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]);
-
-  // Mouse event handlers removed as they're not supported in Taro.js
-
-  const getTransform = () => {
-    if (effect === 'fade') return 'none';
-
-    const translateValue = -(currentIndex * (100 / slidesToShow));
-    return vertical ? `translateY(${translateValue}%)` : `translateX(${translateValue}%)`;
-  };
-
-  const getWrapperStyle = () => {
-    const baseStyle = {
-      ...carouselStyles['wrapper'],
-      transform: getTransform(),
-    };
-
-    if (vertical) {
-      Object.assign(baseStyle, carouselStyles['wrapperVertical']);
-    }
-
-    if (isTransitioning && effect === 'slide') {
-      // transition 已在基础样式中定义
-    } else if (effect === 'fade') {
-      Object.assign(baseStyle, carouselStyles['wrapperNoTransition']);
-    }
-
-    return baseStyle;
-  };
-
-  const getSlideStyle = (index: number) => {
-    const baseStyle = { ...carouselStyles['slide'] };
-
-    if (slidesToShow > 1) {
-      if (vertical) {
-        Object.assign(baseStyle, carouselStyles['slideVertical']);
-      } else {
-        Object.assign(baseStyle, carouselStyles['slideMultiple']);
-      }
-      // CSS variable assignment removed for Taro.js compatibility
-    }
-
-    if (effect === 'fade') {
-      Object.assign(baseStyle, carouselStyles['slideFade']);
-      if (index === currentIndex) {
-        Object.assign(baseStyle, carouselStyles['slideFadeActive']);
-      }
-    }
-
-    return baseStyle;
-  };
-
-  const renderDots = () => {
-    if (!showDots || totalSlides <= 1) return null;
-
-    const dotsStyle = {
-      ...carouselStyles['dots'],
-      ...carouselStyles[
-        `dots${dotsPosition.charAt(0).toUpperCase() + dotsPosition.slice(1)}` as keyof typeof carouselStyles
-      ],
-    };
-
-    return (
-      <View style={dotsStyle}>
-        {Array.from({ length: totalSlides }, (_, index) => (
-          <View
-            key={index}
-            style={{
-              ...carouselStyles['dot'],
-              ...(index === currentIndex ? carouselStyles['dotActive'] : {}),
-            }}
-            onClick={() => goToSlide(index)}
-          />
-        ))}
-      </View>
-    );
-  };
-
-  const renderArrows = () => {
-    if (!showArrows || totalSlides <= 1) return null;
-
-    const canGoPrev = infinite || currentIndex > 0;
-    const canGoNext = infinite || currentIndex < totalSlides - 1;
-
-    return (
-      <>
-        <View
-          style={{
-            ...carouselStyles['arrows'],
-            ...(vertical ? carouselStyles['arrowVertical'] : {}),
-            ...(vertical ? carouselStyles['arrowVerticalPrev'] : carouselStyles['arrowPrev']),
-          }}
-        >
-          <View
-            style={{
-              ...carouselStyles['arrowButton'],
-              ...(!canGoPrev ? carouselStyles['arrowButtonDisabled'] : {}),
-            }}
-            onClick={canGoPrev ? goPrev : undefined}
-          >
-            <Text>{vertical ? '↑' : '‹'}</Text>
-          </View>
-        </View>
-
-        <View
-          style={{
-            ...carouselStyles['arrows'],
-            ...(vertical ? carouselStyles['arrowVertical'] : {}),
-            ...(vertical ? carouselStyles['arrowVerticalNext'] : carouselStyles['arrowNext']),
-          }}
-        >
-          <View
-            style={{
-              ...carouselStyles['arrowButton'],
-              ...(!canGoNext ? carouselStyles['arrowButtonDisabled'] : {}),
-            }}
-            onClick={canGoNext ? goNext : undefined}
-          >
-            <Text>{vertical ? '↓' : '›'}</Text>
-          </View>
-        </View>
-      </>
-    );
-  };
-
-  const getCarouselStyle = () => {
-    const baseStyle = {
-      ...carouselStyles['base'],
-      ...style,
-    };
-
-    if (vertical) {
-      Object.assign(baseStyle, carouselStyles['vertical']);
-    }
-
-    return baseStyle;
-  };
-
-  if (totalSlides === 0) {
-    return (
-      <View style={getCarouselStyle()} className={className}>
-        <View style={carouselStyles['loading']}>
-          <View style={carouselStyles['loadingIcon']} />
-          <Text>暂无内容</Text>
-        </View>
-      </View>
-    );
-  }
-
-  return (
-    <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)}>
-              {child}
-            </View>
-          ))}
-        </View>
-
-        {renderDots()}
-        {renderArrows()}
-      </View>
-    </View>
-  );
-});
-
-CarouselComponent.displayName = 'Carousel';
-
-export const Carousel = CarouselComponent;
-export default Carousel;

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

@@ -1,57 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react';
-
-export interface CarouselProps {
-  /** 轮播项 */
-  children?: ReactNode;
-  /** 是否自动播放 */
-  autoplay?: boolean;
-  /** 自动播放间隔时间（毫秒） */
-  interval?: number;
-  /** 是否显示指示器 */
-  showDots?: boolean;
-  /** 是否显示箭头 */
-  showArrows?: boolean;
-  /** 是否无限循环 */
-  infinite?: boolean;
-  /** 切换效果 */
-  effect?: 'slide' | 'fade';
-  /** 指示器位置 */
-  dotsPosition?: 'bottom' | 'top' | 'left' | 'right';
-  /** 每次滚动的项目数 */
-  slidesToShow?: number;
-  /** 每次滚动移动的项目数 */
-  slidesToScroll?: number;
-  /** 垂直模式 */
-  vertical?: boolean;
-  /** 当前活动索引 */
-  activeIndex?: number;
-  /** 默认活动索引 */
-  defaultActiveIndex?: number;
-  /** 切换前回调 */
-  beforeChange?: (_from: number, to: number) => void;
-  /** 切换后回调 */
-  afterChange?: (_current: number) => void;
-  /** 自定义样式 */
-  style?: CSSProperties;
-  /** 自定义类名 */
-  className?: string;
-}
-
-export interface CarouselRef {
-  /** DOM 元素 */
-  element: any;
-  /** 获取当前索引 */
-  getCurrentIndex: () => number;
-  /** 跳转到指定索引 */
-  goTo: (_index: number) => void;
-  /** 上一张 */
-  prev: () => void;
-  /** 下一张 */
-  next: () => void;
-  /** 开始自动播放 */
-  play: () => void;
-  /** 停止自动播放 */
-  pause: () => void;
-  /** 获取总数 */
-  getTotal: () => number;
-}

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

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

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

@@ -1,79 +0,0 @@
-import { createStyles } from '@/theme/styles';
-
-export const ListStyles = createStyles({
-  base: `
-    bg-white dark:bg-gray-800
-    rounded-lg
-    overflow-hidden
-  `,
-
-  size: {
-    small: 'text-sm',
-    default: 'text-base',
-    large: 'text-lg',
-  },
-
-  bordered: `
-    border border-gray-200 dark:border-gray-700
-  `,
-
-  header: `
-    px-4 py-3
-    border-b border-gray-200 dark:border-gray-700
-    bg-gray-50 dark:bg-gray-900
-    font-medium
-    text-gray-900 dark:text-white
-  `,
-
-  footer: `
-    px-4 py-3
-    border-t border-gray-200 dark:border-gray-700
-    bg-gray-50 dark:bg-gray-900
-    text-sm
-    text-gray-500 dark:text-gray-400
-  `,
-
-  content: `
-    divide-y divide-gray-200 dark:divide-gray-700
-  `,
-
-  loading: `
-    py-4
-  `,
-
-  loadingItem: `
-    h-16
-    bg-gray-200 dark:bg-gray-700
-    rounded
-    animate-pulse
-    mx-4
-    mb-3
-    last:mb-0
-  `,
-
-  item: `
-    px-4
-    transition-colors duration-200
-  `,
-
-  itemSize: {
-    small: 'py-2',
-    default: 'py-3',
-    large: 'py-4',
-  },
-
-  itemSplit: `
-    border-b border-gray-200 dark:border-gray-700
-  `,
-
-  itemDisabled: `
-    opacity-50
-    pointer-events-none
-  `,
-
-  itemClickable: `
-    cursor-pointer
-    hover:bg-gray-50 dark:hover:bg-gray-700
-    active:bg-gray-100 dark:active:bg-gray-600
-  `,
-});