@unicom-cloud/ui 0.8.82 → 0.8.84

package/types/pc/progress/interface.d.ts

@@ -0,0 +1,92 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * @title Progress
+ */
+export interface ProgressProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 进度条类型
+     * @en The type of Progress
+     * @defaultValue line
+     */
+    type?: 'line' | 'circle';
+    /**
+     * @zh 显示步骤进度条
+     * @en Show step progress
+     * @version 2.10.0
+     */
+    steps?: number;
+    /**
+     * @zh 动画效果，仅在 `type=line` 时可用
+     * @en Whether show animation, Only available when `type="line"`
+     */
+    animation?: boolean;
+    /**
+     * @zh 进度条状态
+     * @en Progress status.
+     * @version 2.16.0
+     */
+    status?: 'success' | 'error' | 'normal' | 'warning';
+    /**
+     * @zh 进度条颜色，优先级高于 `status`。传入对象时，会显示渐变色进度条。
+     * @en Progress color, priority is higher than `status`
+     * @version 2.10.0
+     */
+    color?: string | {
+        [key: string]: string;
+    };
+    /**
+     * @zh 剩余进度条颜色。
+     * @en The rest of progress bar color.
+     */
+    trailColor?: string;
+    /**
+     * @zh 是否展示文本
+     * @en Whether display text
+     * @defaultValue true
+     */
+    showText?: boolean;
+    /**
+     * @zh 是否内置文本
+     * @defaultValue false
+     */
+    inlineText?: boolean;
+    /**
+     * @zh 进度条文本函数
+     * @en Progress text function
+     */
+    formatText?: (percent: number) => ReactNode;
+    /**
+     * @zh 百分比
+     * @en percent
+     * @defaultValue 0
+     */
+    percent: number;
+    /**
+     * @zh 进度条线的宽度
+     * @en The stroke width of Progress
+     */
+    strokeWidth?: number;
+    /**
+     * @zh 进度条的宽度。`circle` 类型的进度条仅支持数字类型的`width`
+     * @en The Progress width. The `circle` type Progress only supports the number type `width`
+     */
+    width?: string | number;
+    /**
+     * @zh 不同尺寸的进度条
+     * @en The size of Progress
+     * @defaultValue default
+     */
+    size?: 'small' | 'default' | 'mini' | 'large';
+    /**
+     * @zh 加载中的进度条是否显示缓冲区。仅对 `type=line` 且加载中的进度条有效。
+     * @en Whether the Progress show buffer. Only available when `type=line`
+     */
+    buffer?: boolean;
+    /**
+     * @zh 缓冲区的颜色
+     * @en Buffer color
+     */
+    bufferColor?: string | object;
+}

package/types/pc/radio/interface.d.ts

@@ -0,0 +1,103 @@
+import { CSSProperties, ChangeEvent, HTMLAttributes, ReactNode } from 'react';
+/**
+ * @title Radio
+ */
+export interface RadioProps<T = any> extends Omit<HTMLAttributes<HTMLLabelElement>, 'children' | 'className' | 'onChange'> {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 是否禁用
+     * @en Whether the radio is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @zh 控件的 `value`
+     * @en The value of radio
+     */
+    value?: T;
+    /**
+     * @zh 是否选中（受控模式）
+     * @en Whether the radio is checked (Controlled)
+     */
+    checked?: boolean;
+    /**
+     * @zh 初始是否选中
+     * @en Whether the radio is initially selected
+     */
+    defaultChecked?: boolean;
+    /**
+     * @zh 值变化的回调
+     * @en Callback when radio status change
+     */
+    onChange?: (checked: boolean, event: ChangeEvent) => void;
+    children?: ReactNode | ((value: {
+        checked: boolean;
+    }) => ReactNode);
+}
+/**
+ * @title Radio.Group
+ */
+export interface RadioGroupProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 禁用
+     * @en disabled
+     */
+    disabled?: boolean;
+    /**
+     * @zh `Radio` 的 name
+     * @en `Radio`'s name attr
+     */
+    name?: string;
+    /**
+     * @zh 单选的类型，是单选还是按钮
+     * @en type of `Radio`
+     * @defaultValue radio
+     */
+    type?: 'radio' | 'button';
+    /**
+     * @zh 方向
+     * @en Arrangement direction
+     * @defaultValue horizontal
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * @zh 按钮类型的单选框尺寸（只在按钮类型下生效）
+     * @en The size of radio button style(Only effective under `button` type)
+     */
+    size?: 'small' | 'default' | 'large' | 'mini';
+    mode?: 'outline' | 'fill';
+    /**
+     * @zh 点击单选的回调
+     * @en Callback when radio status change
+     */
+    onChange?: (value: any, event: ChangeEvent) => void;
+    /**
+     * @zh 默认选中的值
+     * @en To set default value
+     */
+    defaultValue?: any;
+    /**
+     * @zh 选中的值（受控模式）
+     * @en To set value
+     */
+    value?: any;
+    /**
+     * @zh 以数组配置的形式来设置单选组
+     * @en Set children options
+     */
+    options?: (string | number | {
+        label: ReactNode;
+        value: any;
+        disabled?: boolean;
+    })[];
+}
+export interface RadioGroupContextProps {
+    type: 'radio' | 'button';
+    value?: any;
+    disabled?: boolean;
+    group?: boolean;
+    name?: RadioGroupProps['name'];
+    onChangeValue?: (value: any, event: ChangeEvent) => void;
+}

