@trionesdev/antd-mobile-base-react 0.0.2-beta.0 → 0.0.2-beta.2

package/dist/Result/style.scss

@@ -1,73 +1,73 @@
-$class-prefix-result: 'triones-antm-result';
-/* prettier-ignore */
-.#{$class-prefix-result} {
-  padding: 32PX 12PX;
-  background-color: var(--triones-antm-color-background);
-
-  &-icon {
-    box-sizing: border-box;
-    width: 64PX;
-    height: 64PX;
-    margin: 0 auto 20PX auto;
-    padding: 6PX;
-
-    .antd-mobile-icon {
-      font-size: 52PX;
-    }
-  }
-
-  &-title {
-    color: var(--triones-antm-color-text);
-    font-size: var(--triones-antm-font-size-10);
-    line-height: 1.4;
-    text-align: center;
-  }
-
-  &-description {
-    margin-top: 8PX;
-    color: var(--triones-antm-color-weak);
-    font-size: var(--triones-antm-font-size-main);
-    line-height: 1.4;
-    text-align: center;
-  }
-}
-
-.#{$class-prefix-result}-success {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-primary);
-    }
-  }
-}
-
-.#{$class-prefix-result}-error {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-danger);
-    }
-  }
-}
-
-.#{$class-prefix-result}-info {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-primary);
-    }
-  }
-}
-
-.#{$class-prefix-result}-waiting {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-success);
-    }
-  }
-}
-
-.#{$class-prefix-result}-warning {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-warning);
-    }
-  }
-}
+$class-prefix-result: 'triones-antm-result';
+/* prettier-ignore */
+.#{$class-prefix-result} {
+  padding: 32PX 12PX;
+  background-color: var(--triones-antm-color-background);
+
+  &-icon {
+    box-sizing: border-box;
+    width: 64PX;
+    height: 64PX;
+    margin: 0 auto 20PX auto;
+    padding: 6PX;
+
+    .antd-mobile-icon {
+      font-size: 52PX;
+    }
+  }
+
+  &-title {
+    color: var(--triones-antm-color-text);
+    font-size: var(--triones-antm-font-size-10);
+    line-height: 1.4;
+    text-align: center;
+  }
+
+  &-description {
+    margin-top: 8PX;
+    color: var(--triones-antm-color-weak);
+    font-size: var(--triones-antm-font-size-main);
+    line-height: 1.4;
+    text-align: center;
+  }
+}
+
+.#{$class-prefix-result}-success {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-primary);
+    }
+  }
+}
+
+.#{$class-prefix-result}-error {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-danger);
+    }
+  }
+}
+
+.#{$class-prefix-result}-info {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-primary);
+    }
+  }
+}
+
+.#{$class-prefix-result}-waiting {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-success);
+    }
+  }
+}
+
+.#{$class-prefix-result}-warning {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-warning);
+    }
+  }
+}

package/dist/SafeArea/style.scss

@@ -1,18 +1,18 @@
-@import "../style/variable";
-
-$class-prefix-safe-area: 'triones-antm-safe-area';
-
-.#{$class-prefix-safe-area} {
-  height: 100%;
-  display: block;
-  width: 100%;
-  box-sizing: border-box;
-
-  &-position-top {
-    padding-top: calc(env(safe-area-inset-top) * $trionesSafeAreaMultiple);
-  }
-
-  &-position-bottom {
-    padding-bottom: calc(env(safe-area-inset-bottom) * $trionesSafeAreaMultiple);
-  }
-}
+@use "../style/variable" as *;
+
+$class-prefix-safe-area: 'triones-antm-safe-area';
+
+.#{$class-prefix-safe-area} {
+  height: 100%;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+
+  &-position-top {
+    padding-top: calc(env(safe-area-inset-top) * $trionesSafeAreaMultiple);
+  }
+
+  &-position-bottom {
+    padding-bottom: calc(env(safe-area-inset-bottom) * $trionesSafeAreaMultiple);
+  }
+}

package/dist/Scaffold/style.scss

@@ -1,16 +1,16 @@
-@import "../style/variable";
-
-
-$trionesScaffoldCls: 'triones-antm-scaffold';
-
-.#{$trionesScaffoldCls} {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-
-  &-body {
-    flex: 1 auto;
-    overflow: hidden;
-  }
-}
+@use "../style/variable" as *;
+
+
+$trionesScaffoldCls: 'triones-antm-scaffold';
+
+.#{$trionesScaffoldCls} {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &-body {
+    flex: 1 auto;
+    overflow: hidden;
+  }
+}

package/dist/ScrollView/style.scss

