taro-uno-ui 1.0.0 → 1.0.2

package/src/components/form/index.tsx

@@ -1,152 +0,0 @@
-/**
- * Taro-Uno 表单组件库
- * 提供完整的表单组件访问接口，包括输入框、选择器、日期选择器等
- */
-
-// 导出 Form 组件
-export { Form } from './Form';
-export type { FormContext, FormProps, FormRef, FormItemProps } from './Form/Form.types';
-export { formStyles } from './Form/Form.styles';
-
-// 导出 Input 组件
-export { Input } from './Input';
-export type { InputProps, InputRef, InputType, InputSize } from './Input/Input.types';
-export { inputStyles } from './Input/Input.styles';
-
-// 导出 Select 组件
-export { Select } from './Select';
-export type { SelectProps, SelectRef, SelectOption, SelectSize } from './Select/Select.types';
-export { selectStyles } from './Select/Select.styles';
-
-// 导出 DatePicker 组件
-export { DatePicker } from './DatePicker';
-export type { DatePickerProps, DatePickerRef, DatePickerFormat } from './DatePicker/DatePicker.types';
-export { datePickerStyles } from './DatePicker/DatePicker.styles';
-
-// 导出 Radio 组件
-export { Radio } from './Radio';
-export type { RadioProps, RadioRef, RadioGroupProps } from './Radio/Radio.types';
-export { radioStyles } from './Radio/Radio.styles';
-
-// 导出 Checkbox 组件
-export { Checkbox, CheckboxGroup } from './Checkbox';
-export type { CheckboxProps, CheckboxRef, CheckboxGroupProps } from './Checkbox/Checkbox.types';
-export { checkboxStyles } from './Checkbox/Checkbox.styles';
-
-// 导出 Switch 组件
-export { Switch } from './Switch';
-export type { SwitchProps, SwitchRef, SwitchSize } from './Switch/Switch.types';
-export { switchStyles } from './Switch/Switch.styles';
-
-// 导出 Slider 组件
-export { Slider } from './Slider';
-export type { SliderProps, SliderRef, SliderSize } from './Slider/Slider.types';
-export { sliderStyles } from './Slider/Slider.styles';
-
-// 导出 Upload 组件
-export { Upload } from './Upload';
-export type { UploadProps, UploadRef, UploadFile } from './Upload/Upload.types';
-export { uploadStyles } from './Upload/Upload.styles';
-
-// 导出 Textarea 组件
-export { Textarea } from './Textarea';
-export type { TextareaProps, TextareaRef } from './Textarea/Textarea.types';
-export { textareaStyles } from './Textarea/Textarea.styles';
-
-// 导出 InputNumber 组件
-export { InputNumber } from './InputNumber';
-export type { InputNumberProps, InputNumberRef, InputNumberSize } from './InputNumber/InputNumber.types';
-export { inputNumberStyles } from './InputNumber/InputNumber.styles';
-
-// 导出 TimePicker 组件
-export { TimePicker } from './TimePicker';
-export type { TimePickerProps, TimePickerRef, TimePickerFormat } from './TimePicker/TimePicker.types';
-export { timePickerStyles } from './TimePicker/TimePicker.styles';
-
-// 导出 Cascader 组件
-export { Cascader } from './Cascader';
-export type { CascaderProps, CascaderRef, CascaderOption } from './Cascader/Cascader.types';
-export { cascaderStyles } from './Cascader/Cascader.styles';
-
-// 导出 Transfer 组件
-export { Transfer } from './Transfer';
-export type { TransferProps, TransferRef } from './Transfer/Transfer.types';
-export { transferStyles } from './Transfer/Transfer.styles';
-
-// 表单组件版本
-export const FORM_VERSION = '1.0.0';
-
-// 表单组件库配置
-export const FORM_CONFIG = {
-  version: FORM_VERSION,
-  platform: 'taro',
-  components: {
-    form: ['Form', 'FormItem'],
-    input: ['Input'],
-    select: ['Select'],
-    datePicker: ['DatePicker'],
-    checkbox: ['Checkbox', 'CheckboxGroup'],
-    radio: ['Radio', 'RadioGroup'],
-    switch: ['Switch'],
-    slider: ['Slider'],
-    upload: ['Upload'],
-    textarea: ['Textarea'],
-    inputNumber: ['InputNumber'],
-    timePicker: ['TimePicker'],
-    cascader: ['Cascader'],
-    transfer: ['Transfer'],
-  },
-  features: {
-    validation: true,
-    accessibility: true,
-    theme: true,
-    responsive: true,
-    typescript: true,
-  },
-};
-
-// 表单组件库工具函数
-export const FormLibraryUtils = {
-  /**
-   * 获取表单组件库版本
-   */
-  getVersion: (): string => FORM_VERSION,
-
-  /**
-   * 获取表单组件库配置
-   */
-  getConfig: () => FORM_CONFIG,
-
-  /**
-   * 检查组件是否存在
-   */
-  hasComponent: (componentName: string): boolean => {
-    return Object.values(FORM_CONFIG.components).flat().includes(componentName);
-  },
-
-  /**
-   * 获取组件分类
-   */
-  getComponentCategory: (componentName: string): string | null => {
-    for (const [category, components] of Object.entries(FORM_CONFIG.components)) {
-      if (components.includes(componentName)) {
-        return category;
-      }
-    }
-    return null;
-  },
-
-  /**
-   * 获取所有组件列表
-   */
-  getAllComponents: (): string[] => {
-    return Object.values(FORM_CONFIG.components).flat();
-  },
-
-  /**
-   * 获取分类组件列表
-   */
-  getCategoryComponents: (category: string): string[] => {
-    return FORM_CONFIG.components[category as keyof typeof FORM_CONFIG.components] || [];
-  },
-};

