@unicom-cloud/ui 0.8.83 → 0.8.84

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

@@ -0,0 +1,115 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, CSSProperties, HTMLProps, ReactNode } from 'react';
+export interface BaseButtonProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    children?: ReactNode;
+    /**
+     * @zh
+     * 按钮主要分为六种按钮类型：主要按钮、次级按钮、虚框按钮、文字按钮、线性按钮，`default` 为次级按钮。
+     * @en
+     * A variety of button types are available: `primary`, `secondary`, `dashed`,
+     * `text`, `linear` and `default` which is the secondary.
+     * @defaultValue default
+     */
+    type?: 'default' | 'primary' | 'secondary' | 'dashed' | 'text' | 'text-only' | 'outline';
+    /**
+     * @zh 按钮状态
+     * @en Status of the button
+     * @defaultValue default
+     */
+    status?: 'warning' | 'danger' | 'success' | 'processing' | 'default';
+    /**
+     * @zh 按钮的尺寸
+     * @en Size of the button
+     * @defaultValue default
+     */
+    size?: 'mini' | 'small' | 'default' | 'large';
+    /**
+     * @zh 按钮形状，`circle` - 圆形， `round` - 全圆角， `square` - 长方形
+     * @en Three button shapes are available: `circle`, `round` and `square`
+     * @defaultValue square
+     */
+    shape?: 'circle' | 'round' | 'square';
+    /**
+     * @zh 添加跳转链接，设置此属性，button表现跟a标签一致
+     * @en The button behaves like `<a>` with href as target url.
+     */
+    href?: string;
+    /**
+     * @zh a 链接的 target 属性，href 存在时生效
+     * @en The target attribute of the link, which takes effect when href exists.
+     */
+    target?: string;
+    /**
+     * @zh a 链接的原生属性，href 存在时生效
+     * @en The native attribute of the link, which takes effect when href exists
+     */
+    anchorProps?: HTMLProps<HTMLAnchorElement>;
+    /**
+     * @zh 是否禁用
+     * @en Whether to disable the button
+     */
+    disabled?: boolean;
+    /**
+     * @zh 按钮是否是加载状态
+     * @en Whether the button is in the loading state
+     */
+    loading?: boolean;
+    /**
+     * @zh 当 loading 的时候，不改变按钮的宽度。
+     * @en The width of the button remains unchanged on loading
+     */
+    loadingFixedWidth?: boolean;
+    /**
+     * @zh 设置按钮的图标
+     * @en Icon of the button
+     */
+    icon?: ReactNode;
+    /**
+     * @zh 设置按钮的右边的图标
+     */
+    iconRight?: ReactNode;
+    iconSuffix?: ReactNode;
+    /**
+     * @zh 只有图标，按钮宽高相等。如果指定 `icon` 且没有 children，`iconOnly` 默认为 true
+     * @en Whether to show icon only, in which case the button width and height are equal. If `icon` is specified and there are no children, `iconOnly` defaults to `true`
+     */
+    iconOnly?: boolean;
+    /**
+     * @zh 按钮宽度随容器自适应。
+     * @en Whether the width of the button should adapt to the container.
+     */
+    long?: boolean;
+    /**
+     * @zh 是否是错误状态
+     * @en Whether the textarea is error
+     */
+    error?: boolean;
+    /**
+     * @zh 点击按钮的回调
+     * @en Callback fired when the button is clicked
+     */
+    onClick?: (e: Event) => void;
+}
+export type AnchorButtonProps = {
+    href: string;
+    target?: string;
+    anchorProps?: HTMLProps<HTMLAnchorElement>;
+} & BaseButtonProps & Omit<AnchorHTMLAttributes<any>, 'type' | 'onClick' | 'className'>;
+export type FinalButtonProps = {
+    /**
+     * @zh 按钮原生的 html type 类型
+     * @en html button type
+     * @defaultValue button
+     */
+    htmlType?: 'button' | 'submit' | 'reset';
+} & BaseButtonProps & Omit<ButtonHTMLAttributes<any>, 'type' | 'onClick' | 'className'>;
+/**
+ * @title Button
+ */
+export type ButtonProps = Partial<FinalButtonProps & AnchorButtonProps>;
+export interface ButtonGroupProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    children?: ReactNode;
+}

