taro-uno-ui 1.0.1 → 1.0.2

package/src/components/navigation/Steps/Steps.styles.ts

@@ -1,169 +0,0 @@
-export const stepsStyles = {
-  steps: {
-    display: 'flex',
-  },
-  stepsHorizontal: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-  },
-  stepsVertical: {
-    flexDirection: 'column',
-  },
-  step: {
-    flex: 1,
-    position: 'relative',
-  },
-  stepHorizontal: {
-    minWidth: 100,
-  },
-  stepVertical: {
-    marginBottom: 16,
-  },
-  stepLast: {
-    flex: 'none',
-  },
-  stepItem: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  stepIcon: {
-    width: 32,
-    height: 32,
-    borderRadius: '50%',
-    backgroundColor: '#fff',
-    border: '1px solid #d9d9d9',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: 16,
-    color: '#666',
-    marginRight: 8,
-  },
-  stepIconProcess: {
-    backgroundColor: '#1890ff',
-    borderColor: '#1890ff',
-    color: '#fff',
-  },
-  stepIconFinish: {
-    backgroundColor: '#fff',
-    borderColor: '#1890ff',
-    color: '#1890ff',
-  },
-  stepIconError: {
-    backgroundColor: '#fff',
-    borderColor: '#ff4d4f',
-    color: '#ff4d4f',
-  },
-  stepIconSmall: {
-    width: 24,
-    height: 24,
-    fontSize: 12,
-  },
-  stepContent: {
-    flex: 1,
-  },
-  stepTitle: {
-    fontSize: 16,
-    color: '#000',
-    marginBottom: 4,
-  },
-  stepTitleProcess: {
-    color: '#1890ff',
-  },
-  stepTitleFinish: {
-    color: '#000',
-  },
-  stepTitleError: {
-    color: '#ff4d4f',
-  },
-  stepDescription: {
-    fontSize: 14,
-    color: '#666',
-  },
-  stepTail: {
-    position: 'absolute',
-    top: 16,
-    left: '50%',
-    width: '100%',
-    height: 1,
-    backgroundColor: '#f0f0f0',
-  },
-  stepTailFinish: {
-    backgroundColor: '#1890ff',
-  },
-  stepVerticalTail: {
-    top: 32,
-    left: 16,
-    width: 1,
-    height: '100%',
-  },
-};
-
-export const getStepsStyle = (direction?: 'horizontal' | 'vertical', customStyle?: React.CSSProperties) => ({
-  ...stepsStyles.steps,
-  ...(direction === 'horizontal' && stepsStyles.stepsHorizontal),
-  ...(direction === 'vertical' && stepsStyles.stepsVertical),
-  ...customStyle,
-});
-
-export const getStepStyle = (
-  direction?: 'horizontal' | 'vertical',
-  isLast?: boolean,
-  customStyle?: React.CSSProperties,
-) => ({
-  ...stepsStyles.step,
-  ...(direction === 'horizontal' && stepsStyles.stepHorizontal),
-  ...(direction === 'vertical' && stepsStyles.stepVertical),
-  ...(isLast && stepsStyles.stepLast),
-  ...customStyle,
-});
-
-export const getStepItemStyle = (customStyle?: React.CSSProperties) => ({
-  ...stepsStyles.stepItem,
-  ...customStyle,
-});
-
-export const getStepIconStyle = (
-  status?: 'wait' | 'process' | 'finish' | 'error',
-  size?: 'default' | 'small',
-  customStyle?: React.CSSProperties,
-) => ({
-  ...stepsStyles.stepIcon,
-  ...(status === 'process' && stepsStyles.stepIconProcess),
-  ...(status === 'finish' && stepsStyles.stepIconFinish),
-  ...(status === 'error' && stepsStyles.stepIconError),
-  ...(size === 'small' && stepsStyles.stepIconSmall),
-  ...customStyle,
-});
-
-export const getStepContentStyle = (customStyle?: React.CSSProperties) => ({
-  ...stepsStyles.stepContent,
-  ...customStyle,
-});
-
-export const getStepTitleStyle = (
-  status?: 'wait' | 'process' | 'finish' | 'error',
-  customStyle?: React.CSSProperties,
-) => ({
-  ...stepsStyles.stepTitle,
-  ...(status === 'process' && stepsStyles.stepTitleProcess),
-  ...(status === 'finish' && stepsStyles.stepTitleFinish),
-  ...(status === 'error' && stepsStyles.stepTitleError),
-  ...customStyle,
-});
-
-export const getStepDescriptionStyle = (customStyle?: React.CSSProperties) => ({
-  ...stepsStyles.stepDescription,
-  ...customStyle,
-});
-
-export const getStepTailStyle = (
-  direction?: 'horizontal' | 'vertical',
-  isFinish?: boolean,
-  customStyle?: React.CSSProperties,
-) => ({
-  ...stepsStyles.stepTail,
-  ...(isFinish && stepsStyles.stepTailFinish),
-  ...(direction === 'vertical' && stepsStyles.stepVerticalTail),
-  ...customStyle,
-});

