taro-uno-ui 0.9.0-beta → 1.0.0

package/dist/types/button.d.ts

@@ -0,0 +1,285 @@
+/**
+ * Button组件专用类型定义
+ * 提供类型安全的Button组件相关类型和工具函数
+ */
+import { ReactNode } from 'react';
+import type { ITouchEvent } from '@tarojs/components';
+import { Validator } from './utils';
+/** 按钮尺寸类型 */
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** 按钮类型 */
+export type ButtonType = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+/** 按钮变体 */
+export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'text';
+/** 按钮形状 */
+export type ButtonShape = 'default' | 'rounded' | 'circle' | 'square';
+/** 按钮状态 */
+export type ButtonStatus = 'normal' | 'loading' | 'disabled' | 'active';
+/** 按钮图标位置 */
+export type ButtonIconPosition = 'left' | 'right';
+/** 按钮原生属性类型 */
+export type ButtonNativeProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size' | 'type' | 'onClick'>;
+/** 按钮组件属性接口 */
+export interface ButtonProps extends ButtonNativeProps {
+    /** 按钮内容 */
+    children?: ReactNode;
+    /** 按钮尺寸 */
+    size?: ButtonSize;
+    /** 按钮类型 */
+    type?: ButtonType;
+    /** 按钮变体 */
+    variant?: ButtonVariant;
+    /** 按钮形状 */
+    shape?: ButtonShape;
+    /** 按钮状态 */
+    status?: ButtonStatus;
+    /** 是否块级显示 */
+    block?: boolean;
+    /** 是否危险操作 */
+    danger?: boolean;
+    /** 是否显示加载状态 */
+    loading?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 图标 */
+    icon?: ReactNode;
+    /** 图标位置 */
+    iconPosition?: ButtonIconPosition;
+    /** 自定义样式类名 */
+    className?: string;
+    /** 点击事件处理函数 */
+    onClick?: (event: ITouchEvent) => void;
+    /** 按下事件处理函数 */
+    onPressIn?: (event: ITouchEvent) => void;
+    /** 按起事件处理函数 */
+    onPressOut?: (event: ITouchEvent) => void;
+    /** 长按事件处理函数 */
+    onLongPress?: (event: ITouchEvent) => void;
+    /** 自定义按钮样式 */
+    style?: React.CSSProperties;
+    /** 加载状态文字 */
+    loadingText?: string;
+    /** 是否显示涟漪效果 */
+    ripple?: boolean;
+    /** 是否显示阴影 */
+    shadow?: boolean;
+    /** 是否有边框 */
+    bordered?: boolean;
+    /** 按钮组中的索引位置 */
+    groupIndex?: number;
+    /** 按钮组中的总数 */
+    groupSize?: number;
+    /** 自定义主题颜色 */
+    color?: string;
+    /** 背景颜色 */
+    backgroundColor?: string;
+    /** 文字颜色 */
+    textColor?: string;
+    /** 边框颜色 */
+    borderColor?: string;
+    /** 动画持续时间 */
+    animationDuration?: number;
+    /** 是否启用无障碍访问 */
+    accessible?: boolean;
+    /** 无障碍标签 */
+    accessibilityLabel?: string;
+    /** 无障碍角色 */
+    accessibilityRole?: string;
+    /** 无障碍状态 */
+    accessibilityState?: {
+        disabled?: boolean;
+        selected?: boolean;
+        busy?: boolean;
+        expanded?: boolean;
+    };
+}
+/** 按钮组件引用类型 */
+export interface ButtonRef {
+    /** 按钮元素 */
+    element: HTMLButtonElement | null;
+    /** 触发点击事件 */
+    click: () => void;
+    /** 设置禁用状态 */
+    setDisabled: (disabled: boolean) => void;
+    /** 设置加载状态 */
+    setLoading: (loading: boolean) => void;
+    /** 获取按钮状态 */
+    getStatus: () => ButtonStatus;
+    /** 获取按钮尺寸 */
+    getSize: () => ButtonSize;
+    /** 获取按钮类型 */
+    getType: () => ButtonType;
+    /** 获取按钮变体 */
+    getVariant: () => ButtonVariant;
+    /** 获取按钮形状 */
+    getShape: () => ButtonShape;
+    /** 聚焦按钮 */
+    focus: () => void;
+    /** 失焦按钮 */
+    blur: () => void;
+}
+/** 按钮组属性接口 */
+export interface ButtonGroupProps {
+    /** 按钮组内容 */
+    children: ReactNode;
+    /** 按钮组尺寸 */
+    size?: ButtonSize;
+    /** 按钮组类型 */
+    type?: ButtonType;
+    /** 按钮组变体 */
+    variant?: ButtonVariant;
+    /** 按钮组形状 */
+    shape?: ButtonShape;
+    /** 按钮组状态 */
+    status?: ButtonStatus;
+    /** 按钮组是否块级显示 */
+    block?: boolean;
+    /** 按钮组是否危险操作 */
+    danger?: boolean;
+    /** 按钮组是否显示阴影 */
+    shadow?: boolean;
+    /** 按钮组是否有边框 */
+    bordered?: boolean;
+    /** 按钮组间距 */
+    spacing?: number;
+    /** 按钮组是否垂直排列 */
+    vertical?: boolean;
+    /** 按钮组自定义样式类名 */
+    className?: string;
+    /** 按钮组自定义样式 */
+    style?: React.CSSProperties;
+}
+/** 按钮尺寸样式映射 */
+export interface ButtonSizeStyle {
+    fontSize: number;
+    padding: string;
+    height: number;
+    borderRadius: number;
+    minWidth?: number;
+}
+/** 按钮类型颜色映射 */
+export interface ButtonTypeColors {
+    backgroundColor: string;
+    textColor: string;
+    borderColor: string;
+    hoverBackgroundColor?: string;
+    hoverTextColor?: string;
+    hoverBorderColor?: string;
+}
+/** 按钮变体样式映射 */
+export interface ButtonVariantStyle {
+    backgroundColor: string;
+    textColor: string;
+    borderColor: string;
+    borderWidth: number;
+    hoverBackgroundColor?: string;
+    hoverTextColor?: string;
+    hoverBorderColor?: string;
+}
+/** 按钮形状样式映射 */
+export interface ButtonShapeStyle {
+    borderRadius: string;
+}
+/** 按钮状态样式映射 */
+export interface ButtonStatusStyle {
+    opacity: number;
+    cursor: string;
+    pointerEvents: string;
+}
+/** 按钮阴影样式映射 */
+export interface ButtonShadowStyle {
+    default: string;
+    hover: string;
+    active: string;
+}
+/** 按钮工具函数接口 */
+export interface ButtonUtils {
+    /** 获取按钮样式类名 */
+    getButtonClassName: (props: Partial<ButtonProps>) => string;
+    /** 获取按钮样式对象 */
+    getButtonStyle: (props: Partial<ButtonProps>) => React.CSSProperties;
+    /** 获取按钮尺寸映射 */
+    getSizeMap: () => Record<ButtonSize, ButtonSizeStyle>;
+    /** 获取按钮类型映射 */
+    getTypeMap: () => Record<ButtonType, ButtonTypeColors>;
+    /** 获取按钮变体映射 */
+    getVariantMap: () => Record<ButtonVariant, ButtonVariantStyle>;
+    /** 获取按钮形状映射 */
+    getShapeMap: () => Record<ButtonShape, ButtonShapeStyle>;
+    /** 获取按钮状态映射 */
+    getStatusMap: () => Record<ButtonStatus, ButtonStatusStyle>;
+    /** 获取按钮阴影映射 */
+    getShadowMap: () => ButtonShadowStyle;
+    /** 验证按钮属性 */
+    validateButtonProps: (props: ButtonProps) => boolean;
+    /** 格式化按钮尺寸 */
+    formatButtonSize: (size: ButtonSize) => string;
+    /** 格式化按钮类型 */
+    formatButtonType: (type: ButtonType) => string;
+    /** 格式化按钮变体 */
+    formatButtonVariant: (variant: ButtonVariant) => string;
+    /** 格式化按钮形状 */
+    formatButtonShape: (shape: ButtonShape) => string;
+    /** 格式化按钮状态 */
+    formatButtonStatus: (status: ButtonStatus) => string;
+    /** 计算按钮最终状态 */
+    calculateFinalStatus: (props: Partial<ButtonProps>) => ButtonStatus;
+    /** 生成按钮组样式 */
+    getGroupStyle: (props: Partial<ButtonGroupProps>) => React.CSSProperties;
+    /** 生成按钮组内按钮样式 */
+    getGroupItemStyle: (props: {
+        index: number;
+        total: number;
+        shape?: ButtonShape;
+        vertical?: boolean;
+    }) => React.CSSProperties;
+    /** 生成涟漪效果样式 */
+    getRippleStyle: (x: number, y: number, size: number) => React.CSSProperties;
+    /** 生成加载动画样式 */
+    getLoadingStyle: (size: ButtonSize) => React.CSSProperties;
+}
+/** 按钮尺寸验证器 */
+export declare const buttonSizeValidator: Validator<ButtonSize>;
+/** 按钮类型验证器 */
+export declare const buttonTypeValidator: Validator<ButtonType>;
+/** 按钮变体验证器 */
+export declare const buttonVariantValidator: Validator<ButtonVariant>;
+/** 按钮形状验证器 */
+export declare const buttonShapeValidator: Validator<ButtonShape>;
+/** 按钮状态验证器 */
+export declare const buttonStatusValidator: Validator<ButtonStatus>;
+/** 按钮图标位置验证器 */
+export declare const buttonIconPositionValidator: Validator<ButtonIconPosition>;
+/** 检查是否为有效的按钮尺寸 */
+export declare function isValidButtonSize(value: unknown): value is ButtonSize;
+/** 检查是否为有效的按钮类型 */
+export declare function isValidButtonType(value: unknown): value is ButtonType;
+/** 检查是否为有效的按钮变体 */
+export declare function isValidButtonVariant(value: unknown): value is ButtonVariant;
+/** 检查是否为有效的按钮形状 */
+export declare function isValidButtonShape(value: unknown): value is ButtonShape;
+/** 检查是否为有效的按钮状态 */
+export declare function isValidButtonStatus(value: unknown): value is ButtonStatus;
+/** 检查是否为有效的按钮图标位置 */
+export declare function isValidButtonIconPosition(value: unknown): value is ButtonIconPosition;
+/** 检查是否为有效的按钮属性 */
+export declare function isValidButtonProps(props: unknown): props is ButtonProps;
+/** 按钮默认属性 */
+export declare const defaultButtonProps: Partial<ButtonProps>;
+/** 创建按钮类名 */
+export declare function createButtonClassName(props: Partial<ButtonProps>): string;
+/** 计算按钮最终状态 */
+export declare function calculateFinalStatus(props: Partial<ButtonProps>): ButtonStatus;
+/** 验证按钮属性 */
+export declare function validateButtonProps(props: ButtonProps): boolean;
+/** 格式化按钮尺寸 */
+export declare function formatButtonSize(size: ButtonSize): string;
+/** 格式化按钮类型 */
+export declare function formatButtonType(type: ButtonType): string;
+/** 格式化按钮变体 */
+export declare function formatButtonVariant(variant: ButtonVariant): string;
+/** 格式化按钮形状 */
+export declare function formatButtonShape(shape: ButtonShape): string;
+/** 格式化按钮状态 */
+export declare function formatButtonStatus(status: ButtonStatus): string;
+export * from './index';

