@nutui/nutui-react-taro 3.0.0-beta.0 → 3.0.0-beta.10

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

@@ -34,6 +34,10 @@
     background: transparent;
     color: $white;
 
+    .nut-icon {
+      color: $white;
+    }
+
     &.top-right {
       top: 50px;
       right: 20px;
@@ -68,6 +72,13 @@
       justify-content: center;
       height: 100%;
 
+      .nut-image,
+      .nut-video {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
       .nut-image-preview-box {
         width: 100%;
       }

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

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -12,22 +16,13 @@
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10, rgba(0, 0, 0, 0.7)));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
-[dir=rtl] .nut-overlay,
-.nut-rtl .nut-overlay {
-  left: auto;
-  right: 0;
-}
-
 .nut-overflow-hidden {
   overflow: hidden !important;
 }
-.nut-overflow-hidden .taro_page {
-  overflow: hidden !important;
-}
 
 @keyframes nut-fade-in {
   0% {
@@ -62,49 +57,63 @@
   animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
 }
 
+[dir=rtl] .nut-overlay,
+.nut-rtl .nut-overlay {
+  left: auto;
+  right: 0;
+}
+
 .nut-popup {
   position: fixed;
-  min-height: 26%;
+  min-height: 46%;
   max-height: 100%;
-  overflow-y: auto;
-  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-gray-1, #ffffff));
-  color: var(--nutui-gray-7, #1a1a1a);
+  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-gray-1));
   -webkit-overflow-scrolling: touch;
-  font-size: var(--nutui-font-size-3, 14px);
+  font-size: var(--nutui-font-size-base, 14px);
 }
 .nut-popup-title {
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   border-bottom: var(--nutui-popup-title-border-bottom, 0);
   padding: var(--nutui-popup-title-padding, 16px);
   position: relative;
 }
-.nut-popup-title-left {
-  position: absolute;
-  left: var(--nutui-popup-title-padding, 16px);
+.nut-popup-title-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 .nut-popup-title-title {
-  font-weight: var(--nutui-font-weight-bold, 500);
-  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-6, 20px));
+  color: var(--nutui-gray-7);
+  font-weight: var(--nutui-font-weight-bold, 600);
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
+  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-popup-title-description {
-  color: var(--nutui-gray-5, #888b94);
-  font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-1, 10px));
+  color: var(--nutui-gray-6);
+  font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-font-weight, 400);
 }
+.nut-popup-title-description-gap {
+  margin-top: var(--nutui-popup-description-spacing, var(--nutui-spacing-base, 8px));
+}
+.nut-popup-title-left {
+  position: absolute;
+  top: var(--nutui-popup-title-padding, 16px);
+  left: var(--nutui-popup-title-padding, 16px);
+}
 .nut-popup-title-right {
-  position: absolute !important;
-  z-index: 1;
-  cursor: pointer;
-  width: var(--nutui-popup-icon-size, var(--nutui-font-size-6, 20px));
-  height: var(--nutui-popup-icon-size, var(--nutui-font-size-6, 20px));
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  position: absolute;
   top: var(--nutui-popup-title-padding, 16px);
   right: var(--nutui-popup-title-padding, 16px);
-  color: var(--nutui-gray-5, #888b94);
+  z-index: 1;
+  width: var(--nutui-popup-icon-size, 20px);
+  height: var(--nutui-popup-icon-size, 20px);
+  color: var(--nutui-gray-7);
+  cursor: pointer;
 }
 .nut-popup-title-right:active {
   opacity: 0.7;
@@ -125,13 +134,14 @@
   top: 50%;
   left: 50%;
   min-height: 10%;
+  max-width: 295px;
   transform: translate(-50%, -50%);
 }
 .nut-popup-center.nut-popup-round {
-  border-radius: var(--nutui-popup-border-radius, 24px);
+  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
 }
 .nut-popup-bottom, .nut-popup-top {
-  max-height: 83%;
+  max-height: 87%;
 }
 .nut-popup-bottom {
   bottom: 0;
@@ -139,21 +149,25 @@
   width: 100%;
 }
 .nut-popup-bottom.nut-popup-round {
-  border-radius: var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0;
+  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
 }
 .nut-popup-right {
   top: 0;
   right: 0;
+  width: 100px;
+  height: 100%;
 }
 .nut-popup-right.nut-popup-round {
-  border-radius: var(--nutui-popup-border-radius, 24px) 0 0 var(--nutui-popup-border-radius, 24px);
+  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
 }
 .nut-popup-left {
   top: 0;
   left: 0;
+  width: 100px;
+  height: 100%;
 }
 .nut-popup-left.nut-popup-round {
-  border-radius: 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0;
+  border-radius: 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0;
 }
 .nut-popup-top {
   top: 0;
@@ -161,7 +175,7 @@
   width: 100%;
 }
 .nut-popup-top.nut-popup-round {
-  border-radius: 0 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px);
+  border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
 }
 .nut-popup-slide {
   /* 从顶部滑出 */
@@ -313,7 +327,7 @@
   display: none;
 }
 .nut-popup .nut-overflow-hidden {
-  overflow: hidden !important;
+  overflow: hidden;
 }
 
 [dir=rtl] .nut-popup-title-left,
