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

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

@@ -0,0 +1,389 @@
+.nut-popup {
+  position: fixed;
+  min-height: 26%;
+  max-height: 100%;
+  background-color: $overlay-content-bg-color;
+  -webkit-overflow-scrolling: touch;
+  font-size: $font-size-base;
+
+  &-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    border-bottom: $popup-title-border-bottom;
+    padding: $popup-title-padding;
+    position: relative;
+
+    &-wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &-title {
+      color: $color-title;
+      font-weight: $font-weight-bold;
+      font-size: $popup-title-font-size;
+      line-height: $popup-title-font-size;
+    }
+
+    &-description {
+      color: $color-text;
+      font-size: $popup-description-font-size;
+      font-weight: $font-weight;
+      &-gap {
+        margin-top: $popup-description-spacing;
+      }
+    }
+
+    &-left {
+      position: absolute;
+      top: $popup-title-padding;
+      left: $popup-title-padding;
+    }
+
+    &-right {
+      position: absolute;
+      top: $popup-title-padding;
+      right: $popup-title-padding;
+
+      z-index: 1;
+      width: $popup-icon-size;
+      height: $popup-icon-size;
+      color: $color-title;
+      cursor: pointer;
+
+      &:active {
+        opacity: 0.7;
+      }
+
+      &-top-left {
+        top: $popup-title-padding;
+        left: $popup-title-padding;
+      }
+
+      &-bottom-left {
+        bottom: $popup-title-padding;
+        left: $popup-title-padding;
+      }
+
+      &-bottom-right {
+        right: $popup-title-padding;
+        bottom: $popup-title-padding;
+      }
+    }
+  }
+
+  &-center {
+    top: 50%;
+    left: 50%;
+    min-height: 10%;
+    max-width: 295px;
+    transform: translate(-50%, -50%);
+
+    &.nut-popup-round {
+      border-radius: $popup-border-radius;
+    }
+  }
+
+  &-bottom,
+  &-top {
+    max-height: 87%;
+  }
+
+  &-bottom {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+
+    &.nut-popup-round {
+      border-radius: $popup-border-radius $popup-border-radius 0 0;
+    }
+  }
+
+  &-right {
+    top: 0;
+    right: 0;
+    width: 100px;
+    height: 100%;
+
+    &.nut-popup-round {
+      border-radius: $popup-border-radius 0 0 $popup-border-radius;
+    }
+  }
+
+  &-left {
+    top: 0;
+    left: 0;
+    width: 100px;
+    height: 100%;
+
+    &.nut-popup-round {
+      border-radius: 0 $popup-border-radius $popup-border-radius 0;
+    }
+  }
+
+  &-top {
+    top: 0;
+    left: 0;
+    width: 100%;
+
+    &.nut-popup-round {
+      border-radius: 0 0 $popup-border-radius $popup-border-radius;
+    }
+  }
+
+  &-slide {
+    @keyframes popup-scale-fade-in {
+      from {
+        opacity: 0;
+        transform: scale(0.8);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    @keyframes popup-scale-fade-out {
+      from {
+        opacity: 1;
+        transform: scale(1);
+      }
+      to {
+        opacity: 0;
+        transform: scale(0.8);
+      }
+    }
+
+    &-none-enter-active {
+      animation-fill-mode: both;
+      animation-name: popup-scale-fade-in;
+      animation-duration: $popup-animation-duration;
+    }
+
+    &-none-exit-active {
+      animation-fill-mode: both;
+      animation-name: popup-scale-fade-out;
+      animation-duration: $popup-animation-duration;
+    }
+
+    @keyframes popup-fade-in {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    @keyframes popup-fade-out {
+      from {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+      }
+    }
+
+    &-center-enter-active {
+      animation-fill-mode: both;
+      animation-name: popup-fade-in;
+      animation-duration: $popup-animation-duration;
+    }
+
+    &-center-exit-active {
+      animation-fill-mode: both;
+      animation-name: popup-fade-out;
+      animation-duration: $popup-animation-duration;
+    }
+
+    /* 从顶部滑出 */
+    @keyframes popup-slide-top-enter {
+      from {
+        transform: translate3d(0, -100%, 0);
+      }
+      to {
+        transform: translate3d(0, 0%, 0);
+      }
+    }
+
+    @keyframes popup-slide-top-exit {
+      to {
+        transform: translate3d(0, -100%, 0);
+      }
+    }
+
+    &-top-enter-active,
+    &-top-appear-active {
+      transform: translate3d(0, 0%, 0);
+      animation-fill-mode: both;
+      animation-name: popup-slide-top-enter;
+      animation-duration: $popup-animation-duration;
+    }
+
+    &-top-exit-active {
+      animation-fill-mode: both;
+      animation-name: popup-slide-top-exit;
+      animation-duration: $popup-animation-duration;
+    }
+
+    /* 从右侧滑出 */
+    @keyframes popup-slide-right-enter {
+      from {
+        transform: translate3d(100%, 0, 0);
+      }
+      to {
+        transform: translate3d(0%, 0, 0);
+      }
+    }
+
+    @keyframes popup-slide-right-exit {
+      to {
+        transform: translate3d(100%, 0, 0);
+      }
+    }
+
+    &-right-enter-active,
+    &-right-appear-active {
+      transform: translate3d(0, 0, 0);
+      animation-fill-mode: both;
+      animation-name: popup-slide-right-enter;
+      animation-duration: $popup-animation-duration;
+    }
+
+    &-right-exit {
+      animation-fill-mode: both;
+      animation-name: popup-slide-right-exit;
+      animation-duration: $popup-animation-duration;
+    }
+
+    /* 从底部滑出 */
+    @keyframes popup-slide-bottom-enter {
+      from {
+        transform: translate3d(0, 100%, 0);
+      }
+      to {
+        transform: translate3d(0, 0%, 0);
+      }
+    }
+
+    @keyframes slide-bottom-exit {
+      to {
+        transform: translate3d(0, 100%, 0);
+      }
+    }
+
+    &-bottom-enter-active,
+    &-bottom-appear-active {
+      transform: translate(0, 0);
+      animation-fill-mode: both;
+      animation-name: popup-slide-bottom-enter;
+      animation-duration: $popup-animation-duration;
+    }
+
+    &-bottom-exit {
+      animation-fill-mode: both;
+      animation-name: slide-bottom-exit;
+      animation-duration: $popup-animation-duration;
+    }
+
+    /* 从左侧滑出 */
+    @keyframes popup-slide-left-enter {
+      from {
+        transform: translate3d(-100%, 0, 0);
+      }
+      to {
+        transform: translate3d(0%, 0, 0);
+      }
+    }
+
+    @keyframes popup-slide-left-exit {
+      to {
+        transform: translate3d(-100%, 0, 0);
+      }
+    }
+
+    &-left-enter-active,
+    &-left-appear-active {
+      transform: translate(0, 0);
+      animation-fill-mode: both;
+      animation-name: popup-slide-left-enter;
+      animation-duration: $popup-animation-duration;
+    }
+
+    &-left-exit-active,
+    &-left-exit-done {
+      animation-fill-mode: both;
+      animation-name: popup-slide-left-exit;
+      animation-duration: $popup-animation-duration;
+    }
+
+    &-none-exit-done,
+    &-center-exit-done,
+    &-left-exit-done,
+    &-right-exit-done,
+    &-top-exit-done,
+    &-bottom-exit-done {
+      &.nut-popup {
+        display: none;
+      }
+    }
+  }
+
+  .nut-overflow-hidden {
+    overflow: hidden;
+  }
+}
+
+[dir='rtl'] .nut-popup,
+.nut-rtl .nut-popup {
+  &-title {
+    &-left {
+      left: auto;
+      right: $popup-title-padding;
+    }
+
+    &-right {
+      right: auto;
+      left: $popup-title-padding;
+
+      &-top-left {
+        left: auto;
+        right: $popup-title-padding;
+      }
+
+      &-bottom-left {
+        left: auto;
+        right: $popup-title-padding;
+      }
+
+      &-bottom-right {
+        right: auto;
+        left: $popup-title-padding;
+      }
+    }
+
+    .nut-icon-ArrowLeft {
+      transform: rotate(180deg);
+    }
+  }
+
+  &-center {
+    left: auto;
+    right: 50%;
+    transform: translate(50%, -50%);
+  }
+
+  &-bottom {
+    left: auto;
+    right: 0;
+  }
+
+  &-top {
+    left: auto;
+    right: 0;
+  }
+}

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

@@ -0,0 +1,329 @@
+@charset "UTF-8";
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-popup {
+  position: fixed;
+  min-height: 26%;
+  max-height: 100%;
+  background-color: var(--nutui-overlay-content-bg-color, #ffffff);
+  -webkit-overflow-scrolling: touch;
+  font-size: var(--nutui-font-text);
+}
+.nut-popup-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-bottom: var(--nutui-popup-title-border-bottom, 0);
+  padding: var(--nutui-popup-title-padding, 12px);
+  position: relative;
+}
+.nut-popup-title-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.nut-popup-title-title {
+  color: var(--nutui-color-title);
+  font-weight: var(--nutui-font-weight-bold);
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-h1));
+  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-h1));
+}
+.nut-popup-title-description {
+  color: var(--nutui-color-text);
+  font-size: var(--nutui-popup-description-font-size, var(--nutui-font-text-xs));
+  font-weight: var(--nutui-font-weight);
+}
+.nut-popup-title-description-gap {
+  margin-top: var(--nutui-popup-description-spacing, var(--nutui-spacing-base));
+}
+.nut-popup-title-left {
+  position: absolute;
+  top: var(--nutui-popup-title-padding, 12px);
+  left: var(--nutui-popup-title-padding, 12px);
+}
+.nut-popup-title-right {
+  position: absolute;
+  top: var(--nutui-popup-title-padding, 12px);
+  right: var(--nutui-popup-title-padding, 12px);
+  z-index: 1;
+  width: var(--nutui-popup-icon-size, var(--nutui-font-h2));
+  height: var(--nutui-popup-icon-size, var(--nutui-font-h2));
+  color: var(--nutui-color-title);
+  cursor: pointer;
+}
+.nut-popup-title-right:active {
+  opacity: 0.7;
+}
+.nut-popup-title-right-top-left {
+  top: var(--nutui-popup-title-padding, 12px);
+  left: var(--nutui-popup-title-padding, 12px);
+}
+.nut-popup-title-right-bottom-left {
+  bottom: var(--nutui-popup-title-padding, 12px);
+  left: var(--nutui-popup-title-padding, 12px);
+}
+.nut-popup-title-right-bottom-right {
+  right: var(--nutui-popup-title-padding, 12px);
+  bottom: var(--nutui-popup-title-padding, 12px);
+}
+.nut-popup-center {
+  top: 50%;
+  left: 50%;
+  min-height: 10%;
+  max-width: 295px;
+  transform: translate(-50%, -50%);
+}
+.nut-popup-center.nut-popup-round {
+  border-radius: var(--nutui-popup-border-radius, 12px);
+}
+.nut-popup-bottom, .nut-popup-top {
+  max-height: 87%;
+}
+.nut-popup-bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+.nut-popup-bottom.nut-popup-round {
+  border-radius: var(--nutui-popup-border-radius, 12px) var(--nutui-popup-border-radius, 12px) 0 0;
+}
+.nut-popup-right {
+  top: 0;
+  right: 0;
+  width: 100px;
+  height: 100%;
+}
+.nut-popup-right.nut-popup-round {
+  border-radius: var(--nutui-popup-border-radius, 12px) 0 0 var(--nutui-popup-border-radius, 12px);
+}
+.nut-popup-left {
+  top: 0;
+  left: 0;
+  width: 100px;
+  height: 100%;
+}
+.nut-popup-left.nut-popup-round {
+  border-radius: 0 var(--nutui-popup-border-radius, 12px) var(--nutui-popup-border-radius, 12px) 0;
+}
+.nut-popup-top {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.nut-popup-top.nut-popup-round {
+  border-radius: 0 0 var(--nutui-popup-border-radius, 12px) var(--nutui-popup-border-radius, 12px);
+}
+.nut-popup-slide {
+  /* 从顶部滑出 */
+  /* 从右侧滑出 */
+  /* 从底部滑出 */
+  /* 从左侧滑出 */
+}
+@keyframes popup-scale-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes popup-scale-fade-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+.nut-popup-slide-none-enter-active {
+  animation-fill-mode: both;
+  animation-name: popup-scale-fade-in;
+  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
+}
+.nut-popup-slide-none-exit-active {
+  animation-fill-mode: both;
+  animation-name: popup-scale-fade-out;
+  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
+}
+@keyframes popup-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes popup-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.nut-popup-slide-center-enter-active {
+  animation-fill-mode: both;
+  animation-name: popup-fade-in;
+  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
+}
+.nut-popup-slide-center-exit-active {
+  animation-fill-mode: both;
+  animation-name: popup-fade-out;
+  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
+}
+@keyframes popup-slide-top-enter {
+  from {
+    transform: translate3d(0, -100%, 0);
+  }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
+}
+@keyframes popup-slide-top-exit {
+  to {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+.nut-popup-slide-top-enter-active, .nut-popup-slide-top-appear-active {
+  transform: translate3d(0, 0%, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-top-enter;
+  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
+}
+.nut-popup-slide-top-exit-active {
+  animation-fill-mode: both;
+  animation-name: popup-slide-top-exit;
+  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
+}
+@keyframes popup-slide-right-enter {
+  from {
+    transform: translate3d(100%, 0, 0);
+  }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
+}
+@keyframes popup-slide-right-exit {
+  to {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+.nut-popup-slide-right-enter-active, .nut-popup-slide-right-appear-active {
+  transform: translate3d(0, 0, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-right-enter;
+  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
+}
+.nut-popup-slide-right-exit {
+  animation-fill-mode: both;
+  animation-name: popup-slide-right-exit;
+  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
+}
+@keyframes popup-slide-bottom-enter {
+  from {
+    transform: translate3d(0, 100%, 0);
+  }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
+}
+@keyframes slide-bottom-exit {
+  to {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+.nut-popup-slide-bottom-enter-active, .nut-popup-slide-bottom-appear-active {
+  transform: translate(0, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-bottom-enter;
+  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
+}
+.nut-popup-slide-bottom-exit {
+  animation-fill-mode: both;
+  animation-name: slide-bottom-exit;
+  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
+}
+@keyframes popup-slide-left-enter {
+  from {
+    transform: translate3d(-100%, 0, 0);
+  }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
+}
+@keyframes popup-slide-left-exit {
+  to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+.nut-popup-slide-left-enter-active, .nut-popup-slide-left-appear-active {
+  transform: translate(0, 0);
+  animation-fill-mode: both;
+  animation-name: popup-slide-left-enter;
+  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
+}
+.nut-popup-slide-left-exit-active, .nut-popup-slide-left-exit-done {
+  animation-fill-mode: both;
+  animation-name: popup-slide-left-exit;
+  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
+}
+.nut-popup-slide-none-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
+  display: none;
+}
+.nut-popup .nut-overflow-hidden {
+  overflow: hidden;
+}
+
+[dir=rtl] .nut-popup-title-left,
+.nut-rtl .nut-popup-title-left {
+  left: auto;
+  right: var(--nutui-popup-title-padding, 12px);
+}
+[dir=rtl] .nut-popup-title-right,
+.nut-rtl .nut-popup-title-right {
+  right: auto;
+  left: var(--nutui-popup-title-padding, 12px);
+}
+[dir=rtl] .nut-popup-title-right-top-left,
+.nut-rtl .nut-popup-title-right-top-left {
+  left: auto;
+  right: var(--nutui-popup-title-padding, 12px);
+}
+[dir=rtl] .nut-popup-title-right-bottom-left,
+.nut-rtl .nut-popup-title-right-bottom-left {
+  left: auto;
+  right: var(--nutui-popup-title-padding, 12px);
+}
+[dir=rtl] .nut-popup-title-right-bottom-right,
+.nut-rtl .nut-popup-title-right-bottom-right {
+  right: auto;
+  left: var(--nutui-popup-title-padding, 12px);
+}
+[dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,
+.nut-rtl .nut-popup-title .nut-icon-ArrowLeft {
+  transform: rotate(180deg);
+}
+[dir=rtl] .nut-popup-center,
+.nut-rtl .nut-popup-center {
+  left: auto;
+  right: 50%;
+  transform: translate(50%, -50%);
+}
+[dir=rtl] .nut-popup-bottom,
+.nut-rtl .nut-popup-bottom {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-popup-top,
+.nut-rtl .nut-popup-top {
+  left: auto;
+  right: 0;
+}

package/dist/es/packages/price/style/css.js

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

package/dist/es/packages/price/style-jmapp/css.js

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

package/dist/es/packages/price/style-jmapp/index.js

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