@nutui/nutui-react-taro 3.0.0-beta.1 → 3.0.0-beta.3

package/dist/es/packages/badge/style/style.css

@@ -1,6 +1,13 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  width: auto;
+  /* #ifdef harmony */
+  min-width: 1px;
+  /* #endif */
+  /* #ifndef harmony */
+  min-width: auto;
+  /* #endif */
 }
 .nut-badge-icon {
   position: absolute;
@@ -8,8 +15,6 @@
   justify-content: center;
   align-items: center;
   background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
-  top: -10%;
-  right: -15%;
   padding: var(--nutui-badge-icon-padding, 3px);
   text-align: center;
   border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
@@ -27,7 +32,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  /* #ifdef harmony */
+  background: var(--nutui-color-primary, #ff0f23);
+  /* #endif */
+  /* #ifndef harmony */
   background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
+  /* #endif */
   color: var(--nutui-badge-color, #fff);
   padding: var(--nutui-badge-padding, 0 4px);
   font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
@@ -45,7 +55,9 @@
   padding: 0;
 }
 .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(100%));
+  /* #ifndef rn */
+  transform: var(--nutui-badge-content-transform, translateX(100%));
+  /* #endif */
 }
 .nut-badge-dot {
   width: var(--nutui-badge-dot-width, 7px);
@@ -54,18 +66,8 @@
   border-radius: var(--nutui-badge-dot-width, 7px);
   padding: 0;
 }
