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

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

@@ -0,0 +1,271 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-range-container {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  width: 100%;
+  height: 4px;
+  align-items: center;
+  justify-content: space-between;
+}
+.nut-range-container-native {
+  height: auto;
+}
+
+.nut-range {
+  display: block;
+  position: relative;
+  height: 4px;
+  margin: 0 15px;
+  background-color: #ffebf1;
+  border-radius: 2px;
+  flex: 1;
+  cursor: pointer;
+}
+.nut-range::before {
+  position: absolute;
+  inset-block: -8px;
+  inset-inline: 0;
+  content: "";
+}
+.nut-range-min {
+  font-size: 12px;
+  color: #1a1a1a;
+  user-select: none;
+}
+.nut-range-max {
+  font-size: 12px;
+  color: #1a1a1a;
+  user-select: none;
+}
+.nut-range-bar {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  background: #ff0f23;
+  border-radius: 2px;
+  transition: all 0.2s;
+}
+.nut-range-button {
+  position: absolute;
+  display: flex;
+  width: 24px;
+  height: 24px;
+  background: #ffffff;
+  border-radius: 50%;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
+  border: 1px solid #ff0f23;
+  outline: none;
+  align-items: center;
+  top: 50%;
+  left: 50%;
+}
+.nut-range-button-wrapper {
+  width: 24px;
+  height: 24px;
+}
+.nut-range-button-wrapper-right {
+  width: 24px;
+  height: 24px;
+}
+.nut-range-button-wrapper-left {
+  width: 24px;
+  height: 24px;
+}
+.nut-range-button-wrapper, .nut-range-button-wrapper-right {
+  touch-action: none;
+  position: absolute;
+  top: 50%;
+  left: 100%;
+  cursor: grab;
+  outline: none;
+}
+.nut-range-button-wrapper-left {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  cursor: grab;
+  outline: none;
+  touch-action: none;
+}
+.nut-range-button-number {
+  position: relative;
+  width: 200%;
+  height: 24px;
+  line-height: 14px;
+  padding: 5px 0;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  font-size: 12px;
+  color: #1a1a1a;
+  text-align: center;
+  vertical-align: center;
+  box-sizing: border-box;
+}
+.nut-range-disabled {
+  cursor: not-allowed;
+  opacity: 0.54;
+}
+.nut-range-disabled .nut-range-button-wrapper,
+.nut-range-disabled .nut-range-button-wrapper-left,
+.nut-range-disabled .nut-range-button-wrapper-right {
+  cursor: not-allowed;
+}
+.nut-range-mark {
+  position: absolute;
+  width: 100%;
+  height: 14px;
+  overflow: visible;
+  top: 50%;
+}
+.nut-range-mark-text-wrapper {
+  position: absolute;
+  height: 100%;
+  top: 14px;
+  display: inline-block;
+  transform: translateX(-10px);
+}
+.nut-range-mark-text {
+  position: absolute;
+  line-height: 16px;
+  font-size: 12px;
+  color: #999;
+  text-align: center;
+  word-break: keep-all;
+  user-select: none;
+}
+.nut-range-tick {
+  position: absolute;
+  top: -20px;
+  width: 11px;
+  height: 11px;
+  left: 0px;
+  border-radius: 6px;
+  background: #ffebf1;
+}
+.nut-range-tick-active {
+  background: #ff0f23;
+}
+
+.nut-range-vertical-container {
+  height: 100%;
+  flex-direction: column;
+  padding: 0px 15px;
+}
+
+.nut-range-vertical {
+  width: 4px;
+  margin: 15px 0px;
+}
+.nut-range-vertical-button-wrapper, .nut-range-vertical-button-wrapper-right {
+  position: absolute;
+  top: initial;
+  top: 100%;
+  left: 50%;
+  right: initial;
+}
+.nut-range-vertical-button-wrapper-left {
+  top: 0px;
+  left: 50%;
+  right: initial;
+}
+.nut-range-vertical-button-number {
+  left: 0px;
+  top: 50%;
+}
+.nut-range-vertical-mark {
+  position: absolute;
+  width: 36px;
+  height: 100%;
+  top: initial;
+  right: 50%;
+  overflow: visible;
+  font-size: 12px;
+  padding: 0px;
+}
+.nut-range-vertical-mark-hm {
+  left: -34px;
+}
+.nut-range-vertical-mark-text-wrapper {
+  height: 16px;
+  position: absolute;
+  display: inline-block;
+  user-select: none;
+  transform: translateY(-11px);
+}
+.nut-range-vertical-mark-text {
+  height: 100%;
+  line-height: 16px;
+  color: #999;
+  text-align: center;
+  word-break: keep-all;
+}
+.nut-range-vertical-tick {
+  position: absolute;
+  top: 2px;
+  left: 31px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background: #ffebf1;
+}
+.nut-range-vertical-tick-active {
+  background: #ff0f23;
+}
+
+[dir=rtl] .nut-range-button-wrapper, [dir=rtl] .nut-range-button-wrapper-right,
+.rtl-nut-range-button-wrapper,
+.rtl-nut-range-button-wrapper-right {
+  left: 0;
+  right: initial;
+}
+[dir=rtl] .nut-range-button-wrapper-left,
+.rtl-nut-range-button-wrapper-left {
+  right: 0;
+  left: initial;
+}
+[dir=rtl] .nut-range-tick,
+.rtl-nut-range-tick {
+  right: 0px;
+  left: initial;
+}
+[dir=rtl] .nut-range-mark-text,
+.rtl-nut-range-mark-text {
+  transform: translateX(10px);
+}
+[dir=rtl] .nut-range-vertical-button-wrapper, [dir=rtl] .nut-range-vertical-button-wrapper-right,
+.rtl-nut-range-vertical-button-wrapper,
+.rtl-nut-range-vertical-button-wrapper-right {
+  right: 50%;
+  left: initial;
+}
+[dir=rtl] .nut-range-vertical-button-wrapper-left,
+.rtl-nut-range-vertical-button-wrapper-left {
+  right: 50%;
+  left: initial;
+}
+[dir=rtl] .nut-range-vertical-mark,
+.rtl-nut-range-vertical-mark {
+  right: auto;
+  left: 50%;
+}
+[dir=rtl] .nut-range-vertical-tick,
+.rtl-nut-range-vertical-tick {
+  left: auto;
+  right: 30px;
+  margin-left: 0;
+  margin-right: 0px;
+}
+[dir=rtl] .nut-range-vertical-mark-text-wrapper,
+.rtl-nut-range-vertical-mark-text-wrapper {
+  transform: translateY(-11px);
+}