package/types/pc/calendar/hook/useCellClassName.d.ts

@@ -0,0 +1,2 @@
+declare function useCellClassName(props: any): (cellDateObj: any, disabled: any) => string;
+export default useCellClassName;

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

@@ -0,0 +1,122 @@
+import { ReactNode, CSSProperties } from 'react';
+import { Dayjs } from 'dayjs';
+export type CalendarValue = Dayjs | Date | string | number;
+/**
+ * @title Calendar
+ */
+export interface CalendarProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 是否允许选中和切换日期，`panel` 模式下默认可选中切换
+     * @en Whether to allow the selection and switching of the date. It's enabled by default in `panel` mode
+     */
+    allowSelect?: boolean;
+    /**
+     * @zh 是否放在容器中进行展示。
+     * @en Whether to be displayed in a container.
+     */
+    panel?: boolean;
+    /**
+     * @zh 卡片模式的宽度
+     * @en The width of the calendar in card mode
+     * @defaultValue 265
+     */
+    panelWidth?: number | string;
+    /**
+     * @zh 是否显示跳转到今天的按钮
+     * @en Whether to display the button to jump to today
+     */
+    panelTodayBtn?: boolean;
+    /**
+     * @zh 卡片模式下配置操作按钮
+     * @en Operation buttons configuration in card mode
+     */
+    panelOperations?: Array<'left' | 'double-left' | 'right' | 'double-right'>;
+    /**
+     * @zh 周选择
+     * @en Select Week date
+     */
+    isWeek?: boolean;
+    /**
+     * @zh 每周的第一天开始于周几，0 - 周日，1 - 周一。
+     * @en The first day of the week starts on the day of the week, `0`-Sunday, `1`-Monday.
+     * @defaultValue 0
+     */
+    dayStartOfWeek?: 0 | 1;
+    defaultValue?: CalendarValue;
+    value?: CalendarValue;
+    defaultPageShowDate?: CalendarValue;
+    pageShowDate?: CalendarValue;
+    /**
+     * @zh 选择日期的月日历和选择月份的年日历。
+     * @en The default display mode of the calendar
+     * @defaultValue month
+     */
+    defaultMode?: 'day' | 'week' | 'month' | 'year';
+    /**
+     * @zh 选择日期的月日历和选择月份的年日历，受控模式。
+     * @en The display mode of the calendar
+     */
+    mode?: 'day' | 'week' | 'month' | 'year';
+    modes?: ('day' | 'week' | 'month' | 'year')[];
+    /**
+     * @zh 不可选取的时间
+     * @en Function that specifies the dates that cannot be selected
+     */
+    disabledDate?: (current: Dayjs) => boolean;
+    /**
+     * @zh 日期变化触发的回调。
+     * @en Callback when date change.
+     */
+    onChange?: (date: Dayjs) => void;
+    /**
+     * @zh 面板日期发生改变触发的回调。
+     * @en Callback when the panel date changes.
+     */
+    onPanelChange?: (date: Dayjs) => void;
+    /** 
+     * @zh 定制日期显示，会完全覆盖日期单元格。
+     * @en Customize the date display, which will completely cover the date cell.
+     */
+    dateRender?: (currentDate: Dayjs) => ReactNode;
+    /**
+     * @zh 定制月份显示，会完全覆盖月份单元格。
+     * @en Customize the month display, which will completely cover the month cell.
+     */
+    monthRender?: (currentDate: Dayjs) => ReactNode;
+    /**
+     * @zh 定制日期单元格，内容会被添加到单元格内，只在全屏日历模式下生效。
+     * @en Customize the date cell, the content will be added to the cell, and it will only work in the full-screen calendar mode.
+     */
+    dateInnerContent?: (currentDate: Dayjs) => ReactNode;
+    /**
+     * @zh 自定义头部渲染。
+     * @en Custom header renderer.
+     */
+    headerRender?: (props: {
+        value?: Dayjs;
+        pageShowDate?: Dayjs;
+        mode?: string;
+        onChange: any;
+        onChangePageDate: any;
+        onChangeMode: any;
+    }) => ReactNode;
+    /**
+     * @zh
+     * 国际化配置
+     * @en
+     * Internationalization configuration.
+     */
+    locale?: Record<string, any>;
+    /**
+     * @zh 有两种头部可供选择，默认的按钮类型和下拉框类型，只在全屏日历模式下生效。
+     * @en There are two types of headers to choose from. Only work in full-screen calendar mode.
+     * @defaultValue button
+     */
+    headerType?: 'button' | 'select';
+    rangeValues?: Dayjs[];
+    hoverRangeValues?: Dayjs[];
+    onMouseEnterCell?: (time: Dayjs, disabled: boolean) => void;
+    onMouseLeaveCell?: (time: Dayjs, disabled: boolean) => void;
+}

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

