@nutui/nutui-react 1.4.7 → 1.4.8

package/dist/style.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.4.7 Wed Feb 15 2023 16:22:14 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.4.8 Wed Feb 22 2023 16:48:10 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/styles/variables.scss

@@ -118,6 +118,7 @@ $button-default-border-color: var(
   rgba(204, 204, 204, 1)
 ) !default;
 $button-default-color: var(--nutui-button-default-color, $gray1) !default;
+$button-plain-color: var(--nutui-button-plain-color, $gray2) !default;
 $button-default-padding: var(--nutui-button-default-padding, 0 18px) !default;
 $button-mini-padding: var(--nutui-button-mini-padding, 0 12px) !default;
 $button-small-padding: var(--nutui-button-small-padding, 0 12px) !default;
@@ -411,15 +412,36 @@ $input-padding: var(--nutui-input-padding, 10px 25px) !default;
 
 $textarea-font: var(--nutui-textarea-font, $font-size-2) !default;
 $textarea-height: var(--nutui-textarea-height, 100px) !default;
+$textarea-padding: var(--nutui-textarea-padding, 16px 10px 16px 16px) !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'
+) !default;
+$textarea-text-line-height: var(
+  --nutui-textarea-text-line-height,
+  30px
+) !default;
 $textarea-disabled-color: var(
   --nutui-textarea-disabled-color,
   $disable-color
 ) !default;
 
 // inputnumber（✅）
