antd-mobile 5.13.1 → 5.14.2

package/es/components/page-indicator/page-indicator.patch.css

@@ -0,0 +1,25 @@
+.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;
+}

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

@@ -17,7 +17,7 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   width: var(--cell-size);
   height: var(--cell-size);
   background: var(--adm-color-white);

package/es/components/picker/picker.css

@@ -1,7 +1,7 @@
 .adm-picker {
-  --header-button-font-size: 15px;
-  --title-font-size: 15px;
-  --item-font-size: 16px;
+  --header-button-font-size: var(--adm-font-size-7);
+  --title-font-size: var(--adm-font-size-7);
+  --item-font-size: var(--adm-font-size-8);
   --item-height: 34px;
   width: 100%;
   height: 300px;
@@ -17,8 +17,8 @@
   --item-height: var(---item-height);
 }
 .adm-picker-header {
-  flex: none;
-  border-bottom: solid 1px var(--adm-border-color);
+  flex-shrink: 0;
+  border-bottom: solid 1px var(--adm-color-border);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -37,8 +37,7 @@
   flex: 1;
 }
 .adm-picker-body {
-  flex: auto;
-  height: 100%;
+  flex: 1;
   width: 100%;
 }
 .adm-picker-body > .adm-picker-view {

package/es/components/picker-view/picker-view.css

@@ -1,7 +1,7 @@
 .adm-picker-view {
   --height: 240px;
   --item-height: 34px;
-  --item-font-size: 16px;
+  --item-font-size: var(--adm-font-size-8);
   height: var(--height);
   width: 100%;
   display: flex;
@@ -95,8 +95,8 @@
   height: var(--item-height);
   box-sizing: border-box;
   flex: none;
-  border-top: solid 1px var(--adm-border-color);
-  border-bottom: solid 1px var(--adm-border-color);
+  border-top: solid 1px var(--adm-color-border);
+  border-bottom: solid 1px var(--adm-color-border);
 }
 .adm-picker-view-mask-top {
   background: linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff);

package/es/components/popover/popover-menu.css

@@ -1,5 +1,5 @@
 .adm-popover-menu {
-  --border-color: var(--adm-border-color);
+  --border-color: #eeeeee;
 }
 .adm-popover-menu.adm-popover {
   --content-padding: 0;

package/es/components/popover/popover-menu.patch.css

@@ -0,0 +1,24 @@
+.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);
+}

package/es/components/popover/popover.css

@@ -3,6 +3,7 @@
   --background: #ffffff;
   --arrow-size: 8px;
   --content-padding: 8px 12px;
+  color: #333333;
   position: absolute;
   top: 0;
   left: 0;
@@ -16,7 +17,7 @@
 .adm-popover.adm-popover-dark {
   --background: rgba(0, 0, 0, 0.75);
   --adm-color-text: #ffffff;
-  color: white;
+  color: #ffffff;
 }
 .adm-popover.adm-popover-dark .adm-popover-inner {
   box-shadow: none;
@@ -34,7 +35,7 @@
   background-clip: padding-box;
   border-radius: 8px;
   box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   width: max-content;
   min-width: 32px;
   max-width: calc(100vw - 24px);

package/es/components/popover/popover.patch.css

@@ -0,0 +1,19 @@
+.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;
+}

package/es/components/popup/popup.css