package/src/components/index.tsx

@@ -1,145 +0,0 @@
-/**
- * Taro-Uno UI 组件库统一导出文件
- * 提供完整的组件库访问接口
- */
-
-// 导出基础组件
-export * from './basic';
-
-// 导出表单组件
-export * from './form';
-
-// 导出展示组件
-export * from './display';
-
-// 导出反馈组件
-export * from './feedback';
-
-// 导出布局组件
-export * from './layout';
-
-// 导出导航组件
-export * from './navigation';
-
-// 导出通用组件和提供者
-export * from './common';
-
-// 组件库版本
-export const VERSION = '1.0.0';
-
-// 组件库配置
-export const CONFIG = {
-  version: VERSION,
-  theme: 'light',
-  platform: 'taro',
-  components: {
-    basic: ['Button', 'Icon', 'Text', 'Divider', 'Typography'],
-    display: ['Avatar', 'Badge', 'Card', 'List', 'Rate', 'Table', 'Tag', 'Timeline', 'Calendar', 'Carousel'],
-    feedback: ['Modal', 'Message', 'Notification', 'Loading', 'Progress', 'Popconfirm', 'Tooltip', 'Drawer', 'Result'],
-    form: [
-      'Form',
-      'Input',
-      'Select',
-      'DatePicker',
-      'Radio',
-      'Checkbox',
-      'Switch',
-      'Rate',
-      'Slider',
-      'Upload',
-      'AutoComplete',
-    ],
-    layout: ['Grid', 'Layout', 'Space', 'Affix'],
-    navigation: ['Menu', 'Tabs', 'Pagination', 'Breadcrumb', 'Steps', 'PageHeader'],
-  },
-};
-
-// 组件库工具函数
-export const ComponentLibraryUtils = {
-  /**
-   * 获取组件库版本
-   */
-  getVersion: (): string => VERSION,
-
-  /**
-   * 获取组件库配置
-   */
-  getConfig: () => CONFIG,
-
-  /**
-   * 检查组件是否存在
-   */
-  hasComponent: (componentName: string): boolean => {
-    return Object.values(CONFIG.components).flat().includes(componentName);
-  },
-
-  /**
-   * 获取组件分类
-   */
-  getComponentCategory: (componentName: string): string | null => {
-    for (const [category, components] of Object.entries(CONFIG.components)) {
-      if (components.includes(componentName)) {
-        return category;
-      }
-    }
-    return null;
-  },
-
-  /**
-   * 获取所有组件列表
-   */
-  getAllComponents: (): string[] => {
-    return Object.values(CONFIG.components).flat();
-  },
-
-  /**
-   * 获取分类组件列表
-   */
-  getCategoryComponents: (category: string): string[] => {
-    return CONFIG.components[category as keyof typeof CONFIG.components] || [];
-  },
-};
-
-// 同步获取组件（兼容性处理）
-let cachedComponents: any = null;
-const getComponentsSync = () => {
-  if (!cachedComponents) {
-    try {
-      const basic = require('./basic');
-      cachedComponents = {
-        Button: basic.Button,
-        Icon: basic.Icon,
-        Text: basic.Text,
-        Divider: basic.Divider,
-      };
-    } catch (error) {
-      console.warn('Failed to load basic components synchronously:', error);
-      cachedComponents = {};
-    }
-  }
-  return cachedComponents;
-};
-
-// 默认导出
-export default {
-  // 基础组件
-  get Button() {
-    return getComponentsSync().Button;
-  },
-  get Icon() {
-    return getComponentsSync().Icon;
-  },
-  get Text() {
-    return getComponentsSync().Text;
-  },
-  get Divider() {
-    return getComponentsSync().Divider;
-  },
-
-  // 工具函数
-  Utils: ComponentLibraryUtils,
-
-  // 配置
-  CONFIG,
-  VERSION,
-};