@@ -1,19 +1,19 @@
-$trionesScrollViewCls: 'triones-antm-scroll-view';
-
-.#{$trionesScrollViewCls} {
-  scrollbar-width: thin;
-
-  &-scroll-x {
-    overflow-x: auto;
-    overflow-y: hidden;
-  }
-
-  &-scroll-y {
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-
-  &-scroll-bar-hidden {
-    scrollbar-width: none;
-  }
-}
+$trionesScrollViewCls: 'triones-antm-scroll-view';
+
+.#{$trionesScrollViewCls} {
+  scrollbar-width: thin;
+
+  &-scroll-x {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  &-scroll-y {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &-scroll-bar-hidden {
+    scrollbar-width: none;
+  }
+}

package/dist/SideBar/side-bar.js

@@ -70,8 +70,8 @@ var SideBarContent = /*#__PURE__*/memo(function (_ref2) {
     };
   }();
 
-  /**
-   * 计算当前页顶部，距离可滚动区域顶部的距离
+  /**
+   * 计算当前页顶部，距离可滚动区域顶部的距离
    */
   var computeReactiveOffsetTop = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
@@ -90,8 +90,8 @@ var SideBarContent = /*#__PURE__*/memo(function (_ref2) {
     };
   }();
 
-  /**
-   * 计算当前页底部，距离可滚动区域顶部的距离
+  /**
+   * 计算当前页底部，距离可滚动区域顶部的距离
    */
   var computeReactiveOffsetBottom = /*#__PURE__*/function () {
     var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
@@ -138,8 +138,8 @@ var SideBarContent = /*#__PURE__*/memo(function (_ref2) {
     }
   }, [activeKey]);
 
-  /**
-   * 监听滚动变化，只有在人为操作的时候才监听滚动的位置是否需要切换tab，如果是切换tab 引发的滚动则不执行
+  /**
+   * 监听滚动变化，只有在人为操作的时候才监听滚动的位置是否需要切换tab，如果是切换tab 引发的滚动则不执行
    */
   useEffect(function () {
     // return;

package/dist/SideBar/style.scss

@@ -1,85 +1,85 @@
-@import "../style/variable";
-
-$trionesSideBarCls: 'triones-antm-sidebar';
-
-.#{$trionesSideBarCls} {
-  display: flex;
-  height: 100%;
-
-
-  &-tabs {
-    min-width: 0;
-    background-color: $trionesColorFill;
-    overflow: auto;
-    scrollbar-width: thin;
-    flex-shrink: 0;
-  }
-
-  &-tab {
-    cursor: pointer;
-    padding: $trionesPadding $trionesPadding;
-    color: $trionesColorTextSecondary;
-
-    &-active {
-      color: $trionesColorPrimaryText;
-      background-color: $trionesColorBgBase;
-    }
-
-  }
-
-  &-content {
-    flex: 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    //overflow-y: auto;
-    //scrollbar-width: none;
-    position: relative;
-    user-select: none;
-    touch-action: none;
-
-
-    &-wheel {
-      width: 100%;
-      cursor: grab;
-      position: absolute;
-    }
-
-    &-item {
-
-      &-active {
-        display: block;
-      }
-    }
-  }
-
-  &-switch-mode {
-    .#{$trionesSideBarCls} {
-      &-content {
-
-        &-item {
-          height: 100%;
-          display: none;
-          &-active {
-            display: block;
-          }
-        }
-      }
-    }
-  }
-
-  &-scroll-mode {
-    .#{$trionesSideBarCls} {
-      &-content {
-
-        &-item {
-
-
-          &-active {
-            display: block;
-          }
-        }
-      }
-    }
-  }
-
-}
+@use "../style/variable" as *;
+
+$trionesSideBarCls: 'triones-antm-sidebar';
+
+.#{$trionesSideBarCls} {
+  display: flex;
+  height: 100%;
+
+
+  &-tabs {
+    min-width: 0;
+    background-color: $trionesColorFill;
+    overflow: auto;
+    scrollbar-width: thin;
+    flex-shrink: 0;
+  }
+
+  &-tab {
+    cursor: pointer;
+    padding: $trionesPadding $trionesPadding;
+    color: $trionesColorTextSecondary;
+
+    &-active {
+      color: $trionesColorPrimaryText;
+      background-color: $trionesColorBgBase;
+    }
+
+  }
+
+  &-content {
+    flex: 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    //overflow-y: auto;
+    //scrollbar-width: none;
+    position: relative;
+    user-select: none;
+    touch-action: none;
+
+
+    &-wheel {
+      width: 100%;
+      cursor: grab;
+      position: absolute;
+    }
+
+    &-item {
+
+      &-active {
+        display: block;
+      }
+    }
+  }
+
+  &-switch-mode {
+    .#{$trionesSideBarCls} {
+      &-content {
+
+        &-item {
+          height: 100%;
+          display: none;
+          &-active {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+
+  &-scroll-mode {
+    .#{$trionesSideBarCls} {
+      &-content {
+
+        &-item {
+
+
+          &-active {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+
+}

package/dist/Space/style.scss

@@ -1,77 +1,77 @@
-$class-prefix-space: 'triones-antm-space';
-
-.#{$class-prefix-space}-item {
-  flex: none;
-  display: inline-flex;
-}
-/* prettier-ignore */
-.#{$class-prefix-space} {
-  display: inline-flex;
-  &-vertical {
-    flex-direction: column;
-    > .#{$class-prefix-space}-item {
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-  &-horizontal {
-    flex-direction: row;
-    > .#{$class-prefix-space}-item {
-      &:last-child {
-
-      }
-    }
-    &.#{$class-prefix-space}-wrap {
-      flex-wrap: wrap;
-      > .#{$class-prefix-space}-item {
-
-      }
-    }
-  }
-  &.#{$class-prefix-space}-block {
-    display: flex;
-    width: 100%;
-    .#{$class-prefix-space}-item{
-      display: flex;
-    }
-
-  }
-  &-align {
-    &-center {
-      align-items: center;
-    }
-    &-start {
-      align-items: flex-start;
-    }
-    &-end {
-      align-items: flex-end;
-    }
-    &-baseline {
-      align-items: baseline;
-    }
-  }
-  &-justify {
-    &-center {
-      justify-content: center;
-    }
-    &-start {
-      justify-content: flex-start;
-    }
-    &-end {
-      justify-content: flex-end;
-    }
-    &-between {
-      justify-content: space-between;
-    }
-    &-around {
-      justify-content: space-around;
-    }
-    &-evenly {
-      justify-content: space-evenly;
-    }
-    &-stretch {
-      justify-content: stretch;
-    }
-  }
-}
+$class-prefix-space: 'triones-antm-space';
+
+.#{$class-prefix-space}-item {
+  flex: none;
+  display: inline-flex;
+}
+/* prettier-ignore */
+.#{$class-prefix-space} {
+  display: inline-flex;
+  &-vertical {
+    flex-direction: column;
+    > .#{$class-prefix-space}-item {
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  &-horizontal {
+    flex-direction: row;
+    > .#{$class-prefix-space}-item {
+      &:last-child {
+
+      }
+    }
+    &.#{$class-prefix-space}-wrap {
+      flex-wrap: wrap;
+      > .#{$class-prefix-space}-item {
+
+      }
+    }
+  }
+  &.#{$class-prefix-space}-block {
+    display: flex;
+    width: 100%;
+    .#{$class-prefix-space}-item{
+      display: flex;
+    }
+
+  }
+  &-align {
+    &-center {
+      align-items: center;
+    }
+    &-start {
+      align-items: flex-start;
+    }
+    &-end {
+      align-items: flex-end;
+    }
+    &-baseline {
+      align-items: baseline;
+    }
+  }
+  &-justify {
+    &-center {
+      justify-content: center;
+    }
+    &-start {
+      justify-content: flex-start;
+    }
+    &-end {
+      justify-content: flex-end;
+    }
+    &-between {
+      justify-content: space-between;
+    }
+    &-around {
+      justify-content: space-around;
+    }
+    &-evenly {
+      justify-content: space-evenly;
+    }
+    &-stretch {
+      justify-content: stretch;
+    }
+  }
+}

