@trionesdev/antd-mobile-base-react 0.0.2-beta.23 → 0.0.2-beta.25

package/dist/Cell/styles.scss

@@ -1,81 +1,81 @@
-@use "../style/variable" as variable;
-
-$cellCls: 'triones-antm-cell';
-
-.#{$cellCls} {
-  display: flex;
-  gap: 4Px;
-  align-items: center;
-
-  &-small{
-    padding-block: variable.$trionesPaddingXxs;
-  }
-  &-medium{
-    padding-block: variable.$trionesPaddingXs;
-  }
-  &-large{
-    padding-block: variable.$trionesPaddingSm;
-  }
-
-  &-label {
-    display: flex;
-    align-items: center;
-    &-start{
-      justify-content: flex-start;
-    }
-    &-end{
-      justify-content: flex-end;
-    }
-  }
-
-  &-content {
-    flex: 1 auto;
-    display: flex;
-    align-items: center;
-    min-height: 20Px;
-    &-start{
-      justify-content: flex-start;
-    }
-    &-end{
-      justify-content: flex-end;
-    }
-  }
-
-  &-extra {
-    display: flex;
-    align-items: center;
-  }
-  &-arrow{
-    font-size: variable.$trionesFontSize;
-    color: variable.$trionesColorTextPlaceholder;
-    .triones-antm-icon{
-      &::before{
-        font-size: 12Px;
-      }
-    }
-  }
-
-  &-placeholder {
-    font-size: variable.$trionesFontSize;
-    color: variable.$trionesColorTextPlaceholder;
-  }
-}
-
-.#{$cellCls}-group {
-  display: flex;
-  flex-direction: column;
-  border-radius: variable.$trionesBorderRadius;
-
-  &-title {
-    padding: 4Px 4Px;
-    display: flex;
-    justify-content: space-between;
-
-    &-text {
-    }
-
-    &-extra {
-    }
-
-  }
-}
+@use "../style/variable" as variable;
+
+$cellCls: 'triones-antm-cell';
+
+.#{$cellCls} {
+  display: flex;
+  gap: 4Px;
+  align-items: center;
+
+  &-small{
+    padding-block: variable.$trionesPaddingXxs;
+  }
+  &-medium{
+    padding-block: variable.$trionesPaddingXs;
+  }
+  &-large{
+    padding-block: variable.$trionesPaddingSm;
+  }
+
+  &-label {
+    display: flex;
+    align-items: center;
+    &-start{
+      justify-content: flex-start;
+    }
+    &-end{
+      justify-content: flex-end;
+    }
+  }
+
+  &-content {
+    flex: 1 auto;
+    display: flex;
+    align-items: center;
+    min-height: 20Px;
+    &-start{
+      justify-content: flex-start;
+    }
+    &-end{
+      justify-content: flex-end;
+    }
+  }
+
+  &-extra {
+    display: flex;
+    align-items: center;
+  }
+  &-arrow{
+    font-size: variable.$trionesFontSize;
+    color: variable.$trionesColorTextPlaceholder;
+    .triones-antm-icon{
+      &::before{
+        font-size: 12Px;
+      }
+    }
+  }
+
+  &-placeholder {
+    font-size: variable.$trionesFontSize;
+    color: variable.$trionesColorTextPlaceholder;
+  }
+}
+
+.#{$cellCls}-group {
+  display: flex;
+  flex-direction: column;
+  border-radius: variable.$trionesBorderRadius;
+
+  &-title {
+    padding: 4Px 4Px;
+    display: flex;
+    justify-content: space-between;
+
+    &-text {
+    }
+
+    &-extra {
+    }
+
+  }
+}

package/dist/Checkbox/index.scss