@@ -0,0 +1,99 @@
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import { Omit } from '../utils/type';
+/**
+ * @title Card
+ */
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'className'> {
+    style?: CSSProperties;
+    className?: string | string[];
+    children?: ReactNode;
+    id?: string;
+    /**
+     * @zh 是否有边框
+     * @en Whether to render the border
+     * @defaultValue true
+     */
+    bordered?: boolean;
+    /**
+     * @zh 是否为加载中
+     * @en Whether on loading state
+     */
+    loading?: boolean;
+    /**
+     * @zh 是否可悬浮
+     * @en Whether the card can be hovered
+     */
+    hoverable?: boolean;
+    /**
+     * @zh 卡片尺寸
+     * @en Size of the card
+     * @defaultValue default
+     */
+    size?: 'default' | 'small';
+    /**
+     * @zh 卡片标题
+     * @en Title of the card
+     */
+    title?: string | ReactNode;
+    /**
+     * @zh 卡片右上角的操作区域
+     * @en Content to render in the top-right corner of the card
+     */
+    extra?: string | ReactNode;
+    /**
+     * @zh 卡片封面
+     * @en Cover of card
+     */
+    cover?: ReactNode;
+    /**
+     * @zh 卡片底部的操作组
+     * @en The action list which shows at the bottom of the card
+     */
+    actions?: ReactNode[];
+    /**
+     * @zh 自定义标题区域样式
+     * @en The additional css style to apply to card head
+     */
+    headerStyle?: CSSProperties;
+    /**
+     * @zh 内容区域自定义样式
+     * @en The additional css style to apply to card content
+     */
+    bodyStyle?: CSSProperties;
+}
+/**
+ * @title Card.Meta
+ */
+export interface CardMetaProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    actionList?: ReactNode[];
+    /**
+     * @zh 头像
+     * @en Avatar of the card
+     */
+    avatar?: ReactNode;
+    /**
+     * @zh 标题
+     * @en Title of the card
+     */
+    title?: string | ReactNode;
+    /**
+     * @zh 描述
+     * @en Description of the card
+     */
+    description?: string | ReactNode;
+}
+/**
+ * @title Card.Grid
+ */
+export interface CardGridProps {
+    children?: ReactNode;
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 是否可以悬浮
+     * @en Whether can be hovered
+     */
+    hoverable?: boolean;
+}

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