package/types/pc/rate/interface.d.ts

@@ -0,0 +1,70 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * @title Rate
+ */
+export interface RateProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 默认值
+     * @en To set default value
+     */
+    defaultValue?: number;
+    /**
+     * @zh 自定义字符
+     * @en The custom character of rate
+     * @defaultValue <IconUiStarFill />
+     */
+    character?: ReactNode | ((index: number) => ReactNode);
+    /**
+     * @zh 星的总数
+     * @en Star count
+     * @defaultValue 5
+     */
+    count?: number;
+    /**
+     * @zh 星的个数，受控值
+     * @en To set value
+     */
+    value?: number;
+    /**
+     * @zh 自定义每一项的提示信息
+     * @en Customize tooltip by each character
+     */
+    tooltips?: string[];
+    /**
+     * @zh 是否允许半选
+     * @en Whether to allow half selection
+     */
+    allowHalf?: boolean;
+    /**
+     * @zh 是否允许清除
+     * @en Whether to allow clear when click again
+     */
+    allowClear?: boolean;
+    /**
+     * @zh 是否只读，不能选择
+     * @en Whether is readonly
+     */
+    readonly?: boolean;
+    /**
+     * @zh 是否禁用
+     * @en Whether is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @zh 笑脸分级
+     * @en Whether to show score with smiley icon
+     */
+    grading?: boolean;
+    /**
+     * @zh 选择时的回调
+     * @en Callback when score is changed
+     */
+    onChange?: (value: number) => void;
+    /**
+     * @zh 鼠标经过时数值变化的回调
+     * @en Callback when the score user hovered is changed
+     */
+    onHoverChange?: (value: number) => void;
+}

package/types/{resize-box → pc/resize-box}/ResizeTrigger.d.ts