-.nut-badge-outline .nut-badge-content {
+.nut-badge-outline {
   background: var(--nutui-color-primary-text, #ffffff);
   border: 1px solid var(--nutui-color-primary, #ff0f23);
   color: var(--nutui-color-primary, #ff0f23);
-}
-
-[dir=rtl] .nut-badge-icon,
-.nut-rtl .nut-badge-icon {
-  right: auto;
-  left: -15%;
-}
-[dir=rtl] .nut-badge-content,
-.nut-rtl .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(-100%));
 }

package/dist/es/packages/badge/style/style.harmony.css

@@ -1,15 +1,20 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  width: auto;
+  /* #ifdef harmony */
+  min-width: 1px;
+  /* #endif */
+  /* #ifndef harmony */
+  min-width: auto;
+  /* #endif */
 }
 .nut-badge-icon {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
-  background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
-  top: -10%;
-  right: -15%;
+  background: linear-gradient(135deg, #ff475d 0%, #ff0f23 100%);
   padding: 3px;
   text-align: center;
   border: 0px solid #ffffff;
@@ -27,7 +32,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
+  /* #ifdef harmony */
+  background: #ff0f23;
+  /* #endif */
+  /* #ifndef harmony */
+  background: linear-gradient(135deg, #ff475d 0%, #ff0f23 100%);
+  /* #endif */
   color: #fff;
   padding: 0 4px;
   font-size: 10px;
@@ -45,7 +55,9 @@
   padding: 0;
 }
 .nut-badge-content {
-  transform: translateY(-50%) translateX(100%);
+  /* #ifndef rn */
+  transform: translateX(100%);
+  /* #endif */
 }
 .nut-badge-dot {
   width: 7px;
@@ -54,15 +66,8 @@
   border-radius: 7px;
   padding: 0;
 }
-
-[dir=rtl] .nut-badge-icon,
-.nut-rtl .nut-badge-icon {
-  right: auto;
-  left: -15%;
-}
-[dir=rtl] .nut-badge-content {
-  transform: translateY(-50%) translateX(-100%);
-}
-.nut-rtl .nut-badge-content {
-  transform: translateY(-50%) translateX(-100%);
+.nut-badge-outline {
+  background: #ffffff;
+  border: 1px solid #ff0f23;
+  color: #ff0f23;
 }

package/dist/es/packages/button/button.js

@@ -102,7 +102,7 @@ export var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             }
         }), /*#__PURE__*/ React.createElement(View, {
             className: "nut-button-wrap"
-        }, loading && !harmonyAndRn() && /*#__PURE__*/ React.createElement(Loading, {
+        }, loading && /*#__PURE__*/ React.createElement(Loading, {
             className: "nut-icon-loading"
         }), !loading && icon ? icon : null, children && /*#__PURE__*/ React.createElement(View, {
             className: "nut-button-children nut-button-".concat(size, "-children nut-button-").concat(type, "-children ").concat(!(props.fill || disabled || loading) ? '' : "nut-button-".concat(type).concat(props.fill ? "-".concat(fill) : '').concat(disabled || loading ? '-disabled' : '')).concat(icon || loading ? " nut-button-text" : '').concat(rightIcon ? " nut-button-text-right" : ''),

package/dist/es/packages/calendarcard/calendarcard.d.ts

@@ -2,70 +2,18 @@ import React, { ReactNode } from 'react';
 import { BasicComponent } from "../../utils/typings";
 import type { CalendarCardDay, CalendarCardMonth, CalendarCardRef, CalendarCardValue } from './types';
 export interface CalendarCardProps extends BasicComponent {
-    /**
-    * 类型，单个日期 single，多个日期 multiple，日期范围 range，周选择 week
-    * @default single
-    */
-    type: 'single' | 'multiple' | 'range' | 'week'
-    /**
-    * 受控模式下的值，与 onChange 搭配使用
-    * @default -
-    */
-    value?: CalendarCardValue
-    /**
-    * 默认值，单个日期 Date 格式，多个日期/范围选择 Date[] 格式
-    * @default -
-    */
-    defaultValue?: CalendarCardValue
-    /**
-    * 设置周起始日，0 为周日，1 为周一
-    * @default 1
-    */
-    firstDayOfWeek?: number
-    /**
-    * 限制范围开始日期
-    * @default -
-    */
-    startDate?: Date
-    /**
-    * 限制范围结束日期
-    * @default -
-    */
-    endDate?: Date
-    /**
-    * 设置不可选日期
-    * @default -
-    */
-    disableDay?: (day: CalendarCardDay) => boolean
-    /**
-    * 日期信息
-    * @default -
-    */
-    renderDay?: (day: CalendarCardDay) => ReactNode
-    /**
-    * 日期顶部信息
-    * @default -
-    */
-    renderDayTop?: (day: CalendarCardDay) => ReactNode
-    /**
-    * 日期底部信息
-    * @default -
-    */
-    renderDayBottom?: (day: CalendarCardDay) => ReactNode
-    /**
-    * 点击后触发
-    * @default -
-    */
-    onDayClick?: (day: CalendarCardDay) => void
-    /**
-    * 切换月份时触发
-    * @default -
-    */
-    onPageChange: (data: CalendarCardMonth) => void
-    /**
-    * 选择值发生变化时触发
-    * @default -
-    */
-    onChange: (value: CalendarCardValue) => void
+    type: 'single' | 'multiple' | 'range' | 'week';
+    value?: CalendarCardValue;
+    defaultValue?: CalendarCardValue;
+    firstDayOfWeek?: number;
+    startDate?: Date;
+    endDate?: Date;
+    disableDay?: (day: CalendarCardDay) => boolean;
+    renderDay?: (day: CalendarCardDay) => ReactNode;
+    renderDayTop?: (day: CalendarCardDay) => ReactNode;
+    renderDayBottom?: (day: CalendarCardDay) => ReactNode;
+    onDayClick?: (day: CalendarCardDay) => void;
+    onPageChange: (data: CalendarCardMonth) => void;
+    onChange: (value: CalendarCardValue) => void;
 }
 export declare const CalendarCard: React.ForwardRefExoticComponent<Partial<CalendarCardProps> & React.RefAttributes<CalendarCardRef>>;

package/dist/es/packages/calendarcard/calendarcard.js

@@ -2,7 +2,7 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
-import React, { useState, useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import classNames from "classnames";
 import { View } from "@tarojs/components";
 import { ArrowLeft, ArrowRight, DoubleLeft, DoubleRight } from "./icon";
@@ -71,7 +71,7 @@ export var CalendarCard = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             onChange === null || onChange === void 0 ? void 0 : onChange(val);
         }
     };
-    var getDays = function(month) {
+    var getDays = useCallback(function(month) {
         var y = month.year;
         var m = month.month;
         var days = _to_consumable_array(getPrevMonthDays(y, m, firstDayOfWeek)).concat(_to_consumable_array(getCurrentMonthDays(y, m)));
@@ -88,13 +88,18 @@ export var CalendarCard = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             });
         }
         return days;
-    };
+    }, [
+        firstDayOfWeek
+    ]);
     useEffect(function() {
         var newDays = getDays(month);
         setDays(newDays);
         onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(month);
     }, [
-        month
+        month,
+        getDays,
+        onPageChange,
+        firstDayOfWeek
     ]);
     var isSameDay = function(day1, day2) {
         return (day1 === null || day1 === void 0 ? void 0 : day1.year) === (day2 === null || day2 === void 0 ? void 0 : day2.year) && (day1 === null || day1 === void 0 ? void 0 : day1.month) === (day2 === null || day2 === void 0 ? void 0 : day2.month) && (day1 === null || day1 === void 0 ? void 0 : day1.date) === (day2 === null || day2 === void 0 ? void 0 : day2.date);

package/dist/es/packages/calendarcard/icon.js

@@ -1,17 +1,29 @@
 import React from "react";
-import { View } from "@tarojs/components";
+import { Image, View } from "@tarojs/components";
 var left = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNNi42MDUgOS40OWEuNzcxLjc3MSAwIDAgMSAwLS45OGwzLjYtNC4zNzJhLjc3MS43NzEgMCAwIDEgMS4xOS45ODFMOC4yIDlsMy4xOTcgMy44ODFhLjc3MS43NzEgMCAxIDEtMS4xOTEuOThsLTMuNi00LjM3eiIvPjwvc3ZnPg==';
 var right = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTEuMzk2IDkuNDlhLjc3MS43NzEgMCAwIDAgMC0uOThsLTMuNi00LjM3MmEuNzcxLjc3MSAwIDAgMC0xLjE5MS45ODFMOS44IDlsLTMuMTk2IDMuODgxYS43NzEuNzcxIDAgMCAwIDEuMTkuOThsMy42LTQuMzd6Ii8+PC9zdmc+';
 var doubleLeft = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTMuODUzIDQuMDI2YS43NzEuNzcxIDAgMCAxIC4xMiAxLjA4NUwxMC44NjQgOWwzLjExIDMuODg5YS43NzEuNzcxIDAgMSAxLTEuMjA0Ljk2M2wtMy40OTgtNC4zN2EuNzcxLjc3MSAwIDAgMSAwLS45NjRsMy40OTctNC4zNzFhLjc3MS43NzEgMCAwIDEgMS4wODQtLjEyem0tNS4yNDUgMGEuNzcxLjc3MSAwIDAgMSAuMTIgMS4wODVMNS42MTcgOWwzLjExMSAzLjg4OWEuNzcxLjc3MSAwIDAgMS0xLjIwNS45NjNsLTMuNDk3LTQuMzdhLjc3MS43NzEgMCAwIDEgMC0uOTY0bDMuNDk3LTQuMzcxYS43NzEuNzcxIDAgMCAxIDEuMDg1LS4xMnoiLz48L3N2Zz4=';
 var doubleRight = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNNC4xNDcgMTMuOTc0YS43NzEuNzcxIDAgMCAxLS4xMi0xLjA4NUw3LjEzNiA5IDQuMDI4IDUuMTFhLjc3MS43NzEgMCAxIDEgMS4yMDQtLjk2M2wzLjQ5NyA0LjM3MWEuNzcxLjc3MSAwIDAgMSAwIC45NjRsLTMuNDk3IDQuMzcxYS43NzEuNzcxIDAgMCAxLTEuMDg0LjEyem01LjI0NSAwYS43NzEuNzcxIDAgMCAxLS4xMi0xLjA4NUwxMi4zODMgOSA5LjI3MiA1LjExYS43NzEuNzcxIDAgMSAxIDEuMjA1LS45NjNsMy40OTcgNC4zNzFhLjc3MS43NzEgMCAwIDEgMCAuOTY0bC0zLjQ5NyA0LjM3MWEuNzcxLjc3MSAwIDAgMS0xLjA4NS4xMnoiLz48L3N2Zz4=';
+if (process.env.TARO_ENV === 'jdharmony_cpp') {
+    left = 'https://img11.360buyimg.com/imagetools/jfs/t1/187031/35/51586/196/6731c464F9b9f8f00/5506e32bf15e29dc.png';
+    right = 'https://img12.360buyimg.com/imagetools/jfs/t1/181006/25/51824/185/6731c452F9e252322/7493147dd6b4a88d.png';
+    doubleLeft = 'https://img13.360buyimg.com/imagetools/jfs/t1/221244/29/45876/259/6731c6bdF515df0a2/624e8eee3c8494a2.png';
+    doubleRight = 'https://img11.360buyimg.com/imagetools/jfs/t1/238382/25/24000/235/6731c6bdF0153286c/4a57e60b6e889af3.png';
+}
 var Icon = function(param) {
     var url = param.url;
     var style = {
         background: "url('".concat(url, "') no-repeat center"),
         backgroundSize: '100% 100%',
-        width: '18px',
-        height: '18px'
+        width: 18,
+        height: 18
     };
+    if (process.env.TARO_ENV === 'jdharmony_cpp') {
+        return /*#__PURE__*/ React.createElement(Image, {
+            src: url,
+            style: style
+        });
+    }
     return /*#__PURE__*/ React.createElement(View, {
         style: style
     });

package/dist/es/packages/calendarcard/style/calendarcard.scss

@@ -55,6 +55,9 @@
 
     &-top,
     &-bottom {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 100%;
       height: 12px;
       font-size: 12px;
@@ -67,14 +70,22 @@
 
     &.active {
       background-color: $calendar-active-background-color;
-      color: $color-primary-text;
       border-radius: $calendar-day-active-border-radius;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $color-primary-text;
+      }
     }
 
     &.start,
     &.end {
       background-color: $calendar-active-background-color;
-      color: $color-primary-text;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $color-primary-text;
+      }
     }
 
     &.start {
@@ -89,7 +100,11 @@
 
     &.mid {
       background-color: $calendar-choose-background-color;
-      color: $calendar-choose-color;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $calendar-choose-color;
+      }
     }
 
     .nut-calendar-day-info {
@@ -100,7 +115,11 @@
     &.prev,
     &.next,
     &.disabled {
-      color: $calendar-disable-color;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $calendar-disable-color;
+      }
       cursor: not-allowed;
     }
   }
@@ -128,11 +147,13 @@
       }
     }
   }
