antd-mobile 5.13.1 → 5.14.2

package/es/components/stepper/stepper.css

@@ -3,14 +3,14 @@
   --input-width: 44px;
   --input-font-size: var(--adm-font-size-main);
   --input-font-color: var(--adm-color-text);
-  --input-background-color: #f5f5f5;
+  --input-background-color: var(--adm-color-box);
   --border-radius: 2px;
   --border: none;
   --border-inner: solid 2px transparent;
   --active-border: var(--border);
-  --button-font-size: 15px;
+  --button-font-size: var(--adm-font-size-7);
   --button-text-color: var(--adm-color-primary);
-  --button-background-color: #f5f5f5;
+  --button-background-color: var(--adm-color-box);
   --button-width: var(--height);
   display: flex;
   align-items: center;

package/es/components/steps/steps.css

@@ -48,8 +48,8 @@
   color: var(--adm-color-danger);
 }
 .adm-steps {
-  --title-font-size: 13px;
-  --description-font-size: 12px;
+  --title-font-size: var(--adm-font-size-main);
+  --description-font-size: var(--adm-font-size-4);
   --indicator-margin-right: 0;
   --icon-size: 18px;
   width: 100%;

package/es/components/swipe-action/swipe-action.css

@@ -1,5 +1,5 @@
 .adm-swipe-action {
-  --background: #ffffff;
+  --background: var(--adm-color-background);
   background: var(--background);
   cursor: grab;
   overflow: hidden;

package/es/components/swipe-action/swipe-action.js

@@ -6,6 +6,7 @@ import Button from '../button';
 import { nearest } from '../../utils/nearest';
 import { withNativeProps } from '../../utils/native-props';
 import { withStopPropagation } from '../../utils/with-stop-propagation';
+const classPrefix = `adm-swipe-action`;
 const defaultProps = {
   rightActions: [],
   leftActions: [],
@@ -137,7 +138,7 @@ export const SwipeAction = forwardRef((p, ref) => {
     const color = (_a = action.color) !== null && _a !== void 0 ? _a : 'light';
     return React.createElement(Button, {
       key: action.key,
-      className: 'adm-swipe-action-action-button',
+      className: `${classPrefix}-action-button`,
       style: {
         '--background-color': (_b = colorRecord[color]) !== null && _b !== void 0 ? _b : color
       },
@@ -155,7 +156,7 @@ export const SwipeAction = forwardRef((p, ref) => {
   }
 
   return withNativeProps(props, React.createElement("div", Object.assign({
-    className: 'adm-swipe-action'
+    className: classPrefix
   }, bind(), {
     ref: rootRef,
     onClickCapture: e => {
@@ -165,15 +166,15 @@ export const SwipeAction = forwardRef((p, ref) => {
       }
     }
   }), React.createElement(animated.div, {
-    className: 'adm-swipe-action-track',
+    className: `${classPrefix}-track`,
     style: {
       x
     }
   }, withStopPropagation(props.stopPropagation, React.createElement("div", {
-    className: 'adm-swipe-action-actions adm-swipe-action-actions-left',
+    className: `${classPrefix}-actions ${classPrefix}-actions-left`,
     ref: leftRef
   }, props.leftActions.map(renderAction))), React.createElement("div", {
-    className: 'adm-swipe-action-content',
+    className: `${classPrefix}-content`,
     onClickCapture: e => {
       if (x.goal !== 0) {
         e.preventDefault();
@@ -188,7 +189,7 @@ export const SwipeAction = forwardRef((p, ref) => {
       pointerEvents: x.to(v => v !== 0 && x.goal !== 0 ? 'none' : 'auto')
     }
   }, props.children)), withStopPropagation(props.stopPropagation, React.createElement("div", {
-    className: 'adm-swipe-action-actions adm-swipe-action-actions-right',
+    className: `${classPrefix}-actions ${classPrefix}-actions-right`,
     ref: rightRef
   }, props.rightActions.map(renderAction))))));
 });

package/es/components/swiper/swiper.js

@@ -11,6 +11,7 @@ import { staged } from 'staged-components';
 import { useRefState } from '../../utils/use-ref-state';
 import { bound } from '../../utils/bound';
 import { useIsomorphicLayoutEffect, useUpdateEffect } from 'ahooks';
+const classPrefix = `adm-swiper`;
 const defaultProps = {
   defaultIndex: 0,
   allowTouchMove: true,
@@ -209,10 +210,10 @@ export const Swiper = forwardRef(staged((p, ref) => {
     function renderTrackInner() {
       if (loop) {
         return React.createElement("div", {
-          className: 'adm-swiper-track-inner'
+          className: `${classPrefix}-track-inner`
         }, React.Children.map(validChildren, (child, index) => {
           return React.createElement(animated.div, {
-            className: 'adm-swiper-slide',
+            className: `${classPrefix}-slide`,
             style: {
               [isVertical ? 'y' : 'x']: position.to(position => {
                 let finalPosition = -position + index * 100;
@@ -227,13 +228,13 @@ export const Swiper = forwardRef(staged((p, ref) => {
         }));
       } else {
         return React.createElement(animated.div, {
-          className: 'adm-swiper-track-inner',
+          className: `${classPrefix}-track-inner`,
           style: {
             [isVertical ? 'y' : 'x']: position.to(position => `${-position}%`)
           }
         }, React.Children.map(validChildren, child => {
           return React.createElement("div", {
-            className: 'adm-swiper-slide'
+            className: `${classPrefix}-slide`
           }, child);
         }));
       }
@@ -244,12 +245,12 @@ export const Swiper = forwardRef(staged((p, ref) => {
       '--track-offset': `${props.trackOffset}%`
     };
     return withNativeProps(props, React.createElement("div", {
-      className: classNames('adm-swiper', `adm-swiper-${props.direction}`),
+      className: classNames(classPrefix, `${classPrefix}-${props.direction}`),
       style: style
     }, React.createElement("div", Object.assign({
       ref: trackRef,
-      className: classNames('adm-swiper-track', {
-        'adm-swiper-track-allow-touch-move': props.allowTouchMove
+      className: classNames(`${classPrefix}-track`, {
+        [`${classPrefix}-track-allow-touch-move`]: props.allowTouchMove
       }),
       onClickCapture: e => {
         if (draggingRef.current) {
@@ -257,7 +258,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
         }
       }
     }, props.allowTouchMove ? bind() : {}), renderTrackInner()), props.indicator === undefined ? React.createElement("div", {
-      className: 'adm-swiper-indicator'
+      className: `${classPrefix}-indicator`
     }, React.createElement(PageIndicator, Object.assign({}, props.indicatorProps, {
       total: count,
       current: current,

package/es/components/swiper/swiper.patch.css

@@ -0,0 +1,21 @@
+.adm-swiper {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 0;
+}
+.adm-swiper-track {
+  padding: 0;
+}
+.adm-swiper-horizontal .adm-swiper-track {
+  transform: translateX(0%);
+}
+.adm-swiper-horizontal .adm-swiper-track-inner {
+  width: 100%;
+}
+.adm-swiper-vertical .adm-swiper-track {
+  transform: translateY(0%);
+}
+.adm-swiper-vertical .adm-swiper-track-inner {
+  height: 100%;
+}

package/es/components/switch/switch.css

@@ -26,7 +26,7 @@
   height: var(--height);
   box-sizing: border-box;
   border-radius: 31px;
-  background: #e5e5e5;
+  background: var(--adm-color-border);
   z-index: 0;
   overflow: hidden;
   line-height: var(--height);
@@ -40,7 +40,7 @@
   height: calc(var(--height) - 2 * var(--border-width));
   border-radius: calc(var(--height) - 2 * var(--border-width));
   box-sizing: border-box;
-  background: #fff;
+  background: var(--adm-color-background);
   z-index: 1;
   transition: all 200ms;
   transform: scale(1);
@@ -52,7 +52,7 @@
   width: calc(var(--height) - 2 * var(--border-width));
   height: calc(var(--height) - 2 * var(--border-width));
   border-radius: calc(var(--height) - 2 * var(--border-width));
-  background: #fff;
+  background: var(--adm-color-white);
   position: absolute;
   z-index: 2;
   top: var(--border-width);
@@ -70,7 +70,7 @@
   height: 100%;
   color: var(--adm-color-weak);
   transition: margin 200ms;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
 }
 .adm-switch.adm-switch-checked .adm-switch-checkbox {
   background: var(--checked-color);

package/es/components/tab-bar/tab-bar.css

@@ -4,7 +4,7 @@
   justify-content: flex-start;
   align-items: stretch;
   overflow: hidden;
-  min-height: 50px;
+  min-height: 48px;
 }
 .adm-tab-bar-item {
   flex: 1;
@@ -20,15 +20,17 @@
   flex-direction: column;
 }
 .adm-tab-bar-item-icon {
-  font-size: 20px;
-  height: 22px;
+  font-size: 24px;
+  height: 24px;
   line-height: 1;
-  margin: 4px 0 1px;
 }
 .adm-tab-bar-item-title {
-  font-size: 11px;
+  font-size: var(--adm-font-size-3);
   line-height: 15px;
 }
+.adm-tab-bar-item-title-with-icon {
+  margin-top: 2px;
+}
 .adm-tab-bar-item-active {
   color: var(--adm-color-primary);
 }

package/es/components/tab-bar/tab-bar.js

@@ -54,7 +54,7 @@ export const TabBar = p => {
         className: `${classPrefix}-item-icon`
       }, typeof item.props.icon === 'function' ? item.props.icon(active) : item.props.icon);
       const titleElement = item.props.title && React.createElement("div", {
-        className: `${classPrefix}-item-title`
+        className: classNames(`${classPrefix}-item-title`, Boolean(iconElement) && `${classPrefix}-item-title-with-icon`)
       }, typeof item.props.title === 'function' ? item.props.title(active) : item.props.title);
 
       if (iconElement) {

package/es/components/tabs/tabs.css

@@ -1,5 +1,5 @@
 .adm-tabs {
-  --title-font-size: 17px;
+  --title-font-size: var(--adm-font-size-9);
   --content-padding: 12px;
   --active-line-height: 2px;
   --active-line-border-radius: var(--active-line-height);
@@ -10,7 +10,7 @@
 }
 .adm-tabs-header {
   position: relative;
-  border-bottom: solid 1px var(--adm-border-color);
+  border-bottom: solid 1px var(--adm-color-border);
 }
 .adm-tabs-tab-list {
   display: flex;
@@ -67,9 +67,9 @@
 }
 .adm-tabs-header-mask-left {
   left: 0;
-  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+  background: linear-gradient(to right, var(--adm-color-background), rgba(255, 255, 255, 0));
 }
 .adm-tabs-header-mask-right {
   right: 0;
-  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
+  background: linear-gradient(to left, var(--adm-color-background), rgba(255, 255, 255, 0));
 }

package/es/components/tabs/tabs.patch.css

@@ -0,0 +1,23 @@
+.adm-tabs-header {
+  border-bottom: solid 1px #eeeeee;
+}
+.adm-tabs-tab {
+  font-size: 17px;
+}
+.adm-tabs-tab-active {
+  color: #1677ff;
+}
+.adm-tabs-tab-line {
+  height: 2px;
+  background: #1677ff;
+  border-radius: 2px;
+}
+.adm-tabs-content {
+  padding: 12px;
+}
+.adm-tabs-header-mask-left {
+  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
+}
+.adm-tabs-header-mask-right {
+  background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
+}

package/es/components/tag/tag.css

@@ -1,7 +1,7 @@
 .adm-tag {
   --border-radius: var(--adm-tag-border-radius, 2px);
   padding: 2px 4px;
-  font-size: 11px;
+  font-size: var(--adm-font-size-3);
   line-height: 1;
   font-weight: normal;
   background: var(--background-color);

package/es/components/text-area/text-area.css

@@ -1,5 +1,5 @@
 .adm-text-area {
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
   --disabled-color: var(--adm-color-weak);
@@ -58,6 +58,6 @@
 .adm-text-area-count {
   text-align: var(--count-text-align);
   color: var(--adm-color-weak);
-  font-size: 17px;
+  font-size: var(--adm-font-size-9);
   padding-top: 8px;
 }

package/es/components/toast/toast.css

@@ -21,7 +21,7 @@
   background-color: rgba(0, 0, 0, 0.7);
   border-radius: 8px;
   pointer-events: all;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.5;
   box-sizing: border-box;
 }

package/es/components/toast/toast.patch.css

@@ -0,0 +1,11 @@
+.adm-toast-mask .adm-toast-main {
+  font-size: 15px;
+}
+.adm-toast-loading.adm-toast-loading {
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 8px;
+}
+.adm-toast-loading.adm-toast-loading .adm-spin-loading-fill {
+  stroke: #ffffff;
+}

package/es/components/tree-select/tree-select.css

@@ -13,7 +13,7 @@
 }
 .adm-tree-select-column:first-child,
 .adm-tree-select-multiple-column:first-child {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-tree-select-column:nth-child(2),
 .adm-tree-select-multiple-column:nth-child(2) {

package/es/components/virtual-input/virtual-input.css

@@ -1,5 +1,5 @@
 .adm-virtual-input {
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
   --disabled-color: var(--adm-color-weak);
@@ -94,5 +94,5 @@
 }
 .adm-virtual-input-clear .antd-mobile-icon {
   display: block;
-  font-size: 14px;
+  font-size: var(--adm-font-size-6);
 }

package/es/global/css-vars-patch.css

@@ -0,0 +1,312 @@
+@supports not (color: var(--adm-color-text)) {
+  .adm-button {
+    color: #333333;
+    background-color: #ffffff;
+    font-size: 17px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #eeeeee;
+    border-radius: 4px;
+  }
+  .adm-button::before {
+    transform: translate(-1px, -1px);
+    border: 1px solid #000;
+    border-radius: 4px;
+  }
+  .adm-button-default.adm-button-fill-outline {
+    background-color: transparent;
+    border-color: #333333;
+  }
+  .adm-button-default.adm-button-fill-none {
+    background-color: transparent;
+    border-width: 0;
+  }
+  .adm-button:not(.adm-button-default) {
+    color: #ffffff;
+  }
+  .adm-button:not(.adm-button-default).adm-button-fill-outline {
+    background-color: transparent;
+  }
+  .adm-button:not(.adm-button-default).adm-button-fill-none {
+    background-color: transparent;
+    border-width: 0;
+  }
+  .adm-button-primary {
+    background-color: #1677ff;
+    border-color: #1677ff;
+  }
+  .adm-button-primary.adm-button-fill-outline,
+  .adm-button-primary.adm-button-fill-none {
+    color: #1677ff;
+  }
+  .adm-button-success {
+    background-color: #00b578;
+    border-color: #00b578;
+  }
+  .adm-button-success.adm-button-fill-outline,
+  .adm-button-success.adm-button-fill-none {
+    color: #00b578;
+  }
+  .adm-button-danger {
+    background-color: #00b578;
+    border-color: #00b578;
+  }
+  .adm-button-danger.adm-button-fill-outline,
+  .adm-button-danger.adm-button-fill-none {
+    color: #00b578;
+  }
+  .adm-button-warning {
+    background-color: #ff8f1f;
+    border-color: #ff8f1f;
+  }
+  .adm-button-warning.adm-button-fill-outline,
+  .adm-button-warning.adm-button-fill-none {
+    color: #ff8f1f;
+  }
+  .adm-button.adm-button-mini {
+    font-size: 13px;
+  }
+  .adm-button.adm-button-small {
+    padding-top: 3px;
+    padding-bottom: 3px;
+    font-size: 15px;
+  }
+  .adm-button.adm-button-large {
+    padding-top: 11px;
+    padding-bottom: 11px;
+    font-size: 18px;
+  }
+  .adm-button.adm-button-shape-rounded {
+    border-radius: 1000px;
+  }
+  .adm-button.adm-button-shape-rounded::before {
+    border-radius: 1000px;
+  }
+  .adm-button.adm-button-shape-rectangular {
+    border-radius: 0;
+  }
+  .adm-center-popup {
+    z-index: 1000;
+  }
+  .adm-center-popup-wrap {
+    min-width: 280px;
+    max-width: 75vw;
+  }
+  .adm-center-popup-body {
+    background-color: #ffffff;
+    border-radius: 8px;
+  }
+  .adm-error-block-image {
+    height: 100px;
+    width: auto;
+  }
+  .adm-error-block-description {
+    font-size: var(--adm-font-size-4);
+  }
+  .adm-error-block-description-title {
+    font-size: var(--adm-font-size-7);
+  }
+  .adm-error-block-full-page {
+    padding-top: calc(50vh - 200px);
+  }
+  .adm-error-block-full-page .adm-error-block-image {
+    height: 200px;
+    width: auto;
+  }
+  .adm-error-block-full-page .adm-error-block-description {
+    font-size: var(--adm-font-size-main);
+  }
+  .adm-error-block-full-page .adm-error-block-description-title {
+    color: #333333;
+  }
+  .adm-image {
+    width: auto;
+    height: auto;
+  }
+  .adm-image-tip {
+    background-color: #f5f5f5;
+  }
+  .adm-image-tip > svg {
+    color: #999999;
+  }
+  .adm-mask {
+    z-index: 1000;
+  }
+  .adm-modal-body {
+    font-size: 14px;
+  }
+  .adm-modal-title {
+    font-size: 18px;
+  }
+  .adm-modal-content {
+    font-size: 15px;
+    color: #333333;
+  }
+  .adm-modal-close {
+    color: #999999;
+    font-size: 18px;
+  }
+  .adm-modal-footer.adm-space.adm-space-vertical > .adm-space-item.adm-space-item {
+    margin-bottom: 20px;
+  }
+  .adm-modal-footer.adm-space.adm-space-vertical > .adm-space-item.adm-space-item:last-child {
+    margin-bottom: 0;
+  }
+  .adm-modal-footer .adm-modal-button {
+    font-size: 18px;
+  }
+  .adm-page-indicator-dot {
+    width: 3px;
+    height: 3px;
+    border-radius: 1px;
+    background: rgba(0, 0, 0, 0.2);
+  }
+  .adm-page-indicator-dot-active {
+    border-radius: 1px;
+    background: #1677ff;
+  }
+  .adm-page-indicator-color-white .adm-page-indicator-dot-active.adm-page-indicator-dot-active {
+    background: #ffffff;
+  }
+  .adm-page-indicator-horizontal .adm-page-indicator-dot {
+    margin-right: 3px;
+  }
+  .adm-page-indicator-horizontal .adm-page-indicator-dot-active {
+    width: 13px;
+  }
+  .adm-page-indicator-vertical .adm-page-indicator-dot {
+    margin-bottom: 3px;
+  }
+  .adm-page-indicator-vertical .adm-page-indicator-dot-active {
+    height: 13px;
+  }
+  .adm-popover-menu.adm-popover .adm-popover-inner-content {
+    padding: 0 !important;
+  }
+  .adm-popover-menu-item-text {
+    border-top: solid 1px #eeeeee;
+  }
+  .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled) {
+    background-color: #eeeeee;
+  }
+  .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled)::after {
+    border-bottom: solid 1px #eeeeee;
+  }
+  .adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-menu-item-text {
+    border-color: #333333;
+  }
+  .adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled) {
+    background-color: #333333;
+  }
+  .adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled)::after {
+    border-color: #333333;
+  }
+  .adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-inner.adm-popover-inner.adm-popover-inner {
+    background-color: rgba(0, 0, 0, 0.9);
+  }
+  .adm-popover {
+    z-index: 1030;
+  }
+  .adm-popover.adm-popover-dark {
+    color: #ffffff;
+  }
+  .adm-popover.adm-popover-dark .adm-popover-inner {
+    background-color: rgba(0, 0, 0, 0.75);
+  }
+  .adm-popover-inner {
+    background-color: #ffffff;
+    font-size: 15px;
+  }
+  .adm-popover-inner-content {
+    padding: 8px 12px;
+  }
+  .adm-popover-arrow {
+    display: none !important;
+  }
+  .adm-scroll-mask-left {
+    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
+  }
+  .adm-scroll-mask-right {
+    background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
+  }
+  .adm-space-vertical > .adm-space-item {
+    margin-bottom: 8px;
+  }
+  .adm-space-horizontal > .adm-space-item {
+    margin-right: 8px;
+  }
+  .adm-space-horizontal.adm-space-wrap {
+    flex-wrap: wrap;
+    margin-bottom: -8px;
+  }
+  .adm-space-horizontal.adm-space-wrap > .adm-space-item {
+    padding-bottom: 8px;
+  }
+  .adm-spin-loading {
+    width: 32px;
+    height: 32px;
+  }
+  .adm-spin-loading-svg {
+    width: 100%;
+    height: 100%;
+    animation: adm-spin-loading-rotate 0.8s infinite linear;
+  }
+  .adm-spin-loading-svg > .adm-spin-loading-fill {
+    stroke: #999999;
+  }
+  .adm-swiper {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: 0;
+  }
+  .adm-swiper-track {
+    padding: 0;
+  }
+  .adm-swiper-horizontal .adm-swiper-track {
+    transform: translateX(0%);
+  }
+  .adm-swiper-horizontal .adm-swiper-track-inner {
+    width: 100%;
+  }
+  .adm-swiper-vertical .adm-swiper-track {
+    transform: translateY(0%);
+  }
+  .adm-swiper-vertical .adm-swiper-track-inner {
+    height: 100%;
+  }
+  .adm-tabs-header {
+    border-bottom: solid 1px #eeeeee;
+  }
+  .adm-tabs-tab {
+    font-size: 17px;
+  }
+  .adm-tabs-tab-active {
+    color: #1677ff;
+  }
+  .adm-tabs-tab-line {
+    height: 2px;
+    background: #1677ff;
+    border-radius: 2px;
+  }
+  .adm-tabs-content {
+    padding: 12px;
+  }
+  .adm-tabs-header-mask-left {
+    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
+  }
+  .adm-tabs-header-mask-right {
+    background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
+  }
+  .adm-toast-mask .adm-toast-main {
+    font-size: 15px;
+  }
+  .adm-toast-loading.adm-toast-loading {
+    width: 48px;
+    height: 48px;
+    margin: 0 auto 8px;
+  }
+  .adm-toast-loading.adm-toast-loading .adm-spin-loading-fill {
+    stroke: #ffffff;
+  }
+}