taro-react-uilib 1.3.1 → 1.3.2-1

package/dist/styles/components/actionsheet.scss

@@ -0,0 +1,121 @@
+@import "../../styles/themes/variable.scss";
+
+@font-face {
+  font-family: "xh-iconfont"; /* Project id 4043926 */
+  src: url("data:application/x-font-woff2;charset=utf-8;base64,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")
+      format("woff2"),
+    url("./font/iconfont.woff?t=1686214093886") format("woff"),
+    url("./font/iconfont.ttf?t=1686214093886") format("truetype");
+}
+
+#{$xh-prefix}-action{
+  &.inline {
+    display: inline-block;
+  }
+  &-sheet {
+    background-color: #fff;
+    border-radius: 32px 32px 0 0;
+    text-align: center;
+    padding-bottom: const(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  &:not(.controlled) {
+    background: #f9f9f9;
+  }
+  &-header {
+    background-color: #fff;
+    border-bottom: 2px solid $border-color;
+    box-sizing: border-box;
+    padding: 32px 0;
+    text-align: center;
+    font-size: 32px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #333333;
+    border-radius: 32px 32px 0 0;
+    position: relative;
+    &-title {
+      font-family: PingFang SC;
+    }
+    &-desc {
+      font-size: 20px;
+      color: #999999;
+    }
+    &-close {
+      font-family: "xh-iconfont";
+      position: absolute;
+      font-size: 42px;
+      top: 30px;
+      right: 30px;
+      &:before {
+        content: "\e608";
+      }
+    }
+  }
+  &-panel {
+    position: relative;
+    background-color: #fff;
+    font-size: 28px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    max-height: 98px * 6;
+    overflow-y: scroll;
+    &.panel {
+      padding: 0 28px;
+    }
+    &-item {
+      font-weight: 400;
+      color: #333333;
+      height: 98px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &.start {
+        justify-content: flex-start;
+      }
+      &.end {
+        justify-content: flex-end;
+      }
+      &:not(:last-child) {
+        border-bottom: 1PX solid #eee;
+      }
+      &:active {
+        background-color: #eee;
+      }
+    }
+  }
+  &-action {
+    padding: 0 28px 0;
+    font-size: 28px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #999999;
+    margin-top: 20px;
+    background-color: #fff;
+    &-submit {
+      padding: 29px 0;
+      background-color: var(--color-primary);
+      text-align: center;
+      outline: 0;
+      border: 0;
+      width: 100%;
+      border-radius: 48px;
+      color: #fff;
+      font-size: 32px;
+      &:active {
+        opacity: 0.6;
+      }
+    }
+    &-cancel {
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      background-color: #fff;
+      padding: 28px;
+      &:active {
+        background-color: #eee;
+      }
+      &.mode {
+        margin-top: 28px;
+      }
+    }
+  }
+}
+}

package/dist/styles/components/activityindicator.scss

@@ -0,0 +1,43 @@
+@import "../../styles/themes/variable.scss";
+
+#{$xh-prefix}-activity-indicator {
+  display: inline-block;
+  position: relative;
+  width: 36px;
+  height: 36px;
+  vertical-align: middle;
+  &-main {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    margin: 1PX;
+    border-width: 1PX;
+    border-style: solid;
+    border-color: var(--color-primary) transparent transparent transparent;
+    border-radius: 50%;
+    animation: loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+
+    &:nth-child(1) {
+      animation-delay: -0.45s;
+    }
+
+    &:nth-child(2) {
+      animation-delay: -0.3s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: -0.15s;
+    }
+  }
+}
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/dist/styles/components/amountinput.scss

@@ -4,13 +4,13 @@
   display: flex;
   padding: 0 40px;
   flex-direction: column;
