taro-react-uilib 1.0.4 → 1.0.24

package/dist/styles/components/numberkeyboard.scss

@@ -1,6 +1,7 @@
 // @import '../style/themes/variable.scss';
 // @import '../style/themes/default.scss';
-
+@import "../../styles/themes/variable.scss";
+@import "../../styles/themes/default.scss";
 #{$xh-prefix}-number-keyboard {
   position: fixed;
   bottom: 0;
@@ -9,40 +10,67 @@
   z-index: 10;
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
+  background-color: #eeeeee;
+  padding: 0 25px 30px;
 
   &-header {
     border-top: 1px solid $border-color;
     display: flex;
     justify-content: flex-end;
-    padding: 5px 0;
-    background-color: #FFF;
+    padding: 20px 0;
+    background-color: #eee;
   }
 
   &-close {
     align-self: flex-end;
     border: 0;
-    color: #1989fa;
-    width: 150px;
     text-align: center;
-    font-size: 18PX;
+    font-size: 30px;
+    font-family: PingFang SC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #f6ab03;
   }
 
   &-body {
     width: 100%;
-  }
-
-  &-delete {
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    background-image: url('./images/backspace.png');
-    background-size: 25%;
-    background-repeat: no-repeat;
-    background-position: 50%;
-  }
-
-  &-key-gray {
-    background-color: #eee;
+    display: flex;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    &-key {
+      width: 220px;
+      padding: 15px 0;
+      font-size: 48px;
+      box-sizing: border-box;
+      display: flex;
+      align-content: center;
+      justify-content: center;
+      background: #ffffff;
+      box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16),
+        inset 0px -2px 2px 1px rgba(0, 0, 0, 0.1);
+      border-radius: 12px;
+      margin-right: 20px;
+      margin-bottom: 20px;
+      &:active {
+        background-color: #eee;
+      }
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
+      &.delete {
+        background-image: url("./images/backspace.png");
+        background-size: 25%;
+        background-repeat: no-repeat;
+        background-position: center;
+        box-shadow: none;
+        background-color: transparent;
+      }
+      &.none {
+        visibility: hidden;
+      }
+    }
+    .xh-button-webutton {
+      background-color: #fff;
+    }
   }
 }
 .slide-up {

package/dist/styles/components/page.scss

@@ -1,19 +1,20 @@
-
-@import '../../styles/themes/variable.scss';
-@import '../../styles/themes/default.scss';
+@import './loading.scss';
+@import "../../styles/themes/variable.scss";
+@import "../../styles/themes/default.scss";
 #{$xh-prefix}-page {
   width: 100%;
   min-height: 100vh;
   background: #fff;
   min-height: 100vh;
   overflow-x: hidden;
+  box-sizing: border-box;
   #{$xh-prefix}-loading {
     z-index: 1000;
   }
   .loadingMask {
     width: 100vw;
     height: 100vh;
-    background-color: #FFF;
+    background-color: #fff;
     position: fixed;
     top: 0;
     left: 0;

package/dist/styles/components/passwordinput.scss

@@ -1,3 +1,5 @@
+@import "../../styles/themes/variable.scss";
+@import "../../styles/themes/default.scss";
 #{$xh-prefix}-password-input {
   display: flex;
 

package/dist/styles/components/picker.scss

@@ -0,0 +1,147 @@
+@import './popup.scss';
+@import "../../styles/themes/default.scss";
+@import "../../styles/themes/variable.scss";
+
+#{$xh-prefix}-picker {
+  &-field {
+    width: 100%;
+    display: inline-block;
+  }
+
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+    border-radius: 20px 20px 0 0;
+    overflow: hidden;
+    border-bottom: 2px solid $border-color;
+    min-height: 80px;
+    box-sizing: border-box;
+    &-button {
+      display: inline-block;
+      font-size: 30px;
+      border: 0;
+      border-radius: 0;
+      &.picker-confirm {
+        color: $color-primary;
+      }
+      &.picker-cancel {
+        color: $font-color-tertiary;
+      }
+    }
+    &-title {
+      font-size: 28px;
+    }
+  }
+
+  &-cancel {
+    color: $font-color-tertiary;
+  }
+
+  &-confirm {
+    color: $color-primary;
+  }
+
+  &-space {
+    display: block;
+    width: 60px;
+    margin-left: 25px;
+  }
+
+  &-close {
+    display: inline-block;
+    & > img {
+      width: 30px;
+      height: 30px;
+      display: inline-block;
+    }
+  }
+
+  &-title-content {
+    display: flex;
+    align-items: center;
+    font-size: 38px;
+    line-height: 38px;
+    color: $font-color;
+    font-weight: bold;
+  }
+
+  &-body {
+    display: flex;
+    overflow: hidden;
+    background: #fff;
+    font-size: 30px;
+    position: relative;
+    height: 500px;
+    flex-direction: column;
+    justify-content: center;
+    touch-action: "none";
+    &-view {
+      position: absolute;
+      top: calc(50% - 38px);
+      width: 100%;
+      touch-action: "none";
+      transition: transform 200ms;
+      &-item {
+        height: 76px;
+        line-height: 76px;
+        text-align: center;
+      }
+      &::before {
+        content: " ";
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100vh;
+        top: -100vh;
+      }
+      &::after {
+        content: " ";
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100vh;
+        top: 0;
+      }
+    }
+    &-mask {
+      position: absolute;
+      z-index: 10000;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      pointer-events: none;
+      &-top {
+        background: linear-gradient(
+          0deg,
+          hsla(0, 0%, 100%, 0.6),
+          hsla(0, 0%, 100%, 0.8) 50%,
+          #fff
+        );
+        flex: auto;
+      }
+      &-middle {
+        height: 68px;
+        border-top: 1px solid $border-color;
+        border-bottom: 1px solid $border-color;
+      }
+      &-bottom {
+        background: linear-gradient(
+          180deg,
+          hsla(0, 0%, 100%, 0.6),
+          hsla(0, 0%, 100%, 0.8) 50%,
+          #fff
+        );
+        flex: auto;
+      }
+    }
+  }
+
+  &-footer {
+    display: block;
+  }
+}

