@unicom-cloud/ui 0.8.83 → 0.8.85

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

@@ -0,0 +1,52 @@
+import { CSSProperties } from 'react';
+/**
+ * @title Affix
+ */
+export interface AffixProps {
+    className?: string | string[];
+    style?: CSSProperties;
+    /**
+     * @zh 给 `fixed` 的元素设置 className。
+     * @en ClassName of the fixed element.
+     * @version 2.8.0
+     */
+    affixClassName?: string | string[];
+    /**
+     * @zh
+     * 给 `fixed` 的元素设置 style，注意不要设置 `position` `top` `width` `height`， 因为这几个属性是在元素 fixed 时候用于定位的。
+     * @en Style of the fixed elements. Don't set `position` `top` `width` `height` attributes as they are used for positioning when the element is fixed.
+     * @version 2.8.0
+     */
+    affixStyle?: CSSProperties;
+    /**
+     * @zh 距离窗口顶部达到指定偏移量后触发
+     * @en Offset from the top of the viewport (in pixels)
+     * @defaultValue 0
+     */
+    offsetTop?: number;
+    /**
+     * @zh 距离窗口底部达到指定偏移量后触发
+     * @en Offset from the bottom of the viewport (in pixels)
+     */
+    offsetBottom?: number;
+    /**
+     * @zh 滚动容器
+     * @en Specifies the scrollable area DOM Element
+     * @defaultValue () => window
+     */
+    target?: () => HTMLElement | null | Window;
+    /**
+     * @zh
+     * `target` 的外层滚动元素。`Affix` 将会监听该元素的滚动事件，并实时更新固钉的位置。
+     * 主要是为了解决 `target` 属性指定为非 `window` 元素时，如果外层元素滚动，可能会导致固钉跑出容器问题。
+     * @en
+     * Outer scrollable DOM element of `target`. `Affix` will listen to the container's scroll event and update the its position correspondingly.
+     * It's to solve the problem that Affix may escape the container when the container is not `window`.
+     */
+    targetContainer?: () => HTMLElement | null | Window;
+    /**
+     * @zh 固定状态发生改变时触发
+     * @en Callback fired when Affix state is changed
+     */
+    onChange?: (affixed: boolean) => void;
+}

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

@@ -0,0 +1,66 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * @title Alert
+ */
+export interface AlertProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 自定义操作项
+     * @en Custom action item
+     */
+    action?: ReactNode;
+    /**
+     * @zh 是否可关闭
+     * @en Whether Alert can be closed
+     */
+    closable?: boolean;
+    closeable?: boolean;
+    /**
+     * @zh 关闭的回调
+     * @en Callback when Alert is closed
+     */
+    onClose?: (event: any) => void;
+    /**
+     * @zh 关闭动画结束后执行的回调
+     * @en Callback when Alert close animation is complete
+     */
+    afterClose?: () => void;
+    /**
+     * @zh 警告的类型
+     * @en Type of Alert
+     * @defaultValue info
+     */
+    type?: 'info' | 'success' | 'warning' | 'error';
+    /**
+     * @zh 标题
+     * @en Alert title
+     */
+    title?: ReactNode;
+    /**
+     * @zh 内容
+     * @en Alert content
+     */
+    content?: ReactNode;
+    /**
+     * @zh 可以指定自定义图标，`showIcon` 为 `true` 时生效。
+     * @en Custom icon, effective when `showIcon` is `true`
+     */
+    icon?: ReactNode;
+    /**
+     * @zh 自定义关闭按钮
+     * @en Custom close button
+     */
+    closeElement?: ReactNode;
+    /**
+     * @zh 是否显示图标
+     * @en Whether to show icon
+     * @defaultValue true
+     */
+    showIcon?: boolean;
+    /**
+     * @zh 是否用作顶部公告
+     * @en Whether to show as banner
+     */
+    banner?: boolean;
+}

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

