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

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

@@ -8,15 +8,45 @@
   &-symbol,
   &-integer,
   &-decimal {
-    color: $color-primary;
+    color: $price-color;
+    font-family: 'JD';
+    line-height: 1;
+  }
+
+  &-darkgray {
+    .nut-price {
+      &-symbol,
+      &-integer,
+      &-decimal {
+        font-family: 'JD-Bold';
+        color: $price-darkgray-color;
+      }
+    }
+  }
+
+  &-primary {
+    .nut-price {
+      &-symbol,
+      &-integer,
+      &-decimal {
+        font-family: 'JD-Bold';
+        color: $price-primary-color;
+      }
+    }
   }
 
   &-symbol {
-    font-size: $price-symbol-medium-size;
     padding-right: $price-symbol-padding-right;
+    &-xlarge {
+      font-size: $price-symbol-xlarge-size;
+    }
 
     &-large {
-      font-size: $price-symbol-big-size;
+      font-size: $price-symbol-large-size;
+    }
+
+    &-normal {
+      font-size: $price-symbol-normal-size;
     }
 
     &-small {
@@ -30,10 +60,16 @@
   }
 
   &-integer {
-    font-size: $price-integer-medium-size;
+    &-xlarge {
+      font-size: $price-integer-xlarge-size;
+    }
 
     &-large {
-      font-size: $price-integer-big-size;
+      font-size: $price-integer-large-size;
+    }
+
+    &-normal {
+      font-size: $price-integer-normal-size;
     }
 
     &-small {
@@ -42,10 +78,16 @@
   }
 
   &-decimal {
-    font-size: $price-decimal-medium-size;
+    &-xlarge {
+      font-size: $price-decimal-xlarge-size;
+    }
 
     &-large {
-      font-size: $price-decimal-big-size;
+      font-size: $price-decimal-large-size;
+    }
+
+    &-normal {
+      font-size: $price-decimal-normal-size;
     }
 
     &-small {
@@ -55,7 +97,5 @@
 
   &-line {
     text-decoration: line-through $price-line-color;
-    font-size: $price-line-font-size;
-    color: $price-line-color;
   }
 }

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-price {
   direction: ltr;
   font-size: var(--nutui-font-size-l, 16px);
@@ -6,42 +10,61 @@
   align-items: baseline;
 }
 .nut-price-symbol, .nut-price-integer, .nut-price-decimal {
-  color: var(--nutui-color-primary, #ff0f23);
+  color: var(--nutui-price-color, var(--nutui-color-text-help));
+  font-family: "JD";
+  line-height: 1;
+}
+.nut-price-darkgray .nut-price-symbol, .nut-price-darkgray .nut-price-integer, .nut-price-darkgray .nut-price-decimal {
+  font-family: "JD-Bold";
+  color: var(--nutui-price-darkgray-color, var(--nutui-gray-7));
+}
+.nut-price-primary .nut-price-symbol, .nut-price-primary .nut-price-integer, .nut-price-primary .nut-price-decimal {
+  font-family: "JD-Bold";
+  color: var(--nutui-price-color, var(--nutui-brand-6));
 }
 .nut-price-symbol {
-  font-size: var(--nutui-price-symbol-medium-size, 14px);
-  padding-right: var(--nutui-price-symbol-padding-right, 1px);
+  padding-right: var(--nutui-price-symbol-padding-right, 0px);
+}
+.nut-price-symbol-xlarge {
+  font-size: var(--nutui-price-symbol-xlarge-size, 12px);
 }
 .nut-price-symbol-large {
-  font-size: var(--nutui-price-symbol-big-size, 18px);
+  font-size: var(--nutui-price-symbol-large-size, 12px);
+}
+.nut-price-symbol-normal {
+  font-size: var(--nutui-price-symbol-normal-size, 12px);
 }
 .nut-price-symbol-small {
-  font-size: var(--nutui-price-symbol-small-size, 10px);
+  font-size: var(--nutui-price-symbol-small-size, 12px);
 }
 .nut-price-symbol-rtl {
   padding-right: 0;
-  padding-left: var(--nutui-price-symbol-padding-right, 1px);
+  padding-left: var(--nutui-price-symbol-padding-right, 0px);
 }
-.nut-price-integer {
-  font-size: var(--nutui-price-integer-medium-size, 16px);
+.nut-price-integer-xlarge {
+  font-size: var(--nutui-price-integer-xlarge-size, 24px);
 }
 .nut-price-integer-large {
-  font-size: var(--nutui-price-integer-big-size, 24px);
+  font-size: var(--nutui-price-integer-large-size, 18px);
+}
+.nut-price-integer-normal {
+  font-size: var(--nutui-price-integer-normal-size, 16px);
 }
 .nut-price-integer-small {
   font-size: var(--nutui-price-integer-small-size, 12px);
 }
-.nut-price-decimal {
-  font-size: var(--nutui-price-decimal-medium-size, 14px);
+.nut-price-decimal-xlarge {
+  font-size: var(--nutui-price-decimal-xlarge-size, 12px);
 }
 .nut-price-decimal-large {
-  font-size: var(--nutui-price-decimal-big-size, 18px);
+  font-size: var(--nutui-price-decimal-large-size, 12px);
+}
+.nut-price-decimal-normal {
+  font-size: var(--nutui-price-decimal-normal-size, 12px);
 }
 .nut-price-decimal-small {
-  font-size: var(--nutui-price-decimal-small-size, 10px);
+  font-size: var(--nutui-price-decimal-small-size, 12px);
 }
 .nut-price-line {
-  text-decoration: line-through var(--nutui-price-line-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  font-size: var(--nutui-price-line-font-size, 12px);
-  color: var(--nutui-price-line-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  text-decoration: line-through var(--nutui-price-line-color, var(--nutui-color-text-help));
 }

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-price {
   direction: ltr;
   font-size: 16px;
@@ -6,48 +10,87 @@
   align-items: baseline;
 }
 .nut-price-symbol {
-  color: #ff0f23;
+  color: #888b94;
+  font-family: "JD";
+  line-height: 1;
 }
 .nut-price-integer {
-  color: #ff0f23;
+  color: #888b94;
+  font-family: "JD";
+  line-height: 1;
 }
 .nut-price-decimal {
+  color: #888b94;
+  font-family: "JD";
+  line-height: 1;
+}
+.nut-price-darkgray .nut-price-symbol {
+  font-family: "JD-Bold";
+  color: #1a1a1a;
+}
+.nut-price-darkgray .nut-price-integer {
+  font-family: "JD-Bold";
+  color: #1a1a1a;
+}
+.nut-price-darkgray .nut-price-decimal {
+  font-family: "JD-Bold";
+  color: #1a1a1a;
+}
+.nut-price-primary .nut-price-symbol {
+  font-family: "JD-Bold";
+  color: #ff0f23;
+}
+.nut-price-primary .nut-price-integer {
+  font-family: "JD-Bold";
+  color: #ff0f23;
+}
+.nut-price-primary .nut-price-decimal {
+  font-family: "JD-Bold";
   color: #ff0f23;
 }
 .nut-price-symbol {
-  font-size: 14px;
-  padding-right: 1px;
+  padding-right: 0px;
+}
+.nut-price-symbol-xlarge {
+  font-size: 12px;
 }
 .nut-price-symbol-large {
-  font-size: 18px;
+  font-size: 12px;
+}
+.nut-price-symbol-normal {
+  font-size: 12px;
 }
 .nut-price-symbol-small {
-  font-size: 10px;
+  font-size: 12px;
 }
 .nut-price-symbol-rtl {
   padding-right: 0;
-  padding-left: 1px;
+  padding-left: 0px;
 }
-.nut-price-integer {
-  font-size: 16px;
+.nut-price-integer-xlarge {
+  font-size: 24px;
 }
 .nut-price-integer-large {
-  font-size: 24px;
+  font-size: 18px;
+}
+.nut-price-integer-normal {
+  font-size: 16px;
 }
 .nut-price-integer-small {
   font-size: 12px;
 }
-.nut-price-decimal {
-  font-size: 14px;
+.nut-price-decimal-xlarge {
+  font-size: 12px;
 }
 .nut-price-decimal-large {
-  font-size: 18px;
+  font-size: 12px;
+}
+.nut-price-decimal-normal {
+  font-size: 12px;
 }
 .nut-price-decimal-small {
-  font-size: 10px;
+  font-size: 12px;
 }
 .nut-price-line {
-  text-decoration: line-through rgba(0, 0, 0, 0.06);
-  font-size: 12px;
-  color: rgba(0, 0, 0, 0.06);
+  text-decoration: line-through #888b94;
 }

package/dist/cjs/packages/price/types.d.ts

@@ -0,0 +1,13 @@
+import { BasicComponent } from "../../utils/typings";
+export type PriceSize = 'xlarge' | 'large' | 'normal' | 'small';
+export type PriceColor = 'primary' | 'gray' | 'darkgray';
+export interface PriceProps extends BasicComponent {
+    color: PriceColor;
+    price: number | string;
+    symbol: string;
+    digits: number;
+    thousands: boolean;
+    position: string;
+    size: PriceSize;
+    line: boolean;
+}

package/dist/cjs/packages/price/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/cjs/packages/progress/progress.js

@@ -56,7 +56,7 @@ var Progress = function Progress(props) {
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(percent), 2), displayPercent = _useState[0], setDispalyPercent = _useState[1];
     var stylesInner = {
         width: "".concat(displayPercent, "%"),
-        backgroundColor: color || '#FF0F23'
+        background: color || '#FF0F23'
     };
     if (strokeWidth) {
         stylesOuter.height = (0, _pxtransform.default)(Number(strokeWidth));
@@ -149,11 +149,10 @@ var Progress = function Progress(props) {
         }
     }, []);
     var getTextStyle = function getTextStyle() {
-        var value = (0, _platformtaro.harmony)() ? '93%' : '99%';
         return rtl ? {
-            right: value
+            right: '100%'
         } : {
-            left: value
+            left: '100%'
         };
     };
     var computeRight = function computeRight() {

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

@@ -29,7 +29,7 @@
     justify-content: center;
     transition: all 0.4s;
     border-radius: $progress-border-radius;
-    background-color: $progress-color;
+    background: $progress-color;
   }
 
   &-text {
@@ -39,7 +39,7 @@
     top: $progress-text-position-top;
     bottom: $progress-text-position-bottom;
     transition: all 0.4s;
-    // transform: translate(-50%);
+    transform: translate(-50%);
 
     &-inner {
       display: flex;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-progress {
   display: flex;
   align-items: center;
@@ -8,7 +12,7 @@
   flex: auto;
   border-radius: var(--nutui-progress-border-radius, 12px);
   height: var(--nutui-progress-height, 10px);
-  background: var(--nutui-progress-background, var(--nutui-color-background, #f5f6fa));
+  background: var(--nutui-progress-background, var(--nutui-gray-3));
 }
 .nut-progress-outer .nut-progress-active:before {
   content: "";
@@ -27,7 +31,7 @@
   justify-content: center;
   transition: all 0.4s;
   border-radius: var(--nutui-progress-border-radius, 12px);
-  background-color: var(--nutui-progress-color, #ff0f23);
+  background: var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
 }
 .nut-progress-text {
   display: flex;
@@ -36,6 +40,7 @@
   top: var(--nutui-progress-text-position-top, -4px);
   bottom: var(--nutui-progress-text-position-bottom, -4px);
   transition: all 0.4s;
+  transform: translate(-50%);
 }
 .nut-progress-text-inner {
   display: flex;
@@ -44,12 +49,12 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  color: var(--nutui-progress-text-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-progress-text-color, #ffffff);
   padding: var(--nutui-progress-text-padding, 0 5px);
   border-radius: var(--nutui-progress-text-border-radius, 5px);
   font-size: var(--nutui-progress-text-font-size, 9px);
   line-height: 1;
-  background: var(--nutui-progress-text-background, #ff0f23);
+  background: var(--nutui-progress-text-background, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
 }
 @keyframes progressActive {
   0% {

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-progress {
   display: flex;
   align-items: center;
@@ -8,7 +12,7 @@
   flex: auto;
   border-radius: 12px;
   height: 10px;
-  background: #f5f6fa;
+  background: #f2f3f5;
 }
 .nut-progress-outer .nut-progress-active:before {
   content: "";
@@ -27,7 +31,7 @@
   justify-content: center;
   transition: all 0.4s;
   border-radius: 12px;
-  background-color: #ff0f23;
+  background: linear-gradient(135deg, #ff475d 0%, #ff0f23 100%);
 }
 .nut-progress-text {
   display: flex;
@@ -36,6 +40,7 @@
   top: -4px;
   bottom: -4px;
   transition: all 0.4s;
+  transform: translate(-50%);
 }
 .nut-progress-text-inner {
   display: flex;
@@ -49,7 +54,7 @@
   border-radius: 5px;
   font-size: 9px;
   line-height: 1;
-  background: #ff0f23;
+  background: linear-gradient(135deg, #ff475d 0%, #ff0f23 100%);
 }
 @keyframes progressActive {
   0% {

package/dist/cjs/packages/pulltorefresh/pulltorefresh.js

@@ -36,7 +36,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     completeText: '',
     completeDelay: 500,
     disabled: false,
-    headHeight: 50,
+    headHeight: 80,
     threshold: 60,
     scrollTop: 0,
     onRefresh: function onRefresh() {}
@@ -62,7 +62,7 @@ var PullToRefresh = function PullToRefresh(p) {
     var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), height = _useState1[0], setHeight = _useState1[1];
     var timer = (0, _react.useRef)();
     var renderIcons = function renderIcons(status) {
-        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (status === 'pulling' || status === 'complete') && (!(0, _platformtaro.harmonyAndRn)() ? /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Loading, null) : null), (status === 'canRelease' || status === 'refreshing') && (!(0, _platformtaro.harmonyAndRn)() ? /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.More, null) : null));
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (status === 'pulling' || status === 'complete') && /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Loading, null), (status === 'canRelease' || status === 'refreshing') && /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.More, null));
     };
     var renderStatusIcon = function renderStatusIcon() {
         if (props.renderIcon) {
@@ -183,6 +183,7 @@ var PullToRefresh = function PullToRefresh(p) {
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: classes,
         style: props.style,
+        catchMove: true,
         onTouchStart: handleTouchStart,
         onTouchMove: handleTouchMove,
         onTouchEnd: handleTouchEnd

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

@@ -9,7 +9,7 @@
       bottom: 0;
       left: 0;
       width: 100%;
-      color: $color-title;
+      color: $color-text-help;
       display: flex;
       flex-direction: column;
       justify-content: center;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-pulltorefresh-head {
   overflow: hidden;
   position: relative;
@@ -8,7 +12,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  color: var(--nutui-color-title, #1a1a1a);
+  color: var(--nutui-gray-5);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -20,7 +24,7 @@
   margin-bottom: 4px;
 }
 .nut-pulltorefresh-primary {
-  background: var(--nutui-pulltorefresh-color-primary, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-pulltorefresh-color-primary, var(--nutui-brand-6));
 }
 .nut-pulltorefresh-primary-content {
   color: var(--nutui-white-12);

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-pulltorefresh-head {
   overflow: hidden;
   position: relative;
@@ -8,7 +12,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  color: #1a1a1a;
+  color: #888b94;
   display: flex;
   flex-direction: column;
   justify-content: center;

package/dist/cjs/packages/radio/index.d.ts

@@ -1,4 +1,10 @@
-import { Radio } from "./radio";
+import React from 'react';
+import { RadioProps } from "./radio";
+import { RadioGroup } from "../radiogroup/radiogroup";
 export type { RadioProps } from "./radio";
 export type { RadioShape, RadioPosition } from './types';
-export default Radio;
+type CompoundedComponent = React.FC<Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>> & {
+    Group: typeof RadioGroup;
+};
+declare const InnerRadio: CompoundedComponent;
+export default InnerRadio;

package/dist/cjs/packages/radio/index.js

@@ -8,5 +8,10 @@ Object.defineProperty(exports, "default", {
         return _default;
     }
 });
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 var _radio = require("./radio");
-var _default = _radio.Radio;
+var _radiogroup = require("../radiogroup/radiogroup");
+var InnerRadio = _radio.Radio;
+InnerRadio.Group = _radiogroup.RadioGroup;
+var _default = InnerRadio;

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

@@ -1,5 +1,4 @@
-import React, { FunctionComponent } from 'react';
-import RadioGroup from "../radiogroup/index";
+import React, { FC } from 'react';
 import { BasicComponent } from "../../utils/typings";
 import { RadioPosition, RadioShape } from "./types";
 export interface RadioProps extends BasicComponent {
@@ -13,6 +12,4 @@ export interface RadioProps extends BasicComponent {
     value: string | number;
     onChange: (checked: boolean) => void;
 }
-export declare const Radio: FunctionComponent<Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>> & {
-    Group: typeof RadioGroup;
-};
+export declare const Radio: FC<Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>>;

package/dist/cjs/packages/radio/radio.js

@@ -20,7 +20,6 @@ var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
 var _context = /*#__PURE__*/ _interop_require_default._(require("../radiogroup/context"));
-var _index = /*#__PURE__*/ _interop_require_default._(require("../radiogroup/index"));
 var _typings = require("../../utils/typings");
 var _usepropsvalue = require("../../utils/use-props-value");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
@@ -98,14 +97,14 @@ var Radio = function Radio(props) {
     };
     var renderLabel = function renderLabel() {
         var labelcls = (0, _classnames.default)("".concat(classPrefix, "-label"), (0, _define_property._)({}, "".concat(classPrefix, "-label-disabled"), disabled));
-        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderIcon(), /*#__PURE__*/ _react.default.createElement("div", {
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderIcon(), /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: labelcls
         }, children));
     };
     var renderButton = function renderButton() {
         var _obj;
         var buttoncls = (0, _classnames.default)("".concat(classPrefix, "-button"), (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-button-active"), checkedStatement), (0, _define_property._)(_obj, "".concat(classPrefix, "-button-disabled"), disabled), _obj));
-        return /*#__PURE__*/ _react.default.createElement("div", {
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: buttoncls
         }, children);
     };
@@ -127,4 +126,3 @@ var Radio = function Radio(props) {
     }, renderRadioItem());
 };
 Radio.displayName = 'NutRadio';
-Radio.Group = _index.default;

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

@@ -37,9 +37,12 @@
   &-icon {
     &-checked {
       color: $color-primary;
+      box-shadow: 0px 2px 4px 0px #ff0f2333;
+      border-radius: 50%;
 
       &.nut-radio-icon-disabled {
         color: $color-primary-disabled-special;
+        box-shadow: none;
       }
     }
 
@@ -77,6 +80,7 @@
     border: 1px solid $color-text-disabled;
   }
 }
+
 [dir='rtl'] .nut-radio,
 .nut-rtl .nut-radio {
   &:last-child {