antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.bc248f5c7

package/cjs/components/modal/modal.css

@@ -1,28 +1,14 @@
 .adm-modal {
   --z-index: var(--adm-modal-z-index, 1000);
-  position: fixed;
-  z-index: var(--z-index);
-}
-.adm-modal .adm-modal-mask {
-  z-index: 0;
-}
-.adm-modal-wrap {
-  position: fixed;
-  z-index: 1;
-  top: 50%;
-  left: 50%;
-  width: auto;
-  min-width: 280px;
-  max-width: 75vw;
-  transform: translate(-50%, -50%);
+  ---z-index: var(--z-index);
+}
+.adm-modal .adm-center-popup {
+  --z-index: var(---z-index);
 }
 .adm-modal-body {
   width: 100%;
   max-height: 70vh;
-  box-sizing: border-box;
-  font-size: 14px;
-  background-color: white;
-  border-radius: 8px;
+  font-size: var(--adm-font-size-6);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -36,42 +22,35 @@
 .adm-modal-body:not(.adm-modal-with-image) {
   padding-top: 20px;
 }
-.adm-modal-body .adm-modal-image-container {
+.adm-modal-image-container {
   margin-bottom: 12px;
   max-height: 40vh;
   overflow-y: scroll;
 }
-.adm-modal-body .adm-modal-header {
+.adm-modal-header {
   margin-bottom: 8px;
   padding: 0 12px;
 }
-.adm-modal-body .adm-modal-title {
+.adm-modal-title {
   margin-bottom: 8px;
   padding: 0 12px;
   font-weight: bold;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   line-height: 25px;
   text-align: center;
 }
-.adm-modal-body .adm-modal-content {
+.adm-modal-content {
   padding: 0 12px 12px;
   max-height: 70vh;
   overflow-x: hidden;
   overflow-y: auto;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.4;
-  color: #333;
-}
-.adm-modal-body .adm-modal-close {
-  position: absolute;
-  right: 8px;
-  top: 8px;
-  color: var(--adm-color-weak);
-  padding: 4px;
-  font-size: 18px;
+  color: var(--adm-color-text);
 }
 .adm-modal-footer {
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   padding: 8px 12px 12px;
 }
 .adm-modal-footer-empty {
@@ -82,7 +61,7 @@
   --gap-vertical: 20px;
 }
 .adm-modal-footer .adm-modal-button {
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   line-height: 25px;
 }
 .adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary) {

package/cjs/components/modal/modal.d.ts

@@ -1,28 +1,17 @@
-import React, { FC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 import { Action } from './modal-action-button';
-import { GetContainer } from '../../utils/render-to-container';
-import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { NativeProps } from '../../utils/native-props';
-export declare type ModalProps = {
-    afterClose?: () => void;
-    afterShow?: () => void;
+import { CenterPopupProps } from '../center-popup';
+export declare type ModalProps = Pick<CenterPopupProps, 'afterClose' | 'afterShow' | 'bodyClassName' | 'bodyStyle' | 'destroyOnClose' | 'disableBodyScroll' | 'forceRender' | 'getContainer' | 'maskClassName' | 'maskStyle' | 'stopPropagation' | 'visible'> & {
     image?: string;
     header?: ReactNode;
     title?: ReactNode;
     content?: ReactNode;
     actions?: Action[];
     onAction?: (action: Action, index: number) => void | Promise<void>;
-    closeOnAction?: boolean;
     onClose?: () => void;
+    closeOnAction?: boolean;
     closeOnMaskClick?: boolean;
-    visible?: boolean;
-    getContainer?: GetContainer;
-    bodyStyle?: React.CSSProperties;
-    bodyClassName?: string;
-    maskStyle?: React.CSSProperties;
-    maskClassName?: string;
-    stopPropagation?: PropagationEvent[];
     showCloseButton?: boolean;
-    disableBodyScroll?: boolean;
 } & NativeProps;
 export declare const Modal: FC<ModalProps>;

package/cjs/components/modal/modal.js

@@ -7,88 +7,35 @@ exports.Modal = void 0;
 
 var _tslib = require("tslib");
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _ahooks = require("ahooks");
-
-var _mask = _interopRequireDefault(require("../mask"));
-
 var _modalActionButton = require("./modal-action-button");
 
 var _image = _interopRequireDefault(require("../image"));
 
 var _space = _interopRequireDefault(require("../space"));
 
-var _renderToContainer = require("../../utils/render-to-container");
-
-var _withStopPropagation = require("../../utils/with-stop-propagation");
-
 var _autoCenter = _interopRequireDefault(require("../auto-center"));
 
-var _web = require("@react-spring/web");
-
-var _nativeProps = require("../../utils/native-props");
-
-var _antdMobileIcons = require("antd-mobile-icons");
+var _centerPopup = _interopRequireDefault(require("../center-popup"));
 
 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); }
-
-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; }
-
 const defaultProps = {
-  visible: false,
   actions: [],
   closeOnAction: false,
   closeOnMaskClick: false,
-  stopPropagation: ['click'],
-  showCloseButton: false,
-  getContainer: null,
-  disableBodyScroll: true
+  getContainer: null
 };
 
 const Modal = p => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-  const unmountedRef = (0, _ahooks.useUnmountedRef)();
-  const style = (0, _web.useSpring)({
-    scale: props.visible ? 1 : 0.8,
-    opacity: props.visible ? 1 : 0,
-    config: {
-      mass: 1.2,
-      tension: 200,
-      friction: 25,
-      clamp: true
-    },
-    onStart: () => {
-      setActive(true);
-    },
-    onRest: () => {
-      var _a, _b;
-
-      if (unmountedRef.current) return;
-      setActive(props.visible);
-
-      if (props.visible) {
-        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
-      } else {
-        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
-      }
-    }
-  });
-  const [active, setActive] = (0, _react.useState)(props.visible);
-
-  const body = _react.default.createElement("div", {
-    className: (0, _classnames.default)(cls('body'), props.image && cls('with-image'), props.bodyClassName),
-    style: props.bodyStyle
-  }, props.showCloseButton && _react.default.createElement("a", {
-    className: (0, _classnames.default)(cls('close'), 'adm-plain-anchor'),
-    onClick: props.onClose
-  }, _react.default.createElement(_antdMobileIcons.CloseOutline, null)), !!props.image && _react.default.createElement("div", {
+
+  const element = _react.default.createElement(_react.default.Fragment, null, !!props.image && _react.default.createElement("div", {
     className: cls('image-container')
   }, _react.default.createElement(_image.default, {
     src: props.image,
@@ -120,26 +67,25 @@ const Modal = p => {
     });
   })));
 
-  const node = (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
-    className: cls(),
-    style: {
-      display: active ? undefined : 'none'
-    }
-  }, _react.default.createElement(_mask.default, {
+  return _react.default.createElement(_centerPopup.default, {
+    className: (0, _classnames.default)(cls(), props.className),
+    style: props.style,
+    afterClose: props.afterClose,
+    afterShow: props.afterShow,
+    showCloseButton: props.showCloseButton,
+    closeOnMaskClick: props.closeOnMaskClick,
+    onClose: props.onClose,
     visible: props.visible,
-    onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
-    style: props.maskStyle,
-    className: (0, _classnames.default)(cls('mask'), props.maskClassName),
-    disableBodyScroll: props.disableBodyScroll
-  }), _react.default.createElement("div", {
-    className: cls('wrap'),
-    style: {
-      pointerEvents: props.visible ? undefined : 'none'
-    }
-  }, _react.default.createElement(_web.animated.div, {
-    style: style
-  }, body)))));
-  return (0, _renderToContainer.renderToContainer)(props.getContainer, node);
+    getContainer: props.getContainer,
+    bodyStyle: props.bodyStyle,
+    bodyClassName: (0, _classnames.default)(cls('body'), props.image && cls('with-image'), props.bodyClassName),
+    maskStyle: props.maskStyle,
+    maskClassName: props.maskClassName,
+    stopPropagation: props.stopPropagation,
+    disableBodyScroll: props.disableBodyScroll,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender
+  }, element);
 };
 
 exports.Modal = Modal;

package/cjs/components/modal/modal.patch.css

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

package/cjs/components/modal/show.d.ts

@@ -1,5 +1,5 @@
 import { ModalProps } from './modal';
-export declare type ModalShowProps = Omit<ModalProps, 'visible'>;
+export declare type ModalShowProps = Omit<ModalProps, 'visible' | 'destroyOnClose' | 'forceRender'>;
 export declare type ModalShowHandler = {
     close: () => void;
 };

package/cjs/components/nav-bar/nav-bar.css

@@ -30,7 +30,7 @@
   margin-right: 4px;
 }
 .adm-nav-bar-left {
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -38,7 +38,7 @@
 .adm-nav-bar-title {
   justify-content: center;
   white-space: nowrap;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   padding: 0 12px;
 }
 .adm-nav-bar-right {

package/cjs/components/notice-bar/notice-bar.css

@@ -1,9 +1,9 @@
 .adm-notice-bar {
   --background-color: #ababab;
   --border-color: #999999;
-  --text-color: #ffffff;
-  --font-size: 15px;
-  --icon-font-size: 18px;
+  --text-color: var(--adm-color-white);
+  --font-size: var(--adm-font-size-7);
+  --icon-font-size: var(--adm-font-size-10);
   --height: 38px;
   height: var(--height);
   box-sizing: border-box;
@@ -61,6 +61,14 @@
   flex-shrink: 0;
   margin-left: 12px;
 }
+.adm-notice-bar-close {
+  width: 24px;
+  height: 24px;
+  margin-right: -3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .adm-notice-bar-close-icon {
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
 }

package/cjs/components/notice-bar/notice-bar.js

@@ -103,14 +103,16 @@ const NoticeBar = (0, _react.memo)(p => {
     className: `${classPrefix}-content-inner`
   }, props.content)), (props.closeable || props.extra) && _react.default.createElement("span", {
     className: `${classPrefix}-right`
-  }, props.extra, props.closeable && _react.default.createElement(_antdMobileIcons.CloseOutline, {
-    className: `${classPrefix}-close-icon`,
+  }, props.extra, props.closeable && _react.default.createElement("div", {
+    className: `${classPrefix}-close`,
     onClick: () => {
       var _a;
 
       setVisible(false);
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     }
-  }))));
+  }, _react.default.createElement(_antdMobileIcons.CloseOutline, {
+    className: `${classPrefix}-close-icon`
+  })))));
 });
 exports.NoticeBar = NoticeBar;

