taro-uno-ui 0.9.0 → 1.0.0

package/src/components/form/index.tsx

@@ -1,43 +1,76 @@
 /**
- * Taro-Uno Form Components
- * 表单组件库统一导出文件
- * 提供完整的表单组件访问接口
+ * Taro-Uno 表单组件库
+ * 提供完整的表单组件访问接口，包括输入框、选择器、日期选择器等
  */
 
-// 导出表单组件
+// 导出 Form 组件
 export { Form } from './Form';
-export type { FormContext } from './Form';
-export * from './Input';
-export * from './Select';
-export * from './DatePicker';
-export * from './Radio';
-export * from './Checkbox';
-export * from './Switch';
-// export * from './Rate'; // 组件暂不存在
-export * from './Slider';
-export * from './Upload';
-// export * from './AutoComplete'; // 组件暂不存在
-export * from './Textarea';
-export * from './InputNumber';
-export * from './TimePicker';
-export * from './Cascader';
-export * from './Transfer';
-
-// 导出类型定义
-// export type * from './Form/types'; // 暂不存在
-
-// 导出样式工具
+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';
-export { checkboxStyles } from './Checkbox/Checkbox.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';
-export { datePickerStyles } from './DatePicker/DatePicker.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';
 
 // 表单组件版本
@@ -55,10 +88,8 @@ export const FORM_CONFIG = {
     checkbox: ['Checkbox', 'CheckboxGroup'],
     radio: ['Radio', 'RadioGroup'],
     switch: ['Switch'],
-    rate: ['Rate'],
     slider: ['Slider'],
     upload: ['Upload'],
-    autoComplete: ['AutoComplete'],
     textarea: ['Textarea'],
     inputNumber: ['InputNumber'],
     timePicker: ['TimePicker'],

package/src/components/index.tsx

@@ -100,7 +100,6 @@ export const ComponentLibraryUtils = {
   },
 };
 
-
 // 同步获取组件（兼容性处理）
 let cachedComponents: any = null;
 const getComponentsSync = () => {

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

@@ -12,26 +12,31 @@ export const affixStyles = {
   affixRelative: {
     position: 'relative' as const,
   },
-}
+};
 
-export const getAffixStyle = (affixed: boolean, position?: 'top' | 'bottom', offset?: number, customStyle?: React.CSSProperties) => {
-  const style: React.CSSProperties = { ...affixStyles.affix }
+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)
+    Object.assign(style, affixStyles.affixTop);
   }
   if (affixed && position === 'bottom') {
-    Object.assign(style, affixStyles.affixBottom)
+    Object.assign(style, affixStyles.affixBottom);
   }
   if (offset !== undefined && position) {
-    style[position] = offset
+    style[position] = offset;
   } else if (offset !== undefined) {
-    style.top = offset
+    style.top = offset;
   }
 
-  return { ...style, ...customStyle }
-}
+  return { ...style, ...customStyle };
+};
 
 export const getRelativeStyle = (customStyle?: React.CSSProperties) => {
-  return { ...affixStyles.affixRelative, ...customStyle }
-}
+  return { ...affixStyles.affixRelative, ...customStyle };
+};

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

@@ -1,91 +1,83 @@
-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'
+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)
+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 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 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 top = offset?.top ?? offsetTop ?? 0;
+      const bottom = offset?.bottom ?? offsetBottom ?? 0;
 
-    const shouldBeAffixedTop = scrollTop >= containerRect.top - top
-    const shouldBeAffixedBottom = scrollTop + targetHeight <= containerRect.bottom + bottom
+      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])
+      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,
-  }))
+    useImperativeHandle(ref, () => ({
+      getAffix: () => affixRef.current,
+      updatePosition,
+    }));
 
-  useEffect(() => {
-    updatePosition()
+    useEffect(() => {
+      updatePosition();
 
-    const targetElement = target?.() || window
-    targetElement.addEventListener('scroll', updatePosition)
-    targetElement.addEventListener('resize', updatePosition)
+      const targetElement = target?.() || window;
+      targetElement.addEventListener('scroll', updatePosition);
+      targetElement.addEventListener('resize', updatePosition);
 
-    return () => {
-      targetElement.removeEventListener('scroll', updatePosition)
-      targetElement.removeEventListener('resize', updatePosition)
-    }
-  }, [updatePosition, target])
+      return () => {
+        targetElement.removeEventListener('scroll', updatePosition);
+        targetElement.removeEventListener('resize', updatePosition);
+      };
+    }, [updatePosition, target]);
 
