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

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.14 Fri Jun 02 2023 17:08:59 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/styles/variables-jmapp.scss

@@ -480,13 +480,12 @@ $input-padding: var(--nutui-input-padding, 10px 25px) !default;
 // textarea（✅）
 
 $textarea-font: var(--nutui-textarea-font, $font-size-2) !default;
-$textarea-height: var(--nutui-textarea-height, 100px) !default;
 $textarea-padding: var(--nutui-textarea-padding, 10px 25px) !default;
 $textarea-limit-color: var(--nutui-textarea-limit-color, $text-color) !default;
 $textarea-text-color: var(--nutui-textarea-text-color, $title-color) !default;
 $textarea-text-curror-color: var(
   --nutui-textarea-text-curror-color,
-  '$title-color'
+  $title-color
 ) !default;
 $textarea-text-line-height: var(
   --nutui-textarea-text-line-height,
@@ -2087,62 +2086,51 @@ $sidenavbar-content-bg-color: var(
   --nutui-sidenavbar-content-bg-color,
   $white
 ) !default;
-
-// subsidenavbar（✅）
-$sidenavbar-sub-title-border-color: var(
-  --nutui-sidenavbar-sub-title-border-color,
-  #f6f6f6
-) !default;
-$sidenavbar-sub-title-bg-color: var(
-  --nutui-sidenavbar-sub-title-bg-color,
-  #f6f6f6
-) !default;
-$sidenavbar-sub-title-font-size: var(
-  --nutui-sidenavbar-sub-title-font-size,
-  $font-size-large
+$sidenav-bar-item-height: var(--nutui-sidenavbar-item-height, 40px) !default;
+$sidenavbar-head-bg-color: var(
+  --nutui-sidenavbar-head-bg-color,
+  #eeeff2
 ) !default;
-$sidenavbar-sub-title-radius: var(
-  --nutui-sidenavbar-sub-title-radius,
-  0
+$sidenavbar-head-padding: var(--nutui-sidenavbar-head-padding, 10px) !default;
+$sidenavbar-title-padding: var(
+  --nutui-sidenavbar-title-padding,
+  10px 8px 10px 20px
 ) !default;
-$sidenavbar-sub-title-border: var(
-  --nutui-sidenavbar-sub-title-border,
-  0
+$sidenavbar-title-background: var(
+  --nutui-sidenavbar-title-background,
+  $gray4
 ) !default;
-$sidenavbar-sub-title-width: var(
-  --nutui-sidenavbar-sub-title-width,
-  100%
+$sidenavbar-title-color: var(--nutui-sidenavbar-title-color, $gray1) !default;
+// subsidenavbar（✅）
+$sidenavbar-sub-title-padding: var(
+  --nutui-sidenavbar-sub-title-padding,
+  10px 8px 10px 35px
 ) !default;
-$sidenavbar-sub-title-height: var(
-  --nutui-sidenavbar-sub-title-height,
-  40px
+$sidenavbar-sub-title-background: var(
+  --nutui-sidenavbar-sub-title-background,
+  $gray5
 ) !default;
-$sidenavbar-sub-title-text-line-height: var(
-  --nutui-sidenavbar-sub-title-text-line-height,
-  40px
-) !default;
-$sidenavbar-sub-title-text-color: var(
-  --nutui-sidenavbar-sub-title-text-color,
-  $title-color
+$sidenavbar-sub-title-color: var(
+  --nutui-sidenavbar-sub-title-color,
+  $gray1
 ) !default;
 
 // sidenavbaritem（✅）
-$sidenavbar-item-title-color: var(
-  --nutui-sidenavbar-item-title-color,
-  #333
+$sidenavbar-sub-item-color: var(
+  --nutui-sidenavbar-sub-item-color,
+  $gray2
 ) !default;
-$sidenavbar-item-title-bg-color: var(
-  --nutui-sidenavbar-item-title-bg-color,
-  $white
+$sidenavbar-sub-item-padding: var(
+  --nutui-sidenavbar-sub-item-padding,
+  10px 8px 10px 55px
 ) !default;
-$sidenavbar-item-height: var(--nutui-sidenavbar-item-height, 40px) !default;
-$sidenavbar-item-line-height: var(
-  --nutui-sidenavbar-item-line-height,
-  40px
+$sidenavbar-sub-list-background: var(
+  --nutui-sidenavbar-sub-list-background,
+  $gray6
 ) !default;
-$sidenavbar-item-font-size: var(
-  --nutui-sidenavbar-item-font-size,
-  16px
+$sidenavbar-sub-list-color: var(
+  --nutui-sidenavbar-sub-list-background,
+  $gray2
 ) !default;
 
 // elevator（✅）
@@ -2424,10 +2412,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 +2446,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

@@ -461,13 +461,12 @@ $input-padding: var(--nutui-input-padding, 10px 25px) !default;
 // textarea（✅）
 
 $textarea-font: var(--nutui-textarea-font, $font-size-2) !default;
-$textarea-height: var(--nutui-textarea-height, 100px) !default;
 $textarea-padding: var(--nutui-textarea-padding, 10px 25px) !default;
 $textarea-limit-color: var(--nutui-textarea-limit-color, $text-color) !default;
 $textarea-text-color: var(--nutui-textarea-text-color, $title-color) !default;
 $textarea-text-curror-color: var(
   --nutui-textarea-text-curror-color,
-  '$title-color'
+  $title-color
 ) !default;
 $textarea-text-line-height: var(
   --nutui-textarea-text-line-height,
@@ -1414,19 +1413,15 @@ $badge-dot-width: var(--nutui-badge-dot-width, 7px) !default;
 
 //popover（✅）
 $popover-border-radius: var(--nutui-popover-border-radius, 8px) !default;
-$popover-font-size: var(--nutui-popover-font-size, $font-size-1) !default;
+$popover-font-size: var(--nutui-popover-font-size, $font-size-2) !default;
 $popover-menu-item-height: var(--nutui-popover-menu-item-height, 30px) !default;
-$popover-menu-item-name-margin: var(
-  --nutui-popover-menu-item-name-margin,
-  0px 10px
-) !default;
 $popover-menu-item-hover-background-color: var(
   --nutui-popover-menu-item-hover-background-color,
-  $primary-color
+  #fff
 ) !default;
 $popover-menu-item-hover-text-color: var(
   --nutui-popover-menu-item-hover-text-color,
-  $primary-text-color
+  #1a1a1a
 ) !default;
 $popover-menu-item-border-width: var(
   --nutui-popover-menu-item-border-width,
@@ -1446,19 +1441,23 @@ $popover-menu-item-border-bottom: var(
 ) !default;
 $popover-white-background-color: var(
   --nutui-popover-white-background-color,
-  rgba(255, 255, 255, 1)
+  $gray6
 ) !default;
 $popover-dark-background-color: var(
   --nutui-popover-dark-background-color,
   rgba(75, 76, 77, 1)
 ) !default;
+$popover-content-background-color: var(
+  --nutui-popover-content-background-color,
+  $gray6
+) !default;
 $popover-border-bottom-color: var(
   --nutui-popover-border-bottom-color,
   rgba(229, 229, 229, 1)
 ) !default;
 $popover-primary-text-color: var(
   --nutui-popover-primary-text-color,
-  rgba(51, 51, 51, 1)
+  $gray1
 ) !default;
 $popover-disable-color: var(
   --nutui-popover-disable-color,
@@ -1466,7 +1465,7 @@ $popover-disable-color: var(
 ) !default;
 $popover-menu-item-padding: var(
   --nutui-popover-menu-item-padding,
-  8px 0
+  8px
 ) !default;
 $popover-menu-item-margin: var(
   --nutui-popover-menu-item-margin,
@@ -2060,62 +2059,51 @@ $sidenavbar-content-bg-color: var(
   --nutui-sidenavbar-content-bg-color,
   $white
 ) !default;
-
-// subsidenavbar（✅）
-$sidenavbar-sub-title-border-color: var(
-  --nutui-sidenavbar-sub-title-border-color,
-  #f6f6f6
-) !default;
-$sidenavbar-sub-title-bg-color: var(
-  --nutui-sidenavbar-sub-title-bg-color,
-  #f6f6f6
-) !default;
-$sidenavbar-sub-title-font-size: var(
-  --nutui-sidenavbar-sub-title-font-size,
-  $font-size-large
-) !default;
-$sidenavbar-sub-title-radius: var(
-  --nutui-sidenavbar-sub-title-radius,
-  0
+$sidenav-bar-item-height: var(--nutui-sidenavbar-item-height, 40px) !default;
+$sidenavbar-head-bg-color: var(
+  --nutui-sidenavbar-head-bg-color,
+  #eeeff2
 ) !default;
-$sidenavbar-sub-title-border: var(
-  --nutui-sidenavbar-sub-title-border,
-  0
+$sidenavbar-head-padding: var(--nutui-sidenavbar-head-padding, 10px) !default;
+$sidenavbar-title-padding: var(
+  --nutui-sidenavbar-title-padding,
+  10px 8px 10px 20px
 ) !default;
-$sidenavbar-sub-title-width: var(
-  --nutui-sidenavbar-sub-title-width,
-  100%
+$sidenavbar-title-background: var(
+  --nutui-sidenavbar-title-background,
+  $gray4
 ) !default;
-$sidenavbar-sub-title-height: var(
-  --nutui-sidenavbar-sub-title-height,
-  40px
+$sidenavbar-title-color: var(--nutui-sidenavbar-title-color, $gray1) !default;
+// subsidenavbar（✅）
+$sidenavbar-sub-title-padding: var(
+  --nutui-sidenavbar-sub-title-padding,
+  10px 8px 10px 35px
 ) !default;
-$sidenavbar-sub-title-text-line-height: var(
-  --nutui-sidenavbar-sub-title-text-line-height,
-  40px
+$sidenavbar-sub-title-background: var(
+  --nutui-sidenavbar-sub-title-background,
+  $gray5
 ) !default;
-$sidenavbar-sub-title-text-color: var(
-  --nutui-sidenavbar-sub-title-text-color,
-  $title-color
+$sidenavbar-sub-title-color: var(
+  --nutui-sidenavbar-sub-title-color,
+  $gray1
 ) !default;
 
 // sidenavbaritem（✅）
-$sidenavbar-item-title-color: var(
-  --nutui-sidenavbar-item-title-color,
-  #333
+$sidenavbar-sub-item-color: var(
+  --nutui-sidenavbar-sub-item-color,
+  $gray2
 ) !default;
-$sidenavbar-item-title-bg-color: var(
-  --nutui-sidenavbar-item-title-bg-color,
-  $white
+$sidenavbar-sub-item-padding: var(
+  --nutui-sidenavbar-sub-item-padding,
+  10px 8px 10px 55px
 ) !default;
-$sidenavbar-item-height: var(--nutui-sidenavbar-item-height, 40px) !default;
-$sidenavbar-item-line-height: var(
-  --nutui-sidenavbar-item-line-height,
-  40px
+$sidenavbar-sub-list-background: var(
+  --nutui-sidenavbar-sub-list-background,
+  $gray6
 ) !default;
-$sidenavbar-item-font-size: var(
-  --nutui-sidenavbar-item-font-size,
-  16px
+$sidenavbar-sub-list-color: var(
+  --nutui-sidenavbar-sub-list-background,
+  $gray2
 ) !default;
 
 // elevator（✅）
@@ -2397,10 +2385,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 +2419,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'>>;