-
+$inputnumber-button-width: var(--nutui-inputnumber-button-width, 12px) !default;
+$inputnumber-button-height: var(
+  --nutui-inputnumber-button-height,
+  12px
+) !default;
+$inputnumber-button-border-radius: var(
+  --nutui-inputnumber-button-border-radius,
+  30px
+) !default;
+$inputnumber-button-background-color: var(
+  --nutui-inputnumber-button-background-color,
+  $gray6
+) !default;
 $inputnumber-icon-color: var(
   --nutui-inputnumber-icon-color,
   $title-color
@@ -450,6 +472,7 @@ $inputnumber-input-border-radius: var(
   4px
 ) !default;
 $inputnumber-input-width: var(--nutui-inputnumber-input-width, 40px) !default;
+$inputnumber-input-height: var(--nutui-inputnumber-input-height, 24px) !default;
 $inputnumber-input-margin: var(
   --nutui-inputnumber-input-margin,
   0 6px
@@ -637,8 +660,8 @@ $avatar-normal-height: var(--nutui-avatar-normal-height, 40px) !default;
 
 //switch（✅）
 $switch-close-bg-color: var(--nutui-switch-close-bg-color, #ebebeb) !default;
-$switch-close--cline-bg-color: var(
-  --nutui-switch-close--cline-bg-color,
+$switch-close--line-bg-color: var(
+  --nutui-switch-close--line-bg-color,
   #f0f0f0
 ) !default;
 $switch-width: var(--nutui-switch-width, 36px) !default;
@@ -900,15 +923,24 @@ $steps-base-icon-line-height: var(
   --nutui-steps-base-icon-line-height,
   25px
 ) !default;
+$steps-base-icon-margin-bottom: var(
+  --nutui-steps-base-icon-margin-bottom,
+  12px
+) !default;
 $steps-base-icon-font-size: var(
   --nutui-steps-base-icon-font-size,
   13px
 ) !default;
+$steps-base-line-width: var(--nutui-steps-base-line-width, 100%) !default;
+$steps-base-line-height: var(--nutui-steps-base-line-height, 1px) !default;
+$steps-base-line-background: var(
+  --nutui-steps-base-line-background,
+  #909ca4
+) !default;
 $steps-base-title-font-size: var(
   --nutui-steps-base-title-font-size,
   14px
 ) !default;
-$steps-base-line-color: var(--nutui-steps-base-line-color, #909ca4) !default;
 $steps-base-title-color: var(
   --nutui-steps-base-title-color,
   $title-color
@@ -919,7 +951,7 @@ $steps-base-title-margin-bottom: var(
 ) !default;
 $steps-base-content-font-size: var(
   --nutui-steps-base-content-font-size,
-  14px
+  12px
 ) !default;
 $steps-base-content-color: var(
   --nutui-steps-base-content-color,
@@ -936,49 +968,84 @@ $steps-wait-head-border-color: var(
   --nutui-steps-wait-head-border-color,
   #909ca4
 ) !default;
+$steps-wait-title-color: var(
+  --nutui-steps-wait-title-color,
+  $title-color2
+) !default;
 $steps-wait-content-color: var(
   --nutui-steps-wait-content-color,
   $title-color2
 ) !default;
 
-$steps-finish-head-color: var(
-  --nutui-steps-finish-head-color,
+$steps-process-icon-bg-color: var(
+  --nutui-steps-process-icon-bg-color,
   $primary-color
 ) !default;
-$steps-finish-head-border-color: var(
-  --nutui-steps-finish-head-border-color,
+$steps-process-icon-color: var(
+  --nutui-steps-process-icon-color,
+  $white
+) !default;
+$steps-process-head-color: var(
+  --nutui-steps-process-head-color,
   $primary-color
 ) !default;
-$steps-finish-title-color: var(
-  --nutui-steps-finish-title-color,
+$steps-process-head-border-color: var(
+  --nutui-steps-process-head-border-color,
   $primary-color
 ) !default;
-$steps-finish-line-background: var(
-  --nutui-steps-finish-line-background,
+$steps-process-title-color: var(
+  --nutui-steps-process-title-color,
   $primary-color
 ) !default;
-$steps-finish-icon-text-color: var(
-  --nutui-steps-finish-icon-text-color,
-  $white
+$steps-process-title-font-size: var(
+  --nutui-steps-process-title-font-size,
+  14px
+) !default;
+$steps-process-title-font-weight: var(
+  --nutui-steps-process-title-font-weight,
+  400
+) !default;
+$steps-process-content-color: var(
+  --nutui-steps-process-content-color,
+  $title-color2
 ) !default;
 
-$steps-process-head-color: var(
-  --nutui-steps-process-head-color,
+$steps-finish-icon-bg-color: var(
+  --nutui-steps-finish-icon-bg-color,
   $primary-text-color
 ) !default;
-$steps-process-head-border-color: var(
-  --nutui-steps-process-head-border-color,
+$steps-finish-icon-color: var(
+  --nutui-steps-finish-icon-color,
   $primary-color
 ) !default;
-$steps-process-title-color: var(
-  --nutui-steps-process-title-color,
+$steps-finish-head-color: var(
+  --nutui-steps-finish-head-color,
+  $primary-color
+) !default;
+$steps-finish-head-border-color: var(
+  --nutui-steps-finish-head-border-color,
+  $primary-color
+) !default;
+$steps-finish-title-color: var(
+  --nutui-steps-finish-title-color,
   $primary-color
 ) !default;
-$steps-process-icon-text-color: var(
-  --nutui-steps-process-icon-text-color,
+$steps-finish-content-color: var(
+  --nutui-steps-finish-content-color,
+  $title-color2
+) !default;
+$steps-finish-line-background: var(
+  --nutui-steps-finish-line-background,
   $primary-color
 ) !default;
 
+$steps-dot-icon-width: var(--nutui-steps-dot-icon-width, 6px) !default;
+$steps-dot-icon-height: var(--nutui-steps-dot-icon-height, 6px) !default;
+$steps-dot-icon-border: var(
+  --nutui-steps-dot-icon-border,
+  2px solid $primary-text-color
+) !default;
+
 // dialog（✅）
 $dialog-width: var(--nutui-dialog-width, 296px) !default;
 $dialog-header-font-weight: var(
@@ -1050,7 +1117,7 @@ $checkbox-icon-disable-color: var(
 ) !default;
 $checkbox-label-margin-left: var(
   --nutui-checkbox-label-margin-left,
-  15px
+  10px
 ) !default;
 $checkbox-label-font-size: var(--nutui-checkbox-label-font-size, 14px) !default;
 $checkbox-icon-font-size: var(--nutui-checkbox-icon-font-size, 18px) !default;
@@ -1291,10 +1358,9 @@ $tag-border-width: var(--nutui-tag-border-width, 1px) !default;
 $tag-height: var(--nutui-tag-height, auto) !default;
 
 //badge（✅）
-$badge-background-color: linear-gradient(
-  135deg,
-  $primary-color 0%,
-  $primary-color-end 100%
+$badge-background-color: var(
+  --nutui-badge-background-color,
+  linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%)
 ) !default;
 $badge-color: var(--nutui-badge-color, #fff) !default;
 $badge-font-size: var(--nutui-badge-font-size, $font-size-1) !default;
@@ -1302,6 +1368,10 @@ $badge-default-background-color: var(
   --nutui-badge-default-background-color,
   rgba(255, 255, 255, 1)
 ) !default;
+$badge-border: var(
+  --nutui-badge-border,
+  0px solid $primary-text-color
+) !default;
 $badge-border-radius: var(--nutui-badge-border-radius, 14px) !default;
 $badge-padding: var(--nutui-badge-padding, 0 5px) !default;
 $badge-content-transform: var(
@@ -1315,6 +1385,37 @@ $badge-dot-border-radius: var(--nutui-badge-dot-border-radius, 7px) !default;
 $badge-dot-padding: var(--nutui-badge-dot-padding, 0px) !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-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
+) !default;
+$popover-menu-item-hover-text-color: var(
+  --nutui-popover-menu-item-hover-text-color,
+  $primary-text-color
+) !default;
+$popover-menu-item-border-width: var(
+  --nutui-popover-menu-item-border-width,
+  80%
+) !default;
+$popover-menu-item-border-height: var(
+  --nutui-popover-menu-item-border-height,
+  1px
+) !default;
+$popover-menu-item-border-left: var(
+  --nutui-popover-menu-item-border-left,
+  10%
+) !default;
+$popover-menu-item-border-bottom: var(
+  --nutui-popover-menu-item-border-bottom,
+  2%
+) !default;
 $popover-white-background-color: var(
   --nutui-popover-white-background-color,
   rgba(255, 255, 255, 1)
@@ -1516,13 +1617,21 @@ $tabs-titles-item-active-color: var(
 ) !default;
 $tabs-titles-background-color: var(
   --nutui-tabs-titles-background-color,
-  $background-color2
+  $background-color
 ) !default;
 $tabs-horizontal-tab-line-color: linear-gradient(
   90deg,
   $primary-color 0%,
   rgba(#fa2c19, 0.15) 100%
 ) !default;
+$tabs-horizontal-tab-line-bottom: var(
+  --nutui-tabs-horizontal-line-bottom,
+  15%
+) !default;
+$tabs-horizontal-tab-line-border-radius: var(
+  --nutui-tabs-horizontal-line-border-radius,
+  0px
+) !default;
 $tabs-horizontal-titles-height: var(
   --nutui-tabs-horizontal-titles-height,
   46px
@@ -1658,9 +1767,9 @@ $menu-item-content-bg-color: var(
 // collapse（✅）
 $collapse-item-padding: var(
   --nutui-collapse-item-padding,
-  13px 36px 13px 26px
+  13px 0px 13px 26px
 ) !default;
-$collapse-item-color: var(--nutui-collapse-item-color, #666666) !default;
+$collapse-item-color: var(--nutui-collapse-item-color, $title-color) !default;
 $collapse-item-disabled-color: var(
   --nutui-collapse-item-disabled-color,
   #c8c9cc
@@ -1669,6 +1778,14 @@ $collapse-item-icon-color: var(
   --nutui-collapse-item-icon-color,
   #666666
 ) !default;
+$collapse-item-icon-margin-right: var(
+  --nutui-collapse-item-icon-margin-right,
+  5px
+) !default;
+$collapse-item-icon-margin-left: var(
+  --nutui-collapse-item-icon-margin-left,
+  5px
+) !default;
 $collapse-item-font-size: var(
   --nutui-collapse-item-font-size,
   $font-size-2
@@ -1797,7 +1914,6 @@ $empty-description-padding: var(
   --nutui-empty-description-padding,
   0 40px
 ) !default;
-
 // cascader（✅）
 $cascader-font-size: var(--nutui-cascader-font-size, $font-size-2) !default;
 $cascader-line-height: var(--nutui-cascader-line-height, 22px) !default;
@@ -1830,7 +1946,13 @@ $cascader-bar-font-size: var(
 ) !default;
 $cascader-bar-line-height: var(--nutui-cascader-bar-line-height, 20px) !default;
 $cascader-bar-color: var(--nutui-cascader-bar-color, $title-color) !default;
+$cascader-item-height: var(--nutui-cascader-item-height, 40px) !default;
 $cascader-item-padding: var(--nutui-cascader-item-padding, 10px 20px) !default;
+$cascader-item-margin: var(--nutui-cascader-item-margin, 0px) !default;
+$cascader-item-border-bottom: var(
+  --nutui-cascader-item-border-bottom,
+  0px solid #ddd
+) !default;
 $cascader-item-color: var(--nutui-cascader-item-color, $title-color) !default;
 $cascader-item-font-size: var(
   --nutui-cascader-item-font-size,

package/dist/types/index.d.ts

@@ -383,8 +383,8 @@ declare const Elevator: FunctionComponent<Partial<ElevatorProps> & React__defaul
     Context: typeof elevatorContext;
 };
 
-type Direction$1 = 'right' | 'left';
-type Position$2 = {
+type Direction$2 = 'right' | 'left';
+type Position$3 = {
     top?: string;
     bottom?: string;
 };
@@ -395,8 +395,8 @@ interface FixedNavProps extends BasicComponent {
     navList: Array<any>;
     activeText: string;
     unActiveText: string;
-    position: Position$2;
-    type: Direction$1;
+    position: Position$3;
+    type: Direction$2;
     onChange: (v: any) => void;
     onSelected: (v: any, event: MouseEvent$1) => void;
     slotList: React__default.ReactNode;
@@ -529,6 +529,7 @@ declare const SubSideNavBar: FunctionComponent<SubSideNavBarProps>;
 
 interface TabbarProps {
     visible: number | string;
+    activeVisible?: number | string;
     bottom: boolean;
     size: string | number;
     unactiveColor: string;
@@ -536,7 +537,6 @@ interface TabbarProps {
     safeAreaInsetBottom: boolean;
     className: string;
     style: React__default.CSSProperties;
-    tabSwitch: (child: React__default.ReactElement<any>, active: number) => void;
     onSwitch: (child: React__default.ReactElement<any>, active: number) => void;
     children?: React__default.ReactNode;
 }
@@ -594,6 +594,7 @@ interface TabsProps extends BasicComponent {
     animatedTime: number | string;
     titleGutter: number | string;
     size: TabsSize;
+    leftAlign: boolean;
     titleNode: () => JSX.Element[];
     onChange: (t: Title) => void;
     onClick: (t: Title) => void;
@@ -685,6 +686,7 @@ interface CascaderProps {
     className: string;
     style: CSSProperties;
     activeColor: string;
+    checkedIcon: string;
     tabsColor: string;
     poppable: boolean;
     visible: boolean;
@@ -715,10 +717,14 @@ interface RadioGroupOptionType {
     onChange?: MouseEventHandler<HTMLDivElement>;
 }
 
+type Position$2 = 'left' | 'right';
+type Direction$1 = 'horizontal' | 'vertical';
 interface CheckboxGroupProps {
     disabled: boolean;
     checkedValue: string[];
     max: number | undefined;
+    textPosition: Position$2;
+    direction: Direction$1;
     onChange: (value: string[]) => void;
     options: RadioGroupOptionType[];
 }
@@ -773,6 +779,58 @@ interface DatePickerProps {
 }
 declare const DatePicker: FunctionComponent<Partial<DatePickerProps> & Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'>>;
 
+interface BaseForm {
+    /**
+     * 经 Form.useForm() 创建的 form 控制实例，不提供时会自动创建
+     */
+    form: any;
+    /**
+     * label的位置
+     * 可选值 top/left/right
+     */
+    labelPosition: string | number;
+    /**
+     * 表单分组名称
+     */
+    formGroupTitle: string;
+    starPositon: string;
+    /**
+     * 表单校验成功回调
+     */
+    onFinish: (obj: object) => void;
+    /**
+     * 表单校验失败回调
+     */
+    onFinishFailed: (value: []) => void;
+}
+type StoreValue = string | number;
+type NamePath = string | number;
+interface Callbacks<Values = any> {
+    onValuesChange?: (values: Values) => void;
+    onFinish?: (values: Values) => void;
+    onFinishFailed?: (Values: Values) => void;
+}
+interface FormInstance<Values = any> {
+    registerField: (entity: FieldEntity) => () => void;
+    getFieldValue: (name: NamePath) => StoreValue;
+    setFieldsValue: (value: any) => void;
+    resetFields: (fields?: NamePath[]) => void;
+    submit: () => void;
+    setCallback: (callbacks: Callbacks) => void;
+}
+interface FieldEntity {
+    onStoreChange: () => void;
+    getNamePath: () => NamePath;
+    props: {
+        name: NamePath;
+        rules?: any[];
+        dependencies?: NamePath[];
+        initialValue?: any;
+    };
+}
+
+declare const useForm: (form?: FormInstance) => any[];
+
 interface FormItemRuleWithoutValidator {
     [key: string]: any;
     regex?: RegExp;
@@ -780,7 +838,7 @@ interface FormItemRuleWithoutValidator {
     message?: string;
 }
 interface FormItemRule extends FormItemRuleWithoutValidator {
-    validator?: (value: any, ruleCfg: FormItemRuleWithoutValidator) => boolean | string | Promise<boolean | string>;
+    validator?: (ruleCfg: FormItemRuleWithoutValidator, value: string) => boolean | string | Promise<boolean | string>;
 }
 interface BaseFormField {
     /**
@@ -821,10 +879,11 @@ declare class FormItem extends React__default.Component<FieldProps> {
     static contextType: any;
     context: React__default.ContextType<typeof FormItemContext>;
     private cancelRegister;
+    private isInitialValue;
     componentDidMount(): void;
     componentWillUnmount(): void;
     getControlled: (children: React__default.ReactElement) => {
-        value: any;
+        defaultValue: any;
         onChange: (event: React__default.ChangeEvent<HTMLInputElement> | number | string | string[]) => void;
     };
     onStoreChange: () => void;
@@ -833,35 +892,12 @@ declare class FormItem extends React__default.Component<FieldProps> {
     render(): JSX.Element;
 }
 
-interface BaseForm {
-    /**
-     * 经 Form.useForm() 创建的 form 控制实例，不提供时会自动创建
-     */
-    form: any;
-    /**
-     * label的位置
-     * 可选值 top/left/right
-     */
-    labelPosition: string | number;
-    /**
-     * 表单分组名称
-     */
-    formGroupTitle: string;
-    starPositon: string;
-    /**
-     * 表单校验成功回调
-     */
-    onFinish: (obj: object) => void;
-    /**
-     * 表单校验失败回调
-     */
-    onFinishFailed: (value: []) => void;
-}
-
 interface FormProps extends BasicComponent, BaseForm {
 }
 declare const Form: FunctionComponent<Partial<FormProps> & React__default.HTMLAttributes<HTMLFormElement>> & {
     Item: typeof FormItem;
+} & {
+    useForm: typeof useForm;
 };
 
 type InputAlignType = 'left' | 'center' | 'right';
@@ -1140,6 +1176,7 @@ interface ShortPasswordProps extends BasicComponent {
     length: string | number;
     className: string;
     style?: CSSProperties;
+    autoFocus?: boolean;
     onChange: (value: string | number) => void;
     onOk: (value: string | number) => void;
     onCancel: () => void;
@@ -1459,7 +1496,7 @@ interface SwipeProps {
 }
 declare const Swipe: React__default.ForwardRefExoticComponent<Partial<SwipeProps> & Omit<React__default.HTMLAttributes<HTMLDivElement>, "onTouchEnd" | "onTouchMove" | "onTouchStart"> & React__default.RefAttributes<SwipeInstance>>;
 
-interface SwitchProps {
+interface SwitchProps extends BasicComponent {
     isAsync: boolean;
     checked: boolean;
     disable: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-react",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "style": "dist/style.css",
   "main": "dist/nutui.react.umd.js",
   "module": "dist/esm/nutui-react.es.js",