+
   &-day {
     &.start,
     &.end {
       border-radius: 0;
     }
+
     &.start {
       border-top-right-radius: $calendar-day-active-border-radius;
       border-bottom-right-radius: $calendar-day-active-border-radius;

package/dist/es/packages/calendarcard/style/style.css

@@ -47,6 +47,9 @@
   cursor: auto;
 }
 .nut-calendarcard-day-top, .nut-calendarcard-day-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 12px;
   font-size: 12px;
@@ -57,11 +60,21 @@
 }
 .nut-calendarcard-day.active {
   background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23));
-  color: var(--nutui-color-primary-text, #ffffff);
   border-radius: var(--nutui-calendar-day-active-border-radius, 4px);
 }
+.nut-calendarcard-day.active .nut-calendarcard-day-top,
+.nut-calendarcard-day.active .nut-calendarcard-day-inner,
+.nut-calendarcard-day.active .nut-calendarcard-day-bottom {
+  color: var(--nutui-color-primary-text, #ffffff);
+}
 .nut-calendarcard-day.start, .nut-calendarcard-day.end {
   background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-calendarcard-day.start .nut-calendarcard-day-top,
+.nut-calendarcard-day.start .nut-calendarcard-day-inner,
+.nut-calendarcard-day.start .nut-calendarcard-day-bottom, .nut-calendarcard-day.end .nut-calendarcard-day-top,
+.nut-calendarcard-day.end .nut-calendarcard-day-inner,
+.nut-calendarcard-day.end .nut-calendarcard-day-bottom {
   color: var(--nutui-color-primary-text, #ffffff);
 }
 .nut-calendarcard-day.start {
@@ -74,15 +87,27 @@
 }
 .nut-calendarcard-day.mid {
   background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+}
+.nut-calendarcard-day.mid .nut-calendarcard-day-top,
+.nut-calendarcard-day.mid .nut-calendarcard-day-inner,
+.nut-calendarcard-day.mid .nut-calendarcard-day-bottom {
   color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-calendarcard-day .nut-calendar-day-info {
   color: var(--nutui-color-primary-text, #ffffff);
 }
 .nut-calendarcard-day.prev, .nut-calendarcard-day.next, .nut-calendarcard-day.disabled {
-  color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
   cursor: not-allowed;
 }
+.nut-calendarcard-day.prev .nut-calendarcard-day-top,
+.nut-calendarcard-day.prev .nut-calendarcard-day-inner,
+.nut-calendarcard-day.prev .nut-calendarcard-day-bottom, .nut-calendarcard-day.next .nut-calendarcard-day-top,
+.nut-calendarcard-day.next .nut-calendarcard-day-inner,
+.nut-calendarcard-day.next .nut-calendarcard-day-bottom, .nut-calendarcard-day.disabled .nut-calendarcard-day-top,
+.nut-calendarcard-day.disabled .nut-calendarcard-day-inner,
+.nut-calendarcard-day.disabled .nut-calendarcard-day-bottom {
+  color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
 
 [dir=rtl] .nut-calendarcard-header-left .left, [dir=rtl] .nut-calendarcard-header-right .left,
 .nut-rtl .nut-calendarcard-header-left .left,

package/dist/es/packages/image/image.js

@@ -7,7 +7,7 @@ import Taro from "@tarojs/taro";
 import { Image as TImage, View } from "@tarojs/components";
 import { Image as ImageIcon, ImageError } from "@nutui/icons-react-taro";
 import classNames from "classnames";
-import { harmonyAndRn } from "../../utils/platform-taro";
+import pxTransform from "../../utils/px-transform";
 var defaultProps = {
     src: '',
     error: true,
@@ -30,7 +30,7 @@ export var Image = function(props) {
     var _useState = _sliced_to_array(useState(true), 2), innerLoading = _useState[0], setInnerLoading = _useState[1];
     var _useState1 = _sliced_to_array(useState(false), 2), isError = _useState1[0], setIsError = _useState1[1];
     var pxCheck = function(value) {
-        return Number.isNaN(Number(value)) ? String(value) : "".concat(value, "px");
+        return Number.isNaN(Number(value)) ? String(value) : pxTransform(+value);
     };
     // 图片加载
     var handleLoad = function(e) {
@@ -47,9 +47,9 @@ export var Image = function(props) {
     };
     var containerStyle = {
         // eslint-disable-next-line no-nested-ternary
-        height: height ? Taro.getEnv() === 'RN' ? height : pxCheck(height) : Taro.getEnv() === 'WEB' ? '' : '100%',
+        height: height ? pxCheck(height) : Taro.getEnv() === 'WEB' ? '' : '100%',
         // eslint-disable-next-line no-nested-ternary
-        width: width ? Taro.getEnv() === 'RN' ? width : pxCheck(width) : Taro.getEnv() === 'WEB' ? '' : '100%',
+        width: width ? pxCheck(width) : Taro.getEnv() === 'WEB' ? '' : '100%',
         overflow: radius !== undefined && radius !== null ? 'hidden' : '',
         borderRadius: // eslint-disable-next-line no-nested-ternary
         radius !== undefined && radius != null ? Taro.getEnv() === 'RN' ? radius : pxCheck(radius) : ''
@@ -106,6 +106,6 @@ export var Image = function(props) {
         onError: function(e) {
             return handleError(e);
         }
-    })), !harmonyAndRn() && /*#__PURE__*/ React.createElement(React.Fragment, null, renderLoading(), renderErrorImg()));
+    })), /*#__PURE__*/ React.createElement(React.Fragment, null, renderLoading(), renderErrorImg()));
 };
 Image.displayName = 'NutImage';

package/dist/es/packages/input/input.js

@@ -10,7 +10,6 @@ import { formatNumber } from "./utils";
 import { useConfig, useRtl } from "../configprovider/index";
 import { ComponentDefaults } from "../../utils/typings";
 import { usePropsValue } from "../../utils/use-props-value";
-import { harmonyAndRn } from "../../utils/platform-taro";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     type: 'text',
     name: '',
@@ -169,8 +168,7 @@ export var Input = /*#__PURE__*/ forwardRef(function(props, ref) {
         onBlur: handleBlur,
         onFocus: handleFocus,
         onInput: function(e) {
-            console.log('eeeeee', e.detail.value);
-            handleInput((e.currentTarget || e.detail).value);
+            handleInput((e.detail || e.currentTarget).value);
         }
     })), /*#__PURE__*/ React.createElement(View, {
         style: {
@@ -185,8 +183,8 @@ export var Input = /*#__PURE__*/ forwardRef(function(props, ref) {
                 onClear === null || onClear === void 0 ? void 0 : onClear('');
             }
         }
-    }, clearIcon || (!harmonyAndRn() ? /*#__PURE__*/ React.createElement(MaskClose, {
+    }, clearIcon || /*#__PURE__*/ React.createElement(MaskClose, {
         className: "nut-input-clear"
-    }) : null)));
+    })));
 });
 Input.displayName = 'NutInput';