@@ -0,0 +1,105 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * @title Anchor
+ */
+export interface AnchorProps {
+    className?: string | string[];
+    style?: CSSProperties;
+    /**
+     * @zh 是否平滑滚动
+     * @en Whether to enable smooth scrolling
+     * @defaultValue true
+     */
+    animation?: boolean;
+    /**
+     * @zh 方向
+     * @en Direction
+     * @defaultValue vertical
+     * @version 2.51.0
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * @zh 滚动容器。传入选择器或者dom元素。
+     * @en Scrolling container. Pass in selector or DOM Element
+     */
+    scrollContainer?: string | HTMLElement | Window;
+    /**
+     * @zh
+     * 滚动边界值，设置该值为数字后，将会在距离滚动容器 boundary 距离时停止滚动。
+     * 设置为 end, start, center，目标元素将会对应滚动到底部，顶部，中间位置。
+     * @en
+     * Scrolling boundary.
+     * For number values, the target element stops scrolling when reaches the bounding distance.
+     * For `end`, `start`, `center`, the target scrolls to the bottom, top, and center of the container.
+     * @defaultValue start
+     */
+    boundary?: number | 'end' | 'start' | 'center' | 'nearest';
+    /**
+     * @zh 是否改变 hash，设置为 `false` 点击锚点不会改变页面 hash。
+     * @en Whether to change the URL hash
+     * @defaultValue true
+     */
+    hash?: boolean;
+    /**
+     * @zh 是否固定。当设置为 `true`时，锚点组件将会嵌套在[固钉](/react/component/affix) 组件内
+     * @en Whether to wrap anchor within [Affix](/react/component/affix)
+     * @defaultValue true
+     */
+    affix?: boolean;
+    /**
+     * @zh 通过该属性可以设置 `Affix` 组件的样式
+     * @en The style to be applied to `Affix`
+     */
+    affixStyle?: CSSProperties;
+    /**
+     * @zh 距离窗口顶部达到指定偏移量后触发。即 `Affix` 固钉组件的 `offsetTop` 属性
+     * @en Offset from the top of the viewport (in pixels). i.e. `Affix`'s `offsetTop` props
+     */
+    offsetTop?: number;
+    /**
+     * @zh 距离窗口底部达到指定偏移量后触发。 `Affix` 固钉组件的 `offsetBottom` 属性
+     * @en Offset from the bottom of the viewport (in pixels). i.e. `Affix`'s `offsetBottom` props
+     */
+    offsetBottom?: number;
+    /**
+     * @zh 滚动时锚点改变或点击锚点时触发
+     * @en Callback fired when anchor state changes
+     */
+    onChange?: (newLink: string, oldLink: string) => void;
+    /**
+     * @zh 点击锚点时候触发
+     * @en Callback fired when anchor is clicked
+     */
+    onSelect?: (newLink: string, oldLink: string) => void;
+    /**
+     * @zh 没有左侧轴线的样式。
+     * @en Whether to hide axis line of the left
+     */
+    lineless?: boolean;
+    /**
+     * @version 2.22.0
+     * @zh 容器中基准线的位置相对容器顶部的偏移量，在没有设置的时候，取值为滚动容器高度的一半。当锚点到达或离开基准线的时候会更新锚点的状态。
+     * @en The offset of the baseline relative to the top of the container.
+     * The value is half of the height of the scrolling container if not specified.
+     * The status of the anchor will be updated when the anchor reaches or leaves the baseline.
+     */
+    targetOffset?: number;
+}
+/**
+ * @title Anchor.Link
+ */
+export interface AnchorLinkProps {
+    className?: string | string[];
+    style?: CSSProperties;
+    /**
+     * @zh 锚点链接
+     * @en The target that the hyperlink points to
+     * @defaultValue #
+     */
+    href?: string;
+    /**
+     * @zh 文本内容。可以是字符串或者自定义节点。
+     * @en The content of the hyperlink
+     */
+    title?: string | ReactNode;
+}

package/types/pc/anchor/util.d.ts

@@ -0,0 +1,5 @@
+export declare function findNode(dom: HTMLElement | Document, selector: string): HTMLElement | null;
+export declare function slide(el: HTMLElement, top: number, cb: Function): void;
+export declare function getContainer(targetContainer?: string | HTMLElement | Window): HTMLElement | Window | null;
+export declare function getContainerElement(scrollContainer: HTMLElement | Window): HTMLElement;
+export declare function getScrollParent(element: any): any;

package/types/pc/auto-complete/interface.d.ts

