@nutui/nutui-react 3.0.20 → 3.1.0-beta.2

package/dist/cjs/packages/popup/style-jmapp/style.css

@@ -30,7 +30,6 @@
   color: var(--nutui-color-title);
   font-weight: var(--nutui-font-weight-bold);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-h1));
-  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-h1));
 }
 .nut-popup-title-description {
   color: var(--nutui-color-text);
@@ -49,6 +48,9 @@
   position: absolute;
   top: var(--nutui-popup-title-padding, 12px);
   right: var(--nutui-popup-title-padding, 12px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   z-index: 1;
   width: var(--nutui-popup-icon-size, var(--nutui-font-h2));
   height: var(--nutui-popup-icon-size, var(--nutui-font-h2));
@@ -73,8 +75,10 @@
 .nut-popup-center {
   top: 50%;
   left: 50%;
+  right: auto;
+  bottom: auto;
   min-height: 10%;
-  max-width: 295px;
+  max-width: scale-px(295px);
   transform: translate(-50%, -50%);
 }
 .nut-popup-center.nut-popup-round {
@@ -83,6 +87,8 @@
 .nut-popup-bottom {
   bottom: 0;
   left: 0;
+  right: auto;
+  top: auto;
   width: 100%;
 }
 .nut-popup-bottom.nut-popup-round {
@@ -94,7 +100,9 @@
 .nut-popup-right {
   top: 0;
   right: 0;
-  width: 100px;
+  left: auto;
+  bottom: auto;
+  width: scale-px(100px);
   height: 100%;
 }
 .nut-popup-right.nut-popup-round {
@@ -103,7 +111,9 @@
 .nut-popup-left {
   top: 0;
   left: 0;
-  width: 100px;
+  right: auto;
+  bottom: auto;
+  width: scale-px(100px);
   height: 100%;
 }
 .nut-popup-left.nut-popup-round {
@@ -112,6 +122,8 @@
 .nut-popup-top {
   top: 0;
   left: 0;
+  right: auto;
+  bottom: auto;
   width: 100%;
 }
 .nut-popup-top.nut-popup-round {
@@ -188,6 +200,9 @@
   }
 }
 @keyframes popup-slide-top-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, -100%, 0);
   }
@@ -212,6 +227,9 @@
   }
 }
 @keyframes popup-slide-right-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(100%, 0, 0);
   }
@@ -236,6 +254,9 @@
   }
 }
 @keyframes slide-bottom-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, 100%, 0);
   }
@@ -260,6 +281,9 @@
   }
 }
 @keyframes popup-slide-left-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(-100%, 0, 0);
   }

package/dist/cjs/packages/popup/style-jrkf/popup.scss

@@ -26,7 +26,6 @@
       color: $color-title;
       font-weight: $font-weight-bold;
       font-size: $popup-title-font-size;