package/dist/es/packages/input/style/input.scss

@@ -47,3 +47,7 @@
     -webkit-text-fill-color: $input-disabled-color;
   }
 }
+
+.nut-input-clear {
+  flex: 0;
+}

package/dist/es/packages/input/style/style.css

@@ -43,4 +43,8 @@
   background: none;
   opacity: 1;
   -webkit-text-fill-color: var(--nutui-input-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
+
+.nut-input-clear {
+  flex: 0;
 }

package/dist/es/packages/input/style/style.harmony.css

@@ -43,4 +43,8 @@
   background: none;
   opacity: 1;
   -webkit-text-fill-color: #c2c4cc;
+}
+
+.nut-input-clear {
+  flex: 0;
 }

package/dist/es/packages/loading/loading.d.ts

@@ -3,20 +3,8 @@ import { BasicComponent } from "../../utils/typings";
 export type LoadingType = 'spinner' | 'circular';
 export type LoadingDirection = 'horizontal' | 'vertical';
 export interface LoadingProps extends BasicComponent {
-    /**
-    * loading图标的样式
-    * @default circular
-    */
-    type: LoadingType
-    /**
-    * loading图标和文字的排列方式
-    * @default horizontal
-    */
-    direction: LoadingDirection
-    /**
-    * 自定义loading的图标
-    * @default -
-    */
-    icon?: ReactNode
+    type: LoadingType;
+    direction: LoadingDirection;
+    icon?: ReactNode;
 }
 export declare const Loading: FunctionComponent<Partial<LoadingProps> & React.HTMLAttributes<HTMLDivElement>>;