@@ -5,7 +5,7 @@
 }
 .adm-popup-body {
   position: fixed;
-  background-color: #ffffff;
+  background-color: var(--adm-color-background);
   z-index: calc(var(--z-index) + 10);
 }
 .adm-popup-body-position-bottom {

package/es/components/popup/popup.d.ts

@@ -1,24 +1,23 @@
-import React, { FC } from 'react';
+import React, { FC, PropsWithChildren } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import type { MaskProps } from '../mask';
 import { GetContainer } from '../../utils/render-to-container';
 import { PropagationEvent } from '../../utils/with-stop-propagation';
-export declare type PopupProps = {
-    visible?: boolean;
-    mask?: boolean;
-    onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    destroyOnClose?: boolean;
-    forceRender?: boolean;
-    getContainer?: GetContainer;
-    afterShow?: () => void;
+export declare type PopupProps = PropsWithChildren<{
     afterClose?: () => void;
-    position?: 'bottom' | 'top' | 'left' | 'right';
+    afterShow?: () => void;
     bodyClassName?: string;
     bodyStyle?: React.CSSProperties;
+    destroyOnClose?: boolean;
+    forceRender?: boolean;
+    getContainer?: GetContainer;
+    mask?: boolean;
     maskClassName?: string;
     maskStyle?: MaskProps['style'];
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    position?: 'bottom' | 'top' | 'left' | 'right';
     stopPropagation?: PropagationEvent[];
-    children?: React.ReactNode;
-} & NativeProps<'--z-index'>;
+    visible?: boolean;
+}> & NativeProps<'--z-index'>;
 export declare const Popup: FC<PopupProps>;

package/es/components/radio/radio.css

@@ -1,6 +1,6 @@
 .adm-radio {
   --icon-size: 22px;
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
   --gap: 8px;
   display: inline-flex;
   vertical-align: text-bottom;
@@ -41,7 +41,7 @@
 .adm-radio.adm-radio-disabled .adm-radio-icon {
   color: #b7b7b7;
   border-color: var(--adm-color-light);
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-radio .adm-radio-custom-icon {
   font-size: var(--icon-size);

package/es/components/result/result.css

@@ -14,14 +14,14 @@
 }
 .adm-result-title {
   color: var(--adm-color-text);
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   line-height: 1.4;
   text-align: center;
 }
 .adm-result-description {
   margin-top: 8px;
   color: var(--adm-color-weak);
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
   line-height: 1.4;
   text-align: center;
 }

package/es/components/scroll-mask/scroll-mask.css

@@ -9,9 +9,9 @@
 }
 .adm-scroll-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-scroll-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/scroll-mask/scroll-mask.patch.css

@@ -0,0 +1,6 @@
+.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));
+}

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