package/src/components/navigation/Steps/Steps.test.tsx

@@ -1,14 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import React from 'react'
-import { Steps } from './Steps'
-import { describe, it, expect } from 'vitest'
-import '@testing-library/jest-dom'
-
-describe('Steps', () => {
-  it('renders step items', () => {
-    render(<Steps current={1} items={[{ title: '步骤一' }, { title: '步骤二' }, { title: '步骤三' }]} />)
-    expect(screen.getByText('步骤一')).toBeInTheDocument()
-    expect(screen.getByText('步骤二')).toBeInTheDocument()
-    expect(screen.getByText('步骤三')).toBeInTheDocument()
-  })
-})

package/src/components/navigation/Steps/Steps.tsx

@@ -1,112 +0,0 @@
-import React, { forwardRef, useImperativeHandle } from 'react';
-import { View, Text } from '@tarojs/components';
-import { StepsProps, StepsRef, Step } from './Steps.types';
-import {
-  getStepsStyle,
-  getStepStyle,
-  getStepItemStyle,
-  getStepIconStyle,
-  getStepContentStyle,
-  getStepTitleStyle,
-  getStepDescriptionStyle,
-  getStepTailStyle,
-} from './Steps.styles';
-// import { Step } from './Step'
-
-export const Steps = forwardRef<StepsRef, StepsProps>(
-  (
-    {
-      className,
-      style,
-      current = 0,
-      direction = 'horizontal',
-      labelPlacement: _labelPlacement = 'horizontal',
-      progressDot = false,
-      initial: _initial = 0,
-      status,
-      size = 'default',
-      items,
-      children: _children,
-      onChange,
-      ...props
-    },
-    ref,
-  ) => {
-    const stepsRef = React.useRef<HTMLDivElement>(null);
-
-    useImperativeHandle(ref, () => ({
-      getSteps: () => stepsRef.current,
-    }));
-
-    const getStepStatus = (index: number): 'wait' | 'process' | 'finish' | 'error' => {
-      if (status) {
-        if (index === current && status !== 'finish') {
-          return status;
-        }
-      }
-
-      if (index < current) {
-        return 'finish';
-      }
-      if (index === current) {
-        return 'process';
-      }
-      return 'wait';
-    };
-
-    const handleStepClick = (index: number) => {
-      if (onChange) {
-        onChange(index);
-      }
-    };
-
-    const steps: Step[] = items || [];
-
-    return (
-      <View
-        ref={stepsRef}
-        className={className}
-        style={getStepsStyle(direction, style) as React.CSSProperties}
-        {...props}
-      >
-        {steps.map((step, index) => {
-          const stepStatus = step.status || getStepStatus(index);
-          const isLast = index === steps.length - 1;
-
-          return (
-            <View
-              key={index}
-              style={getStepStyle(direction, isLast) as React.CSSProperties}
-              onClick={() => !step.disabled && handleStepClick(index)}
-            >
-              <View style={getStepItemStyle() as React.CSSProperties}>
-                {progressDot ? (
-                  typeof progressDot === 'function' ? (
-                    progressDot(index, stepStatus, step.title, step.description)
-                  ) : (
-                    <View style={getStepIconStyle(stepStatus, size) as React.CSSProperties}>•</View>
-                  )
-                ) : (
-                  <View style={getStepIconStyle(stepStatus, size) as React.CSSProperties}>
-                    {step.icon || index + 1}
-                  </View>
-                )}
-                <View style={getStepContentStyle() as React.CSSProperties}>
-                  <Text style={getStepTitleStyle(stepStatus) as React.CSSProperties}>{step.title}</Text>
-                  {step.description && (
-                    <Text style={getStepDescriptionStyle() as React.CSSProperties}>{step.description}</Text>
-                  )}
-                </View>
-              </View>
-              {!isLast && <View style={getStepTailStyle(direction, stepStatus === 'finish') as React.CSSProperties} />}
-            </View>
-          );
-        })}
-      </View>
-    );
-  },
-);
-
-Steps.displayName = 'Steps';
-
-export default Steps;

