@unicom-cloud/ui 0.8.83 → 0.8.84

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

@@ -0,0 +1,308 @@
+import { CSSProperties, ReactNode } from 'react';
+import { SelectViewCommonProps } from '../select-view';
+import { TriggerProps } from '../trigger';
+import { VirtualListProps } from '../virtual-list/VirtualList';
+import { NodeProps } from './base/node';
+import Store from './base/store';
+/**
+ * @title Cascader
+ */
+export interface CascaderProps<T = any> extends Omit<SelectViewCommonProps, 'showSearch'> {
+    /**
+     * @zh 选择框的默认值
+     * @en Initial value
+     */
+    defaultValue?: (string | string[])[];
+    /**
+     * @zh 输入框的值
+     * @en Input Value
+     * @version 2.34.0
+     */
+    inputValue?: string;
+    /**
+     * @zh 选中值
+     * @en To set value
+     */
+    value?: (string | string[])[];
+    /**
+     * @zh 级联数据
+     * @en The data of options
+     * @defaultValue []
+     */
+    options?: T[];
+    trigger?: TriggerProps['trigger'];
+    /**
+     * @zh 展开下一级方式
+     * @en Set the way to display the next level menu. One of hover and click
+     * @defaultValue click
+     */
+    expandTrigger?: 'click' | 'hover';
+    /**
+     * @zh 每当选择的时候，值都会发生改变。多选时如果设置为`true`，会取消父子关系的关联。(默认只有在选择完成的时候，值才会更新)
+     * @en Each selection will change value if set to true.  when `mode=multiple`, child node and parent node will not affect each other.
+     */
+    changeOnSelect?: boolean;
+    /**
+     * @zh 是否在非动态加载时，选中项children为[]的时候渲染下一级节点。
+     * @en Whether to render the next level node when the children of the selected option is an empty array
+     */
+    showEmptyChildren?: boolean;
+    /**
+     * @zh 是否在隐藏之后销毁DOM结构，默认为 `true`。如果是动态加载时，默认为`false`。
+     * @en Whether destroy popup when hidden.
+     */
+    unmountOnExit?: boolean;
+    /**
+     * @zh 是否开启多选
+     * @en Set mode
+     */
+    mode?: 'multiple';
+    /**
+     * @zh 可以接受所有 Trigger 组件的 Props
+     * @en All `Trigger` component props
+     */
+    triggerProps?: Partial<TriggerProps>;
+    /**
+     * @zh
+     * 使单选模式可搜索，传入 `{ retainInputValue: true }` 在搜索框聚焦时保留现有内容
+     * 传入 `{ retainInputValueWhileSelect: true }` 在多选选择时保留输入框内容。
+     * 传入 `{ panelMode: 'select' }` 以搜索面板形式展示可选项 (`2.39.0`)
+     * `renderOption` 自定义渲染搜索项 (`2.39.0`)
+     * @en
+     * Whether single mode Select is searchable. `{ retainInputValue: true }` to retain the existing content when the search box is focused,
+     * `{ retainInputValueWhileSelect: true }` to retain the existing content when multiple selection is selected.
+     * `{ panelMode: 'select' }` Display options as a search panel (`2.39.0`)
+     * `renderOption` Custom rendering search option (`2.39.0`)
+     */
+    showSearch?: boolean | {
+        panelMode?: 'cascader' | 'select';
+        renderOption?: (inputValue: string, option: NodeProps<T>, options: extraOptions) => ReactNode;
+        retainInputValue?: boolean;
+        retainInputValueWhileSelect?: boolean;
+    };
+    /**
+     * @zh 没有数据时显示的内容
+     * @en The content to show when no result matches
+     */
+    notFoundContent?: ReactNode;
+    /**
+     * @zh 指定label，value，isLeaf，disabled，children 对应的字段
+     * @en Custom field name for label, value, isLeaf, disabled and children
+     * @defaultValue DefaultFieldNames
+     */
+    fieldNames?: FieldNamesType;
+    /**
+     * @zh 控制下拉框的展开收起
+     * @en Whether the popup is visible
+     */
+    popupVisible?: boolean;
+    /**
+     * @zh 默认下拉框的展开收起状态
+     * @en Whether the popup is visible by default
+     */
+    defaultPopupVisible?: boolean;
+    /**
+     * @zh
+     * 定制回填方式 <br/> parent: 子节点都被选中时候返回父节点 <br/> child: 返回子节点
+     * @en
+     * Customize the return value  <br/> parent:
+     * Only return the parent node when all child nodes are selected <br/> child: Return child nodes
+     * @defaultValue child
+     * @version 2.31.0
+     */
+    checkedStrategy?: 'parent' | 'child';
+    /**
+     * @zh 自定义下拉列表类名
+     * @en Custom dropdown list classname
+     * @version 2.35.0
+     */
+    dropdownMenuClassName?: string | string[];
+    /**
+     * @zh 菜单列样式
+     * @en dropdown menu column style
+     * @version 2.35.0
+     */
+    dropdownMenuColumnStyle?: CSSProperties;
+    /**
+     * @zh 传递虚拟滚动属性。开启虚拟滚动后，每列级联菜单的会存在默认宽度，可通过 `dropdownMenuColumnStyle` 进行样式调整
+     * @en virtual list props. After virtual scrolling is enabled, there will be a default width for each column of cascading menus, which can be adjusted by `dropdownMenuColumnStyle`
+     * @version 2.35.0
+     */
+    virtualListProps?: Pick<VirtualListProps<any>, 'threshold' | 'isStaticItemHeight'>;
+    /**
+     * @zh 是否默认高亮搜索结果第一个选项。
+     * @en Whether to highlight the first option of search results by default
+     * @version 2.37.0
+     * @defaultValue true
+     */
+    defaultActiveFirstOption?: boolean;
+    /**
+     * @zh 自定义下拉菜单的展示。
+     * @en Customize the popup menu.
+     * @version 2.15.0
+     */
+    dropdownRender?: (menu: ReactNode) => ReactNode;
+    /**
+     * @zh 自定义下拉菜单每一列的展示。
+     * @en Customize columns of the menu.
+     * @version 2.15.0, `level` in 2.17.0
+     */
+    dropdownColumnRender?: (menu: ReactNode, level: number) => ReactNode;
+    /**
+     * @zh 默认搜索从 `label` 属性中进行关键字搜索。通过该方法可以自定义搜索逻辑
+     * @en Customize the search logic.
+     */
+    filterOption?: (inputValue: string, option: NodeProps<T>) => boolean;
+    /**
+     * @zh 自定义展示 `option`
+     * @en Custom rendering `option`
+     */
+    renderOption?: (option: NodeProps<T>, level: number) => ReactNode;
+    /**
+     * @zh 定义每一层级的 `footer`。参数：level: 当前层级, activeOption: 当前点击的节点。返回 `null` 不展示
+     * @en Custom rendering the `footer` of each level menu.
+     */
+    renderFooter?: (level: number, activeOption: NodeProps<T> | null) => ReactNode;
+    /**
+     * @zh 格式化显示内容。
+     * @en The return value will be displayed in the input box.
+     */
+    renderFormat?: (valueShow: any[]) => ReactNode;
+    /**
+     * @zh 搜索时的回调。(reason in `2.34.0`)
+     * @en Callback when input changed.(reason in `2.34.0`)
+     * @version 2.20.0
+     */
+    onSearch?: (inputValue: string, reason: InputValueChangeReason) => void;
+    /**
+     * @zh 点击选择框的回调。
+     * @en Callback when finishing select.
+     */
+    onChange?: (value: (string | string[])[], selectedOptions: any, extra: {
+        dropdownVisible?: boolean;
+    }) => void;
+    /**
+     * @zh inputValue改变时的回调
+     * @en Callback when inputValue change.
+     * @version 2.34.0
+     */
+    onInputValueChange?: (inputValue: string, reason: InputValueChangeReason) => void;
+    /**
+     * @zh 弹出框挂在的父节点
+     * @en ParentNode which the selector should be rendered to.
+     */
+    getPopupContainer?: (node: HTMLElement) => Element;
+    /**
+     * @zh 动态加载数据。pathValue: 当前选中项的路径 value； level: 选中项层级。
+     * @en To load option lazily
+     */
+    loadMore?: (pathValue: string[], level: number) => Promise<T[]>;
+    /**
+     * @zh 下拉框收起展开时触发。
+     * @en Callback when popup shown or hidden.
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * @zh 点击清除时触发，参数是当前下拉框的展开状态。
+     * @en Callback when click clear icon.
+     */
+    onClear?: (visible: boolean) => void;
+    /**
+     * @zh 图标配置。
+     * @en Icon configuration.
+     * @version 2.50.0
+     */
+    icons?: {
+        loading?: ReactNode;
+        checked?: ReactNode;
+        next?: ReactNode;
+    };
+}
+export interface OptionProps {
+    /**
+     * @zh 选项的值
+     * @en: the value of Option
+     *
+     */
+    value?: string;
+    /**
+     * @zh 选项文本
+     * @en option text
+     */
+    label?: string;
+    /**
+     * @zh 是否禁用该选项
+     * @en whether to disabled
+     */
+    disabled?: boolean;
+    /**
+     * @zh 下一级选项
+     * @en next level menu
+     */
+    children?: OptionProps[];
+    /**
+     * @zh 是否是叶子节点
+     * @en Flag whether it is a leaf node
+     */
+    isLeaf?: boolean;
+    /**
+     * @zh 是否禁用复选框选中
+     * @en Whether to disable the check box is selected
+     * @version 2.21.0
+     */
+    disableCheckbox?: boolean;
+    /**
+     * @zh 其他字段
+     * @en other fields
+     */
+    [key: string]: any;
+}
+/**
+ * fieldnames 属性类型
+ */
+export type FieldNamesType = {
+    label?: string;
+    /** Custom field name for value */
+    value?: string;
+    /** Custom field name for children */
+    children?: string;
+    /** Custom field name for disabled  */
+    disabled?: string;
+    /** Custom field name for isLeaf */
+    isLeaf?: string;
+};
+export type InputValueChangeReason = 'manual' | 'optionListHide' | 'optionChecked';
+export interface CascaderPanelProps<T> {
+    className?: string | string[];
+    style?: CSSProperties;
+    store: Store<T>;
+    multiple?: boolean;
+    defaultValue?: string[][];
+    value?: string[][];
+    changeOnSelect?: boolean;
+    popupVisible?: boolean;
+    expandTrigger?: 'click' | 'hover';
+    trigger?: 'click';
+    prefixCls?: string;
+    rtl?: boolean;
+    showEmptyChildren?: boolean;
+    virtualListProps?: CascaderProps<T>['virtualListProps'];
+    renderOption?: (option: NodeProps<T>, level: number) => ReactNode;
+    onChange?: (value: string[][]) => void;
+    loadMore?: (activeValue: any, level: number) => void;
+    renderEmpty?: (width?: CSSProperties['width']) => ReactNode;
+    renderFooter?: (level: number, activeOption: NodeProps<T> | null) => ReactNode;
+    onDoubleClickOption?: () => void;
+    onEsc?: () => void;
+    dropdownColumnRender?: CascaderProps<T>['dropdownColumnRender'];
+    dropdownMenuColumnStyle?: CascaderProps<T>['dropdownMenuColumnStyle'];
+    getTriggerElement: () => HTMLElement;
+    icons?: {
+        loading?: ReactNode;
+        checked?: ReactNode;
+        next?: ReactNode;
+    };
+}
+export interface extraOptions {
+    checked: boolean;
+}

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

