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

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

@@ -0,0 +1,363 @@
+@charset "UTF-8";
+
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-popup {
+  position: fixed;
+  min-height: 46%;
+  max-height: 100%;
+  background-color: #ffffff;
+  -webkit-overflow-scrolling: touch;
+  font-size: 14px;
+}
+.nut-popup-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 0;
+  padding: 16px;
+  position: relative;
+}
+.nut-popup-title-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.nut-popup-title-title {
+  color: #1a1a1a;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 16px;
+}
+.nut-popup-title-description {
+  color: #505259;
+  font-size: 14px;
+  font-weight: 400;
+}
+.nut-popup-title-description-gap {
+  margin-top: 8px;
+}
+.nut-popup-title-left {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+}
+.nut-popup-title-right {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 1;
+  width: 20px;
+  height: 20px;
+  color: #1a1a1a;
+  cursor: pointer;
+}
+.nut-popup-title-right:active {
+  opacity: 0.7;
+}
+.nut-popup-title-right-top-left {
+  top: 16px;
+  left: 16px;
+}
+.nut-popup-title-right-bottom-left {
+  bottom: 16px;
+  left: 16px;
+}
+.nut-popup-title-right-bottom-right {
+  right: 16px;
+  bottom: 16px;
+}
+.nut-popup-center {
+  top: 50%;
+  left: 50%;
+  min-height: 10%;
+  max-width: 295px;
+  transform: translate(-50%, -50%);
+}
+.nut-popup-center.nut-popup-round {
+  border-radius: 12px;
+}
+.nut-popup-bottom, .nut-popup-top {
+  max-height: 87%;
+}
+.nut-popup-bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+.nut-popup-bottom.nut-popup-round {
+  border-radius: 12px 12px 0 0;
+}
+.nut-popup-right {
+  top: 0;
+  right: 0;
+  width: 100px;
+  height: 100%;
+}
+.nut-popup-right.nut-popup-round {
+  border-radius: 12px 0 0 12px;
+}
+.nut-popup-left {
+  top: 0;
+  left: 0;
+  width: 100px;
+  height: 100%;
+}
+.nut-popup-left.nut-popup-round {
+  border-radius: 0 12px 12px 0;
+}
+.nut-popup-top {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.nut-popup-top.nut-popup-round {
+  border-radius: 0 0 12px 12px;
+}
+.nut-popup-slide {
+  /* 从顶部滑出 */
+  /* 从右侧滑出 */
+  /* 从底部滑出 */
+  /* 从左侧滑出 */
+}
+@keyframes popup-scale-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes popup-scale-fade-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+.nut-popup-slide-default-enter-active {
+  animation-fill-mode: both;
+  animation-name: popup-scale-fade-in;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-default-exit-active {
+  animation-fill-mode: both;
+  animation-name: popup-scale-fade-out;
+  animation-duration: 0.3s;
+}
+@keyframes popup-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes popup-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.nut-popup-slide-center-enter-active {
+  animation-fill-mode: both;
+  animation-name: popup-fade-in;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-center-exit-active {
+  animation-fill-mode: both;
+  animation-name: popup-fade-out;
+  animation-duration: 0.3s;
+}
+@keyframes popup-slide-top-enter {
+  from {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+@keyframes popup-slide-top-exit {
+  to {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+.nut-popup-slide-top-enter-active {
+  transform: translate3d(0, 0%, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-top-enter;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-top-appear-active {
+  transform: translate3d(0, 0%, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-top-enter;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-top-exit-active {
+  animation-fill-mode: both;
+  animation-name: popup-slide-top-exit;
+  animation-duration: 0.3s;
+}
+@keyframes popup-slide-right-enter {
+  from {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+@keyframes popup-slide-right-exit {
+  to {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+.nut-popup-slide-right-enter-active {
+  transform: translate3d(0, 0, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-right-enter;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-right-appear-active {
+  transform: translate3d(0, 0, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-right-enter;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-right-exit {
+  animation-fill-mode: both;
+  animation-name: popup-slide-right-exit;
+  animation-duration: 0.3s;
+}
+@keyframes popup-slide-bottom-enter {
+  from {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+@keyframes slide-bottom-exit {
+  to {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+.nut-popup-slide-bottom-enter-active {
+  transform: translate(0, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-bottom-enter;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-bottom-appear-active {
+  transform: translate(0, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-bottom-enter;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-bottom-exit {
+  animation-fill-mode: both;
+  animation-name: slide-bottom-exit;
+  animation-duration: 0.3s;
+}
+@keyframes popup-slide-left-enter {
+  from {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+@keyframes popup-slide-left-exit {
+  to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+.nut-popup-slide-left-enter-active {
+  transform: translate(0, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-left-enter;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-left-appear-active {
+  transform: translate(0, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-left-enter;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-left-exit-active {
+  animation-fill-mode: both;
+  animation-name: popup-slide-left-exit;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-left-exit-done {
+  animation-fill-mode: both;
+  animation-name: popup-slide-left-exit;
+  animation-duration: 0.3s;
+}
+.nut-popup-slide-default-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
+  display: none;
+}
+.nut-popup .nut-overflow-hidden {
+  overflow: hidden;
+}
+
+[dir=rtl] .nut-popup-title-left {
+  left: auto;
+  right: 16px;
+}
+
+.nut-rtl .nut-popup-title-left {
+  left: auto;
+  right: 16px;
+}
+[dir=rtl] .nut-popup-title-right {
+  right: auto;
+  left: 16px;
+}
+.nut-rtl .nut-popup-title-right {
+  right: auto;
+  left: 16px;
+}
+[dir=rtl] .nut-popup-title-right-top-left {
+  left: auto;
+  right: 16px;
+}
+.nut-rtl .nut-popup-title-right-top-left {
+  left: auto;
+  right: 16px;
+}
+[dir=rtl] .nut-popup-title-right-bottom-left {
+  left: auto;
+  right: 16px;
+}
+.nut-rtl .nut-popup-title-right-bottom-left {
+  left: auto;
+  right: 16px;
+}
+[dir=rtl] .nut-popup-title-right-bottom-right {
+  right: auto;
+  left: 16px;
+}
+.nut-rtl .nut-popup-title-right-bottom-right {
+  right: auto;
+  left: 16px;
+}
+[dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,
+.nut-rtl .nut-popup-title .nut-icon-ArrowLeft {
+  transform: rotate(180deg);
+}
+[dir=rtl] .nut-popup-center,
+.nut-rtl .nut-popup-center {
+  left: auto;
+  right: 50%;
+  transform: translate(50%, -50%);
+}
+[dir=rtl] .nut-popup-bottom,
+.nut-rtl .nut-popup-bottom {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-popup-top,
+.nut-rtl .nut-popup-top {
+  left: auto;
+  right: 0;
+}

package/dist/es/packages/popup/types.d.ts

@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react';
+import { OverlayProps } from "../overlay/types";
+export type Teleport = HTMLElement | (() => HTMLElement) | null;
+export type Position = 'top' | 'bottom' | 'left' | 'right' | 'center' | 'none';
+export type CloseIconPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export interface PopupProps extends OverlayProps {
+    position: Position;
+    transition: string;
+    overlayStyle: React.CSSProperties;
+    overlayClassName: string;
+    closeable: boolean;
+    closeIconPosition: CloseIconPosition;
+    closeIcon: ReactNode;
+    left?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    destroyOnClose: boolean;
+    portal: Teleport;
+    overlay: boolean;
+    round: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    onOverlayClick: (e: React.MouseEvent) => boolean | void;
+    onCloseIconClick: (e: React.MouseEvent) => boolean | void;
+}

package/dist/es/packages/popup/types.js

@@ -0,0 +1 @@
+export { };

package/dist/es/packages/popup/types.taro.d.ts

@@ -0,0 +1,8 @@
+import { ITouchEvent } from '@tarojs/components';
+import { PopupProps as PopupWebProps } from './types';
+export type { CloseIconPosition, Teleport } from './types';
+export type PopupProps = Omit<PopupWebProps, 'onOverlayClick' | 'onCloseIconClick' | 'onClick'> & {
+    onClick: (event: ITouchEvent) => void;
+    onOverlayClick: (e: ITouchEvent) => boolean | void;
+    onCloseIconClick: (e: ITouchEvent) => boolean | void;
+};

package/dist/es/packages/price/index.d.ts

@@ -1,3 +1,3 @@
 import { Price } from "./price";
-export type { PriceProps } from "./price";
+export type { PriceProps, PriceSize, PriceColor } from './types';
 export default Price;

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

@@ -1,12 +1,3 @@
 import { FunctionComponent } from 'react';
-import { BasicComponent } from "../../utils/typings";
-export interface PriceProps extends BasicComponent {
-    price: number | string;
-    symbol: string;
-    digits: number;
-    thousands: boolean;
-    position: string;
-    size: string;
-    line: boolean;
-}
+import { PriceProps } from './types';
 export declare const Price: FunctionComponent<Partial<PriceProps>>;

package/dist/es/packages/price/price.js

@@ -2,21 +2,23 @@ import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import React from "react";
-import { Text } from "@tarojs/components";
+import { Text, View } from "@tarojs/components";
 import classNames from "classnames";
 import { ComponentDefaults } from "../../utils/typings";
 import { useRtl } from "../configprovider/index";
+import { harmony } from "../../utils/platform-taro";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    color: 'primary',
     price: 0,
     symbol: '¥',
     digits: 2,
     thousands: false,
     position: 'before',
-    size: 'large',
+    size: 'normal',
     line: false
 });
 export var Price = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps, props), price = _$_object_spread.price, symbol = _$_object_spread.symbol, digits = _$_object_spread.digits, thousands = _$_object_spread.thousands, position = _$_object_spread.position, size = _$_object_spread.size, line = _$_object_spread.line, className = _$_object_spread.className, style = _$_object_spread.style;
+    var _$_object_spread = _object_spread({}, defaultProps, props), color = _$_object_spread.color, price = _$_object_spread.price, symbol = _$_object_spread.symbol, digits = _$_object_spread.digits, thousands = _$_object_spread.thousands, position = _$_object_spread.position, size = _$_object_spread.size, line = _$_object_spread.line, className = _$_object_spread.className, style = _$_object_spread.style;
     var classPrefix = 'nut-price';
     var rtl = useRtl();
     var replaceSpecialChar = function(url) {
@@ -35,11 +37,9 @@ export var Price = function(props) {
         if (Number(num) === 0) {
             num = 0;
         }
+        num = num.toString();
         if (checkPoint(num)) {
-            num = Number(num).toFixed(digits);
             num = typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0];
-        } else {
-            num = num.toString();
         }
         if (thousands) {
             return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
@@ -70,15 +70,21 @@ export var Price = function(props) {
             ])
         }, symbol ? replaceSpecialChar(symbol) : '');
     };
-    return /*#__PURE__*/ React.createElement(Text, {
-        className: "".concat(classPrefix, " ").concat(line ? "".concat(classPrefix, "-line") : '', " ").concat(className),
+    var renderInner = function() {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, symbol && position === 'before' ? renderSymbol() : null, /*#__PURE__*/ React.createElement(Text, {
+            className: "".concat(classPrefix, "-integer ").concat(classPrefix, "-integer-").concat(size, " ").concat(line ? "".concat(classPrefix, "-line") : '')
+        }, formatThousands(price)), digits ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Text, {
+            className: "".concat(classPrefix, "-decimal ").concat(classPrefix, "-decimal-").concat(size, " ").concat(line ? "".concat(classPrefix, "-line") : '')
+        }, "."), /*#__PURE__*/ React.createElement(Text, {
+            className: "".concat(classPrefix, "-decimal ").concat(classPrefix, "-decimal-").concat(size, " ").concat(line ? "".concat(classPrefix, "-line") : '')
+        }, formatDecimal(price))) : null, symbol && position === 'after' ? renderSymbol() : null);
+    };
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, harmony() ? /*#__PURE__*/ React.createElement(Text, {
+        className: "".concat(classPrefix, " ").concat(classPrefix, "-").concat(color, " ").concat(className),
+        style: style
+    }, renderInner()) : /*#__PURE__*/ React.createElement(View, {
+        className: "".concat(classPrefix, " ").concat(classPrefix, "-").concat(color, " ").concat(className),
         style: style
-    }, symbol && position === 'before' ? renderSymbol() : null, /*#__PURE__*/ React.createElement(Text, {
-        className: "".concat(classPrefix, "-integer ").concat(classPrefix, "-integer-").concat(size, " ").concat(line ? "".concat(classPrefix, "-line") : '')
-    }, formatThousands(price)), digits !== 0 ? /*#__PURE__*/ React.createElement(Text, {
-        className: "".concat(classPrefix, "-decimal ").concat(classPrefix, "-decimal-").concat(size, " ").concat(line ? "".concat(classPrefix, "-line") : '')
-    }, ".") : null, /*#__PURE__*/ React.createElement(Text, {
-        className: "".concat(classPrefix, "-decimal ").concat(classPrefix, "-decimal-").concat(size, " ").concat(line ? "".concat(classPrefix, "-line") : '')
-    }, formatDecimal(price)), symbol && position === 'after' ? renderSymbol() : null);
+    }, renderInner()));
 };
 Price.displayName = 'NutPrice';

package/dist/es/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/es/packages/price/style/style.css

@@ -10,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-color-primary, #ff0f23));
 }
 .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));
 }