-  useEffect(() => {
-    onChange?.(affixed)
-  }, [affixed, onChange])
+    useEffect(() => {
+      onChange?.(affixed);
+    }, [affixed, onChange]);
 
-  const affixStyle = getAffixStyle(affixed, position, offset?.top ?? offsetTop ?? offset?.bottom ?? offsetBottom, style)
-  const finalStyle = {
-    ...affixStyle,
-    ...style,
-  }
+    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}
+    return (
+      <View ref={containerRef} style={getRelativeStyle()}>
+        <View ref={affixRef} className={className} style={finalStyle} {...props}>
+          {children}
+        </View>
       </View>
-    </View>
-  )
-})
+    );
+  },
+);
 
-Affix.displayName = 'Affix'
+Affix.displayName = 'Affix';
 
-export default Affix
+export default Affix;

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

@@ -1,29 +1,29 @@
-import { ReactNode } from 'react'
-import { ViewProps } from '@tarojs/components'
+import { ReactNode } from 'react';
+import { ViewProps } from '@tarojs/components';
 
 export interface AffixOffset {
-  top?: number
-  bottom?: number
-  left?: number
-  right?: number
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
 }
 
 export interface AffixTarget {
-  (): HTMLElement | Window | null
+  (): 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
+  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
-}
+  getAffix: () => HTMLDivElement | null;
+  updatePosition: () => void;
+}

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

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

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

@@ -100,27 +100,27 @@ export const colStyles = {
     // 计算间距
     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),
-      }
+          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,
-        }
+            flex: flex === 'auto' ? '1' : flex === 'none' ? 'none' : flex,
+          }
         : {};
 
     return {
@@ -142,7 +142,8 @@ export const colStyles = {
 
     const baseClass = 'taro-uno-col';
     const spanClass = `${baseClass}--span-${span}`;
-    const offsetClass = (typeof offset === 'number' ? offset : parseInt(offset)) > 0 ? `${baseClass}--offset-${offset}` : '';
+    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(' ');
@@ -161,7 +162,6 @@ export const colStyles = {
         // 这里需要配合CSS-in-JS库来处理响应式样式
         // 暂时返回空对象
         // Breakpoint: breakpoint, value: colStyles['getBreakpointValue'](breakpoint)
-
       }
     });
 

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

@@ -2,7 +2,9 @@ import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { Col } from '../Col'
 import { Row } from '../Row'
