taro-uno-ui 0.9.0 → 1.0.0

package/src/components/form/Cascader/hooks/useCascaderOptions.ts

@@ -6,68 +6,83 @@ import { useCascaderFieldNames } from './useCascaderFieldNames';
  * 级联选择器选项处理Hook
  * 提供高性能的选项查找和路径处理
  */
-export function useCascaderOptions(
-  options: CascaderOption[],
-  fieldNames?: CascaderProps['fieldNames']
-) {
+export function useCascaderOptions(options: CascaderOption[], fieldNames?: CascaderProps['fieldNames']) {
   const fields = useCascaderFieldNames(fieldNames);
 
   // 查找选项路径 - 使用深度优先搜索优化
-  const findOptionPath = useCallback((targetValue: CascaderValue): CascaderOption[] => {
-    if (!targetValue || targetValue.length === 0) return [];
-
-    const findPath = (
-      currentOptions: CascaderOption[],
-      valuePath: CascaderValue,
-      currentPath: CascaderOption[] = []
-    ): CascaderOption[] | null => {
-      for (const option of currentOptions) {
-        const currentPathOption = [...currentPath, option];
-        
-        if (option[fields.value as keyof typeof option] === valuePath[0]) {
-          if (valuePath.length === 1) {
-            return currentPathOption;
-          }
-          
-          const children = option[fields.children as keyof typeof option] as CascaderOption[] | undefined;
-          if (children) {
-            const found = findPath(children, valuePath.slice(1), currentPathOption);
-            if (found) return found;
+  const findOptionPath = useCallback(
+    (targetValue: CascaderValue): CascaderOption[] => {
+      if (!targetValue || targetValue.length === 0) return [];
+
+      const findPath = (
+        currentOptions: CascaderOption[],
+        valuePath: CascaderValue,
+        currentPath: CascaderOption[] = [],
+      ): CascaderOption[] | null => {
+        for (const option of currentOptions) {
+          const currentPathOption = [...currentPath, option];
+
+          if (option[fields.value as keyof typeof option] === valuePath[0]) {
+            if (valuePath.length === 1) {
+              return currentPathOption;
+            }
+
+            const children = option[fields.children as keyof typeof option] as CascaderOption[] | undefined;
+            if (children) {
+              const found = findPath(children, valuePath.slice(1), currentPathOption);
+              if (found) return found;
+            }
           }
         }
-      }
-      return null;
-    };
+        return null;
+      };
 
-    return findPath(options, targetValue) || [];
-  }, [options, fields]);
+      return findPath(options, targetValue) || [];
+    },
+    [options, fields],
+  );
 
   // 获取选项值
-  const getOptionValue = useCallback((option: CascaderOption): CascaderValue => {
-    const value = option[fields.value as keyof typeof option] as string | number;
-    return Array.isArray(value) ? value : [value];
-  }, [fields]);
+  const getOptionValue = useCallback(
+    (option: CascaderOption): CascaderValue => {
+      const value = option[fields.value as keyof typeof option] as string | number;
+      return Array.isArray(value) ? value : [value];
+    },
+    [fields],
+  );
 
   // 获取选项标签
-  const getOptionLabel = useCallback((option: CascaderOption) => {
-    return option[fields.label as keyof typeof option];
-  }, [fields]);
+  const getOptionLabel = useCallback(
+    (option: CascaderOption) => {
+      return option[fields.label as keyof typeof option];
+    },
+    [fields],
+  );
 
   // 检查选项是否有子项
-  const hasChildren = useCallback((option: CascaderOption) => {
-    const children = option[fields.children as keyof typeof option] as CascaderOption[] | undefined;
-    return children && children.length > 0;
-  }, [fields]);
+  const hasChildren = useCallback(
+    (option: CascaderOption) => {
+      const children = option[fields.children as keyof typeof option] as CascaderOption[] | undefined;
+      return children && children.length > 0;
+    },
+    [fields],
+  );
 
   // 检查选项是否禁用
-  const isOptionDisabled = useCallback((option: CascaderOption) => {
-    return !!option[fields.disabled as keyof typeof option];
-  }, [fields]);
+  const isOptionDisabled = useCallback(
+    (option: CascaderOption) => {
+      return !!option[fields.disabled as keyof typeof option];
+    },
+    [fields],
+  );
 
   // 检查选项是否为叶子节点
-  const isOptionLeaf = useCallback((option: CascaderOption) => {
-    return !!option[fields.isLeaf as keyof typeof option];
-  }, [fields]);
+  const isOptionLeaf = useCallback(
+    (option: CascaderOption) => {
+      return !!option[fields.isLeaf as keyof typeof option];
+    },
+    [fields],
+  );
 
   // 展平选项用于搜索
   const flattenOptions = useMemo(() => {
@@ -86,15 +101,18 @@ export function useCascaderOptions(
   }, [options, fields]);
 
   // 过滤选项
-  const filterOptions = useCallback((searchTerm: string): CascaderOption[] => {
-    if (!searchTerm.trim()) return [];
+  const filterOptions = useCallback(
+    (searchTerm: string): CascaderOption[] => {
+      if (!searchTerm.trim()) return [];
 
-    const term = searchTerm.toLowerCase();
-    return flattenOptions.filter(option => {
-      const label = String(getOptionLabel(option)).toLowerCase();
-      return label.includes(term);
-    });
-  }, [flattenOptions, getOptionLabel]);
+      const term = searchTerm.toLowerCase();
+      return flattenOptions.filter((option) => {
+        const label = String(getOptionLabel(option)).toLowerCase();
+        return label.includes(term);
+      });
+    },
+    [flattenOptions, getOptionLabel],
+  );
 
   return {
     findOptionPath,
@@ -106,4 +124,4 @@ export function useCascaderOptions(
     flattenOptions,
     filterOptions,
   };
-}
+}

package/src/components/form/Cascader/hooks/useCascaderState.ts

@@ -6,10 +6,7 @@ import { useCascaderOptions } from './useCascaderOptions';
  * 级联选择器状态管理Hook
  * 提供统一的状态管理逻辑
  */
-export function useCascaderState(
-  options: CascaderOption[],
-  props: CascaderProps
-) {
+export function useCascaderState(options: CascaderOption[], props: CascaderProps) {
   const {
     value: controlledValue,
     defaultValue = null,
@@ -61,28 +58,37 @@ export function useCascaderState(
   }, [open, onDropdownVisibleChange]);
 
   // 设置值
-  const setValue = useCallback((newValue: CascaderValue | null, newSelectedOptions: CascaderOption[]) => {
-    if (!isControlled) {
-      setInternalValue(newValue);
-    }
-    onChange?.(newValue, newSelectedOptions);
-  }, [isControlled, onChange]);
+  const setValue = useCallback(
+    (newValue: CascaderValue | null, newSelectedOptions: CascaderOption[]) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue, newSelectedOptions);
+    },
+    [isControlled, onChange],
+  );
 
   // 设置多选值
-  const setMultipleValue = useCallback((newValues: CascaderValue[], newSelectedOptions: CascaderOption[][]) => {
-    if (!isControlled) {
-      setInternalMultipleValues(newValues);
-    }
-    onMultipleChange?.(newValues, newSelectedOptions);
-  }, [isControlled, onMultipleChange]);
+  const setMultipleValue = useCallback(
+    (newValues: CascaderValue[], newSelectedOptions: CascaderOption[][]) => {
+      if (!isControlled) {
+        setInternalMultipleValues(newValues);
+      }
+      onMultipleChange?.(newValues, newSelectedOptions);
+    },
+    [isControlled, onMultipleChange],
+  );
 
   // 设置展开状态
-  const setOpen = useCallback((newOpen: boolean) => {
-    if (!isOpenControlled) {
-      setInternalOpen(newOpen);
-    }
-    onDropdownVisibleChange?.(newOpen);
-  }, [isOpenControlled, onDropdownVisibleChange]);
+  const setOpen = useCallback(
+    (newOpen: boolean) => {
+      if (!isOpenControlled) {
+        setInternalOpen(newOpen);
+      }
+      onDropdownVisibleChange?.(newOpen);
+    },
+    [isOpenControlled, onDropdownVisibleChange],
+  );
 
   // 清除所有状态
   const clearAll = useCallback(() => {
@@ -115,7 +121,7 @@ export function useCascaderState(
     expandedValues,
     searchValue,
     internalMultipleValues,
-    
+
     // 状态设置函数
     setValue,
     setMultipleValue,
@@ -125,9 +131,9 @@ export function useCascaderState(
     setSearchValue,
     clearAll,
     reset,
-    
+
     // 受控状态标记
     isControlled,
     isOpenControlled,
   };
-}
+}

package/src/components/form/Cascader/index.ts

@@ -22,4 +22,4 @@ export { CascaderTools } from './Cascader.types';
 export { useCascaderFieldNames, useCascaderOptions, useCascaderState } from './hooks';
 
 // Utils
-export { formatDisplayValue } from './utils';
+export { formatDisplayValue } from './utils';

package/src/components/form/Cascader/utils/formatDisplayValue.ts

@@ -7,13 +7,13 @@ import type { CascaderOption } from '../Cascader.types';
 export function formatDisplayValue(
   labels: ReactNode[],
   _selectedOptions: CascaderOption[],
-  config: { showPath?: boolean; pathSeparator?: string } = {}
+  config: { showPath?: boolean; pathSeparator?: string } = {},
 ): ReactNode {
   const { showPath = false, pathSeparator = ' / ' } = config;
-  
+
   if (!showPath || labels.length === 0) {
     return labels[labels.length - 1] || '';
   }
-  
+
   return labels.join(pathSeparator);
-}
+}

package/src/components/form/Checkbox/Checkbox.styles.ts

@@ -21,12 +21,12 @@ export class CheckboxStyles {
     CheckboxSize,
     { fontSize: number; size: number; borderRadius: number; padding: number; iconSize: number }
   > = {
-      xs: { fontSize: 20, size: 16, borderRadius: 3, padding: 4, iconSize: 12 },
-      sm: { fontSize: 24, size: 20, borderRadius: 4, padding: 6, iconSize: 14 },
-      md: { fontSize: 28, size: 24, borderRadius: 5, padding: 8, iconSize: 16 },
-      lg: { fontSize: 32, size: 28, borderRadius: 6, padding: 10, iconSize: 18 },
-      xl: { fontSize: 36, size: 32, borderRadius: 7, padding: 12, iconSize: 20 },
-    };
+    xs: { fontSize: 20, size: 16, borderRadius: 3, padding: 4, iconSize: 12 },
+    sm: { fontSize: 24, size: 20, borderRadius: 4, padding: 6, iconSize: 14 },
+    md: { fontSize: 28, size: 24, borderRadius: 5, padding: 8, iconSize: 16 },
+    lg: { fontSize: 32, size: 28, borderRadius: 6, padding: 10, iconSize: 18 },
+    xl: { fontSize: 36, size: 32, borderRadius: 7, padding: 12, iconSize: 20 },
+  };
 
   /** 状态颜色映射 */
   static readonly STATUS_COLORS: Record<
@@ -39,95 +39,95 @@ export class CheckboxStyles {
       icon: string;
     }
   > = {
-      normal: {
-        backgroundColor: '#ffffff',
-        borderColor: '#d1d5db',
-        checkColor: '#0ea5e9',
-        textColor: '#374151',
-        icon: '✓',
-      },
-      error: {
-        backgroundColor: '#fef2f2',
-        borderColor: '#ef4444',
-        checkColor: '#ef4444',
-        textColor: '#ef4444',
-        icon: '✓',
-      },
-      warning: {
-        backgroundColor: '#fffbeb',
-        borderColor: '#f59e0b',
-        checkColor: '#f59e0b',
-        textColor: '#f59e0b',
-        icon: '✓',
-      },
-      success: {
-        backgroundColor: '#f0fdf4',
-        borderColor: '#22c55e',
-        checkColor: '#22c55e',
-        textColor: '#22c55e',
-        icon: '✓',
-      },
-      disabled: {
-        backgroundColor: '#f9fafb',
-        borderColor: '#e5e7eb',
-        checkColor: '#9ca3af',
-        textColor: '#9ca3af',
-        icon: '✓',
-      },
-    };
+    normal: {
+      backgroundColor: '#ffffff',
+      borderColor: '#d1d5db',
+      checkColor: '#0ea5e9',
+      textColor: '#374151',
+      icon: '✓',
+    },
+    error: {
+      backgroundColor: '#fef2f2',
+      borderColor: '#ef4444',
+      checkColor: '#ef4444',
+      textColor: '#ef4444',
+      icon: '✓',
+    },
+    warning: {
+      backgroundColor: '#fffbeb',
+      borderColor: '#f59e0b',
+      checkColor: '#f59e0b',
+      textColor: '#f59e0b',
+      icon: '✓',
+    },
+    success: {
+      backgroundColor: '#f0fdf4',
+      borderColor: '#22c55e',
+      checkColor: '#22c55e',
+      textColor: '#22c55e',
+      icon: '✓',
+    },
+    disabled: {
+      backgroundColor: '#f9fafb',
+      borderColor: '#e5e7eb',
+      checkColor: '#9ca3af',
+      textColor: '#9ca3af',
+      icon: '✓',
+    },
+  };
 
   /** 变体样式映射 */
   static readonly VARIANT_STYLES: Record<
     CheckboxVariant,
     { backgroundColor: string; borderColor: string; borderWidth: number }
   > = {
-      default: { backgroundColor: '#ffffff', borderColor: '#d1d5db', borderWidth: 2 },
-      filled: { backgroundColor: '#f3f4f6', borderColor: '#d1d5db', borderWidth: 2 },
-      outlined: { backgroundColor: 'transparent', borderColor: '#d1d5db', borderWidth: 2 },
-    };
+    default: { backgroundColor: '#ffffff', borderColor: '#d1d5db', borderWidth: 2 },
+    filled: { backgroundColor: '#f3f4f6', borderColor: '#d1d5db', borderWidth: 2 },
+    outlined: { backgroundColor: 'transparent', borderColor: '#d1d5db', borderWidth: 2 },
+  };
 
   /** 颜色主题映射 */
   static readonly COLOR_THEMES: Record<
     CheckboxColor,
     { primary: string; secondary: string; background: string; border: string }
   > = {
-      primary: {
-        primary: '#0ea5e9',
-        secondary: '#e0f2fe',
-        background: '#ffffff',
-        border: '#0ea5e9',
-      },
-      secondary: {
-        primary: '#6b7280',
-        secondary: '#f3f4f6',
-        background: '#ffffff',
-        border: '#6b7280',
-      },
-      success: {
-        primary: '#22c55e',
-        secondary: '#dcfce7',
-        background: '#ffffff',
-        border: '#22c55e',
-      },
-      warning: {
-        primary: '#f59e0b',
-        secondary: '#fef3c7',
-        background: '#ffffff',
-        border: '#f59e0b',
-      },
-      error: {
-        primary: '#ef4444',
-        secondary: '#fee2e2',
-        background: '#ffffff',
-        border: '#ef4444',
-      },
-      info: {
-        primary: '#3b82f6',
-        secondary: '#dbeafe',
-        background: '#ffffff',
-        border: '#3b82f6',
-      },
-    };
+    primary: {
+      primary: '#0ea5e9',
+      secondary: '#e0f2fe',
+      background: '#ffffff',
+      border: '#0ea5e9',
+    },
+    secondary: {
+      primary: '#6b7280',
+      secondary: '#f3f4f6',
+      background: '#ffffff',
+      border: '#6b7280',
+    },
+    success: {
+      primary: '#22c55e',
+      secondary: '#dcfce7',
+      background: '#ffffff',
+      border: '#22c55e',
+    },
+    warning: {
+      primary: '#f59e0b',
+      secondary: '#fef3c7',
+      background: '#ffffff',
+      border: '#f59e0b',
+    },
+    error: {
+      primary: '#ef4444',
+      secondary: '#fee2e2',
+      background: '#ffffff',
+      border: '#ef4444',
+    },
+    info: {
+      primary: '#3b82f6',
+      secondary: '#dbeafe',
+      background: '#ffffff',
+      border: '#3b82f6',
+    },
+  };
 
   /** 生成复选框类名 */
   static getClassName(props: Partial<CheckboxProps>): string {
@@ -601,7 +601,6 @@ export class CheckboxStyles {
       }
     `;
   }
-
 }
 
 /** 导出样式工具 */

package/src/components/form/Checkbox/Checkbox.tsx

@@ -2,13 +2,7 @@ import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'rea
 import { Checkbox as TaroCheckbox, Text, View } from '@tarojs/components';
 import type { ITouchEvent } from '@tarojs/components';
 import { checkboxStyles } from './Checkbox.styles';
-import type {
-  CheckboxProps,
-  CheckboxRef,
-  CheckboxSize,
-  CheckboxStatus,
-  CheckboxColor,
-} from './Checkbox.types';
+import type { CheckboxProps, CheckboxRef, CheckboxSize, CheckboxStatus, CheckboxColor } from './Checkbox.types';
 
 /** 复选框组件 */
 export const CheckboxComponent = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
@@ -237,7 +231,6 @@ export const CheckboxComponent = forwardRef<CheckboxRef, CheckboxProps>((props,
     [internalDisabled, internalReadonly, onClick, handleChange],
   );
 
-  
   // 计算最终状态
   const finalStatus = internalDisabled ? 'disabled' : validationResult?.valid === false ? 'error' : internalStatus;
 
@@ -425,7 +418,7 @@ export const CheckboxComponent = forwardRef<CheckboxRef, CheckboxProps>((props,
                   target: e.target || e.currentTarget || checkboxRef.current,
                   currentTarget: e.currentTarget || checkboxRef.current,
                   type: e.type || 'change',
-                  ...e
+                  ...e,
                 };
                 onChange?.(!checked, eventObject);
               }

package/src/components/form/Checkbox/CheckboxGroup.tsx

@@ -2,11 +2,7 @@ import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'rea
 import { View, Text } from '@tarojs/components';
 import type { ITouchEvent } from '@tarojs/components';
 import { checkboxStyles } from './Checkbox.styles';
-import type {
-  CheckboxGroupProps,
-  CheckboxGroupRef,
-  CheckboxStatus,
-} from './Checkbox.types';
+import type { CheckboxGroupProps, CheckboxGroupRef, CheckboxStatus } from './Checkbox.types';
 import { Checkbox } from './Checkbox';
 
 /** 复选框组组件 */
@@ -424,7 +420,9 @@ export const CheckboxGroupComponent = forwardRef<CheckboxGroupRef, CheckboxGroup
 
       {/* 复选框组内容 */}
       {options && options.length > 0 ? (
-        <View style={{ display: 'flex', flexDirection: direction === 'horizontal' ? 'row' : 'column', flexWrap: 'wrap' }}>
+        <View
+          style={{ display: 'flex', flexDirection: direction === 'horizontal' ? 'row' : 'column', flexWrap: 'wrap' }}
+        >
           {renderOptions()}
         </View>
       ) : (
@@ -432,7 +430,9 @@ export const CheckboxGroupComponent = forwardRef<CheckboxGroupRef, CheckboxGroup
       )}
 
       {/* 计数显示 */}
-      {showCount && <Text style={checkboxStyles['getCountStyle']({ size })}>{countText(selectedCount, totalCount)}</Text>}
+      {showCount && (
+        <Text style={checkboxStyles['getCountStyle']({ size })}>{countText(selectedCount, totalCount)}</Text>
+      )}
     </View>
   );
 });

package/src/components/form/DatePicker/DatePicker.test.tsx

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