@nutui/nutui-react-taro 3.0.9-beta.1 → 3.0.9

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

@@ -0,0 +1,59 @@
+@import '../../../../styles/mixins/text-ellipsis.scss';
+
+.nut-menu {
+  position: relative;
+
+  &.scroll-fixed {
+    position: fixed;
+    top: $menu-scroll-fixed-top;
+    z-index: $menu-scroll-fixed-z-index;
+    width: 100%;
+  }
+}
+
+.nut-menu-bar {
+  position: relative;
+  display: flex;
+  line-height: $menu-bar-line-height;
+  background-color: $color-background-overlay;
+  box-shadow: $menu-bar-box-shadow;
+
+  &.opened {
+    z-index: $menu-bar-opened-z-index;
+  }
+}
+
+.nut-menu-title {
+  flex: 1;
+  text-align: center;
+  font-size: $menu-title-font-size;
+  color: $menu-title-color;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+
+  &-text {
+    @include text-ellipsis;
+    display: block;
+    padding: $menu-title-padding;
+  }
+
+  &-icon {
+    flex-shrink: 0;
+    transition: all 0.2s linear;
+  }
+
+  &.active {
+    color: $menu-item-active-color;
+  }
+
+  &.disabled {
+    color: $menu-item-disabled-color;
+  }
+
+  &.active .nut-menu-title-icon {
+    transform: rotate(180deg);
+  }
+}

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

@@ -0,0 +1,56 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-menu {
+  position: relative;
+}
+.nut-menu.scroll-fixed {
+  position: fixed;
+  top: var(--nutui-menu-scroll-fixed-top, 0);
+  z-index: var(--nutui-menu-scroll-fixed-z-index, 1000);
+  width: 100%;
+}
+
+.nut-menu-bar {
+  position: relative;
+  display: flex;
+  line-height: var(--nutui-menu-bar-line-height, 48px);
+  background-color: var(--nutui-color-surface-2);
+  box-shadow: var(--nutui-menu-bar-box-shadow, 0 2px 12px rgba(89, 89, 89, 0.12));
+}
+.nut-menu-bar.opened {
+  z-index: var(--nutui-menu-bar-opened-z-index, 1000);
+}
+
+.nut-menu-title {
+  flex: 1;
+  text-align: center;
+  font-size: var(--nutui-menu-title-font-size, var(--nutui-font-text));
+  color: var(--nutui-menu-title-color, var(--nutui-color-title));
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+}
+.nut-menu-title-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  padding: var(--nutui-menu-title-padding, 0 8px);
+}
+.nut-menu-title-icon {
+  flex-shrink: 0;
+  transition: all 0.2s linear;
+}
+.nut-menu-title.active {
+  color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff6666));
+}
+.nut-menu-title.disabled {
+  color: var(--nutui-menu-item-disabled-color, var(--nutui-color-text-disabled));
+}
+.nut-menu-title.active .nut-menu-title-icon {
+  transform: rotate(180deg);
+}

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

@@ -1 +1,2 @@
-import './style.css'
+import '../../overlay/style/css';
+import './style.css';

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

