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

package/dist/es/packages/empty/style-jmapp/style.css

@@ -9,51 +9,96 @@
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  padding: var(--nutui-empty-padding, 32px 40px);
-  background-color: var(--nutui-empty-background-color, #fff);
+  padding: var(--nutui-empty-padding, 20px);
 }
-.nut-empty-base {
-  width: var(--nutui-empty-image-size, 160px);
-  height: var(--nutui-empty-image-size, 160px);
-}
-.nut-empty-base img,
-.nut-empty-base image {
-  width: 100%;
-  height: 100%;
-}
-.nut-empty-small {
-  width: var(--nutui-empty-image-small-size, 120px);
-  height: var(--nutui-empty-image-small-size, 120px);
-}
-.nut-empty-small img,
-.nut-empty-small image {
+.nut-empty-image img,
+.nut-empty-image image {
   width: 100%;
   height: 100%;
 }
 .nut-empty-title {
-  margin-top: var(--nutui-empty-title-margin-top, 0px);
+  text-align: center;
+  color: var(--nutui-empty-title-color, var(--nutui-color-title));
   font-weight: var(--nutui-font-weight-bold);
-  margin-bottom: var(--nutui-empty-title-margin-bottom, 8px);
-  color: var(--nutui-color-title);
-  font-size: var(--nutui-font-text-large);
-  line-height: var(--nutui-empty-title-line-height, var(--nutui-font-text));
 }
 .nut-empty-description {
-  color: var(--nutui-color-text);
-  font-size: var(--nutui-font-text-small);
-  line-height: var(--nutui-empty-description-line-height, 1.2);
-}
-.nut-empty-actions-base {
-  display: flex;
-  flex-direction: row;
-  margin-top: scale-px(24px);
+  text-align: center;
+  color: var(--nutui-empty-description-color, var(--nutui-color-text-help));
+  font-weight: var(--nutui-font-weight);
 }
-.nut-empty-actions-small {
+.nut-empty-actions {
   display: flex;
   flex-direction: row;
-  margin-top: scale-px(16px);
+  justify-content: center;
 }
 .nut-empty-action {
   margin-right: scale-px(6px);
   margin-left: scale-px(6px);
+}
+.nut-empty-partial-body {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  max-width: 100%;
+}
+.nut-empty-content {
+  flex: 1;
+  min-width: 0;
+}
+.nut-empty--full {
+  padding-top: var(--nutui-empty-full-padding-top, 160px);
+}
+.nut-empty--full .nut-empty-image {
+  width: var(--nutui-empty-full-image-size, 160px);
+  height: var(--nutui-empty-full-image-size, 160px);
+}
+.nut-empty--full .nut-empty-title {
+  font-size: var(--nutui-empty-full-title-font-size, var(--nutui-font-size-md, 16px));
+  line-height: var(--nutui-empty-full-title-line-height, var(--nutui-line-height-xxl, var(--nutui-font-size-8)));
+}
+.nut-empty--full .nut-empty-description {
+  font-size: var(--nutui-empty-full-description-font-size, var(--nutui-font-text));
+  line-height: var(--nutui-empty-full-description-line-height, 22px);
+}
+.nut-empty--full .nut-empty-actions {
+  margin-top: var(--nutui-empty-full-actions-margin-top, 8px);
+}
+.nut-empty--half .nut-empty-image {
+  width: var(--nutui-empty-half-image-size, 80px);
+  height: var(--nutui-empty-half-image-size, 80px);
+}
+.nut-empty--half .nut-empty-title {
+  font-size: var(--nutui-empty-half-title-font-size, var(--nutui-font-text-small));
+  line-height: var(--nutui-empty-half-title-line-height, 22px);
+}
+.nut-empty--half .nut-empty-description {
+  font-size: var(--nutui-empty-half-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
+  line-height: var(--nutui-empty-half-description-line-height, var(--nutui-line-height-2xl, var(--nutui-font-size-2xl, 20px)));
+}
+.nut-empty--half .nut-empty-actions {
+  margin-top: var(--nutui-empty-half-actions-margin-top, 8px);
+}
+.nut-empty--partial {
+  padding: var(--nutui-empty-partial-padding, 0px 16px);
+}
+.nut-empty--partial .nut-empty-partial-body {
+  gap: var(--nutui-empty-partial-content-gap, 8px);
+}
+.nut-empty--partial .nut-empty-image {
+  width: var(--nutui-empty-partial-image-size, 32px);
+  height: var(--nutui-empty-partial-image-size, 32px);
+}
+.nut-empty--partial .nut-empty-title {
+  text-align: left;
+  font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
+  line-height: var(--nutui-empty-partial-description-line-height, 32px);
+  color: var(--nutui-empty-title-color, var(--nutui-color-title));
+  font-weight: var(--nutui-font-weight);
+}
+.nut-empty--partial .nut-empty-description {
+  text-align: left;
+  font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
+  line-height: var(--nutui-empty-partial-description-line-height, 32px);
+  color: var(--nutui-empty-description-color, var(--nutui-color-text-help));
+  font-weight: var(--nutui-font-weight);
 }

package/dist/es/packages/empty/style-jrkf/empty.scss

@@ -6,23 +6,8 @@
   flex-direction: column;
   justify-content: center;
   padding: $empty-padding;
-  background-color: $empty-background-color;
-
-  &-base {
-    width: $empty-image-size;
-    height: $empty-image-size;
-
-    img,
-    image {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &-small {
-    width: $empty-image-small-size;
-    height: $empty-image-small-size;
 
+  &-image {
     img,
     image {
       width: 100%;
@@ -31,32 +16,113 @@
   }
 
   &-title {
-    margin-top: $empty-title-margin-top;
+    text-align: center;
+    color: $empty-title-color;
     font-weight: $font-weight-bold;
-    margin-bottom: $empty-title-margin-bottom;
-    color: $color-title;
-    font-size: $font-size-l;
-    line-height: $empty-title-line-height;
   }
 
   &-description {
-    color: $color-text;
-    font-size: $font-size-s;
-    line-height: $empty-description-line-height;
-  }
-  &-actions-base {
-    display: flex;
-    flex-direction: row;
-    margin-top: scale-px(24px);
+    text-align: center;
+    color: $empty-description-color;
+    font-weight: $font-weight;
   }
-  &-actions-small {
+
+  &-actions {
     display: flex;
     flex-direction: row;
-    margin-top: scale-px(16px);
+    justify-content: center;
   }
 
   &-action {
     margin-right: scale-px(6px);
     margin-left: scale-px(6px);
   }
+
+  &-partial-body {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    max-width: 100%;
+  }
+
+  &-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  // 全屏型：整页无数据
+  &--full {
+    padding-top: $empty-full-padding-top;
+
+    .nut-empty-image {
+      width: $empty-full-image-size;
+      height: $empty-full-image-size;
+    }
+
+    .nut-empty-title {
+      font-size: $empty-full-title-font-size;
+      line-height: $empty-full-title-line-height;
+    }
+
+    .nut-empty-description {
+      font-size: $empty-full-description-font-size;
+      line-height: $empty-full-description-line-height;
+    }
+
+    .nut-empty-actions {
+      margin-top: $empty-full-actions-margin-top;
+    }
+  }
+
+  // 半屏型：模块、弹层等区域
+  &--half {
+    .nut-empty-image {
+      width: $empty-half-image-size;
+      height: $empty-half-image-size;
+    }
+
+    .nut-empty-title {
+      font-size: $empty-half-title-font-size;
+      line-height: $empty-half-title-line-height;
+    }
+
+    .nut-empty-description {
+      font-size: $empty-half-description-font-size;
+      line-height: $empty-half-description-line-height;
+    }
+
+    .nut-empty-actions {
+      margin-top: $empty-half-actions-margin-top;
+    }
+  }
+
+  // 局部型：横向图文
+  &--partial {
+    padding: $empty-partial-padding;
+
+    .nut-empty-partial-body {
+      gap: $empty-partial-content-gap;
+    }
+
+    .nut-empty-image {
+      width: $empty-partial-image-size;
+      height: $empty-partial-image-size;
+    }
+
+    .nut-empty-title {
+      text-align: left;
+      font-size: $empty-partial-description-font-size;
+      line-height: $empty-partial-description-line-height;
+      color: $empty-title-color;
+      font-weight: $font-weight;
+    }
+
+    .nut-empty-description {
+      text-align: left;
+      font-size: $empty-partial-description-font-size;
+      line-height: $empty-partial-description-line-height;
+      color: $empty-description-color;
+      font-weight: $font-weight;
+    }
+  }
 }

package/dist/es/packages/empty/style-jrkf/style.css

@@ -9,51 +9,96 @@
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  padding: var(--nutui-empty-padding, 32px 40px);
-  background-color: var(--nutui-empty-background-color, #fff);
+  padding: var(--nutui-empty-padding, 20px);
 }
-.nut-empty-base {
-  width: var(--nutui-empty-image-size, 160px);
-  height: var(--nutui-empty-image-size, 160px);
-}
-.nut-empty-base img,
-.nut-empty-base image {
-  width: 100%;
-  height: 100%;
-}
-.nut-empty-small {
-  width: var(--nutui-empty-image-small-size, 120px);
-  height: var(--nutui-empty-image-small-size, 120px);
-}
-.nut-empty-small img,
-.nut-empty-small image {
+.nut-empty-image img,
+.nut-empty-image image {
   width: 100%;
   height: 100%;
 }
 .nut-empty-title {
-  margin-top: var(--nutui-empty-title-margin-top, 0px);
+  text-align: center;
+  color: var(--nutui-empty-title-color, var(--nutui-color-title));
   font-weight: var(--nutui-font-weight-bold);
-  margin-bottom: var(--nutui-empty-title-margin-bottom, 8px);
-  color: var(--nutui-color-title);
-  font-size: var(--nutui-font-text-large);
-  line-height: var(--nutui-empty-title-line-height, var(--nutui-font-text));
 }
 .nut-empty-description {
-  color: var(--nutui-color-text);
-  font-size: var(--nutui-font-text-small);
-  line-height: var(--nutui-empty-description-line-height, 1.2);
-}
-.nut-empty-actions-base {
-  display: flex;
-  flex-direction: row;
-  margin-top: scale-px(24px);
+  text-align: center;
+  color: var(--nutui-empty-description-color, var(--nutui-color-text-help));
+  font-weight: var(--nutui-font-weight);
 }
-.nut-empty-actions-small {
+.nut-empty-actions {
   display: flex;
   flex-direction: row;
-  margin-top: scale-px(16px);
+  justify-content: center;
 }
 .nut-empty-action {
   margin-right: scale-px(6px);
   margin-left: scale-px(6px);
+}
+.nut-empty-partial-body {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  max-width: 100%;
+}
+.nut-empty-content {
+  flex: 1;
+  min-width: 0;
+}
+.nut-empty--full {
+  padding-top: var(--nutui-empty-full-padding-top, 160px);
+}
+.nut-empty--full .nut-empty-image {
+  width: var(--nutui-empty-full-image-size, 160px);
+  height: var(--nutui-empty-full-image-size, 160px);
+}
+.nut-empty--full .nut-empty-title {
+  font-size: var(--nutui-empty-full-title-font-size, var(--nutui-font-size-md, 16px));
+  line-height: var(--nutui-empty-full-title-line-height, var(--nutui-line-height-xxl, var(--nutui-font-size-8)));
+}
+.nut-empty--full .nut-empty-description {
+  font-size: var(--nutui-empty-full-description-font-size, var(--nutui-font-text));
+  line-height: var(--nutui-empty-full-description-line-height, 22px);
+}
+.nut-empty--full .nut-empty-actions {
+  margin-top: var(--nutui-empty-full-actions-margin-top, 8px);
+}
+.nut-empty--half .nut-empty-image {
+  width: var(--nutui-empty-half-image-size, 80px);
+  height: var(--nutui-empty-half-image-size, 80px);
+}
+.nut-empty--half .nut-empty-title {
+  font-size: var(--nutui-empty-half-title-font-size, var(--nutui-font-text-small));
+  line-height: var(--nutui-empty-half-title-line-height, 22px);
+}
+.nut-empty--half .nut-empty-description {
+  font-size: var(--nutui-empty-half-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
+  line-height: var(--nutui-empty-half-description-line-height, var(--nutui-line-height-2xl, var(--nutui-font-size-2xl, 20px)));
+}
+.nut-empty--half .nut-empty-actions {
+  margin-top: var(--nutui-empty-half-actions-margin-top, 8px);
+}
+.nut-empty--partial {
+  padding: var(--nutui-empty-partial-padding, 0px 16px);
+}
+.nut-empty--partial .nut-empty-partial-body {
+  gap: var(--nutui-empty-partial-content-gap, 8px);
+}
+.nut-empty--partial .nut-empty-image {
+  width: var(--nutui-empty-partial-image-size, 32px);
+  height: var(--nutui-empty-partial-image-size, 32px);
+}
+.nut-empty--partial .nut-empty-title {
+  text-align: left;
+  font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
+  line-height: var(--nutui-empty-partial-description-line-height, 32px);
+  color: var(--nutui-empty-title-color, var(--nutui-color-title));
+  font-weight: var(--nutui-font-weight);
+}
+.nut-empty--partial .nut-empty-description {
+  text-align: left;
+  font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
+  line-height: var(--nutui-empty-partial-description-line-height, 32px);
+  color: var(--nutui-empty-description-color, var(--nutui-color-text-help));
+  font-weight: var(--nutui-font-weight);
 }

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")
         });