-      line-height: $popup-title-font-size;
     }
 
     &-description {
@@ -48,7 +47,9 @@
       position: absolute;
       top: $popup-title-padding;
       right: $popup-title-padding;
-
+      display: flex;
+      align-items: center;
+      justify-content: center;
       z-index: 1;
       width: $popup-icon-size;
       height: $popup-icon-size;
@@ -79,8 +80,10 @@
   &-center {
     top: 50%;
     left: 50%;
+    right: auto;
+    bottom: auto;
     min-height: 10%;
-    max-width: 295px;
+    max-width: scale-px(295px);
     transform: translate(-50%, -50%);
 
     &.nut-popup-round {
@@ -91,6 +94,8 @@
   &-bottom {
     bottom: 0;
     left: 0;
+    right: auto;
+    top: auto;
     width: 100%;
 
     &.nut-popup-round {
@@ -105,7 +110,9 @@
   &-right {
     top: 0;
     right: 0;
-    width: 100px;
+    left: auto;
+    bottom: auto;
+    width: scale-px(100px);
     height: 100%;
 
     &.nut-popup-round {
@@ -116,7 +123,9 @@
   &-left {
     top: 0;
     left: 0;
-    width: 100px;
+    right: auto;
+    bottom: auto;
+    width: scale-px(100px);
     height: 100%;
 
     &.nut-popup-round {
@@ -127,6 +136,8 @@
   &-top {
     top: 0;
     left: 0;
+    right: auto;
+    bottom: auto;
     width: 100%;
 
     &.nut-popup-round {
@@ -210,6 +221,9 @@
     }
 
     @keyframes popup-slide-top-exit {
+      from {
+        transform: translate3d(0, 0%, 0);
+      }
       to {
         transform: translate3d(0, -100%, 0);
       }
@@ -240,6 +254,9 @@
     }
 
     @keyframes popup-slide-right-exit {
+      from {
+        transform: translate3d(0%, 0, 0);
+      }
       to {
         transform: translate3d(100%, 0, 0);
       }
@@ -270,6 +287,9 @@
     }
 
     @keyframes slide-bottom-exit {
+      from {
+        transform: translate3d(0, 0%, 0);
+      }
       to {
         transform: translate3d(0, 100%, 0);
       }
@@ -300,6 +320,9 @@
     }
 
     @keyframes popup-slide-left-exit {
+      from {
+        transform: translate3d(0%, 0, 0);
+      }
       to {
         transform: translate3d(-100%, 0, 0);
       }

package/dist/cjs/packages/popup/style-jrkf/style.css

@@ -30,7 +30,6 @@
   color: var(--nutui-color-title);
   font-weight: var(--nutui-font-weight-bold);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-h1));
-  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-h1));
 }
 .nut-popup-title-description {
   color: var(--nutui-color-text);
@@ -49,6 +48,9 @@
   position: absolute;
   top: var(--nutui-popup-title-padding, 12px);
   right: var(--nutui-popup-title-padding, 12px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   z-index: 1;
   width: var(--nutui-popup-icon-size, var(--nutui-font-h2));
   height: var(--nutui-popup-icon-size, var(--nutui-font-h2));
@@ -73,8 +75,10 @@
 .nut-popup-center {
   top: 50%;
   left: 50%;
+  right: auto;
+  bottom: auto;
   min-height: 10%;
-  max-width: 295px;
+  max-width: scale-px(295px);
   transform: translate(-50%, -50%);
 }
 .nut-popup-center.nut-popup-round {
@@ -83,6 +87,8 @@
 .nut-popup-bottom {
   bottom: 0;
   left: 0;
+  right: auto;
+  top: auto;
   width: 100%;
 }
 .nut-popup-bottom.nut-popup-round {
@@ -94,7 +100,9 @@
 .nut-popup-right {
   top: 0;
   right: 0;
-  width: 100px;
+  left: auto;
+  bottom: auto;
+  width: scale-px(100px);
   height: 100%;
 }
 .nut-popup-right.nut-popup-round {
@@ -103,7 +111,9 @@
 .nut-popup-left {
   top: 0;
   left: 0;
-  width: 100px;
+  right: auto;
+  bottom: auto;
+  width: scale-px(100px);
   height: 100%;
 }
 .nut-popup-left.nut-popup-round {
@@ -112,6 +122,8 @@
 .nut-popup-top {
   top: 0;
   left: 0;
+  right: auto;
+  bottom: auto;
   width: 100%;
 }
 .nut-popup-top.nut-popup-round {
@@ -188,6 +200,9 @@
   }
 }
 @keyframes popup-slide-top-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, -100%, 0);
   }
@@ -212,6 +227,9 @@
   }
 }
 @keyframes popup-slide-right-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(100%, 0, 0);
   }
@@ -236,6 +254,9 @@
   }
 }
 @keyframes slide-bottom-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, 100%, 0);
   }
@@ -260,6 +281,9 @@
   }
 }
 @keyframes popup-slide-left-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(-100%, 0, 0);
   }

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

@@ -19,6 +19,7 @@ var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames")
 var _typings = require("../../utils/typings");
 var _index = require("../configprovider/index");
 var _types = require("../../types");
+var _shouldrenderpriceraw = require("../../utils/should-render-price-raw");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     color: 'primary',
     price: 0,
@@ -44,10 +45,17 @@ var Price = function Price(props) {
     ]);
     var classPrefix = 'nut-price';
     var rtl = (0, _index.useRtl)();
+    var isRenderPriceRaw = (0, _react.useMemo)(function() {
+        return typeof originalPrice === 'string' && (0, _shouldrenderpriceraw.shouldRenderPriceAsRaw)(originalPrice);
+    }, [
+        originalPrice
+    ]);
     var price = (0, _react.useMemo)(function() {
+        if (isRenderPriceRaw) return '';
         return originalPrice.toString().replace(/[^\d.]/g, '');
     }, [
-        originalPrice
+        originalPrice,
+        isRenderPriceRaw
     ]);
     var isCustomPriceColor = (0, _react.useMemo)(function() {
         var specificPriceColor = Object.values(_types.PriceColorEnum);
@@ -110,18 +118,24 @@ var Price = function Price(props) {
             }
         });
     };