package/src/components/layout/Affix/Affix.styles.ts

@@ -1,42 +0,0 @@
-export const affixStyles = {
-  affix: {
-    position: 'fixed' as const,
-    zIndex: 10,
-  },
-  affixTop: {
-    top: 0,
-  },
-  affixBottom: {
-    bottom: 0,
-  },
-  affixRelative: {
-    position: 'relative' as const,
-  },
-};
-
-export const getAffixStyle = (
-  affixed: boolean,
-  position?: 'top' | 'bottom',
-  offset?: number,
-  customStyle?: React.CSSProperties,
-) => {
-  const style: React.CSSProperties = { ...affixStyles.affix };
-
-  if (affixed && position === 'top') {
-    Object.assign(style, affixStyles.affixTop);
-  }
-  if (affixed && position === 'bottom') {
-    Object.assign(style, affixStyles.affixBottom);
-  }
-  if (offset !== undefined && position) {
-    style[position] = offset;
-  } else if (offset !== undefined) {
-    style.top = offset;
-  }
-
-  return { ...style, ...customStyle };
-};
-
-export const getRelativeStyle = (customStyle?: React.CSSProperties) => {
-  return { ...affixStyles.affixRelative, ...customStyle };
-};

package/src/components/layout/Affix/Affix.test.tsx

@@ -1,10 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import React from 'react'
-import { Affix } from './Affix'
-
-describe('Affix', () => {
-  it('renders children', () => {
-    render(<Affix><div>固定内容</div></Affix>)
-    expect(screen.getByText('固定内容')).toBeInTheDocument()
-  })
-})

package/src/components/layout/Affix/Affix.tsx

@@ -1,83 +0,0 @@
-import React, { forwardRef, useImperativeHandle, useState, useEffect, useCallback } from 'react';
-import { View } from '@tarojs/components';
-import { AffixProps, AffixRef } from './Affix.types';
-import { getAffixStyle, getRelativeStyle } from './Affix.styles';
-
-export const Affix = forwardRef<AffixRef, AffixProps>(
-  ({ className, style, children, offset, offsetTop, offsetBottom, target, onChange, ...props }, ref) => {
-    const [affixed, setAffixed] = useState(false);
-    const [position, setPosition] = useState<'top' | 'bottom'>('top');
-    const affixRef = React.useRef<HTMLDivElement>(null);
-    const containerRef = React.useRef<HTMLDivElement>(null);
-
-    const updatePosition = useCallback(() => {
-      if (!affixRef.current || !containerRef.current) return;
-
-      const targetElement = target?.() || window;
-      const containerRect = containerRef.current.getBoundingClientRect();
-      const scrollTop = targetElement instanceof Window ? targetElement.scrollY : targetElement.scrollTop;
-      const targetHeight = targetElement instanceof Window ? targetElement.innerHeight : targetElement.clientHeight;
-
-      const top = offset?.top ?? offsetTop ?? 0;
-      const bottom = offset?.bottom ?? offsetBottom ?? 0;
-
-      const shouldBeAffixedTop = scrollTop >= containerRect.top - top;
-      const shouldBeAffixedBottom = scrollTop + targetHeight <= containerRect.bottom + bottom;
-
-      if (shouldBeAffixedTop) {
-        setAffixed(true);
-        setPosition('top');
-      } else if (shouldBeAffixedBottom) {
-        setAffixed(true);
-        setPosition('bottom');
-      } else {
-        setAffixed(false);
-      }
-    }, [offset, offsetTop, offsetBottom, target]);
-
-    useImperativeHandle(ref, () => ({
-      getAffix: () => affixRef.current,
-      updatePosition,
-    }));
-
-    useEffect(() => {
-      updatePosition();
-
-      const targetElement = target?.() || window;
-      targetElement.addEventListener('scroll', updatePosition);
-      targetElement.addEventListener('resize', updatePosition);
-
-      return () => {
-        targetElement.removeEventListener('scroll', updatePosition);
-        targetElement.removeEventListener('resize', updatePosition);
-      };
-    }, [updatePosition, target]);
-
-    useEffect(() => {
-      onChange?.(affixed);
-    }, [affixed, onChange]);
-
-    const affixStyle = getAffixStyle(
-      affixed,
-      position,
-      offset?.top ?? offsetTop ?? offset?.bottom ?? offsetBottom,
-      style,
-    );
-    const finalStyle = {
-      ...affixStyle,
-      ...style,
-    };
-
-    return (
-      <View ref={containerRef} style={getRelativeStyle()}>
-        <View ref={affixRef} className={className} style={finalStyle} {...props}>
-          {children}
-        </View>
-      </View>
-    );
-  },
-);
-
-Affix.displayName = 'Affix';
-
-export default Affix;

