@nutui/nutui-react-taro 3.0.17-beta.0 → 3.0.18-cpp

package/dist/cjs/packages/avatar/style/style.harmony.css

@@ -2,21 +2,97 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
+.nut-image {
+  display: block;
+  position: relative;
+}
+.nut-image-default {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.nut-image.nut-image-round {
+  border-radius: 50%;
+  overflow: hidden;
+}
+.nut-image-basic {
+  width: 100%;
+  height: 100%;
+}
+.nut-image-loading {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--nutui-color-background, #f2f3f5);
+  background-size: 100% 100%;
+}
+.nut-image-error {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--nutui-color-background, #f2f3f5);
+  background-size: 100% 100%;
+}
+
+[dir=rtl] .nut-image .nut-img-loading,
+.nut-rtl .nut-image .nut-img-loading {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-image .nut-img-error,
+.nut-rtl .nut-image .nut-img-error {
+  left: auto;
+  right: 0;
+}
+
+.nut-avatar-group {
+  display: flex;
+  flex-direction: row;
+  flex: 0 0 auto;
+}
+.nut-avatar-group-avatar,
+.nut-avatar-group .nut-avatar {
+  border: 1px solid #fff;
+  margin-left: -8px;
+}
+.nut-avatar-group-avatar:not(:first-of-type),
+.nut-avatar-group .nut-avatar:not(:first-of-type) {
+  margin-left: -8px;
+}
+
+[dir=rtl] .nut-avatar-group .nut-avatar:not(:first-of-type),
+.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type) {
+  margin-left: 0;
+  margin-right: -8px;
+}
+
 .nut-avatar {
   position: relative;
   flex: 0 0 auto;
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 40px;
-  height: 40px;
+  width: var(--nutui-avatar-normal-width, 40px);
+  height: var(--nutui-avatar-normal-height, 40px);
 }
 .nut-avatar-round {
   border-radius: 999px;
   overflow: hidden;
 }
 .nut-avatar-square {
-  border-radius: 5px;
+  border-radius: var(--nutui-avatar-square, 5px);
 }
 .nut-avatar-first-child {
   margin-left: 0;
@@ -39,26 +115,26 @@
   align-items: center;
 }
 .nut-avatar-large {
-  width: 60px;
-  height: 60px;
+  width: var(--nutui-avatar-large-width, 60px);
+  height: var(--nutui-avatar-large-height, 60px);
 }
 .nut-avatar-large-img {
-  width: 60px;
-  height: 60px;
+  width: var(--nutui-avatar-large-width, 60px);
+  height: var(--nutui-avatar-large-height, 60px);
 }
 .nut-avatar-large-icon {
-  width: 60px;
-  height: 60px;
+  width: var(--nutui-avatar-large-width, 60px);
+  height: var(--nutui-avatar-large-height, 60px);
 }
 .nut-avatar-large-text {
-  width: 60px;
-  height: 60px;
+  width: var(--nutui-avatar-large-width, 60px);
+  height: var(--nutui-avatar-large-height, 60px);
 }
 .nut-avatar-small {
-  width: 32px;
-  height: 32px;
+  width: var(--nutui-avatar-small-width, 32px);
+  height: var(--nutui-avatar-small-height, 32px);
 }
 .nut-avatar-small-text {
-  width: 32px;
-  height: 32px;
+  width: var(--nutui-avatar-small-width, 32px);
+  height: var(--nutui-avatar-small-height, 32px);
 }

package/dist/cjs/packages/avatarcropper/style/style.harmony.css

@@ -35,7 +35,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.7);
+  background: var(--nut-overlay-bg-color, rgba(0, 0, 0, 0.7));
   z-index: 1000;
 }
 .nut-avatar-cropper-popup-canvas, .nut-avatar-cropper-popup-cut-canvas {

package/dist/cjs/packages/backtop/style/style.harmony.css

@@ -2,6 +2,132 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
+.nut-hoverbutton-item-container {
+  width: var(--nutui-hoverbutton-item-size, 40px);
+  height: var(--nutui-hoverbutton-item-size, 40px);
+  border-radius: var(--nutui-hoverbutton-item-size, 40px);
+  border: 1px solid var(--nutui-hoverbutton-item-border-color, rgba(0, 0, 0, 0.12));
+  background-color: var(--nutui-hoverbutton-item-background, var(--nutui-white-12));
+}
+.nut-hoverbutton-item-container:active, .nut-hoverbutton-item-container-active {
+  background-color: var(--nutui-hoverbutton-item-background-active, rgba(247, 248, 252, 0.9));
+}
+.nut-hoverbutton-item-container-harmony {
+  margin-bottom: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, 8px));
+}
+.nut-hoverbutton-item-container-harmony:last-child {
+  margin-bottom: 0;
+}
+.nut-hoverbutton-item-container-icontext {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.nut-hoverbutton-item-container-icontext .nut-icon {
+  display: block;
+  width: 14px;
+  height: 14px;
+  font-size: 14px;
+}
+.nut-hoverbutton-item-icon {
+  width: 20px;
+  height: 20px;
+  margin: 9px;
+  color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
+  fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
+}
+.nut-hoverbutton-item-icon .nut-icon {
+  display: block;
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+}
+.nut-hoverbutton-item-container:active .nut-hoverbutton-item-icon {
+  color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
+  fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
+}
+.nut-hoverbutton-item-text-icon {
+  width: 14px;
+  height: 5px;
+}
+.nut-hoverbutton-item-text {
+  font-size: 10px;
+  margin-top: 5px;
+  line-height: 9px;
+}
+
+.nut-hoverbutton {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, 8px));
+}
+.nut-hoverbutton-container {
+  position: fixed;
+  right: var(--nutui-hoverbutton-position-right, var(--nutui-spacing-base, 8px));
+  bottom: var(--nutui-hoverbutton-position-bottom, 60px);
+  z-index: 10;
+}
+
+[dir=rtl] .nut-hoverbutton-container,
+.nut-hoverbutton-container-rtl {
+  right: auto;
+  left: var(--nutui-hoverbutton-position-right, var(--nutui-spacing-base, 8px));
+}
+
+.nut-hoverbutton-item-container {
+  width: var(--nutui-hoverbutton-item-size, 40px);
+  height: var(--nutui-hoverbutton-item-size, 40px);
+  border-radius: var(--nutui-hoverbutton-item-size, 40px);
+  border: 1px solid var(--nutui-hoverbutton-item-border-color, rgba(0, 0, 0, 0.12));
+  background-color: var(--nutui-hoverbutton-item-background, var(--nutui-white-12));
+}
+.nut-hoverbutton-item-container:active, .nut-hoverbutton-item-container-active {
+  background-color: var(--nutui-hoverbutton-item-background-active, rgba(247, 248, 252, 0.9));
+}
+.nut-hoverbutton-item-container-harmony {
+  margin-bottom: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, 8px));
+}
+.nut-hoverbutton-item-container-harmony:last-child {
+  margin-bottom: 0;
+}
+.nut-hoverbutton-item-container-icontext {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.nut-hoverbutton-item-container-icontext .nut-icon {
+  display: block;
+  width: 14px;
+  height: 14px;
+  font-size: 14px;
+}
+.nut-hoverbutton-item-icon {
+  width: 20px;
+  height: 20px;
+  margin: 9px;
+  color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
+  fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
+}
+.nut-hoverbutton-item-icon .nut-icon {
+  display: block;
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+}
+.nut-hoverbutton-item-container:active .nut-hoverbutton-item-icon {
+  color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
+  fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
+}
+.nut-hoverbutton-item-text-icon {
+  width: 14px;
+  height: 5px;
+}
+.nut-hoverbutton-item-text {
+  font-size: 10px;
+  margin-top: 5px;
+  line-height: 9px;
+}
+
 .nut-backtop {
   display: none;
 }
@@ -9,8 +135,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: var(--nutui-hoverbutton-item-size, 40px);
+  height: var(--nutui-hoverbutton-item-size, 40px);
   transition: all 0.2s ease-in-out;
 }
 .nut-backtop-show .nut-hoverbutton-item-container {

package/dist/cjs/packages/badge/style/style.harmony.css

@@ -13,34 +13,20 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: #ff0f23;
-  padding: 2px;
+  background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
+  padding: var(--nutui-badge-icon-padding, 2px);
   text-align: center;
-  z-index: 1;
+  z-index: var(--nutui-badge-z-index, 1);
 }
 .nut-badge-icon .nut-icon {
-  width: 10px;
-  height: 10px;
-  font-size: 10px;
-}
-.nut-badge-sup {
-  border-radius: 14px;
+  width: var(--nutui-badge-icon-size, 10px);
+  height: var(--nutui-badge-icon-size, 10px);
+  font-size: var(--nutui-badge-icon-size, 10px);
 }
