antd-mobile 5.23.0 → 5.24.0

package/2x/bundle/style.css

@@ -1912,12 +1912,14 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 }
 
 .adm-form {
-  --border-inner: solid 2px var(--adm-color-border);
-  --border-top: solid 2px var(--adm-color-border);
-  --border-bottom: solid 2px var(--adm-color-border);
+  --border-inner: solid 2px var(--adm-border-color);
+  --border-top: solid 2px var(--adm-border-color);
+  --border-bottom: solid 2px var(--adm-border-color);
+  --prefix-width: 6.8em;
   ---border-inner: var(--border-inner);
   ---border-top: var(--border-top);
   ---border-bottom: var(--border-bottom);
+  ---prefix-width: var(--prefix-width);
 }
 
 .adm-form .adm-list.adm-list {
@@ -1932,6 +1934,10 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   padding: 40px 24px;
 }
 
+.adm-form .adm-form-item-horizontal.adm-list-item {
+  --prefix-width: var(---prefix-width);
+}
+
 .adm-form-list-operation {
   text-align: center;
   color: #1677ff;
@@ -2006,7 +2012,6 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 
 .adm-form-item.adm-form-item-horizontal.adm-list-item {
   --align-items: stretch;
-  --prefix-width: 6.8em;
 }
 
 .adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {

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

@@ -1,9 +1,6 @@
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
-declare type Page = {
-    month: number;
-    year: number;
-};
+import { Page } from './convert';
 export declare type CalendarRef = {
     jumpTo: (page: Page | ((page: Page) => Page)) => void;
     jumpToToday: () => void;
@@ -20,6 +17,8 @@ export declare type CalendarProps = {
     max?: Date;
     min?: Date;
     shouldDisableDate?: (date: Date) => boolean;
+    minPage?: Page;
+    maxPage?: Page;
 } & ({
     selectionMode?: undefined;
     value?: undefined;
@@ -37,4 +36,3 @@ export declare type CalendarProps = {
     onChange?: (val: [Date, Date] | null) => void;
 }) & NativeProps;
 export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalendarRef>>;
-export {};

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

@@ -93,36 +93,58 @@ const Calendar = (0, _react.forwardRef)((p, ref) => {
         page = pageOrPageGenerator;
       }
 
-      setCurrent((0, _dayjs.default)().year(page.year).month(page.month - 1).date(1));
+      setCurrent((0, _convert.convertPageToDayjs)(page));
     },
     jumpToToday: () => {
       setCurrent((0, _dayjs.default)().date(1));
     }
   }));
 
+  const handlePageChange = (action, num, type) => {
+    const nxtCurrent = current[action](num, type);
+
+    if (action === 'subtract' && props.minPage) {
+      const minPage = (0, _convert.convertPageToDayjs)(props.minPage);
+
+      if (nxtCurrent.isBefore(minPage, type)) {
+        return;
+      }
+    }
+
+    if (action === 'add' && props.maxPage) {
+      const maxPage = (0, _convert.convertPageToDayjs)(props.maxPage);
+
+      if (nxtCurrent.isAfter(maxPage, type)) {
+        return;
+      }
+    }
+
+    setCurrent(current[action](num, type));
+  };
+
   const header = _react.default.createElement("div", {
     className: `${classPrefix}-header`
   }, _react.default.createElement("a", {
     className: `${classPrefix}-arrow-button ${classPrefix}-arrow-button-year`,
     onClick: () => {
-      setCurrent(current.subtract(1, 'year'));
+      handlePageChange('subtract', 1, 'year');
     }
   }, props.prevYearButton), _react.default.createElement("a", {
     className: `${classPrefix}-arrow-button ${classPrefix}-arrow-button-month`,
     onClick: () => {
-      setCurrent(current.subtract(1, 'month'));
+      handlePageChange('subtract', 1, 'month');
     }
   }, props.prevMonthButton), _react.default.createElement("div", {
     className: `${classPrefix}-title`
   }, locale.Calendar.renderYearAndMonth(current.year(), current.month() + 1)), _react.default.createElement("a", {
     className: (0, _classnames.default)(`${classPrefix}-arrow-button`, `${classPrefix}-arrow-button-right`, `${classPrefix}-arrow-button-right-month`),
     onClick: () => {
-      setCurrent(current.add(1, 'month'));
+      handlePageChange('add', 1, 'month');
     }
   }, props.nextMonthButton), _react.default.createElement("a", {
     className: (0, _classnames.default)(`${classPrefix}-arrow-button`, `${classPrefix}-arrow-button-right`, `${classPrefix}-arrow-button-right-year`),
     onClick: () => {
-      setCurrent(current.add(1, 'year'));
+      handlePageChange('add', 1, 'year');
     }
   }, props.nextYearButton));
 

package/2x/cjs/components/calendar/convert.d.ts

@@ -1,2 +1,8 @@
+import dayjs from 'dayjs';
 export declare type DateRange = [Date, Date] | null;
+export declare type Page = {
+    month: number;
+    year: number;
+};
 export declare function convertValueToRange(selectionMode: 'single' | 'range' | undefined, value: Date | [Date, Date] | null): DateRange;
+export declare function convertPageToDayjs(page: Page): dayjs.Dayjs;

package/2x/cjs/components/calendar/convert.js

@@ -3,8 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.convertPageToDayjs = convertPageToDayjs;
 exports.convertValueToRange = convertValueToRange;
 
+var _dayjs = _interopRequireDefault(require("dayjs"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function convertValueToRange(selectionMode, value) {
   if (selectionMode === undefined) {
     return null;
@@ -19,4 +24,8 @@ function convertValueToRange(selectionMode, value) {
   }
 
   return [value, value];
+}
+
+function convertPageToDayjs(page) {
+  return (0, _dayjs.default)().year(page.year).month(page.month - 1).date(1);
 }

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

@@ -7,6 +7,8 @@ exports.Ellipsis = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _runes = _interopRequireDefault(require("runes"));
+
 var _withDefaultProps = require("../../utils/with-default-props");
 
 var _nativeProps = require("../../utils/native-props");
@@ -17,6 +19,8 @@ var _ahooks = require("ahooks");
 
 var _withStopPropagation = require("../../utils/with-stop-propagation");
 
+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; }
@@ -37,6 +41,11 @@ const Ellipsis = p => {
   const [ellipsised, setEllipsised] = (0, _react.useState)({});
   const [expanded, setExpanded] = (0, _react.useState)(false);
   const [exceeded, setExceeded] = (0, _react.useState)(false);
+  const chars = (0, _react.useMemo)(() => (0, _runes.default)(props.content), [props.content]);
+
+  function getSubString(start, end) {
+    return chars.slice(start, end).join('');
+  }
 
   function calcEllipsised() {
     const root = rootRef.current;
@@ -75,11 +84,11 @@ const Ellipsis = p => {
         if (right - left <= 1) {
           if (props.direction === 'end') {
             return {
-              leading: props.content.slice(0, left) + '...'
+              leading: getSubString(0, left) + '...'
             };
           } else {
             return {
-              tailing: '...' + props.content.slice(right, end)
+              tailing: '...' + getSubString(right, end)
             };
           }
         }
@@ -87,9 +96,9 @@ const Ellipsis = p => {
         const middle = Math.round((left + right) / 2);
 
         if (props.direction === 'end') {
-          container.innerText = props.content.slice(0, middle) + '...' + actionText;
+          container.innerText = getSubString(0, middle) + '...' + actionText;
         } else {
-          container.innerText = actionText + '...' + props.content.slice(middle, end);
+          container.innerText = actionText + '...' + getSubString(middle, end);
         }
 
         if (container.offsetHeight <= maxHeight) {
@@ -110,14 +119,14 @@ const Ellipsis = p => {
       function checkMiddle(leftPart, rightPart) {
         if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
           return {
-            leading: props.content.slice(0, leftPart[0]) + '...',
-            tailing: '...' + props.content.slice(rightPart[1], end)
+            leading: getSubString(0, leftPart[0]) + '...',
+            tailing: '...' + getSubString(rightPart[1], end)
           };
         }
 
         const leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
         const rightPartMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
-        container.innerText = props.content.slice(0, leftPartMiddle) + '...' + actionText + '...' + props.content.slice(rightPartMiddle, end);
+        container.innerText = getSubString(0, leftPartMiddle) + '...' + actionText + '...' + getSubString(rightPartMiddle, end);
 
         if (container.offsetHeight <= maxHeight) {
           return checkMiddle([leftPartMiddle, leftPart[1]], [rightPart[0], rightPartMiddle]);

package/2x/cjs/components/form/form-item.css

@@ -67,7 +67,6 @@
 
 .adm-form-item.adm-form-item-horizontal.adm-list-item {
   --align-items: stretch;
-  --prefix-width: 6.8em;
 }
 
 .adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {

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

@@ -1,10 +1,12 @@
 .adm-form {
-  --border-inner: solid 2px var(--adm-color-border);
-  --border-top: solid 2px var(--adm-color-border);
-  --border-bottom: solid 2px var(--adm-color-border);
+  --border-inner: solid 2px var(--adm-border-color);
+  --border-top: solid 2px var(--adm-border-color);
+  --border-bottom: solid 2px var(--adm-border-color);
+  --prefix-width: 6.8em;
   ---border-inner: var(--border-inner);
   ---border-top: var(--border-top);
   ---border-bottom: var(--border-bottom);
+  ---prefix-width: var(--prefix-width);
 }
 
 .adm-form .adm-list.adm-list {
@@ -19,6 +21,10 @@
   padding: 40px 24px;
 }
 
+.adm-form .adm-form-item-horizontal.adm-list-item {
+  --prefix-width: var(---prefix-width);
+}
+
 .adm-form-list-operation {
   text-align: center;
   color: #1677ff;

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

@@ -4,13 +4,13 @@ import { ListProps } from '../list';
 import type { FormProps as RcFormProps, FormInstance as RCFormInstance } from 'rc-field-form';
 import { FormContextType } from './context';
 export declare type FormInstance = Pick<RCFormInstance, 'getFieldValue' | 'getFieldsValue' | 'getFieldError' | 'getFieldsError' | 'isFieldTouched' | 'isFieldsTouched' | 'resetFields' | 'setFields' | 'setFieldsValue' | 'submit' | 'validateFields'>;
-export declare type FormProps = Pick<RcFormProps, 'form' | 'initialValues' | 'name' | 'preserve' | 'validateMessages' | 'validateTrigger' | 'onFieldsChange' | 'onFinish' | 'onFinishFailed' | 'onValuesChange' | 'children'> & NativeProps<'--border-inner' | '--border-top' | '--border-bottom'> & Partial<FormContextType> & {
+export declare type FormProps = Pick<RcFormProps, 'form' | 'initialValues' | 'name' | 'preserve' | 'validateMessages' | 'validateTrigger' | 'onFieldsChange' | 'onFinish' | 'onFinishFailed' | 'onValuesChange' | 'children'> & NativeProps<'--border-inner' | '--border-top' | '--border-bottom' | '--prefix-width'> & Partial<FormContextType> & {
     footer?: ReactNode;
     mode?: ListProps['mode'];
 };
 export declare const Form: React.ForwardRefExoticComponent<Pick<RcFormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & {
     className?: string | undefined;
-    style?: (React.CSSProperties & Partial<Record<"--border-bottom" | "--border-inner" | "--border-top", string>>) | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--border-bottom" | "--border-inner" | "--border-top" | "--prefix-width", string>>) | undefined;
     tabIndex?: number | undefined;
 } & React.AriaAttributes & Partial<FormContextType> & {
     footer?: ReactNode;

package/2x/cjs/components/form/index.css

@@ -1,10 +1,12 @@
 .adm-form {
-  --border-inner: solid 2px var(--adm-color-border);
-  --border-top: solid 2px var(--adm-color-border);
-  --border-bottom: solid 2px var(--adm-color-border);
+  --border-inner: solid 2px var(--adm-border-color);
+  --border-top: solid 2px var(--adm-border-color);
+  --border-bottom: solid 2px var(--adm-border-color);
+  --prefix-width: 6.8em;
   ---border-inner: var(--border-inner);
   ---border-top: var(--border-top);
   ---border-bottom: var(--border-bottom);
+  ---prefix-width: var(--prefix-width);
 }
 
 .adm-form .adm-list.adm-list {
@@ -19,6 +21,10 @@
   padding: 40px 24px;
 }
 
+.adm-form .adm-form-item-horizontal.adm-list-item {
+  --prefix-width: var(---prefix-width);
+}
+
 .adm-form-list-operation {
   text-align: center;
   color: #1677ff;
@@ -93,7 +99,6 @@
 
 .adm-form-item.adm-form-item-horizontal.adm-list-item {
   --align-items: stretch;
-  --prefix-width: 6.8em;
 }
 
 .adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {

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

@@ -9,7 +9,7 @@ export type { ValidateMessages, FieldData, NamePath, } from 'rc-field-form/es/in
 export type { FormArrayField, FormArrayOperation, FormArrayProps, } from './form-array';
 declare const _default: import("react").ForwardRefExoticComponent<Pick<import("rc-field-form").FormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & {
     className?: string | undefined;
-    style?: (import("react").CSSProperties & Partial<Record<"--border-bottom" | "--border-inner" | "--border-top", string>>) | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--border-bottom" | "--border-inner" | "--border-top" | "--prefix-width", string>>) | undefined;
     tabIndex?: number | undefined;
 } & import("react").AriaAttributes & Partial<import("./context").FormContextType> & {
     footer?: import("react").ReactNode;

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

@@ -167,11 +167,11 @@ const Popover = (0, _react.forwardRef)((p, ref) => {
   (0, _ahooks.useClickAway)(() => {
     if (!props.trigger) return;
     setVisible(false);
-  }, () => {
+  }, [() => {
     var _a;
 
     return (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.element;
-  });
+  }, floatingRef], ['click', 'touchmove']);
   const shouldRender = (0, _shouldRender.useShouldRender)(visible, false, props.destroyOnHide);
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_wrapper.Wrapper, {
     ref: targetRef

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

@@ -161,7 +161,8 @@ const Stepper = p => {
     role: 'spinbutton',
     "aria-valuenow": Number(inputValue),
     "aria-valuemax": max,
-    "aria-valuemin": min
+    "aria-valuemin": min,
+    inputMode: 'decimal'
   })), _react.default.createElement(_button.default, {
     className: `${classPrefix}-plus`,
     onClick: handlePlus,

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

@@ -50,8 +50,10 @@ const defaultProps = {
   stuckAtBoundary: true,
   rubberband: true
 };
+let currentUid;
 const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const [uid] = (0, _react.useState)({});
   const isVertical = props.direction === 'vertical';
   const slideRatio = props.slideSize / 100;
   const offsetRatio = props.trackOffset / 100;
@@ -153,6 +155,13 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
     const bind = (0, _react2.useDrag)(state => {
       dragCancelRef.current = state.cancel;
       if (!state.intentional) return;
+
+      if (state.first && !currentUid) {
+        currentUid = uid;
+      }
+
+      if (currentUid !== uid) return;
+      currentUid = state.last ? undefined : uid;
       const slidePixels = getSlidePixels();
       if (!slidePixels) return;
       const paramIndex = isVertical ? 1 : 0;

package/2x/es/components/calendar/calendar.d.ts

@@ -1,9 +1,6 @@
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
-declare type Page = {
-    month: number;
-    year: number;
-};
+import { Page } from './convert';
 export declare type CalendarRef = {
     jumpTo: (page: Page | ((page: Page) => Page)) => void;
     jumpToToday: () => void;
@@ -20,6 +17,8 @@ export declare type CalendarProps = {
     max?: Date;
     min?: Date;
     shouldDisableDate?: (date: Date) => boolean;
+    minPage?: Page;
+    maxPage?: Page;
 } & ({
     selectionMode?: undefined;
     value?: undefined;
@@ -37,4 +36,3 @@ export declare type CalendarProps = {
     onChange?: (val: [Date, Date] | null) => void;
 }) & NativeProps;
 export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalendarRef>>;
-export {};

package/2x/es/components/calendar/calendar.js

@@ -9,7 +9,7 @@ import { useConfig } from '../config-provider';
 import isoWeek from 'dayjs/plugin/isoWeek';
 import { useUpdateEffect } from 'ahooks';
 import { usePropsValue } from '../../utils/use-props-value';
-import { convertValueToRange } from './convert';
+import { convertValueToRange, convertPageToDayjs } from './convert';
 dayjs.extend(isoWeek);
 const classPrefix = 'adm-calendar';
 const defaultProps = {
@@ -67,35 +67,58 @@ export const Calendar = forwardRef((p, ref) => {
         page = pageOrPageGenerator;
       }
 
-      setCurrent(dayjs().year(page.year).month(page.month - 1).date(1));
+      setCurrent(convertPageToDayjs(page));
     },
     jumpToToday: () => {
       setCurrent(dayjs().date(1));
     }
   }));
+
+  const handlePageChange = (action, num, type) => {
+    const nxtCurrent = current[action](num, type);
+
+    if (action === 'subtract' && props.minPage) {
+      const minPage = convertPageToDayjs(props.minPage);
+
+      if (nxtCurrent.isBefore(minPage, type)) {
+        return;
+      }
+    }
+
+    if (action === 'add' && props.maxPage) {
+      const maxPage = convertPageToDayjs(props.maxPage);
+
+      if (nxtCurrent.isAfter(maxPage, type)) {
+        return;
+      }
+    }
+
+    setCurrent(current[action](num, type));
+  };
+
   const header = React.createElement("div", {
     className: `${classPrefix}-header`
   }, React.createElement("a", {
     className: `${classPrefix}-arrow-button ${classPrefix}-arrow-button-year`,
     onClick: () => {
-      setCurrent(current.subtract(1, 'year'));
+      handlePageChange('subtract', 1, 'year');
     }
   }, props.prevYearButton), React.createElement("a", {
     className: `${classPrefix}-arrow-button ${classPrefix}-arrow-button-month`,
     onClick: () => {
-      setCurrent(current.subtract(1, 'month'));
+      handlePageChange('subtract', 1, 'month');
     }
   }, props.prevMonthButton), React.createElement("div", {
     className: `${classPrefix}-title`
   }, locale.Calendar.renderYearAndMonth(current.year(), current.month() + 1)), React.createElement("a", {
     className: classNames(`${classPrefix}-arrow-button`, `${classPrefix}-arrow-button-right`, `${classPrefix}-arrow-button-right-month`),
     onClick: () => {
-      setCurrent(current.add(1, 'month'));
+      handlePageChange('add', 1, 'month');
     }
   }, props.nextMonthButton), React.createElement("a", {
     className: classNames(`${classPrefix}-arrow-button`, `${classPrefix}-arrow-button-right`, `${classPrefix}-arrow-button-right-year`),
     onClick: () => {
-      setCurrent(current.add(1, 'year'));
+      handlePageChange('add', 1, 'year');
     }
   }, props.nextYearButton));
   const maxDay = useMemo(() => props.max && dayjs(props.max), [props.max]);

package/2x/es/components/calendar/convert.d.ts

@@ -1,2 +1,8 @@
+import dayjs from 'dayjs';
 export declare type DateRange = [Date, Date] | null;
+export declare type Page = {
+    month: number;
+    year: number;
+};
 export declare function convertValueToRange(selectionMode: 'single' | 'range' | undefined, value: Date | [Date, Date] | null): DateRange;
+export declare function convertPageToDayjs(page: Page): dayjs.Dayjs;

package/2x/es/components/calendar/convert.js

@@ -1,3 +1,4 @@
+import dayjs from 'dayjs';
 export function convertValueToRange(selectionMode, value) {
   if (selectionMode === undefined) {
     return null;
@@ -12,4 +13,7 @@ export function convertValueToRange(selectionMode, value) {
   }
 
   return [value, value];
+}
+export function convertPageToDayjs(page) {
+  return dayjs().year(page.year).month(page.month - 1).date(1);
 }

package/2x/es/components/ellipsis/ellipsis.js

@@ -1,4 +1,5 @@
-import React, { useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
+import runes from 'runes';
 import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
 import { useResizeEffect } from '../../utils/use-resize-effect';
@@ -19,6 +20,11 @@ export const Ellipsis = p => {
   const [ellipsised, setEllipsised] = useState({});
   const [expanded, setExpanded] = useState(false);
   const [exceeded, setExceeded] = useState(false);
+  const chars = useMemo(() => runes(props.content), [props.content]);
+
+  function getSubString(start, end) {
+    return chars.slice(start, end).join('');
+  }
 
   function calcEllipsised() {
     const root = rootRef.current;
@@ -57,11 +63,11 @@ export const Ellipsis = p => {
         if (right - left <= 1) {
           if (props.direction === 'end') {
             return {
-              leading: props.content.slice(0, left) + '...'
+              leading: getSubString(0, left) + '...'
             };
           } else {
             return {
-              tailing: '...' + props.content.slice(right, end)
+              tailing: '...' + getSubString(right, end)
             };
           }
         }
@@ -69,9 +75,9 @@ export const Ellipsis = p => {
         const middle = Math.round((left + right) / 2);
 
         if (props.direction === 'end') {
-          container.innerText = props.content.slice(0, middle) + '...' + actionText;
+          container.innerText = getSubString(0, middle) + '...' + actionText;
         } else {
-          container.innerText = actionText + '...' + props.content.slice(middle, end);
+          container.innerText = actionText + '...' + getSubString(middle, end);
         }
 
         if (container.offsetHeight <= maxHeight) {
@@ -92,14 +98,14 @@ export const Ellipsis = p => {
       function checkMiddle(leftPart, rightPart) {
         if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
           return {
-            leading: props.content.slice(0, leftPart[0]) + '...',
-            tailing: '...' + props.content.slice(rightPart[1], end)
+            leading: getSubString(0, leftPart[0]) + '...',
+            tailing: '...' + getSubString(rightPart[1], end)
           };
         }
 
         const leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
         const rightPartMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
-        container.innerText = props.content.slice(0, leftPartMiddle) + '...' + actionText + '...' + props.content.slice(rightPartMiddle, end);
+        container.innerText = getSubString(0, leftPartMiddle) + '...' + actionText + '...' + getSubString(rightPartMiddle, end);
 
         if (container.offsetHeight <= maxHeight) {
           return checkMiddle([leftPartMiddle, leftPart[1]], [rightPart[0], rightPartMiddle]);

package/2x/es/components/form/form-item.css

@@ -67,7 +67,6 @@
 
 .adm-form-item.adm-form-item-horizontal.adm-list-item {
   --align-items: stretch;
-  --prefix-width: 6.8em;
 }
 
 .adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {

package/2x/es/components/form/form.css

@@ -1,10 +1,12 @@
 .adm-form {
-  --border-inner: solid 2px var(--adm-color-border);
-  --border-top: solid 2px var(--adm-color-border);
-  --border-bottom: solid 2px var(--adm-color-border);
+  --border-inner: solid 2px var(--adm-border-color);
+  --border-top: solid 2px var(--adm-border-color);
+  --border-bottom: solid 2px var(--adm-border-color);
+  --prefix-width: 6.8em;
   ---border-inner: var(--border-inner);
   ---border-top: var(--border-top);
   ---border-bottom: var(--border-bottom);
+  ---prefix-width: var(--prefix-width);
 }
 
 .adm-form .adm-list.adm-list {
@@ -19,6 +21,10 @@
   padding: 40px 24px;
 }
 
+.adm-form .adm-form-item-horizontal.adm-list-item {
+  --prefix-width: var(---prefix-width);
+}
+
 .adm-form-list-operation {
   text-align: center;
   color: #1677ff;

package/2x/es/components/form/form.d.ts

@@ -4,13 +4,13 @@ import { ListProps } from '../list';
 import type { FormProps as RcFormProps, FormInstance as RCFormInstance } from 'rc-field-form';
 import { FormContextType } from './context';
 export declare type FormInstance = Pick<RCFormInstance, 'getFieldValue' | 'getFieldsValue' | 'getFieldError' | 'getFieldsError' | 'isFieldTouched' | 'isFieldsTouched' | 'resetFields' | 'setFields' | 'setFieldsValue' | 'submit' | 'validateFields'>;
-export declare type FormProps = Pick<RcFormProps, 'form' | 'initialValues' | 'name' | 'preserve' | 'validateMessages' | 'validateTrigger' | 'onFieldsChange' | 'onFinish' | 'onFinishFailed' | 'onValuesChange' | 'children'> & NativeProps<'--border-inner' | '--border-top' | '--border-bottom'> & Partial<FormContextType> & {
+export declare type FormProps = Pick<RcFormProps, 'form' | 'initialValues' | 'name' | 'preserve' | 'validateMessages' | 'validateTrigger' | 'onFieldsChange' | 'onFinish' | 'onFinishFailed' | 'onValuesChange' | 'children'> & NativeProps<'--border-inner' | '--border-top' | '--border-bottom' | '--prefix-width'> & Partial<FormContextType> & {
     footer?: ReactNode;
     mode?: ListProps['mode'];
 };
 export declare const Form: React.ForwardRefExoticComponent<Pick<RcFormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & {
     className?: string | undefined;
-    style?: (React.CSSProperties & Partial<Record<"--border-bottom" | "--border-inner" | "--border-top", string>>) | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--border-bottom" | "--border-inner" | "--border-top" | "--prefix-width", string>>) | undefined;
     tabIndex?: number | undefined;
 } & React.AriaAttributes & Partial<FormContextType> & {
     footer?: ReactNode;