package/dist/es/packages/navbar/navbar.js

@@ -7,8 +7,11 @@ import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import React, { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import { View } from "@tarojs/components";
+import { useRtl } from "../configprovider/index";
 import { ComponentDefaults } from "../../utils/typings";
 import { getRectByTaro } from "../../utils/get-rect-by-taro";
+import { harmonyAndRn } from "../../utils/platform-taro";
+import pxTransform from "../../utils/px-transform";
 import { SafeArea } from "../safearea/safearea";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     left: '',
@@ -23,6 +26,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 export var NavBar = function(props) {
     var _$_object_spread = _object_spread({}, defaultProps, props), right = _$_object_spread.right, left = _$_object_spread.left, titleAlign = _$_object_spread.titleAlign, className = _$_object_spread.className, style = _$_object_spread.style, back = _$_object_spread.back, fixed = _$_object_spread.fixed, safeAreaInsetTop = _$_object_spread.safeAreaInsetTop, placeholder = _$_object_spread.placeholder, zIndex = _$_object_spread.zIndex, onBackClick = _$_object_spread.onBackClick;
     var classPrefix = 'nut-navbar';
+    var rtl = useRtl();
     var children = Array.isArray(props.children) ? props.children : [
         props.children
     ];
@@ -115,18 +119,21 @@ export var NavBar = function(props) {
                 return _ref.apply(this, arguments);
             };
         }();
-        init();
+        setTimeout(function() {
+            init();
+        }, 0);
     }, [
         left,
         right,
         back
     ]);
     var renderLeft = function() {
+        var _obj, _obj1;
         return back || left ? /*#__PURE__*/ React.createElement(View, {
-            className: "".concat(classPrefix, "-left"),
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-left"), true), _define_property(_obj, "".concat(classPrefix, "-left-align-").concat(titleAlign), true), _define_property(_obj, "".concat(classPrefix, "-left-rtl"), rtl), _obj)),
             ref: leftRef
         }, back && /*#__PURE__*/ React.createElement(View, {
-            className: "".concat(classPrefix, "-left-back"),
+            className: classNames((_obj1 = {}, _define_property(_obj1, "".concat(classPrefix, "-left-back"), true), _define_property(_obj1, "".concat(classPrefix, "-left-back-align-").concat(titleAlign), true), _define_property(_obj1, "".concat(classPrefix, "-left-back-children"), left), _define_property(_obj1, "".concat(classPrefix, "-left-back-children-rtl"), left && rtl), _obj1)),
             onClick: function(e) {
                 return onBackClick(e);
             }
@@ -135,20 +142,22 @@ export var NavBar = function(props) {
     var renderContent = function() {
         var titleStyle = {};
         if (titleAlign === 'center') {
-            var contentRealWidth = "".concat(contentWidth).concat(/%$/i.test(contentWidth) ? '' : 'px');
+            var width = harmonyAndRn() ? pxTransform(Number(contentWidth)) : "".concat(contentWidth, "px");
+            var contentRealWidth = /%$/i.test(contentWidth) ? contentWidth : width;
             titleStyle = {
-                minWidth: contentRealWidth,
                 width: contentRealWidth
             };
         }
+        var _obj;
         return /*#__PURE__*/ React.createElement(View, {
-            className: "".concat(classPrefix, "-title"),
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-title"), true), _define_property(_obj, "".concat(classPrefix, "-title-align-").concat(titleAlign), true), _obj)),
             style: titleStyle
         }, children);
     };
     var renderRight = function() {
+        var _obj;
         return /*#__PURE__*/ React.createElement(View, {
-            className: "".concat(classPrefix, "-right"),
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-right"), true), _define_property(_obj, "".concat(classPrefix, "-right-align-").concat(titleAlign), true), _define_property(_obj, "".concat(classPrefix, "-right-rtl"), rtl), _obj)),
             ref: rightRef
         }, right);
     };
@@ -160,7 +169,7 @@ export var NavBar = function(props) {
         }, renderLeft(), renderContent(), renderRight());
     };
     var _obj;
-    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-fixed"), fixed), _define_property(_obj, "".concat(classPrefix, "-title-align-").concat(titleAlign), true), _obj));
+    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-fixed"), fixed), _define_property(_obj, "".concat(classPrefix, "-safe-area-inset-top"), safeAreaInsetTop), _define_property(_obj, "".concat(classPrefix, "-align-").concat(titleAlign), true), _define_property(_obj, "".concat(classPrefix, "-rtl"), rtl), _obj));
     var cls = classNames(classPrefix, classes, className);
     return /*#__PURE__*/ React.createElement(React.Fragment, null, safeAreaInsetTop && /*#__PURE__*/ React.createElement(SafeArea, {
         position: "top"