@@ -2,11 +2,17 @@ import { CSSProperties, PropsWithChildren, ReactNode } from 'react';
 export interface ResizeTriggerProps {
     style?: CSSProperties;
     className?: string | string[];
+    /** 方向，可选值为水平 `horizontal`，垂直 `vertical` */
     direction: string;
+    /** 定制图标 */
     icon?: ReactNode;
+    /** 鼠标按下的事件 */
     onMouseDown?: (e: any) => void;
+    /** resize 事件 */
     onResize?: (e: any) => void;
+    /** 支持伸缩 */
     resizable?: boolean;
+    /** 支持快速收缩 */
     collapsible?: {
         prev?: {
             icon?: ReactNode;

package/types/pc/resize-box/interface.d.ts

@@ -0,0 +1,264 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * @title ResizeBox
+ */
+export interface ResizeBoxProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 宽度，受控属性
+     * @en The width of ResizeBox
+     * @version 2.7.0
+     */
+    width?: number;
+    /**
+     * @zh 高度，受控属性
+     * @en The height of ResizeBox
+     * @version 2.7.0
+     */
+    height?: number;
+    /**
+     * @zh 伸缩框的 html 标签
+     * @en The html tag of ResizeBox
+     * @defaultValue div
+     */
+    component?: string;
+    /**
+     * @zh 可以进行伸缩的边，有上、下、左、右可以使用，默认是右方向。
+     * @en The edges can be Resize, It can be `up`, `down`, `left`, `right`
+     * @defaultValue ['right']
+     */
+    directions?: Array<'left' | 'right' | 'top' | 'bottom'>;
+    /**
+     * @zh 定制伸缩杆的图标，四个方向都支持定制。
+     * @en Custom the icon of Split,All four directions are supported
+     * @defaultValue {}
+     */
+    resizeIcons?: {
+        top?: ReactNode;
+        bottom?: ReactNode;
+        left?: ReactNode;
+        right?: ReactNode;
+    };
+    /**
+     * @zh 定制伸缩杆的内容，四个方向都支持定制。
+     * @en Custom the content of Split,All four directions are supported
+     * @defaultValue {}
+     */
+    resizeTriggers?: {
+        top?: ReactNode;
+        bottom?: ReactNode;
+        left?: ReactNode;
+        right?: ReactNode;
+    };
+    /**
+     * @zh 开始拖拽之前的回调
+     * @en Callback when the start of resize.
+     */
+    onMovingStart?: () => void;
+    /**
+     * @zh 拖拽中的回调
+     * @en Callback when resizing
+     * @version `size` in `2.7.0`
+     */
+    onMoving?: (e: MouseEvent, size: {
+        width: number;
+        height: number;
+    }) => void;
+    /**
+     * @zh 拖拽结束之后的回调
+     * @en Callback when the end of resize
+     */
+    onMovingEnd?: () => void;
+}
+/**
+ * @title ResizeBox.Split
+ */
+export interface SplitProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 分割框的 html 标签
+     * @en The html tag of Split
+     * @defaultValue div
+     */
+    component?: string;
+    /**
+     * @zh 分割方向分为水平 `horizontal` 和垂直 `vertical`，默认是水平分割
+     * @en The direction of Split. It can be `horizontal` and `vertical`
+     * @defaultValue horizontal
+     * @version `reverse` in `2.35.0`
+     */
+    direction?: 'horizontal' | 'vertical' | 'horizontal-reverse' | 'vertical-reverse';
+    /**
+     * @zh 定制伸缩杆的图标
+     * @en Custom the icon of Split
+     */
+    icon?: ReactNode;
+    /**
+     * @zh 定制伸缩杆的内容
+     * @en Custom the content of Split
+     */
+    trigger?: ReactNode;
+    /**
+     * @zh 分割的大小，可以是 0~1 代表百分比，或具体数值的像素，如 300px
+     * @en Split size. It can be 0~1 representing a percentage, or a specific number of pixels, ex 300px
+     * @defaultValue 0.5
+     */
+    size?: number | string;
+    /**
+     * @zh 最小阈值
+     * @en Minimum threshold
+     */
+    min?: number | string;
+    /**
+     * @zh 最大阈值
+     * @en Maximum threshold
+     */
+    max?: number | string;
+    /**
+     * @zh 面板，[firstPane, secondPane]
+     * @en panes,[firstPane, secondPane]
+     */
+    panes: ReactNode[];
+    /**
+     * @zh 禁用
+     * @en Whether the split is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @zh 开始拖拽之前的回调
+     * @en Callback when the start of resize
+     */
+    onMovingStart?: () => void;
+    /**
+     * @zh 拖拽中的回调
+     * @en Callback when moving
+     * @version `size` in `2.14.0`
+     */
+    onMoving?: (e: MouseEvent, size: number | string) => void;
+    /**
+     * @zh 拖拽结束之后的回调
+     * @en Callback when the end of resize
+     */
+    onMovingEnd?: () => void;
+    /**
+     * @zh 面板大小变化的回调
+     * @en Callback when pane resized
+     * @version 2.25.0
+     */
+    onPaneResize?: (paneContainers: HTMLElement[]) => void;
+}
+/**
+ * @title ResizeBox.SplitGroup in `2.27.0`
+ */
+export interface SplitGroupProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 分割框的 html 标签
+     * @en The html tag of SplitGroup
+     * @defaultValue div
+     */
+    component?: string;
+    /**
+     * @zh 分割方向分为水平 `horizontal` 和垂直 `vertical`，默认是水平分割
+     * @en The direction of Split. It can be `horizontal` and `vertical`
+     * @defaultValue horizontal
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * @zh 定制伸缩杆的图标
+     * @en Custom the icon of Split
+     */
+    icon?: ReactNode;
+    /**
+     * @zh 面板
+     * @en panes
+     */
+    panes: SplitGroupPane[];
+    /**
+     * @zh 开始拖拽之前的回调
+     * @en Callback when the start of resize
+     */
+    onMovingStart?: (activeIndex: number) => void;
+    /**
+     * @zh 拖拽中的回调, `size` 参数是各个面板占的像素值
+     * @en Callback when moving
+     */
+    onMoving?: (e: MouseEvent, size: string[], activeIndex: number) => void;
+    /**
+     * @zh 拖拽结束之后的回调
+     * @en Callback when the end of resize
+     */
+    onMovingEnd?: (activeIndex: number) => void;
+    /**
+     * @zh 面板大小变化的回调
+     * @en Callback when pane resized
+     */
+    onPaneResize?: (paneContainers: HTMLElement[]) => void;
+}
+/**
+ * @title ResizeBox.SplitGroup.CollapsedConfig
+ */
+export interface CollapsedConfig {
+    /**
+     * @zh 快速折叠按钮的icon
+     * @en Quick collapse button icon
+     */
+    icon?: ReactNode;
+    /**
+     * @zh 点击快速折叠的回调
+     * @en Click the callback for quick folding
+     */
+    onClick?: (e: any, collapsed: any, activeIndex: any, direction: 'prev' | 'next') => void;
+}
+/**
+ * @title ResizeBox.SplitGroup.Pane
+ */
+export interface SplitGroupPane {
+    /**
+     * @zh 当前面板的内容
+     * @en The contents of the current panel
+     */
+    content: ReactNode;
+    /**
+     * @zh 分割的大小，可以是 0~1 代表百分比，或具体数值的像素，如 300px
+     * @en The size of the segmentation can be 0~1 representing a percentage, or a pixel with a specific value, such as 300px
+     */
+    size?: number | string;
+    /**
+     * @zh 最小阈值，优先级比 `max`高，并且会影响相邻面板的阈值。
+     * @en Maximum threshold, The priority is higher than `max` and will affect the threshold of adjacent panels.
+     */
+    min?: number | string;
+    /**
+     * @zh 最大阈值
+     * @en Minimum threshold
+     */
+    max?: number | string;
+    /**
+     * @zh 禁用，将不会展示伸缩杆。
+     * @en disabled, the split bar will not be displayed
+     */
+    disabled?: boolean;
+    /**
+     * @zh 是否支持快速折叠;
+     * @en Whether to support fast collapsed
+     */
+    collapsible?: boolean | {
+        prev?: boolean | CollapsedConfig;
+        next?: boolean | CollapsedConfig;
+    };
+    /**
+     * @zh 是否支持拖拽伸缩
+     * @en Whether to support drag and drop
+     * @defaultValue true
+     */
+    resizable?: boolean;
+    /**
+     * @zh 定制伸缩杆内容, 参数分别表示向前快速收缩、拖拽伸缩触发器、向后快速收缩的触发器
+     * @en Customize the content of the Split
+     */
+    trigger?: (prevNode: ReactNode, resizeNode: ReactNode, nextNode: ReactNode) => ReactNode;
+}

package/types/pc/result/interface.d.ts

@@ -0,0 +1,35 @@
+import { CSSProperties, ReactNode } from 'react';
+export type ResultStatus = null | 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500';
+/**
+ * @title Result
+ */
+export interface ResultProps {
+    className?: string | string[];
+    style?: CSSProperties;
+    /**
+     * @zh 标题文字
+     * @en The title
+     */
+    title?: ReactNode;
+    /**
+     * @zh 子标题文字
+     * @en The subTitle
+     */
+    subTitle?: ReactNode;
+    /**
+     * @zh 不同状态，传入 null 时，需要通过 `icon` 属性设置图标，并且默认没有背景色以及图标颜色
+     * @en The result status, if `null` the icon and the background color will not be displayed. [example](/react/en-US/component/result#custom-icon)
+     * @defaultValue info
+     */
+    status?: 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500' | null;
+    /**
+     * @zh 自定义图标
+     * @en Customize the icon
+     */
+    icon?: ReactNode;
+    /**
+     * @zh 额外内容
+     * @en The operating area
+     */
+    extra?: ReactNode;
+}