package/dist/cjs/packages/rate/rate.js

@@ -20,9 +20,9 @@ var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _taro = require("@tarojs/taro");
 var _components = require("@tarojs/components");
 var _typings = require("../../utils/typings");
-var _usepropsvalue = require("../../utils/use-props-value");
+var _usepropsvalue = require("../../hooks/use-props-value");
 var _getrectbytaro = require("../../utils/get-rect-by-taro");
-var _userefs = /*#__PURE__*/ _interop_require_default._(require("../../utils/use-refs"));
+var _userefs = /*#__PURE__*/ _interop_require_default._(require("../../hooks/use-refs"));
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     size: 'normal',
     showScore: false,

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

@@ -59,10 +59,10 @@
   cursor: pointer;
 }
 .nut-rate-item-icon .nut-icon {
-  color: var(--nutui-rate-icon-color, var(--nutui-red-6));
+  color: var(--nutui-rate-icon-color, var(--nutui-color-primary-icon, #ff3333));
 }
 .nut-rate-item-icon-disabled .nut-icon {
-  color: var(--nutui-rate-icon-inactive-color, var(--nutui-gray-8));
+  color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0));
 }
 .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half {
   position: absolute;
@@ -79,7 +79,7 @@
 .nut-rate-score {
   display: inline-flex;
   align-items: center;
-  color: var(--nutui-rate-font-color, var(--nutui-red-6));
+  color: var(--nutui-rate-font-color, var(--nutui-color-primary-icon, #ff3333));
   font-family: "JD";
   line-height: 1;
 }
@@ -96,7 +96,7 @@
   padding-left: calc(var(--nutui-rate-item-margin, 4px) / 2);
 }
 .nut-rate-score-disabled {
-  color: var(--nutui-rate-icon-inactive-color, var(--nutui-gray-8));
+  color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0));
 }
 
 [dir=rtl] .nut-rate-item,

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