@@ -0,0 +1,127 @@
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+import { InputProps } from '../input';
+import { OptionInfo, SelectProps } from '../select/interface';
+import { AvailableVirtualListProps } from '../virtual-list';
+type PartialSelectProps = Pick<SelectProps, 'filterOption' | 'dropdownRender' | 'triggerProps' | 'getPopupContainer' | 'defaultActiveFirstOption'>;
+/**
+ * @title AutoComplete
+ */
+export interface AutoCompleteProps extends PartialSelectProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 是否禁用
+     * @en Whether to disable the autocomplete
+     */
+    disabled?: boolean;
+    /**
+     * @zh 自定义输入框/数据源
+     * @en Custom input/source data
+     */
+    children?: ReactNode;
+    /**
+     * @zh 是否允许一键清除
+     * @en Whether to allow clear the content
+     */
+    allowClear?: boolean;
+    /**
+     * @zh 自动完成的数据源
+     * @en Data source
+     */
+    data?: (string | {
+        value: string;
+        name: string;
+        [key: string]: any;
+    } | ReactNode)[];
+    /**
+     * @zh 输入框提示
+     * @en Placeholder of input
+     */
+    placeholder?: string;
+    /**
+     * @zh 自动补全组件的默认值
+     * @en The default value of the autocomplete.
+     */
+    defaultValue?: string;
+    /**
+     * @zh 自动补全组件的值（受控模式）
+     * @en The value of the autocomplete.
+     */
+    value?: string;
+    /**
+     * @zh 是否是错误状态。(废弃，下个大版本移除，使用 status='error' 替代)
+     * @en Whether the textarea is error.(Deprecated, removed in the next major version, use status='error' instead)
+     * @deprecated use status="error"
+     */
+    error?: boolean;
+    /**
+     * @zh 状态
+     * @en Status
+     * @version 2.45.0
+     */
+    status?: 'error' | 'warning';
+    /**
+     * @zh `strict: true` 的时候大小写敏感
+     * @en Case sensitive when set `strict: true`
+     */
+    strict?: boolean;
+    /**
+     * @zh 是否处于加载状态。
+     * @en Whether the component is loading data.
+     * @version 2.10.0
+     */
+    loading?: boolean;
+    /**
+     * @zh 自定义触发元素
+     * @en Custom trigger element
+     * @defaultValue <Input />
+     * @version `() => ReactElement` in 2.31.0
+     */
+    triggerElement?: ReactElement | (({ value }: {
+        value: any;
+    }) => ReactElement);
+    /**
+     * @zh 搜索补全时的回调
+     * @en Callback when searching items
+     */
+    onSearch?: (value: string) => void;
+    /**
+     * @zh 点击补全项时的回调
+     * @en Callback when an option is selected.
+     */
+    onSelect?: (value: string, option: OptionInfo) => void;
+    /**
+     * @zh 输入或者点击补全项，value 改变时的回调（仅在点击补全项时存在第二个参数）
+     * @en Callback when an option is selected or input value changes
+     */
+    onChange?: (value: string, option?: OptionInfo) => void;
+    /**
+     * @zh 按下回车键的回调
+     * @en Callback when Enter is pressed
+     * @version `activeOption` in 2.25.1
+     */
+    onPressEnter?: (e: any, activeOption?: OptionInfo) => void;
+    /**
+     * @zh 聚焦时的回调
+     * @en Callback when component gets focus
+     */
+    onFocus?: (e: any) => void;
+    /**
+     * @zh 失去焦点的回调
+     * @en Callback when component is blurred
+     */
+    onBlur?: (e: any) => void;
+    /**
+     * @zh 传递虚拟滚动属性。
+     * @en Virtual scroll properties.
+     * @version 2.2.0
+     */
+    virtualListProps?: AvailableVirtualListProps;
+    /**
+     * @zh 传递 Input 组件的属性。
+     * @en Properties of Input component.
+     * @version 2.10.0
+     */
+    inputProps?: Partial<InputProps>;
+}
+export {};

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