@@ -0,0 +1,102 @@
+import { CSSProperties, HTMLAttributes, ReactNode, ReactText } from 'react';
+/**
+ * @title Checkbox
+ * @zh `T = string | number`
+ * @en `T = string | number`
+ */
+export interface CheckboxProps<T extends ReactText = any> extends Omit<HTMLAttributes<HTMLLabelElement>, 'children' | 'className' | 'onChange'> {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 是否禁用
+     * @en Whether to disable
+     */
+    disabled?: boolean;
+    /**
+     * @zh 错误样式
+     * @en Whether to show in error style
+     */
+    error?: boolean;
+    /**
+     * @zh 是否选中
+     * @en Whether the checkbox is checked
+     */
+    checked?: boolean;
+    /**
+     * @zh 默认是否选中
+     * @en To set default checked
+     */
+    defaultChecked?: boolean;
+    /**
+     * @zh 半选状态
+     * @en The indeterminate state of checkbox
+     */
+    indeterminate?: boolean;
+    /**
+     * @zh 点击复选框的回调
+     * @en Callback when the state changes
+     */
+    onChange?: (checked: boolean, e: Event) => void;
+    /**
+     * @zh 复选框的 value 属性
+     * @en To set checkbox value
+     */
+    value?: T;
+    /**
+     * @zh 自定义 IconUiCheck
+     * @en Custom IconUiCheck
+     * @version 2.43.0
+     */
+    icon?: ReactNode;
+    checkboxGroupValue?: T[];
+    onGroupChange?: (value: T, checked: boolean) => void;
+    isCheckboxGroup?: boolean;
+    children?: ReactNode | ((value: {
+        checked: boolean;
+        indeterminate: boolean;
+    }) => ReactNode);
+}
+/**
+ * @title Checkbox.Group
+ */
+export interface CheckboxGroupProps<T extends ReactText> {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 整组失效
+     * @en Whether to disable all checkboxes in the group
+     */
+    disabled?: boolean;
+    /**
+     * @zh 方向
+     * @en Arrangement direction
+     * @defaultValue horizontal
+     */
+    direction?: 'horizontal' | 'vertical';
+    error?: boolean;
+    /**
+     * @zh 默认选中的选项
+     * @en Initial selected value
+     */
+    defaultValue?: T[];
+    /**
+     * @zh 可选项
+     * @en Specifies options
+     */
+    options?: (T | {
+        label: ReactNode;
+        value: T;
+        disabled?: boolean;
+        icon?: ReactNode;
+    })[];
+    /**
+     * @zh 选中的选项（受控模式）
+     * @en To set value
+     */
+    value?: T[];
+    /**
+     * @zh 变化时的回调函数
+     * @en Callback when the state changes
+     */
+    onChange?: (value: T[], e: Event) => void;
+}