-.nut-badge-icon {
-  border-radius: 14px;
-}
-.nut-badge-sup::after {
-  content: "";
-  position: absolute;
-  top: -50%;
-  bottom: -50%;
-  left: -50%;
-  right: -50%;
-  transform: scale(0.5);
-  border: 1px solid #ffffff;
-  border-radius: 14px;
+.nut-badge-sup, .nut-badge-icon {
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
 }
-.nut-badge-icon::after {
+.nut-badge-sup::after, .nut-badge-icon::after {
   content: "";
   position: absolute;
   top: -50%;
@@ -48,65 +34,65 @@
   left: -50%;
   right: -50%;
   transform: scale(0.5);
-  border: 1px solid #ffffff;
-  border-radius: 14px;
+  border: var(--nutui-badge-border, 1px solid #ffffff);
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
 }
 .nut-badge-sup {
   display: inline-flex;
   text-align: center;
-  min-width: 6px;
-  padding: 1px 4px;
+  min-width: var(--nutui-badge-min-width, 6px);
+  padding: var(--nutui-badge-padding, 1px 4px);
   box-sizing: border-box;
-  color: #ffffff;
-  font-size: 9px;
+  color: var(--nutui-badge-color, #ffffff);
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, 9px));
   line-height: 12px;
   white-space: nowrap;
   font-weight: normal;
   vertical-align: middle;
-  background: #ff0f23;
+  background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
   z-index: 1;
 }
 .nut-badge-disabled {
-  background: #c2c4cc;
+  background: var(--nutui-badge-background-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-badge-number {
   font-family: "JD";
 }
 .nut-badge-one {
-  height: 14px;
-  width: 14px;
+  height: var(--nutui-badge-height, 14px);
+  width: var(--nutui-badge-height, 14px);
 }
 .nut-badge-content {
   position: absolute;
-  transform: translate(50%, -50%);
+  transform: var(--nutui-badge-content-transform, translate(50%, -50%));
 }
 .nut-badge-dot {
   padding: 0;
   border-radius: 50%;
 }
 .nut-badge-dot::after {
-  border: 1px solid #ffffff;
+  border: var(--nutui-badge-dot-border, 1px solid #ffffff);
   border-radius: 50%;
 }
 .nut-badge-dot-normal {
-  min-width: 6px;
-  width: 6px;
-  height: 6px;
+  min-width: var(--nutui-badge-dot-width, 6px);
+  width: var(--nutui-badge-dot-width, 6px);
+  height: var(--nutui-badge-dot-width, 6px);
 }
 .nut-badge-dot-small {
-  min-width: 4px;
-  width: 4px;
-  height: 4px;
+  min-width: var(--nutui-badge-dot-small-width, 4px);
+  width: var(--nutui-badge-dot-small-width, 4px);
+  height: var(--nutui-badge-dot-small-width, 4px);
 }
 .nut-badge-dot-large {
-  min-width: 8px;
-  width: 8px;
-  height: 8px;
+  min-width: var(--nutui-badge-dot-large-width, 8px);
+  width: var(--nutui-badge-dot-large-width, 8px);
+  height: var(--nutui-badge-dot-large-width, 8px);
 }
 .nut-badge-outline {
   background: #ffffff;
-  color: #ff0f23;
+  color: var(--nutui-badge-outline-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-badge-outline::after {
-  border: 1px solid #ff0f23;
+  border: var(--nutui-badge-outline-border, 1px solid var(--nutui-color-primary, #ff0f23));
 }

package/dist/cjs/packages/barrage/style/style.harmony.css

@@ -10,8 +10,8 @@
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
-  background-color: #f2f3f5;
-  color: #1a1a1a;
+  background-color: var(--nutui-color-background, #f2f3f5);
+  color: var(--nutui-color-title, #1a1a1a);
 }
 .nut-barrage .barrage-item {
   display: block;
@@ -19,11 +19,11 @@
   right: 0;
   padding: 4px 16px;
   border-radius: 16px;
-  font-size: 12px;
+  font-size: var(--nutui-font-size-s, 12px);
   text-align: center;
   white-space: pre;
   transform: translateX(100%);
-  background: linear-gradient(to right, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
+  background: linear-gradient(to right, var(--nutui-black-3), var(--nutui-black-1));
   box-sizing: border-box;
 }
 .nut-barrage .barrage-item.move {
@@ -37,7 +37,7 @@
     transform: translateX(100%);
   }
   to {
-    transform: undefined;
+    transform: translateX(var(--move-distance));
   }
 }
 @-webkit-keyframes moving {
@@ -45,7 +45,7 @@
     -webkit-transform: translateX(100%);
   }
   to {
-    -webkit-transform: undefined;
+    -webkit-transform: translateX(var(--move-distance));
   }
 }
 
@@ -54,13 +54,10 @@
   left: auto;
   right: 0;
 }
-[dir=rtl] .nut-barrage .barrage-item {
-  transform: translateX(-100%);
-  background: linear-gradient(to left, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
-}
+[dir=rtl] .nut-barrage .barrage-item,
 .nut-rtl .nut-barrage .barrage-item {
   transform: translateX(-100%);
-  background: linear-gradient(to left, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
+  background: linear-gradient(to left, var(--nutui-black-3), var(--nutui-black-1));
 }
 [dir=rtl] .nut-barrage .barrage-item.move,
 .nut-rtl .nut-barrage .barrage-item.move {
@@ -68,7 +65,7 @@
 }
 @keyframes moving-rtl {
   from {
-    transform: undefined;
+    transform: translateX(var(--move-distance));
   }
   to {
     transform: translateX(100%);
@@ -76,7 +73,7 @@
 }
 @-webkit-keyframes moving-rtl {
   from {
-    transform: undefined;
+    transform: translateX(var(--move-distance));
   }
   to {
     transform: translateX(100%);