@@ -0,0 +1,95 @@
+import { CSSProperties, ReactNode } from 'react';
+import { TriggerProps } from '../trigger';
+/**
+ * @title Avatar
+ */
+export interface AvatarProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 头像的形状，有圆形(circle)和正方形(square)两种
+     * @en The shape of the avatar. Two shapes are available: `circle` and `square`
+     * @defaultValue circle
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * @zh 头像的尺寸大小，单位是 `px`
+     * @en The size of the avatar in `px`
+     */
+    size?: number;
+    /**
+     * @zh 是否自动根据头像尺寸调整字体大小。
+     * @en Whether to automatically adjust the font size according to the size of the avatar.
+     * @defaultValue true
+     */
+    autoFixFontSize?: boolean;
+    /**
+     * @zh 可点击的头像交互图标。
+     * @en Clickable avatar interaction icon.
+     */
+    triggerIcon?: ReactNode;
+    /**
+     * @zh 交互图标的样式
+     * @en Interactive icon style
+     */
+    triggerIconStyle?: CSSProperties;
+    /**
+     * @zh 可点击的头像交互类型。
+     * @en Clickable avatar interaction type.
+     * @defaultValue button
+     */
+    triggerType?: 'mask' | 'button';
+    /**
+     * @zh 点击回调
+     * @en Callback when avatar is clicked
+     */
+    onClick?: (e: MouseEvent) => void;
+}
+/**
+ * @title Avatar.Group
+ */
+export interface AvatarGroupProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 头像的形状，(优先级低于 Avatar 组件本身)
+     * @en The shape of the avatar, (priority is lower than the Avatar component itself)
+     * @defaultValue circle
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * @zh 头像的尺寸大小，单位是 `px`，(优先级低于 Avatar 组件本身)
+     * @en The size of the avatar in `px`, (the priority is lower than the Avatar component itself)
+     */
+    size?: number;
+    /**
+     * @zh 是否自动根据头像尺寸调整字体大小，(优先级低于 Avatar 组件本身)
+     * @en Whether to automatically adjust the font size according to the size of the avatar (the priority is lower than the Avatar component itself)
+     * @defaultValue true
+     */
+    autoFixFontSize?: boolean;
+    /**
+     * @zh 头像组内的头像 `z-index` 递增，默认是递减。
+     * @en Whether `z-index` of the avatars in group are in ascending order. The default is in descending order.
+     * @version 2.3.0
+     */
+    zIndexAscend?: boolean;
+    /**
+     * @zh 头像组最多显示的头像数量，多余头像将以 `+x` 的形式展示。
+     * @en The maximum number of avatars displayed in the avatar group. The rest of avatars will be displayed as a `+x`.
+     * @version 2.4.0
+     */
+    maxCount?: number;
+    /**
+     * @zh 多余头像样式。
+     * @en Style for `+x`.
+     * @version 2.4.0
+     */
+    maxStyle?: CSSProperties;
+    /**
+     * @zh 多余头像气泡的 `TriggerProps`。
+     * @en `TriggerProps` for popover around `+x`.
+     * @version 2.4.0
+     */
+    maxPopoverTriggerProps?: TriggerProps;
+}

package/types/pc/back-top/interface.d.ts

@@ -0,0 +1,42 @@
+import { CSSProperties } from 'react';
+/**
+ * @title BackTop
+ */
+export interface BackTopProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 当滚动到这个高度时，显示返回顶部按钮。
+     * @en When scrolling to this height, display the back to top button.
+     * @defaultValue 400
+     */
+    visibleHeight?: number;
+    /**
+     * @zh 设置需要监听其滚动事件的元素，值为一个返回对应 `DOM` 元素的函数。
+     * @en Set the element whose scroll event needs to be listened to. The value is a function that returns the corresponding `DOM` element
+     * @defaultValue () => window
+     */
+    target?: () => HTMLElement | Window;
+    /**
+     * @zh 点击返回顶部时的回调函数。
+     * @en Callback when you click to return to the top.
+     */
+    onClick?: () => void;
+    /**
+     * @zh 是否使用Tween缓动库，注：当元素的css属性scroll-behavior: smooth;时，将不使用Tween缓动库
+     * @defaultValue true
+     */
+    tween?: boolean;
+    /**
+     * @zh 滚动到顶部的缓动方式类型
+     * @en Scroll to the top of the easing method type
+     * @defaultValue quartOut
+     */
+    easing?: Function | string;
+    /**
+     * @zh 滚动到顶部的时间。
+     * @en Duration to scroll to the top
+     * @defaultValue 400
+     */
+    duration?: number;
+}

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

@@ -0,0 +1,66 @@
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import { Omit } from '../utils/type';
+/**
+ * @title Badge
+ */
+export interface BadgeProps extends Omit<HTMLAttributes<HTMLElement>, 'className'> {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 徽标显示的数字
+     * @en Number to show in badge
+     * @defaultValue 0
+     */
+    count?: number | ReactNode;
+    /**
+     * @zh 自定义提示内容
+     * @en Set the display text of the status dot
+     */
+    prefixText?: string;
+    /**
+     * @zh 自定义提示内容
+     * @en Set the display text of the status dot
+     */
+    text?: string;
+    /**
+     * @zh 显示为小红点
+     * @en Whether to display a red dot instead of `count`
+     */
+    dot?: boolean;
+    /**
+     * @zh 是否开启小点涟漪动画，默认为 true
+     */
+    dotAnimation?: boolean;
+    /**
+     * @zh 徽标的样式
+     * @en Customize Badge dot style
+     */
+    dotStyle?: CSSProperties;
+    /**
+     * @zh 徽标的类名
+     * @en Customize Badge dot className
+     */
+    dotClassName?: string | string[];
+    /**
+     * @zh 徽标最大显示数值，如果 count 超过这个数值会显示为 `${maxCount}+`
+     * @en Max count to show. If count is larger than this value, it will be displayed as `${maxCount}+`
+     * @defaultValue 99
+     */
+    maxCount?: number;
+    /**
+     * @zh 设置徽标位置的偏移
+     * @en Set offset of the badge dot
+     */
+    offset?: [number, number];
+    /**
+     * @zh 内置的一些颜色
+     * @en Customize dot color
+     */
+    color?: 'red' | 'orangered' | 'orange' | 'gold' | 'lime' | 'green' | 'cyan' | 'pqbblue' | 'purple' | 'magenta' | 'gray' | string;
+    /**
+     * @zh 徽标的状态类型
+     * @en Set badge as a status dot
+     */
+    status?: 'default' | 'processing' | 'success' | 'warning' | 'error';
+    children?: ReactNode;
+}

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