package/types/{checkbox → pc/checkbox}/useCheckbox.d.ts

@@ -1,12 +1,21 @@
 export type ResultType<T> = {
+    /** 当前选中项 */
     selected: T[];
+    /** 只选中传入参数的选项 */
     setSelected: (value: T[]) => void;
+    /** 设置选项的选中状态 */
     setValueSelected: (value: T | T[], selected?: boolean) => void;
+    /** 选中全部 */
     selectAll: () => void;
+    /** 取消全部选中 */
     unSelectAll: () => void;
+    /** 是否选项被选中 */
     isSelected: (value: T) => boolean;
+    /** 切换选项选中状态。不传参数时，会切换所有选项的选中状态 */
     toggle: (value?: T | T[]) => void;
+    /** 是否全部选项被选中 */
     isAllSelected: () => boolean;
+    /** 是否只有部分选项选中 */
     isPartialSelected: () => boolean;
 };
 declare const useCheckbox: <T>(values: T[], defaultSelected?: T[]) => ResultType<T>;

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

@@ -0,0 +1,111 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * @title Collapse
+ */
+export interface CollapseProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 当前面板选中值
+     * @en Key of the active panel
+     */
+    activeKey?: string | string[];
+    /**
+     * @zh 默认展开的面板
+     * @en Key of the default active panel
+     */
+    defaultActiveKey?: string | string[];
+    /**
+     * @zh 是否是手风琴模式
+     * @en Whether to render as Accordion
+     */
+    accordion?: boolean;
+    /**
+     * @zh 自定义展开图标
+     * @en Custom collapse icon
+     */
+    expandIcon?: ReactNode;
+    /**
+     * @zh 展开图标的位置
+     * @en Position of collapse icon
+     * @defaultValue left
+     */
+    expandIconPosition?: 'left' | 'right';
+    /**
+     * @zh 无边框样式
+     * @en Whether to render border
+     * @defaultValue true
+     */
+    bordered?: boolean;
+    /**
+     * @zh 设置为 `true` 时，挂载时不会渲染被隐藏的面板。
+     * @en If true, invisible panels will not be rendered on mount
+     * @defaultValue true
+     */
+    lazyload?: boolean;
+    /**
+     * @zh 是否销毁被折叠的面板
+     * @en If true, panels will be unmounted on collapsing
+     */
+    destroyOnHide?: boolean;
+    /**
+     * @zh 可触发折叠操作的区域
+     * @en The area that can trigger the collapse operation
+     * @version 2.41.0
+     */
+    triggerRegion?: 'header' | 'icon';
+    /**
+     * @zh 展开面板改变时触发
+     * @en Callback when the active panel changes
+     */
+    onChange?: (key: string, keys: string[], e: any) => void;
+}
+/**
+ * @title Collapse.Item
+ */
+export interface CollapseItemProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 内容区域的附加样式。
+     * @en Additional styles of the content area.
+     * @version 2.15.0
+     */
+    contentStyle?: CSSProperties;
+    /**
+     * @zh 折叠面板头部内容，允许自定义
+     * @en Header content
+     */
+    header?: ReactNode;
+    /**
+     * @zh 对应 activeKey，当前面板组件的的唯一标识
+     * @en Unique identifier key of the current panel item
+     */
+    name: string;
+    /**
+     * @zh 是否禁用
+     * @en If true, the panel is not collapsible
+     */
+    disabled?: boolean;
+    /**
+     * @zh 自定义展开图标
+     * @en Custom expand icon
+     */
+    expandIcon?: ReactNode;
+    /**
+     * @zh 是否展示展开按钮
+     * @en Whether to show expand icon
+     * @defaultValue true
+     */
+    showExpandIcon?: boolean;
+    /**
+     * @zh 额外节点
+     * @en The extra element in the corner
+     */
+    extra?: ReactNode;
+    /**
+     * @zh 面板被折叠时是否销毁节点，优先级高于 `Collapse` 的 `destroyOnHide`
+     * @en If true, item will be unmounted on collapsing. (Higher priority than `Collapse.destroyOnHide`)
+     */
+    destroyOnHide?: boolean;
+}

