@nutui/nutui-react 3.0.11 → 3.0.12

package/dist/es/packages/steps/style-jrkf/style.css

@@ -5,8 +5,225 @@
 .nut-steps {
   display: flex;
 }
-
+.nut-steps-horizontal {
+  flex-flow: row;
+}
+.nut-steps-horizontal .nut-step-head {
+  background-color: var(--nutui-steps-background-color, #ffffff);
+}
+.nut-steps-horizontal .nut-step-head-icon .nut-icon {
+  height: 10px;
+  width: 10px;
+}
+.nut-steps-horizontal .nut-step-head-icon .nut-image {
+  width: 100%;
+  height: 100%;
+  background-color: var(--nutui-steps-background-color, #ffffff);
+}
+.nut-steps-horizontal .nut-step-head-icon .nut-image img {
+  vertical-align: top;
+}
+.nut-steps-horizontal .nut-step.nut-step-process .nut-step-title {
+  color: var(--nutui-steps-process-title-color, var(--nutui-color-primary, #ff6666));
+}
+.nut-steps-horizontal .nut-step.nut-step-process .nut-step-description {
+  color: var(--nutui-steps-process-description-color, var(--nutui-color-primary, #ff6666));
+}
+.nut-steps-horizontal .nut-step.nut-step-wait .nut-step-title {
+  color: var(--nutui-steps-wait-title-color, var(--nutui-color-title));
+}
+.nut-steps-horizontal .nut-step.nut-step-wait .nut-step-description {
+  color: var(--nutui-steps-wait-description-color, var(--nutui-color-text));
+}
+.nut-steps-horizontal-single .nut-step {
+  padding-right: var(--nutui-steps-horizontal-item-padding-right, 28px);
+}
+.nut-steps-horizontal-single .nut-step-last {
+  padding-right: 0 !important;
+}
+.nut-steps-horizontal-single .nut-step-line {
+  top: 0;
+  right: 0;
+  height: var(--nutui-steps-base-head-height, 14px);
+  width: var(--nutui-steps-horizontal-item-padding-right, 28px);
+  padding: var(--nutui-steps-horizontal-item-line-padding, 0 8px);
+  box-sizing: border-box;
+}
+.nut-steps-horizontal-single .nut-step-title, .nut-steps-horizontal-single .nut-step-description {
+  padding-left: 4px;
+}
+.nut-steps-horizontal-single .nut-step-special {
+  padding-right: var(--nutui-steps-horizontal-item-special-padding-right, 22px);
+}
+.nut-steps-horizontal-single .nut-step-special .nut-step-line {
+  width: 100%;
+}
+.nut-steps-horizontal-single .nut-step-special .nut-step-title {
+  padding-right: 8px;
+  width: fit-content;
+}
+.nut-steps-horizontal-single.nut-steps-horizontal-count-3 .nut-step-special {
+  padding-right: var(--nutui-steps-horizontal-item-special-3-padding-right, 9px);
+}
+.nut-steps-horizontal-double {
+  width: 100%;
+  justify-content: space-between;
+}
+.nut-steps-horizontal-double .nut-step {
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+.nut-steps-horizontal-double .nut-step-line {
+  top: 0;
+  right: -50%;
+  height: var(--nutui-steps-base-head-height, 14px);
+  width: 100%;
+}
+.nut-steps-horizontal-double .nut-step-line-inner {
+  display: inline-flex;
+  height: var(--nutui-steps-base-line-height, 1px);
+  width: 100%;
+  background: var(--nutui-steps-base-line-background, var(--nutui-color-border));
+}
+.nut-steps-horizontal-double .nut-step-head {
+  justify-content: center;
+  margin-bottom: 6px;
+}
+.nut-steps-horizontal-double .nut-step-head-dot-wrap, .nut-steps-horizontal-double .nut-step-head-icon-wrap, .nut-steps-horizontal-double .nut-step-head-text-wrap {
+  background-color: var(--nutui-steps-background-color, #ffffff);
+  padding: var(--nutui-steps-horizontal-item-line-padding, 0 8px);
+}
+.nut-steps-horizontal-double .nut-step-head-icon {
+  height: var(--nutui-steps-base-head-icon-size-right, 20px);
+  width: var(--nutui-steps-base-head-icon-size-right, 20px);
+}
+.nut-steps-horizontal-double .nut-step-head-icon .nut-icon {
+  height: 12px;
+  width: 12px;
+}
+.nut-steps-horizontal-double .nut-step-main {
+  align-items: center;
+  margin-left: 0;
+  margin-top: 2px;
+}
+.nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-head, .nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-line {
+  height: var(--nutui-steps-base-head-icon-size-right, 20px);
+}
+.nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-head, .nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-line {
+  height: var(--nutui-steps-base-head-dot-size, 6px);
+}
+.nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-head, .nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-line {
+  height: var(--nutui-steps-base-head-text-size, 12px);
+}
 .nut-steps-vertical {
+  /* #ifdef harmony*/
+  flex: 1;
+  min-width: 0;
+  /* #endif */
+  flex-direction: column;
+}
+.nut-steps-vertical .nut-step {
+  padding-bottom: var(--nutui-steps-vertical-item-padding-bottom, 13px);
+}
+.nut-steps-vertical .nut-step-last {
+  padding-bottom: 0 !important;
+}
+.nut-steps-vertical .nut-step-line {
+  height: calc(100% - 4px);
+  width: 1px;
+  bottom: 0;
+}
+.nut-steps-vertical .nut-step-line-inner {
   height: 100%;
-  flex-flow: column;
+}
+.nut-steps-vertical .nut-step-head {
+  align-items: center;
+  justify-content: center;
+  height: 18px;
+}
+.nut-steps-vertical .nut-step-head-icon {
+  width: var(--nutui-steps-vertical-item-icon-size, 20px);
+  height: var(--nutui-steps-vertical-item-icon-size, 20px);
+}
+.nut-steps-vertical .nut-step-head-icon .nut-icon {
+  height: 12px;
+  width: 12px;
+}
+.nut-steps-vertical .nut-step-main {
+  flex: 1;
+  min-width: 0;
+  height: auto;
+  margin-left: 8px;
+}
+.nut-steps-vertical .nut-step-title {
+  display: flex;
+  align-items: center;
+  height: var(--nutui-steps-vertical-line-height, 18px);
+  font-size: var(--nutui-steps-vertical-title-font-size, var(--nutui-font-text-large));
+  overflow: auto;
+  font-weight: 500;
+  margin-bottom: var(--nutui-steps-vertical-title-margin-bottom, 4px);
+}
+.nut-steps-vertical .nut-step-description {
+  margin: var(--nutui-steps-vertical-description-margin, 0 0 1px);
+  height: auto;
+  line-height: var(--nutui-steps-vertical-line-height, 18px);
+  color: var(--nutui-color-title);
+  font-size: var(--nutui-steps-vertical-description-font-size, var(--nutui-font-text));
+  box-sizing: border-box;
+}
+.nut-steps-vertical .nut-step-head-dot-wrap, .nut-steps-vertical .nut-step-head-icon-wrap, .nut-steps-vertical .nut-step-head-text-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: white;
+  position: relative;
+  z-index: 1;
+}
+.nut-steps-vertical .nut-step-head-dot-wrap {
+  height: calc(var(--nutui-steps-base-head-dot-size, 6px) + 8px);
+}
+.nut-steps-vertical .nut-step-head-icon-wrap {
+  height: calc(var(--nutui-steps-vertical-item-icon-size, 20px) + 8px);
+}
+.nut-steps-vertical .nut-step-head-text-wrap {
+  height: calc(var(--nutui-steps-base-head-text-size, 12px) + 8px);
+}
+.nut-steps-vertical-icon .nut-step-head {
+  width: calc(var(--nutui-steps-vertical-item-icon-size, 20px) + 1px);
+  min-width: calc(var(--nutui-steps-vertical-item-icon-size, 20px) + 1px);
+}
+.nut-steps-vertical-icon .nut-step-line {
+  left: calc(var(--nutui-steps-vertical-item-icon-size, 20px) / 2);
+}
+.nut-steps-vertical-dot .nut-step-head {
+  width: calc(var(--nutui-steps-base-head-dot-size, 6px) + 1px);
+}
+.nut-steps-vertical-dot .nut-step-line {
+  left: calc(var(--nutui-steps-base-head-dot-size, 6px) / 2);
+}
+.nut-steps-vertical-text .nut-step-head {
+  width: calc(var(--nutui-steps-base-head-text-size, 12px) + 1px);
+  min-width: calc(var(--nutui-steps-base-head-text-size, 12px) + 1px);
+}
+.nut-steps-vertical-text .nut-step-line {
+  left: calc(var(--nutui-steps-base-head-text-size, 12px) / 2);
+}
+.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-icon,
+.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text, .nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-icon,
+.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text {
+  background-color: var(--nutui-steps-enhanced-finish-head-background-color, var(--nutui-color-primary-light-pressed, #ffcccc));
+}
+.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-icon .nut-icon,
+.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text .nut-icon, .nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-icon .nut-icon,
+.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text .nut-icon {
+  color: var(--nutui-steps-enhanced-finish-head-icon-color, var(--nutui-color-primary-stop-1, #ff9999));
+}
+.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text, .nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text {
+  color: var(--nutui-steps-enhanced-finish-head-text-color, var(--nutui-color-primary-stop-1, #ff9999));
+}
+.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-dot, .nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-dot {
+  background-color: var(--nutui-steps-enhanced-finish-head-dot-background-color, var(--nutui-color-primary-disabled-special, #ffadbe));
 }

package/dist/es/packages/uploader/uploader.js

@@ -194,10 +194,21 @@ var InternalUploader = function(props, ref) {
                         ];
                     case 1:
                         _files = _state.sent();
-                        if (!_files.length) $el.value = '';
-                        _state.label = 2;
+                        if (!_files.length) {
+                            $el.value = '';
+                            return [
+                                2
+                            ];
+                        }
+                        return [
+                            3,
+                            3
+                        ];
                     case 2:
-                        _files = filterFiles(filesArr);
+                        _files = filesArr;
+                        _state.label = 3;
+                    case 3:
+                        _files = filterFiles(_files);
                         tasks = _files.map(function(file) {
                             var _file_type;
                             var info = {
@@ -224,22 +235,22 @@ var InternalUploader = function(props, ref) {
                         });
                         if (!!autoUpload) return [
                             3,
-                            3
+                            4
                         ];
                         setUploadQueue(tasks);
                         return [
                             3,
-                            5
+                            6
                         ];
-                    case 3:
+                    case 4:
                         return [
                             4,
                             uploadAction(tasks)
                         ];
-                    case 4:
-                        _state.sent();
-                        _state.label = 5;
                     case 5:
+                        _state.sent();
+                        _state.label = 6;
+                    case 6:
                         if (clearInput) {
                             $el.value = '';
                         }

package/dist/es/types/spec/progress/base.d.ts

@@ -32,4 +32,28 @@ export interface BaseProgress extends BaseProps {
     * 延迟数据加载时长，单位 ms
     */
     delay: number
+    /**
+    * 进度条圆角大小
+    */
+    borderRadius: string
+    /**
+    * 进度文字大小
+    */
+    fontSize: string
+    /**
+    * 动画播放方式
+    */
+    activeMode: string
+    /**
+    * 动画完成时间（单位：毫秒）
+    */
+    duration: number
+    /**
+    * 无障碍标签
+    */
+    ariaLabel: string
+    /**
+    * 动画完成后的回调函数
+    */
+    onActiveEnd: () => void
 }

package/dist/es/types/spec/progress/taro.d.ts

@@ -1,3 +1,7 @@
 import { BaseProgress } from './base';
 export interface TaroProgressProps extends BaseProgress {
+    showInfo: boolean;
+    activeColor: string;
+    backgroundColor: string;
+    active: boolean;
 }

package/dist/es/types/spec/searchbar/base.d.ts

@@ -3,10 +3,14 @@ import { UIRound } from '../../base/atoms';
 import { BaseProps } from '../../base/props';
 export interface BaseSearchBar extends BaseProps {
     /**
-    * 当前输入的值
+    * 当前输入的值，受控
     */
     value: string
     /**
+    * 当前默认值，支持通过','分割成多个
+    */
+    defaultValue: string
+    /**
     * 输入框默认暗纹
     */
     placeholder: string
@@ -54,6 +58,7 @@ export interface BaseSearchBar extends BaseProps {
     * 输入框内右侧区域
     */
     rightIn: ReactNode
+    tag: boolean;
     /**
     * 确定搜索时触发
     */
@@ -78,4 +83,8 @@ export interface BaseSearchBar extends BaseProps {
     * 点击输入区域时触发
     */
     onInputClick: (e: any) => void
+    /**
+    * 点击默认值的x号触发
+    */
+    onItemClick: (value: string, e: any) => void
 }

package/dist/es/types/spec/steps/base.d.ts

@@ -1,23 +1,44 @@
 import { ReactNode } from 'react';
 import { BaseProps } from '../../base/props';
+export type StepStatus = 'wait' | 'process' | 'finish';
+export type StepType = 'text' | 'dot' | 'icon';
+export type StepLayout = 'single' | 'double';
+export type StepDirection = 'horizontal' | 'vertical';
+export type StepsStatus = 'default' | 'business' | 'dynamic' | 'enhanced';
 export interface BaseStep extends BaseProps {
     title: ReactNode;
     description: ReactNode;
     value: number;
     icon: ReactNode;
+    type: StepType;
 }
 export interface BaseSteps extends BaseProps {
+    /**
+    * 步骤条的展示状态
+    */
+    status: StepsStatus
+    /**
+    * 步骤条的显示方向
+    */
+    direction: StepDirection
     /**
     * 当前所在的步骤
     */
     value: number
     /**
-    * 显示方向
+    * 步骤条的类型
+    */
+    type: StepType
+    /**
+    * 步骤条的布局方式
+    */
+    layout: StepLayout
+    /**
+    * 自定义图标
     */
-    direction: string
+    icon: ReactNode
     /**
-    * 点状步骤条
+    * 点击切换步骤条时触发
     */
-    dot: boolean
-    onStepClick: (index: number) => void;
+    onStepClick: (index: number) => void
 }