@nutui/nutui-react-taro 3.0.0-beta.9 → 3.0.1

package/dist/cjs/packages/resultpage/style/style.harmony.css

@@ -0,0 +1,50 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-resultpage {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 auto;
+}
+.nut-resultpage-icon {
+  display: inline-flex;
+  margin-bottom: 12px;
+}
+.nut-resultpage-icon .nut-icon {
+  height: 36px;
+  width: 36px;
+}
+.nut-resultpage-title {
+  width: 240px;
+  margin-bottom: 12px;
+  font-size: 18px;
+  color: #1a1a1a;
+  font-weight: 600;
+  text-align: center;
+}
+.nut-resultpage-description {
+  width: 240px;
+  line-height: 20px;
+  font-size: 14px;
+  color: #505259;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+}
+.nut-resultpage-actions {
+  display: flex;
+  flex-direction: row;
+  margin-top: 16px;
+}
+.nut-resultpage-actions .nut-button-children {
+  white-space: nowrap;
+}
+.nut-resultpage-action {
+  margin-left: 6px;
+  margin-right: 6px;
+}

package/dist/cjs/packages/row/style/style.harmony.css

@@ -0,0 +1,54 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-row {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  overflow: hidden;
+}
+.nut-row:after {
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+  content: "";
+}
+.nut-row-flex {
+  display: flex;
+}
+.nut-row-flex:after {
+  display: none;
+}
+.nut-row-justify-center {
+  justify-content: center;
+}
+.nut-row-justify-end {
+  justify-content: flex-end;
+}
+.nut-row-justify-space-between {
+  justify-content: space-between;
+  align-items: center;
+}
+.nut-row-justify-space-around {
+  justify-content: space-around;
+}
+.nut-row-align-flex-start {
+  align-items: flex-start;
+}
+.nut-row-align-center {
+  align-items: center;
+}
+.nut-row-align-flex-end {
+  align-items: flex-end;
+}
+.nut-row-flex-wrap {
+  flex-wrap: wrap;
+}
+.nut-row-flex-nowrap {
+  flex-wrap: nowrap;
+}
+.nut-row-flex-reverse {
+  flex-wrap: wrap-reverse;
+}

package/dist/cjs/packages/safearea/style/style.harmony.css

@@ -0,0 +1,14 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-safe-area {
+  display: flex;
+  width: 100%;
+}
+.nut-safe-area-position-top {
+  padding-top: calc(env(safe-area-inset-top) * 1);
+}
+.nut-safe-area-position-bottom {
+  padding-bottom: calc(env(safe-area-inset-bottom) * 1);
+}

package/dist/cjs/packages/searchbar/searchbar.js

@@ -15,7 +15,7 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _components = require("@tarojs/components");
 var _iconsreacttaro = require("@nutui/icons-react-taro");
-var _configprovider = require("../configprovider/configprovider");
+var _index = require("../configprovider/index");
 var _typings = require("../../utils/typings");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     placeholder: '',
@@ -35,7 +35,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
 });
 var SearchBar = function SearchBar(props) {
     var classPrefix = 'nut-searchbar';
-    var locale = (0, _configprovider.useConfig)().locale;
+    var locale = (0, _index.useConfig)().locale;
     var searchRef = (0, _react.useRef)(null);
     var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), outerValue = _$_object_spread.value, style = _$_object_spread.style, placeholder = _$_object_spread.placeholder, shape = _$_object_spread.shape, className = _$_object_spread.className, disabled = _$_object_spread.disabled, maxLength = _$_object_spread.maxLength, clearable = _$_object_spread.clearable, readOnly = _$_object_spread.readOnly, autoFocus = _$_object_spread.autoFocus, backable = _$_object_spread.backable, right = _$_object_spread.right, left = _$_object_spread.left, leftIn = _$_object_spread.leftIn, rightIn = _$_object_spread.rightIn, onChange = _$_object_spread.onChange, onFocus = _$_object_spread.onFocus, onBlur = _$_object_spread.onBlur, onClear = _$_object_spread.onClear, onSearch = _$_object_spread.onSearch, onInputClick = _$_object_spread.onInputClick;
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(function() {
@@ -77,13 +77,10 @@ var SearchBar = function SearchBar(props) {
         return /*#__PURE__*/ _react.default.createElement(_components.Input, {
             className: "".concat(classPrefix, "-input ").concat(clearable ? "".concat(classPrefix, "-input-clear") : ''),
             ref: searchRef,
-            style: style,
             value: value || '',
             placeholder: placeholder || locale.placeholder,
             disabled: disabled || readOnly,
             maxlength: maxLength,
-            // @ts-ignore
-            // onKeyDown={onKeypress}
             onInput: onInput,
             onFocus: focus,
             onBlur: blur,

package/dist/cjs/packages/searchbar/style/style.css

@@ -7,8 +7,8 @@
   align-items: center;
   width: var(--nutui-searchbar-width, 100%);
   padding: var(--nutui-searchbar-padding, 6px 16px);
-  background: var(--nutui-searchbar-background, var(--nutui-gray-3));
-  color: var(--nutui-searchbar-color, var(--nutui-gray-7));
+  background: var(--nutui-searchbar-background, var(--nutui-color-background, #f2f3f5));
+  color: var(--nutui-searchbar-color, var(--nutui-color-title, #1a1a1a));
   font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
   box-sizing: border-box;
   justify-content: center;
@@ -20,7 +20,7 @@
   justify-content: center;
   padding: var(--nutui-searchbar-content-padding, 0 12px);
   height: var(--nutui-searchbar-input-height, 32px);
-  background: var(--nutui-searchbar-content-background, var(--nutui-gray-1));
+  background: var(--nutui-searchbar-content-background, var(--nutui-color-background-overlay, #ffffff));
   border-radius: var(--nutui-searchbar-content-border-radius, 4px);
 }
 .nut-searchbar-icon {
@@ -87,8 +87,8 @@
   width: 100%;
   padding: var(--nutui-searchbar-input-padding, 0 4px);
   font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-searchbar-input-text-color, var(--nutui-gray-7));
-  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-gray-7));
+  color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a));
+  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-title, #1a1a1a));
   background: transparent;
   text-align: var(--nutui-searchbar-input-text-align, left);
 }

package/dist/cjs/packages/searchbar/style/style.harmony.css

@@ -0,0 +1,269 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-searchbar {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 6px 16px;
+  background: #f2f3f5;
+  color: #1a1a1a;
+  font-size: 14px;
+  box-sizing: border-box;
+  justify-content: center;
+}
+.nut-searchbar-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 12px;
+  height: 32px;
+  background: #ffffff;
+  border-radius: 4px;
+}
+.nut-searchbar-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.nut-searchbar-clear {
+  width: 16px;
+  height: 16px;
+  color: rgba(0, 0, 0, 0.2);
+}
+.nut-searchbar-rightin {
+  width: 16px;
+  height: 16px;
+  color: rgba(0, 0, 0, 0.2);
+}
+.nut-searchbar-left, .nut-searchbar-right {
+  display: inline-flex;
+  align-items: center;
+}
+.nut-searchbar-left.nut-icon, .nut-searchbar-right.nut-icon {
+  width: 20px;
+  height: 20px;
+}
+.nut-searchbar-left {
+  margin-right: 16px;
+}
+.nut-searchbar-left > div {
+  margin-right: 16px;
+}
+.nut-searchbar-left > span {
+  margin-right: 16px;
+}
+.nut-searchbar-left > i {
+  margin-right: 16px;
+}
+.nut-searchbar-left > svg {
+  margin-right: 16px;
+}
+.nut-searchbar-left .nut-icon {
+  margin-right: 16px;
+}
+.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > i:last-child, .nut-searchbar-left > svg:last-child,
+.nut-searchbar-left .nut-icon:last-child {
+  margin-right: 0;
+}
+.nut-searchbar-right {
+  margin-left: 16px;
+}
+.nut-searchbar-right > div {
+  margin-left: 16px;
+}
+.nut-searchbar-right > span {
+  margin-left: 16px;
+}
+.nut-searchbar-right > i {
+  margin-left: 16px;
+}
+.nut-searchbar-right > svg {
+  margin-left: 16px;
+}
+.nut-searchbar-right .nut-icon {
+  margin-left: 16px;
+}
+.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > i:first-child, .nut-searchbar-right > svg:first-child,
+.nut-searchbar-right .nut-icon:first-child {
+  margin-left: 0;
+}
+.nut-searchbar-left > text {
+  margin-right: 16px;
+}
+.nut-searchbar-left > view {
+  margin-right: 16px;
+}
+.nut-searchbar-left > text:last-child, .nut-searchbar-left > view:last-child {
+  margin-right: 0;
+}
+.nut-searchbar-right > text {
+  margin-left: 16px;
+}
+.nut-searchbar-right > view {
+  margin-left: 16px;
+}
+.nut-searchbar-right > text:first-child, .nut-searchbar-right > view:first-child {
+  margin-left: 0;
+}
+.nut-searchbar-input-box, .nut-searchbar-input {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+.nut-searchbar-input {
+  border: 0;
+  outline: 0;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 4px;
+  font-size: 14px;
+  color: #1a1a1a;
+  caret-color: #1a1a1a;
+  background: transparent;
+  text-align: left;
+}
+.nut-searchbar-round {
+  border-radius: 18px;
+}
+.nut-searchbar-disabled {
+  cursor: not-allowed;
+}
+
+[dir=rtl] .nut-searchbar-left {
+  margin-right: 0;
+  margin-left: 16px;
+}
+
+.nut-rtl .nut-searchbar-left {
+  margin-right: 0;
+  margin-left: 16px;
+}
+[dir=rtl] .nut-searchbar-left > div {
+  margin-right: 0;
+  margin-left: 16px;
+}
+[dir=rtl] .nut-searchbar-left > span {
+  margin-right: 0;
+  margin-left: 16px;
+}
+[dir=rtl] .nut-searchbar-left > svg {
+  margin-right: 0;
+  margin-left: 16px;
+}
+.nut-rtl .nut-searchbar-left > div {
+  margin-right: 0;
+  margin-left: 16px;
+}
+.nut-rtl .nut-searchbar-left > span {
+  margin-right: 0;
+  margin-left: 16px;
+}
+.nut-rtl .nut-searchbar-left > svg {
+  margin-right: 0;
+  margin-left: 16px;
+}
+[dir=rtl] .nut-searchbar-left > div.nut-icon, [dir=rtl] .nut-searchbar-left > span.nut-icon, [dir=rtl] .nut-searchbar-left > svg.nut-icon,
+.nut-rtl .nut-searchbar-left > div.nut-icon,
+.nut-rtl .nut-searchbar-left > span.nut-icon,
+.nut-rtl .nut-searchbar-left > svg.nut-icon {
+  transform: rotate(180deg);
+}
+[dir=rtl] .nut-searchbar-left > div:last-child, [dir=rtl] .nut-searchbar-left > span:last-child, [dir=rtl] .nut-searchbar-left > svg:last-child,
+.nut-rtl .nut-searchbar-left > div:last-child,
+.nut-rtl .nut-searchbar-left > span:last-child,
+.nut-rtl .nut-searchbar-left > svg:last-child {
+  margin-right: 0;
+  margin-left: 0;
+}
+[dir=rtl] .nut-searchbar-right {
+  margin-left: 0;
+  margin-right: 16px;
+}
+.nut-rtl .nut-searchbar-right {
+  margin-left: 0;
+  margin-right: 16px;
+}
+[dir=rtl] .nut-searchbar-right > div {
+  margin-left: 0;
+  margin-right: 16px;
+}
+[dir=rtl] .nut-searchbar-right > span {
+  margin-left: 0;
+  margin-right: 16px;
+}
+[dir=rtl] .nut-searchbar-right > svg {
+  margin-left: 0;
+  margin-right: 16px;
+}
+.nut-rtl .nut-searchbar-right > div {
+  margin-left: 0;
+  margin-right: 16px;
+}
+.nut-rtl .nut-searchbar-right > span {
+  margin-left: 0;
+  margin-right: 16px;
+}
+.nut-rtl .nut-searchbar-right > svg {
+  margin-left: 0;
+  margin-right: 16px;
+}
+[dir=rtl] .nut-searchbar-right > div:first-child, [dir=rtl] .nut-searchbar-right > span:first-child, [dir=rtl] .nut-searchbar-right > svg:first-child,
+.nut-rtl .nut-searchbar-right > div:first-child,
+.nut-rtl .nut-searchbar-right > span:first-child,
+.nut-rtl .nut-searchbar-right > svg:first-child {
+  margin-left: 0;
+  margin-right: 0;
+}
+[dir=rtl] .nut-searchbar-left > text {
+  margin-right: 0;
+  margin-left: 16px;
+}
+[dir=rtl] .nut-searchbar-left > view {
+  margin-right: 0;
+  margin-left: 16px;
+}
+.nut-rtl .nut-searchbar-left > text {
+  margin-right: 0;
+  margin-left: 16px;
+}
+.nut-rtl .nut-searchbar-left > view {
+  margin-right: 0;
+  margin-left: 16px;
+}
+[dir=rtl] .nut-searchbar-left > text:last-child, [dir=rtl] .nut-searchbar-left > view:last-child,
+.nut-rtl .nut-searchbar-left > text:last-child,
+.nut-rtl .nut-searchbar-left > view:last-child {
+  margin-right: 0;
+  margin-left: 0;
+}
+[dir=rtl] .nut-searchbar-right > text {
+  margin-left: 0;
+  margin-right: 16px;
+}
+[dir=rtl] .nut-searchbar-right > view {
+  margin-left: 0;
+  margin-right: 16px;
+}
+.nut-rtl .nut-searchbar-right > text {
+  margin-left: 0;
+  margin-right: 16px;
+}
+.nut-rtl .nut-searchbar-right > view {
+  margin-left: 0;
+  margin-right: 16px;
+}
+[dir=rtl] .nut-searchbar-right > text:first-child, [dir=rtl] .nut-searchbar-right > view:first-child,
+.nut-rtl .nut-searchbar-right > text:first-child,
+.nut-rtl .nut-searchbar-right > view:first-child {
+  margin-left: 0;
+  margin-right: 0;
+}
+[dir=rtl] .nut-searchbar-input {
+  text-align: right;
+}
+.nut-rtl .nut-searchbar-input {
+  text-align: right;
+}

package/dist/cjs/packages/segmented/segmented.js

@@ -16,7 +16,7 @@ var _type_of = require("@swc/helpers/_/_type_of");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
-var _usepropsvalue = require("../../utils/use-props-value");
+var _usepropsvalue = require("../../hooks/use-props-value");
 var _mergeprops = require("../../utils/merge-props");
 var defaultProps = {
     options: [],

package/dist/cjs/packages/segmented/style/style.css

@@ -9,7 +9,7 @@
   padding: var(--nutui-segmented-padding, var(--nutui-spacing-xxxs, 2px));
   align-items: center;
   border-radius: var(--nutui-segmented-radius, var(--nutui-radius-xs, 4px));
-  background: var(--nutui-black-7);
+  background: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4));
   box-sizing: border-box;
 }
 
@@ -27,7 +27,7 @@
 }
 
 .nut-segmented-item-active {
-  background: var(--nutui-segmented-active-background, var(--nutui-black-7));
+  background: var(--nutui-segmented-active-background, var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4)));
 }
 
 .nut-segmented-icon {

package/dist/cjs/packages/segmented/style/style.harmony.css

@@ -0,0 +1,42 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-segmented {
+  display: inline-flex;
+  height: 24px;
+  min-width: 24px;
+  padding: 2px;
+  align-items: center;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.4);
+  box-sizing: border-box;
+}
+
+.nut-segmented-item {
+  display: flex;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+  border-radius: 4px;
+  color: #ffffff;
+  font-size: 12px;
+  line-height: 1;
+  box-sizing: border-box;
+}
+
+.nut-segmented-item-active {
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.nut-segmented-icon {
+  height: 10px;
+  width: 10px;
+  margin-right: 2px;
+}
+.nut-segmented-icon .nut-icon {
+  height: 10px;
+  width: 10px;
+  font-size: 10px;
+}

package/dist/cjs/packages/shortpassword/shortpassword.d.ts

@@ -1,5 +1,5 @@
 import React, { ForwardRefRenderFunction, ReactNode } from 'react';
-import { PopupProps } from "../popup/popup";
+import { PopupProps } from "../popup/index";
 export interface ShortPasswordProps extends PopupProps {
     value: string;
     visible: boolean;

package/dist/cjs/packages/shortpassword/shortpassword.js

@@ -30,7 +30,7 @@ var _components = require("@tarojs/components");
 var _index = /*#__PURE__*/ _interop_require_default._(require("../popup/index"));
 var _index1 = require("../configprovider/index");
 var _typings = require("../../utils/typings");
-var _usepropsvalue = require("../../utils/use-props-value");
+var _usepropsvalue = require("../../hooks/use-props-value");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     value: '',
     visible: false,
@@ -41,7 +41,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
 });
 var InternalShortPassword = function InternalShortPassword(props, ref) {
     var locale = (0, _index1.useConfig)().locale;
-    var _ref = (0, _object_spread._)({}, defaultProps, props), title = _ref.title, description = _ref.description, tips = _ref.tips, outerVisible = _ref.visible, value = _ref.value, error = _ref.error, hideFooter = _ref.hideFooter, length = _ref.length, plain = _ref.plain, style = _ref.style, className = _ref.className, closeable = _ref.closeable, autoFocus = _ref.autoFocus, onFocus = _ref.onFocus, onChange = _ref.onChange, onConfirm = _ref.onConfirm, onTips = _ref.onTips, onCancel = _ref.onCancel, onClose = _ref.onClose, onComplete = _ref.onComplete, onOverlayClick = _ref.onOverlayClick, onCloseIconClick = _ref.onCloseIconClick, rest = (0, _object_without_properties._)(_ref, [
+    var _ref = (0, _object_spread._)({}, defaultProps, props), title = _ref.title, description = _ref.description, tips = _ref.tips, outerVisible = _ref.visible, value = _ref.value, error = _ref.error, hideFooter = _ref.hideFooter, length = _ref.length, plain = _ref.plain, style = _ref.style, className = _ref.className, closeable = _ref.closeable, autoFocus = _ref.autoFocus, round = _ref.round, onFocus = _ref.onFocus, onChange = _ref.onChange, onConfirm = _ref.onConfirm, onTips = _ref.onTips, onCancel = _ref.onCancel, onClose = _ref.onClose, onComplete = _ref.onComplete, onOverlayClick = _ref.onOverlayClick, onCloseIconClick = _ref.onCloseIconClick, rest = (0, _object_without_properties._)(_ref, [
         "title",
         "description",
         "tips",
@@ -55,6 +55,7 @@ var InternalShortPassword = function InternalShortPassword(props, ref) {
         "className",
         "closeable",
         "autoFocus",
+        "round",
         "onFocus",
         "onChange",
         "onConfirm",
@@ -118,15 +119,12 @@ var InternalShortPassword = function InternalShortPassword(props, ref) {
         onConfirm && onConfirm(inputValue);
     };
     return /*#__PURE__*/ _react.default.createElement(_index.default, (0, _object_spread._)({
-        style: {
-            padding: '32px 24px 28px 24px',
-            borderRadius: '12px',
-            textAlign: 'center'
-        },
+        className: "".concat(classPrefix, "-popup"),
         visible: visible,
         closeable: true,
         onOverlayClick: onClose,
-        onCloseIconClick: onClose
+        onCloseIconClick: onClose,
+        round: round
     }, rest), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: (0, _classnames.default)(classPrefix, className),
         style: style

package/dist/cjs/packages/shortpassword/style/shortpassword.scss

@@ -1,11 +1,21 @@
 .nut-shortpassword {
+  &-popup {
+    padding: 32px 24px 28px 24px;
+    border-radius: 12px;
+    text-align: center;
+  }
+
   &-title {
+    display: flex;
+    justify-content: center;
     line-height: 1;
     font-size: $font-size-l;
     color: $color-title;
   }
 
   &-description {
+    display: flex;
+    justify-content: center;
     margin-top: 12px;
     margin-bottom: 24px;
     line-height: 1;