@@ -364,60 +378,137 @@
 
 .nut-indicator {
   display: flex;
-  flex-direction: row;
   width: auto;
+  flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
-  justify-content: center;
 }
-.nut-indicator-dot {
+.nut-indicator-fixed-width {
+  width: 21px;
+}
+.nut-indicator-dot, .nut-indicator-line {
   display: inline-block;
   vertical-align: middle;
-  width: var(--nutui-indicator-dot-size, 4px);
-  height: var(--nutui-indicator-dot-size, 4px);
+  width: var(--nutui-indicator-dot-size, 3px);
+  height: var(--nutui-indicator-dot-size, 3px);
   border-radius: 50%;
-  background-color: var(--nutui-indicator-dot-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
-  margin: 0 var(--nutui-indicator-dot-margin, 2px);
+  background-color: var(--nutui-gray-4);
+  margin: 0 var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxxs, 2px));
+  opacity: 0.4;
 }
-.nut-indicator-dot:first-child {
+.nut-indicator-dot:first-child, .nut-indicator-line:first-child {
   margin-left: 0px;
 }
-.nut-indicator-dot:last-child {
+.nut-indicator-dot:last-child, .nut-indicator-line:last-child {
   margin-right: 0px;
 }
-.nut-indicator-active {
-  width: var(--nutui-indicator-dot-active-size, 8px);
-  border-radius: var(--nutui-indicator-border-radius, 2px);
-  background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
+.nut-indicator-dot-active, .nut-indicator-line-active {
+  width: var(--nutui-indicator-dot-active-size, 6px);
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  background: var(--nutui-indicator-color, var(--nutui-brand-6));
+  opacity: 1;
+}
+.nut-indicator-fixed-width .nut-indicator-dot {
+  width: 12px;
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+}
+.nut-indicator-fixed-width .nut-indicator-dot-active {
+  width: 6px;
+}
+.nut-indicator-vertical.nut-indicator-fixed-width {
+  justify-content: flex-start;
+  height: 21px;
+  width: auto;
+}
+.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot {
+  width: 3px;
+  height: 12px;
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+}
+.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active {
+  height: 6px;
+}
+.nut-indicator-line {
+  width: var(--nutui-indicator-dot-active-size, 6px);
+  margin: 0;
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  background-color: transparent;
+}
+.nut-indicator-line-active {
+  transition: transform 0.3s ease-in-out;
+  background: var(--nutui-indicator-color, var(--nutui-brand-6));
+}
+
+.nut-indicator-track {
+  position: relative;
+}
+.nut-indicator-track:after {
+  display: block;
+  content: " ";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  background-color: var(--nutui-gray-4);
+  opacity: 0.4;
+}
+
+.nut-indicator-white .nut-indicator-dot, .nut-indicator-white .nut-indicator-line {
+  position: relative;
+  box-sizing: content-box;
+  background: rgba(255, 255, 255, 0.4);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  opacity: 1;
+}
+.nut-indicator-white .nut-indicator-line {
+  opacity: 0;
+}
+.nut-indicator-white .nut-indicator-line-active {
+  opacity: 1;
+  background: rgb(255, 255, 255);
 }
+.nut-indicator-white .nut-indicator-dot-active {
+  background: rgb(255, 255, 255);
+}
+
+.nut-indicator-track.nut-indicator-white:after {
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: rgba(255, 255, 255, 0.4);
+}
+
 .nut-indicator-vertical {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
-.nut-indicator-vertical-dot {
-  margin: var(--nutui-indicator-dot-margin, 2px) 0;
+.nut-indicator-vertical .nut-indicator-dot {
+  margin: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxxs, 2px)) 0;
 }
-.nut-indicator-vertical-dot:first-child {
+.nut-indicator-vertical .nut-indicator-dot:first-child {
   margin-top: 0px;
 }
-.nut-indicator-vertical-dot:last-child {
+.nut-indicator-vertical .nut-indicator-dot:last-child {
   margin-bottom: 0px;
 }
-.nut-indicator-vertical-active {
-  width: var(--nutui-indicator-dot-size, 4px);
-  height: var(--nutui-indicator-dot-active-size, 8px);
+.nut-indicator-vertical .nut-indicator-dot-active {
+  width: var(--nutui-indicator-dot-size, 3px);
+  height: var(--nutui-indicator-dot-active-size, 6px);
+}
+.nut-indicator-vertical.nut-indicator-track .nut-indicator-line {
+  width: var(--nutui-indicator-dot-size, 3px);
+  height: var(--nutui-indicator-dot-active-size, 6px);
 }
 
 [dir=rtl] .nut-indicator-dot:first-child,
 .nut-rtl .nut-indicator-dot:first-child {
-  margin-left: var(--nutui-indicator-dot-margin, 2px);
+  margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxxs, 2px));
   margin-right: 0px;
 }
 [dir=rtl] .nut-indicator-dot:last-child,
 .nut-rtl .nut-indicator-dot:last-child {
-  margin-right: var(--nutui-indicator-dot-margin, 2px);
+  margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxxs, 2px));
   margin-left: 0px;
 }
 
@@ -534,7 +625,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3, #f5f6fa);
+  background: var(--nutui-gray-3);
   background-size: 100% 100%;
 }
 .nut-image-error {
@@ -547,7 +638,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3, #f5f6fa);
+  background: var(--nutui-gray-3);
   background-size: 100% 100%;
 }
 
@@ -595,6 +686,9 @@
   background: transparent;
   color: #ffffff;
 }
