taro-uno-ui 0.9.0 → 1.0.0

package/dist/components/form/Input/Input.types.d.ts

@@ -0,0 +1,294 @@
+import type { ReactNode, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import type { ITouchEvent } from '@tarojs/components';
+/** 输入框尺寸 */
+export type InputSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** 输入框类型 */
+export type InputType = 'text' | 'password' | 'number' | 'email' | 'tel' | 'idcard' | 'digit';
+/** 输入框变体 */
+export type InputVariant = 'outlined' | 'filled' | 'underlined';
+/** 输入框状态 */
+export type InputStatus = 'normal' | 'error' | 'warning' | 'success' | 'disabled' | 'loading';
+/** 清除按钮触发时机 */
+export type ClearTrigger = 'always' | 'focus' | 'never';
+/** 输入框原生属性类型 */
+export type InputNativeProps = InputHTMLAttributes<HTMLInputElement> & TextareaHTMLAttributes<HTMLTextAreaElement>;
+/** 输入框组件属性接口 */
+export interface InputProps extends Omit<InputNativeProps, 'size' | 'type' | 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'prefix' | 'onInput' | 'dangerouslySetInnerHTML' | 'onTouchStart'> {
+    /** 输入框内容 */
+    value?: string | number;
+    /** 默认值（非受控模式） */
+    defaultValue?: string | number;
+    /** 占位符 */
+    placeholder?: string;
+    /** 输入框尺寸 */
+    size?: InputSize;
+    /** 输入框类型 */
+    type?: InputType;
+    /** 输入框变体 */
+    variant?: InputVariant;
+    /** 输入框状态 */
+    status?: InputStatus;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 是否显示清除按钮 */
+    clearable?: boolean;
+    /** 清除按钮触发时机 */
+    clearTrigger?: ClearTrigger;
+    /** 最大长度 */
+    maxLength?: number;
+    /** 最大长度 (Taro原生属性) */
+    maxlength?: number;
+    /** 最小长度 */
+    minLength?: number;
+    /** 前缀图标或文本 */
+    prefix?: ReactNode;
+    /** 后缀图标或文本 */
+    suffix?: ReactNode;
+    /** 标签文本 */
+    label?: ReactNode;
+    /** 辅助文本 */
+    helperText?: ReactNode;
+    /** 错误文本 */
+    errorText?: ReactNode;
+    /** 计数器 */
+    showCount?: boolean;
+    /** 是否自动聚焦 */
+    autoFocus?: boolean;
+    /** 是否显示边框 */
+    bordered?: boolean;
+    /** 是否显示密码切换按钮 */
+    showPasswordToggle?: boolean;
+    /** 自定义样式类名 */
+    className?: string;
+    /** 值变化事件处理函数 */
+    onChange?: (_value: string, event: ITouchEvent) => void;
+    /** 聚焦事件处理函数 */
+    onFocus?: (_event: ITouchEvent) => void;
+    /** 失焦事件处理函数 */
+    onBlur?: (_event: ITouchEvent) => void;
+    /** 清除事件处理函数 */
+    onClear?: (_event: ITouchEvent) => void;
+    /** 确认事件处理函数 */
+    onConfirm?: (_value: string, event: ITouchEvent) => void;
+    /** 输入事件处理函数 */
+    onInput?: (_value: string, event: ITouchEvent) => void;
+    /** 键盘输入事件处理函数 */
+    onKeyboardHeightChange?: (_height: number, event: ITouchEvent) => void;
+    /** 自定义输入框样式 */
+    style?: React.CSSProperties;
+    /** 是否启用无障碍访问 */
+    accessible?: boolean;
+    /** 无障碍标签 */
+    accessibilityLabel?: string;
+    /** 无障碍角色 */
+    accessibilityRole?: string;
+    /** 无障碍状态 */
+    accessibilityState?: {
+        disabled?: boolean;
+        readonly?: boolean;
+        required?: boolean;
+        invalid?: boolean;
+    };
+    /** 表单验证规则 */
+    rules?: Array<{
+        required?: boolean;
+        message?: string;
+        pattern?: RegExp;
+        min?: number;
+        max?: number;
+        validator?: (_value: string) => boolean | string | Promise<boolean | string>;
+    }>;
+    /** 验证触发时机 */
+    validateTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onFocus';
+    /** 是否立即验证 */
+    immediate?: boolean;
+    /** 是否多行输入 */
+    multiline?: boolean;
+    /** 行数（多行输入时） */
+    rows?: number;
+    /** 自动调整高度（多行输入时） */
+    autoHeight?: boolean;
+    /** 是否显示字数统计 */
+    showWordLimit?: boolean;
+    /** 自定义验证函数 */
+    validator?: (_value: string) => boolean | string | Promise<boolean | string>;
+    /** 是否块级显示 */
+    block?: boolean;
+    /** 容器样式 */
+    containerStyle?: React.CSSProperties;
+}
+/** 输入框组件引用类型 */
+export type InputRef = {
+    /** 输入框元素 */
+    element: HTMLInputElement | HTMLTextAreaElement | null;
+    /** 获取输入框值 */
+    getValue: () => string;
+    /** 设置输入框值 */
+    setValue: (_value: string) => void;
+    /** 聚焦输入框 */
+    focus: () => void;
+    /** 失焦输入框 */
+    blur: () => void;
+    /** 选择文本 */
+    select: () => void;
+    /** 设置选中文本范围 */
+    setSelectionRange: (_start: number, end: number) => void;
+    /** 获取选中文本范围 */
+    getSelectionRange: () => {
+        start: number;
+        end: number;
+    };
+    /** 设置禁用状态 */
+    setDisabled: (_disabled: boolean) => void;
+    /** 设置只读状态 */
+    setReadonly: (_readonly: boolean) => void;
+    /** 设置输入框状态 */
+    setStatus: (_status: InputStatus) => void;
+    /** 获取输入框状态 */
+    getStatus: () => InputStatus;
+    /** 验证输入框值 */
+    validate: () => Promise<{
+        valid: boolean;
+        message?: string;
+    }>;
+    /** 清除输入框值 */
+    clear: () => void;
+    /** 重置输入框 */
+    reset: () => void;
+};
+/** 输入框组属性接口 */
+export interface InputGroupProps {
+    /** 输入框组内容 */
+    children: ReactNode;
+    /** 输入框组尺寸 */
+    size?: InputSize;
+    /** 输入框组变体 */
+    variant?: InputVariant;
+    /** 输入框组状态 */
+    status?: InputStatus;
+    /** 是否紧凑布局 */
+    compact?: boolean;
+    /** 是否块级显示 */
+    block?: boolean;
+    /** 输入框组自定义样式类名 */
+    className?: string;
+    /** 输入框组自定义样式 */
+    style?: React.CSSProperties;
+}
+/** 输入框工具函数接口 */
+export interface InputUtils {
+    /** 格式化输入值 */
+    formatValue: (_value: string | number, type: InputType) => string;
+    /** 验证输入值 */
+    validateValue: (_value: string, rules: InputProps['rules']) => {
+        valid: boolean;
+        message?: string;
+    };
+    /** 计算字符长度 */
+    calculateLength: (_value: string, type: InputType) => number;
+    /** 格式化手机号 */
+    formatPhone: (_phone: string) => string;
+    /** 格式化身份证号 */
+    formatIdCard: (_idCard: string) => string;
+    /** 格式化金额 */
+    formatMoney: (_amount: string) => string;
+    /** 限制输入字符 */
+    restrictInput: (_value: string, type: InputType) => string;
+    /** 获取输入框类型映射 */
+    getTypeMap: () => Record<InputType, {
+        keyboard: string;
+        pattern?: string;
+    }>;
+    /** 获取输入框尺寸映射 */
+    getSizeMap: () => Record<InputSize, {
+        fontSize: number;
+        padding: string;
+        height: number;
+        borderRadius: number;
+    }>;
+    /** 获取输入框变体映射 */
+    getVariantMap: () => Record<InputVariant, {
+        backgroundColor: string;
+        borderColor: string;
+        borderWidth: number;
+    }>;
+    /** 获取输入框状态映射 */
+    getStatusMap: () => Record<InputStatus, {
+        color: string;
+        icon?: string;
+    }>;
+}
+/** 输入框验证结果接口 */
+export interface InputValidationResult {
+    /** 是否验证通过 */
+    valid: boolean;
+    /** 错误消息 */
+    message?: string;
+    /** 验证规则索引 */
+    ruleIndex?: number;
+    /** 验证时间戳 */
+    timestamp: number;
+}
+/** 输入框事件接口 */
+export interface InputEvents {
+    /** 值变化事件 */
+    onChange: (_value: string, event: ITouchEvent) => void;
+    /** 聚焦事件 */
+    onFocus: (_event: ITouchEvent) => void;
+    /** 失焦事件 */
+    onBlur: (_event: ITouchEvent) => void;
+    /** 清除事件 */
+    onClear: (_event: ITouchEvent) => void;
+    /** 确认事件 */
+    onConfirm: (_value: string, event: ITouchEvent) => void;
+    /** 输入事件 */
+    onInput: (_value: string, event: ITouchEvent) => void;
+    /** 键盘高度变化事件 */
+    onKeyboardHeightChange: (_height: number, event: ITouchEvent) => void;
+}
+/** 输入框样式配置接口 */
+export interface InputStyleConfig {
+    /** 输入框基础样式 */
+    base: React.CSSProperties;
+    /** 输入框尺寸样式 */
+    sizes: Record<InputSize, React.CSSProperties>;
+    /** 输入框变体样式 */
+    variants: Record<InputVariant, React.CSSProperties>;
+    /** 输入框状态样式 */
+    statuses: Record<InputStatus, React.CSSProperties>;
+    /** 前缀样式 */
+    prefix: React.CSSProperties;
+    /** 后缀样式 */
+    suffix: React.CSSProperties;
+    /** 标签样式 */
+    label: React.CSSProperties;
+    /** 辅助文本样式 */
+    helperText: React.CSSProperties;
+    /** 错误文本样式 */
+    errorText: React.CSSProperties;
+    /** 计数器样式 */
+    counter: React.CSSProperties;
+    /** 清除按钮样式 */
+    clearButton: React.CSSProperties;
+    /** 密码切换按钮样式 */
+    passwordToggle: React.CSSProperties;
+}
+/** 输入框上下文接口 */
+export interface InputContext {
+    /** 输入框尺寸 */
+    size: InputSize;
+    /** 输入框变体 */
+    variant: InputVariant;
+    /** 输入框状态 */
+    status: InputStatus;
+    /** 是否禁用 */
+    disabled: boolean;
+    /** 是否只读 */
+    readonly: boolean;
+    /** 是否显示边框 */
+    bordered: boolean;
+    /** 输入框样式配置 */
+    styleConfig: InputStyleConfig;
+}

package/dist/components/form/Input/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Taro-Uno Input Component
+ * 输入框组件，支持多种类型、状态和验证功能
+ */
+export { Input } from './Input';
+export type { InputProps, InputRef, InputSize, InputType, InputVariant, InputStatus, InputGroupProps, InputUtils, InputValidationResult, InputEvents, InputStyleConfig, InputContext, } from './Input.types';
+export { inputStyles } from './Input.styles';
+export { Input as default } from './Input';

package/dist/components/form/Input/useInputLogic.d.ts

@@ -0,0 +1,35 @@
+import type { ITouchEvent } from '@tarojs/components';
+import type { InputProps, InputStatus } from './Input.types';
+export declare const useInputLogic: (props: InputProps) => {
+    nativeInputRef: import("react").RefObject<any>;
+    value: string | number;
+    isFocused: boolean;
+    showPassword: boolean;
+    internalStatus: InputStatus;
+    internalDisabled: boolean;
+    internalReadonly: boolean;
+    validationResult: {
+        valid: boolean;
+        message?: string;
+    } | null;
+    finalStatus: InputStatus;
+    handleValueChange: (newValue: string, event: ITouchEvent) => Promise<void>;
+    handleFocus: (event: ITouchEvent) => Promise<void>;
+    handleBlur: (event: ITouchEvent) => Promise<void>;
+    handleConfirm: (event: ITouchEvent) => Promise<void>;
+    handleClear: (event: ITouchEvent) => void;
+    handlePasswordToggle: () => void;
+    shouldShowClear: () => boolean;
+    validateInput: (inputValue: string) => Promise<{
+        valid: boolean;
+        message?: string;
+    }>;
+    setInternalValue: import("react").Dispatch<import("react").SetStateAction<string | number>>;
+    setInternalStatus: import("react").Dispatch<import("react").SetStateAction<InputStatus>>;
+    setInternalDisabled: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setInternalReadonly: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setValidationResult: import("react").Dispatch<import("react").SetStateAction<{
+        valid: boolean;
+        message?: string;
+    } | null>>;
+};

package/dist/components/form/InputNumber/InputNumber.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { InputNumberProps, InputNumberRef } from './InputNumber.types';
+/** 数字输入框组件 */
+export declare const InputNumberComponent: React.ForwardRefExoticComponent<Omit<InputNumberProps, "ref"> & React.RefAttributes<InputNumberRef>>;
+/** 导出数字输入框组件 */
+export declare const InputNumber: React.ForwardRefExoticComponent<Omit<InputNumberProps, "ref"> & React.RefAttributes<InputNumberRef>>;

package/dist/components/form/InputNumber/InputNumber.styles.d.ts

@@ -0,0 +1,120 @@
+import type { InputNumberProps, InputNumberSize, InputNumberVariant, InputNumberStatus, InputNumberStyleConfig, InputNumberFormatConfig } from './InputNumber.types';
+/** 样式工具类 */
+export declare class InputNumberStyles {
+    /** 获取平台前缀 */
+    private static getPlatformPrefix;
+    /** 尺寸映射 */
+    static readonly SIZE_MAP: Record<InputNumberSize, {
+        fontSize: number;
+        padding: string;
+        height: number;
+        borderRadius: number;
+        lineHeight: number;
+    }>;
+    /** 变体样式映射 */
+    static readonly VARIANT_STYLES: Record<InputNumberVariant, {
+        backgroundColor: string;
+        borderColor: string;
+        borderWidth: number;
+        borderBottomWidth?: number;
+    }>;
+    /** 状态颜色映射 */
+    static readonly STATUS_COLORS: Record<InputNumberStatus, {
+        color: string;
+        backgroundColor?: string;
+        borderColor?: string;
+        icon?: string;
+    }>;
+    /** 生成输入框类名 */
+    static getClassName(props: Partial<InputNumberProps>): string;
+    /** 生成输入框样式 */
+    static getStyle(props: Partial<InputNumberProps> & {
+        style?: React.CSSProperties;
+    }): React.CSSProperties;
+    /** 生成输入框容器样式 */
+    static getContainerStyle(props: Partial<InputNumberProps> & {
+        block?: boolean;
+        style?: React.CSSProperties;
+    }): React.CSSProperties;
+    /** 生成输入框包装器样式 */
+    static getWrapperStyle(props: Partial<InputNumberProps> & {
+        bordered?: boolean;
+        controls?: boolean;
+        controlsPosition?: 'start' | 'end';
+        style?: React.CSSProperties;
+    }): React.CSSProperties;
+    /** 生成控制器样式 */
+    static getControlsStyle(props: {
+        size: InputNumberSize;
+        controlsPosition: 'start' | 'end';
+        style?: React.CSSProperties;
+    }): React.CSSProperties;
+    /** 生成控制器按钮样式 */
+    static getControlButtonStyle(props: {
+        size: InputNumberSize;
+        direction: 'up' | 'down';
+        style?: React.CSSProperties;
+    }): React.CSSProperties;
+    /** 生成前缀样式 */
+    static getPrefixStyle(props: {
+        size: InputNumberSize;
+        disabled: boolean;
+        controls: boolean;
+        controlsPosition: 'start' | 'end';
+        style?: React.CSSProperties;
+    }): React.CSSProperties;
+    /** 生成后缀样式 */
+    static getSuffixStyle(props: {
+        size: InputNumberSize;
+        disabled: boolean;
+        controls: boolean;
+        controlsPosition: 'start' | 'end';
+        style?: React.CSSProperties;
+    }): React.CSSProperties;
+    /** 生成标签样式 */
+    static getLabelStyle(props: {
+        size: InputNumberSize;
+        disabled: boolean;
+        style?: React.CSSProperties;
+    }): React.CSSProperties;
+    /** 生成辅助文本样式 */
+    static getHelperTextStyle(props: {
+        size: InputNumberSize;
+        status: InputNumberStatus;
+        style?: React.CSSProperties;
+    }): React.CSSProperties;
+    /** 生成错误文本样式 */
+    static getErrorTextStyle(props: {
+        size: InputNumberSize;
+        style?: React.CSSProperties;
+    }): React.CSSProperties;
+    /** 生成清除按钮样式 */
+    static getClearButtonStyle(props: {
+        size: InputNumberSize;
+        style?: React.CSSProperties;
+    }): React.CSSProperties;
+    /** 生成输入框样式配置 */
+    static getStyleConfig(): InputNumberStyleConfig;
+    /** 生成CSS变量 */
+    static generateCSSVariables(): string;
+    /** 生成关键帧动画 */
+    static generateKeyframes(): string;
+    /** 格式化数字值 */
+    static formatValue(value: number | null, config: InputNumberFormatConfig): string;
+    /** 格式化货币 */
+    private static formatCurrency;
+    /** 格式化百分比 */
+    private static formatPercent;
+    /** 格式化小数 */
+    private static formatDecimal;
+    /** 格式化整数 */
+    private static formatInteger;
+    /** 四舍五入到指定精度 */
+    static roundValue(value: number, precision: number): number;
+    /** 解析数字值 */
+    static parseValue(text: string, config: InputNumberFormatConfig): number | null;
+    /** 限制数字范围 */
+    static clampValue(value: number, min?: number, max?: number): number;
+}
+/** 导出样式工具 */
+export declare const inputNumberStyles: typeof InputNumberStyles;