package/dist/styles/components/popup.scss

@@ -0,0 +1,77 @@
+@import './mask.scss';
+@import "../../styles/themes/variable.scss";
+@import "../../styles/themes/default.scss";
+@import "../../styles/themes/animation.scss";
+
+#{$xh-prefix}-popup {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 10000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: env(safe-area-inset-bottom);
+  margin-bottom: constant(safe-area-inset-bottom);
+  overflow: auto;
+  &.visible {
+    visibility: visible;
+    .xh-popup-content {
+      animation: slide-up 0.3s;
+    }
+  }
+  &.hidden {
+    visibility: hidden;
+  }
+  &::after {
+    content: "";
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: env(safe-area-inset-bottom);
+    height: constant(safe-area-inset-bottom);
+
+    background: #fff;
+  }
+
+  &-content {
+    position: absolute;
+    z-index: 1000;
+
+    &-left {
+      top: 0;
+      left: 0;
+      height: 100vh;
+    }
+
+    &-right {
+      top: 0;
+      right: 0;
+      height: 100vh;
+    }
+
+    &-top {
+      left: 0;
+      top: 0;
+      width: 100vw;
+    }
+
+    &-bottom {
+      left: 0;
+      bottom: 0;
+      width: 100vw;
+      // animation: slide-up 0.3s;
+    }
+  }
+}
+
+@keyframes slide-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}

package/dist/styles/components/scale.scss

@@ -0,0 +1,27 @@
+:global {
+  .scale {
+    &-enter,
+    &-appear {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+
+    &-enter-active,
+    &-appear-active {
+      opacity: 1;
+      transform: scale(1);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+
+    &-exit {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transform: scale(0.8);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+  }
+}

package/dist/styles/components/scrollview.scss

@@ -0,0 +1,4 @@
+.xh-scroll-view {
+  overflow: scroll;
+  max-height: 100vh;
+}

package/dist/styles/components/slide.scss

@@ -0,0 +1,105 @@
+:global {
+  .slide-up {
+    &-enter,
+    &-appear {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+
+    &-enter-active,
+    &-appear-active {
+      opacity: 1;
+      transform: translateY(0);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+
+    &-exit {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transform: translateY(100%);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+  }
+
+  .slide-down {
+    &-enter,
+    &-appear {
+      opacity: 0;
+      transform: translateY(-100%);
+    }
+
+    &-enter-active,
+    &-appear-active {
+      opacity: 1;
+      transform: translateY(0);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+
+    &-exit {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transform: translateY(-100%);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+  }
+
+  .slide-left {
+    &-enter,
+    &-appear {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+
+    &-enter-active,
+    &-appear-active {
+      opacity: 1;
+      transform: translateX(0);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+
+    &-exit {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transform: translateX(100%);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+  }
+
+  .slide-right {
+    &-enter,
+    &-appear {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
+
+    &-enter-active,
+    &-appear-active {
+      opacity: 1;
+      transform: translateX(0);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+
+    &-exit {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transform: translateX(-100%);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+  }
+}

package/dist/styles/components/tabbar.scss

@@ -0,0 +1,42 @@
+#{$xh-prefix}-tabbar {
+  &-nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 20px;
+    font-size: 34px;
+    box-sizing: border-box;
+    position: relative;
+
+    &-item {
+      flex: 1;
+      text-align: center;
+    }
+    &-line {
+      width: 60px;
+      height: 6px;
+      border-radius: 100px;
+      position: absolute;
+      bottom: 0;
+      transition: transform 0.3s;
+      &-active {
+        transition: all 0.3s;
+      }
+    }
+  }
+  &-content {
+    overflow: hidden;
+    &-item {
+      width: 750px;
+      padding: 0 40px;
+      float: left;
+      box-sizing: border-box;
+    }
+    &-item-dispaly {
+      display: none;
+    }
+    &-item-active {
+      transition-duration: 0.5s;
+    }
+  }
+}

package/dist/styles/components/toast.scss

@@ -5,8 +5,8 @@
 @font-face {
   font-family: 'iconfont';
   src: url('./font/iconfont.ttf?t=1656570936378') format('woff2'),
-       url('../../assets/font/iconfont.woff?t=1656570936378') format('woff'),
-       url('../../assets/font/iconfont.woff2?t=1656570936378') format('truetype');
+       url('./font/iconfont.woff?t=1656570936378') format('woff'),
+       url('./font/iconfont.woff2?t=1656570936378') format('truetype');
 }
 
 .iconfont {

package/dist/styles/index.scss

@@ -1,6 +1,6 @@
-@import './themes/variable.scss';
-@import './themes/default.scss';
-@import './themes/base.scss';
-
-@import './components/index.scss'
+@import "./themes/variable.scss";
+@import "./themes/default.scss";
+@import "./themes/base.scss";
+@import "./themes/animation.scss";
 
+@import "./components/index.scss";