-import type { ColProps, ColRef } from '../Col.types'
+import type { ColProps, ColRef } from './Col.types'
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest'
+import '@testing-library/jest-dom'
 
 // Mock Taro components
 vi.mock('@tarojs/components', () => ({
@@ -13,7 +15,7 @@ vi.mock('@tarojs/components', () => ({
 vi.mock('../Col.styles', () => ({
   colStyles: {
     getBaseStyle: (props: any) => ({
-      flex: `0 0 ${(props.span / 24) * 100}%`,
+      flexBasis: `0 0 ${(props.span / 24) * 100}%`,
       maxWidth: `${(props.span / 24) * 100}%`,
       marginLeft: props.offset > 0 ? `${(props.offset / 24) * 100}%` : '0',
       order: props.order || 0,
@@ -212,7 +214,7 @@ describe('Col Component', () => {
       render(<Col ref={mockRef} data-testid="col">Ref Span Test</Col>)
 
       if (mockRef.current) {
-        expect(() => mockRef.current.setSpan(12)).not.toThrow()
+        expect(() => mockRef.current!.setSpan(12)).not.toThrow()
       }
     })
 
@@ -220,7 +222,7 @@ describe('Col Component', () => {
       render(<Col ref={mockRef} data-testid="col">Ref Offset Test</Col>)
 
       if (mockRef.current) {
-        expect(() => mockRef.current.setOffset(6)).not.toThrow()
+        expect(() => mockRef.current!.setOffset(6)).not.toThrow()
       }
     })
 
@@ -228,7 +230,7 @@ describe('Col Component', () => {
       render(<Col ref={mockRef} data-testid="col">Ref Order Test</Col>)
 
       if (mockRef.current) {
-        expect(() => mockRef.current.setOrder(2)).not.toThrow()
+        expect(() => mockRef.current!.setOrder(2)).not.toThrow()
       }
     })
 

package/src/components/layout/Col/Col.tsx

@@ -5,19 +5,7 @@ import type { ColProps, ColRef, ColSpan, ColOffset, ColOrder } from './Col.types
 
 /** Col组件 */
 export const ColComponent = forwardRef<ColRef, ColProps>((props, ref) => {
-  const {
-    children,
-    span = 24,
-    offset = 0,
-    order = 0,
-    gutter = 0,
-    flex,
-    className,
-    style,
-    onClick,
-    responsive,
-    ...restProps
-  } = props;
+  const { children, span = 24, offset = 0, order = 0, gutter = 0, flex, className, style, onClick, responsive } = props;
 
   const colRef = useRef<typeof View>(null);
   const [internalSpan, setInternalSpan] = useState<ColSpan>(span);
@@ -44,7 +32,7 @@ export const ColComponent = forwardRef<ColRef, ColProps>((props, ref) => {
 
   // 处理点击事件
   const handleClick = useCallback(
-    (event: React.MouseEvent) => {
+    (event: any) => {
       onClick?.(event);
     },
     [onClick],
@@ -96,13 +84,7 @@ export const ColComponent = forwardRef<ColRef, ColProps>((props, ref) => {
   );
 
   return (
-    <View
-      ref={colRef}
-      className={colClassName}
-      style={{ ...colStyle, ...responsiveStyle }}
-      onClick={handleClick}
-      {...restProps}
-    >
+    <View ref={colRef} className={colClassName} style={{ ...colStyle, ...responsiveStyle }} onClick={handleClick}>
       {children}
     </View>
   );

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

@@ -44,7 +44,7 @@ export interface ColProps extends BaseComponentProps {
   /** 从父组件Row继承的间距 */
   gutter?: RowGutter;
   /** 柔性布局 */
-  flex?: number | 'auto' | 'none';
+  flex?: number | string | 'auto' | 'none';
   /** 点击事件 */
   onClick?: (_event: React.MouseEvent) => void;
   /** 响应式断点 */

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

@@ -61,7 +61,9 @@ export const containerStyles = {
     // 计算最大宽度
     const finalMaxWidth =
       maxWidth !== undefined
-        ? typeof maxWidth === 'number' ? `${maxWidth}px` : containerStyles['parseSize'](maxWidth as Size)
+        ? typeof maxWidth === 'number'
+          ? `${maxWidth}px`
+          : containerStyles['parseSize'](maxWidth as Size)
         : size === 'fluid'
           ? 'none'
           : containerStyles.SIZE_MAP[size as keyof typeof containerStyles.SIZE_MAP];

package/src/components/layout/Container/Container.tsx

@@ -18,9 +18,6 @@ export const ContainerComponent = forwardRef<ContainerRef, ContainerProps>((prop
     className,
     style,
     onClick,
-    onScroll,
-    responsive,
-    ...restProps
   } = props;
 
   const containerRef = useRef<any>(null);
@@ -53,14 +50,12 @@ export const ContainerComponent = forwardRef<ContainerRef, ContainerProps>((prop
 
   // 处理点击事件
   const handleClick = useCallback(
-    (event: React.MouseEvent) => {
+    (event: any) => {
       onClick?.(event);
     },
     [onClick],
   );
 
-  
-  
   // 计算样式
   const containerStyle = containerStyles['getBaseStyle']({
     size: internalSize,
@@ -74,9 +69,6 @@ export const ContainerComponent = forwardRef<ContainerRef, ContainerProps>((prop
     style: style || {},
   });
 
-  // 计算响应式样式
-  const responsiveStyle = responsive ? containerStyles['getResponsiveStyle'](responsive) : {};
-
   // 计算类名
   const containerClassName = containerStyles['getClassName']({
     size: internalSize,
@@ -116,9 +108,8 @@ export const ContainerComponent = forwardRef<ContainerRef, ContainerProps>((prop
     <View
       ref={containerRef}
       className={containerClassName}
-      style={{ ...containerStyle, ...responsiveStyle }}
+      style={{ ...containerStyle, ...style }}
       onClick={handleClick}
-      {...restProps}
     >
       {children}
     </View>