package/src/components/layout/Affix/Affix.types.ts

@@ -1,29 +0,0 @@
-import { ReactNode } from 'react';
-import { ViewProps } from '@tarojs/components';
-
-export interface AffixOffset {
-  top?: number;
-  bottom?: number;
-  left?: number;
-  right?: number;
-}
-
-export interface AffixTarget {
-  (): HTMLElement | Window | null;
-}
-
-export interface AffixProps extends ViewProps {
-  className?: string;
-  style?: React.CSSProperties;
-  children?: ReactNode;
-  offset?: AffixOffset;
-  offsetTop?: number;
-  offsetBottom?: number;
-  target?: AffixTarget;
-  onChange?: (_affixed: boolean) => void;
-}
-
-export interface AffixRef {
-  getAffix: () => HTMLDivElement | null;
-  updatePosition: () => void;
-}

package/src/components/layout/Affix/index.tsx

@@ -1,3 +0,0 @@
-export { Affix } from './Affix';
-export type { AffixProps, AffixRef, AffixOffset, AffixTarget } from './Affix.types';
-export { affixStyles } from './Affix.styles';

package/src/components/layout/Col/Col.styles.ts

@@ -1,185 +0,0 @@
-import type { ColProps } from './Col.types';
-import type { RowGutter } from '../Row/Row.types';
-import type { Size, CSSUnit } from '../../../types';
-
-/** Col组件样式管理器 */
-export const colStyles = {
-  /** 尺寸映射表 */
-  SIZE_MAP: {
-    small: 8,
-    medium: 16,
-    large: 24,
-    default: 16,
-  } as const,
-
-  /**
-   * 解析尺寸值
-   */
-  parseSize: (size: any): number | string => {
-    if (typeof size === 'number') {
-      return `${size}px`;
-    }
-
-    if (typeof size === 'string') {
-      if (size in colStyles.SIZE_MAP) {
-        return `${colStyles.SIZE_MAP[size as keyof typeof colStyles.SIZE_MAP]}px`;
-      }
-      return size;
-    }
-
-    return `${colStyles.SIZE_MAP.default}px`;
-  },
-
-  /**
-   * 提取数值部分（用于计算）
-   */
-  extractNumericValue: (value: string | number): number => {
-    if (typeof value === 'number') {
-      return value;
-    }
-    // 提取数字部分，支持各种CSS单位
-    const match = value.match(/^(-?\d*\.?\d+)/);
-    return match && match[1] ? parseFloat(match[1]) : 0;
-  },
-
-  /**
-   * 分割数值和单位
-   */
-  splitValueAndUnit: (value: string | number): { value: number; unit: string } => {
-    if (typeof value === 'number') {
-      return { value, unit: 'px' };
-    }
-    const match = value.match(/^(-?\d*\.?\d+)(.*)$/);
-    if (match && match[1]) {
-      return { value: parseFloat(match[1]), unit: match[2] || 'px' };
-    }
-    return { value: 0, unit: 'px' };
-  },
-
-  /**
-   * 解析尺寸值并除以2（用于间距计算）
-   */
-  parseSizeHalf: (size: Size | number | `${number}${CSSUnit}`): string => {
-    const parsedSize = colStyles['parseSize'](size);
-    if (typeof parsedSize === 'number') {
-      return `${parsedSize / 2}px`;
-    }
-
-    const { value, unit } = colStyles['splitValueAndUnit'](parsedSize);
-    return `${value / 2}${unit}`;
-  },
-
-  /**
-   * 解析间距值
-   */
-  parseGutter: (gutter: RowGutter): string => {
-    if (Array.isArray(gutter)) {
-      const [rowGutter, colGutter] = gutter;
-      return `${colStyles['parseSize'](rowGutter)} ${colStyles['parseSize'](colGutter)}`;
-    }
-    return colStyles['parseSize'](gutter) as string;
-  },
-
-  /**
-   * 获取基础样式
-   */
-  getBaseStyle: (props: ColProps): React.CSSProperties => {
-    const { span = 24, offset = 0, order = 0, gutter = 0, flex, style = {} } = props;
-
-    // 计算跨度
-    const spanValue = typeof span === 'number' ? span : parseInt(span);
-    const width = `${(spanValue / 24) * 100}%`;
-
-    // 计算偏移量
-    const offsetValue = typeof offset === 'number' ? offset : parseInt(offset);
-    const marginLeft = `${(offsetValue / 24) * 100}%`;
-
-    // 计算排序
-    const orderValue = typeof order === 'number' ? order : parseInt(order);
-
-    // 计算间距
-    const gutterStyle = gutter
-      ? {
-          paddingLeft: Array.isArray(gutter)
-            ? colStyles['parseSizeHalf'](gutter[0])
-            : colStyles['parseSizeHalf'](gutter),
-          paddingRight: Array.isArray(gutter)
-            ? colStyles['parseSizeHalf'](gutter[0])
-            : colStyles['parseSizeHalf'](gutter),
-          paddingTop: Array.isArray(gutter)
-            ? colStyles['parseSizeHalf'](gutter[1])
-            : colStyles['parseSizeHalf'](gutter),
-          paddingBottom: Array.isArray(gutter)
-            ? colStyles['parseSizeHalf'](gutter[1])
-            : colStyles['parseSizeHalf'](gutter),
-        }
-      : {};
-
-    // 计算柔性布局
-    const flexStyle =
-      flex !== undefined
-        ? {
-            flex: flex === 'auto' ? '1' : flex === 'none' ? 'none' : flex,
-          }
-        : {};
-
-    return {
-      width,
-      marginLeft,
-      order: orderValue,
-      boxSizing: 'border-box',
-      ...gutterStyle,
-      ...flexStyle,
-      ...style,
-    };
-  },
-
-  /**
-   * 获取类名
-   */
-  getClassName: (props: ColProps): string => {
-    const { span = 24, offset = 0, flex, className = '' } = props;
-
-    const baseClass = 'taro-uno-col';
-    const spanClass = `${baseClass}--span-${span}`;
-    const offsetClass =
-      (typeof offset === 'number' ? offset : parseInt(offset)) > 0 ? `${baseClass}--offset-${offset}` : '';
-    const flexClass = flex !== undefined ? `${baseClass}--flex-${flex}` : '';
-
-    return [baseClass, spanClass, offsetClass, flexClass, className].filter(Boolean).join(' ');
-  },
-
-  /**
-   * 获取响应式样式
-   */
-  getResponsiveStyle: (responsive: ColProps['responsive']): React.CSSProperties => {
-    if (!responsive) return {};
-
-    const responsiveStyle: React.CSSProperties = {};
-
-    Object.entries(responsive).forEach(([_breakpoint, props]) => {
-      if (props) {
-        // 这里需要配合CSS-in-JS库来处理响应式样式
-        // 暂时返回空对象
-        // Breakpoint: breakpoint, value: colStyles['getBreakpointValue'](breakpoint)
-      }
-    });
-
-    return responsiveStyle;
-  },
-
-  /**
-   * 获取断点值
-   */
-  getBreakpointValue: (breakpoint: string): number => {
-    const breakpoints = {
-      xs: 0,
-      sm: 640,
-      md: 768,
-      lg: 1024,
-      xl: 1280,
-      xxl: 1536,
-    };
-    return breakpoints[breakpoint as keyof typeof breakpoints] || 0;
-  },
-};