+.nut-imagepreview-close .nut-icon {
+  color: #ffffff;
+}
 .nut-imagepreview-close.top-right {
   top: 50px;
   right: 20px;
@@ -623,6 +717,14 @@
   justify-content: center;
   height: 100%;
 }
+.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-image,
+.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-video,
+.nut-imagepreview-swiper .nut-swiper-item .nut-image,
+.nut-imagepreview-swiper .nut-swiper-item .nut-video {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-image-preview-box,
 .nut-imagepreview-swiper .nut-swiper-item .nut-image-preview-box {
   width: 100%;

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

@@ -1,7 +1,12 @@
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
+import { ViewProps } from '@tarojs/components';
+export type IndicatorType = 'anchor' | 'slide';
+export type IndicatorColor = 'primary' | 'white';
 export interface IndicatorProps {
     total: number;
     current: number;
     direction: string;
+    color: IndicatorColor;
+    type: IndicatorType;
 }
-export declare const Indicator: FunctionComponent<Partial<IndicatorProps> & React.HTMLAttributes<HTMLDivElement>>;
+export declare const Indicator: FunctionComponent<Partial<IndicatorProps> & ViewProps>;

package/dist/cjs/packages/indicator/indicator.js

@@ -11,35 +11,70 @@ Object.defineProperty(exports, "Indicator", {
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 var _define_property = require("@swc/helpers/_/_define_property");
 var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
 var defaultProps = {
-    total: 3,
+    total: 2,
     current: 0,
-    direction: 'horizontal'
+    direction: 'horizontal',
+    color: 'primary',
+    type: 'anchor'
 };
 var classPrefix = "nut-indicator";
 var Indicator = function Indicator(props) {
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), total = _$_object_spread.total, current = _$_object_spread.current, children = _$_object_spread.children, className = _$_object_spread.className, direction = _$_object_spread.direction, style = _$_object_spread.style;
-    var classes = (0, _classnames.default)((0, _define_property._)({}, "".concat(classPrefix, "-vertical"), direction === 'vertical'));
-    var classPrefixV = direction === 'vertical' ? "".concat(classPrefix, "-vertical") : classPrefix;
-    var renderElement = function renderElement() {
+    var maybeFixedWidth = function maybeFixedWidth() {
+        if (total === 2 || type === 'slide') {
+            return "".concat(classPrefix, "-fixed-width");
+        }
+        return '';
+    };
+    var _ref = (0, _object_spread._)({}, defaultProps, props), color = _ref.color, type = _ref.type, total = _ref.total, current = _ref.current, children = _ref.children, className = _ref.className, direction = _ref.direction, rest = (0, _object_without_properties._)(_ref, [
+        "color",
+        "type",
+        "total",
+        "current",
+        "children",
+        "className",
+        "direction"
+    ]);
+    var _obj;
+    var classes = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-vertical"), direction === 'vertical'), (0, _define_property._)(_obj, "".concat(classPrefix, "-white"), color === 'white'), (0, _define_property._)(_obj, "".concat(classPrefix, "-track"), type === 'slide'), _obj));
+    var renderDotElement = function renderDotElement() {
         var childs = [];
         for(var item = 0; item < total; item++){
             childs.push(item === current ? children || /*#__PURE__*/ _react.default.createElement(_components.View, {
                 key: item,
-                className: "".concat(classPrefix, "-dot ").concat(classPrefix, "-active ").concat(classPrefixV, "-dot ").concat(classPrefixV, "-active")
+                className: "".concat(classPrefix, "-dot ").concat(classPrefix, "-dot-active")
             }) : /*#__PURE__*/ _react.default.createElement(_components.View, {
                 key: item,
-                className: "".concat(classPrefix, "-dot ").concat(classPrefixV, "-dot")
+                className: "".concat(classPrefix, "-dot")
             }));
         }
         return childs;
     };
-    return /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: (0, _classnames.default)(classPrefix, classes, className),
-        style: style
-    }, renderElement());
+    var renderLineElement = function renderLineElement() {
+        var trackWidth = 21;
+        var sliderWidth = 6;
+        var stride = (trackWidth - sliderWidth) / (total - 1);
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
+            style: {
+                transform: "".concat(direction === 'vertical' ? 'translateY' : 'translateX', "(").concat(current * stride, "px)")
+            },
+            className: "".concat(classPrefix, "-line ").concat(classPrefix, "-line-active")
+        });
+    };
+    var renderByType = function renderByType(type) {
+        switch(type){
+            case 'slide':
+                return renderLineElement();
+            default:
+                return renderDotElement();
+        }
+    };
+    return /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread._)({
+        className: (0, _classnames.default)(classPrefix, classes, maybeFixedWidth(), className)
+    }, rest), renderByType(type));
 };
 Indicator.displayName = 'NutIndicator';

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