+    var renderRawContent = function renderRawContent() {
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, originalPrice);
+    };
+    var renderInner = function renderInner() {
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, symbol && position === 'before' ? renderSymbol() : null, /*#__PURE__*/ _react.default.createElement("div", {
+            className: "".concat(classPrefix, "-integer ").concat(classPrefix, "-integer-").concat(size, " ").concat(line ? "".concat(classPrefix, "-line") : ''),
+            style: priceColorStyle
+        }, formatThousands(price)), digits !== 0 ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, checkPoint(price) || digits ? /*#__PURE__*/ _react.default.createElement("div", {
+            className: "".concat(classPrefix, "-decimal ").concat(classPrefix, "-decimal-").concat(size, " ").concat(line ? "".concat(classPrefix, "-line") : ''),
+            style: priceColorStyle
+        }, ".") : null, /*#__PURE__*/ _react.default.createElement("div", {
+            className: "".concat(classPrefix, "-decimal ").concat(classPrefix, "-decimal-").concat(size, " ").concat(line ? "".concat(classPrefix, "-line") : ''),
+            style: priceColorStyle
+        }, formatDecimal(price))) : null, symbol && position === 'after' ? renderSymbol() : null);
+    };
     return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
         className: "".concat(classPrefix, " ").concat(classPrefix, "-").concat(isCustomPriceColor ? 'custom' : color, " ").concat(className),
         style: style
-    }, rest), symbol && position === 'before' ? renderSymbol() : null, /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-integer ").concat(classPrefix, "-integer-").concat(size, " ").concat(line ? "".concat(classPrefix, "-line") : ''),
-        style: priceColorStyle
-    }, formatThousands(price)), digits !== 0 ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, checkPoint(price) || digits ? /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-decimal ").concat(classPrefix, "-decimal-").concat(size, " ").concat(line ? "".concat(classPrefix, "-line") : ''),
-        style: priceColorStyle
-    }, ".") : null, /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-decimal ").concat(classPrefix, "-decimal-").concat(size, " ").concat(line ? "".concat(classPrefix, "-line") : ''),
-        style: priceColorStyle
-    }, formatDecimal(price))) : null, symbol && position === 'after' ? renderSymbol() : null);
+    }, rest), isRenderPriceRaw ? renderRawContent() : renderInner());
 };
 Price.displayName = 'NutPrice';

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

@@ -1,6 +1,7 @@
 .nut-price {
   direction: ltr;
   font-size: $font-size-l;
+  line-height: $font-size-l;
   display: flex;
   flex-direction: row;
   align-items: baseline;
@@ -10,7 +11,6 @@
   &-decimal {
     color: $price-color;
     font-family: 'JDZH-Bold';
-    line-height: 1;
   }
 
   &-darkgray {
@@ -18,7 +18,6 @@
       &-symbol,
       &-integer,
       &-decimal {
-        font-family: 'JDZH-Bold';
         color: $price-darkgray-color;
       }
     }
@@ -29,7 +28,6 @@
       &-symbol,
       &-integer,
       &-decimal {
-        font-family: 'JDZH-Bold';
         color: $price-primary-color;
       }
     }
