antd-mobile 5.0.0-rc.8 → 5.1.0

package/2x/README.md

@@ -1,18 +1,22 @@
-<img src="https://gw.alipayobjects.com/mdn/rms_ee68a8/afts/img/A*1Ps5R4QVn28AAAAAAAAAAAAAARQnAQ" alt="logo" width="100%" />
+<img src="https://gw.alipayobjects.com/mdn/rms_ee68a8/afts/img/A*hjjDS5Yy-ooAAAAAAAAAAAAAARQnAQ" alt="logo" width="100%" />
 
-![npm (tag)](https://img.shields.io/npm/v/antd-mobile/next)
-![GitHub (Pre-)Release Date](https://img.shields.io/github/release-date-pre/ant-design/ant-design-mobile)
-![npm](https://img.shields.io/npm/dw/antd-mobile-v5-count)
-![gzip size](https://img.badgesize.io/https:/unpkg.com/antd-mobile@next/umd/antd-mobile.js?label=gzip%20size&compression=gzip)
+[English Doc](https://mobile.ant.design) | [中文文档](https://mobile.ant.design/zh) | [Discord](https://discord.gg/jmNvw4WFYn) | [钉钉](https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*hBjlR4nUWjkAAAAAAAAAAAAAARQnAQ)
+
+![npm (tag)](https://img.shields.io/npm/v/antd-mobile)
+![GitHub Release Date](https://img.shields.io/github/release-date/ant-design/ant-design-mobile)
+![npm](https://img.shields.io/npm/dw/antd-mobile)
+![npm](https://img.shields.io/npm/dw/antd-mobile-v5-count?label=downloads%285.x%29)
+![gzip size](https://img.badgesize.io/https:/unpkg.com/antd-mobile/umd/antd-mobile.js?label=gzip%20size&compression=gzip)
 [![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/ant-design/ant-design-mobile.svg)](http://isitmaintained.com/project/ant-design/ant-design-mobile 'Average time to resolve an issue')
 [![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design-mobile.svg)](http://isitmaintained.com/project/ant-design/ant-design-mobile 'Percentage of issues still open')
 ![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/ant-design/ant-design-mobile/Check/v5)
+[![codecov](https://codecov.io/gh/ant-design/ant-design-mobile/branch/master/graph/badge.svg?token=2kJyJBg1nK)](https://codecov.io/gh/ant-design/ant-design-mobile)
 ![GitHub](https://img.shields.io/github/license/ant-design/ant-design-mobile)
 
 ```bash
-$ npm install --save antd-mobile@next
+$ npm install --save antd-mobile
 # or
-$ yarn add antd-mobile@next
+$ yarn add antd-mobile
 ```
 
 - **Fast**: It is carefully optimized for harsh scenes, without configuration, you can have the best package size and ultimate performance.
@@ -20,18 +24,12 @@ $ yarn add antd-mobile@next
 - **Atomic**: The function of each component, neither more nor less, is exactly what you need.
 - **Fluent**: With smooth gestures and delicate animation, it helps the product create the ultimate experience.
 
-v5(Poplar) is the next major version of antd-mobile, we recommend using it instead of v2.
-
 You can also play with antd-mobile just in browser with [Codesandbox](https://codesandbox.io/s/antd-mobile-snrxr?file=/package.json). No need to prepare development environment.
 
 If you found bugs or would like to request some new features, please consider opening an [issue](https://github.com/ant-design/ant-design-mobile/issues/new).
 
 If you have some question about how to use ant-mobile, you can start a [discussion thread](https://github.com/ant-design/ant-design-mobile/discussions).
 
-Feel free to join our DingDing group:
-
-<img src="https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*fo-tQ5wRk5QAAAAAAAAAAAAAARQnAQ" alt="ding-group" width="360" />
-
 ---
 
 Thanks to all the contributors of antd-mobile:

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

@@ -25,7 +25,6 @@
 .adm-action-sheet-button-item {
   padding: 28px;
   text-align: center;
-  border-radius: 0;
 }
 
 .adm-action-sheet-button-item-name {

package/2x/cjs/components/action-sheet/action-sheet.js

@@ -22,14 +22,14 @@ var _renderToBody = require("../../utils/render-to-body");
 
 var _safeArea = _interopRequireDefault(require("../safe-area"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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 _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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; }
+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; }
 
-var classPrefix = "adm-action-sheet";
-var defaultProps = {
+const classPrefix = `adm-action-sheet`;
+const defaultProps = {
   visible: false,
   actions: [],
   cancelText: '',
@@ -38,11 +38,11 @@ var defaultProps = {
   safeArea: true
 };
 
-var ActionSheet = function ActionSheet(p) {
-  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-  return /*#__PURE__*/_react["default"].createElement(_popup["default"], {
+const ActionSheet = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  return _react.default.createElement(_popup.default, {
     visible: props.visible,
-    onMaskClick: function onMaskClick() {
+    onMaskClick: () => {
       var _a, _b;
 
       (_a = props.onMaskClick) === null || _a === void 0 ? void 0 : _a.call(props);
@@ -52,56 +52,56 @@ var ActionSheet = function ActionSheet(p) {
       }
     },
     afterClose: props.afterClose,
-    className: classPrefix + "-popup",
+    className: `${classPrefix}-popup`,
     getContainer: props.getContainer
-  }, (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+  }, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
-  }, props.extra && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-extra"
-  }, props.extra), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-button-list"
-  }, props.actions.map(function (action, index) {
-    var _classNames;
-
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      key: action.key,
-      className: classPrefix + "-button-item-wrapper"
-    }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
-      block: true,
-      fill: 'none',
-      disabled: action.disabled,
-      onClick: function onClick() {
-        var _a, _b, _c;
-
-        (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
-        (_b = props.onAction) === null || _b === void 0 ? void 0 : _b.call(props, action, index);
-
-        if (props.closeOnAction) {
-          (_c = props.onClose) === null || _c === void 0 ? void 0 : _c.call(props);
-        }
-      },
-      className: (0, _classnames["default"])(classPrefix + "-button-item", (_classNames = {}, _classNames[classPrefix + "-button-item-danger"] = action.danger, _classNames))
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: classPrefix + "-button-item-name"
-    }, action.text), action.description && /*#__PURE__*/_react["default"].createElement("div", {
-      className: classPrefix + "-button-item-description"
-    }, action.description)));
-  })), props.cancelText && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-cancel"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-button-item-wrapper"
-  }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
+  }, props.extra && _react.default.createElement("div", {
+    className: `${classPrefix}-extra`
+  }, props.extra), _react.default.createElement("div", {
+    className: `${classPrefix}-button-list`
+  }, props.actions.map((action, index) => _react.default.createElement("div", {
+    key: action.key,
+    className: `${classPrefix}-button-item-wrapper`
+  }, _react.default.createElement(_button.default, {
     block: true,
     fill: 'none',
-    className: classPrefix + "-button-item",
-    onClick: function onClick() {
+    shape: 'rectangular',
+    disabled: action.disabled,
+    onClick: () => {
+      var _a, _b, _c;
+
+      (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
+      (_b = props.onAction) === null || _b === void 0 ? void 0 : _b.call(props, action, index);
+
+      if (props.closeOnAction) {
+        (_c = props.onClose) === null || _c === void 0 ? void 0 : _c.call(props);
+      }
+    },
+    className: (0, _classnames.default)(`${classPrefix}-button-item`, {
+      [`${classPrefix}-button-item-danger`]: action.danger
+    })
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-button-item-name`
+  }, action.text), action.description && _react.default.createElement("div", {
+    className: `${classPrefix}-button-item-description`
+  }, action.description))))), props.cancelText && _react.default.createElement("div", {
+    className: `${classPrefix}-cancel`
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-button-item-wrapper`
+  }, _react.default.createElement(_button.default, {
+    block: true,
+    fill: 'none',
+    shape: 'rectangular',
+    className: `${classPrefix}-button-item`,
+    onClick: () => {
       var _a;
 
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-button-item-name"
-  }, props.cancelText)))), props.safeArea && /*#__PURE__*/_react["default"].createElement(_safeArea["default"], {
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-button-item-name`
+  }, props.cancelText)))), props.safeArea && _react.default.createElement(_safeArea.default, {
     position: 'bottom'
   }))));
 };
@@ -109,12 +109,9 @@ var ActionSheet = function ActionSheet(p) {
 exports.ActionSheet = ActionSheet;
 
 function showActionSheet(props) {
-  var Wrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_, ref) {
-    var _useState = (0, _react.useState)(false),
-        visible = _useState[0],
-        setVisible = _useState[1];
-
-    (0, _react.useEffect)(function () {
+  const Wrapper = (0, _react.forwardRef)((_, ref) => {
+    const [visible, setVisible] = (0, _react.useState)(false);
+    (0, _react.useEffect)(() => {
       setVisible(true);
     }, []);
 
@@ -125,15 +122,13 @@ function showActionSheet(props) {
       setVisible(false);
     }
 
-    (0, _react.useImperativeHandle)(ref, function () {
-      return {
-        close: handleClose
-      };
-    });
-    return /*#__PURE__*/_react["default"].createElement(ActionSheet, Object.assign({}, props, {
+    (0, _react.useImperativeHandle)(ref, () => ({
+      close: handleClose
+    }));
+    return _react.default.createElement(ActionSheet, Object.assign({}, props, {
       visible: visible,
       onClose: handleClose,
-      afterClose: function afterClose() {
+      afterClose: () => {
         var _a;
 
         (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
@@ -141,12 +136,12 @@ function showActionSheet(props) {
       }
     }));
   });
-  var ref = /*#__PURE__*/(0, _react.createRef)();
-  var unmount = (0, _renderToBody.renderToBody)( /*#__PURE__*/_react["default"].createElement(Wrapper, {
+  const ref = (0, _react.createRef)();
+  const unmount = (0, _renderToBody.renderToBody)(_react.default.createElement(Wrapper, {
     ref: ref
   }));
   return {
-    close: function close() {
+    close: () => {
       var _a;
 
       (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();

package/2x/cjs/components/action-sheet/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./action-sheet.css");
 
@@ -15,4 +15,4 @@ var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_ac
   show: _actionSheet2.showActionSheet
 });
 
-exports["default"] = _default;
+exports.default = _default;

package/2x/cjs/components/auto-center/auto-center.js

@@ -9,15 +9,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _nativeProps = require("../../utils/native-props");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var classPrefix = 'adm-auto-center';
+const classPrefix = 'adm-auto-center';
 
-var AutoCenter = function AutoCenter(props) {
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+const AutoCenter = props => {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-content"
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-content`
   }, props.children)));
 };
 

package/2x/cjs/components/auto-center/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./auto-center.css");
 
 var _autoCenter2 = require("./auto-center");
 
 var _default = _autoCenter2.AutoCenter;
-exports["default"] = _default;
+exports.default = _default;

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

@@ -0,0 +1,16 @@
+.adm-avatar {
+  --size: var(--adm-avatar-size, 88px);
+  --border-radius: var(--adm-avatar-border-radius, 8px);
+  border-radius: var(--border-radius);
+}
+
+.adm-avatar.adm-image {
+  --width: var(--size);
+  --height: var(--size);
+}
+
+.adm-avatar-fallback {
+  height: 100%;
+  width: 100%;
+  display: block;
+}

package/2x/cjs/components/avatar/avatar.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { ImageProps } from '../image';
+export declare type AvatarProps = {
+    src: string;
+    fallback?: ReactNode;
+    fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+} & Pick<ImageProps, 'alt' | 'lazy' | 'onClick' | 'onError'> & NativeProps<'--size' | '--border-radius'>;
+export declare const Avatar: FC<AvatarProps>;

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Avatar = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _nativeProps = require("../../utils/native-props");
+
+var _index = require("../../index");
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _fallback = require("./fallback");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const classPrefix = 'adm-avatar';
+const defaultProps = {
+  fallback: _react.default.createElement(_fallback.Fallback, null),
+  fit: 'cover'
+};
+
+const Avatar = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(_index.Image, {
+    className: classPrefix,
+    src: props.src,
+    fallback: props.fallback,
+    placeholder: props.fallback,
+    alt: props.alt,
+    lazy: props.lazy,
+    onClick: props.onClick,
+    onError: props.onError
+  }));
+};
+
+exports.Avatar = Avatar;

package/2x/cjs/components/avatar/fallback.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Fallback: React.MemoExoticComponent<() => JSX.Element>;

package/2x/cjs/components/avatar/fallback.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Fallback = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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 Fallback = (0, _react.memo)(() => _react.default.createElement("svg", {
+  className: 'adm-avatar-fallback',
+  width: '88px',
+  height: '88px',
+  viewBox: '0 0 88 88',
+  version: '1.1'
+}, _react.default.createElement("title", null, "\u7F16\u7EC4 3"), _react.default.createElement("defs", null, _react.default.createElement("polygon", {
+  id: 'path-1',
+  points: '0 0 88 0 88 88 0 88'
+})), _react.default.createElement("g", {
+  id: '\u9875\u9762-1',
+  stroke: 'none',
+  strokeWidth: '1',
+  fill: 'none',
+  fillRule: 'evenodd'
+}, _react.default.createElement("g", {
+  id: '\u8BED\u96C0',
+  transform: 'translate(-495.000000, -71.000000)'
+}, _react.default.createElement("g", {
+  id: '\u7F16\u7EC4-3',
+  transform: 'translate(495.000000, 71.000000)'
+}, _react.default.createElement("mask", {
+  id: 'mask-2',
+  fill: 'white'
+}, _react.default.createElement("use", {
+  xlinkHref: '#path-1'
+})), _react.default.createElement("use", {
+  id: 'Mask',
+  fill: '#EEEEEE',
+  fillRule: 'nonzero',
+  xlinkHref: '#path-1'
+}), _react.default.createElement("path", {
+  d: 'M44.5707528,16 L43.4292117,16 L42.9575197,16.0086403 L42.9575195,16.0086403 C36.5215787,16.2615464 31.4341803,21.5678078 31.4344832,28.0273864 L31.4344832,34.7776551 L31.4495601,35.3716788 L31.4495593,35.3716628 C31.599687,38.5368723 32.9422041,41.5269327 35.2058513,43.7376716 L38.2147759,46.6775505 L38.4086219,46.8913989 C38.7747759,47.3385365 38.9750835,47.9001589 38.9750835,48.4833848 L38.9750835,48.8938006 L38.9556989,49.1897326 L38.9556989,49.1897325 C38.8577746,49.9812662 38.3754713,50.67284 37.667703,51.036605 L18.7375269,60.7440265 L18.4101421,60.9276334 L18.4101423,60.9276333 C16.9141658,61.8418636 16.0009389,63.4714674 16,65.2283758 L16,66.070809 L16.0129231,66.3948217 C16.1766149,68.4123376 17.860922,70 19.91569,70 L68.0843101,70 L68.08431,70 C70.2460467,70 71.9988087,68.243122 72,66.0751224 L72,65.2326893 C72,63.3382982 70.9446194,61.6037466 69.2624598,60.7440295 L50.3322837,51.036608 L50.3322835,51.0366079 C49.5291218,50.6249082 49.0240448,49.7962466 49.024903,48.8916436 L49.024903,48.4812278 C49.024903,47.8029608 49.3005955,47.1527756 49.7852106,46.6775603 L52.7941352,43.7376813 L52.7941354,43.7376811 C55.204308,41.3832325 56.5636029,38.151975 56.5633606,34.7776456 L56.5633606,28.0273769 L56.5633606,28.0273774 C56.5633606,21.3848531 51.1940878,16 44.5707524,16 L44.5707528,16 Z',
+  id: '\u5F62\u72B6',
+  fill: '#CCCCCC',
+  fillRule: 'nonzero',
+  mask: 'url(#mask-2)'
+}))))));
+exports.Fallback = Fallback;

package/2x/cjs/components/avatar/index.d.ts

@@ -0,0 +1,4 @@
+import './avatar.less';
+import { Avatar } from './avatar';
+export type { AvatarProps } from './avatar';
+export default Avatar;

package/2x/cjs/components/avatar/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("./avatar.css");
+
+var _avatar2 = require("./avatar");
+
+var _default = _avatar2.Avatar;
+exports.default = _default;

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

@@ -4,20 +4,26 @@
 }
 
 .adm-badge {
-  display: inline-block;
-  color: #fff;
-  font-weight: normal;
-  text-align: center;
+  display: inline-flex;
   vertical-align: middle;
-  box-sizing: border-box;
-  min-width: 32px;
+  box-sizing: content-box;
   border-radius: 200px;
-  padding: 0 8px;
-  font-size: 18px;
-  line-height: 1.2;
-  white-space: nowrap;
+  background-color: var(--color);
   --right: 0;
   --top: 0;
+  --color: var(--adm-badge-color, #ff411c);
+}
+
+.adm-badge-content {
+  color: #fff;
+  box-sizing: border-box;
+  min-width: 16px;
+  padding: 2px 8px;
+  font-size: 18px;
+  line-height: 24px;
+  white-space: nowrap;
+  font-weight: normal;
+  text-align: center;
 }
 
 .adm-badge-fixed {
@@ -32,4 +38,8 @@
   width: 20px;
   height: 20px;
   border-radius: 10px;
+}
+
+.adm-badge-bordered {
+  border: solid 2px var(--adm-color-white);
 }

package/2x/cjs/components/badge/badge.d.ts

@@ -4,5 +4,6 @@ export declare const dot: unique symbol;
 export declare type BadgeProps = {
     content?: React.ReactNode | typeof dot;
     color?: string;
-} & NativeProps<'--right' | '--top'>;
+    bordered?: boolean;
+} & NativeProps<'--right' | '--top' | '--color'>;
 export declare const Badge: FC<BadgeProps>;

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

@@ -11,33 +11,30 @@ var _react = _interopRequireDefault(require("react"));
 
 var _nativeProps = require("../../utils/native-props");
 
-var _withDefaultProps = require("../../utils/with-default-props");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var classPrefix = "adm-badge";
-var dot = Symbol();
+const classPrefix = `adm-badge`;
+const dot = Symbol();
 exports.dot = dot;
 
-var Badge = function Badge(p) {
-  var _classNames;
-
-  var props = (0, _withDefaultProps.mergeProps)({
-    color: '#FF411C'
-  }, p);
-  var content = props.content,
-      color = props.color,
-      children = props.children;
-  var isDot = content === dot;
-  var badgeCls = (0, _classnames["default"])(classPrefix, (_classNames = {}, _classNames[classPrefix + "-fixed"] = !!children, _classNames[classPrefix + "-dot"] = isDot, _classNames));
-  var element = content ? (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+const Badge = props => {
+  const {
+    content,
+    color,
+    children
+  } = props;
+  const isDot = content === dot;
+  const badgeCls = (0, _classnames.default)(classPrefix, !!children && `${classPrefix}-fixed`, isDot && `${classPrefix}-dot`, props.bordered && `${classPrefix}-bordered`);
+  const element = content ? (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: badgeCls,
     style: {
-      backgroundColor: color
+      '--color': color
     }
-  }, !isDot && content)) : null;
-  return children ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-wrap"
+  }, !isDot && _react.default.createElement("div", {
+    className: `${classPrefix}-content`
+  }, content))) : null;
+  return children ? _react.default.createElement("div", {
+    className: `${classPrefix}-wrap`
   }, children, element) : element;
 };
 

package/2x/cjs/components/badge/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./badge.css");
 
@@ -15,4 +15,4 @@ var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_ba
   dot: _badge2.dot
 });
 
-exports["default"] = _default;
+exports.default = _default;