package/dist/types/component-props.d.ts

@@ -0,0 +1,109 @@
+/**
+ * 统一组件配置类型
+ * 提供一致的组件API接口
+ */
+export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ComponentVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+export type ComponentStatus = 'default' | 'loading' | 'disabled' | 'error' | 'success' | 'warning';
+export type ComponentShape = 'default' | 'round' | 'circle' | 'square';
+import type React from 'react';
+export interface BaseComponentProps {
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 测试ID */
+    testID?: string;
+    /** 子元素 */
+    children?: React.ReactNode;
+}
+export interface SizeableProps extends BaseComponentProps {
+    /** 组件尺寸 */
+    size?: ComponentSize;
+}
+export interface VariantProps extends BaseComponentProps {
+    /** 组件变体 */
+    variant?: ComponentVariant;
+}
+export interface StatusProps extends BaseComponentProps {
+    /** 组件状态 */
+    status?: ComponentStatus;
+}
+export interface ShapeProps extends BaseComponentProps {
+    /** 组件形状 */
+    shape?: ComponentShape;
+}
+export interface DisabledProps extends BaseComponentProps {
+    /** 是否禁用 */
+    disabled?: boolean;
+}
+export interface LoadingProps extends BaseComponentProps {
+    /** 加载状态 */
+    loading?: boolean;
+}
+export interface StandardComponentProps extends SizeableProps, VariantProps, StatusProps, ShapeProps, DisabledProps, LoadingProps {
+    /** 组件唯一标识 */
+    id?: string;
+    /** 无障碍标签 */
+    ariaLabel?: string;
+    /** 无障碍描述 */
+    ariaDescribedBy?: string;
+}
+export interface SizeConfig {
+    fontSize: number;
+    padding: string;
+    height: number;
+    borderRadius: number;
+    iconSize?: number;
+}
+export declare const COMPONENT_SIZE_MAP: Record<ComponentSize, SizeConfig>;
+export interface VariantColorConfig {
+    background: string;
+    color: string;
+    border: string;
+    hover?: {
+        background: string;
+        color: string;
+        border: string;
+    };
+    active?: {
+        background: string;
+        color: string;
+        border: string;
+    };
+}
+export declare const COMPONENT_VARIANT_COLORS: Record<ComponentVariant, VariantColorConfig>;
+export interface StatusColorConfig {
+    color: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    icon?: string;
+}
+export declare const COMPONENT_STATUS_COLORS: Record<ComponentStatus, StatusColorConfig>;
+export interface ComponentRef {
+    /** DOM元素 */
+    element: HTMLElement | null;
+    /** 获取组件尺寸 */
+    getSize: () => ComponentSize;
+    /** 获取组件变体 */
+    getVariant: () => ComponentVariant;
+    /** 获取组件状态 */
+    getStatus: () => ComponentStatus;
+    /** 检查是否禁用 */
+    isDisabled: () => boolean;
+    /** 检查是否加载中 */
+    isLoading: () => boolean;
+    /** 禁用组件 */
+    disable: () => void;
+    /** 启用组件 */
+    enable: () => void;
+    /** 设置加载状态 */
+    setLoading: (loading: boolean) => void;
+    /** 设置状态 */
+    setStatus: (status: ComponentStatus) => void;
+    /** 聚焦组件 */
+    focus: () => void;
+    /** 失焦组件 */
+    blur: () => void;
+}
+export {};