@@ -0,0 +1,78 @@
+import React, { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import { DropdownProps } from '../dropdown';
+export interface RouteProps {
+    path: string;
+    breadcrumbName: string;
+    children?: Array<{
+        path: string;
+        breadcrumbName: string;
+    }>;
+}
+/**
+ * @title Breadcrumb
+ */
+export interface BreadcrumbProps {
+    style?: CSSProperties;
+    children?: ReactNode;
+    className?: string | string[];
+    /**
+     * @zh 指定分割符
+     * @en Custom separator
+     * @defaultValue <IconUiObliqueLine />
+     */
+    separator?: string | ReactNode;
+    /**
+     * @zh 直接设置下拉菜单
+     * @en Set drop-down menu
+     */
+    routes?: RouteProps[];
+    /**
+     * @zh 最多渲染的面包屑数量
+     * @en Max count of `Breadcrumb.Item` to show.
+     */
+    maxCount?: number;
+    /**
+     * @zh routes 时生效，自定义渲染面包屑
+     * @en Custom render function for `Breadcrumb.Item`
+     */
+    itemRender?: (route: RouteProps, routes: RouteProps[], paths: string[]) => ReactNode;
+}
+type CustomHTMLElement = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+/**
+ * @title Breadcrumb.Item
+ */
+export interface BreadCrumbItemProps extends CustomHTMLElement {
+    style?: CSSProperties;
+    className?: string | string[];
+    prefixCls?: string;
+    /**
+     * @zh 下拉菜单的内容，等同于下拉菜单组件的 droplist 属性
+     * @en The dropdown menu
+     */
+    droplist?: DropdownProps['droplist'];
+    /**
+     * @zh 下拉菜单的属性 [DropdownProps](/react/component/dropdown)
+     * @en The dropdown props [DropdownProps](/react/component/dropdown)
+     */
+    dropdownProps?: DropdownProps;
+    /**
+     * @zh 超链接地址
+     * @en href
+     * @version 2.40.0
+     */
+    href?: string;
+    /**
+     * @zh 点击回调
+     * @en click callback
+     * @version 2.40.0
+     */
+    onClick?: (e: any) => void;
+    /**
+     * @zh 标签名，可以是 html 标签或是组件
+     * @en Configure the outermost label, which can be an html label or a component
+     * @version 2.40.0
+     * @defaultValue div
+     */
+    tagName?: string | React.FC<any> | React.ComponentClass<any>;
+}
+export {};

package/types/pc/button/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import Group from './Group';
+import type { ButtonProps } from './interface';
+declare const ForwardRefButton: React.ForwardRefExoticComponent<Partial<{
+    htmlType?: "button" | "submit" | "reset";
+} & import("./interface").BaseButtonProps & Omit<React.ButtonHTMLAttributes<any>, "className" | "type" | "onClick"> & {
+    href: string;
+    target?: string;
+    anchorProps?: React.HTMLProps<HTMLAnchorElement>;
+} & Omit<React.AnchorHTMLAttributes<any>, "className" | "type" | "onClick">> & React.RefAttributes<unknown>>;
+declare const ButtonComponent: typeof ForwardRefButton & {
+    __PQB_BUTTON: boolean;
+    Group: typeof Group;
+};
+declare const BUTTON_TYPE: string[];
+declare const BUTTON_STATUS: string[];
+export { BUTTON_STATUS, BUTTON_TYPE, Group as ButtonGroup };
+export default ButtonComponent;
+export type { ButtonProps };