package/src/components/navigation/Steps/Steps.types.ts

@@ -1,47 +0,0 @@
-import { ReactNode } from 'react';
-import { ViewProps } from '@tarojs/components';
-
-export type StepStatus = 'wait' | 'process' | 'finish' | 'error';
-export type StepDirection = 'horizontal' | 'vertical';
-
-export interface Step {
-  title: ReactNode;
-  description?: ReactNode;
-  status?: 'wait' | 'process' | 'finish' | 'error';
-  icon?: ReactNode;
-  disabled?: boolean;
-}
-
-export interface StepsProps extends ViewProps {
-  className?: string;
-  style?: React.CSSProperties;
-  current?: number;
-  direction?: 'horizontal' | 'vertical';
-  labelPlacement?: 'horizontal' | 'vertical';
-  progressDot?: boolean | ((_index: number, status: string, title: ReactNode, description: ReactNode) => ReactNode);
-  initial?: number;
-  status?: 'wait' | 'process' | 'finish' | 'error';
-  size?: 'default' | 'small';
-  items?: Step[];
-  children?: ReactNode;
-  onChange?: (_current: number) => void;
-}
-
-export interface StepsRef {
-  getSteps: () => HTMLDivElement | null;
-}
-
-export interface StepProps extends ViewProps {
-  className?: string;
-  style?: React.CSSProperties;
-  title: ReactNode;
-  description?: ReactNode;
-  status?: 'wait' | 'process' | 'finish' | 'error';
-  icon?: ReactNode;
-  disabled?: boolean;
-  stepNumber?: number;
-}
-
-export interface StepRef {
-  getStep: () => HTMLDivElement | null;
-}

package/src/components/navigation/Steps/index.tsx

@@ -1,3 +0,0 @@
-export { Steps } from './Steps';
-export type { StepsProps, StepsRef, StepProps, StepStatus, StepDirection } from './Steps.types';
-export { stepsStyles } from './Steps.styles';

package/src/components/navigation/Tabs/Tabs.styles.ts