package/types/{color-picker → pc/color-picker}/hooks/useColorPicker.d.ts

@@ -11,13 +11,13 @@ interface UseColorPickerProps {
     onVisibleChange?: (visible: boolean) => void;
 }
 export declare const useColorPicker: (props: UseColorPickerProps) => {
-    value: any;
+    value: string | GradientColor[] | undefined;
     activeMode: ColorPickerMode;
     gradientColors: InternalGradientColor[];
     gradientColorsRef: import("react").MutableRefObject<InternalGradientColor[]>;
     activeColorId: string;
     activeColorIdRef: import("react").MutableRefObject<string>;
-    popupVisible: any;
+    popupVisible: boolean;
     color: {
         hsv: HSV;
         rgb: import("@unicom-cloud/tinycolor").Numberify<import("@unicom-cloud/tinycolor").RGBA>;

package/types/pc/color-picker/interface.d.ts

@@ -0,0 +1,149 @@
+import { CSSProperties, ReactNode } from 'react';
+import { InputProps } from '../input';
+import { TriggerProps } from '../trigger';
+/**
+ * @title ColorPicker
+ */
+export interface ColorPickerProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 默认值
+     * @en The initial input content
+     */
+    defaultValue?: string | GradientColor[];
+    /**
+     * @zh 颜色值，受控模式
+     * @en The input content value
+     */
+    value?: string | GradientColor[];
+    /**
+     * @zh 显示颜色值
+     * @en Show color value
+     */
+    showText?: boolean;
+    /**
+     * @zh 颜色值的格式
+     * @en Color value format
+     */
+    format?: 'hex' | 'rgb';
+    /**
+     * @zh 单一颜色或渐变色模式
+     * @en Whether to use single color or gradient color mode
+     * @defaultValue single
+     */
+    mode?: 'single' | 'gradient' | ['single', 'gradient'];
+    /**
+     * @zh 禁用
+     * @en disabled
+     */
+    disabled?: boolean;
+    /**
+     * @zh 输入框的尺寸
+     * @en The size of the input box
+     * @defaultValue default
+     */
+    size?: InputProps['size'];
+    /**
+     * @zh 默认弹出框是打开还是关闭
+     * @en Whether the confirmation box is visible by default
+     */
+    defaultPopupVisible?: boolean;
+    /**
+     * @zh 弹出框是打开还是关闭。(受控)
+     * @en Whether the confirmation box is visible
+     */
+    popupVisible?: boolean;
+    /**
+     * @zh 隐藏后是否销毁 DOM 结构
+     * @en Whether to umount the node on hiding
+     * @defaultValue true
+     */
+    unmountOnExit?: boolean;
+    /**
+     * @zh 可以接受所有 Trigger 组件的 Props
+     * @en All `Trigger` component props
+     */
+    triggerProps?: Partial<TriggerProps>;
+    /**
+     * @zh 禁用透明通道
+     * @en Disable transparency channel
+     */
+    disabledAlpha?: boolean;
+    /**
+     * @zh 显示历史颜色
+     * @en Show history colors
+     */
+    showHistory?: boolean;
+    /**
+     * @zh 历史颜色的颜色数组
+     * @en Color array of history colors
+     */
+    historyColors?: string[];
+    /**
+     * @zh 显示预设颜色
+     * @en Show preset colors
+     */
+    showPreset?: boolean;
+    /**
+     * @zh 预设颜色的颜色数组
+     * @en Color array of preset colors
+     */
+    presetColors?: string[];
+    extra?: ReactNode | ((params: {
+        value: string;
+    }) => ReactNode);
+    /**
+     * @zh 自定义触发元素。
+     * @en The trigger element which executes the dropdown action.
+     * @version 2.60.0
+     */
+    triggerElement?: ReactNode | ((params: {
+        value: string | GradientColor[];
+    }) => ReactNode);
+    /**
+     * @zh 颜色值改变时触发
+     * @en Callback when the color value changes
+     */
+    onChange?: (value: string | GradientColor[]) => void;
+    /**
+     * @zh 下拉框收起展开时触发。
+     * @en Callback when popup shown or hidden.
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * @zh 自定义面板底部内容
+     * @en Customize the bottom content of the panel
+     * @version 2.62.0
+     */
+    renderFooter?: () => ReactNode;
+}
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface HSV {
+    h: number;
+    s: number;
+    v: number;
+}
+export interface Color {
+    hsv: HSV;
+    rgb: RGB;
+    hex: string;
+}
+export declare enum ColorPickerMode {
+    Single = "single",
+    Gradient = "gradient"
+}
+export interface GradientColor {
+    color: string;
+    percent: number;
+}
+export interface InternalGradientColor {
+    id: string;
+    color: Color;
+    alpha: number;
+    percent: number;
+}