@trionesdev/antd-mobile-react 0.0.2-beta.19 → 0.0.2-beta.20

package/dist/ImagesWall/style.scss

@@ -1,70 +1,70 @@
-@use "../style/variable" as variable;
-
-$imagesWallCls: 'triones-antm-images-wall';
-
-.#{$imagesWallCls} {
-  display: grid;
-  grid-gap: 4PX;
-  width: 100%;
-
-  &-item {
-    aspect-ratio: 1;
-    border-radius: variable.$trionesBorderRadius;
-    overflow: hidden;
-    position: relative;
-
-    &-inner {
-      width: 100%;
-      height: 100%;
-    }
-
-    &-close {
-      position: absolute;
-      top: 0;
-      right: 0;
-      background-color: rgb(0 0 0 / 63%);
-      width: 20Px;
-      height: 20Px;
-      border-bottom-left-radius: variable.$trionesBorderRadius;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .triones-antm-icon {
-        color: white;
-        font-size: 12Px;
-      }
-    }
-
-    &-input {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      margin: 0;
-      padding: 0;
-      z-index: 1;
-      opacity: 0;
-    }
-
-    &-image {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
-  &-upload {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: variable.$trionesColorBgTextActive;
-  }
-
-  &-action-sheet {
-
-  }
-}
-
-
+@use "../style/variable" as variable;
+
+$imagesWallCls: 'triones-antm-images-wall';
+
+.#{$imagesWallCls} {
+  display: grid;
+  grid-gap: 4PX;
+  width: 100%;
+
+  &-item {
+    aspect-ratio: 1;
+    border-radius: variable.$trionesBorderRadius;
+    overflow: hidden;
+    position: relative;
+
+    &-inner {
+      width: 100%;
+      height: 100%;
+    }
+
+    &-close {
+      position: absolute;
+      top: 0;
+      right: 0;
+      background-color: rgb(0 0 0 / 63%);
+      width: 20Px;
+      height: 20Px;
+      border-bottom-left-radius: variable.$trionesBorderRadius;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .triones-antm-icon {
+        color: white;
+        font-size: 12Px;
+      }
+    }
+
+    &-input {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      margin: 0;
+      padding: 0;
+      z-index: 1;
+      opacity: 0;
+    }
+
+    &-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &-upload {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: variable.$trionesColorBgTextActive;
+  }
+
+  &-action-sheet {
+
+  }
+}
+
+

package/dist/Input/demo/base.js

@@ -1,5 +1,5 @@
-/**
- * compact: true
+/**
+ * compact: true
  */
 import { DemoBlock } from "../../DemoBlock";
 import React from 'react';

package/dist/Input/index.scss

@@ -1,240 +1,240 @@
-@use "../style/variable" as variable;
-
-$inputCls: 'triones-antm-input';
-$inputAffixWrapperCls: 'triones-antm-input-affix-wrapper';
-$inputGroupWrapperCls: 'triones-antm-input-group-wrapper';
-$inputPotCls: 'triones-antm-pot';
-
-$inputSm: 24Px;
-$inputMd: 32Px;
-$inputLg: 40Px;
-
-$placeholderColor: #CCCCCC;
-
-.#{$inputCls} {
-  box-sizing: border-box;
-  display: inline-block;
-  position: relative;
-  width: 100%;
-  min-width: 0;
-  transition: all .2s;
-  outline: none;
-  box-shadow: none;
-  border: none;
-  border-radius: variable.$trionesBorderRadius;
-  font-size: variable.$trionesInputInputFontSize;
-  //padding: variable.$trionesInputPaddingBlock 0;
-
-  &-sm {
-    max-height: $inputSm;
-    //font-size: variable.$trionesInputPaddingInlineSm 0;
-  }
-
-  &-lg {
-    max-height: $inputLg;
-    //font-size: variable.$trionesInputPaddingInlineLg 0;
-  }
-
-  &::placeholder {
-    font-size: variable.$trionesInputInputFontSize;
-    color: $placeholderColor
-  }
-
-
-}
-
-
-.#{$inputAffixWrapperCls} {
-  box-sizing: border-box;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-  min-width: 0;
-  //line-height: variable.$trionesLineHeight;
-  //padding: variable.$trionesInputPaddingBlock 0;
-  gap: 4Px;
-
-  &-small {
-    padding: variable.$trionesInputPaddingBlockSm 0;
-    font-size: variable.$trionesInputInputFontSizeSm;
-  }
-
-  &-large {
-    padding: variable.$trionesInputPaddingBlockLg 0;
-    font-size: variable.$trionesInputInputFontSizeLg;
-  }
-
-  .#{$inputCls} {
-    padding: 0;
-    background-color: transparent;
-
-    &-prifix {
-    }
-
-    &-suffix {
-      display: inline-flex;
-      align-items: center;
-      flex-shrink: 0;
-      gap: 4Px;
-
-      .clear-icon {
-        color: rgba(0, 0, 0, 0.25);
-
-
-        &:hover {
-          color: rgba(0, 0, 0, 0.45);
-        }
-      }
-
-      .triones-antm-icon {
-        cursor: pointer;
-      }
-    }
-  }
-
-  input {
-    // height: 1.47059em;
-    line-height: 1.47059;
-
-    &::placeholder {
-      font-size: variable.$trionesInputInputFontSize;
-      color: $placeholderColor
-    }
-  }
-}
-
-.#{$inputCls} {
-  &-outlined {
-    padding-block: variable.$trionesInputPaddingBlock;
-    border-radius: variable.$trionesBorderRadius;
-    border: 1Px solid variable.$trionesBorderColor;
-    padding-inline: 4Px;
-    box-sizing: border-box;
-  }
-
-  &-filled {
-    border-radius: variable.$trionesBorderRadius;
-    background-color: variable.$trionesColorFillTertiary;
-    padding-inline: variable.$trionesInputPaddingBlock;
-    padding-block: variable.$trionesInputPaddingBlock;
-    box-sizing: border-box;
-    border: 0;
-  }
-
-  &-borderless {
-    border: 0;
-  }
-
-  &-underlined {
-    border-top: 0;
-    border-left: 0;
-    border-right: 0;
-    border-bottom: 1Px solid variable.$trionesBorderColor;
-    padding-block: variable.$trionesInputPaddingBlock;
-    box-sizing: border-box;
-  }
-}
-
-
-
-.#{$inputPotCls} {
-  position: relative;
-  display: inline-flex;
-  vertical-align: middle;
-
-  &-wrapper {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    column-gap: 8Px;
-  }
-
-  &-input {
-    position: absolute;
-    background-color: transparent;
-    z-index: -1;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    opacity: 0;
-    -moz-appearance: textfield;
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-  }
-
-  &-item {
-    text-align: center;
-    font-size: variable.$trionesInputInputFontSize;
-    height: variable.$trionesControlHeight;
-    width: variable.$trionesControlHeight;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    &-sm {
-      width: variable.$trionesControlHeightSm;
-      height: variable.$trionesControlHeightSm;
-    }
-
-    &-lg {
-      width: variable.$trionesControlHeightLg;
-      height: variable.$trionesControlHeightLg;
-    }
-
-    &::placeholder {
-      font-size: variable.$trionesInputInputFontSize;
-      color: $placeholderColor
-    }
-
-    &-focus {
-      &::after {
-        content: ' ';
-        height: 100%;
-        width: 0.5Px;
-        background-color: #0a0a0a;
-        transition: transform 0.1s ease;
-        animation: blink 1s step-end infinite;
-      }
-    }
-
-  }
-
-  .#{$inputCls}-outlined {
-    font-size: variable.$trionesInputInputFontSize;
-    color: rgba(0, 0, 0, 0.88);
-    background: #ffffff;
-    border-width: 1Px;
-    border-style: solid;
-    border-color: #d9d9d9;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-  }
-}
-
-
-.#{$inputCls}-textarea {
-  box-sizing: border-box;
-  width: 100%;
-  outline: 0;
-  //padding-block: variable.$trionesInputPaddingBlock;
-  font-size: variable.$trionesInputInputFontSize;
-
-  &::placeholder {
-    font-size: variable.$trionesInputInputFontSize;
-    color: $placeholderColor
-  }
-}
-
-@keyframes blink {
-  50% {
-    background-color: transparent;
-  }
-}
+@use "../style/variable" as variable;
+
+$inputCls: 'triones-antm-input';
+$inputAffixWrapperCls: 'triones-antm-input-affix-wrapper';
+$inputGroupWrapperCls: 'triones-antm-input-group-wrapper';
+$inputPotCls: 'triones-antm-pot';
+
+$inputSm: 24Px;
+$inputMd: 32Px;
+$inputLg: 40Px;
+
+$placeholderColor: #CCCCCC;
+
+.#{$inputCls} {
+  box-sizing: border-box;
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  transition: all .2s;
+  outline: none;
+  box-shadow: none;
+  border: none;
+  border-radius: variable.$trionesBorderRadius;
+  font-size: variable.$trionesInputInputFontSize;
+  //padding: variable.$trionesInputPaddingBlock 0;
+
+  &-sm {
+    max-height: $inputSm;
+    //font-size: variable.$trionesInputPaddingInlineSm 0;
+  }
+
+  &-lg {
+    max-height: $inputLg;
+    //font-size: variable.$trionesInputPaddingInlineLg 0;
+  }
+
+  &::placeholder {
+    font-size: variable.$trionesInputInputFontSize;
+    color: $placeholderColor
+  }
+
+
+}
+
+
+.#{$inputAffixWrapperCls} {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  //line-height: variable.$trionesLineHeight;
+  //padding: variable.$trionesInputPaddingBlock 0;
+  gap: 4Px;
+
+  &-small {
+    padding: variable.$trionesInputPaddingBlockSm 0;
+    font-size: variable.$trionesInputInputFontSizeSm;
+  }
+
+  &-large {
+    padding: variable.$trionesInputPaddingBlockLg 0;
+    font-size: variable.$trionesInputInputFontSizeLg;
+  }
+
+  .#{$inputCls} {
+    padding: 0;
+    background-color: transparent;
+
+    &-prifix {
+    }
+
+    &-suffix {
+      display: inline-flex;
+      align-items: center;
+      flex-shrink: 0;
+      gap: 4Px;
+
+      .clear-icon {
+        color: rgba(0, 0, 0, 0.25);
+
+
+        &:hover {
+          color: rgba(0, 0, 0, 0.45);
+        }
+      }
+
+      .triones-antm-icon {
+        cursor: pointer;
+      }
+    }
+  }
+
+  input {
+    // height: 1.47059em;
+    line-height: 1.47059;
+
+    &::placeholder {
+      font-size: variable.$trionesInputInputFontSize;
+      color: $placeholderColor
+    }
+  }
+}
+
+.#{$inputCls} {
+  &-outlined {
+    padding-block: variable.$trionesInputPaddingBlock;
+    border-radius: variable.$trionesBorderRadius;
+    border: 1Px solid variable.$trionesBorderColor;
+    padding-inline: 4Px;
+    box-sizing: border-box;
+  }
+
+  &-filled {
+    border-radius: variable.$trionesBorderRadius;
+    background-color: variable.$trionesColorFillTertiary;
+    padding-inline: variable.$trionesInputPaddingBlock;
+    padding-block: variable.$trionesInputPaddingBlock;
+    box-sizing: border-box;
+    border: 0;
+  }
+
+  &-borderless {
+    border: 0;
+  }
+
+  &-underlined {
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 1Px solid variable.$trionesBorderColor;
+    padding-block: variable.$trionesInputPaddingBlock;
+    box-sizing: border-box;
+  }
+}
+
+
+
+.#{$inputPotCls} {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+
+  &-wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    column-gap: 8Px;
+  }
+
+  &-input {
+    position: absolute;
+    background-color: transparent;
+    z-index: -1;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    -moz-appearance: textfield;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
+  &-item {
+    text-align: center;
+    font-size: variable.$trionesInputInputFontSize;
+    height: variable.$trionesControlHeight;
+    width: variable.$trionesControlHeight;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    &-sm {
+      width: variable.$trionesControlHeightSm;
+      height: variable.$trionesControlHeightSm;
+    }
+
+    &-lg {
+      width: variable.$trionesControlHeightLg;
+      height: variable.$trionesControlHeightLg;
+    }
+
+    &::placeholder {
+      font-size: variable.$trionesInputInputFontSize;
+      color: $placeholderColor
+    }
+
+    &-focus {
+      &::after {
+        content: ' ';
+        height: 100%;
+        width: 0.5Px;
+        background-color: #0a0a0a;
+        transition: transform 0.1s ease;
+        animation: blink 1s step-end infinite;
+      }
+    }
+
+  }
+
+  .#{$inputCls}-outlined {
+    font-size: variable.$trionesInputInputFontSize;
+    color: rgba(0, 0, 0, 0.88);
+    background: #ffffff;
+    border-width: 1Px;
+    border-style: solid;
+    border-color: #d9d9d9;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  }
+}
+
+
+.#{$inputCls}-textarea {
+  box-sizing: border-box;
+  width: 100%;
+  outline: 0;
+  //padding-block: variable.$trionesInputPaddingBlock;
+  font-size: variable.$trionesInputInputFontSize;
+
+  &::placeholder {
+    font-size: variable.$trionesInputInputFontSize;
+    color: $placeholderColor
+  }
+}
+
+@keyframes blink {
+  50% {
+    background-color: transparent;
+  }
+}

package/dist/NavBar/demo/base.scss

@@ -1,5 +1,5 @@
-.my-nav-bar {
-  &-subtitle {
-    font-size: 12px;
-  }
-}
+.my-nav-bar {
+  &-subtitle {
+    font-size: 12px;
+  }
+}

package/dist/NoticeBar/demo/base.js

@@ -1,5 +1,5 @@
-/**
- * compact: true
+/**
+ * compact: true
  */
 import { CloseCircleOutline, SetOutline } from "../../../../antd-mobile-icons-react";
 import { DemoBlock } from "../../DemoBlock";

package/dist/Overlay/style.scss

@@ -1,20 +1,20 @@
-@use "../style/variable" as variable;
-
-$trionesOverlayCls: 'triones-antm-overlay';
-
-.#{$trionesOverlayCls} { 
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, .55);
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  pointer-events: none; // 初始状态不可点击
-  
-  &-active {
-    opacity: 1;
-    pointer-events: auto;
-  }
-}
+@use "../style/variable" as variable;
+
+$trionesOverlayCls: 'triones-antm-overlay';
+
+.#{$trionesOverlayCls} { 
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, .55);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none; // 初始状态不可点击
+  
+  &-active {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}