@@ -0,0 +1,144 @@
+import { CSSProperties, MutableRefObject, ReactNode } from 'react';
+export type CarouselHandle = {
+    dom: HTMLElement;
+    goto: (options: {
+        /** 目标索引 */
+        index: number;
+        /** 是否为逆向 */
+        isNegative?: boolean;
+        /** 是否由用户触发，将决定 onChange 回调的第三个参数 */
+        isManual?: boolean;
+        /** 是否重置自动播放的 interval */
+        resetAutoPlayInterval?: boolean;
+    }) => void;
+};
+/**
+ * @title Carousel
+ */
+export interface CarouselProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    children?: ReactNode;
+    /**
+     * @zh 当前展示索引
+     * @en The index of current slide which starts from 0
+     * @defaultValue 0
+     */
+    currentIndex?: number;
+    /**
+     * @zh
+     * 是否自动循环展示，或者传入 `{ interval: 自动切换的时间间隔(默认: 3000), hoverToPause: 鼠标悬浮时是否暂停自动切换(默认: true) }` 进行高级配置 (`2.14.0` 支持传入对象)
+     * @en
+     * Whether to scroll automatically, or pass in `{ interval: the time interval for switching (default: 3000),
+     * hoverToPause: whether to pause switching while hover (default: true) }` for configuration (object is supported from `2.14.0`)
+     */
+    autoPlay?: boolean | {
+        interval?: number;
+        hoverToPause?: boolean;
+    };
+    /**
+     * @zh
+     * 是否仅渲染满足动画效果的最少数量的 children
+     * @en
+     * Whether to render only the minimum number of children that meet the animation effect
+     * @version 2.21.0
+     */
+    miniRender?: boolean;
+    autoPlaySpeed?: number;
+    /**
+     * @zh 幻灯片移动速率(ms)
+     * @en The duration of the slide movement(ms)
+     * @defaultValue 500
+     */
+    moveSpeed?: number;
+    /**
+     * @zh 切换动画
+     * @en The animation of the slide movement
+     * @defaultValue slide
+     */
+    animation?: 'slide' | 'card' | 'fade';
+    /**
+     * @zh 幻灯片切换触发方式, click/hover 指示器
+     * @en How to trigger the slide switch, click/hover the indicator
+     * @defaultValue click
+     */
+    trigger?: 'click' | 'hover';
+    /**
+     * @zh 幻灯片移动方向
+     * @en The direction of the slide movement
+     * @defaultValue horizontal
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * @zh 切换箭头显示时机
+     * @en When to show the switch trigger
+     * @defaultValue always
+     */
+    showArrow?: 'always' | 'hover' | 'never';
+    /**
+     * @zh 切换箭头样式
+     * @en The additional css class for switch trigger
+     */
+    arrowClassName?: string | string[];
+    /**
+     * @zh 自定义图标
+     * @en Customize icons
+     * @version 2.25.0
+     */
+    icons?: {
+        prev?: ReactNode;
+        next?: ReactNode;
+    };
+    /**
+     * @zh 指示器类型，可为小方块和小圆点或不显示
+     * @en Type of indicator
+     * @defaultValue dot
+     */
+    indicatorType?: 'line' | 'dot' | 'slider' | 'never';
+    /**
+     * @zh 指示器位置
+     * @en Position of indication
+     * @defaultValue bottom
+     */
+    indicatorPosition?: 'bottom' | 'top' | 'left' | 'right' | 'outer';
+    /**
+     * @zh 指示器的样式
+     * @en The additional css class for indicator
+     */
+    indicatorClassName?: string | string[];
+    /**
+     * @zh
+     * 过渡速度曲线, 默认匀速 [transition-timing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function)
+     * @en
+     * How intermediate values are calculated for CSS properties being affected by a transition effect.
+     * [transition-timing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function)
+     * @defaultValue cubic-bezier(0.34, 0.69, 0.1, 1)
+     */
+    timingFunc?: string;
+    /**
+     * @zh 幻灯片发生切换时的回调函数。
+     * @en Callback when slide changes.
+     * @version `isManual` in 2.4.0
+     */
+    onChange?: (index: number, prevIndex: number, isManual: boolean) => void;
+    /**
+     * @zh 用于获得带有 API 方法的 Carousel 引用。
+     * @en Carousel reference for imperative API calls.
+     * @version 2.16.1
+     */
+    carousel?: MutableRefObject<CarouselHandle>;
+}
+export interface CarouselArrowProps extends Pick<CarouselProps, 'direction' | 'showArrow' | 'icons'> {
+    className?: string | string[];
+    prev?: (e: any) => any;
+    next?: (e: any) => any;
+}
+export interface CarouselIndicatorProps {
+    className?: string | string[];
+    count: number;
+    activeIndex?: number;
+    type?: CarouselProps['indicatorType'];
+    position?: CarouselProps['indicatorPosition'];
+    trigger?: CarouselProps['trigger'];
+    onSelectIndex?: (e: number) => void;
+}