@@ -1,7 +1,7 @@
 .adm-search-bar {
   --height: 32px;
   --padding-left: 8px;
-  --background: #f5f5f5;
+  --background: var(--adm-color-box);
   --border-radius: 6px;
   --placeholder-color: var(--adm-color-weak);
   ---placeholder-color: var(--placeholder-color);
@@ -23,7 +23,7 @@
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input-box-icon {
   flex: none;
   color: var(--adm-color-light);
-  font-size: 16px;
+  font-size: var(--adm-font-size-8);
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input {
   flex: auto;
@@ -33,7 +33,7 @@
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input {
   --placeholder-color: var(---placeholder-color);
-  --font-size: 15px;
+  --font-size: var(--adm-font-size-7);
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input-element {
   line-height: 19px;
@@ -53,5 +53,5 @@
 }
 .adm-search-bar-active .adm-search-bar-input-box {
   border-color: var(--adm-color-primary);
-  background: var(--adm-color-white);
+  background: var(--adm-color-background);
 }

package/es/components/selector/selector.css

@@ -1,5 +1,5 @@
 .adm-selector {
-  --color: #f5f5f5;
+  --color: var(--adm-color-box);
   --checked-color: #e7f1ff;
   --text-color: var(--adm-color-text);
   --checked-text-color: var(--adm-color-primary);
@@ -8,7 +8,7 @@
   --border-radius: 2px;
   --padding: 8px 16px;
   overflow: hidden;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.4;
 }
 .adm-selector .adm-space.adm-space {
@@ -29,7 +29,7 @@
   vertical-align: top;
 }
 .adm-selector-item-description {
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
   color: var(--adm-color-weak);
 }
 .adm-selector-item-active,

package/es/components/side-bar/corner.js

@@ -9,6 +9,6 @@ export const Corner = memo(props => withNativeProps(props, React.createElement("
   fillRule: 'evenodd'
 }, React.createElement("path", {
   d: 'M30,0 C13.4314575,3.04359188e-15 -2.02906125e-15,13.4314575 0,30 L0,30 L0,0 Z',
-  fill: 'var(--adm-color-white)',
+  fill: 'var(--adm-color-background)',
   transform: 'translate(15.000000, 15.000000) scale(-1, -1) translate(-15.000000, -15.000000) '
 })))));

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

@@ -2,11 +2,11 @@
   --height: 100%;
   --width: 105px;
   --item-border-radius: 8px;
-  --background-color: #f5f5f5;
+  --background-color: var(--adm-color-box);
   width: var(--width);
   height: var(--height);
   box-sizing: border-box;
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
   overflow-y: auto;
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
@@ -44,7 +44,7 @@
 }
 .adm-side-bar-item-active {
   color: var(--adm-color-primary);
-  background-color: var(--adm-color-white);
+  background-color: var(--adm-color-background);
   position: relative;
 }
 .adm-side-bar-item-corner {

package/es/components/slider/slider.css

@@ -1,6 +1,6 @@
 .adm-slider {
   --fill-color: var(--adm-color-primary);
-  padding: 4px 12px;
+  padding: 5px 14px;
   list-style: none;
   user-select: none;
 }
@@ -10,51 +10,53 @@
 .adm-slider-track {
   position: relative;
   width: 100%;
-  height: 4px;
-  background-color: #f5f5f5;
+  height: 3px;
+  background-color: var(--adm-color-box);
+  border-radius: 3px;
 }
 .adm-slider-fill {
   position: absolute;
   z-index: 1;
-  height: 4px;
+  height: 3px;
+  border-radius: 3px;
   background-color: var(--fill-color);
 }
 .adm-slider-ticks {
   position: absolute;
   width: 100%;
-  height: 4px;
+  height: 3px;
   background: transparent;
 }
 .adm-slider-tick {
   position: absolute;
-  top: 50%;
-  width: 11px;
-  height: 11px;
-  margin-left: -5px;
-  background-color: #f5f5f5;
+  top: -2px;
+  width: 7px;
+  height: 7px;
+  margin-left: -3px;
+  background-color: var(--adm-color-box);
   border-radius: 50%;
-  transform: translate(0, -50%);
 }
 .adm-slider-tick-active {
   background-color: var(--fill-color);
 }
 .adm-slider-thumb {
-  width: 22px;
-  height: 22px;
-  margin: 5px;
+  width: 28px;
+  height: 28px;
+  margin: 2px;
   border-radius: 50%;
   text-align: center;
-  line-height: 22px;
+  line-height: 28px;
   background: var(--adm-color-white);
-  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.12), 0 1.5px 3px -2px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12);
+  color: var(--fill-color);
 }
 .adm-slider-thumb:focus {
   outline: none;
 }
 .adm-slider-thumb-icon {
-  width: 10px;
-  height: 10px;
-  margin: 6px;
+  width: 12px;
+  height: 12px;
+  margin: 8px;
   user-select: none;
 }
 .adm-slider-thumb-container {
@@ -72,15 +74,15 @@
   position: relative;
   width: 100%;
   overflow: visible;
-  font-size: 12px;
-  height: 12px;
-  margin-top: 4px;
+  font-size: var(--adm-font-size-3);
+  height: 11px;
+  margin-top: 10px;
 }
 .adm-slider-mark-text {
   position: absolute;
   display: inline-block;
-  line-height: 16px;
-  color: #999;
+  line-height: 1;
+  color: var(--adm-color-text);
   text-align: center;
   word-break: keep-all;
   user-select: none;

package/es/components/slider/slider.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { SliderMarks } from './marks';
 export declare type SliderValue = number | [number, number];
@@ -12,7 +12,8 @@ export declare type SliderProps = {
     ticks?: boolean;
     disabled?: boolean;
     range?: boolean;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
+    popover?: boolean | ((value: number) => ReactNode);
     onChange?: (value: SliderValue) => void;
     onAfterChange?: (value: SliderValue) => void;
 } & NativeProps<'--fill-color'>;

package/es/components/slider/slider.js

@@ -14,7 +14,8 @@ const defaultProps = {
   step: 1,
   ticks: false,
   range: false,
-  disabled: false
+  disabled: false,
+  popover: false
 };
 export const Slider = p => {
   var _a;
@@ -127,13 +128,14 @@ export const Slider = p => {
 
   const renderThumb = index => {
     return React.createElement(Thumb, {
-      icon: icon,
       key: index,
       value: sliderValue[index],
       min: min,
       max: max,
       disabled: disabled,
       trackRef: trackRef,
+      icon: icon,
+      popover: props.popover,
       onDrag: (position, first, last) => {
         if (first) {
           dragLockRef.current += 1;

package/es/components/slider/thumb-icon.js

@@ -2,24 +2,26 @@ import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
 export const ThumbIcon = props => {
   return withNativeProps(props, React.createElement("svg", {
-    viewBox: '0 0 20 20'
+    viewBox: '0 0 24 24',
+    xmlns: 'http://www.w3.org/2000/svg'
   }, React.createElement("g", {
-    stroke: 'none',
-    strokeWidth: '1',
-    fill: 'none',
+    fill: 'currentColor',
     fillRule: 'evenodd'
-  }, React.createElement("g", {
-    transform: 'translate(-604.000000, -656.000000)',
-    fill: '#999999'
-  }, React.createElement("g", {
-    transform: 'translate(592.000000, 644.000000)'
-  }, React.createElement("g", {
-    transform: 'translate(12.000000, 12.000000)'
-  }, React.createElement("polygon", {
-    points: '0 3.33333333 2.22222222 3.33333333 2.22222222 17.7777778 0 17.7777778'
-  }), React.createElement("polygon", {
-    points: '17.7777778 3.33333333 20 3.33333333 20 17.7777778 17.7777778 17.7777778'
-  }), React.createElement("path", {
-    d: 'M10.8888889,0 L9.11111111,0 C8.98888889,0 8.88888889,0.107142857 8.88888889,0.238095238 L8.88888889,19.7619048 C8.88888889,19.8928571 8.98888889,20 9.11111111,20 L10.8888889,20 C11.0111111,20 11.1111111,19.8928571 11.1111111,19.7619048 L11.1111111,0.238095238 C11.1111111,0.107142857 11.0111111,0 10.8888889,0 Z'
-  })))))));
+  }, React.createElement("rect", {
+    x: 10,
+    width: 4,
+    height: 24,
+    rx: 2
+  }), React.createElement("rect", {
+    y: 4,
+    width: 4,
+    height: 16,
+    rx: 2
+  }), React.createElement("rect", {
+    x: 20,
+    y: 4,
+    width: 4,
+    height: 16,
+    rx: 2
+  }))));
 };

package/es/components/slider/thumb.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, RefObject } from 'react';
+import React, { FC, RefObject, ReactNode } from 'react';
 declare type ThumbProps = {
     value: number;
     min: number;
@@ -7,6 +7,7 @@ declare type ThumbProps = {
     onDrag: (value: number, first: boolean, last: boolean) => void;
     trackRef: RefObject<HTMLDivElement>;
     icon?: React.ReactNode;
+    popover: boolean | ((value: number) => ReactNode);
 };
 declare const Thumb: FC<ThumbProps>;
 export default Thumb;

package/es/components/slider/thumb.js

@@ -1,6 +1,7 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { useDrag } from '@use-gesture/react';
 import { ThumbIcon } from './thumb-icon';
+import { Popover } from '../popover/popover';
 const classPrefix = `adm-slider`;
 
 const Thumb = props => {
@@ -21,6 +22,7 @@ const Thumb = props => {
     };
   };
 
+  const [dragging, setDragging] = useState(false);
   const bind = useDrag(state => {
     var _a;
 
@@ -35,20 +37,29 @@ const Thumb = props => {
     if (!sliderOffsetWith) return;
     const diff = x / Math.ceil(sliderOffsetWith) * (max - min);
     onDrag(prevValue.current + diff, state.first, state.last);
+    setDragging(!state.last);
   }, {
     axis: 'x',
     pointer: {
       touch: true
     }
   });
-  return React.createElement("div", Object.assign({
-    className: `${classPrefix}-thumb-container`,
-    style: currentPosition()
-  }, bind()), React.createElement("div", {
+  const renderPopoverContent = typeof props.popover === 'function' ? props.popover : props.popover ? value => value.toString() : null;
+  const thumbElement = React.createElement("div", {
     className: `${classPrefix}-thumb`
   }, icon ? icon : React.createElement(ThumbIcon, {
     className: `${classPrefix}-thumb-icon`
-  })));
+  }));
+  return React.createElement("div", Object.assign({
+    className: `${classPrefix}-thumb-container`,
+    style: currentPosition()
+  }, bind()), renderPopoverContent ? React.createElement(Popover, {
+    content: renderPopoverContent(value),
+    placement: 'top',
+    visible: dragging,
+    getContainer: null,
+    mode: 'dark'
+  }, thumbElement) : thumbElement);
 };
 
 export default Thumb;

package/es/components/space/space.patch.css

@@ -0,0 +1,13 @@
+.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;
+}

package/es/components/spin-loading/spin-loading.css

@@ -1,9 +1,6 @@
 .adm-spin-loading {
   --color: var(--adm-color-weak);
   --size: 32px;
-  --pi: 3.14159265;
-  --radius: 15;
-  --circumference: calc(var(--radius) * var(--pi) * 2);
   width: var(--size);
   height: var(--size);
 }

package/es/components/spin-loading/spin-loading.patch.css

@@ -0,0 +1,12 @@
+.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;
+}