antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.92d6290f7

package/2x/cjs/components/slider/slider.css

@@ -1,7 +1,8 @@
 .adm-slider {
   --fill-color: var(--adm-color-primary);
-  padding: 8px 24px;
+  padding: 10px 28px;
   list-style: none;
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -12,33 +13,34 @@
 .adm-slider-track {
   position: relative;
   width: 100%;
-  height: 8px;
-  background-color: #f5f5f5;
+  height: 6px;
+  background-color: var(--adm-color-box);
+  border-radius: 6px;
 }
 
 .adm-slider-fill {
   position: absolute;
   z-index: 1;
-  height: 8px;
+  height: 6px;
+  border-radius: 6px;
   background-color: var(--fill-color);
 }
 
 .adm-slider-ticks {
   position: absolute;
   width: 100%;
-  height: 8px;
+  height: 6px;
   background: transparent;
 }
 
 .adm-slider-tick {
   position: absolute;
-  top: 50%;
-  width: 22px;
-  height: 22px;
-  margin-left: -10px;
-  background-color: #f5f5f5;
+  top: -4px;
+  width: 14px;
+  height: 14px;
+  margin-left: -6px;
+  background-color: var(--adm-color-box);
   border-radius: 50%;
-  transform: translate(0, -50%);
 }
 
 .adm-slider-tick-active {
@@ -46,14 +48,15 @@
 }
 
 .adm-slider-thumb {
-  width: 44px;
-  height: 44px;
-  margin: 10px;
+  width: 56px;
+  height: 56px;
+  margin: 4px;
   border-radius: 50%;
   text-align: center;
-  line-height: 44px;
+  line-height: 56px;
   background: var(--adm-color-white);
-  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 3px 6px -4px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.12);
+  color: var(--fill-color);
 }
 
 .adm-slider-thumb:focus {
@@ -61,13 +64,15 @@
 }
 
 .adm-slider-thumb-icon {
-  width: 20px;
-  height: 20px;
-  margin: 12px;
+  width: 24px;
+  height: 24px;
+  margin: 16px;
+  -webkit-user-select: none;
   user-select: none;
 }
 
 .adm-slider-thumb-container {
+  cursor: -webkit-grab;
   cursor: grab;
   touch-action: none;
   position: absolute;
@@ -83,28 +88,43 @@
   position: relative;
   width: 100%;
   overflow: visible;
-  font-size: 24px;
-  height: 24px;
-  margin-top: 8px;
+  font-size: var(--adm-font-size-3);
+  height: 22px;
+  margin-top: 20px;
 }
 
 .adm-slider-mark-text {
   position: absolute;
   display: inline-block;
-  line-height: 32px;
-  color: #999;
+  line-height: 1;
+  color: var(--adm-color-text);
   text-align: center;
   word-break: keep-all;
+  -webkit-user-select: none;
   user-select: none;
   transform: translateX(-50%);
 }
 
-.adm-slider-disabled {
+.adm-slider-disabled .adm-slider-mark,
+.adm-slider-disabled .adm-slider-thumb-icon {
   opacity: 0.4;
 }
 
+.adm-slider-disabled .adm-slider-tick-active::after,
+.adm-slider-disabled .adm-slider-fill::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.6);
+}
+
 .adm-slider-disabled .adm-slider-thumb {
   cursor: not-allowed;
+  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
 }
 
 .adm-slider-disabled .adm-slider-mark-text,

package/2x/cjs/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,9 @@ export declare type SliderProps = {
     ticks?: boolean;
     disabled?: boolean;
     range?: boolean;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
+    popover?: boolean | ((value: number) => ReactNode);
+    residentPopover?: boolean;
     onChange?: (value: SliderValue) => void;
     onAfterChange?: (value: SliderValue) => void;
 } & NativeProps<'--fill-color'>;

package/2x/cjs/components/slider/slider.js

@@ -23,6 +23,8 @@ var _nearest = require("../../utils/nearest");
 
 var _usePropsValue = require("../../utils/use-props-value");
 
+var _devLog = require("../../utils/dev-log");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -36,7 +38,9 @@ const defaultProps = {
   step: 1,
   ticks: false,
   range: false,
-  disabled: false
+  disabled: false,
+  popover: false,
+  residentPopover: false
 };
 
 const Slider = p => {
@@ -71,8 +75,15 @@ const Slider = p => {
     (_a = props.onAfterChange) === null || _a === void 0 ? void 0 : _a.call(props, reverseValue(value));
   }
 
+  let propsValue = props.value;
+
+  if (props.range && typeof props.value === 'number') {
+    (0, _devLog.devWarning)('Slider', 'When `range` prop is enabled, the `value` prop should be an array, like: [0, 0]');
+    propsValue = [0, props.value];
+  }
+
   const [rawValue, setRawValue] = (0, _usePropsValue.usePropsValue)({
-    value: props.value,
+    value: propsValue,
     defaultValue: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : props.range ? [min, min] : min,
     onChange: props.onChange
   });
@@ -150,13 +161,15 @@ const Slider = p => {
 
   const renderThumb = index => {
     return _react.default.createElement(_thumb.default, {
-      icon: icon,
       key: index,
       value: sliderValue[index],
       min: min,
       max: max,
       disabled: disabled,
       trackRef: trackRef,
+      icon: icon,
+      popover: props.popover,
+      residentPopover: props.residentPopover,
       onDrag: (position, first, last) => {
         if (first) {
           dragLockRef.current += 1;
@@ -176,7 +189,8 @@ const Slider = p => {
             dragLockRef.current -= 1;
           }, 100);
         }
-      }
+      },
+      "aria-label": props['aria-label']
     });
   };
 