package/cjs/components/number-keyboard/number-keyboard.css

@@ -3,16 +3,17 @@
   flex-wrap: wrap;
   flex: 1;
 }
-.adm-number-keyboard-main.confirmed-style .sign-key {
+.adm-number-keyboard-main.adm-number-keyboard-main-confirmed-style .adm-number-keyboard-key-sign {
   background-color: var(--adm-color-white);
 }
 .adm-number-keyboard-popup.adm-popup {
   width: 100%;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   z-index: 1050;
 }
 .adm-number-keyboard-popup.adm-popup .adm-popup-body {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-number-keyboard-wrapper {
   display: flex;
@@ -20,22 +21,22 @@
 .adm-number-keyboard-header {
   height: 34px;
   line-height: 34px;
-  border-top: solid 1px #f5f5f5;
+  border-top: solid 1px var(--adm-color-border);
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0 12px;
   color: var(--adm-color-weak);
-  background-color: var(--adm-color-white);
+  background-color: var(--adm-color-background);
 }
 .adm-number-keyboard-header-close-button {
   padding: 0 12px;
   font-size: 16px;
 }
-.adm-number-keyboard-header.with-title {
+.adm-number-keyboard-header.adm-number-keyboard-header-with-title {
   justify-content: space-between;
 }
-.adm-number-keyboard-header.with-title .adm-number-keyboard-header-close-button {
+.adm-number-keyboard-header.adm-number-keyboard-header-with-title .adm-number-keyboard-header-close-button {
   padding-right: 0;
 }
 .adm-number-keyboard-footer {
@@ -58,7 +59,7 @@
   height: 48px;
   font-size: 22px;
   box-sizing: border-box;
-  border: solid 1px #f5f5f5;
+  border: solid 1px var(--adm-color-border);
   border-bottom: none;
   border-left: none;
 }
@@ -81,31 +82,28 @@
   content: ' ';
   box-sizing: content-box;
 }
-.adm-number-keyboard-key.mid-key {
+.adm-number-keyboard-key.adm-number-keyboard-key-mid {
   flex-basis: 66.67%;
 }
-.adm-number-keyboard-key.sign-key:active::before {
+.adm-number-keyboard-key.adm-number-keyboard-key-sign:active::before {
   opacity: 0.1;
 }
-.adm-number-keyboard-key.extra-key {
-  border-left: solid 1px #f5f5f5;
+.adm-number-keyboard-key.adm-number-keyboard-key-extra {
+  border-left: solid 1px var(--adm-color-border);
   border-right: none;
 }
-.adm-number-keyboard-key.extra-key,
-.adm-number-keyboard-key.number-key {
-  background-color: var(--adm-color-white);
+.adm-number-keyboard-key.adm-number-keyboard-key-extra,
+.adm-number-keyboard-key.adm-number-keyboard-key-number {
+  background-color: var(--adm-color-background);
 }
-.adm-number-keyboard-key.extra-key:active::before,
-.adm-number-keyboard-key.number-key:active::before {
+.adm-number-keyboard-key.adm-number-keyboard-key-extra:active::before,
+.adm-number-keyboard-key.adm-number-keyboard-key-number:active::before {
   opacity: 0.1;
 }
-.adm-number-keyboard-key.ok-key {
+.adm-number-keyboard-key.adm-number-keyboard-key-ok {
   background-color: var(--adm-color-primary);
   color: var(--adm-color-white);
   height: 144px;
   font-size: 16px;
   border: none;
 }
-.adm-number-keyboard-bs-key {
-  height: 20px;
-}

package/cjs/components/number-keyboard/number-keyboard.d.ts

@@ -1,22 +1,18 @@
 import React from 'react';
 import { PopupProps } from '../popup';
-import { GetContainer } from '../../utils/render-to-container';
 import { NativeProps } from '../../utils/native-props';
 export declare type NumberKeyboardProps = {
     visible?: boolean;
     title?: string;
-    getContainer?: GetContainer;
     confirmText?: string | null;
-    customKey?: '-' | '.' | 'X';
+    customKey?: string | [string, string];
     randomOrder?: boolean;
     showCloseButton?: boolean;
     onInput?: (v: string) => void;
     onDelete?: () => void;
     onClose?: () => void;
     onConfirm?: () => void;
-    afterShow?: () => void;
-    afterClose?: () => void;
     closeOnConfirm?: boolean;
     safeArea?: boolean;
-} & Pick<PopupProps, 'stopPropagation'> & NativeProps;
+} & Pick<PopupProps, 'afterClose' | 'afterShow' | 'getContainer' | 'destroyOnClose' | 'forceRender' | 'stopPropagation'> & NativeProps;
 export declare const NumberKeyboard: React.FC<NumberKeyboardProps>;

package/cjs/components/number-keyboard/number-keyboard.js

@@ -36,7 +36,9 @@ const defaultProps = {
   showCloseButton: true,
   confirmText: null,
   closeOnConfirm: true,
-  safeArea: true
+  safeArea: true,
+  destroyOnClose: false,
+  forceRender: false
 };
 
 const NumberKeyboard = p => {
@@ -55,13 +57,18 @@ const NumberKeyboard = p => {
   const keys = (0, _react.useMemo)(() => {
     const defaultKeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
     const keyList = randomOrder ? (0, _shuffle.shuffle)(defaultKeys) : defaultKeys;
+    const customKeys = Array.isArray(customKey) ? customKey : [customKey];
     keyList.push('0');
 
     if (confirmText) {
-      keyList.push(customKey || '');
+      if (customKeys.length === 2) {
+        keyList.splice(9, 0, customKeys.pop());
+      }
+
+      keyList.push(customKeys[0] || '');
     } else {
-      keyList.splice(9, 0, customKey || '');
-      keyList.push('BACKSPACE');
+      keyList.splice(9, 0, customKeys[0] || '');
+      keyList.push(customKeys[1] || 'BACKSPACE');
     }
 
     return keyList;
@@ -84,8 +91,7 @@ const NumberKeyboard = p => {
   const onBackspacePressEnd = () => {
     clearTimeout(timeoutRef.current);
     clearInterval(intervalRef.current);
-  }; // 点击键盘按键
-
+  };
 
   const onKeyPress = (e, key) => {
     var _a, _b;
@@ -107,18 +113,17 @@ const NumberKeyboard = p => {
         break;
 
       default:
-        // 当 customKey 不存在时，点击该键不应该触发 onInput
+        // onInput should't be called when customKey doesn't exist
         if (key !== '') onInput === null || onInput === void 0 ? void 0 : onInput(key);
         break;
     }
-  }; // 渲染 title 和 close button
-
+  };
 
   const renderHeader = () => {
     if (!showCloseButton && !title) return null;
     return _react.default.createElement("div", {
       className: (0, _classnames.default)(`${classPrefix}-header`, {
-        'with-title': !!title
+        [`${classPrefix}-header-with-title`]: !!title
       })
     }, title && _react.default.createElement("div", {
       className: `${classPrefix}-title`
@@ -132,17 +137,20 @@ const NumberKeyboard = p => {
       role: 'button',
       title: 'CLOSE'
     }, _react.default.createElement(_antdMobileIcons.DownOutline, null)));
-  }; // 渲染基础键盘按键
-
+  };
 
   const renderKey = (key, index) => {
     const isNumberKey = /^\d$/.test(key);
     const className = (0, _classnames.default)(`${classPrefix}-key`, {
-      'number-key': isNumberKey,
-      'sign-key': !isNumberKey && key,
-      'mid-key': index === 9 && !!confirmText
+      [`${classPrefix}-key-number`]: isNumberKey,
+      [`${classPrefix}-key-sign`]: !isNumberKey && key,
+      [`${classPrefix}-key-mid`]: index === 9 && !!confirmText && keys.length < 12
     });
-    return _react.default.createElement("div", {
+    const ariaProps = key ? {
+      role: 'button',
+      title: key
+    } : undefined;
+    return _react.default.createElement("div", Object.assign({
       key: key,
       className: className,
       onTouchStart: () => {
@@ -156,10 +164,8 @@ const NumberKeyboard = p => {
         if (key === 'BACKSPACE') {
           onBackspacePressEnd();
         }
-      },
-      title: key,
-      role: 'button'
-    }, key === 'BACKSPACE' ? _react.default.createElement(_antdMobileIcons.TextDeletionOutline, null) : key);
+      }
+    }, ariaProps), key === 'BACKSPACE' ? _react.default.createElement(_antdMobileIcons.TextDeletionOutline, null) : key);
   };
 
   return _react.default.createElement(_popup.default, {
@@ -169,7 +175,9 @@ const NumberKeyboard = p => {
     afterClose: props.afterClose,
     afterShow: props.afterShow,
     className: `${classPrefix}-popup`,
-    stopPropagation: props.stopPropagation
+    stopPropagation: props.stopPropagation,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender
   }, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     ref: keyboardRef,
     className: classPrefix,
@@ -180,12 +188,12 @@ const NumberKeyboard = p => {
     className: `${classPrefix}-wrapper`
   }, _react.default.createElement("div", {
     className: (0, _classnames.default)(`${classPrefix}-main`, {
-      'confirmed-style': !!confirmText
+      [`${classPrefix}-main-confirmed-style`]: !!confirmText
     })
   }, keys.map(renderKey)), !!confirmText && _react.default.createElement("div", {
     className: `${classPrefix}-confirm`
   }, _react.default.createElement("div", {
-    className: `${classPrefix}-key extra-key bs-key`,
+    className: `${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-bs`,
     onTouchStart: () => {
       onBackspacePressStart();
     },
@@ -196,7 +204,7 @@ const NumberKeyboard = p => {
     title: 'BACKSPACE',
     role: 'button'
   }, _react.default.createElement(_antdMobileIcons.TextDeletionOutline, null)), _react.default.createElement("div", {
-    className: `${classPrefix}-key extra-key ok-key`,
+    className: `${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-ok`,
     onTouchEnd: e => onKeyPress(e, 'OK'),
     role: 'button'
   }, confirmText))), props.safeArea && _react.default.createElement("div", {

package/cjs/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/cjs/components/passcode-input/index.d.ts

@@ -1,4 +1,4 @@
 import './passcode-input.less';
 import { PasscodeInput } from './passcode-input';
-export type { PasscodeInputProps } from './passcode-input';
+export type { PasscodeInputProps, PasscodeInputRef } from './passcode-input';
 export default PasscodeInput;