@@ -1,165 +1,173 @@
-@use "../style/variable" as variable;
-
-$checkboxCls: 'triones-antm-checkbox';
-
-$checkboxDisabledColor: rgba(0, 0, 0, 0.25) !default;
-
-.#{$checkboxCls}-group {
-
-}
-
-.#{$checkboxCls}-round {
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  gap: 8Px;
-
-  .#{$checkboxCls}-round {
-    position: relative;
-
-    &-input {
-      cursor: inherit;
-      position: absolute;
-      opacity: 0;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      margin: 0;
-      padding: 0;
-      z-index: 1;
-    }
-
-    &-fake {
-      width: 20PX;
-      height: 20PX;
-
-      .triones-antm-icon {
-        //position: absolute;
-      }
-
-      &-checked {
-        height: 100%;
-        width: 100%;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        background-color: variable.$trionesColorPrimary;
-        color: white;
-        border-radius: 50vh;
-        box-sizing: border-box;
-        overflow: hidden;
-        .triones-antm-icon{
-          font-size: 14Px;
-        }
-        //i{
-        //  width: 100%;
-        //  height: 100%;
-        //  display: flex;
-        //  align-items: center;
-        //  justify-content: center;
-        //}
-      }
-
-      &-unchecked {
-        height: 100%;
-        width: 100%;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 50vh;
-        border: 1PX solid variable.$trionesBorderColor;
-        box-sizing: border-box;
-      }
-    }
-  }
-
-
-  &.#{$checkboxCls}-disabled {
-    color: $checkboxDisabledColor;
-    pointer-events: none;
-
-    .#{$checkboxCls}-fake-checked {
-      background-color: $checkboxDisabledColor;
-    }
-  }
-
-  .triones-antm-icon {
-    //position: absolute;
-  }
-}
-
-
-.#{$checkboxCls}-button {
-  cursor: pointer;
-  display: inline-flex;
-  padding: 4Px 12Px;
-  border-radius: variable.$trionesBorderRadius;
-  position: relative;
-  overflow: hidden;
-  background-color: variable.$trionesColorFillSecondary;
-  box-sizing: border-box;
-  border: 1Px solid variable.$trionesColorFillSecondary;
-
-  &-checked {
-    background-color: #ffffff;
-    border: 1Px solid variable.$trionesColorPrimary;
-
-    .#{$checkboxCls}-button-content {
-      color: variable.$trionesColorPrimary;
-    }
-  }
-
-  &-disabled {
-    pointer-events: none;
-    color: $checkboxDisabledColor;
-
-    &.#{$checkboxCls}-button {
-      &-checked {
-        border: 1Px solid $checkboxDisabledColor;
-
-        .#{$checkboxCls}-button-content {
-          color: $checkboxDisabledColor;
-        }
-      }
-
-      .#{$checkboxCls}-button-icon {
-        border-bottom: 10Px solid $checkboxDisabledColor;
-        border-right: 10Px solid $checkboxDisabledColor;
-      }
-    }
-
-  }
-
-
-  &-icon {
-    align-items: flex-end;
-    border-bottom: 10Px solid variable.$trionesColorPrimary;
-    border-left: 10Px solid transparent;
-    border-right: 10Px solid variable.$trionesColorPrimary;
-    border-top: 10Px solid transparent;
-    bottom: 0;
-    display: flex;
-    height: 0;
-    justify-content: flex-end;
-    position: absolute;
-    right: 0;
-    width: 0;
-
-    .checkedIcon {
-      font-size: 6Px;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(1Px, -1Px);
-      //font-family: "triones-ant-mini-icon" !important;
-      font-style: normal;
-      color: #ffffff;
-
-      &::before {
-        font-style: normal;
-        //content: "\e75f";
-      }
-    }
-  }
-}
+@use "../style/variable" as variable;
+
+$checkboxCls: 'triones-antm-checkbox';
+
+$checkboxDisabledColor: #ccc !default;
+$checkboxDisabledBorderColor: #ccc !default;
+$checkboxDisabledBgColor: #f5f5f5 !default;
+
+.#{$checkboxCls}-group {
+
+}
+
+.#{$checkboxCls}-round {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  gap: 8Px;
+
+  .#{$checkboxCls}-round {
+    position: relative;
+
+    &-input {
+      cursor: inherit;
+      position: absolute;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      margin: 0;
+      padding: 0;
+      z-index: 1;
+    }
+
+    &-fake {
+      width: 20PX;
+      height: 20PX;
+
+      .triones-antm-icon {
+        //position: absolute;
+      }
+
+      &-checked {
+        height: 100%;
+        width: 100%;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        background-color: variable.$trionesColorPrimary;
+        color: white;
+        border-radius: 50vh;
+        box-sizing: border-box;
+        overflow: hidden;
+        .triones-antm-icon{
+          font-size: 14Px;
+        }
+        //i{
+        //  width: 100%;
+        //  height: 100%;
+        //  display: flex;
+        //  align-items: center;
+        //  justify-content: center;
+        //}
+      }
+
+      &-unchecked {
+        height: 100%;
+        width: 100%;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50vh;
+        border: 1PX solid variable.$trionesBorderColor;
+        box-sizing: border-box;
+      }
+    }
+  }
+
+
+  &.#{$checkboxCls}-disabled {
+    color: $checkboxDisabledColor;
+    pointer-events: none;
+
+    .#{$checkboxCls}-round-fake{
+      &-checked {
+        background-color: $checkboxDisabledColor;
+      }
+      &-unchecked {
+        border: 1Px solid $checkboxDisabledBorderColor;
+        background-color: $checkboxDisabledBgColor;
+      }
+    }
+  }
+
+  .triones-antm-icon {
+    //position: absolute;
+  }
+}
+
+
+.#{$checkboxCls}-button {
+  cursor: pointer;
+  display: inline-flex;
+  padding: 4Px 12Px;
+  border-radius: variable.$trionesBorderRadius;
+  position: relative;
+  overflow: hidden;
+  background-color: variable.$trionesColorFillSecondary;
+  box-sizing: border-box;
+  border: 1Px solid variable.$trionesColorFillSecondary;
+
+  &-checked {
+    background-color: #ffffff;
+    border: 1Px solid variable.$trionesColorPrimary;
+
+    .#{$checkboxCls}-button-content {
+      color: variable.$trionesColorPrimary;
+    }
+  }
+
+  &-disabled {
+    pointer-events: none;
+    color: $checkboxDisabledColor;
+
+    &.#{$checkboxCls}-button {
+      &-checked {
+        border: 1Px solid $checkboxDisabledColor;
+
+        .#{$checkboxCls}-button-content {
+          color: $checkboxDisabledColor;
+        }
+      }
+
+      .#{$checkboxCls}-button-icon {
+        border-bottom: 10Px solid $checkboxDisabledColor;
+        border-right: 10Px solid $checkboxDisabledColor;
+      }
+    }
+
+  }
+
+
+  &-icon {
+    align-items: flex-end;
+    border-bottom: 10Px solid variable.$trionesColorPrimary;
+    border-left: 10Px solid transparent;
+    border-right: 10Px solid variable.$trionesColorPrimary;
+    border-top: 10Px solid transparent;
+    bottom: 0;
+    display: flex;
+    height: 0;
+    justify-content: flex-end;
+    position: absolute;
+    right: 0;
+    width: 0;
+
+    .checkedIcon {
+      font-size: 6Px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(1Px, -1Px);
+      //font-family: "triones-ant-mini-icon" !important;
+      font-style: normal;
+      color: #ffffff;
+
+      &::before {
+        font-style: normal;
+        //content: "\e75f";
+      }
+    }
+  }
+}

