@nutui/nutui-react 2.0.0-alpha.12 → 2.0.0-alpha.13

package/dist/style.mjs

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.0-alpha.12 Fri May 26 2023 15:24:22 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.13 Wed May 31 2023 14:49:22 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/styles/variables-jmapp.scss

@@ -2424,10 +2424,7 @@ $invoice-padding: var(--nutui-invoice-padding, 10px 10px 20px) !default;
 
 // TrendArrow（✅ todo：react版本该组件暂无，将变量先迁过来）
 $trendarrow-font-size: var(--nutui-trendarrow-font-size, 14px) !default;
-$trendarrow-before-icon-margin: var(
-  --nutui-trendarrow-before-icon-margin,
-  4px
-) !default;
+$trendarrow-icon-margin: var(--nutui-trendarrow-icon-margin, 4px) !default;
 
 // animatingnumbers（✅）
 $countup-height: var(--nutui-countup-height, 32px) !default;
@@ -2461,7 +2458,4 @@ $col-default-margin-bottom: var(
 
 // TrendArrow
 $trendarrow-font-size: var(--nutui-trendarrow-font-size, 14px) !default;
-$trendarrow-before-icon-margin: var(
-  --nutui-trendarrow-before-icon-margin,
-  4px
-) !default;
+$trendarrow-icon-margin: var(--nutui-trendarrow-icon-margin, 4px) !default;

package/dist/styles/variables.scss

@@ -2397,10 +2397,7 @@ $invoice-padding: var(--nutui-invoice-padding, 10px 10px 20px) !default;
 
 // TrendArrow（✅ todo：react版本该组件暂无，将变量先迁过来）
 $trendarrow-font-size: var(--nutui-trendarrow-font-size, 14px) !default;
-$trendarrow-before-icon-margin: var(
-  --nutui-trendarrow-before-icon-margin,
-  4px
-) !default;
+$trendarrow-icon-margin: var(--nutui-trendarrow-icon-margin, 4px) !default;
 
 // animatingnumbers（✅）
 $countup-height: var(--nutui-countup-height, 32px) !default;
@@ -2434,7 +2431,4 @@ $col-default-margin-bottom: var(
 
 // TrendArrow
 $trendarrow-font-size: var(--nutui-trendarrow-font-size, 14px) !default;
-$trendarrow-before-icon-margin: var(
-  --nutui-trendarrow-before-icon-margin,
-  4px
-) !default;
+$trendarrow-icon-margin: var(--nutui-trendarrow-icon-margin, 4px) !default;

package/dist/types/packages/actionsheet/actionsheet.d.ts

@@ -4,13 +4,45 @@ export type ItemType<T> = {
     [key: string]: T;
 };
 export interface ActionSheetProps extends BasicComponent {
-    visible: boolean;
-    title: ReactNode;
-    description: ReactNode;
-    options: ItemType<string | boolean>[];
-    optionKey: ItemType<string>;
-    cancelText: ReactNode;
-    onCancel: () => void;
-    onSelect: (item: ItemType<string | boolean>, index: number) => void;
+    /**
+    * 遮罩层可见
+    * @default false
+    */
+    visible: boolean
+    /**
+    * 设置列表面板标题
+    * @default -
+    */
+    title: ReactNode
+    /**
+    * 设置列表面板副标题/描述
+    * @default -
+    */
+    description: ReactNode
+    /**
+    * 列表项
+    * @default []
+    */
+    options: ItemType<string | boolean>[]
+    /**
+    * 列表项的自定义设置
+    * @default -
+    */
+    optionKey: ItemType<string>
+    /**
+    * 取消文案
+    * @default 取消
+    */
+    cancelText: ReactNode
+    /**
+    * 点击取消文案时触发
+    * @default -
+    */
+    onCancel: () => void
+    /**
+    * 选择之后触发
+    * @default -
+    */
+    onSelect: (item: ItemType<string | boolean>, index: number) => void
 }
 export declare const ActionSheet: FunctionComponent<Partial<ActionSheetProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onSelect'>>;

package/dist/types/packages/animate/animate.d.ts

@@ -2,9 +2,25 @@ import React, { FunctionComponent } from 'react';
 import { AnimateType, AnimateAction } from './type';
 import { BasicComponent } from '../../utils/typings';
 export interface AnimateProps extends BasicComponent {
-    type: AnimateType;
-    action: AnimateAction;
-    loop: boolean;
-    onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+    * 动画类型，见下方type值说明
+    * @default 'shake'
+    */
+    type: AnimateType
+    /**
+    * 触发方式，'initial'--初始化执行;  'click'--点击执行
+    * @default 'initial'
+    */
+    action: AnimateAction
+    /**
+    * 是否循环执行。true-循环执行;false-执行一次
+    * @default false
+    */
+    loop: boolean
+    /**
+    * 点击元素时触发
+    * @default -
+    */
+    onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
 }
 export declare const Animate: FunctionComponent<Partial<AnimateProps> & React.HTMLAttributes<HTMLDivElement>>;

package/dist/types/packages/animatingnumbers/countup.d.ts

@@ -1,11 +1,10 @@
-import React, { FunctionComponent } from 'react';
-export interface CountUpProps {
-    maxLen: number;
-    endNumber: string;
-    delaySpeed?: number;
-    easeSpeed: number;
+import { FunctionComponent } from 'react';
+import { BasicComponent } from '../../utils/typings';
+export interface CountUpProps extends BasicComponent {
+    length: number;
+    value: string;
+    delay?: number;
+    duration: number;
     thousands: boolean;
-    className: string;
-    style: React.CSSProperties;
 }
 export declare const CountUp: FunctionComponent<Partial<CountUpProps>>;

package/dist/types/packages/animatingnumbers/index.d.ts

@@ -1,2 +1,3 @@
 import { AnimatingNumbers } from './animatingnumbers';
+export type { CountUpProps } from './countup';
 export default AnimatingNumbers;

package/dist/types/packages/audio/audio.d.ts

@@ -1,17 +1,65 @@
 import React, { FunctionComponent, ReactEventHandler } from 'react';
 import { BasicComponent } from '../../utils/typings';
 export interface AudioProps extends BasicComponent {
-    src: string;
-    muted: boolean;
-    autoPlay: boolean;
-    loop: boolean;
-    preload: string;
-    type: string;
-    onBack: (e: HTMLAudioElement) => void;
-    onForward: (e: HTMLAudioElement) => void;
-    onPause: ((e: HTMLAudioElement) => void) & ReactEventHandler<HTMLAudioElement>;
-    onEnd: (e: HTMLAudioElement) => void;
-    onMute: (e: HTMLAudioElement) => void;
-    onCanPlay: ((e: HTMLAudioElement) => void) & ReactEventHandler<HTMLAudioElement>;
+    /**
+    * 语音资源链接
+    * @default -
+    */
+    src: string
+    /**
+    * 是否静音
+    * @default false
+    */
+    muted: boolean
+    /**
+    * 是否自动播放
+    * @default false
+    */
+    autoPlay: boolean
+    /**
+    * 是否循环播放
+    * @default false
+    */
+    loop: boolean
+    /**
+    * 是否预加载语音 枚举值：'none'、'metadata'、'auto'、''
+    * @default auto
+    */
+    preload: string
+    /**
+    * 展示形式，可选值：controls 控制面板   progress 进度条  icon 图标 none 自定义
+    * @default progress
+    */
+    type: string
+    /**
+    * 语音快退回调，type = progress 时生效
+    * @default -
+    */
+    onBack: (e: HTMLAudioElement) => void
+    /**
+    * 语音快进回调，type = progress 时生效
+    * @default -
+    */
+    onForward: (e: HTMLAudioElement) => void
+    /**
+    * 暂停回调
+    * @default -
+    */
+    onPause: ((e: HTMLAudioElement) => void) & ReactEventHandler<HTMLAudioElement>
+    /**
+    * 语音播放完成，loop = false 时生效
+    * @default -
+    */
+    onEnd: (e: HTMLAudioElement) => void
+    /**
+    * 静音回调
+    * @default -
+    */
+    onMute: (e: HTMLAudioElement) => void
+    /**
+    * 可以播放媒体时触发
+    * @default -
+    */
+    onCanPlay: ((e: HTMLAudioElement) => void) & ReactEventHandler<HTMLAudioElement>
 }
 export declare const Audio: FunctionComponent<Partial<AudioProps> & React.HTMLAttributes<HTMLElement>>;

package/dist/types/packages/avatar/avatar.d.ts

@@ -1,16 +1,56 @@
 import React, { FunctionComponent } from 'react';
 import { BasicComponent } from '../../utils/typings';
 export interface AvatarProps extends BasicComponent {
-    size: string;
-    icon: React.ReactNode;
-    fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
-    shape: AvatarShape;
-    background: string;
-    color: string;
-    src: string;
-    alt: string;
-    onClick: (e: MouseEvent) => void;
-    onError: () => void;
+    /**
+    * 设置头像的大小
+    * @default ''
+    */
+    size: string
+    /**
+    * 设置 Icon 类型头像图标
+    * @default -
+    */
+    icon: React.ReactNode
+    /**
+    * 图片填充模式
+    * @default 'cover'
+    */
+    fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
+    /**
+    * 设置头像的形状
+    * @default 'round'
+    */
+    shape: AvatarShape
+    /**
+    * 设置 Icon、字符类型头像的背景色
+    * @default #eee
+    */
+    background: string
+    /**
+    * 设置 Icon、字符类型头像的颜色
+    * @default #666
+    */
+    color: string
+    /**
+    * 设置图片类型头像的地址
+    * @default ''
+    */
+    src: string
+    /**
+    * 设置图片类型头像无法显示时的替代文本
+    * @default ''
+    */
+    alt: string
+    /**
+    * 点击头像触发事件
+    * @default -
+    */
+    onClick: (e: MouseEvent) => void
+    /**
+    * 图片加载失败的事件
+    * @default -
+    */
+    onError: () => void
 }
 export type AvatarShape = 'round' | 'square';
 export declare const Avatar: FunctionComponent<Partial<AvatarProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'>>;

package/dist/types/packages/avatargroup/avatargroup.d.ts

@@ -1,13 +1,45 @@
 import React, { FunctionComponent } from 'react';
 import { BasicComponent } from '../../utils/typings';
 export interface AvatarGroupProps extends BasicComponent {
-    maxContent: string;
-    max: string | number;
-    maxBackground: string;
-    maxColor: string;
-    size: 'large' | 'normal' | 'small';
-    shape: 'round' | 'square';
-    gap: string;
-    level: 'left' | 'right';
+    /**
+    * 头像数量超出时，会出现一个头像折叠元素。该元素内容可为...、more、+N。
+    * @default ''
+    */
+    maxContent: string
+    /**
+    * 显示的最大头像个数
+    * @default ''
+    */
+    max: string | number
+    /**
+    * 设置 Icon、字符类型头像的背景色
+    * @default #eee
+    */
+    maxBackground: string
+    /**
+    * 设置 Icon、字符类型头像的颜色
+    * @default #666
+    */
+    maxColor: string
+    /**
+    * 设置头像的大小，可选值为：large、normal、small，支持直接输入数字
+    * @default ''
+    */
+    size: 'large' | 'normal' | 'small'
+    /**
+    * 设置头像的形状
+    * @default ''
+    */
+    shape: 'round' | 'square'
+    /**
+    * 设置头像之间的间距
+    * @default -8
+    */
+    gap: string
+    /**
+    * 头像之间的层级关系，可选值为：left、right
+    * @default 'left'
+    */
+    level: 'left' | 'right'
 }
 export declare const AvatarGroup: FunctionComponent<Partial<AvatarGroupProps> & React.HTMLAttributes<HTMLDivElement>>;

package/dist/types/packages/backtop/backtop.d.ts

@@ -1,10 +1,30 @@
 import React, { FunctionComponent } from 'react';
 import { BasicComponent } from '../../utils/typings';
 export interface BackTopProps extends BasicComponent {
-    target: string;
-    threshold: number;
-    zIndex: number;
-    duration: number;
-    onClick?: (event: MouseEvent) => void;
+    /**
+    * 获取监听的目标元素
+    * @default -
+    */
+    target: string
+    /**
+    * 页面垂直滚动多高后出现
+    * @default 200
+    */
+    threshold: number
+    /**
+    * 设置组件页面层级
+    * @default 10
+    */
+    zIndex: number
+    /**
+    * 设置动画持续时间，为 0 时表示无动画
+    * @default 1000
+    */
+    duration: number
+    /**
+    * 按钮点击时触发事件
+    * @default -
+    */
+    onClick?: (event: MouseEvent) => void
 }
 export declare const BackTop: FunctionComponent<Partial<BackTopProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'>>;

package/dist/types/packages/badge/badge.d.ts

@@ -1,11 +1,35 @@
 import { FunctionComponent, ReactNode } from 'react';
 import { BasicComponent } from '../../utils/typings';
 export interface BadgeProps extends BasicComponent {
-    value: ReactNode;
-    dot: boolean;
-    max: number;
-    top: string;
-    right: string;
-    color: string;
+    /**
+    * 显示的内容，支持数字、字符和自定义内容
+    * @default -
+    */
+    value: ReactNode
+    /**
+    * 是否为小点
+    * @default false
+    */
+    dot: boolean
+    /**
+    * value 为数值时，最大值
+    * @default 99
+    */
+    max: number
+    /**
+    * 上下偏移量，支持单位设置，可设置为：5 等
+    * @default 0
+    */
+    top: string
+    /**
+    * 左右偏移量，支持单位设置，可设置为：5 等
+    * @default 0
+    */
+    right: string
+    /**
+    * 徽标背景颜色,默认值为当前主题色
+    * @default 
+    */
+    color: string
 }
 export declare const Badge: FunctionComponent<Partial<BadgeProps>>;

package/dist/types/packages/button/button.d.ts

@@ -5,15 +5,55 @@ export type ButtonSize = 'large' | 'normal' | 'small';
 export type ButtonShape = 'square' | 'round';
 export type ButtonFill = 'solid' | 'outline' | 'none';
 export interface ButtonProps extends BasicComponent {
-    color: string;
-    shape: ButtonShape;
-    type: ButtonType;
-    size: ButtonSize;
-    fill: ButtonFill;
-    block: boolean;
-    loading: boolean;
-    disabled: boolean;
-    icon: React.ReactNode;
-    onClick: (e: MouseEvent) => void;
+    /**
+    * 按钮颜色，支持传入 linear-gradient 渐变色
+    * @default -
+    */
+    color: string
+    /**
+    * 按钮的形状
+    * @default 'round'
+    */
+    shape: ButtonShape
+    /**
+    * 按钮的样式
+    * @default 'default'
+    */
+    type: ButtonType
+    /**
+    * 按钮的尺寸
+    * @default 'normal'
+    */
+    size: ButtonSize
+    /**
+    * 填充模式
+    * @default 'solid'
+    */
+    fill: ButtonFill
+    /**
+    * 是否为块级元素
+    * @default false
+    */
+    block: boolean
+    /**
+    * 按钮loading状态
+    * @default false
+    */
+    loading: boolean
+    /**
+    * 是否禁用按钮
+    * @default false
+    */
+    disabled: boolean
+    /**
+    * 按钮图标
+    * @default -
+    */
+    icon: React.ReactNode
+    /**
+    * 点击按钮时触发
+    * @default false
+    */
+    onClick: (e: MouseEvent) => void
 }
 export declare const Button: React.ForwardRefExoticComponent<Partial<ButtonProps> & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/packages/cascader/cascader.d.ts

@@ -2,24 +2,92 @@ import React from 'react';
 import { CascaderOption, CascaderValue, CascaderOptionKey } from './types';
 import { BasicComponent } from '../../utils/typings';
 export interface CascaderProps extends BasicComponent {
-    popup: boolean;
-    visible: boolean;
-    activeColor: string;
-    activeIcon: string;
-    options: CascaderOption[];
-    value?: CascaderValue;
-    defaultValue?: CascaderValue;
-    title: string;
-    optionKey: CascaderOptionKey;
-    format: Record<string, string | number | null>;
-    closeable: boolean;
-    closeIconPosition: string;
-    closeIcon: string;
-    lazy: boolean;
-    onLoad: (node: any, resolve: any) => void;
+    /**
+    * 是否弹窗状态展示
+    * @default true
+    */
+    popup: boolean
+    /**
+    * 级联显示隐藏状态
+    * @default false
+    */
+    visible: boolean
+    /**
+    * 选中激活颜色
+    * @default -
+    */
+    activeColor: string
+    /**
+    * 标记选中的Icon
+    * @default ReactNode
+    */
+    activeIcon: string
+    /**
+    * 级联数据
+    * @default -
+    */
+    options: CascaderOption[]
+    /**
+    * 选中值，受控
+    * @default string)[]
+    */
+    value?: CascaderValue
+    /**
+    * 默认选中值
+    * @default string)[]
+    */
+    defaultValue?: CascaderValue
+    /**
+    * 标题
+    * @default -
+    */
+    title: string
+    /**
+    * 自定义options结构中，包含 textKey、valueKey、childrenKey
+    * @default -
+    */
+    optionKey: CascaderOptionKey
+    /**
+    * 当options为可转换为树形结构的扁平结构时，配置转换规则
+    * @default -
+    */
+    format: Record<string, string | number | null>
+    /**
+    * 是否显示关闭按钮，继承 Popup 组件
+    * @default true
+    */
+    closeable: boolean
+    /**
+    * 取消按钮位置，继承 Popup 组件
+    * @default top-right
+    */
+    closeIconPosition: string
+    /**
+    * 自定义关闭按钮，继承 Popup 组件
+    * @default close
+    */
+    closeIcon: string
+    /**
+    * 是否开启动态加载
+    * @default false
+    */
+    lazy: boolean
+    /**
+    * 动态加载回调，开启动态加载时生效
+    * @default -
+    */
+    onLoad: (node: any, resolve: any) => void
     onClose?: () => void;
-    onChange: (value: CascaderValue, params?: any) => void;
-    onPathChange: (value: CascaderValue, params: any) => void;
+    /**
+    * 选中值改变时触发
+    * @default 
+    */
+    onChange: (value: CascaderValue, params?: any) => void
+    /**
+    * 选中项改变时触发
+    * @default 
+    */
+    onPathChange: (value: CascaderValue, params: any) => void
 }
 export declare const Cascader: React.ForwardRefExoticComponent<Partial<CascaderProps> & {
     children?: React.ReactNode;

package/dist/types/packages/cell/cell.d.ts

@@ -1,11 +1,35 @@
 import React, { FunctionComponent, ReactNode } from 'react';
 import { BasicComponent } from '../../utils/typings';
 export interface CellProps extends BasicComponent {
-    title: ReactNode;
-    description: ReactNode;
-    extra: ReactNode;
-    radius: string | number;
-    align: string;
-    onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+    * 标题
+    * @default -
+    */
+    title: ReactNode
+    /**
+    * 描述
+    * @default -
+    */
+    description: ReactNode
+    /**
+    * 右侧描述
+    * @default -
+    */
+    extra: ReactNode
+    /**
+    * 圆角半径
+    * @default 6px
+    */
+    radius: string | number
+    /**
+    * 纵轴方向上的对齐方式，可选值为：flex-start、center、flex-end
+    * @default flex-start
+    */
+    align: string
+    /**
+    * 点击事件
+    * @default false
+    */
+    onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
 }
 export declare const Cell: FunctionComponent<Partial<CellProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>>;