@@ -2,61 +2,6 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
-.nut-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
-  z-index: var(--nutui-overlay-zIndex, 1000);
-}
-
-.nut-overflow-hidden {
-  overflow: hidden !important;
-}
-
-@keyframes nut-fade-in {
-  0% {
-    opacity: 0;
-  }
-  1% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes nut-fade-out {
-  0% {
-    opacity: 1;
-  }
-  1% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-.nut-overlay-slide-enter-active, .nut-overlay-slide-appear-active {
-  animation-fill-mode: both;
-  animation-name: nut-fade-in;
-  animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
-}
-.nut-overlay-slide-exit-active {
-  animation-fill-mode: both;
-  animation-name: nut-fade-out;
-  animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
-}
-
-[dir=rtl] .nut-overlay,
-.nut-rtl .nut-overlay {
-  left: auto;
-  right: 0;
-}
-
 .nut-menu-container-content {
   padding: var(--nutui-menu-content-padding, 12px 24px);
   max-height: var(--nutui-menu-content-max-height, 214px);

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

@@ -0,0 +1,2 @@
+import '../../overlay/style-jmapp/css';
+import './style.css';

package/dist/cjs/packages/menuitem/style-jmapp/index.js

@@ -0,0 +1,2 @@
+import '../../overlay/style-jmapp';
+import './menuitem.scss';

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

@@ -0,0 +1,122 @@
+.nut-menu-container {
+  &-content {
+    padding: $menu-content-padding;
+    max-height: $menu-content-max-height;
+    overflow-y: auto;
+    display: flex;
+    flex-wrap: wrap;
+    background: $menu-content-background-color;
+
+    &_fixed {
+      width: 100%;
+      opacity: 0;
+      position: fixed;
+    }
+  }
+
+  &-item {
+    display: flex;
+    align-items: center;
+    color: $color-title;
+    font-size: $font-size-base;
+    padding: $menu-item-padding;
+
+    &.active {
+      font-weight: $menu-item-active-font-weight;
+      color: $menu-item-active-color;
+    }
+
+    .nut-icon {
+      display: inline-flex;
+      align-items: center;
+      margin-right: $menu-item-icon-margin;
+      flex-shrink: 0;
+    }
+  }
+
+  &-wrap,
+  &-wrap-up {
+    position: absolute;
+    width: 100%;
+    z-index: $menu-container-z-index;
+    overflow: hidden;
+  }
+
+  &-wrap-up {
+    bottom: $menu-bar-line-height;
+  }
+}
+
+.overlay-fade-enter-active.nut-menu-container-overlay {
+  top: auto;
+  z-index: $menu-container-z-index;
+}
+
+.nut-menu-placeholder-element {
+  position: fixed;
+  top: -$menu-bar-line-height;
+  left: 0;
+  right: 0;
+  z-index: $menu-bar-opened-z-index;
+  background-color: transparent;
+
+  &.up {
+    bottom: -$menu-bar-line-height;
+  }
+}
+
+.nut-menu-container-down-enter {
+  opacity: 0;
+  transform: translate(0, -30px);
+}
+
+.nut-menu-container-down-enter-done {
+  opacity: 1;
+  transform: translate(0, 0);
+  transition: all 100ms;
+}
+
+.nut-menu-container-down-exit {
+  opacity: 1;
+  transition: all 100ms;
+}
+
+.nut-menu-container-down-exit-done {
+  opacity: 0;
+  transition: all 100ms;
+}
+
+.nut-menu-container-up-enter {
+  opacity: 0;
+  transform: translate(0, 30px);
+}
+
+.nut-menu-container-up-enter-done {
+  opacity: 1;
+  transform: translate(0, 0);
+  transition: all 100ms;
+}
+
+.nut-menu-container-up-exit {
+  opacity: 1;
+  transition: all 100ms;
+}
+
+.nut-menu-container-up-exit-done {
+  opacity: 0;
+  transition: all 100ms;
+}
+
+[dir='rtl'] .nut-menu-container,
+.nut-rtl .nut-menu-container {
+  &-item {
+    .nut-icon {
+      margin-right: 0;
+      margin-left: $menu-item-icon-margin;
+    }
+  }
+
+  .nut-icon {
+    transform: rotateY(180deg);
+  }
+}

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

@@ -0,0 +1,112 @@
+/* #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);
+  overflow-y: auto;
+  display: flex;
+  flex-wrap: wrap;
+  background: var(--nutui-menu-content-background-color, var(--nutui-color-surface-2));
+}
+.nut-menu-container-content_fixed {
+  width: 100%;
+  opacity: 0;
+  position: fixed;
+}
+.nut-menu-container-item {
+  display: flex;
+  align-items: center;
+  color: var(--nutui-color-title);
+  font-size: var(--nutui-font-text);
+  padding: var(--nutui-menu-item-padding, 12px 0);
+}
+.nut-menu-container-item.active {
+  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 .nut-icon {
+  display: inline-flex;
+  align-items: center;
+  margin-right: var(--nutui-menu-item-icon-margin, 8px);
+  flex-shrink: 0;
+}
+.nut-menu-container-wrap, .nut-menu-container-wrap-up {
+  position: absolute;
+  width: 100%;
+  z-index: var(--nutui-menu-container-z-index, 1000);
+  overflow: hidden;
+}
+.nut-menu-container-wrap-up {
+  bottom: var(--nutui-menu-bar-line-height, 48px);
+}
+
+.overlay-fade-enter-active.nut-menu-container-overlay {
+  top: auto;
+  z-index: var(--nutui-menu-container-z-index, 1000);
+}
+
+.nut-menu-placeholder-element {
+  position: fixed;
+  top: -var(--nutui-menu-bar-line-height, 48px);
+  left: 0;
+  right: 0;
+  z-index: var(--nutui-menu-bar-opened-z-index, 1000);
+  background-color: transparent;
+}
+.nut-menu-placeholder-element.up {
+  bottom: -var(--nutui-menu-bar-line-height, 48px);
+}
+
+.nut-menu-container-down-enter {
+  opacity: 0;
+  transform: translate(0, -30px);
+}
+
+.nut-menu-container-down-enter-done {
+  opacity: 1;
+  transform: translate(0, 0);
+  transition: all 100ms;
+}
+
+.nut-menu-container-down-exit {
+  opacity: 1;
+  transition: all 100ms;
+}
+
+.nut-menu-container-down-exit-done {
+  opacity: 0;
+  transition: all 100ms;
+}
+
+.nut-menu-container-up-enter {
+  opacity: 0;
+  transform: translate(0, 30px);
+}
+
+.nut-menu-container-up-enter-done {
+  opacity: 1;
+  transform: translate(0, 0);
+  transition: all 100ms;
+}
+
+.nut-menu-container-up-exit {
+  opacity: 1;
+  transition: all 100ms;
+}
+
+.nut-menu-container-up-exit-done {
+  opacity: 0;
+  transition: all 100ms;
+}
+
+[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);
+}
+[dir=rtl] .nut-menu-container .nut-icon,
+.nut-rtl .nut-menu-container .nut-icon {
+  transform: rotateY(180deg);
+}

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

@@ -0,0 +1,2 @@
+import '../../overlay/style-jrkf/css';
+import './style.css';

package/dist/cjs/packages/menuitem/style-jrkf/index.js

@@ -0,0 +1,2 @@
+import '../../overlay/style-jrkf';
+import './menuitem.scss';

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

@@ -0,0 +1,122 @@
+.nut-menu-container {
+  &-content {
+    padding: $menu-content-padding;
+    max-height: $menu-content-max-height;
+    overflow-y: auto;
+    display: flex;
+    flex-wrap: wrap;
+    background: $menu-content-background-color;
+
+    &_fixed {
+      width: 100%;
+      opacity: 0;
+      position: fixed;
+    }
+  }
+
+  &-item {
+    display: flex;
+    align-items: center;
+    color: $color-title;
+    font-size: $font-size-base;
+    padding: $menu-item-padding;
+
+    &.active {
+      font-weight: $menu-item-active-font-weight;
+      color: $menu-item-active-color;
+    }
+
+    .nut-icon {
+      display: inline-flex;
+      align-items: center;
+      margin-right: $menu-item-icon-margin;
+      flex-shrink: 0;
+    }
+  }
+
+  &-wrap,
+  &-wrap-up {
+    position: absolute;
+    width: 100%;
+    z-index: $menu-container-z-index;
+    overflow: hidden;
+  }
+
+  &-wrap-up {
+    bottom: $menu-bar-line-height;
+  }
+}
+
+.overlay-fade-enter-active.nut-menu-container-overlay {
+  top: auto;
+  z-index: $menu-container-z-index;
+}
+
+.nut-menu-placeholder-element {
+  position: fixed;
+  top: -$menu-bar-line-height;
+  left: 0;
+  right: 0;
+  z-index: $menu-bar-opened-z-index;
+  background-color: transparent;
+
+  &.up {
+    bottom: -$menu-bar-line-height;
+  }
+}
+
+.nut-menu-container-down-enter {
+  opacity: 0;
+  transform: translate(0, -30px);
+}
+
+.nut-menu-container-down-enter-done {
+  opacity: 1;
+  transform: translate(0, 0);
+  transition: all 100ms;
+}
+
+.nut-menu-container-down-exit {
+  opacity: 1;
+  transition: all 100ms;
+}
+
+.nut-menu-container-down-exit-done {
+  opacity: 0;
+  transition: all 100ms;
+}
+
+.nut-menu-container-up-enter {
+  opacity: 0;
+  transform: translate(0, 30px);
+}
+
+.nut-menu-container-up-enter-done {
+  opacity: 1;
+  transform: translate(0, 0);
+  transition: all 100ms;
+}
+
+.nut-menu-container-up-exit {
+  opacity: 1;
+  transition: all 100ms;
+}
+
+.nut-menu-container-up-exit-done {
+  opacity: 0;
+  transition: all 100ms;
+}
+
+[dir='rtl'] .nut-menu-container,
+.nut-rtl .nut-menu-container {
+  &-item {
+    .nut-icon {
+      margin-right: 0;
+      margin-left: $menu-item-icon-margin;
+    }
+  }
+
+  .nut-icon {
+    transform: rotateY(180deg);
+  }
+}

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

@@ -0,0 +1,112 @@
+/* #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);
+  overflow-y: auto;
+  display: flex;
+  flex-wrap: wrap;
+  background: var(--nutui-menu-content-background-color, var(--nutui-color-surface-2));
+}
+.nut-menu-container-content_fixed {
+  width: 100%;
+  opacity: 0;
+  position: fixed;
+}
+.nut-menu-container-item {
+  display: flex;
+  align-items: center;
+  color: var(--nutui-color-title);
+  font-size: var(--nutui-font-text);
+  padding: var(--nutui-menu-item-padding, 12px 0);
+}
+.nut-menu-container-item.active {
+  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 .nut-icon {
+  display: inline-flex;
+  align-items: center;
+  margin-right: var(--nutui-menu-item-icon-margin, 8px);
+  flex-shrink: 0;
+}
+.nut-menu-container-wrap, .nut-menu-container-wrap-up {
+  position: absolute;
+  width: 100%;
+  z-index: var(--nutui-menu-container-z-index, 1000);
+  overflow: hidden;
+}
+.nut-menu-container-wrap-up {
+  bottom: var(--nutui-menu-bar-line-height, 48px);
+}
+
+.overlay-fade-enter-active.nut-menu-container-overlay {
+  top: auto;
+  z-index: var(--nutui-menu-container-z-index, 1000);
+}
+
+.nut-menu-placeholder-element {
+  position: fixed;
+  top: -var(--nutui-menu-bar-line-height, 48px);
+  left: 0;
+  right: 0;
+  z-index: var(--nutui-menu-bar-opened-z-index, 1000);
+  background-color: transparent;
+}
+.nut-menu-placeholder-element.up {
+  bottom: -var(--nutui-menu-bar-line-height, 48px);
+}
+
+.nut-menu-container-down-enter {
+  opacity: 0;
+  transform: translate(0, -30px);
+}
+
+.nut-menu-container-down-enter-done {
+  opacity: 1;
+  transform: translate(0, 0);
+  transition: all 100ms;
+}
+
+.nut-menu-container-down-exit {
+  opacity: 1;
+  transition: all 100ms;
+}
+
+.nut-menu-container-down-exit-done {
+  opacity: 0;
+  transition: all 100ms;
+}
+
+.nut-menu-container-up-enter {
+  opacity: 0;
+  transform: translate(0, 30px);
+}
+
+.nut-menu-container-up-enter-done {
+  opacity: 1;
+  transform: translate(0, 0);
+  transition: all 100ms;
+}
+
+.nut-menu-container-up-exit {
+  opacity: 1;
+  transition: all 100ms;
+}
+
+.nut-menu-container-up-exit-done {
+  opacity: 0;
+  transition: all 100ms;
+}
+
+[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);
+}
+[dir=rtl] .nut-menu-container .nut-icon,
+.nut-rtl .nut-menu-container .nut-icon {
+  transform: rotateY(180deg);
+}

package/dist/cjs/packages/navbar/style/css.js

@@ -1 +1 @@
-import './style.css'
+import './style.css';

package/dist/cjs/packages/navbar/style-jmapp/css.js

@@ -0,0 +1 @@
+import './style.css';

package/dist/cjs/packages/navbar/style-jmapp/index.js

@@ -0,0 +1 @@
+import './navbar.scss';