package/dist/Checkbox/types.d.ts

@@ -25,6 +25,6 @@ export type CheckboxProps = {
     defaultChecked?: boolean;
     value?: any;
     disabled?: boolean;
-    onChange?: (e: any) => void;
+    onChange?: (e: boolean) => void;
     shape?: Shape;
 };

package/dist/DemoBlock/index.scss

@@ -1,20 +1,20 @@
-.demoBlock {
-  font-size: 14px;
-  margin-bottom: 12px;
-  &:last-of-type {
-    padding-bottom: 32px;
-  }
-  scrollbar-width: thin;
-}
-
-.demoTitle {
-  padding: 12px 12px 8px;
-  color: #697b8c;
-  font-size: 14px;
-  background: #fafbfc;
-}
-
-.demoMain {
-  border-right: none;
-  border-left: none;
-}
+.demoBlock {
+  font-size: 14px;
+  margin-bottom: 12px;
+  &:last-of-type {
+    padding-bottom: 32px;
+  }
+  scrollbar-width: thin;
+}
+
+.demoTitle {
+  padding: 12px 12px 8px;
+  color: #697b8c;
+  font-size: 14px;
+  background: #fafbfc;
+}
+
+.demoMain {
+  border-right: none;
+  border-left: none;
+}

package/dist/DemoDescription/index.scss

@@ -1,3 +1,3 @@
-.demoDescription {
-  color: var(--triones-antm-color-weak);
-}
+.demoDescription {
+  color: var(--triones-antm-color-weak);
+}