@nutui/nutui-react-taro 3.0.21-cpp → 4.0.0-beta.1

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

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --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 */
@@ -15,9 +25,9 @@
 .nut-menu-bar {
   position: relative;
   display: flex;
-  line-height: var(--nutui-menu-bar-line-height, 48px);
+  line-height: var(--nutui-menu-bar-line-height, calc(48px * var(--nut-scale-f, 1)));
   background-color: var(--nutui-color-background-overlay, #ffffff);
-  box-shadow: var(--nutui-menu-bar-box-shadow, 0 2px 12px rgba(89, 89, 89, 0.12));
+  box-shadow: var(--nutui-menu-bar-box-shadow, 0 calc(2px * var(--nut-scale-f, 1)) calc(12px * var(--nut-scale-f, 1)) rgba(89, 89, 89, 0.12));
 }
 .nut-menu-bar.opened {
   z-index: var(--nutui-menu-bar-opened-z-index, 1000);
@@ -26,7 +36,7 @@
 .nut-menu-title {
   flex: 1;
   text-align: center;
-  font-size: var(--nutui-menu-title-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-menu-title-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-menu-title-color, var(--nutui-color-title, #1a1a1a));
   min-width: 0;
   display: flex;
@@ -39,9 +49,11 @@
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
-  padding: var(--nutui-menu-title-padding, 0 8px);
+  padding: var(--nutui-menu-title-padding, 0 calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-menu-title-icon {
+  width: var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
+  height: var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
   flex-shrink: 0;
   transition: all 0.2s linear;
 }

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

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --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 */
@@ -57,8 +67,8 @@
 }
 
 .nut-menu-container-content {
-  padding: var(--nutui-menu-content-padding, 12px 24px);
-  max-height: var(--nutui-menu-content-max-height, 214px);
+  padding: var(--nutui-menu-content-padding, calc(12px * var(--nut-scale-f, 1)) calc(24px * var(--nut-scale-f, 1)));
+  max-height: var(--nutui-menu-content-max-height, calc(214px * var(--nut-scale-f, 1)));
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
@@ -73,13 +83,17 @@
   display: flex;
   align-items: center;
   color: var(--nutui-color-title, #1a1a1a);
-  font-size: var(--nutui-font-size-base, 14px);
-  padding: var(--nutui-menu-item-padding, 12px 0);
+  font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  padding: var(--nutui-menu-item-padding, calc(12px * var(--nut-scale-f, 1)) 0);
 }
 .nut-menu-container-item.active {
   font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 600));
   color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
 }
+.nut-menu-container-item-icon {
+  display: flex;
+  align-items: center;
+}
 .nut-menu-container-item .nut-icon {
   /* #ifdef dynamic*/
   display: flex;
@@ -88,7 +102,7 @@
   display: inline-flex;
   /* #endif */
   align-items: center;
-  margin-right: var(--nutui-menu-item-icon-margin, 8px);
+  margin-right: var(--nutui-menu-item-icon-margin, calc(8px * var(--nut-scale-f, 1)));
   flex-shrink: 0;
 }
 .nut-menu-container-wrap, .nut-menu-container-wrap-up {
@@ -98,7 +112,7 @@
   overflow: hidden;
 }
 .nut-menu-container-wrap-up {
-  bottom: var(--nutui-menu-bar-line-height, 48px);
+  bottom: var(--nutui-menu-bar-line-height, calc(48px * var(--nut-scale-f, 1)));
 }
 
 .overlay-fade-enter-active.nut-menu-container-overlay {
@@ -163,7 +177,7 @@
 [dir=rtl] .nut-menu-container-item .nut-icon,
 .nut-rtl .nut-menu-container-item .nut-icon {
   margin-right: 0;
-  margin-left: var(--nutui-menu-item-icon-margin, 8px);
+  margin-left: var(--nutui-menu-item-icon-margin, calc(8px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-menu-container .nut-icon,
 .nut-rtl .nut-menu-container .nut-icon {
@@ -183,9 +197,9 @@
 .nut-menu-bar {
   position: relative;
   display: flex;
-  line-height: var(--nutui-menu-bar-line-height, 48px);
+  line-height: var(--nutui-menu-bar-line-height, calc(48px * var(--nut-scale-f, 1)));
   background-color: var(--nutui-color-background-overlay, #ffffff);
-  box-shadow: var(--nutui-menu-bar-box-shadow, 0 2px 12px rgba(89, 89, 89, 0.12));
+  box-shadow: var(--nutui-menu-bar-box-shadow, 0 calc(2px * var(--nut-scale-f, 1)) calc(12px * var(--nut-scale-f, 1)) rgba(89, 89, 89, 0.12));
 }
 .nut-menu-bar.opened {
   z-index: var(--nutui-menu-bar-opened-z-index, 1000);
@@ -194,7 +208,7 @@
 .nut-menu-title {
   flex: 1;
   text-align: center;
-  font-size: var(--nutui-menu-title-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-menu-title-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-menu-title-color, var(--nutui-color-title, #1a1a1a));
   min-width: 0;
   display: flex;
@@ -207,9 +221,11 @@
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
-  padding: var(--nutui-menu-title-padding, 0 8px);
+  padding: var(--nutui-menu-title-padding, 0 calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-menu-title-icon {
+  width: var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
+  height: var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
   flex-shrink: 0;
   transition: all 0.2s linear;
 }

package/dist/cjs/packages/menu/style-jmapp/menu.scss

@@ -41,6 +41,8 @@
   }
 
   &-icon {
+    width: $icon-size-12;
+    height: $icon-size-12;
     flex-shrink: 0;
     transition: all 0.2s linear;
   }

package/dist/cjs/packages/menu/style-jmapp/style.css

@@ -42,6 +42,8 @@
   padding: var(--nutui-menu-title-padding, 0 8px);
 }
 .nut-menu-title-icon {
+  width: var(--nutui-icon-size-12, 12px);
+  height: var(--nutui-icon-size-12, 12px);
   flex-shrink: 0;
   transition: all 0.2s linear;
 }

package/dist/cjs/packages/menu/style-jrkf/menu.scss

@@ -41,6 +41,8 @@
   }
 
   &-icon {
+    width: $icon-size-12;
+    height: $icon-size-12;
     flex-shrink: 0;
     transition: all 0.2s linear;
   }

package/dist/cjs/packages/menu/style-jrkf/style.css

@@ -42,6 +42,8 @@
   padding: var(--nutui-menu-title-padding, 0 8px);
 }
 .nut-menu-title-icon {
+  width: var(--nutui-icon-size-12, 12px);
+  height: var(--nutui-icon-size-12, 12px);
   flex-shrink: 0;
   transition: all 0.2s linear;
 }

package/dist/cjs/packages/menuitem/menuitem.js

@@ -216,7 +216,6 @@ var MenuItem = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
             className: "nut-menu-container-item-icon ".concat(icon.props.className || '')
         }) : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Check, {
             color: activeColor,
-            size: 16,
             className: "nut-menu-container-item-icon ".concat(getIconCName(item.value, value))
         })) : null, /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "nut-menu-container-item-title ".concat(getIconCName(item.value, value)),

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

@@ -26,6 +26,11 @@
       color: $menu-item-active-color;
     }
 
+    &-icon {
+      display: flex;
+      align-items: center;
+    }
+
     .nut-icon {
       /* #ifdef dynamic*/
       display: flex;
@@ -72,7 +77,7 @@
 
 .nut-menu-container-down-enter {
   opacity: 0;
-  transform: translate(0, -30px);
+  transform: translate(0, scale-px(-30px));
 }
 
 .nut-menu-container-down-enter-done {
@@ -93,7 +98,7 @@
 
 .nut-menu-container-up-enter {
   opacity: 0;
-  transform: translate(0, 30px);
+  transform: translate(0, scale-px(30px));
 }
 
 .nut-menu-container-up-enter-done {

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

@@ -1,10 +1,20 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --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 */
 .nut-menu-container-content {
-  padding: var(--nutui-menu-content-padding, 12px 24px);
-  max-height: var(--nutui-menu-content-max-height, 214px);
+  padding: var(--nutui-menu-content-padding, calc(12px * var(--nut-scale-f, 1)) calc(24px * var(--nut-scale-f, 1)));
+  max-height: var(--nutui-menu-content-max-height, calc(214px * var(--nut-scale-f, 1)));
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
@@ -19,13 +29,17 @@
   display: flex;
   align-items: center;
   color: var(--nutui-color-title, #1a1a1a);
-  font-size: var(--nutui-font-size-base, 14px);
-  padding: var(--nutui-menu-item-padding, 12px 0);
+  font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  padding: var(--nutui-menu-item-padding, calc(12px * var(--nut-scale-f, 1)) 0);
 }
 .nut-menu-container-item.active {
   font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 600));
   color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
 }
+.nut-menu-container-item-icon {
+  display: flex;
+  align-items: center;
+}
 .nut-menu-container-item .nut-icon {
   /* #ifdef dynamic*/
   display: flex;
@@ -34,7 +48,7 @@
   display: inline-flex;
   /* #endif */
   align-items: center;
-  margin-right: var(--nutui-menu-item-icon-margin, 8px);
+  margin-right: var(--nutui-menu-item-icon-margin, calc(8px * var(--nut-scale-f, 1)));
   flex-shrink: 0;
 }
 .nut-menu-container-wrap, .nut-menu-container-wrap-up {
@@ -44,7 +58,7 @@
   overflow: hidden;
 }
 .nut-menu-container-wrap-up {
-  bottom: var(--nutui-menu-bar-line-height, 48px);
+  bottom: var(--nutui-menu-bar-line-height, calc(48px * var(--nut-scale-f, 1)));
 }
 
 .overlay-fade-enter-active.nut-menu-container-overlay {
@@ -66,7 +80,7 @@
 
 .nut-menu-container-down-enter {
   opacity: 0;
-  transform: translate(0, -30px);
+  transform: translate(0, calc(-30px * var(--nut-scale-f, 1)));
 }
 
 .nut-menu-container-down-enter-done {
@@ -87,7 +101,7 @@
 
 .nut-menu-container-up-enter {
   opacity: 0;
-  transform: translate(0, 30px);
+  transform: translate(0, calc(30px * var(--nut-scale-f, 1)));
 }
 
 .nut-menu-container-up-enter-done {
@@ -109,7 +123,7 @@
 [dir=rtl] .nut-menu-container-item .nut-icon,
 .nut-rtl .nut-menu-container-item .nut-icon {
   margin-right: 0;
-  margin-left: var(--nutui-menu-item-icon-margin, 8px);
+  margin-left: var(--nutui-menu-item-icon-margin, calc(8px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-menu-container .nut-icon,
 .nut-rtl .nut-menu-container .nut-icon {

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

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --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 */
@@ -57,8 +67,8 @@
 }
 
 .nut-menu-container-content {
-  padding: var(--nutui-menu-content-padding, 12px 24px);
-  max-height: var(--nutui-menu-content-max-height, 214px);
+  padding: var(--nutui-menu-content-padding, calc(12px * var(--nut-scale-f, 1)) calc(24px * var(--nut-scale-f, 1)));
+  max-height: var(--nutui-menu-content-max-height, calc(214px * var(--nut-scale-f, 1)));
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
@@ -73,13 +83,17 @@
   display: flex;
   align-items: center;
   color: var(--nutui-color-title, #1a1a1a);
-  font-size: var(--nutui-font-size-base, 14px);
-  padding: var(--nutui-menu-item-padding, 12px 0);
+  font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  padding: var(--nutui-menu-item-padding, calc(12px * var(--nut-scale-f, 1)) 0);
 }
 .nut-menu-container-item.active {
   font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 600));
   color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
 }
+.nut-menu-container-item-icon {
+  display: flex;
+  align-items: center;
+}
 .nut-menu-container-item .nut-icon {
   /* #ifdef dynamic*/
   display: flex;
@@ -88,7 +102,7 @@
   display: inline-flex;
   /* #endif */
   align-items: center;
-  margin-right: var(--nutui-menu-item-icon-margin, 8px);
+  margin-right: var(--nutui-menu-item-icon-margin, calc(8px * var(--nut-scale-f, 1)));
   flex-shrink: 0;
 }
 .nut-menu-container-wrap, .nut-menu-container-wrap-up {
@@ -98,7 +112,7 @@
   overflow: hidden;
 }
 .nut-menu-container-wrap-up {
-  bottom: var(--nutui-menu-bar-line-height, 48px);
+  bottom: var(--nutui-menu-bar-line-height, calc(48px * var(--nut-scale-f, 1)));
 }
 
 .overlay-fade-enter-active.nut-menu-container-overlay {
@@ -120,7 +134,7 @@
 
 .nut-menu-container-down-enter {
   opacity: 0;
-  transform: translate(0, -30px);
+  transform: translate(0, calc(-30px * var(--nut-scale-f, 1)));
 }
 
 .nut-menu-container-down-enter-done {
@@ -141,7 +155,7 @@
 
 .nut-menu-container-up-enter {
   opacity: 0;
-  transform: translate(0, 30px);
+  transform: translate(0, calc(30px * var(--nut-scale-f, 1)));
 }
 
 .nut-menu-container-up-enter-done {
@@ -163,7 +177,7 @@
 [dir=rtl] .nut-menu-container-item .nut-icon,
 .nut-rtl .nut-menu-container-item .nut-icon {
   margin-right: 0;
-  margin-left: var(--nutui-menu-item-icon-margin, 8px);
+  margin-left: var(--nutui-menu-item-icon-margin, calc(8px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-menu-container .nut-icon,
 .nut-rtl .nut-menu-container .nut-icon {

package/dist/cjs/packages/menuitem/style-jmapp/menuitem.scss

@@ -26,6 +26,11 @@
       color: $menu-item-active-color;
     }
 
+    &-icon {
+      display: flex;
+      align-items: center;
+    }
+
     .nut-icon {
       /* #ifdef dynamic*/
       display: flex;
@@ -72,7 +77,7 @@
 
 .nut-menu-container-down-enter {
   opacity: 0;
-  transform: translate(0, -30px);
+  transform: translate(0, scale-px(-30px));
 }
 
 .nut-menu-container-down-enter-done {
@@ -93,7 +98,7 @@
 
 .nut-menu-container-up-enter {
   opacity: 0;
-  transform: translate(0, 30px);
+  transform: translate(0, scale-px(30px));
 }
 
 .nut-menu-container-up-enter-done {

package/dist/cjs/packages/menuitem/style-jmapp/style.css

@@ -26,6 +26,10 @@
   font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold));
   color: var(--nutui-menu-item-active-color, var(--nutui-color-primary));
 }
+.nut-menu-container-item-icon {
+  display: flex;
+  align-items: center;
+}
 .nut-menu-container-item .nut-icon {
   /* #ifdef dynamic*/
   display: flex;
@@ -66,7 +70,7 @@
 
 .nut-menu-container-down-enter {
   opacity: 0;
-  transform: translate(0, -30px);
+  transform: translate(0, scale-px(-30px));
 }
 
 .nut-menu-container-down-enter-done {
@@ -87,7 +91,7 @@
 
 .nut-menu-container-up-enter {
   opacity: 0;
-  transform: translate(0, 30px);
+  transform: translate(0, scale-px(30px));
 }
 
 .nut-menu-container-up-enter-done {

package/dist/cjs/packages/menuitem/style-jrkf/menuitem.scss

@@ -26,6 +26,11 @@
       color: $menu-item-active-color;
     }
 
+    &-icon {
+      display: flex;
+      align-items: center;
+    }
+
     .nut-icon {
       /* #ifdef dynamic*/
       display: flex;
@@ -72,7 +77,7 @@
 
 .nut-menu-container-down-enter {
   opacity: 0;
-  transform: translate(0, -30px);
+  transform: translate(0, scale-px(-30px));
 }
 
 .nut-menu-container-down-enter-done {
@@ -93,7 +98,7 @@
 
 .nut-menu-container-up-enter {
   opacity: 0;
-  transform: translate(0, 30px);
+  transform: translate(0, scale-px(30px));
 }
 
 .nut-menu-container-up-enter-done {

package/dist/cjs/packages/menuitem/style-jrkf/style.css

@@ -26,6 +26,10 @@
   font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold));
   color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff6666));
 }
+.nut-menu-container-item-icon {
+  display: flex;
+  align-items: center;
+}
 .nut-menu-container-item .nut-icon {
   /* #ifdef dynamic*/
   display: flex;
@@ -66,7 +70,7 @@
 
 .nut-menu-container-down-enter {
   opacity: 0;
-  transform: translate(0, -30px);
+  transform: translate(0, scale-px(-30px));
 }
 
 .nut-menu-container-down-enter-done {
@@ -87,7 +91,7 @@
 
 .nut-menu-container-up-enter {
   opacity: 0;
-  transform: translate(0, 30px);
+  transform: translate(0, scale-px(30px));
 }
 
 .nut-menu-container-up-enter-done {

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

@@ -12,7 +12,7 @@
   font-size: $navbar-font-size;
   color: $navbar-color;
   overflow: hidden;
-  padding: 0 16px;
+  padding: 0 scale-px(16px);
 
   &-fixed {
     position: fixed;
@@ -48,9 +48,10 @@
     font-size: $navbar-title-font-size;
     font-weight: $navbar-title-font-weight;
     color: $navbar-title-font-color;
+    white-space: nowrap;
 
     &-center {
-      max-width: 129px;
+      max-width: scale-px(129px);
       justify-content: center;
     }
   }
@@ -64,31 +65,31 @@
     display: flex;
     align-items: center;
     flex-direction: row;
-    max-width: 124px;
+    max-width: scale-px(124px);
     height: 100%;
     cursor: pointer;
     /* #ifndef harmony jd h5 weapp*/
     .nut-icon,
     .nutui-iconfont {
-      width: 20px;
-      height: 20px;
-      font-size: 20px;
+      width: scale-px(20px);
+      height: scale-px(20px);
+      font-size: $font-size-2xl;
     }
 
     /* #endif */
     &-maxwidth {
       box-sizing: border-box;
-      width: calc(124px - 16px);
+      width: calc(scale-px(124px) - scale-px(16px));
     }
   }
 
   &-left {
-    padding-right: 16px;
-    gap: 16px;
+    padding-right: scale-px(16px);
+    gap: scale-px(16px);
 
     &-rtl {
       padding-right: 0;
-      padding-left: 16px;
+      padding-left: scale-px(16px);
     }
 
     &-back {
@@ -96,7 +97,7 @@
       flex-direction: row;
       align-items: center;
       justify-content: center;
-      gap: 16px;
+      gap: scale-px(16px);
     }
 
     &-hidden {
@@ -106,12 +107,12 @@
   }
 
   &-right {
-    padding-left: 16px;
+    padding-left: scale-px(16px);
     justify-content: flex-end;
-    gap: 16px;
+    gap: scale-px(16px);
 
     &-rtl {
-      padding-right: 16px;
+      padding-right: scale-px(16px);
       padding-left: 0;
     }
   }