@@ -1,199 +0,0 @@
-// import { Platform } from '@tarojs/taro';
-import type { TabsProps, TabPosition, TabType, TabSize } from './Tabs.types';
-
-/** Tabs组件样式管理器 */
-export const tabsStyles = {
-  /** 尺寸映射表 */
-  SIZE_MAP: {
-    small: 32,
-    medium: 40,
-    large: 48,
-    default: 40,
-  } as const,
-
-  /** 位置映射表 */
-  POSITION_MAP: {
-    top: 'column',
-    right: 'row-reverse',
-    bottom: 'column-reverse',
-    left: 'row',
-  } as const,
-
-  /**
-   * 获取基础样式
-   */
-  getBaseStyle: (props: TabsProps): React.CSSProperties => {
-    const { position = 'top', centered = false, style = {} } = props;
-
-    // 计算方向
-    const flexDirection = tabsStyles['POSITION_MAP'][position];
-
-    // 计算对齐方式
-    const alignItems = centered ? 'center' : 'flex-start';
-
-    return {
-      display: 'flex',
-      flexDirection,
-      alignItems,
-      width: '100%',
-      height: '100%',
-      boxSizing: 'border-box',
-      ...style,
-    };
-  },
-
-  /**
-   * 获取类名
-   */
-  getClassName: (props: TabsProps): string => {
-    const { position = 'top', type = 'line', size = 'default', centered = false, className = '' } = props;
-
-    const baseClass = 'taro-uno-tabs';
-    const positionClass = `${baseClass}--${position}`;
-    const typeClass = `${baseClass}--${type}`;
-    const sizeClass = `${baseClass}--${size}`;
-    const centeredClass = centered ? `${baseClass}--centered` : '';
-
-    return [baseClass, positionClass, typeClass, sizeClass, centeredClass, className].filter(Boolean).join(' ');
-  },
-
-  /**
-   * 获取Tab栏样式
-   */
-  getTabBarStyle: (position: TabPosition, type: TabType): React.CSSProperties => {
-    const isVertical = position === 'left' || position === 'right';
-
-    return {
-      display: 'flex',
-      flexDirection: isVertical ? 'column' : 'row',
-      flexShrink: 0,
-      borderBottom: type === 'line' && !isVertical ? '1px solid var(--border-color)' : 'none',
-      borderRight: type === 'line' && isVertical ? '1px solid var(--border-color)' : 'none',
-      borderTop: type === 'line' && position === 'bottom' ? '1px solid var(--border-color)' : 'none',
-      borderLeft: type === 'line' && position === 'right' ? '1px solid var(--border-color)' : 'none',
-      backgroundColor: 'var(--background-card)',
-      overflow: isVertical ? 'auto' : 'hidden',
-    };
-  },
-
-  /**
-   * 获取Tab项样式
-   */
-  getTabItemStyle: (props: {
-    active: boolean;
-    disabled: boolean;
-    type: TabType;
-    size: TabSize;
-    position: TabPosition;
-  }): React.CSSProperties => {
-    const { active, disabled, type, size, position } = props;
-    const isVertical = position === 'left' || position === 'right';
-
-    const height = tabsStyles.SIZE_MAP[size as keyof typeof tabsStyles.SIZE_MAP];
-
-    return {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: '0 16px',
-      height: isVertical ? 'auto' : `${height}px`,
-      minWidth: isVertical ? '100px' : 'auto',
-      minHeight: isVertical ? `${height}px` : 'auto',
-      cursor: disabled ? 'not-allowed' : 'pointer',
-      color: active ? 'var(--primary-color)' : disabled ? 'var(--text-color-disabled)' : 'var(--text-color)',
-      backgroundColor: active && type === 'card' ? 'var(--background-color)' : 'transparent',
-      border: type === 'card' ? '1px solid var(--border-color)' : 'none',
-      borderBottom: type === 'line' && active && !isVertical ? '2px solid var(--primary-color)' : 'none',
-      borderRight: type === 'line' && active && isVertical ? '2px solid var(--primary-color)' : 'none',
-      transition: 'all 0.3s ease',
-      opacity: disabled ? 0.5 : 1,
-      position: 'relative',
-      boxSizing: 'border-box',
-    };
-  },
-
-  /**
-   * 获取内容区域样式
-   */
-  getContentStyle: (_position: TabPosition, animated: boolean): React.CSSProperties => {
-    // const isVertical = position === 'left' || position === 'right'; // Commented out - unused
-
-    return {
-      flex: 1,
-      overflow: 'hidden',
-      position: 'relative',
-      transition: animated ? 'all 0.3s ease' : 'none',
-    };
-  },
-
-  /**
-   * 获取Tab内容样式
-   */
-  getTabContentStyle: (active: boolean, animated: boolean): React.CSSProperties => {
-    return {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      opacity: active ? 1 : 0,
-      visibility: active ? 'visible' : 'hidden',
-      transition: animated ? 'opacity 0.3s ease' : 'none',
-      overflow: 'auto',
-    };
-  },
-
-  /**
-   * 获取添加按钮样式
-   */
-  getAddButtonStyle: (size: TabSize): React.CSSProperties => {
-    const height = tabsStyles.SIZE_MAP[size as keyof typeof tabsStyles.SIZE_MAP];
-
-    return {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: `${height}px`,
-      height: `${height}px`,
-      border: '1px dashed var(--border-color)',
-      borderRadius: '4px',
-      cursor: 'pointer',
-      color: 'var(--text-color-secondary)',
-      transition: 'all 0.3s ease',
-      backgroundColor: 'transparent',
-    };
-  },
-
-  /**
-   * 获取删除按钮样式
-   */
-  getRemoveButtonStyle: (): React.CSSProperties => {
-    return {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: '16px',
-      height: '16px',
-      marginLeft: '8px',
-      borderRadius: '50%',
-      backgroundColor: 'var(--error-color)',
-      color: 'white',
-      fontSize: '12px',
-      cursor: 'pointer',
-      transition: 'all 0.3s ease',
-    };
-  },
-
-  /**
-   * 获取徽标样式
-   */
-  getBadgeStyle: (): React.CSSProperties => {
-    return {
-      position: 'absolute',
-      top: '4px',
-      right: '4px',
-      transform: 'translate(50%, -50%)',
-      zIndex: 1,
-    };
-  },
-};