package/2x/cjs/components/slider/thumb-icon.js

@@ -13,26 +13,28 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const ThumbIcon = props => {
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("svg", {
-    viewBox: '0 0 20 20'
+    viewBox: '0 0 24 24',
+    xmlns: 'http://www.w3.org/2000/svg'
   }, _react.default.createElement("g", {
-    stroke: 'none',
-    strokeWidth: '1',
-    fill: 'none',
+    fill: 'currentColor',
     fillRule: 'evenodd'
-  }, _react.default.createElement("g", {
-    transform: 'translate(-604.000000, -656.000000)',
-    fill: '#999999'
-  }, _react.default.createElement("g", {
-    transform: 'translate(592.000000, 644.000000)'
-  }, _react.default.createElement("g", {
-    transform: 'translate(12.000000, 12.000000)'
-  }, _react.default.createElement("polygon", {
-    points: '0 3.33333333 2.22222222 3.33333333 2.22222222 17.7777778 0 17.7777778'
-  }), _react.default.createElement("polygon", {
-    points: '17.7777778 3.33333333 20 3.33333333 20 17.7777778 17.7777778 17.7777778'
-  }), _react.default.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.default.createElement("rect", {
+    x: 10,
+    width: 4,
+    height: 24,
+    rx: 2
+  }), _react.default.createElement("rect", {
+    y: 4,
+    width: 4,
+    height: 16,
+    rx: 2
+  }), _react.default.createElement("rect", {
+    x: 20,
+    y: 4,
+    width: 4,
+    height: 16,
+    rx: 2
+  }))));
 };
 
 exports.ThumbIcon = ThumbIcon;

package/2x/cjs/components/slider/thumb.d.ts

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

package/2x/cjs/components/slider/thumb.js

@@ -11,6 +11,10 @@ var _react2 = require("@use-gesture/react");
 
 var _thumbIcon = require("./thumb-icon");
 
+var _popover = require("../popover/popover");
+
+var _configProvider = require("../config-provider");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -23,10 +27,14 @@ const Thumb = props => {
     min,
     max,
     disabled,
-    onDrag,
-    icon
+    icon,
+    residentPopover,
+    onDrag
   } = props;
   const prevValue = (0, _react.useRef)(value);
+  const {
+    locale
+  } = (0, _configProvider.useConfig)();
 
   const currentPosition = () => {
     return {
@@ -35,6 +43,7 @@ const Thumb = props => {
     };
   };
 
+  const [dragging, setDragging] = (0, _react.useState)(false);
   const bind = (0, _react2.useDrag)(state => {
     var _a;
 
@@ -49,20 +58,38 @@ 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.default.createElement("div", Object.assign({
-    className: `${classPrefix}-thumb-container`,
-    style: currentPosition()
-  }, bind()), _react.default.createElement("div", {
+  const renderPopoverContent = typeof props.popover === 'function' ? props.popover : props.popover ? value => value.toString() : null;
+
+  const thumbElement = _react.default.createElement("div", {
     className: `${classPrefix}-thumb`
   }, icon ? icon : _react.default.createElement(_thumbIcon.ThumbIcon, {
     className: `${classPrefix}-thumb-icon`
-  })));
+  }));
+
+  return _react.default.createElement("div", Object.assign({
+    className: `${classPrefix}-thumb-container`,
+    style: currentPosition()
+  }, bind(), {
+    role: 'slider',
+    "aria-label": props['aria-label'] || locale.Slider.name,
+    "aria-valuemax": max,
+    "aria-valuemin": min,
+    "aria-valuenow": value,
+    "aria-disabled": disabled
+  }), renderPopoverContent ? _react.default.createElement(_popover.Popover, {
+    content: renderPopoverContent(value),
+    placement: 'top',
+    visible: residentPopover || dragging,
+    getContainer: null,
+    mode: 'dark'
+  }, thumbElement) : thumbElement);
 };
 
 var _default = Thumb;

package/2x/cjs/components/space/space.patch.css

@@ -0,0 +1,16 @@
+.adm-space-vertical > .adm-space-item {
+  margin-bottom: 16px;
+}
+
+.adm-space-horizontal > .adm-space-item {
+  margin-right: 16px;
+}
+
+.adm-space-horizontal.adm-space-wrap {
+  flex-wrap: wrap;
+  margin-bottom: -16px;
+}
+
+.adm-space-horizontal.adm-space-wrap > .adm-space-item {
+  padding-bottom: 16px;
+}

package/2x/cjs/components/spin-loading/spin-loading.css

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

package/2x/cjs/components/spin-loading/spin-loading.js

@@ -13,6 +13,8 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _web = require("@react-spring/web");
 
+var _reduceAndRestoreMotion = require("../../utils/reduce-and-restore-motion");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -31,17 +33,19 @@ const SpinLoading = (0, _react.memo)(p => {
   var _a;
 
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const motionReduced = (0, _reduceAndRestoreMotion.useMotionReduced)();
   const {
     percent
   } = (0, _web.useSpring)({
+    cancel: motionReduced,
     loop: {
       reverse: true
     },
     from: {
-      percent: 30
+      percent: 80
     },
     to: {
-      percent: 80
+      percent: 30
     },
     config: {
       duration: 1200

package/2x/cjs/components/spin-loading/spin-loading.patch.css

@@ -0,0 +1,14 @@
+.adm-spin-loading {
+  width: 64px;
+  height: 64px;
+}
+
+.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;
+}

package/2x/cjs/components/stepper/stepper.css

@@ -3,14 +3,14 @@
   --input-width: 88px;
   --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: 4px;
   --border: none;
   --border-inner: solid 4px transparent;
   --active-border: var(--border);
-  --button-font-size: 30px;
+  --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/2x/cjs/components/stepper/stepper.js

@@ -25,6 +25,8 @@ var _button = _interopRequireDefault(require("../button"));
 
 var _big = _interopRequireDefault(require("big.js"));
 
+var _configProvider = require("../config-provider");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -48,6 +50,9 @@ const Stepper = p => {
     min,
     inputReadOnly
   } = props;
+  const {
+    locale
+  } = (0, _configProvider.useConfig)();
   const [value, setValue] = (0, _usePropsValue.usePropsValue)(props);
   const [inputValue, setInputValue] = (0, _react.useState)(() => convertValueToText(value, props.digits));
 
@@ -129,7 +134,8 @@ const Stepper = p => {
     disabled: minusDisabled(),
     fill: 'none',
     shape: 'rectangular',
-    color: 'primary'
+    color: 'primary',
+    "aria-label": locale.Stepper.decrease
   }, _react.default.createElement(_antdMobileIcons.MinusOutline, null)), _react.default.createElement("div", {
     className: `${classPrefix}-middle`
   }, _react.default.createElement(_input.default, {
@@ -151,14 +157,19 @@ const Stepper = p => {
       setHasFocus(false);
       (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    readOnly: inputReadOnly
+    readOnly: inputReadOnly,
+    role: 'spinbutton',
+    "aria-valuenow": Number(inputValue),
+    "aria-valuemax": max,
+    "aria-valuemin": min
   })), _react.default.createElement(_button.default, {
     className: `${classPrefix}-plus`,
     onClick: handlePlus,
     disabled: plusDisabled(),
     fill: 'none',
     shape: 'rectangular',
-    color: 'primary'
+    color: 'primary',
+    "aria-label": locale.Stepper.increase
   }, _react.default.createElement(_antdMobileIcons.AddOutline, null))));
 };
 

package/2x/cjs/components/steps/steps.css

@@ -17,7 +17,7 @@
 .adm-step .adm-step-indicator .adm-step-icon-container {
   position: absolute;
   z-index: 1;
-  background: var(--adm-color-white);
+  background: var(--adm-color-background);
   color: var(--icon-color);
 }
 
@@ -62,8 +62,8 @@
 }
 
 .adm-steps {
-  --title-font-size: 26px;
-  --description-font-size: 24px;
+  --title-font-size: var(--adm-font-size-main);
+  --description-font-size: var(--adm-font-size-4);
   --indicator-margin-right: 0;
   --icon-size: 36px;
   width: 100%;

package/2x/cjs/components/swipe-action/swipe-action.css

@@ -1,6 +1,7 @@
 .adm-swipe-action {
-  --background: #ffffff;
+  --background: var(--adm-color-background);
   background: var(--background);
+  cursor: -webkit-grab;
   cursor: grab;
   overflow: hidden;
   touch-action: pan-y;

package/2x/cjs/components/swipe-action/swipe-action.d.ts

@@ -20,6 +20,7 @@ export declare type SwipeActionProps = {
     closeOnAction?: boolean;
     children: ReactNode;
     stopPropagation?: PropagationEvent[];
+    onActionsReveal?: (side: 'left' | 'right') => void;
 } & NativeProps<'--background'>;
 export declare const SwipeAction: React.ForwardRefExoticComponent<{
     rightActions?: Action[] | undefined;
@@ -29,5 +30,10 @@ export declare const SwipeAction: React.ForwardRefExoticComponent<{
     closeOnAction?: boolean | undefined;
     children: ReactNode;
     stopPropagation?: "click"[] | undefined;
-} & NativeProps<"--background"> & React.RefAttributes<SwipeActionRef>>;
+    onActionsReveal?: ((side: 'left' | 'right') => void) | undefined;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--background", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<SwipeActionRef>>;
 export {};