package/types/{cascader → pc/cascader}/base/node.d.ts

@@ -4,13 +4,21 @@ export interface NodeProps<T> extends OptionProps {
     value: string;
     label: string;
     isLeaf?: boolean;
+    /** 是否选中 */
     _checked: boolean;
+    /** 层级 */
     _level?: number;
+    /** 是否半选 */
     _halfChecked: boolean;
+    /** 当前选项节点的父节点 */
     parent: NodeProps<T> | null;
+    /** 当前选项节点路径的所有节点的值 */
     pathValue: string[];
+    /** 下一级选项 */
     children?: NodeProps<T>[];
+    /** 是否在加载中 */
     loading?: boolean;
+    /** 是否加载完成 */
     loaded?: boolean;
     pathLabel: string[];
 }
@@ -23,24 +31,46 @@ declare class Node<T extends NodeProps<T>> {
     isLeaf?: boolean;
     disableCheckbox?: boolean;
     _checked: boolean;
+    /** 是否半选 */
     _halfChecked: boolean;
+    /** 当前选项节点的父节点 */
     parent: Node<T> | null;
+    /** 当前选项节点路径的所有节点的值 */
     pathValue: string[];
     pathLabel: string[];
+    /** 下一级选项 */
     children?: Node<T>[];
+    /** 是否在加载中 */
     loading?: boolean;
+    /** 是否加载完成 */
     loaded?: boolean;
     config: ConfigType<T>;
     _data?: NodeProps<T>;
     constructor(data: T, config?: ConfigType<T>, parent?: Node<T>);
     private _initNode;
+    /**
+     * 根据this.children 计算是否当前node半选状态
+     * 假设半选是 0.5，全选是1，不选是0。
+     * 那么只有当前节点的所有children加起来等于children.length，才是全选，否则和大于0，就是半选。
+     */
     private _isHalfChecked;
+    /**
+     *
+     * @param checked 选中状态
+     * @param ignoreDisabled 是否忽略节点禁用设置选中状态，一般在初始化设置选中状态时传参为true
+     */
     private _setNodeChildrenChecked;
     getSelfChildrenValue: () => never[];
     updateHalfState: (checked: boolean) => void;
     setCheckedProperty: (checked: boolean) => void;
     setCheckedState: (checked: boolean) => void;
     setCheckedStateIgnoreDisabled: (checked: boolean) => void;
+    /**
+     * 遍历节点的parent，获取当前节点的路径节点。
+     * node: { label: '1-1-1', parent: { label: '1-1', parent: { label: '1' }, ... }, ...}
+     * @return [node.parent.parent, node.parent, node]
+     * @memberof Store
+     */
     getPathNodes: () => Node<T>[];
     getChildren: () => Node<T>[];
     setLoading: (loading?: boolean) => void;

package/types/{cascader → pc/cascader}/base/store.d.ts

@@ -15,11 +15,28 @@ declare class Store<T> {
     constructor(options: T[], value?: string[][], config?: ConfigType<T>);
     private _calcNodes;
     private _updateFlatNodes;
+    /**
+     * values: 全部的选中值
+     * 根据values更新节点状态。不包含在values的节点都设置为未选中状态
+     * @memberof Store
+     */
     setNodeCheckedByValue: (initValues: string[][]) => void;
+    /**
+     * 为当前节点插入子节点。动态加载时候用到
+     */
     appendOptionChildren: (node: Node<T>, children: T[]) => void;
+    /**
+     * 通过 value 查找对应的node节点。
+     * value: 是路径节点的value组成的数组
+     */
     findNodeByValue: (value: string[]) => Node<T> | null;
+    /**
+     * 搜索所有label含有关键字的节点
+     */
     searchNodeByLabel: (inputStr?: string) => Node<T>[];
+    /** 获取所有节点 */
     getOptions: () => Node<T>[];
+    /** 获取所有选中状态的节点。 aggregation: 是否聚合节点 */
     getCheckedNodes: () => Node<T>[];
     getCheckedParentNodes: () => Node<T>[];
 }