package/dist/SpinLoading/spin-loading.scss

@@ -1,40 +1,40 @@
-$spinLoadingCls: triones-antm-spin-loading;
-
-.#{$spinLoadingCls} {
-  --size: 32Px;
-  --color: #1677ff;
-  width: var(--size);
-  height: var(--size);
-
-  &-svg {
-    width: 100%;
-    height: 100%;
-    //animation: adm-spin-loading-rotate 0.8s infinite linear;
-
-    > .#{$spinLoadingCls}-circle {
-      //stroke: #1677ff;
-      stroke: var(--color);
-    }
-  }
-
-  &-loading {
-    color: var(--color);
-    display: inline-block;
-    height: 100%;
-    width: 100%;
-    background: currentColor;
-    mask-image: var(--maskImage);
-    -webkit-mask-image: var(--maskImage);
-    animation: adm-spin-loading-rotate 2s infinite linear;
-  }
-
-}
-
-@keyframes adm-spin-loading-rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+$spinLoadingCls: triones-antm-spin-loading;
+
+.#{$spinLoadingCls} {
+  --size: 32Px;
+  --color: #1677ff;
+  width: var(--size);
+  height: var(--size);
+
+  &-svg {
+    width: 100%;
+    height: 100%;
+    //animation: adm-spin-loading-rotate 0.8s infinite linear;
+
+    > .#{$spinLoadingCls}-circle {
+      //stroke: #1677ff;
+      stroke: var(--color);
+    }
+  }
+
+  &-loading {
+    color: var(--color);
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+    background: currentColor;
+    mask-image: var(--maskImage);
+    -webkit-mask-image: var(--maskImage);
+    animation: adm-spin-loading-rotate 2s infinite linear;
+  }
+
+}
+
+@keyframes adm-spin-loading-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}