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

package/dist/style.mjs

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.0-alpha.11 Wed May 24 2023 16:40:37 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

@@ -252,6 +252,8 @@ $cell-description-font: var(
   $font-size-2
 ) !default;
 $cell-description-color: var(--nutui-cell-extra-color, $disable-color) !default;
+$cell-extra-font-size: var(--nutui-cell-extra-font-size, $font-size-2) !default;
+$cell-extra-color: var(--nutui-cell-extra-color, $gray2) !default;
 $cell-subtitle-color: var(--nutui-cell-description-color, $gray2) !default;
 $cell-border-radius: var(--nutui-cell-border-radius, 4px) !default;
 $cell-padding: var(--nutui-cell-padding, 16px 16px) !default;
@@ -418,8 +420,8 @@ $uploader-preview-close-top: var(
   0px
 ) !default;
 // picker（✅）（todo:react版本picker组件dom元素类名变化较大，picker.scss暂不改动）
-$picker-cancel-color: var(--nutui-picker-cancel-color, #808080) !default;
-$picker-ok-color: var(--nutui-picker-ok-color, $primary-color) !default;
+$picker-bar-cancel-color: var(--nutui-picker-cancel-color, #808080) !default;
+$picker-bar-ok-color: var(--nutui-picker-ok-color, $primary-color) !default;
 $picker-bar-cancel-font-size: var(
   --nutui-picker-bar-cancel-font-size,
   14px
@@ -556,37 +558,30 @@ $inputnumber-border-box: var(
 $inputnumber-display: var(--nutui-inputnumber-display, flex) !default;
 
 // actionsheet（✅）
-$zindex-actionsheet: var(--nutui-zindex-actionsheet, 10001) !default;
-$body-background: var(--nutui-body-background, #f6f6f6) !default;
-$light-color: var(--nutui-light-color, #f6f6f6) !default;
-$actionsheet-light-color: var(
-  --nutui-actionsheet-light-color,
+$actionsheet-border-color: var(
+  --nutui-actionsheet-border-color,
   #f6f6f6
 ) !default;
+$actionsheet-item-text-align: var(
+  --nutui-actionsheet-item-text-align,
+  center
+) !default;
 $actionsheet-item-border-bottom: var(
   --nutui-actionsheet-item-border-bottom,
   none
 ) !default;
-$actionsheet-item-font-size: var(
-  --nutui-actionsheet-item-font-size,
-  $font-size-2
-) !default;
-$actionsheet-item-subdesc-font-size: var(
-  --nutui-actionsheet-item-subdesc-font-size,
-  $font-size-1
-) !default;
-$actionsheet-item-cancel-border-top: var(
-  --nutui-actionsheet-item-cancel-border-top,
-  1px solid $actionsheet-light-color
-) !default;
 $actionsheet-item-line-height: var(
   --nutui-actionsheet-item-line-height,
   24px
 ) !default;
-$actionsheet-item-font-color: var(
-  --nutui-actionsheet-item-font-color,
+$actionsheet-item-color: var(
+  --nutui-actionsheet-item-color,
   $title-color
 ) !default;
+$actionsheet-item-danger: var(
+  --nutui-actionsheet-item-danger,
+  $primary-color
+) !default;
 
 //shortpassword（✅）
 $shortpassword-background-color: var(
@@ -688,8 +683,8 @@ $numberkeyboard-key-confirm-background-color: var(
 
 // countdown（✅）
 $countdown-display: var(--nutui-countdown-display, flex) !default;
-$countdown-color: var(--nutui-countdown-color, inherit) !default;
-$countdown-font-size: var(--nutui-countdown-font-size, initial) !default;
+$countdown-color: var(--nutui-countdown-color, $gray1) !default;
+$countdown-font-size: var(--nutui-countdown-font-size, 14px) !default;
 
 //large price（✅）
 $price-symbol-padding-right: var(
@@ -766,6 +761,8 @@ $toast-inner-border-radius: var(
   12px
 ) !default;
 $toast-cover-bg-color: var(--nutui-toast-cover-bg-color, $gray7) !default;
+$toast-inner-top: var(--nutui-toast-inner-top, 50%) !default;
+$toast-inner-text-align: var(--nutui-toast-inner-text-align, 'center') !default;
 
 //backtop（✅）
 $backtop-border-color: var(--nutui-backtop-border-color, #e0e0e0) !default;
@@ -1102,8 +1099,15 @@ $dialog-content-line-height: var(
   --nutui-dialog-content-line-height,
   16px
 ) !default;
-$dialog-mask-z-index: var(--nutui-dialog-mask-z-index, $mask-z-index) !default;
-$dialog-mask-background-color: var(
+$dialog-content-text-align: var(
+  --nutui-dialog-content-text-align,
+  center
+) !default;
+$dialog-overlay-z-index: var(
+  --nutui-dialog-mask-z-index,
+  $mask-z-index
+) !default;
+$dialog-overlay-background-color: var(
   --nutui-dialog-mask-background-color,
   $mask-color
 ) !default;
@@ -1575,7 +1579,7 @@ $tabs-titles-background-color: var(
   $background-color
 ) !default;
 $tabs-titles-border-radius: var(--nutui-tabs-titles-border-radius, 0) !default;
-
+$nut-tabs-title-gap: var(--nutui-tabs-title-gap, 0) !default;
 $tabs-titles-item-font-size: var(
   --nutui-tabs-titles-item-font-size,
   $font-size-2
@@ -1772,36 +1776,25 @@ $collapse-wrapper-content-background-color: var(
 ) !default;
 
 // searchbar（✅）
-
-$searchbar-background: var(--nutui-searchbar-background, $gray6) !default;
+$searchbar-background: var(--nutui-searchbar-background, #fff) !default;
 $searchbar-content-border-radius: var(
   --nutui-searchbar-content-border-radius,
   2px
 ) !default;
-$searchbar-right-out-color: var(
-  --nutui-searchbar-right-out-color,
-  $black
-) !default;
-$searchbar-padding: var(--nutui-searchbar-padding, 9px 16px) !default;
+$searchbar-padding: var(--nutui-searchbar-padding, 9px 10px) !default;
 $searchbar-width: var(--nutui-searchbar-width, 100%) !default;
-$searchbar-label-fontsize: var(--nutui-searchbar-label-fontsize, 12px) !default;
-$searchbar-label-padding: var(
-  --nutui-searchbar-label-padding,
+$searchbar-left-fontsize: var(--nutui-searchbar-left-fontsize, 12px) !default;
+$searchbar-left-padding: var(
+  --nutui-searchbar-left-padding,
   0 12px 0 0
 ) !default;
-$searchbar-label-color: var(--nutui-searchbar-label-color, $gray1) !default;
-$searchbar-action-text-fontsize: var(
-  --nutui-searchbar-action-text-fontsize,
-  14px
-) !default;
-$searchbar-action-text-padding: var(
-  --nutui-searchbar-action-text-padding,
+$searchbar-left-color: var(--nutui-searchbar-left-color, $gray1) !default;
+$searchbar-right-fontsize: var(--nutui-searchbar-right-fontsize, 14px) !default;
+$searchbar-right-padding: var(
+  --nutui-searchbar-right-padding,
   0 0 0 8px
 ) !default;
-$searchbar-action-text-color: var(
-  --nutui-searchbar-action-text-color,
-  $gray1
-) !default;
+$searchbar-right-color: var(--nutui-searchbar-right-color, $gray1) !default;
 $searchbar-input-height: var(--nutui-searchbar-input-height, 32px) !default;
 $searchbar-input-padding: var(--nutui-searchbar-input-padding, 0 5px) !default;
 $searchbar-input-background: var(
@@ -1817,22 +1810,14 @@ $searchbar-input-curror-color: var(
   $gray1
 ) !default;
 $searchbar-input-width: var(--nutui-searchbar-input-width, 100%) !default;
+$searchbar-input-text-align: var(
+  --nutui-searchbar-input-text-align,
+  left
+) !default;
 $searchbar-input-border-radius: var(
   --nutui-searchbar-input-border-radius,
   16px
 ) !default;
-$searchbar-input-box-shadow: var(
-  --nutui-searchbar-input-box-shadow,
-  0 0 8px 0 rgba(0, 0, 0, 0.04)
-) !default;
-$searchbar-input-bar-color: var(
-  --nutui-searchbar-input-bar-color,
-  inherit
-) !default;
-$searchbar-input-bar-placeholder-color: var(
-  --nutui-searchbar-input-bar-placeholder-color,
-  inherit
-) !default;
 $searchbar-clear-icon-padding: var(
   --nutui-searchbar-clear-icon-padding,
   0 10px 0 5px
@@ -2086,7 +2071,10 @@ $navbar-box-shadow: var(
 ) !default;
 $navbar-color: var(--nutui-navbar-color, $gray1) !default;
 $navbar-font-size: var(--nutui-navbar-font-size, $font-size-2) !default;
-$navbar-title-font: var(--nutui-navbar-title-font-size, $font-size-2) !default;
+$navbar-title-font-size: var(
+  --nutui-navbar-title-font-size,
+  $font-size-2
+) !default;
 $navbar-title-font-weight: var(--nutui-navbar-title-font-weight, 0) !default;
 $navbar-title-font-color: var(
   --nutui-navbar-title-font-color,
@@ -2210,6 +2198,14 @@ $elevator-list-item-code-line-height: var(
   --nutui-elevator-list-item-code-line-height,
   35px
 ) !default;
+$elevator-list-item-code-border-bottom: var(
+  --nutui-elevator-list-item-code-border-bottom,
+  1px
+) !default;
+$elevator-list-item-code-border-bottom-color: var(
+  --nutui-elevator-list-item-code-border-bottom-color,
+  #f5f5f5
+) !default;
 $elevator-list-item-code-current-box-shadow: 0 3px 3px 1px
   rgba(240, 240, 240, 1) !default;
 $elevator-list-item-code-current-bg-color: var(
@@ -2428,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;
@@ -2465,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

@@ -539,37 +539,30 @@ $inputnumber-border-box: var(
 $inputnumber-display: var(--nutui-inputnumber-display, flex) !default;
 
 // actionsheet（✅）
-$zindex-actionsheet: var(--nutui-zindex-actionsheet, 10001) !default;
-$body-background: var(--nutui-body-background, #f6f6f6) !default;
-$light-color: var(--nutui-light-color, #f6f6f6) !default;
-$actionsheet-light-color: var(
-  --nutui-actionsheet-light-color,
+$actionsheet-border-color: var(
+  --nutui-actionsheet-border-color,
   #f6f6f6
 ) !default;
+$actionsheet-item-text-align: var(
+  --nutui-actionsheet-item-text-align,
+  center
+) !default;
 $actionsheet-item-border-bottom: var(
   --nutui-actionsheet-item-border-bottom,
   none
 ) !default;
-$actionsheet-item-font-size: var(
-  --nutui-actionsheet-item-font-size,
-  $font-size-2
-) !default;
-$actionsheet-item-subdesc-font-size: var(
-  --nutui-actionsheet-item-subdesc-font-size,
-  $font-size-1
-) !default;
-$actionsheet-item-cancel-border-top: var(
-  --nutui-actionsheet-item-cancel-border-top,
-  1px solid $actionsheet-light-color
-) !default;
 $actionsheet-item-line-height: var(
   --nutui-actionsheet-item-line-height,
   24px
 ) !default;
-$actionsheet-item-font-color: var(
-  --nutui-actionsheet-item-font-color,
+$actionsheet-item-color: var(
+  --nutui-actionsheet-item-color,
   $title-color
 ) !default;
+$actionsheet-item-danger: var(
+  --nutui-actionsheet-item-danger,
+  $primary-color
+) !default;
 
 //shortpassword（✅）
 $shortpassword-background-color: var(
@@ -671,8 +664,8 @@ $numberkeyboard-key-confirm-background-color: var(
 
 // countdown（✅）
 $countdown-display: var(--nutui-countdown-display, flex) !default;
-$countdown-color: var(--nutui-countdown-color, inherit) !default;
-$countdown-font-size: var(--nutui-countdown-font-size, initial) !default;
+$countdown-color: var(--nutui-countdown-color, $gray1) !default;
+$countdown-font-size: var(--nutui-countdown-font-size, 14px) !default;
 
 //large price（✅）
 $price-symbol-padding-right: var(
@@ -749,6 +742,8 @@ $toast-inner-border-radius: var(
   12px
 ) !default;
 $toast-cover-bg-color: var(--nutui-toast-cover-bg-color, $gray7) !default;
+$toast-inner-top: var(--nutui-toast-inner-top, 50%) !default;
+$toast-inner-text-align: var(--nutui-toast-inner-text-align, 'center') !default;
 
 //backtop（✅）
 $backtop-border-color: var(--nutui-backtop-border-color, #e0e0e0) !default;
@@ -1758,35 +1753,25 @@ $collapse-wrapper-content-background-color: var(
 
 // searchbar（✅）
 
-$searchbar-background: var(--nutui-searchbar-background, $gray6) !default;
+$searchbar-background: var(--nutui-searchbar-background, #fff) !default;
 $searchbar-content-border-radius: var(
   --nutui-searchbar-content-border-radius,
   2px
 ) !default;
-$searchbar-right-out-color: var(
-  --nutui-searchbar-right-out-color,
-  $black
-) !default;
-$searchbar-padding: var(--nutui-searchbar-padding, 9px 16px) !default;
+$searchbar-padding: var(--nutui-searchbar-padding, 9px 10px) !default;
 $searchbar-width: var(--nutui-searchbar-width, 100%) !default;
-$searchbar-label-fontsize: var(--nutui-searchbar-label-fontsize, 12px) !default;
-$searchbar-label-padding: var(
-  --nutui-searchbar-label-padding,
+$searchbar-left-fontsize: var(--nutui-searchbar-left-fontsize, 12px) !default;
+$searchbar-left-padding: var(
+  --nutui-searchbar-left-padding,
   0 12px 0 0
 ) !default;
-$searchbar-label-color: var(--nutui-searchbar-label-color, $gray1) !default;
-$searchbar-action-text-fontsize: var(
-  --nutui-searchbar-action-text-fontsize,
-  14px
-) !default;
-$searchbar-action-text-padding: var(
-  --nutui-searchbar-action-text-padding,
+$searchbar-left-color: var(--nutui-searchbar-left-color, $gray1) !default;
+$searchbar-right-fontsize: var(--nutui-searchbar-right-fontsize, 14px) !default;
+$searchbar-right-padding: var(
+  --nutui-searchbar-right-padding,
   0 0 0 8px
 ) !default;
-$searchbar-action-text-color: var(
-  --nutui-searchbar-action-text-color,
-  $gray1
-) !default;
+$searchbar-right-color: var(--nutui-searchbar-right-color, $gray1) !default;
 $searchbar-input-height: var(--nutui-searchbar-input-height, 32px) !default;
 $searchbar-input-padding: var(--nutui-searchbar-input-padding, 0 5px) !default;
 $searchbar-input-background: var(
@@ -1802,22 +1787,14 @@ $searchbar-input-curror-color: var(
   $gray1
 ) !default;
 $searchbar-input-width: var(--nutui-searchbar-input-width, 100%) !default;
+$searchbar-input-text-align: var(
+  --nutui-searchbar-input-text-align,
+  left
+) !default;
 $searchbar-input-border-radius: var(
   --nutui-searchbar-input-border-radius,
   16px
 ) !default;
-$searchbar-input-box-shadow: var(
-  --nutui-searchbar-input-box-shadow,
-  0 0 8px 0 rgba(0, 0, 0, 0.04)
-) !default;
-$searchbar-input-bar-color: var(
-  --nutui-searchbar-input-bar-color,
-  inherit
-) !default;
-$searchbar-input-bar-placeholder-color: var(
-  --nutui-searchbar-input-bar-placeholder-color,
-  inherit
-) !default;
 $searchbar-clear-icon-padding: var(
   --nutui-searchbar-clear-icon-padding,
   0 10px 0 5px
@@ -2420,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;
@@ -2457,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

@@ -1,20 +1,48 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, ReactNode } from 'react';
+import { BasicComponent } from '../../utils/typings';
 export type ItemType<T> = {
     [key: string]: T;
 };
-export interface ActionSheetProps {
-    cancelText: string;
-    optionTag: string;
-    optionSubTag: string;
-    chooseTagValue: string;
-    title: string;
-    color: string;
-    description: string;
-    menuItems: ItemType<string | boolean>[];
-    onCancel: () => void;
-    onChoose: (item: any, index: number) => void;
-    visible: boolean;
-    className: string;
-    style: React.CSSProperties;
+export interface ActionSheetProps extends BasicComponent {
+    /**
+    * 遮罩层可见
+    * @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> & React.HTMLAttributes<HTMLDivElement>>;
+export declare const ActionSheet: FunctionComponent<Partial<ActionSheetProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onSelect'>>;

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

@@ -1,2 +1,3 @@
 import { ActionSheet } from './actionsheet';
+export type { ItemType, ActionSheetProps } from './actionsheet';
 export default ActionSheet;

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'>>;