@@ -0,0 +1,168 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-rate {
+  display: flex;
+  touch-action: pan-x;
+}
+.nut-rate.disabled .nut-rate-item-icon {
+  cursor: not-allowed;
+}
+.nut-rate.readonly .nut-rate-item-icon {
+  cursor: default;
+}
+.nut-rate-item {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  position: relative;
+}
+.nut-rate-item-half {
+  position: absolute;
+  height: 100%;
+  width: 50% !important;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+.nut-rate-item-half .nut-icon {
+  flex-shrink: 0;
+}
+.nut-rate-item-normal {
+  margin-left: 4px;
+}
+.nut-rate-item-normal .nut-icon {
+  height: 12px;
+  width: 12px;
+}
+.nut-rate-item-large {
+  margin-left: calc(4px * 2);
+}
+.nut-rate-item-large .nut-icon {
+  height: calc(12px + 8px);
+  width: calc(12px + 8px);
+}
+.nut-rate-item-small {
+  margin-left: calc(4px / 2);
+}
+.nut-rate-item-small .nut-icon {
+  height: calc(12px - 4px);
+  width: calc(12px - 4px);
+}
+.nut-rate-item-normal:first-child, .nut-rate-item-large:first-child, .nut-rate-item-small:first-child {
+  margin-left: 0;
+}
+.nut-rate-item-icon {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.nut-rate-item-icon .nut-icon {
+  color: #ff3333;
+}
+.nut-rate-item-icon-disabled .nut-icon {
+  color: #dadce0;
+}
+.nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half {
+  position: absolute;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+.nut-rate-item-icon.nut-rate-item-icon::before {
+  position: relative;
+  top: auto;
+  left: auto;
+  transform: none;
+}
+.nut-rate-score {
+  display: inline-flex;
+  align-items: center;
+  color: #ff3333;
+  font-family: "JD";
+  line-height: 1;
+}
+.nut-rate-score-normal {
+  padding-left: 4px;
+  font-size: 12px;
+}
+.nut-rate-score-large {
+  font-size: calc(12px + 6px);
+  padding-left: calc(4px * 2);
+}
+.nut-rate-score-small {
+  font-size: calc(12px - 2px);
+  padding-left: calc(4px / 2);
+}
+.nut-rate-score-disabled {
+  color: #dadce0;
+}
+
+[dir=rtl] .nut-rate-item,
+.nut-rtl .nut-rate-item {
+  margin-left: 0;
+}
+[dir=rtl] .nut-rate-item:first-child,
+.nut-rtl .nut-rate-item:first-child {
+  margin-right: 0;
+}
+[dir=rtl] .nut-rate-item-normal {
+  margin-right: 4px;
+}
+.nut-rtl .nut-rate-item-normal {
+  margin-right: 4px;
+}
+[dir=rtl] .nut-rate-item-large {
+  margin-right: calc(4px * 2);
+}
+.nut-rtl .nut-rate-item-large {
+  margin-right: calc(4px * 2);
+}
+[dir=rtl] .nut-rate-item-small {
+  margin-right: calc(4px - 2px);
+}
+.nut-rtl .nut-rate-item-small {
+  margin-right: calc(4px - 2px);
+}
+[dir=rtl] .nut-rate-item:last-child,
+.nut-rtl .nut-rate-item:last-child {
+  margin-left: 0;
+}
+[dir=rtl] .nut-rate-item-half,
+.nut-rtl .nut-rate-item-half {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half,
+.nut-rtl .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-rate-item-icon.nut-rate-item-icon::before,
+.nut-rtl .nut-rate-item-icon.nut-rate-item-icon::before {
+  left: auto;
+  right: auto;
+}
+[dir=rtl] .nut-rate-score,
+.nut-rtl .nut-rate-score {
+  padding-left: 0;
+}
+[dir=rtl] .nut-rate-score-large {
+  padding-right: calc(4px * 2);
+}
+.nut-rtl .nut-rate-score-large {
+  padding-right: calc(4px * 2);
+}
+[dir=rtl] .nut-rate-score-normal {
+  padding-right: 4px;
+}
+.nut-rtl .nut-rate-score-normal {
+  padding-right: 4px;
+}
+[dir=rtl] .nut-rate-score-small {
+  padding-right: calc(4px - 2px);
+}
+.nut-rtl .nut-rate-score-small {
+  padding-right: calc(4px - 2px);
+}

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

@@ -35,6 +35,9 @@
     display: flex;
     flex-direction: row;
     margin-top: $resultpage-actions-margin-top;
+    .nut-button-children {
+      white-space: nowrap;
+    }
   }
   &-action {
     margin-left: 6px;

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

@@ -21,7 +21,7 @@
   width: var(--nutui-resultpage-width, 240px);
   margin-bottom: var(--nutui-resultpage-title-margin-bottom, 12px);
   font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, 18px));
-  color: var(--nutui-resultpage-title-color, var(--nutui-gray-7));
+  color: var(--nutui-resultpage-title-color, var(--nutui-color-title, #1a1a1a));
   font-weight: var(--nutui-font-weight-bold, 600);
   text-align: center;
 }
@@ -29,7 +29,7 @@
   width: var(--nutui-resultpage-width, 240px);
   line-height: var(--nutui-resultpage-description-line-height, 20px);
   font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-resultpage-description-color, var(--nutui-gray-6));
+  color: var(--nutui-resultpage-description-color, var(--nutui-color-text, #505259));
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
@@ -41,6 +41,9 @@
   flex-direction: row;
   margin-top: var(--nutui-resultpage-actions-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/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);
 }