@@ -1,19 +1,24 @@
 .nut-indicator {
   display: flex;
-  flex-direction: row;
   width: auto;
+  flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
-  justify-content: center;
 
-  &-dot {
+  &-fixed-width {
+    width: 21px;
+  }
+
+  &-dot,
+  &-line {
     display: inline-block;
     vertical-align: middle;
     width: $indicator-dot-size;
     height: $indicator-dot-size;
     border-radius: 50%;
-    background-color: $indicator-dot-color;
+    background-color: $color-border-disabled;
     margin: 0 $indicator-dot-margin;
+    opacity: 0.4;
 
     &:first-child {
       margin-left: 0px;
@@ -22,20 +27,119 @@
     &:last-child {
       margin-right: 0px;
     }
+
+    &-active {
+      width: $indicator-dot-active-size;
+      border-radius: $indicator-border-radius;
+      background: $indicator-color;
+      opacity: 1;
+    }
+  }
+
+  // 固定宽度
+  &-fixed-width {
+    // 两个页码的时候
+    .nut-indicator-dot {
+      width: 12px;
+      border-radius: $indicator-border-radius;
+
+      &-active {
+        width: 6px;
+      }
+    }
   }
 
-  &-active {
+  &-vertical {
+    // 竖向固定高度
+    &.nut-indicator-fixed-width {
+      justify-content: flex-start;
+      height: 21px;
+      width: auto;
+
+      // 竖向两个页码
+      .nut-indicator-dot {
+        width: 3px;
+        height: 12px;
+        border-radius: $indicator-border-radius;
+
+        &-active {
+          height: 6px;
+        }
+      }
+    }
+  }
+
+  &-line {
     width: $indicator-dot-active-size;
+    margin: 0;
+
     border-radius: $indicator-border-radius;
-    background: $indicator-color;
+    background-color: transparent;
+
+    &-active {
+      transition: transform 0.3s ease-in-out;
+      background: $indicator-color;
+    }
   }
+}
 
-  &-vertical {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+.nut-indicator-track {
+  position: relative;
 
+  &:after {
+    display: block;
+    content: ' ';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border-radius: $indicator-border-radius;
+    background-color: $color-border-disabled;
+    opacity: 0.4;
+  }
+}
+
+.nut-indicator-white {
+  .nut-indicator {
+    &-dot,
+    &-line {
+      position: relative;
+      box-sizing: content-box;
+      background: rgba(255, 255, 255, 0.4);
+      border: 1px solid rgba(0, 0, 0, 0.06);
+      opacity: 1;
+    }
+
+    &-line {
+      opacity: 0;
+
+      &-active {
+        opacity: 1;
+        background: rgba(255, 255, 255, 1);
+      }
+    }
+    &-dot {
+      &-active {
+        background: rgba(255, 255, 255, 1);
+      }
+    }
+  }
+}
+
+.nut-indicator-track.nut-indicator-white {
+  &:after {
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    background: rgba(255, 255, 255, 0.4);
+  }
+}
+
+.nut-indicator-vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .nut-indicator {
     &-dot {
       margin: $indicator-dot-margin 0;
 
@@ -46,11 +150,20 @@
       &:last-child {
         margin-bottom: 0px;
       }
+
+      &-active {
+        width: $indicator-dot-size;
+        height: $indicator-dot-active-size;
+      }
     }
+  }
 
-    &-active {
-      width: $indicator-dot-size;
-      height: $indicator-dot-active-size;
+  &.nut-indicator-track {
+    .nut-indicator {
+      &-line {
+        width: $indicator-dot-size;
+        height: $indicator-dot-active-size;
+      }
     }
   }
 }