@@ -39,18 +37,22 @@
     padding-right: $price-symbol-padding-right;
     &-xlarge {
       font-size: $price-symbol-xlarge-size;
+      line-height: $price-symbol-xlarge-size;
     }
 
     &-large {
       font-size: $price-symbol-large-size;
+      line-height: $price-symbol-large-size;
     }
 
     &-normal {
       font-size: $price-symbol-normal-size;
+      line-height: $price-symbol-normal-size;
     }
 
     &-small {
       font-size: $price-symbol-small-size;
+      line-height: $price-symbol-small-size;
     }
 
     &-rtl {
@@ -62,45 +64,44 @@
   &-integer {
     &-xlarge {
       font-size: $price-integer-xlarge-size;
-      /* #ifdef dynamic */
       line-height: $price-integer-xlarge-size;
-      /* #endif */
     }
 
     &-large {
       font-size: $price-integer-large-size;
-      /* #ifdef dynamic */
       line-height: $price-integer-large-size;
-      /* #endif */
     }
 
     &-normal {
       font-size: $price-integer-normal-size;
-      /* #ifdef dynamic */
       line-height: $price-integer-normal-size;
-      /* #endif */
     }
 
     &-small {
       font-size: $price-integer-small-size;
+      line-height: $price-integer-small-size;
     }
   }
 
   &-decimal {
     &-xlarge {
       font-size: $price-decimal-xlarge-size;
+      line-height: $price-decimal-xlarge-size;
     }
 
     &-large {
       font-size: $price-decimal-large-size;
+      line-height: $price-decimal-large-size;
     }
 
     &-normal {
       font-size: $price-decimal-normal-size;
+      line-height: $price-decimal-normal-size;
     }
 
     &-small {
       font-size: $price-decimal-small-size;
+      line-height: $price-decimal-small-size;
     }
   }
 

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

@@ -1,10 +1,21 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
 .nut-price {
   direction: ltr;
-  font-size: var(--nutui-font-size-l, 15px);
+  font-size: var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  line-height: var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   display: flex;
   flex-direction: row;
   align-items: baseline;
@@ -12,67 +23,67 @@
 .nut-price-symbol, .nut-price-integer, .nut-price-decimal {
   color: var(--nutui-price-color, var(--nutui-color-text-help));
   font-family: "JDZH-Bold";
-  line-height: 1;
 }
 .nut-price-darkgray .nut-price-symbol, .nut-price-darkgray .nut-price-integer, .nut-price-darkgray .nut-price-decimal {
-  font-family: "JDZH-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: "JDZH-Bold";
   color: var(--nutui-price-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-price-symbol {
   padding-right: var(--nutui-price-symbol-padding-right, 0px);
 }
 .nut-price-symbol-xlarge {
-  font-size: var(--nutui-price-symbol-xlarge-size, 12px);
+  font-size: var(--nutui-price-symbol-xlarge-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-symbol-xlarge-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-symbol-large {
-  font-size: var(--nutui-price-symbol-large-size, 12px);
+  font-size: var(--nutui-price-symbol-large-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-symbol-large-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-symbol-normal {
-  font-size: var(--nutui-price-symbol-normal-size, 12px);
+  font-size: var(--nutui-price-symbol-normal-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-symbol-normal-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-symbol-small {
-  font-size: var(--nutui-price-symbol-small-size, 12px);
+  font-size: var(--nutui-price-symbol-small-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-symbol-small-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-symbol-rtl {
   padding-right: 0;
   padding-left: var(--nutui-price-symbol-padding-right, 0px);
 }
 .nut-price-integer-xlarge {
-  font-size: var(--nutui-price-integer-xlarge-size, 24px);
-  /* #ifdef dynamic */
-  line-height: var(--nutui-price-integer-xlarge-size, 24px);
-  /* #endif */
+  font-size: var(--nutui-price-integer-xlarge-size, var(--nutui-font-size-xxl, calc(24px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-integer-xlarge-size, var(--nutui-font-size-xxl, calc(24px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-integer-large {
-  font-size: var(--nutui-price-integer-large-size, 18px);
-  /* #ifdef dynamic */
-  line-height: var(--nutui-price-integer-large-size, 18px);
-  /* #endif */
+  font-size: var(--nutui-price-integer-large-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-integer-large-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-integer-normal {
-  font-size: var(--nutui-price-integer-normal-size, 16px);
-  /* #ifdef dynamic */
-  line-height: var(--nutui-price-integer-normal-size, 16px);
-  /* #endif */
+  font-size: var(--nutui-price-integer-normal-size, var(--nutui-font-size-md, calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-integer-normal-size, var(--nutui-font-size-md, calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-integer-small {
-  font-size: var(--nutui-price-integer-small-size, 12px);
+  font-size: var(--nutui-price-integer-small-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-integer-small-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-decimal-xlarge {
-  font-size: var(--nutui-price-decimal-xlarge-size, 12px);
+  font-size: var(--nutui-price-decimal-xlarge-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-decimal-xlarge-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-decimal-large {
-  font-size: var(--nutui-price-decimal-large-size, 12px);
+  font-size: var(--nutui-price-decimal-large-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-decimal-large-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-decimal-normal {
-  font-size: var(--nutui-price-decimal-normal-size, 12px);
+  font-size: var(--nutui-price-decimal-normal-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-decimal-normal-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-decimal-small {
-  font-size: var(--nutui-price-decimal-small-size, 12px);
+  font-size: var(--nutui-price-decimal-small-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-decimal-small-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-line {
   text-decoration: line-through var(--nutui-price-line-color, var(--nutui-color-text-help));