@nutui/nutui-react 4.0.0-beta.2 → 4.0.0-beta.3

package/dist/es/packages/fixednav/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-fixednav {
   position: fixed;
   z-index: var(--nutui-fixednav-index, 900);

package/dist/es/packages/form/style/style.css

@@ -6,9 +6,4 @@ page {
   --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 */
+}

package/dist/es/packages/formitem/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-form-item {
   display: flex;
   line-height: unset;

package/dist/es/packages/grid/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-grid {
   display: flex;
   flex-direction: row;

package/dist/es/packages/griditem/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-grid-item {
   display: flex;
   flex-direction: column;

package/dist/es/packages/hoverbutton/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-hoverbutton {
   display: flex;
   flex-direction: column;

package/dist/es/packages/hoverbuttonitem/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-hoverbutton-item-container {
   width: var(--nutui-hoverbutton-item-size, calc(40px * var(--nut-scale-f, 1)));
   height: var(--nutui-hoverbutton-item-size, calc(40px * var(--nut-scale-f, 1)));

package/dist/es/packages/image/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-image {
   display: block;
   position: relative;

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-imagepreview {
   width: 100%;
   height: 100%;

package/dist/es/packages/indicator/indicator.js

@@ -18,17 +18,18 @@ export var Indicator = function(props) {
         }
         return '';
     };
-    var _ref = _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 = _object_without_properties(_ref, [
+    var _ref = _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, placement = _ref.placement, rest = _object_without_properties(_ref, [
         "color",
         "type",
         "total",
         "current",
         "children",
         "className",
-        "direction"
+        "direction",
+        "placement"
     ]);
     var _obj;
-    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-vertical"), direction === 'vertical'), _define_property(_obj, "".concat(classPrefix, "-white"), color === 'default'), _define_property(_obj, "".concat(classPrefix, "-track"), type === 'slide'), _obj));
+    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-vertical"), direction === 'vertical'), _define_property(_obj, "".concat(classPrefix, "-white"), color === 'default'), _define_property(_obj, "".concat(classPrefix, "-track"), type === 'slide'), _define_property(_obj, "".concat(classPrefix, "-").concat(placement), !!placement), _obj));
     var renderDotElement = function() {
         var childs = [];
         for(var item = 0; item < total; item++){
@@ -43,12 +44,10 @@ export var Indicator = function(props) {
         return childs;
     };
     var renderLineElement = function() {
-        var trackWidth = 21;
-        var sliderWidth = 6;
-        var stride = (trackWidth - sliderWidth) / (total - 1);
         return /*#__PURE__*/ React.createElement("div", {
             style: {
-                transform: "".concat(direction === 'vertical' ? 'translateY' : 'translateX', "(").concat(current * stride, "px)")
+                '--nutui-indicator-current': current,
+                '--nutui-indicator-total': total
             },
             className: "".concat(classPrefix, "-line ").concat(classPrefix, "-line-active")
         });

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

@@ -6,7 +6,7 @@
   align-items: center;
 
   &-fixed-width {
-    width: scale-px(21px);
+    width: $indicator-track-width;
   }
 
   &-dot,
@@ -16,9 +16,10 @@
     width: $indicator-dot-size;
     height: $indicator-dot-size;
     border-radius: 50%;
-    background-color: $color-border-disabled;
+    background-color: $indicator-dot-inactive-color;
+    border: $indicator-dot-border;
+    box-sizing: border-box;
     margin-left: $indicator-dot-margin;
-    opacity: 0.4;
 
     &-0 {
       margin-left: 0;
@@ -26,21 +27,23 @@
 
     &-active {
       width: $indicator-dot-active-size;
+      height: $indicator-dot-size;
       border-radius: $indicator-border-radius;
       background: $indicator-color;
-      opacity: 1;
+      border: $indicator-dot-border;
     }
   }
 
-  // 固定宽度
+  // 双屏模式
   &-fixed-width {
-    // 两个页码的时候
     .nut-indicator-dot {
-      width: scale-px(12px);
+      width: $indicator-dual-screen-inactive-width;
+      height: $indicator-dot-size;
       border-radius: $indicator-border-radius;
 
       &-active {
-        width: scale-px(6px);
+        width: $indicator-dot-active-size;
+        height: $indicator-dot-size;
       }
     }
   }
@@ -49,44 +52,71 @@
     // 竖向固定高度
     &.nut-indicator-fixed-width {
       justify-content: flex-start;
-      height: scale-px(21px);
+      height: $indicator-track-width;
       width: auto;
 
-      // 竖向两个页码
+      // 竖向双屏
       .nut-indicator-dot {
-        width: scale-px(3px);
-        height: scale-px(12px);
+        width: $indicator-dot-size;
+        height: $indicator-dual-screen-inactive-width;
         border-radius: $indicator-border-radius;
 
         &-active {
-          height: scale-px(6px);
-        }
-      }
-
-      &.nut-indicator-fixed-width {
-        &.nut-indicator-white {
-          .nut-indicator-dot {
-            &-active {
-              height: scale-px(6px);
-            }
-          }
+          width: $indicator-dot-size;
+          height: $indicator-dot-active-size;
         }
       }
     }
   }
 
   &-line {
-    width: $indicator-dot-active-size;
+    width: $indicator-slider-width;
     margin: 0;
-
     border-radius: $indicator-border-radius;
     background-color: transparent;
+    border: none;
 
     &-active {
+      position: relative;
+      z-index: 1;
       transition: transform 0.3s ease-in-out;
       background: $indicator-color;
+      border: $indicator-dot-border;
+      transform: translateX(
+        calc(
+          var(--nutui-indicator-current, 0) /
+            (var(--nutui-indicator-total, 2) - 1) *
+            (#{$indicator-track-width} - #{$indicator-slider-width})
+        )
+      );
     }
   }
+
+  // 定位布局
+  &-outside {
+    margin-top: $indicator-placement-gap;
+    margin-bottom: $indicator-placement-safe-gap;
+    justify-content: center;
+  }
+
+  &-inside-top-right {
+    position: absolute;
+    top: $indicator-placement-gap;
+    right: $indicator-placement-gap;
+  }
+
+  &-inside-bottom-center {
+    position: absolute;
+    bottom: $indicator-placement-gap;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &-inside-bottom-left {
+    position: absolute;
+    bottom: $indicator-placement-gap;
+    left: $indicator-placement-gap;
+  }
 }
 
 .nut-indicator-track {
@@ -100,8 +130,8 @@
     height: 100%;
     box-sizing: border-box;
     border-radius: $indicator-border-radius;
-    background-color: $color-border-disabled;
-    opacity: 0.4;
+    background-color: $indicator-dot-inactive-color;
+    border: $indicator-dot-border;
   }
 }
 
@@ -110,11 +140,8 @@
     &-dot,
     &-line {
       position: relative;
-      /* #ifndef dynamic*/
-      box-sizing: content-box;
-      /* #endif */
-      background: rgba(255, 255, 255, 0.4);
-      opacity: 1;
+      background: $color-primary-text;
+      opacity: 0.4;
     }
 
     &-line {
@@ -122,13 +149,14 @@
 
       &-active {
         opacity: 1;
-        background: rgba(255, 255, 255, 1);
+        background: $color-primary-text;
       }
     }
 
     &-dot {
       &-active {
-        background: rgba(255, 255, 255, 1);
+        background: $color-primary-text;
+        opacity: 1;
       }
     }
   }
@@ -136,8 +164,8 @@
 
 .nut-indicator-track.nut-indicator-white {
   &:after {
-    border: scale-px(1px) solid rgba(0, 0, 0, 0.06);
-    background: rgba(255, 255, 255, 0.4);
+    background: $color-primary-text;
+    opacity: 0.4;
   }
 }
 
@@ -167,7 +195,17 @@
     .nut-indicator {
       &-line {
         width: $indicator-dot-size;
-        height: $indicator-dot-active-size;
+        height: $indicator-slider-width;
+
+        &-active {
+          transform: translateY(
+            calc(
+              var(--nutui-indicator-current, 0) /
+                (var(--nutui-indicator-total, 2) - 1) *
+                (#{$indicator-track-width} - #{$indicator-slider-width})
+            )
+          );
+        }
       }
     }
   }
@@ -181,4 +219,14 @@
       margin-left: 0;
     }
   }
+
+  &-inside-top-right {
+    right: auto;
+    left: $indicator-placement-gap;
+  }
+
+  &-inside-bottom-left {
+    left: auto;
+    right: $indicator-placement-gap;
+  }
 }

package/dist/es/packages/indicator/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-indicator {
   display: flex;
   width: auto;
@@ -20,59 +16,87 @@ page {
   align-items: center;
 }
 .nut-indicator-fixed-width {
-  width: calc(21px * var(--nut-scale-f, 1));
+  width: var(--nutui-indicator-track-width, calc(24px * var(--nut-scale-f, 1)));
 }
 .nut-indicator-dot, .nut-indicator-line {
   display: inline-block;
   vertical-align: middle;
-  width: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
-  height: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
+  width: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
   border-radius: 50%;
-  background-color: var(--nutui-color-border-disabled, #c2c4cc);
+  background-color: var(--nutui-indicator-dot-inactive-color, var(--nutui-color-background-component, #f0f2f7));
+  border: var(--nutui-indicator-dot-border, calc(0.33px * var(--nut-scale-f, 1)) solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  box-sizing: border-box;
   margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
-  opacity: 0.4;
 }
 .nut-indicator-dot-0, .nut-indicator-line-0 {
   margin-left: 0;
 }
 .nut-indicator-dot-active, .nut-indicator-line-active {
-  width: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
+  width: var(--nutui-indicator-dot-active-size, calc(8px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
   background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
-  opacity: 1;
+  border: var(--nutui-indicator-dot-border, calc(0.33px * var(--nut-scale-f, 1)) solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-indicator-fixed-width .nut-indicator-dot {
-  width: calc(12px * var(--nut-scale-f, 1));
+  width: var(--nutui-indicator-dual-screen-inactive-width, calc(16px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
 }
 .nut-indicator-fixed-width .nut-indicator-dot-active {
-  width: calc(6px * var(--nut-scale-f, 1));
+  width: var(--nutui-indicator-dot-active-size, calc(8px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-indicator-vertical.nut-indicator-fixed-width {
   justify-content: flex-start;
-  height: calc(21px * var(--nut-scale-f, 1));
+  height: var(--nutui-indicator-track-width, calc(24px * var(--nut-scale-f, 1)));
   width: auto;
 }
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot {
-  width: calc(3px * var(--nut-scale-f, 1));
-  height: calc(12px * var(--nut-scale-f, 1));
+  width: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dual-screen-inactive-width, calc(16px * var(--nut-scale-f, 1)));
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
 }
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active {
-  height: calc(6px * var(--nut-scale-f, 1));
-}
-.nut-indicator-vertical.nut-indicator-fixed-width.nut-indicator-fixed-width.nut-indicator-white .nut-indicator-dot-active {
-  height: calc(6px * var(--nut-scale-f, 1));
+  width: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-active-size, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-indicator-line {
-  width: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
+  width: var(--nutui-indicator-slider-width, calc(8px * var(--nut-scale-f, 1)));
   margin: 0;
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
   background-color: transparent;
+  border: none;
 }
 .nut-indicator-line-active {
+  position: relative;
+  z-index: 1;
   transition: transform 0.3s ease-in-out;
   background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
+  border: var(--nutui-indicator-dot-border, calc(0.33px * var(--nut-scale-f, 1)) solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  transform: translateX(calc(var(--nutui-indicator-current, 0) / (var(--nutui-indicator-total, 2) - 1) * (var(--nutui-indicator-track-width, calc(24px * var(--nut-scale-f, 1))) - var(--nutui-indicator-slider-width, calc(8px * var(--nut-scale-f, 1))))));
+}
+.nut-indicator-outside {
+  margin-top: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+  margin-bottom: var(--nutui-indicator-placement-safe-gap, calc(12px * var(--nut-scale-f, 1)));
+  justify-content: center;
+}
+.nut-indicator-inside-top-right {
+  position: absolute;
+  top: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+  right: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+}
+.nut-indicator-inside-bottom-center {
+  position: absolute;
+  bottom: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+  left: 50%;
+  transform: translateX(-50%);
+}
+.nut-indicator-inside-bottom-left {
+  position: absolute;
+  bottom: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+  left: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
 }
 
 .nut-indicator-track {
@@ -86,32 +110,30 @@ page {
   height: 100%;
   box-sizing: border-box;
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
-  background-color: var(--nutui-color-border-disabled, #c2c4cc);
-  opacity: 0.4;
+  background-color: var(--nutui-indicator-dot-inactive-color, var(--nutui-color-background-component, #f0f2f7));
+  border: var(--nutui-indicator-dot-border, calc(0.33px * var(--nut-scale-f, 1)) solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 
 .nut-indicator-white .nut-indicator-dot, .nut-indicator-white .nut-indicator-line {
   position: relative;
-  /* #ifndef dynamic*/
-  box-sizing: content-box;
-  /* #endif */
-  background: rgba(255, 255, 255, 0.4);
-  opacity: 1;
+  background: var(--nutui-color-primary-text, #ffffff);
+  opacity: 0.4;
 }
 .nut-indicator-white .nut-indicator-line {
   opacity: 0;
 }
 .nut-indicator-white .nut-indicator-line-active {
   opacity: 1;
-  background: rgb(255, 255, 255);
+  background: var(--nutui-color-primary-text, #ffffff);
 }
 .nut-indicator-white .nut-indicator-dot-active {
-  background: rgb(255, 255, 255);
+  background: var(--nutui-color-primary-text, #ffffff);
+  opacity: 1;
 }
 
 .nut-indicator-track.nut-indicator-white:after {
-  border: calc(1px * var(--nut-scale-f, 1)) solid rgba(0, 0, 0, 0.06);
-  background: rgba(255, 255, 255, 0.4);
+  background: var(--nutui-color-primary-text, #ffffff);
+  opacity: 0.4;
 }
 
 .nut-indicator-vertical {
@@ -128,16 +150,29 @@ page {
   margin-top: 0;
 }
 .nut-indicator-vertical .nut-indicator-dot-active {
-  width: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
-  height: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
+  width: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-active-size, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-indicator-vertical.nut-indicator-track .nut-indicator-line {
-  width: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
-  height: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
+  width: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-slider-width, calc(8px * var(--nut-scale-f, 1)));
+}
+.nut-indicator-vertical.nut-indicator-track .nut-indicator-line-active {
+  transform: translateY(calc(var(--nutui-indicator-current, 0) / (var(--nutui-indicator-total, 2) - 1) * (var(--nutui-indicator-track-width, calc(24px * var(--nut-scale-f, 1))) - var(--nutui-indicator-slider-width, calc(8px * var(--nut-scale-f, 1))))));
 }
 
 [dir=rtl] .nut-indicator-dot-0,
 .nut-rtl .nut-indicator-dot-0 {
   margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
   margin-left: 0;
+}
+[dir=rtl] .nut-indicator-inside-top-right,
+.nut-rtl .nut-indicator-inside-top-right {
+  right: auto;
+  left: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+}
+[dir=rtl] .nut-indicator-inside-bottom-left,
+.nut-rtl .nut-indicator-inside-bottom-left {
+  left: auto;
+  right: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
 }