-  background-color: #FFF;
+  background-color: #fff;
   &-top {
     display: flex;
     justify-content: space-between;
     width: 100%;
     padding: 32px 0;
-    border-bottom: 2px solid #EEE;
+    border-bottom: 2px solid #eee;
     align-items: baseline;
     &-unit {
       font-size: 36px;
@@ -20,7 +20,7 @@
       align-items: center;
       justify-content: space-between;
       flex: 1;
-      line-height: 1.2;
+      line-height: 1;
       // height: 128px;
       position: relative;
       &-num {
@@ -37,7 +37,7 @@
           font-size: 28px;
           font-family: PingFang SC-Regular, PingFang SC;
           font-weight: 400;
-          color: #B9B9B9;
+          color: #b9b9b9;
           position: absolute;
           left: 32px;
         }
@@ -70,7 +70,7 @@
     font-size: 20px;
     font-family: PingFang SC-Regular, PingFang SC;
     font-weight: 400;
-    color: var(--color-warning);
+    color: var(--color-fail);
     margin-top: 8px;
   }
   &-bottom {
@@ -97,7 +97,6 @@
   }
 }
 
-
 @keyframes CursorShine {
   from {
     opacity: 1;

package/dist/styles/components/amountkeyboard.scss

@@ -2,6 +2,15 @@
 @import './space.scss';
 @import "../../styles/themes/variable.scss";
 
+
+@font-face {
+  font-family: "xh-iconfont"; /* Project id 4043926 */
+  src:
+    url('./font/iconfont.woff2?t=1687140360510') format('woff2'),
+    url('./font/iconfont.woff?t=1687140360510') format('woff'),
+    url('./font/iconfont.ttf?t=1687140360510') format('truetype');
+}
+
 #{$xh-prefix}-amount-keyboard {
   position: fixed;
   bottom: 0;
@@ -10,7 +19,7 @@
   z-index: 999;
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
-  background-color: #FFF;
+  background-color: #fff;
 
   &-header {
     border-top: 1PX solid $border-color;
@@ -52,7 +61,7 @@
     position: relative;
     border-bottom: 1PX solid var(--border-color);
     &-key {
-      width: 187px;
+      width: 25%;
       height: 112px;
       box-sizing: border-box;
       display: flex;
@@ -69,18 +78,27 @@
         background-color: #eee;
       }
       &.delete {
-        background-image: url("./images/backspace.png");
-        background-size: 25%;
-        background-repeat: no-repeat;
-        background-position: center;
-        box-shadow: none;
+        font-family: 'xh-iconfont';
+        font-style: normal;
+        font-weight: 400;
+        font-variant: normal;
+        text-transform: none;
+        text-rendering: auto;
+        line-height: 1;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        vertical-align: middle;
+      }
+      &.delete {
+        &:before {
+          content: "\e61b";
+        }
       }
       &.close {
-        background-image: url("./images/closeKeyboard.png");
-        background-size: 25%;
-        background-repeat: no-repeat;
-        background-position: center;
-        box-shadow: none;
+        @extend .delete;
+        &:before {
+          content: "\e620";
+        }
       }
       &.none {
         visibility: hidden;
@@ -91,11 +109,12 @@
         position: absolute;
         bottom: 0;
         right: 0;
-        width: 192px;
+        width: 25%;
         height: 336px;
         color: #FFF;
+        border-color: 1PX;
         &:active {
-          opacity: .8;
+          opacity: 0.8;
         }
       }
     }

package/dist/styles/components/badge.scss

@@ -1,4 +1,3 @@
-
 @import "../../styles/themes/variable.scss";
 
 #{$xh-prefix}-badge {

package/dist/styles/components/bankicon.scss

@@ -1,5 +1,5 @@
 @import "../../styles/themes/variable.scss";
-@import "../../styles/themes/default.scss";
+
 #{$xh-prefix}-bank-icon {
   width: 60px;
   height: 60px;

package/dist/styles/components/button.scss

@@ -1,7 +1,7 @@
 @import "../../styles/themes/variable.scss";
 
 button.xh-button-disabled[disabled][type="primary"] {
-  background-color: var(--color-disabled);
+  background-color: var(--btn-color-disabled);
   color: #fff;
 }
 button.xh-button-primary[type=primary] {
@@ -61,7 +61,7 @@ button.xh-button-primary[type=primary] {
   }
 
   &-disabled {
-    background: var(--color-disabled);
+    background: var(--btn-color-disabled);
     color: #fff;
     box-shadow: unset;
   }
@@ -84,15 +84,17 @@ button.xh-button-primary[type=primary] {
 
   &-small {
     font-size: 20px;
-    width: 150px;
+    width: 170px;
     display: inline-block;
   }
   &-full {
     width: 100%;
-    padding: 14px 0;
   }
   &-ghost {
-    background-color: #fff;
+    background: #fff;
+    color: var(--color-primary);
+    box-shadow: none;
+    border: 0;
   }
 
   &-webutton {

package/dist/styles/components/captcha.scss

@@ -1,11 +1,16 @@
 @import './button.scss';
 @import "../../styles/themes/variable.scss";
-@import "../../styles/themes/default.scss";
 
 #{$xh-prefix}-captcha {
-  color: $color-primary;
+  color: var(--color-primary);
   background-color: #fff;
-  border-color: #333;
+  border-color: currentColor;
+  border-radius: 32px;
+  font-size: 26px;
+  width: 210px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #F95700;
   &:disabled {
     color: #d5d5d5;
   }

package/dist/styles/components/cell.scss

@@ -0,0 +1,113 @@
+@import "../../styles/themes/variable.scss";
+
+#{$xh-prefix}-cell {
+  display: flex;
+  justify-content: space-between;
+  background-color: #fff;
+  align-items: center;
+  position: relative;
+  box-sizing: border-box;
+  line-height: 1.2;
+  padding: 28px;
+  font-size: 28px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #333333;
+  &.start {
+    align-items: flex-start;
+  }
+  &.center {
+    align-items: center;
+  }
+  &.end {
+    align-items: flex-end;
+  }
+  &.secondary {
+    padding: 16px 28px;
+  }
+  &.outline:active {
+    background-color: #f0f0f0;
+  }
+  &.border {
+    border-bottom: 1px solid #eee;
+  }
+  &-icon {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    margin-right: 15px;
+    img {
+      max-width: 100%;
+      max-height: 100%;
+    }
+    image {
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+  &-main {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    overflow: hidden;
+    &.ellipsis {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    color: inherit;
+    font-size: inherit;
+    line-height: 1.5;
+    &-content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    &-description {
+      font-size: 20px;
+    }
+  }
+  &-description {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    margin-left: 80px;
+    flex-direction: column;
+    display: flex;
+    &-placeholder {
+      color: var(--font-color-tertiary)
+    }
+    &-sub {
+      font-size: 20px;
+      margin-top: 2px;
+    }
+  }
+
+  &-value {
+    display: flex;
+    align-items: center;
+    // max-width: 280px;
+    &-info {
+      display: inline-block;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    &-icon {
+      display: inline-block;
+      margin-left: 7px;
+      .arrow {
+        display: block;
+        display: block;
+        font-family: 'xh-iconfont';
+        -webkit-font-smoothing: antialiased;
+        font-size: 20PX;
+        color: #c8c8c8;
+        &:before {
+          content: "\e603";
+        }
+      }
+    }
+  }
+}

package/dist/styles/components/checkbox.scss

@@ -1,5 +1,4 @@
 @import "../../styles/themes/variable.scss";
-@import "../../styles/themes/animation.scss";
 
 #{$xh-prefix}-checkbox {
   display: flex;
@@ -37,8 +36,8 @@
       }
     }
     &:disabled + &-fake {
-      background: rgba(0, 0, 0, .04);
-      border-color: $color-disabled;
+      background-color: var(--border-color);
+      border-color: var(--font-color-fifth);
       cursor: not-allowed;
     }
     &[checked] + &-fake{
@@ -60,8 +59,8 @@
       }
     }
     &[disabled] + &-fake {
-      background: rgba(0, 0, 0, .04);
-      border-color: $color-disabled;
+      background-color: var(--border-color);
+      border-color: var(--font-color-fifth);
       cursor: not-allowed;
     }
   }

package/dist/styles/components/dialog.scss

@@ -1,6 +1,5 @@
 @import './button.scss';
 @import './mask.scss';
-@import "../../styles/themes/default.scss";
 @import "../../styles/themes/variable.scss";
 @import "../../styles/themes/animation.scss";
 
@@ -19,9 +18,9 @@
     background-color: #fff;
     z-index: 999;
     width: 600px;
-    padding-top: 60px;
+    padding-top: 64px;
     box-sizing: border-box;
-    border-radius: 10px;
+    border-radius: 16px;
     text-align: center;
     &-header {
       font-size: 38px;
@@ -35,8 +34,8 @@
       margin: 40px auto 0;
       font-size: 30px;
       font-family: PingFang SC;
-      color: #999;
-      padding: 0 60px;
+      color: var(--font-color);
+      padding: 0 64px;
       &.headless {
         color: #333;
         font-size: 34px;
@@ -45,27 +44,28 @@
     &-footer {
       margin-top: 60px;
       .xh-alert-button {
-        font-size: 32px;
-        font-weight: 800;
-        margin-bottom: 60px;
-        width: 300px;
-        height: 90px;
+        width: 100%;
+        padding: 8px 0;
+        border-bottom-left-radius: 16px;
+        border-bottom-right-radius: 16px;
+        border-top: 1PX solid #EEE;
       }
 
       .xh-confirm-footer {
         display: flex;
         justify-content: space-between;
-        padding: 0 40px 50px;
+        border-top: 1PX solid #EEE;
+        border-bottom-left-radius: 16px;
+        border-bottom-right-radius: 16px;
+        overflow: hidden;
         &-button {
           flex: 1;
           font-size: 32px;
-          font-weight: 800;
           padding: 8px 0;
         }
         &-cancel-button {
-          color: #000;
-          margin-right: 40px;
           color: var(--font-color-tertiary);
+          border-right: 1PX solid #EEE;
         }
       }
     }

package/dist/styles/components/dialogref.scss

@@ -1,6 +1,5 @@
 @import './mask.scss';
 @import "../../styles/themes/variable.scss";
-// @import "../../styles/themes/default.scss";
 @import "../../styles/themes/animation.scss";
 
 #{$xh-prefix}-dialog-ref {
@@ -25,53 +24,36 @@
     background-color: #fff;
     z-index: 999;
     width: 600px;
-    // padding-top: 60px;
     box-sizing: border-box;
     border-radius: 10px;
     text-align: center;
     touch-action: none;
+    color: var(--font-color);
+    border-radius: 16px;
     &-header {
-      font-size: 38px;
+      font-size: 32px;
       font-family: PingFang SC;
       font-weight: 500;
       line-height: 53px;
-      color: #333333;
-      margin-top: 30px;
+      margin-top: 64px;
     }
     &-content {
       // margin: 66px auto 0;
-      font-size: 34px;
+      font-size: 28px;
       font-family: PingFang SC;
-      color: #999;
       text-align: left;
     }
     &-footer {
       // margin-top: 60px;
       .xh-dialog-ref-content-footer-buttons {
+        border-top: 1PX solid #EEE;
         display: flex;
-        padding: 0 40px 50px;
-        &:not(.microApp) {
-          height: 100px;
-        }
-        &.microApp {
-          border-top: 2px solid #f8f8f8;
-          padding: 0;
-        }
-        &-microapp-cancel {
-          color: var(--font-color-tertiary);
-          border-bottom-left-radius: 10px;
-          border-right: 2px solid #f8f8f8;
-          padding: 10px 0;
-        }
-        &-microapp-confirm {
-          color: var(--color-primary);
-          border-bottom-right-radius: 10px;
-          padding: 10px 0;
-        }
-        &-h5-cancel {
-          margin-right: 40px;
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+        overflow: hidden;
+        &-cancel {
           color: var(--font-color-tertiary);
-          padding: 0;
+          border-right: 1PX solid #EEE;
         }
       }
     }